Support Svelte 5 preview

danawoodman commented 3 months ago

Description

I want to play with Histoire and Svelte 5 preview but have to use npm i --force because Histoire doesn't support the package range. This should fix that.

Additional context

self explanatory

What is the purpose of this pull request?

[ ] Bug fix
[ ] New Feature
[ ] Documentation update
[x] Other

Before submitting the PR, please make sure you do the following

[ ] If it's a new feature, provide a convincing reason to add it. Ideally, you should open a suggestion issue first and have it approved before working on it.
[ ] Read the Contributing Guidelines.
[ ] Read the Pull Request Guidelines and follow the Commit Convention.
[ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
[ ] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
[ ] Ideally, include relevant tests that fail without this PR but pass with it.

codesandbox[bot] commented 3 months ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

stackblitz[bot] commented 3 months ago

Run & review this pull request in StackBlitz Codeflow.

netlify[bot] commented 3 months ago

Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
Latest commit	66e60064b19074a0ef4c9fae591524cfb6b0669d
Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/65cfa50dc1b4d0000819f0c0
Deploy Preview	https://deploy-preview-685--histoire-examples-svelte3.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for histoire-examples-vue3 ready!

Name	Link
Latest commit	66e60064b19074a0ef4c9fae591524cfb6b0669d
Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/65cfa50d3d8472000857fd2f
Deploy Preview	https://deploy-preview-685--histoire-examples-vue3.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for histoire-site ready!

Name	Link
Latest commit	66e60064b19074a0ef4c9fae591524cfb6b0669d
Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/65cfa50d38f3bc00088fc34b
Deploy Preview	https://deploy-preview-685--histoire-site.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 3 months ago

Deploy Preview for histoire-controls ready!

Name	Link
Latest commit	66e60064b19074a0ef4c9fae591524cfb6b0669d
Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/65cfa50d3a398300080afe27
Deploy Preview	https://deploy-preview-685--histoire-controls.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

danawoodman commented 3 months ago

on further investigation, it seems Histoire plugin svelte is broken with Svelte v5:

Error while collecting story /path/to/project/packages/components/src/lib/Foostory.svelte:
TypeError: Class extends value undefined is not a constructor or null
    at /path/to/project/packages/components/node_modules/@histoire/plugin-svelte/dist/collect/Story.svelte.js:89:17
    at async ViteNodeRunner.runModule (file:///path/to/project/node_modules/vite-node/dist/client.mjs:342:5)
    at async ViteNodeRunner.directRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:326:5)
    at async ViteNodeRunner.cachedRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:189:14)
    at async ViteNodeRunner.dependencyRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:223:12)
    at async /path/to/project/packages/components/node_modules/@histoire/plugin-svelte/dist/collect/index.js:4:31
    at async ViteNodeRunner.runModule (file:///path/to/project/node_modules/vite-node/dist/client.mjs:342:5)
    at async ViteNodeRunner.directRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:326:5)
    at async ViteNodeRunner.cachedRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:189:14)
    at async ViteNodeRunner.dependencyRequest (file:///path/to/project/node_modules/vite-node/dist/client.mjs:223:12)

KaruroChori commented 2 months ago

Svelte 5 moved to a different interface for components which is not class based, so this is the likely reason.

histoire-dev / histoire