Ensure SvelteKit plugin is used #7

benmccann · 2022-06-30T16:57:23Z

Aliases should work now

Closes #5

michaelwooley

I'm sorry I fell so behind on this!

This looks great! I apologize in advance for comments of the form, "if you uncomment these lines, then..." I was trying to pull together some additional demo components but kept getting distracted.

I've just sent an invite to you. Feel free to merge whenever you're satisfied.

michaelwooley · 2022-07-06T15:28:16Z

README.md

- 🟡 Aliased imports. E.g. `$app/stores`. _Once the aliases are added,_ then some of these will work.
-  - 🟢 `$app/env` Variables _are_ set. Notable because they make use of `import.meta.env`.
-  - 🟢 `$app/paths` Can be imported but these are unset. (Need to call `set_paths` fn.)
-  - 🔴 `$app/navigation`. Closely linked to app state. Probably need to pursue some version of a [mocking strategy](https://github.com/storybookjs/storybook/issues/14952#issuecomment-1023188255).


In my informal tests the other day $app/navigation is failing.

Quick check by uncommenting:

https://github.com/michaelwooley/storybook-experimental-vite/blob/main/src/lib/header/Header.svelte#L5-L13

I think it makes sense that these don't work. Nothing has been done to initialize them.

I think it is fine that these don't work: one of the best things about storybook to me is how it forces me to be deliberate about isolating application, container, and component state.

Eventually, mocks might be nice but I don't think it is a big deal for the v0 of an adder.

Browser console messages:

InstallTrigger is deprecated and will be removed in the future. vendors~main.manager.bundle.js:67243:46 [vite] connecting... client.ts:16:8 [vite] connected. client.ts:53:14 Uncaught TypeError: undefined has no properties <anonymous> http://localhost:6006/.svelte-kit/runtime/app/navigation.js:16 navigation.js:16:1

Terminal output:

11:45:45 AM [vite] hmr update /src/lib/header/Header.svelte (x8) 11:45:45 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:118:1 Unused CSS selector "li" 11:45:45 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:123:1 Unused CSS selector "li.active::before" 11:45:45 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:135:1 Unused CSS selector "nav a" 11:45:46 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:118:1 Unused CSS selector "li" 11:45:46 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:123:1 Unused CSS selector "li.active::before" 11:45:46 AM [vite-plugin-svelte] /home/michael/Documents/misc/storybook-experimental-vite/src/lib/header/Header.svelte:135:1 Unused CSS selector "nav a" Cannot read properties of undefined (reading 'disable_scroll_handling') TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling') at /.svelte-kit/runtime/app/navigation.js:16:11 at async instantiateModule (/home/michael/Documents/misc/storybook-experimental-vite/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:50286:9) Cannot read properties of undefined (reading 'disable_scroll_handling') TypeError: Cannot read properties of undefined (reading 'disable_scroll_handling') at /.svelte-kit/runtime/app/navigation.js:16:11 at async instantiateModule (/home/michael/Documents/misc/storybook-experimental-vite/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:50286:9)

michaelwooley · 2022-07-06T15:29:10Z

docs/setup.md

@@ -113,25 +113,6 @@ Initialized empty Git repository in /home/michael/Documents/misc/storybook-exper
 create mode 100644 tsconfig.json
 ```


This whole file is probably unnecessary but I can remove separate from this.

michaelwooley · 2022-07-06T15:29:32Z

package-lock.json

@@ -24,7 +24,7 @@
 				"@storybook/testing-library": "^0.0.13",
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/adapter-static": "^1.0.0-next.34",
-				"@sveltejs/kit": "next",
+				"@sveltejs/kit": "^1.0.0-next.360",


vite.config.js

michaelwooley · 2022-07-06T15:45:28Z

README.md

-  - 🟢 `$app/env` Variables _are_ set. Notable because they make use of `import.meta.env`.
-  - 🟢 `$app/paths` Can be imported but these are unset. (Need to call `set_paths` fn.)
-  - 🔴 `$app/navigation`. Closely linked to app state. Probably need to pursue some version of a [mocking strategy](https://github.com/storybookjs/storybook/issues/14952#issuecomment-1023188255).
-  - 🔴 `$app/stores` Similar story


$app/stores will import okay but it will throw an error if you try to fetch the store values.

Again, I think that this lack of functionality can actually help devs to be deliberate about application state.

Some sample code

console.log(session); // OK console.log($session); // Browser fails when try to actually access values

Browser console messages:

InstallTrigger is deprecated and will be removed in the future. vendors~main.manager.bundle.js:67243:46 [vite] connecting... client.ts:16:8 [vite] connected. client.ts:53:14 `configure()` is deprecated and will be removed in Storybook 7.0. Please use the `stories` field of `main.js` to load stories. Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure chunk-GXIQXXTC.js:23:21 Addon controls: Control of type color only supports string, received "any" instead 4 chunk-YRVYCDBB.js:1794:65 [HMR][Svelte] Unrecoverable HMR error in <Header>: next update will trigger a full reload proxy.js:15:11 Error rendering story 'header--basic': chunk-YRVYCDBB.js:1800:67 TypeError: stores is undefined getStores http://localhost:6006/.svelte-kit/runtime/app/stores.js:23 subscribe http://localhost:6006/.svelte-kit/runtime/app/stores.js:45 subscribe http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EU7HCSUX.js?v=f92cad1d:61 component_subscribe http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EU7HCSUX.js?v=f92cad1d:70 instance http://localhost:6006/src/lib/header/Header.svelte?t=1657121993345:152 init http://localhost:6006/node_modules/.vite-storybook/deps/chunk-EU7HCSUX.js?v=f92cad1d:1698 Header http://localhost:6006/src/lib/header/Header.svelte?t=1657121993345:209 createProxiedComponent http://localhost:6006/node_modules/svelte-hmr/runtime/svelte-hooks.js:341 ProxyComponent http://localhost:6006/node_modules/svelte-hmr/runtime/proxy.js:242 Proxy<Header> http://localhost:6006/node_modules/svelte-hmr/runtime/proxy.js:349 create_else_block http://localhost:6006/node_modules/@storybook/svelte/templates/SlotDecorator.svelte:51 chunk-YRVYCDBB.js:1800:67 error http://localhost:6006/node_modules/.vite-storybook/deps/chunk-YRVYCDBB.js?v=f92cad1d:1800 renderException http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2853 showException http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2804 _callee9$ http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:444 tryCatch http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8758 _invoke http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8740 defineIteratorMethods http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8785 asyncGeneratorStep http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:87 _throw http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:108 (Async: promise callback) asyncGeneratorStep http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:96 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:105 (Async: promise callback) asyncGeneratorStep http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:96 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:105 _asyncToGenerator http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:110 _asyncToGenerator http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:102 render http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:453 _callee4$ http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:287 tryCatch http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8758 _invoke http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8740 defineIteratorMethods http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8785 asyncGeneratorStep http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:87 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:105 _asyncToGenerator http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:110 _asyncToGenerator http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:102 renderToElement http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:299 _callee8$ http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2686 tryCatch http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8758 _invoke http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8740 defineIteratorMethods http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8785 asyncGeneratorStep4 http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2103 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2121 (Async: promise callback) asyncGeneratorStep4 http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2112 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2121 (Async: promise callback) asyncGeneratorStep4 http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2112 _next http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2121 _asyncToGenerator4 http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2126 _asyncToGenerator4 http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2118 renderSelection http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2696 _callee2$ http://localhost:6006/node_modules/.vite-storybook/deps/chunk-QJCZ3ZNN.js?v=f92cad1d:2363 tryCatch http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8758 _invoke http://localhost:6006/node_modules/.vite-storybook/deps/@storybook_testing-library.js?v=f92cad1d:8740

.storybook/main.cjs

benmccann · 2022-07-06T17:02:49Z

awesome! thanks for the help in testing this!

Ensure SvelteKit plugin is used

e37b8e6

benmccann force-pushed the fixes branch from b749bcc to e37b8e6 Compare June 30, 2022 17:15

michaelwooley mentioned this pull request Jun 30, 2022

Add sveltekit plugin in .storybook/main.cjs #5

Closed

benmccann added 2 commits June 30, 2022 10:23

only add sveltekit plugin rather than removing vite-plugin-svelte

f4b4889

better way

0ebea3f

benmccann mentioned this pull request Jun 30, 2022

Bring @sveltejs/kit/experimental/vite out of experimental sveltejs/kit#5184

Closed

upgrade dependencies

be05642

benmccann force-pushed the fixes branch from 4dfd236 to be05642 Compare July 6, 2022 15:12

benmccann added 3 commits July 6, 2022 08:13

remove deuplicate config line

8f451f6

revert port back to default

2102b4c

remove outdated info from README

ca77171

michaelwooley mentioned this pull request Jul 6, 2022

Ensure storybook can build and that the built files can be served #9

Closed

3 tasks

michaelwooley approved these changes Jul 6, 2022

View reviewed changes

benmccann added 3 commits July 6, 2022 09:56

remove docs/setup.md

3bf6268

restore and update readme status for aliased imports

48b75b2

restore next steps

51c8e1c

benmccann merged commit ac652ef into michaelwooley:main Jul 6, 2022

benmccann deleted the fixes branch July 6, 2022 17:03

benmccann mentioned this pull request Jul 7, 2022

Aliased imports mocks #3

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure SvelteKit plugin is used #7

Ensure SvelteKit plugin is used #7

benmccann commented Jun 30, 2022 •

edited

michaelwooley left a comment

michaelwooley Jul 6, 2022

michaelwooley Jul 6, 2022

michaelwooley Jul 6, 2022

michaelwooley Jul 6, 2022

benmccann commented Jul 6, 2022

		@@ -113,25 +113,6 @@ Initialized empty Git repository in /home/michael/Documents/misc/storybook-exper
		create mode 100644 tsconfig.json
		```

Ensure SvelteKit plugin is used #7

Ensure SvelteKit plugin is used #7

Conversation

benmccann commented Jun 30, 2022 • edited

michaelwooley left a comment

Choose a reason for hiding this comment

michaelwooley Jul 6, 2022

Choose a reason for hiding this comment

michaelwooley Jul 6, 2022

Choose a reason for hiding this comment

michaelwooley Jul 6, 2022

Choose a reason for hiding this comment

michaelwooley Jul 6, 2022

Choose a reason for hiding this comment

Some sample code

benmccann commented Jul 6, 2022

benmccann commented Jun 30, 2022 •

edited