Core: Remove handlebars usage

.gitignore

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

.vscode/settings.json

@@ -4,7 +4,7 @@
     "editor.formatOnSave": true
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.defaultFormatter": "vscode.typescript-language-features",
     "editor.formatOnSave": true
   },
   "[typescript]": {

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

@@ -4999,7 +4999,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-slot@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -5015,7 +5015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0":
+"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -6090,7 +6090,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"
@@ -13721,14 +13720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^10.2.1":
-  version: 10.3.0
-  resolution: "emoji-regex@npm:10.3.0"
-  checksum: 10c0/b4838e8dcdceb44cf47f59abe352c25ff4fe7857acaf5fb51097c427f6f75b44d052eb907a7a3b86f86bc4eae3a93f5c2b7460abe79c407307e6212d65c91163
-  languageName: node
-  linkType: hard
-
-"emoji-regex@npm:^10.3.0":
+"emoji-regex@npm:^10.2.1, emoji-regex@npm:^10.3.0":
   version: 10.4.0
   resolution: "emoji-regex@npm:10.4.0"
   checksum: 10c0/a3fcedfc58bfcce21a05a5f36a529d81e88d602100145fcca3dc6f795e3c8acc4fc18fe773fbf9b6d6e9371205edb3afa2668ec3473fa2aa7fd47d2a9d46482d
@@ -16477,24 +16469,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"
@@ -18332,16 +18306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.20.0":
-  version: 1.21.0
-  resolution: "jiti@npm:1.21.0"
-  bin:
-    jiti: bin/jiti.js
-  checksum: 10c0/7f361219fe6c7a5e440d5f1dba4ab763a5538d2df8708cdc22561cf25ea3e44b837687931fca7cdd8cdd9f567300e90be989dd1321650045012d8f9ed6aab07f
-  languageName: node
-  linkType: hard
-
-"jiti@npm:^1.21.6":
+"jiti@npm:^1.20.0, jiti@npm:^1.21.6":
   version: 1.21.6
   resolution: "jiti@npm:1.21.6"
   bin:
@@ -20897,7 +20862,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
@@ -23148,16 +23113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:*, prettier@npm:^3.1.1":
-  version: 3.2.5
-  resolution: "prettier@npm:3.2.5"
-  bin:
-    prettier: bin/prettier.cjs
-  checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
-  languageName: node
-  linkType: hard
-
-"prettier@npm:^3.2.5":
+"prettier@npm:*, prettier@npm:^3.1.1, prettier@npm:^3.2.5":
   version: 3.3.3
   resolution: "prettier@npm:3.3.3"
   bin:
@@ -25455,16 +25411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2":
-  version: 7.6.2
-  resolution: "semver@npm:7.6.2"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.6.3":
+"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -27668,15 +27615,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"
@@ -29440,13 +29378,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"