marko-hot-reload

Watch changes in Marko templates in a folder and notify Marko to hot reload them.

Installation

npm install marko-hot-reload

or with yarn:

yarn add marko-hot-reload

Usage

const markoHotReload = require('marko-hot-reload');

const requiredTemplatesPath = '/path/to/templates/folder';
const requiredPageTemplatesPath = '/path/to/pages/folder';

// These options can prevent some issues on some Mac machines
const optionalChokidarWatchOptions = {
  usePolling: true,
  interval: 1000,
  useFsEvents: false,
};

const optionalFileModifiedOptions = {
  silent: true,
};

const optionalLogger = {
  info: () => {},
  error: () => {},
};

markoHotReload.enable({
  templatesPath: requiredTemplatesPath,
  pageTemplatesPath: requiredPageTemplatesPath,
  watchOptions: optionalChokidarWatchOptions,
  fileModifedOptions: optionalFileModifiedOptions,
  logger: optionalLogger,
});

The way it works

Given this folders structure, with templatesPath = "/client/views" & pageTemplatesPath= "/client/views/pages" :

client
  views
    components
    layout
      desktop-layout.tpl
      mobile-layout.tpl
      components
        header.tpl
    pages
      faq
        desktop-index.tpl
        mobile-index.tpl
      home
        desktop-index.tpl
        mobile-index.tpl

Whenever header.tpl is modified, the Hot Reload will invalidates it & all its direct ancestors up to the templates folder, as well as all the page templates. I.e. all the files invalidated are:

• /client/views/layout/components/header.tpl
• /client/views/layout/desktop-layout.tpl
• /client/views/layout/mobile-layout.tpl
• /client/views/pages/faq/desktop-index.tpl
• /client/views/pages/faq/mobile-index.tpl
• /client/views/pages/home/desktop-index.tpl
• /client/views/pages/home/mobile-index.tpl

Contribute

1. Fork it: git clone https://github.com/softonic/marko-hot-reload.git
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Added some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D