Describe the bug

Whenever I use both the <Template> and <Story> components, it would be great to be able to set the expected type of let:args.

Ex:

<script lang="ts">
  import Choice from './Choice.svelte';
  import choiceProps from './choiceProps.ts';
</script>

<Template let:args id="ChoiceTemplate">
  // Ideally I would have the option to set that args has the choiceProps type
  <Choice {...args} />
</Template>

<Story
  id="ChoiceStory"
  name="Choice"
  template="ChoiceTemplate"
  args={{
    choiceText: 'Choice 1',
    value: 'choice-1',
    name: 'choice-1'
  }} // Same thing here
/>

Getting Started should include

In .storybook/main.js, add @storybook/addon-svelte-csf as an addon

Are they provided as attributes to Meta? How are they formatted? Forgive me if there was an example somewhere, I didn't see it. Also forgive me if this shouldn't be asked in an issue. Not sure where to ask it.

Describe the bug

I'am using svelte to describe my stories, but storyshots doesn't work with this syntax, only works with .js and .ts files.

Steps to reproduce the behavior

1. using this template https://github.com/chromaui/intro-storybook-svelte-template
2. install storyshots following what is described here: https://storybook.js.org/tutorials/intro-to-storybook/svelte/en/simple-component/
3. add "^.+\\.stories\\.svelte$": "@storybook/addon-svelte-csf/dist/cjs/jest-transform" to the jest transform map
4. run npm test storybook.test.js

Here is an example Repo: https://github.com/01oseluiz/svelte-csf-storyshots

Expected behavior

It is expected that storyshots takes a snapshot of the 'Button.stories.svelte '. But only 'Button.stories.js' is working.

Screenshots and/or logs

 console.warn
    Unexpected error while loading ./stories/Button.stories.svelte: SyntaxError: Unexpected token '<'

      at Object.warn (node_modules/@storybook/client-logger/dist/cjs/index.js:67:65)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:92:34
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:85:20
          at Array.forEach (<anonymous>)
      at node_modules/@storybook/core-client/dist/cjs/preview/loadCsf.js:84:12
      at ConfigApi.configure (node_modules/@storybook/client-api/dist/cjs/config_api.js:26:7)

 PASS  ./storybook.test.js
  Storyshots
    Example/Button-js
      ✓ Large (16 ms)
      ✓ Primary (4 ms)
      ✓ Secondary (4 ms)
      ✓ Small (4 **ms)**

Environment

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.16.1 - ~/.asdf/installs/nodejs/12.16.1/bin/node
    Yarn: 1.22.10 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 6.13.4 - ~/.asdf/installs/nodejs/12.16.1/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/addon-svelte-csf: ^1.1.0 => 1.1.0 
    @storybook/svelte: ^6.3.12 => 6.3.12 

Additional context

Add any other context about the problem here.

I am using 2.0.8--canary.8172dc5.0 version so it works with storybook 7 alpha, (indexer).
All of the sudden after updating to latest storybook alpha version (42), I get errors on all component 'target' is a required option
I can see that it's only triggered on dev, but haven't seen that before - what does it mean ?

Describe the bug

This package depends on react and react-dom, which both seem like they should be unnecessary

Steps to reproduce the behavior

Install project with Svelte. See React included

npm create svelte@latest storybook-app
cd storybook-app
npx sb@next init

Expected behavior

No React for Svelte users

Screenshots and/or logs

N/A

Environment

latest code

Additional context

Tons of stuff is getting installed. Would love to see things slim down

