Skip to content

Commit

Permalink
Fix: svelte (#240)
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@bfanger
bfanger authored Feb 17, 2022
1 parent 89e6b7c commit 42131f4
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 47 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/example-svelte/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@
"author": "",
"license": "MIT",
"dependencies": {
"svelte": "^3.38.3"
"svelte": "^3.46.4"
},
"devDependencies": {
"@storybook/addon-actions": "^6.4.0",
"@storybook/addon-essentials": "^6.4.0",
"@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"
}
Expand Down
1 change: 1 addition & 0 deletions packages/storybook-builder-vite/optimizeDeps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 11 additions & 3 deletions packages/storybook-builder-vite/svelte/csf-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<any>(stories)
Expand All @@ -36,4 +43,5 @@ export default {
};
}
},
}
};
4 changes: 2 additions & 2 deletions packages/storybook-builder-vite/vite-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
92 changes: 53 additions & 39 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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

Expand Down

0 comments on commit 42131f4

Please sign in to comment.