refactor: compatible with Storybook 8.4.0-alpha.2 (#137)

rspack-contrib · Oct 4, 2024 · 4536812 · 4536812
1 parent ac8db5a
commit 4536812
Show file tree

Hide file tree

Showing 13 changed files with 481 additions and 442 deletions.
diff --git a/packages/builder-rsbuild/package.json b/packages/builder-rsbuild/package.json
@@ -34,7 +34,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",
@@ -85,7 +85,7 @@
  "@types/pretty-hrtime": "^1.0.3",
  "pretty-hrtime": "^1.0.3",
  "slash": "^5.1.0",
- "storybook": "8.4.0-alpha.0",
+ "storybook": "8.4.0-alpha.4",
  "typescript": "^5.6.2"
  },
  "peerDependencies": {

diff --git a/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts b/packages/builder-rsbuild/src/preview/virtual-module-mapping.ts
@@ -5,7 +5,6 @@ import { webpackIncludeRegexp } from '@storybook/core-webpack'
 import slash from 'slash'
 import {
  getBuilderOptions,
- handlebars,
  loadPreviewOrConfigFile,
  normalizeStories,
  readTemplate,
@@ -69,18 +68,30 @@ export const getVirtualModules = async (options: Options) => {
  })
 
  const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'))
- virtualModules[configEntryPath] = handlebars(
+ virtualModules[configEntryPath] = (
  await readTemplate(
  require.resolve(
- 'storybook-builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars',
+ 'storybook-builder-rsbuild/templates/virtualModuleModernEntry.js',
  ),
- ),
- {
- storiesFilename,
- previewAnnotations,
- },
+ )
+ )
+ .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)
 
  for (const [key, value] of Object.entries(virtualModules)) {

diff --git a/packages/builder-rsbuild/templates/virtualModuleModernEntry.js b/packages/builder-rsbuild/templates/virtualModuleModernEntry.js
@@ -0,0 +1,38 @@
+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 })
+ })
+}
diff --git a/packages/builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars b/packages/builder-rsbuild/templates/virtualModuleModernEntry.js.handlebars
diff --git a/packages/framework-html/package.json b/packages/framework-html/package.json
@@ -47,9 +47,9 @@
  },
  "devDependencies": {
  "@rsbuild/core": "1.0.8",
- "@storybook/types": "8.4.0-alpha.0",
+ "@storybook/types": "8.4.0-alpha.4",
  "@types/resolve": "^1.20.6",
- "storybook": "8.4.0-alpha.0",
+ "storybook": "8.4.0-alpha.4",
  "typescript": "^5.6.2"
  },
  "peerDependencies": {

diff --git a/packages/framework-react/package.json b/packages/framework-react/package.json
@@ -57,11 +57,11 @@
  },
  "devDependencies": {
  "@rsbuild/core": "1.0.8",
- "@storybook/types": "8.4.0-alpha.0",
+ "@storybook/types": "8.4.0-alpha.4",
  "@types/resolve": "^1.20.6",
  "react": "18.3.1",
  "react-dom": "18.3.1",
- "storybook": "8.4.0-alpha.0",
+ "storybook": "8.4.0-alpha.4",
  "typescript": "^5.6.2"
  },
  "peerDependencies": {

diff --git a/packages/framework-vue3/package.json b/packages/framework-vue3/package.json
@@ -47,7 +47,7 @@
  "devDependencies": {
  "@rsbuild/core": "1.0.8",
  "@types/node": "^18.0.0",
- "storybook": "8.4.0-alpha.0",
+ "storybook": "8.4.0-alpha.4",
  "typescript": "^5.6.2"
  },
  "peerDependencies": {