Running JavaScript with Templates in Storybook for HTML

				
					<xmp>// .storybook/script-runner.js

// only needed if using Storybook's `storyStoreV7` option (not sure why)
if (module.hot) {
  module.hot.decline();
}

window.IS_STORYBOOK = true;

const root = document.querySelector('#root');

// on page-load, make a webpack 'context' for all script-modules
const scriptImports = require.context(
  '/components',
  true,
  /(?<!stories)\.(?:j|t)s$/
);

// stores script-modules as values
const scriptModules = new Map(
  scriptImports.keys().map((key) => [key, scriptImports(key)])
);

if (module.hot) {
  module.hot.accept(scriptImports.id, () => {
    /*
      This callback will run whenever a pattern-level script has changed.
      This is where we make sure that our mechanism can handle such changes
      without forcing the developer to do a page-reload in the browser.
    */

    // make a fresh webpack 'context' for script-modules (cf. `scriptImports`)
    const freshScriptImports = require.context(
      '/components',
      true,
      /(?<!stories)\.(?:j|t)s$/
    );

    // make a fresh store of script-modules (cf. `scriptModules`)
    const freshScriptModules = new Map(
      freshScriptImports.keys().map((key) => [key, freshScriptImports(key)])
    );

    // if a script has been deleted, remove it from the `scriptModules` cache
    for (const [key] of scriptModules) {
      if (!freshScriptModules.has(key)) scriptModules.delete(key);
    }

    /*
      Next we'll loop through the script-modules in case one is changed or new.
      If we find one that has a matching template whose markup is *already*
      on the page, then we'll force the story to re-render, because when the
      new/updated script runs we want it to run on FRESH markup (and we don't
      want to have to reload the page to make that happen). To force the
      story to re-render, we'll "invalidate" the module corresponding to
      the template in question.

      But first we'll need a webpack "context" for all the template-modules.
    */

    // make a webpack "context" for all the template-modules
    const twigImports = require.context('/components', true, /\.twig$/);

    // we'll also need an array of the context's keys
    const twigKeys = twigImports.keys();

    // make sure that invalidating a template-module will force a re-render
    module.hot.accept(twigImports.id);

    // loop through fresh script-modules in case one is changed or new
    for (const [key, scriptModule] of freshScriptModules) {
      // weed out unchanged ones
      if (scriptModules.get(key) === scriptModule) continue;

      // found new/changed script, so set it in `scriptModules` cache
      scriptModules.set(key, scriptModule);

      // we only care about modules that default-export a function
      if (typeof scriptModule.default !== 'function') continue;

      const fn = scriptModule.default;

      // use our filing-and-naming scheme to get candidate webpack-key
      const candidateTwigKey = key.replace(/(?:j|t)s$/, 'twig');

      // look for a template-module with a matching webpack-key
      const twigKey = twigKeys.find((e) => e === candidateTwigKey);

      // if there's no match, there's nothing to do
      if (!twigKey) continue;

      /*
        Webpack key will be template's path relative to `components` directory,
        but starting with a period (like `./Button/Button.twig`).
        We'll need the string *without* that period to match it against
        strings like `/components/Button/Button.twig` in our HTML comments.
      */
      const twigPath = twigKey.slice(1);

      /*
        Now loop through the HTML comments in `#root`, looking for
        one of our `<!-- START /components/...` flags that matches `twigPath`.
        If we find one, invalidate that Twig module, and we're done here.
      */
      const nodeIterator = document.createNodeIterator(
        root,
        NodeFilter.SHOW_COMMENT
      );

      let currentNode;
      while ((currentNode = nodeIterator.nextNode())) {
        if (currentNode.nodeValue?.trim().endsWith(twigPath)) {
          // found it!

          console.log(
            `[STORYBOOK TWIG SCRIPT-RUNNER] hot-replacing ${twigPath} to execute ${
              fn.name || 'anonymous function'
            } on fresh markup`
          );

          // invalidate the Twig module, forcing a re-render
          require.cache[twigImports.resolve(twigKey)]?.hot.invalidate();
          break;
        }
      }
    }
  });
}

// this MutationObserver runs the needed scripts when `#root` has changed
new MutationObserver(() => {
  /*
    We'll loop through the HTML comments, and keep a list of all
    the template relative-path "flags" we encounter (but we'll replace
    `/components` at the beginning of the string with a period, so that
    it's in its webpack-key form).

    Then for each one we found, we'll look for a companion script-function
    (in our `scriptModules` cache) and execute it if it exists.
  */

  /*
    For keeping track of the webpack-keys for the template-flags we find.
    We use a Set to prevent duplicates (so we'll only run each function once).
  */
  const twigKeys = new Set();

  const commentPrefix = 'START: /components';

  const nodeIterator = document.createNodeIterator(
    root,
    NodeFilter.SHOW_COMMENT
  );

  let currentNode;
  while ((currentNode = nodeIterator.nextNode())) {
    const value = currentNode.nodeValue?.trim();
    if (value?.startsWith(commentPrefix)) {
      twigKeys.add(value.replace(RegExp(`^${commentPrefix}`), '.'));
    }
  }

  // for each twigKey we found, run the corresponding function (if it exists)
  for (const twigKey of twigKeys) {
    const scriptModuleKeyJs = twigKey.replace(/twig$/, 'js');
    const scriptModuleKeyTs = twigKey.replace(/twig$/, 'ts');
    const scriptModule =
      scriptModules.get(scriptModuleKeyJs) ||
      scriptModules.get(scriptModuleKeyTs);

    const fn = scriptModule?.default;

    if (typeof fn === 'function') {
      console.log(
        `[STORYBOOK TWIG SCRIPT-RUNNER] executing ${
          fn.name || 'anonymous function'
        } for ${twigKey}`
      );
      fn();
    }
  }
}).observe(root, { childList: true, subtree: false });</xmp>