fractal.watcher.js

/**
 * Custom implementation to connect laralvel-mix and fractal's browser-sync
 * This solution is far from beign in the docs so this is how it works:
 *  1. We let laravel webpack to compile the assets (including the js and scss from the fractal library)
 *  2. Start standard laravel-mix BrowserSync implementation (this could be deactivated if is not needed in webpack.mix.js)
 *  3. Start fractal BrowserSync without the watcher nor automatic reloading
 *  4. Once the output is done at /public/dist by laravel-mix we manually reload the fractal BrowserSync implementation
 *
 *  All this to ensure Browser sync in fractal is only reloading once per change, should'n be an issue when using fractal
 *  as standalone but when BS watcher detects multiple files beign generated by mix it will reload twice or more making
 *  everything slow. Browser Sync currently supports debouncing as an option (v2.6 required) but current fractal version
 *  uses v2.26.14 (https://browsersync.io/docs/options#option-reloadDebounce)
 *
 *  TODO: Explore the idea of injecting only modified files using https://browsersync.io/docs/api#api-reload args
 */

const fractal = require('./fractal.config.js')
const mix = require('laravel-mix')

let fractalInstance
let isRunning = false

function start () {
  mix.after(() => {
    if (fractalInstance) {
      fractalInstance.reload()
      fractalInstance.log('Reloading Browsers...')
    }
  })

  // Allow following extensions to automatically reload
  const reloadRE = /\.(twig|json|yml)$/g

  const server = fractal.web.server({
    syncOptions: {
      open: true,
      notify: true,
      logLevel: 'info',
      logSnippet: false,
      ui: false,
      logPrefix: 'Fractal BSync',
      // no docs for this setting, ref from code https://github.com/frctl/fractal/blob/main/packages/web/src/server.js#L121
      watchOptions: {
        // Ignore all changes from watcher.
        // Could have used https://browsersync.io/docs/options#option-ignore but didnt work for me.
        // I think this is because fractal manually reloads using its own watcher
        // See the source for more info https://github.com/frctl/fractal/blob/main/packages/web/src/server.js#L164
        ignored (file) {
          if (reloadRE.test(file)) {
            return false
          }
          return true
        }
      },
      callbacks: {
        ready: function (_, bs) {
          // Expose fractal Browser Sync implementation
          const logger = bs.getLogger('Fractal BSync')
          fractalInstance = {
            log (msg) {
              logger.info(msg)
            },
            reload () {
              bs.publicInstance.reload()
            }
          }
        }
      }
    }
  })
  // Wait for mix to finish compiling the assets
  // then start the fractal instance (but only once)
  mix.after(() => {
    if (!isRunning) {
      isRunning = true
      server.start(true).then(function () {
        return fractalInstance.log('Mix and fractal connected')
      })
    }
  })
}

module.exports = start