Hello,
I am planning to make a component with some data example. I saw the plugin storybook-fixtures but I did not manage to make it work for svelte. I am planning to simulate it with {#each} block but it too does not work.

Is it really impossible or did I do something wrong ?
If it's not possible, could we add a feature like this ?

Here are the source if you want to test:

Calendar.stories.svelte

<script lang="ts">
	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';

	import Calendar from './Calendar.svelte';
	import calendarData from './fixtures.json';
</script>

<Meta title="Calendar" />

<Template let:args>
	<Calendar {...args} />
</Template>

{#each Object.entries(calendarData) as [name, args]}
	<Story {name} {args} />
{/each}

Calendar.svelte

<script lang="ts">
	export let title = '';
</script>

{title}

fixtures.json

{
	"Tiger": {
		"title": "Tiger"
	},
	"Lion": {
		"title": "Lion"
	},
	"Jaguar": {
		"title": "Jaguar"
	},
	"Leopard": {
		"title": "Leopard"
	},
	"Snow Leopard": {
		"title": "Snow leopard"
	}
}

Describe the bug

It makes an dependency error, when I try to install addon-svelte-csf with the the following config :

    "@storybook/addon-docs": "6.5.0-alpha.55",
    "@storybook/addon-essentials": "^6.5.0-alpha.55",
    "@storybook/addon-links": "^6.5.0-alpha.55",
    "@storybook/builder-vite": "^0.1.24",
    "@storybook/svelte": "6.5.0-alpha.55",

Steps to reproduce the behavior

1. npm i -D @storybook/addon-svelte-csf
2. See error

Could not resolve dependency:
npm ERR! peer @storybook/svelte@"^6.2.9" from @storybook/[email protected]

Expected behavior

No error.

Additional context

I can force the install with npm i -f.
It works, but it is not doable in every environments (ie: CI).

What can I do to fix this?
Thank you

Vite-Builder is one of the office builder, pls add support.❤️

I did not find any documentation on how to use decorators. Can someone help me?

Describe the bug

I'm having a lot of issues event with this package.json:

"devDependencies": {
    "@storybook/addon-actions": "6.2.9",
    "@storybook/addon-essentials": "6.2.9",
    "@storybook/addon-links": "6.2.9",
    "@storybook/addon-svelte-csf": "1.1.0",
    "@storybook/svelte": "6.2.9",
    "postcss": "8.3.6",
    "svelte-loader": "3.1.2",
    "svelte-preprocess": "4.7.4",
    "tailwindcss": "2.2.7",
    "tailwindcss-cli": "0.1.2"
}

with:

"svelte": "3.42.1",
"svelte-preprocess": "4.7.4",
"typescript": "4.3.5"

Expected behavior

Can you please create a kitchen-sink dir instead of README snippet?

So we can see how to configure everything properly.

Please.

Issues

Cannot read property '$$' of undefined
TypeError: Cannot read property '$$' of undefined
    at init (http://localhost:6006/vendors~main.iframe.bundle.js:1985:50)
    at new Button (http://localhost:6006/main.iframe.bundle.js:846:71)
    at Array.create_default_slot (http://localhost:6006/main.iframe.bundle.js:2000:11)
    at create_slot (http://localhost:6006/vendors~main.iframe.bundle.js:105060:29)
    at create_if_block (http://localhost:6006/vendors~main.iframe.bundle.js:11909:98)
    at create_fragment (http://localhost:6006/vendors~main.iframe.bundle.js:11947:38)
    at init (http://localhost:6006/vendors~main.iframe.bundle.js:106499:37)
    at new Template (http://localhost:6006/vendors~main.iframe.bundle.js:12023:71)
    at create_fragment (http://localhost:6006/main.iframe.bundle.js:2082:13)
    at init (http://localhost:6006/vendors~main.iframe.bundle.js:106499:37)

index.js:54 TypeError: Cannot read property '$$' of undefined
    at init (index.mjs:1779)
    at new Button (Button.svelte:854)
    at Array.create_default_slot (Button.stories.svelte:60)
    at create_slot (index.mjs:61)
    at create_if_block (Template.svelte:29)
    at create_fragment (Template.svelte:67)
    at init (index.mjs:1500)
    at new Template (Template.svelte:143)
    at create_fragment (Button.stories.svelte:142)
    at init (index.mjs:1500)

Is adding tests with jest supported?

I've got a setup already using withTests from @storybook/addon-jest with *.stories.js files but can't figure out how to add this onto my refactored stories using *.stories.svelte.

What I've tried so far:

// Button.stories.svelte
<script>
    import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
    import results from '../.jest-test-results.json';
    import { withTests } from '@storybook/addon-jest';

    import Button from './Button.svelte';

    let count = 0;
    function handleClick() {
        count += 1;
    }
</script>

<Meta title="Button" component={Button} decorators={[withTests({ results })]} />

<Template let:args parameters={{ jest: ['Button.spec.js'] }}>
    <Button {...args} on:click={handleClick}>
        You clicked: {count}
    </Button>
</Template>

<Story name="Rounded" args={{rounded: true}}/>

<Story name="Square" source args={{rounded: false}}/>

<!-- Dynamic snippet should be disabled for this story -->
<Story name="Button No Args">
     <Button>Label</Button>
</Story>


// Button.spec.js
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/svelte';
import Button from './Button.svelte';

describe('Button component', () => {
    test('renders correctly', () => {
        const component = render(Button, {
           rounded: true
        });

        expect(component).toMatchSnapshot();
    });
});

Using the code below throws this error:

Cannot read property '__docgen' of undefined

<script lang="ts">
  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
</script>

<Meta title="Templates" />

<Template id="myTemplate" let:text>
  <div>Template 1 {text}</div>
</Template>

<Story
  id="s1"
  template="myTemplate"
  name="Story with myTemplate"
  args={{ text: "story1" }}
/>

Why?

Describe the bug

I have recently upgraded from Webpack 4 -> Webpack 5, following the instructions here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

Storybook stories now fail.

Steps to reproduce the behavior

1. Upgrade Webpack 4 -> Webpack 5, change configurationg in .storybook/main.js to specify the "webpack5" builder.
2. Do npm run storybook.

Expected behavior

Storybook to build successfully.

Screenshots and/or logs

Screenshot of the error in question;

ModuleBuildError: Module build failed (from ./node_modules/@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader.js):
TypeError: Cannot read property 'replace' of null
    at extractId (/Users/jackie/directory/node_modules/@storybook/addon-svelte-csf/dist/cjs/parser/extract-id.js:20:24)
    at Object.enter (/Users/jackie/directory/node_modules/@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories.js:98:43)
    at SyncWalker.visit (/Users/jackie/directory/node_modules/svelte/compiler.js:5654:17)
    at SyncWalker.visit (/Users/jackie/directory/node_modules/svelte/compiler.js:5684:19)
    at Object.walk (/Users/jackie/directory/node_modules/svelte/compiler.js:5742:19)
    at extractStories (/Users/jackie/directory/node_modules/@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories.js:86:10)
    at Object.transformSvelteStories (/Users/jackie/directory/node_modules/@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader.js:64:55)
    at processResult (/Users/jackie/directory/node_modules/webpack/lib/NormalModule.js:751:19)
    at /Users/jackie/directory/node_modules/webpack/lib/NormalModule.js:853:5
    at /Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at runSyncOrAsync (/Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
    at iterateNormalLoaders (/Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at iterateNormalLoaders (/Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:239:10)
    at /Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:254:3
    at /Users/jackie/directory/node_modules/loader-runner/lib/LoaderRunner.js:140:6
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

Environment

• OS: macOS 11.2.3 "Big Sur"
• Node.js version: v12.12.0
• NPM version: 6.12.0
• Browser (if applicable): N/A
• Browser version (if applicable): N/A
• Device (if applicable): N/A

Additional context

My stories are a mixture of Svelte stories and JS stories. Using storybook/svelte 6.3.12 and storybook/addon-svelte-csf 1.1.0.

Describe the bug

I have Svelte components written in TypeScript, so I have to use svelte-preprocess. My storybook config looks like this:

const sveltePreprocess = require("svelte-preprocess")

module.exports = {
  svelteOptions: {
    preprocess: sveltePreprocess(),
  },
  stories: ["../../../components/svelte/*.stories.js", "../../../components/svelte/*.stories.svelte"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-actions",
    "@storybook/addon-svelte-csf"
  ],
};

Steps to reproduce the behavior

With that config run storybook.

Expected behavior

Successful build.

Screenshots and/or logs

ModuleBuildError: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ValidationError: <slot> cannot have directives (14:28)
12:
13: {#if render}
14:   <slot args={context.args} {...context.args}/>
                                ^
15: {/if}
16:
    at /Users/.../node_modules/svelte-loader/index.js:181:12
    at /Users/.../node_modules/@storybook/svelte/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/rtf/Github/mycom/mono/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/.../node_modules/svelte-loader/index.js:181:3
ModuleBuildError: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ValidationError: <slot> cannot have directives (23:28)
21:
22: {#if render}
23:   <slot args={context.args} {...context.args}/>
                                ^
24: {/if}
25:
    at /Users/.../node_modules/svelte-loader/index.js:181:12
    at /Users/.../node_modules/@storybook/svelte/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/.../node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/../node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/.../node_modules/svelte-loader/index.js:181:3

Environment

• NPM version:

 "@storybook/addon-actions": "^6.2",
   "@storybook/addon-svelte-csf": "^1.0.0",
   "@storybook/svelte": "^6.2",

Additional context

The error is referring to these lines

Can we add Github "Discussion" tab?

Discord is not good because one cannot search for previous discussions.

it says decorators are supported but i cant find any example code, either for individual stories or globally

https://storybook.js.org/docs/svelte/get-started/whats-a-story
https://github.com/storybookjs/addon-svelte-csf#readme

Describe the bug

Naming a story with the same name as its component results in the following error:
Uncaught SyntaxError: Identifier 'SomeStory' has already been declared

Related to storybook#8536.

Steps to reproduce the behavior

./src/SomeCategory.stories.svelte

<script lang="ts">
  import SomeStory               from "./SomeStory.svelte"
  import {Meta, Template, Story} from "@storybook/addon-svelte-csf"
</script>

<Meta title="SomeCategory"/>

<Template let:args>
  <svelte:component this={args.component}/>
</Template>

<!-- issue caused by `SomeStory` being used for both the `name` attribute and import name of `args.component` -->
<Story name="SomeStory" args={{component:SomeStory}}/>

Expected behavior

Storybook will render the SomeCategory/SomeStory story without errors.

Environment

OS:      Windows 10
Node:    16.4.2
NPM:     7.18.1
Browser: Chrome 91.0.4472.164

Describe the bug

Currently, this plugin doesn't support TypeScript (#4). This means it doesn't automatically detect props/slots/events.

While you can manually declare props via the argTypes prop on the Meta component, I don't believe you can manually add slots or events. Could be mistaken, though.

While full TypeScript support is preferable, I believe being able to manually declare slots is also a good option to be able to future-proof the addon.

Describe the bug

The main item in package.json refers to dist/preset.js - but this does not exist, the correct name is dist/preset/index.js.

I noticed this in my Svelte/Snowpack based project, since Snowpack was complaining about the missing file during it's dependency building step. I worked around by manually changing the entry to dist/preset/index.js (or just dist/preset, this works as well) and then Snowpack is happy.

I'm using the code from https://github.com/storybookjs/addon-svelte-csf/blob/main/stories/button.stories.svelte but in my Storybook these properties are not typed: I can only use JSON strings, why?

Describe the bug

1. Updating a control does not update the component
2. When creating a story with preset args, it adds a duplicate control

More specifically in the story/component below, the "color" component is causing the issues.

Steps to reproduce the behavior

Here's the story.

<script>
    import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
    import Badge from './badge.svelte';

    const meta = {
        title: "Badge",
        component: Badge,
        argTypes: {
            children: {
                control: {
                    type: 'text',
                },
                defaultValue: 'Hello world',
                name: 'children',
                type: { name: 'string', required: true }
            },
            size: {
                control: {
                    type: "select",
                    options: ['primary', 'secondary', 'error', 'highlight', 'warning', 'success'],
                },
                name: 'color',
                description: 'This is the color of the badge',
                type: { name: 'string', required: false }
            },
        },
     };

</script>

<Meta {...meta} />

<Template let:args>
  <Badge {...args}>{args.children}</Badge>
</Template>

<Story name="Default"/>

<Story name='With color' args={{color: 'primary'}} />

And here's the component.

<script lang='ts'>
    type Color = 'primary' | 'secondary' | 'error' | 'highlight' | 'warning' | 'success'
    export let color: Color = 'secondary'

    const COLOR_MAP: Record<Color, string> = {
        primary: 'bg-primary',
        secondary: 'bg-secondary',
        // etc…
    }
</script>

<span class={`rounded ${COLOR_MAP[color]} font-semibold text-xs px-2 py-1`}>
    <slot></slot>
</span>

Expected behavior

1. Updating a control via the UI updates the component
2. Setting a default value does not add an additional control

Screenshots and/or logs

Here's the storybook: https://ui-svelte-9adyxhbbc-nick-mazuk.vercel.app/?path=/story/badge--default

Environment

• OS: macOS 11.2
• Node.js version: v12.17.0
• PNPM version: 5.18.8
• Browser: Brave
• Browser version: 1.21.77

Additional context

I am brand new to Storybook, so it's possible that I'm just missing something obvious that I couldn't figure out. Though it doesn't look like this package is documented anywhere.

Describe the problem

When creating a new Storybook Template & Story, two wrapper divs are created, making it more confusing to target the actual story using CSS. The output might look something like this:

<div id="story--components-[[title]]--[[story]]">
  <div>
    <!-- story contents here -->
  </div>
</div>

With this current structure, the only way to target the contents container itself in Svelte is using a complicated selector like this:

:global([id^="story--components-[[title]]--"] > div) selector {
  /* styles here */
}

Proposed solution # 1

Removing the redundant empty div would be a breaking change, so instead, I propose to include a [[title]]-[[story]] ID and the classes [[title]]-story and story on the empty div below the #story--components-[[title]]--[[story]] element that allows developers to quickly target the story itself, like this:

<script>
  import { Meta, Story, Template } from '@storybook/addon-svelte-csf';
  import MyComponent from './MyComponent.svelte';
</script>

<Meta title="Components/MyComponent" component={MyComponent} />

<Template let:args>
  <!-- story contents here -->
</Template>

<Story name="Standard" args={{}} />
<Story name="Variant" args={{ prop: true }} />

<style>
  :global(.story) selector {
    /* styles here */
  }
</style>

Proposed solution # 2

Another possible solution without adding the additional ID and classes to this package directly would be to expose a config method for the developer to set any structure for an ID and/or classes on that empty div to use in their own implementation. While likely a bit more involved to set up for the end-developer, this would arguably be the most flexible solution and would not change the implementation of any already setup Storybook instances unless the developer adds the config option.

Alternatives considered

The only feasible alternative I see is adding a unique class within the actual component itself that I am using in Storybook and referencing that. It's not a difficult workaround, but it forces the developer to shape how they develop their actual components around those components' Storybook implementation, which is awfully disruptive.

Screenshot

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Install SvelteKit Skeleton App

npm init svelte

2. Install Storybook

npm storybook init

3. Install Svelte CSF Addon

npm i -D @storybook/addon-svelte-csf

Expected behavior

@storybook/addon-svelte-csf is installed without --force flag and doesn't cause any dependency conflicts.

Screenshots and/or logs

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR!   node_modules/@storybook/addons
npm ERR!     peer @storybook/addons@">=6.4.20" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addon-svelte-csf
npm ERR!       dev @storybook/addon-svelte-csf@"*" from the root project
npm ERR!     @storybook/addons@"6.5.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/client-api
npm ERR!       peer @storybook/client-api@">=6.4.20" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-svelte-csf
npm ERR!         dev @storybook/addon-svelte-csf@"*" from the root project
npm ERR!     1 more (@storybook/svelte)
npm ERR!   peer react@"^18.1.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/addons
npm ERR!       peer @storybook/addons@">=6.4.20" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-svelte-csf
npm ERR!         dev @storybook/addon-svelte-csf@"*" from the root project
npm ERR!       2 more (@storybook/client-api, @storybook/svelte)
npm ERR!     peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR!     node_modules/@storybook/api
npm ERR!       peer @storybook/api@">=6.4.20" from @storybook/[email protected]
npm ERR!       node_modules/@storybook/addon-svelte-csf
npm ERR!         dev @storybook/addon-svelte-csf@"*" from the root project
npm ERR!       1 more (@storybook/addons)
npm ERR!     3 more (@storybook/client-api, @storybook/components, @storybook/theming)
npm ERR!   4 more (@storybook/api, @storybook/client-api, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-svelte-csf
npm ERR!   dev @storybook/addon-svelte-csf@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/aleksandergrygier/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/aleksandergrygier/.npm/_logs/2022-05-19T08_23_44_946Z-debug.log

Environment

• OS: macOS 12.3.1
• Node.js version: 16.10.0
• NPM version: 7.24.0

What is the source prop in the line below (from Readme)?

<Story name="Square" source args={{rounded: false}}/>

Describe the bug
When importing a component in Svelte, naming the import Navbar causes the component to not be rendered.

Given the following code (here):

<script>
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import { Navbar } from "../lib/components";
</script>

<Meta title="Navbar" component={Navbar} />

<Story name="Navbar" />

The story is not generated in the UI. However, if we make just a couple changes, it works.

<script>
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import { Navbar as Nb /* or whatever other name */ } from "../lib/components";
</script>

<Meta title="Navbar" component={Nb} />

<Story name="Navbar" />

To Reproduce
Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions.
Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

Repro repo here.

1. Clone the repo.
2. Run npm i.
3. Run npm run storybook.
4. Once the page opens, notice that the component Navbar is missing from the left panel.
5. Open src/stories/Navbar.stories.svelte.
6. Apply the changes as mentioned above (only two lines should be changed).
7. Notice the Navbar component now shows up in the left panel.

System
Environment Info:

System:
OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
Binaries:
Node: 16.13.1 - /usr/bin/node
npm: 8.1.2 - /usr/bin/npm
npmPackages:
@storybook/addon-actions: ^6.4.9 => 6.4.9
@storybook/addon-essentials: ^6.4.9 => 6.4.9
@storybook/addon-links: ^6.4.9 => 6.4.9
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/addon-svelte-csf: ^1.1.0 => 1.1.0
@storybook/builder-webpack5: ^6.4.9 => 6.4.9
@storybook/manager-webpack5: ^6.4.9 => 6.4.9
@storybook/svelte: ^6.4.9 => 6.4.9

Additional context
N/A

Thanks for merging #20 to add TypeScript definitions, but it looks like the file is not included in the released package for v1.0.1.

I'm adding TypeScript support to an existing project, and saw that you had just released 1.0.1 with types, but after upgrading it in my project the .d.ts file is still missing.

Based on node_modules/@storybook/addon-svelte-csf/CHANGELOG.md I can see that it contains the release notes for 1.0.1, but index.d.ts is not present.

So, it seems like there's a setting missing in package.json to include that file when packaging it for release.

Describe the bug

When I add special characters to the name of a Story, for example: <Story name="Horizontal (Default)" args={{}} />, the ( and ) symbols appear to break stories, and they can no longer be found.

Expected behavior

I would expect to be able to include any special characters in Story names and have them rendered appropriately.

Describe the bug

This depends on version 2.9.1 of svelte-loader, but svelte-kit depends on version 3.1.1.
The result is an "unable to resolve dependency tree" error when doing an npm install in a svelte-kit project.

Describe the bug

My storybook is building properly for dev with no errors and is building for production with no errors, but when I open up the local URL, I am getting a white screen with a ton of console errors.

As far as I can tell, this is basically the same error as seen here:
storybookjs/storybook#14410

Steps to reproduce the behavior

1. Remove all svelte stories
2. run start-storybook -p 6006 --no-manager-cache
3. Observe that there are no errors in the console
4. Visit localhost:6006
5. See that the storybook UI is rendering & working but not finding any stories (as expected)
6. Add a single svelte story that only renders the simple text: Hello World.
7. Restart Storybook
8. Visit localhost:6006
9. See storybook white screen of death with tons of console errors (linked below)
10. Test any number of Svelte components and see that any svelte story causes the white screen of death
11. Remove all svelte stories and see that storybook is working again.

Expected behavior

I expect to see my stories rendered and not have the entire Storybook UI crash

Screenshots and/or logs

Environment

• OS: macOS Monterey 12.2
• Node.js version: 16.13.1
• Yarn version: 1.22.18
• Browser (if applicable): chrome
• Browser version (if applicable): Version 100.0.4896.60 (Official Build) (arm64)
• Device (if applicable): M1 MacBook pro

Additional context

Relevant Versions

"@storybook/addon-actions": "^6.4.20",
"@storybook/addon-essentials": "^6.4.20",
"@storybook/addon-links": "^6.4.20",
"@storybook/addon-svelte-csf": "^1.1.0",
"@storybook/svelte": "^6.4.20",
"svelte": "^3.46.4",
"svelte-loader": "^3.1.2",
"svelte-preprocess": "^4.10.4",

Also I should note that running build-storybook also results in a clean build but white screens upon start.

Describe the bug

After running npm update in my SvelteKit/Storybook project, stories don't load anymore. I've also tried with a fresh SvelteKit/Storybook project, the same happens.

Steps to reproduce the behavior

1. Set up a new SvelteKit/Storybook project
2. npm run storybook
3. Go to Storybook URL
4. Stories don't load

Expected behavior

Stories to load.

Screenshots and/or logs

Environment

• OS: Arch Linux
• Node.js version: 16.16.0
• NPM version: 8.17.0
• Browser (if applicable): Chromium
• Browser version (if applicable): 104.0.5112.79
• Device (if applicable): Dell XPS 15 9560

Additional context

When downgrading vite to 3.0.5, things work as expected.

Can we add Typescript declarations?

I'm having this warning in console:

c:\a\Component.stories.svelte:2:41
Hint: Could not find a declaration file for module '@storybook/addon-svelte-csf'. 'C:/a/node_modules/@storybook/addon-svelte-csf/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/storybook__addon-svelte-csf` if it exists or add a new declaration (.d.ts) file containing `declare module '@storybook/addon-svelte-csf';` (ts)
<script lang="ts">
  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";

Am I using it wrong?

Everything else works great!

Describe the bug

Seems not to work with Storybook 7.0.0-alpha.52

Steps to reproduce the behavior

1. Disable storyStoreV7: features.storyStoreV7: false
2. Create a *.stories.svelte file like described in the docs
3. Configure the addon properly
4. Start Storybook (yarn storybook) -> No stories are rendered. An error occurs in the console:

Uncaught Error: unexpected configure() call
    at configure (index.mjs:2:1510)
    at O (index.mjs:1:328)
    at configStories (storybook-stories.js:16:7)
    at vite-app.js:88:5

Expected behavior

Storybook should not fail

Environment

• OS: Mac
• Node.js version: 16.18.1

Additional context

Reproduction Repo: https://github.com/valentinpalkovic/repro-svelte-storybook-7.x

Describe the bug

Latest version of Storybook with experimental Webpack 5 throws error:

Error extracting stories Error: Function called outside component initialization Error: Function called outside component initialization

for each of the "demo" stories that uses @storybook/addon-svelte-csf. Stories that use argtypes works as expected.

Steps to reproduce the behavior

1. Type npm run storybook (start-storybook -p 6006)
2. Go to preferred browser and load http://localhost:6006/
3. See error

Expected behavior

Stories to load and render on page.

Screenshots and/or logs

Environment

• OS: MAC OS 11.3.1
• Node.js version: 14.4.0
• NPM version: 6.14.5
• @storybook/addon-actions: 6.3.0-alpha.31
• @storybook/addon-essentials: 6.3.0-alpha.31
• @storybook/addon-links: 6.3.0-alpha.31
• @storybook/addon-svelte-csf: 1.0.0
• @storybook/builder-webpack5: 6.3.0-alpha.31
• @storybook/svelte: 6.3.0-alpha.31

Additional context

storybook webpack

module.exports = {
  stories: [
    `../../src/**/*.stories.mdx`,
    `../../src/**/*.stories.@(ts|svelte)`,
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf",
  ],
  core: {
    builder: "webpack5",
  },
  svelteOptions: {
    preprocess: require("svelte-preprocess")({
      babel: {
        plugins: ["@vanilla-extract/babel-plugin"],
      },
    }),
  },
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(js|ts)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          plugins: [
            "@babel/plugin-proposal-optional-chaining",
            "@babel/plugin-transform-modules-commonjs",
            "@babel/plugin-proposal-nullish-coalescing-operator",
          ],
        },
      },
    })
    config.module.rules.push({
      test: /\.(css.ts)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          plugins: ["@vanilla-extract/babel-plugin"],
        },
      },
    })
    config.module.rules.push({
      test: /\.ts?$/,
      use: [{ loader: "ts-loader", options: { transpileOnly: true } }],
    })
    config.plugins.push(new MiniCssExtractPlugin())
    config.plugins.push(new VanillaExtractPlugin())

    config.resolve.fallback = {
      http: false,
      crypto: false,
      path: false,
    }
    return config
  },
}

Describe the bug

Webpack dependency for this package is causing problems for Vite users here storybookjs/builder-vite#16 (comment)

Meanwhile @winkerVSbecks has added ESM support to addon-kit here: storybookjs/addon-kit#11

If we could get those changes into this package & republish, that might help the Vite users move forward cc @TheComputerM

@j3rem1e WDYT?

Describe the bug

Stories written in Svelte native format will not be loaded when using Webpack 5 as the default builder.

Steps to reproduce the behavior

1. Run npx sb init --builder webpack5
2. Choose svelte as the type
3. Run npm run storybook
4. You will notice stories written in a .svelte files are not detected

Expected behavior

Stories written in .svelte files should be detected when using Webpack 5

Environment

• OS: [Windows 10]
• Node.js version: [14.17.0]
• NPM version: [6.14.13]

In the official svelte storybook tutorial, they use a pattern where stories get imported into other stories, in order to reuse the arguments defined in the imported stories:

import * as TaskStories from './Task.stories';

and then, TaskStories arguments can be reused as TaskStories.Default.args.

Is this possible using this addon?

Describe the bug

When using Svelte component stories that use Template in an MDX, then viewing that page in Storybook and clicking "Show code", the code isn't shown properly.

Steps to reproduce the behavior

1. Create a Svelte story using viewMode: 'docs' that loads an MDX page and uses Template (see example below)
2. Execute npm run storybook
3. Open the above page in Storybook
4. Click "Show code" for the component
5. The source code will be displayed incorrectly, e.g. <Proxy<RenderContext> primary/>

Note: when using Svelte components directly in a Story without Template, "Show code" works just fine

Expected behavior

The correct code should be displayed according to the Template and args, e.g. <Button primary label="Button" />

Screenshots and/or logs

Environment

• OS: macOS Ventura 13.0
• Node.js version: 16.15.1
• NPM version: 8.11.0
• Browser (if applicable): Opera
• Browser version (if applicable): 92.0
• Device (if applicable): MacBook Pro

Additional context

Example Button.stories.svelte:

<script>
  import { Meta, Story, Template } from '@storybook/addon-svelte-csf'

  import Button from './Button.svelte'
  import page from './Button.mdx'
</script>

<Meta
  title="Example/Button"
  component={Button}
  parameters={{
    docs: { page },
    viewMode: 'docs',
  }}
/>

<Template let:args>
  <Button {...args} label="Button" />
</Template>

<Story name="Primary" args={{ primary: true }} />

Example Button.mdx:

import { Story, Canvas } from '@storybook/addon-docs'

# Button

## Variants

### Primary

<Canvas>
  <Story id="example-button--primary" />
</Canvas>

Button.svelte (default one that arrives with Storybook for Svelte):

<script>
  import './button.css'
  import { createEventDispatcher } from 'svelte'
  /**
   * Is this the principal call to action on the page?
   */
  export let primary = false

  /**
   * What background color to use
   */
  export let backgroundColor
  /**
   * How large should the button be?
   */
  export let size = 'medium'
  /**
   * Button contents
   */
  export let label = ''

  let mode = primary
    ? 'storybook-button--primary'
    : 'storybook-button--secondary'

  let style = backgroundColor ? `background-color: ${backgroundColor}` : ''

  const dispatch = createEventDispatcher()

  /**
   * Optional click handler
   */
  function onClick(event) {
    dispatch('click', event)
  }
</script>

<button
  type="button"
  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
  {style}
  on:click={onClick}
>
  {label}
</button>

Describe the bug

Trying to launch storybook with any component and always see the error Unexpected default export without title: undefined.

Steps to reproduce the behavior

1. Create a story:

<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
import SButton from './SButton.svelte'
</script>

<Meta
  title="SButton"
  component={SButton}
/>

<Story name="Default">
  <SButton>
    Content
  </SButton>
</Story>

2. Try to run storybook (with default resolve configuration).
3. Storybook opens and shows the error.

Expected behavior

Storybook should works.

Screenshots and/or logs

Unexpected default export without title: undefined

loadStories/</<@http://localhost:9000/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-0ebda1.iframe.bundle.js:24196:15
loadStories/<@http://localhost:9000/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-0ebda1.iframe.bundle.js:24189:11
ConfigApi/this.configure@http://localhost:9000/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-0ebda1.iframe.bundle.js:11947:7
loadCsf/<@http://localhost:9000/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-0ebda1.iframe.bundle.js:24341:17
configure@http://localhost:9000/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-other-entry-0ebda1.iframe.bundle.js:25465:10
./.storybook/generated-stories-entry.js@http://localhost:9000/main.iframe.bundle.js:822:36
__webpack_require__@http://localhost:9000/runtime~main.iframe.bundle.js:28:33
__webpack_exec__@http://localhost:9000/main.iframe.bundle.js:1434:67
@http://localhost:9000/main.iframe.bundle.js:1435:1294
__webpack_require__.O@http://localhost:9000/runtime~main.iframe.bundle.js:75:24
@http://localhost:9000/main.iframe.bundle.js:1436:56
webpackJsonpCallback@http://localhost:9000/runtime~main.iframe.bundle.js:1178:45
@http://localhost:9000/main.iframe.bundle.js:1:83

Environment

• OS: osx 11.2.3
• Node.js version: 14.16.0
• NPM version: 7.11.1

Additional context

Storybook config:

const path = require('path')

module.exports = {
  stories: [
    '../lib/**/*.story.svelte',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-svelte-csf',
  ],
  core: {
    builder: 'webpack5',
  },
  svelteOptions: {
    preprocess: require('svelte-preprocess')({
        compilerOptions: {
          dev: true,
        },
        postcss: {
          plugins: [
            require('postcss-import'),
            require('postcss-nested'),
            require('autoprefixer'),
            require('cssnano'),
          ],
        },
      }),
  },
  webpackFinal: (config) => {
    config.resolve = {
      ...config.resolve,
      modules: [
        ...config.resolve.modules,
        'node_modules',
        path.resolve(__dirname, '../lib'),
      ],
    }

    return config
  },
}

Describe the bug

When i set strict: true in my tsconfig.json I get the following error in every stories file:

Argument of type 'typeof Story' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<StoryProps>) => Story' is not assignable to type 'new (args: { target: any; props?: any; }) => ATypedSvelteComponent'.
      Construct signature return types 'Story' and 'ATypedSvelteComponent' are incompatible.
        The types of '$on' are incompatible between these types.
          Type '<K extends never>(type: K, callback: (e: {}[K]) => void) => () => void' is not assignable to type '(event: string, handler: ((e: any) => any) | null | undefined) => () => void'.
            Types of parameters 'callback' and 'handler' are incompatible.
              Type '((e: any) => any) | null | undefined' is not assignable to type '(e: never) => void'.
                Type 'undefined' is not assignable to type '(e: never) => void'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2345)

Steps to reproduce the behavior

1. add strict: true in tsconfig.json

Expected behavior

no error

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

  System:
    OS: Linux 5.15 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 6.15 GB / 31.22 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Chromium: 106.0.5249.103
    Firefox: 105.0.3
  npmPackages:
    @storybook/addon-svelte-csf: ^2.0.8 => 2.0.8 
    @storybook/svelte: ^6.5.10 => 6.5.10 
    @sveltejs/package: ^1.0.0-next.1 => 1.0.0-next.1 
    @sveltejs/vite-plugin-svelte: ^1.0.1 => 1.0.1 
    svelte: ^3.49.0 => 3.49.0 
    typescript: ^4.6.4 => 4.7.4 
    vite: ^3.0.7 => 3.0.9

Additional context

The Problem lies in the types file, although I cannot figure out what it needs to be changed to

Hi,

I tried to setup a project using both Svelte CSF and Storyshots and got errors during integration.

I saw that this project contained an example, so I cloned it and made some tests.

Describe the bug

I ran into a strange bug with my cloned repository.

If I launch npm run test, it worked well initially.

So I tried a more advanced test, I tried to replace:
import { Meta, Story } from '../src/index.js';
by
import { Meta, Story } from '@storybook/addon-svelte-csf'; (version 1.1.0)

Just doing that, generated strange issues: "SyntaxError: Unexpected token '<'"

And the Storyshot for the Story in error was not generated.

Steps to reproduce the behavior

Here my cloned repository and my commit to reproduce this strange behaviour:
cmellinas@7202f41

Expected behavior

Storyshots should work the same way with npm library and local import.

Environment

• OS: MacOS
• Node.js version: v14.16.0
• NPM version: 6.14.11

Do I need to setup something specific for Storyshot to make Svelte CSF addon work ?

I tried this:
https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-core#testing-stories-that-rely-on-addon-added-decorators

But I didn't find a solution to make it work correctly.

Thanks,

I followed the instructions to upgrade to the latest Storybook pre-release version, in order to go to Webpack 5 (because I have trouble with the lack of optional chaining support in Webpack 4).

I have two results:

1. I can now run storybook in my project - there are no more Webpack errors due to optional chaining syntax.
2. All my stories are gone, where 'gone' means undetected by Storybook and thus entirely invisible.

I suspect incompatibilities between the Webpack 5 compatible Storybook pre-release and this addon. In case I'm wrong and this is an issue that requires lots of research, I'll gladly debug and supply many details - but right now I assume that those in the know will say something along the lines of "obviously this can't possibly work right now, you dumb fool". So please go ahead!

With this example:

<Meta
  title="Graph"
  component={Graph}
  argTypes={{
    symbol: { type: 'select', options: $symbols },
  }}
/>

How would one go about changing a select list of strings to select from dynamically where $symbols is held?

Using a store does not seem to work as expected. However, if changes occur and web pack rebuilds the changes will reflect. Perhaps new instantiation of Meta component is the reason. I am a pretty new to svelte and tried to research on forcing the component to re-initialize, but no luck.

Thanks! <3

Describe the bug

The Svelte team only very begrunglingly maintains svelte-loader and its borderline deprecated. SvelteKit is the official way to build Svelte projects and uses Vite and vite-plugin-svelte by default. Similarly, we'd prefer people use Vitest to Jest and svelte-jester to better leverage the Vite ecosystem.

Steps to reproduce the behavior

It's also an issue here: https://github.com/storybookjs/storybook/blob/main/app/svelte/package.json

Expected behavior

Should not require the use of Webpack with Svelte, but make it optional and use Vite by default. An example of Svelte, Storybook, and Vite can be found here: https://github.com/michaelwooley/storybook-experimental-vite

Maybe Storybook 7 will fix this

Screenshots and/or logs

N/A

Environment

Latest code

Additional context

SvelteKit projects are now created with a vite.config.js by default in part to make setting up Storybook with builder-vite more seamless

Describe the bug

This package names several internal packages of storybook as peer-dependencies. Because those packages usually aren't installed explicitly, it may throw errors in certain package-managers. Below is an example of pnpm.

I would like to see those peer-deps removed. Would this be possible or is there any reason I may have overlooked for having them in the first place?

 WARN  Issues with peer dependencies found
.
└─┬ @storybook/addon-svelte-csf
  ├── ✕ missing peer @storybook/addons@^6.4.20
  ├── ✕ missing peer @storybook/api@^6.4.20
  ├── ✕ missing peer @storybook/client-api@^6.4.20
  ├── ✕ missing peer @storybook/client-logger@^6.4.20
  ├── ✕ missing peer @storybook/components@^6.4.20
  ├── ✕ missing peer @storybook/core-events@^6.4.20
  └── ✕ missing peer @storybook/theming@^6.4.20
Peer dependencies that should be installed:
  @storybook/addons@^6.4.20         @storybook/client-api@^6.4.20     @storybook/components@^6.4.20     @storybook/theming@^6.4.20
  @storybook/api@^6.4.20            @storybook/client-logger@^6.4.20  @storybook/core-events@^6.4.20

Thanks in advance!

Currently stories.svelte files are incompatible with:

• story index generation storybookjs/storybook#18081
• storybook test runner storybookjs/test-runner#80

To address this, we've added an "indexer" API to Storybook core for 7.0: storybookjs/storybook#18355

If addon-svelte-csf were to implement an indexer, it would solve the above problems, plus other future problems as we build more on top of the story index (which we will definitely do more of in core)

In the loader at:

There's some generated code that exports each story by their name. This conflicts with imports so for example you can't have something like this (modified from the example code):

<script>
  import { Meta, Story, Template  } from '@storybook/addon-svelte-csf';
  import Button from './Button.svelte';
</script>

<Meta title="Button" component={Button} />

<Template let:args>
  <Button {...args}/>
</Template>

<Story name="Button" args={{ rounded: true}} />

Since it will try to declare Button again.

I believe this could be as simple as adding a prefix to the generated export name, such as "Story" and that seems to work locally but I am not familiar enough with the code and whether this would break something else to send a pull request for it.

I'm using pnpm currently with strict-peer-dependencies and see that react and react-dom are listed as peerDependencies within this package. I think this is wrong and should

1. either be removed
2. declared as optional via peerDependenciesMeta

I can create a PR and would probably go for the latter if that's fine?

Hi, the Show code button in the docs section only shows the Template.

I would expect to see the actual attributes there (from the configuration below). Are there any plans to implement this?

Describe the bug

Trying to use TypeScript in the stories.svelte caused error: ParseError: Unexpected token

<script lang="ts">
  import type { IRoute } from './IRoute';

  const ROUTES: IRoute[] = [
    {
      url: '/',
      title: 'Home',
    },
   ...
  ]

</script>

Expected behavior

TypeScript should work using svelte preprocessor: https://svelte.dev/docs#svelte_preprocess

Screenshots and/or logs

WARNING in ./src/modules/presentational/components/nav-bar2/NavBar2.stories.svelte
Module build failed (from ./node_modules/@storybook/addon-svelte-csf/dist/parser/svelte-stories-loader.js):
ParseError: Unexpected token
    at error (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:16828:10)
    at Parser$1.acorn_error (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:16822:15)
    at Object.read_script [as read] (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:7501:17)
    at tag (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:15887:34)
    at new Parser$1 (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:16919:21)
    at Object.compile (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/svelte/compiler.js:29918:18)
    at extractStories (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/@storybook/addon-svelte-csf/dist/parser/extract-stories.js:49:32)
    at Object.transformSvelteStories (/Users/pli/my/git/engineforce/super-core/clients/boson/node_modules/@storybook/addon-svelte-csf/dist/parser/svelte-stories-loader.js:64:52)
 @ \.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx|svelte))$ (./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx|svelte))$) ./modules/presentational/components/nav-bar2/NavBar2.stories.svelte
 @ ./.storybook/generated-stories-entry.js

Environment

• OS: MacOS Catalina 10.15.7
• Node.js version: v12.13.1
• NPM version: 6.12.1
• [email protected]
• @storybook/[email protected]
• @storybook/[email protected]