From 42131f4965f0988103df41004ebfdee11874d273 Mon Sep 17 00:00:00 2001 From: Bob Fanger Date: Thu, 17 Feb 2022 04:09:59 +0100 Subject: [PATCH] Fix: svelte (#240) 1. Re-enabled the csfPlugin for svelte 2. Updated svelte dependencies, that fixed a `TypeError: RegisterContext is not a constructor` error. (Svelte compiler was in 'ssr' mode) Fixes #224 (Also implemented support for preprocessors inside *.stories.svelte files) --- package.json | 2 +- packages/example-svelte/package.json | 4 +- .../storybook-builder-vite/optimizeDeps.ts | 1 + .../svelte/csf-plugin.ts | 14 ++- .../storybook-builder-vite/vite-config.ts | 4 +- yarn.lock | 92 +++++++++++-------- 6 files changed, 70 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 45403bc8..05f1ed9d 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "example": "NODE_OPTIONS=--enable-source-maps yarn workspace example-${NAME:-vue} storybook", "example:react": "NAME=react yarn example", "example:react-ts": "NAME=react-ts yarn example", - "example:svetle": "NAME=svetle yarn example", + "example:svelte": "NAME=svelte yarn example", "example:vue": "NAME=vue yarn example", "example:workspaces": "NAME=workspaces yarn example" }, diff --git a/packages/example-svelte/package.json b/packages/example-svelte/package.json index b2060745..349feaa2 100644 --- a/packages/example-svelte/package.json +++ b/packages/example-svelte/package.json @@ -11,7 +11,7 @@ "author": "", "license": "MIT", "dependencies": { - "svelte": "^3.38.3" + "svelte": "^3.46.4" }, "devDependencies": { "@storybook/addon-actions": "^6.4.0", @@ -19,7 +19,7 @@ "@storybook/addon-links": "^6.4.0", "@storybook/addon-svelte-csf": "^1.1.0", "@storybook/svelte": "^6.4.0", - "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11", + "@sveltejs/vite-plugin-svelte": "^1.0.0-next.37", "storybook-builder-vite": "workspace:*", "vite": "2.7.0" } diff --git a/packages/storybook-builder-vite/optimizeDeps.ts b/packages/storybook-builder-vite/optimizeDeps.ts index 7fffb166..96a66e93 100644 --- a/packages/storybook-builder-vite/optimizeDeps.ts +++ b/packages/storybook-builder-vite/optimizeDeps.ts @@ -29,6 +29,7 @@ export async function getOptimizeDeps(root: string, options: ExtendedOptions) { '@storybook/csf', '@storybook/preview-web', '@storybook/react', + '@storybook/svelte', '@storybook/vue3', 'acorn-jsx', 'acorn-walk', diff --git a/packages/storybook-builder-vite/svelte/csf-plugin.ts b/packages/storybook-builder-vite/svelte/csf-plugin.ts index 6ef18722..1aae42fe 100644 --- a/packages/storybook-builder-vite/svelte/csf-plugin.ts +++ b/packages/storybook-builder-vite/svelte/csf-plugin.ts @@ -2,14 +2,21 @@ import { getNameFromFilename } from '@storybook/addon-svelte-csf/dist/cjs/parser import { readFileSync } from 'fs'; import { extractStories } from '@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories'; const parser = require.resolve('@storybook/addon-svelte-csf/dist/esm/parser/collect-stories').replace(/[/\\]/g, '/'); +import type { Options } from "@sveltejs/vite-plugin-svelte" +import * as svelte from "svelte/compiler" -export default { +export default function csfPlugin(svelteOptions?: Options) { + return { name: 'storybook-addon-svelte-csf', enforce: 'post', - transform(code: string, id: string) { + async transform(code: string, id: string) { if (/\.stories\.svelte$/.test(id)) { + const component = getNameFromFilename(id); - const source = readFileSync(id).toString(); + let source = readFileSync(id).toString(); + if (svelteOptions && svelteOptions.preprocess) { + source = (await svelte.preprocess(source, svelteOptions.preprocess)).code + } const all = extractStories(source); const { stories } = all; const storyDef = Object.entries(stories) @@ -36,4 +43,5 @@ export default { }; } }, +} }; diff --git a/packages/storybook-builder-vite/vite-config.ts b/packages/storybook-builder-vite/vite-config.ts index 425be4da..05906b85 100644 --- a/packages/storybook-builder-vite/vite-config.ts +++ b/packages/storybook-builder-vite/vite-config.ts @@ -76,8 +76,8 @@ export async function pluginConfig(options: ExtendedOptions, _type: PluginConfig } try { - const csfPlugin = require('./svelte/csf-plugin'); - plugins.push(csfPlugin); + const csfPlugin = require('./svelte/csf-plugin').default; + plugins.push(csfPlugin(svelteOptions)); } catch (err) { if ((err as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') { throw new Error( diff --git a/yarn.lock b/yarn.lock index d91be367..c551b621 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2209,25 +2209,23 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.1.0": - version: 4.1.0 - resolution: "@rollup/pluginutils@npm:4.1.0" +"@rollup/pluginutils@npm:^4.1.1": + version: 4.1.1 + resolution: "@rollup/pluginutils@npm:4.1.1" dependencies: estree-walker: ^2.0.1 picomatch: ^2.2.2 - peerDependencies: - rollup: ^1.20.0||^2.0.0 - checksum: 5ef767b4e57aaea4ad223af2fa50e5ee1e2d8a94bd79f534b55485b5aeb89e8839236e45e2c0730541f18534288fba92ae223c54683613f26071e3474564ddd9 + checksum: 405f681c7d32661980aa3caa928ff22e1c06f0e081db1550e6ab9c179dc9d3d8d63c05dcc7338fe65ab3f856a56c465696a51300b83e98171956fcb141106e39 languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.1.1": - version: 4.1.1 - resolution: "@rollup/pluginutils@npm:4.1.1" +"@rollup/pluginutils@npm:^4.1.2": + version: 4.1.2 + resolution: "@rollup/pluginutils@npm:4.1.2" dependencies: estree-walker: ^2.0.1 picomatch: ^2.2.2 - checksum: 405f681c7d32661980aa3caa928ff22e1c06f0e081db1550e6ab9c179dc9d3d8d63c05dcc7338fe65ab3f856a56c465696a51300b83e98171956fcb141106e39 + checksum: 498d67e7b48c707e3e0d9f7ddaa405833d77575b2d9607cd1914be40455ed534235e0512f9d046bf0e4ed1740e7816fd32ab1c673195e897c4fa180bcbfd7283 languageName: node linkType: hard @@ -3671,19 +3669,23 @@ __metadata: languageName: node linkType: hard -"@sveltejs/vite-plugin-svelte@npm:^1.0.0-next.11": - version: 1.0.0-next.11 - resolution: "@sveltejs/vite-plugin-svelte@npm:1.0.0-next.11" +"@sveltejs/vite-plugin-svelte@npm:^1.0.0-next.37": + version: 1.0.0-next.37 + resolution: "@sveltejs/vite-plugin-svelte@npm:1.0.0-next.37" dependencies: - "@rollup/pluginutils": ^4.1.0 - chalk: ^4.1.1 - debug: ^4.3.2 - require-relative: ^0.8.7 - svelte-hmr: ^0.14.4 + "@rollup/pluginutils": ^4.1.2 + debug: ^4.3.3 + kleur: ^4.1.4 + magic-string: ^0.25.7 + svelte-hmr: ^0.14.9 peerDependencies: - svelte: ^3.38.2 - vite: ^2.3.7 - checksum: d9c4feac16dfb86932da4aa3170e06dec2a8c11fb2b72b35037c35c7e48c818b3cafa86af04e5018f4520e68afa47d83051115a05575c8026038bd7fcc541def + diff-match-patch: ^1.0.5 + svelte: ^3.44.0 + vite: ^2.7.0 + peerDependenciesMeta: + diff-match-patch: + optional: true + checksum: c92f6c90519025426e8a9f85745f6e949801f46350c2f8acf19b8c22897a1332f6db1fe0e55302291b3e07db29ff897c9b9a41ade01a611cdeefe5e1f6979bd6 languageName: node linkType: hard @@ -5829,7 +5831,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1": +"chalk@npm:^4.0.0, chalk@npm:^4.1.0": version: 4.1.1 resolution: "chalk@npm:4.1.1" dependencies: @@ -6630,6 +6632,18 @@ __metadata: languageName: node linkType: hard +"debug@npm:^4.3.3": + version: 4.3.3 + resolution: "debug@npm:4.3.3" + dependencies: + ms: 2.1.2 + peerDependenciesMeta: + supports-color: + optional: true + checksum: 14472d56fe4a94dbcfaa6dbed2dd3849f1d72ba78104a1a328047bb564643ca49df0224c3a17fa63533fd11dd3d4c8636cd861191232a2c6735af00cc2d4de16 + languageName: node + linkType: hard + "decode-uri-component@npm:^0.2.0": version: 0.2.0 resolution: "decode-uri-component@npm:0.2.0" @@ -7824,9 +7838,9 @@ __metadata: "@storybook/addon-links": ^6.4.0 "@storybook/addon-svelte-csf": ^1.1.0 "@storybook/svelte": ^6.4.0 - "@sveltejs/vite-plugin-svelte": ^1.0.0-next.11 + "@sveltejs/vite-plugin-svelte": ^1.0.0-next.37 storybook-builder-vite: "workspace:*" - svelte: ^3.38.3 + svelte: ^3.46.4 vite: 2.7.0 languageName: unknown linkType: soft @@ -10393,6 +10407,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"kleur@npm:^4.1.4": + version: 4.1.4 + resolution: "kleur@npm:4.1.4" + checksum: 7f6db36e378045dec14acd3cbf0b1e59130c09e984ee8b8ce56dd2d2257cfff90389c1e8f8b19bd09dd5d241080566a814b4ccd99fdcef91f59ef93ec33c8a44 + languageName: node + linkType: hard + "klona@npm:^2.0.4": version: 2.0.4 resolution: "klona@npm:2.0.4" @@ -13350,13 +13371,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"require-relative@npm:^0.8.7": - version: 0.8.7 - resolution: "require-relative@npm:0.8.7" - checksum: f1c3be06977823bba43600344d9ea6fbf8a55bdb81ec76533126849ab4024e6c31c6666f37fa4b5cfeda9c41dee89b8e19597cac02bdefaab42255c6708661ab - languageName: node - linkType: hard - "requireindex@npm:^1.1.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" @@ -14481,19 +14495,19 @@ fsevents@^1.2.7: languageName: node linkType: hard -"svelte-hmr@npm:^0.14.4": - version: 0.14.4 - resolution: "svelte-hmr@npm:0.14.4" +"svelte-hmr@npm:^0.14.9": + version: 0.14.9 + resolution: "svelte-hmr@npm:0.14.9" peerDependencies: svelte: ">=3.19.0" - checksum: 267b46428c55162ad3abe63d1a8c09b3ad3f171cf64b60e4105077a34a06c120027888fc62f37d57d10e47fc0326bf236393ea4553abc8e101c866276f85101a + checksum: f13e152cad53a82181409fe1a3aebfb0465f837109f7f4a7aa52f357ab4153920a9d3aefb077b68d1cbc01e4fc4f907b9b142734bed2aa43b0e64f5b15ae9d98 languageName: node linkType: hard -"svelte@npm:^3.38.3": - version: 3.38.3 - resolution: "svelte@npm:3.38.3" - checksum: 945f5f509014dde991d1d2508acd4dfa01ca3ca1ad1c8432b178d6698a6429c3428213a4dab4a876c01cff6588fe6598996a78241368394c77ed6b7775442561 +"svelte@npm:^3.46.4": + version: 3.46.4 + resolution: "svelte@npm:3.46.4" + checksum: 929e6790cdd6d94c123b4b8a7b5a541164dbea6d4f4ed311f4e65cde60caa1c704e531bbf2e63519d1a96163cd3f812c6e5be5b2fd05f72d0177af5fd8ca8637 languageName: node linkType: hard