Merge pull request #29208 from storybookjs/norbert/remove-handlebars

Core: Remove `handlebars` usage

.gitignore

@@ -59,3 +59,5 @@ code/.vite-inspect
 .nx/cache
 !**/fixtures/**/yarn.lock
 code/core/report
+
+*storybook.log

code/.eslintrc.js

@@ -42,6 +42,13 @@ module.exports = {
     '@typescript-eslint/default-param-last': 'off',
   },
   overrides: [
+    {
+      files: ['**/templates/virtualModuleModernEntry.js'],
+      rules: {
+        'no-underscore-dangle': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/frameworks/angular/template/**/*'],

code/builders/builder-webpack5/package.json

@@ -41,7 +41,7 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
-    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
     "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",

code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts

@@ -2,7 +2,6 @@ import { join, resolve } from 'node:path';
 
 import {
   getBuilderOptions,
-  handlebars,
   loadPreviewOrConfigFile,
   normalizeStories,
   readTemplate,
@@ -51,18 +50,28 @@ export const getVirtualModules = async (options: Options) => {
   const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
   virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport });
   const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
-  virtualModules[configEntryPath] = handlebars(
+  virtualModules[configEntryPath] = (
     await readTemplate(
-      require.resolve(
-        '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
-      )
-    ),
-    {
-      storiesFilename,
-      previewAnnotations,
-    }
+      require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js')
+    )
+  )
+    .replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`)
+    .replaceAll(
+      `'{{previewAnnotations}}'`,
+      previewAnnotations
+        .filter(Boolean)
+        .map((entry) => `'${entry}'`)
+        .join(',')
+    )
+    .replaceAll(
+      `'{{previewAnnotations_requires}}'`,
+      previewAnnotations
+        .filter(Boolean)
+        .map((entry) => `require('${entry}')`)
+        .join(',')
+    )
     // We need to double escape `\` for webpack. We may have some in windows paths
-  ).replace(/\\/g, '\\\\');
+    .replace(/\\/g, '\\\\');
   entries.push(configEntryPath);
 
   return {

code/builders/builder-webpack5/templates/virtualModuleModernEntry.js

@@ -0,0 +1,33 @@
+import { createBrowserChannel } from 'storybook/internal/channels';
+import { PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
+
+import { global } from '@storybook/global';
+
+import { importFn } from '{{storiesFilename}}';
+
+const getProjectAnnotations = () => composeConfigs(['{{previewAnnotations_requires}}']);
+
+const channel = createBrowserChannel({ page: 'preview' });
+addons.setChannel(channel);
+
+if (global.CONFIG_TYPE === 'DEVELOPMENT') {
+  window.__STORYBOOK_SERVER_CHANNEL__ = channel;
+}
+
+const preview = new PreviewWeb(importFn, getProjectAnnotations);
+
+window.__STORYBOOK_PREVIEW__ = preview;
+window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
+window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept('{{storiesFilename}}', () => {
+    // importFn has changed so we need to patch the new one in
+    preview.onStoriesChanged({ importFn });
+  });
+
+  import.meta.webpackHot.accept(['{{previewAnnotations}}'], () => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+  });
+}

code/core/package.json

@@ -375,7 +375,6 @@
     "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",
     "globby": "^14.0.1",
-    "handlebars": "^4.7.7",
     "jiti": "^1.21.6",
     "js-yaml": "^4.1.0",
     "lazy-universal-dotenv": "^4.0.0",

code/core/src/common/index.ts

@@ -18,7 +18,6 @@ export * from './utils/get-storybook-info';
 export * from './utils/get-storybook-refs';
 export * from './utils/glob-to-regexp';
 export * from './utils/HandledError';
-export * from './utils/handlebars';
 export * from './utils/interpolate';
 export * from './utils/interpret-files';
 export * from './utils/interpret-require';

code/yarn.lock

@@ -6088,7 +6088,6 @@ __metadata:
     get-npm-tarball-url: "npm:^2.0.3"
     glob: "npm:^10.0.0"
     globby: "npm:^14.0.1"
-    handlebars: "npm:^4.7.7"
     jiti: "npm:^1.21.6"
     js-yaml: "npm:^4.1.0"
     jsdoc-type-pratt-parser: "npm:^4.0.0"
@@ -16465,24 +16464,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"handlebars@npm:^4.7.7":
-  version: 4.7.8
-  resolution: "handlebars@npm:4.7.8"
-  dependencies:
-    minimist: "npm:^1.2.5"
-    neo-async: "npm:^2.6.2"
-    source-map: "npm:^0.6.1"
-    uglify-js: "npm:^3.1.4"
-    wordwrap: "npm:^1.0.0"
-  dependenciesMeta:
-    uglify-js:
-      optional: true
-  bin:
-    handlebars: bin/handlebars
-  checksum: 10c0/7aff423ea38a14bb379316f3857fe0df3c5d66119270944247f155ba1f08e07a92b340c58edaa00cfe985c21508870ee5183e0634dcb53dd405f35c93ef7f10d
-  languageName: node
-  linkType: hard
-
 "happy-dom@npm:^14.12.0":
   version: 14.12.0
   resolution: "happy-dom@npm:14.12.0"
@@ -20876,7 +20857,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
+"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -27629,15 +27610,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uglify-js@npm:^3.1.4":
-  version: 3.17.4
-  resolution: "uglify-js@npm:3.17.4"
-  bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 10c0/8b7fcdca69deb284fed7d2025b73eb747ce37f9aca6af53422844f46427152d5440601b6e2a033e77856a2f0591e4167153d5a21b68674ad11f662034ec13ced
-  languageName: node
-  linkType: hard
-
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -29401,13 +29373,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrap@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "wordwrap@npm:1.0.0"
-  checksum: 10c0/7ed2e44f3c33c5c3e3771134d2b0aee4314c9e49c749e37f464bf69f2bcdf0cbf9419ca638098e2717cff4875c47f56a007532f6111c3319f557a2ca91278e92
-  languageName: node
-  linkType: hard
-
 "workerpool@npm:^3.1.1":
   version: 3.1.2
   resolution: "workerpool@npm:3.1.2"