@storybook/addon-svelte-csf - npm Package Compare versions

Comparing version 4.1.4--canary.185.3e8602c.0 to 4.2.0--canary.186.1e70e3a.0

dist/index.d.ts

 import type { Args as BaseArgs } from '@storybook/types';
 import type { EmptyObject } from 'type-fest';
 import type { Meta as MetaType, StoryCmp, StoryContext as BaseStoryContext, StoryAnnotations, Cmp } from '#types';
+import TemplateComponent from './runtime/Template.svelte';
 export { setTemplate } from './runtime/contexts/template.svelte';
 export declare function defineMeta<const TOverrideArgs extends BaseArgs = EmptyObject, const TCmp extends Cmp = Cmp>(meta: MetaType<TCmp>): {
-    Story: StoryCmp<EmptyObject, TCmp, MetaType<TCmp>>;
+    Story: StoryCmp<EmptyObject, TCmp, typeof meta>;
     meta: MetaType<TCmp>;
@@ -21,2 +22,3 @@ };
 export declare const Story: () => never;
+export { 
 /**
@@ -26,2 +28,2 @@ * @deprecated Use snippets instead
  */
-export declare const Template: () => never;
+TemplateComponent as Template, };

dist/index.js

 import dedent from 'dedent';
 import StoryComponent from './runtime/Story.svelte';
+import TemplateComponent from './runtime/Template.svelte';
 export { setTemplate } from './runtime/contexts/template.svelte';
@@ -30,2 +31,3 @@ export function defineMeta(meta) {
 };
+export { 
 /**
@@ -35,7 +37,2 @@ * @deprecated Use snippets instead
  */
-export const Template = () => {
-    throw new Error(dedent `
-    The Template component has been removed in favor of the snippets syntax.
-    see: https://github.com/storybookjs/addon-svelte-csf/blob/main/MIGRATION.md#template-component-removed
-  `);
-};
+TemplateComponent as Template, };

dist/parser/analyse/story/attributes.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Attribute, Component } from 'svelte/compiler';
@@ -3,0 +2,0 @@ interface Params {

dist/parser/analyse/story/attributes/identifiers.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Attribute, Component } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import type { SvelteASTNodes } from '#parser/extract/svelte/nodes';

dist/parser/analyse/story/children.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Component } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import type { extractSvelteASTNodes } from '#parser/extract/svelte/nodes';

dist/parser/ast.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import { type Root } from 'svelte/compiler';
@@ -3,0 +2,0 @@ interface GetSvelteASTOptions {

dist/parser/extract/svelte/fragment-nodes.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Comment, Component, Fragment, SnippetBlock } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import type { extractModuleNodes } from './module-nodes';

dist/parser/extract/svelte/instance-nodes.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { CallExpression } from 'estree';
@@ -3,0 +2,0 @@ import type { Root } from 'svelte/compiler';

dist/parser/extract/svelte/module-nodes.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Identifier, ImportSpecifier, VariableDeclaration } from 'estree';
@@ -3,0 +2,0 @@ import type { Root } from 'svelte/compiler';

dist/parser/extract/svelte/nodes.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Root } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import { extractModuleNodes } from './module-nodes';

dist/parser/extract/svelte/snippet-block.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Component, SnippetBlock } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import type { SvelteASTNodes } from '#parser/extract/svelte/nodes';

dist/parser/extract/svelte/story/children.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Component, SnippetBlock } from 'svelte/compiler';
@@ -3,0 +2,0 @@ type Result = SnippetBlock | undefined;

dist/preset.js

@@ -1,7 +0,11 @@
-import { plugin } from './compiler/plugin';
-import { indexer } from './indexer/index';
-export const viteFinal = async (config) => {
+import { postTransformPlugin, preTransformPlugin } from '#compiler/plugins';
+import { indexer } from '#indexer/index';
+export const viteFinal = async (config, options) => {
     return {
         ...config,
-        plugins: [...(config.plugins ?? []), plugin()],
+        plugins: [
+            ...(config.plugins ?? []),
+            /** TODO: Is this the place for `options.supportLegacy`? */ preTransformPlugin(),
+            postTransformPlugin(),
+        ],
     };
@@ -8,0 +12,0 @@ };

dist/runtime/contexts/extractor.svelte.d.ts

@@ -10,3 +10,3 @@ import type { Args } from '@storybook/types';
     readonly isExtracting: boolean;
-    readonly register: (storyCmpProps: Record<string, any>) => void;
+    readonly register: (storyCmpProps: ComponentProps<StoryCmp<TOverrideArgs, TCmp, TMeta>>) => void;
 };
@@ -20,4 +20,4 @@ export type StoriesExtractorContext<TOverrideArgs extends Args, TCmp extends Cmp, TMeta extends Meta<TCmp>> = ReturnType<typeof buildContext<TOverrideArgs, TCmp, TMeta>>;
     readonly isExtracting: boolean;
-    readonly register: (storyCmpProps: Record<string, any>) => void;
+    readonly register: (storyCmpProps: ComponentProps<StoryCmp<TOverrideArgs, TCmp, TMeta>>) => void;
 };
 export {};

dist/runtime/create-runtime-stories.d.ts

 import { type Component } from 'svelte';
+import type { StoriesRepository } from '#runtime/contexts/extractor.svelte';
+import type { Cmp, Meta } from '#types';
 /**
@@ -15,6 +17,6 @@ * @module
 export declare const createRuntimeStories: (Stories: Component, meta: Meta<Cmp>) => Record<string, import("@storybook/types").StoryAnnotations<import("@storybook/svelte").SvelteRenderer<import("svelte").SvelteComponent<{
-    Stories: Component<{}, {}, string>;
+    Stories: Component;
     exportName: string;
-    args: any;
-    storyContext: StoryContext<Cmp, Meta<Cmp>>;
+    args: NonNullable<StoriesRepository<StoriesRepository, StoriesRepository<StoriesRepository>>["args"]>;
+    storyContext: StoriesRepository<StoriesRepository, StoriesRepository<StoriesRepository>>;
 }, {
@@ -25,6 +27,6 @@ [evt: string]: CustomEvent<any>;
 } & Record<string, any>>, {
-    Stories: Component<{}, {}, string>;
+    Stories: Component;
     exportName: string;
-    args: any;
-    storyContext: StoryContext<Cmp, Meta<Cmp>>;
+    args: NonNullable<StoriesRepository<StoriesRepository, StoriesRepository<StoriesRepository>>["args"]>;
+    storyContext: StoriesRepository<StoriesRepository, StoriesRepository<StoriesRepository>>;
 }>>;

dist/runtime/emit-code.d.ts

@@ -20,4 +20,4 @@ import type { StoryObj } from '@storybook/svelte';
     code: string;
-    args: StoryObj['args'];
+    args: StoryObj["args"];
 }) => string;
 export {};

dist/runtime/Story.svelte.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Args } from '@storybook/types';
@@ -3,0 +2,0 @@ import type { Cmp, Meta } from '#types';

dist/runtime/StoryRenderer.svelte.d.ts

 import type { Component } from 'svelte';
-import type { Cmp, Meta, StoryAnnotations } from '#types';
+import type { Cmp, Meta, StoryAnnotations, StoryContext } from '#types';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -16,3 +16,3 @@ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
     exportName: string;
-    args: NonNullable<StoryAnnotations<Cmp, Meta<Cmp>>['args']>;
+    args: NonNullable<StoryAnnotations<Cmp, Meta<Cmp>>["args"]>;
     storyContext: StoryContext<Cmp, Meta<Cmp>>;
@@ -19,0 +19,0 @@ }, {

dist/utils/error.d.ts

@@ -1,3 +0,1 @@
-/// <reference types="node" />
-/// <reference types="svelte" />
 import url from 'node:url';
@@ -4,0 +2,0 @@ import type { Component } from 'svelte/compiler';

dist/utils/error/parser/analyse/story.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Attribute } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import { StorybookSvelteCSFError } from '#utils/error';

dist/utils/error/parser/extract/svelte.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 import type { Attribute } from 'svelte/compiler';
@@ -3,0 +2,0 @@ import type { SvelteASTNodes } from '#parser/extract/svelte/nodes';

package.json

 {
   "name": "@storybook/addon-svelte-csf",
-  "version": "4.1.4--canary.185.3e8602c.0",
+  "version": "4.2.0--canary.186.1e70e3a.0",
   "description": "Allows to write stories in Svelte syntax",
@@ -18,3 +18,6 @@ "keywords": [
   "imports": {
-    "#*": "./dist/*.js"
+    "#*": {
+      "development": "./src/*.ts",
+      "default": "./dist/*.js"
+    }
   },
@@ -61,2 +64,3 @@ "exports": {
     "esrap": "^1.2.2",
+    "lodash-es": "^4.17.21",
     "magic-string": "^0.30.10",
@@ -66,17 +70,17 @@ "zimmerframe": "^1.1.2"
   "devDependencies": {
-    "@auto-it/released": "^10.46.0",
-    "@storybook/addon-actions": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/client-logger": "^8.1.9",
-    "@storybook/core-common": "^8.1.9",
-    "@storybook/csf": "^0.1.8",
-    "@storybook/docs-tools": "^8.1.9",
+    "@auto-it/released": "^11.1.6",
+    "@storybook/addon-actions": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/client-logger": "^8.1.11",
+    "@storybook/core-common": "^8.1.11",
+    "@storybook/csf": "^0.1.9",
+    "@storybook/docs-tools": "^8.1.11",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/node-logger": "^8.1.9",
-    "@storybook/preview-api": "^8.1.9",
-    "@storybook/svelte": "^8.1.9",
-    "@storybook/svelte-vite": "^8.1.9",
-    "@storybook/test": "^8.1.9",
-    "@storybook/types": "^8.1.9",
+    "@storybook/node-logger": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/svelte": "^8.1.11",
+    "@storybook/svelte-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@storybook/types": "^8.1.11",
     "@sveltejs/package": "^2.3.2",
@@ -86,6 +90,6 @@ "@sveltejs/vite-plugin-svelte": "4.0.0-next.3",
     "@types/estree": "^1.0.5",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.9",
     "@vitest/ui": "^1.6.0",
     "auto": "^11.1.6",
-    "chromatic": "^6.24.1",
+    "chromatic": "^11.5.4",
     "concurrently": "^8.2.2",
@@ -95,15 +99,15 @@ "eslint": "^7.32.0",
     "jsdom": "^24.1.0",
-    "lodash-es": "^4.17.21",
     "prettier": "^3.3.2",
-    "prettier-plugin-svelte": "^3.2.4",
+    "prettier-plugin-svelte": "^3.2.5",
     "rimraf": "^5.0.7",
     "rollup": "^4.18.0",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.11",
     "svelte": "5.0.0-next.155",
-    "svelte-check": "^3.8.0",
+    "svelte-ast-print": "^0.2.0",
+    "svelte-check": "^3.8.4",
     "tslib": "^2.6.3",
-    "type-fest": "^4.20.0",
-    "typescript": "^5.4.5",
-    "typescript-svelte-plugin": "^0.3.38",
-    "vite": "^5.3.1",
+    "type-fest": "^4.20.1",
+    "typescript": "^5.5.2",
+    "typescript-svelte-plugin": "^0.3.39",
+    "vite": "^5.3.2",
     "vite-plugin-inspect": "^0.8.4",
@@ -110,0 +114,0 @@ "vite-plugin-virtual": "^0.3.0",

README.md

@@ -85,3 +85,3 @@ # Svelte CSF
 
-To define stories, you use the `Story` component returned from the `defineMeta` function. Depending on what you want the story to contain, there are multiple ways to use the `Story` component. Common for all the use case is that all properties of [a regular CSF story](https://storybook.js.org/docs/api/csf#named-story-exports) are passed as props to the `Story` component, with the exception of the `render` function, which does not have any effect in Svelte CSF.
+To define stories, you use the `Story` component returned from the `defineMeta` function. Depending on what you want the story to contain, [there are multiple ways to use the `Story` component](./examples/Templating.stories.svelte). Common for all the use case is that all properties of [a regular CSF story](https://storybook.js.org/docs/api/csf#named-story-exports) are passed as props to the `Story` component, with the exception of the `render` function, which does not have any effect in Svelte CSF.
 
@@ -125,10 +125,3 @@ All story requires either the `name` prop or [`exportName` prop](#custom-export-name).
   {#snippet children(args)}
-    <MyComponent {...args}>
-      {#if args.simpleChild}
-        <AChild data={args.childProps} />
-      {:else}
-        <ComplexChildA data={args.childProps} />
-        <ComplexChildB data={args.childProps} />
-      {/if}
-    </MyComponent>
+    <MyComponent {...args}>Component with args</MyComponent>
   {/snippet}
@@ -135,0 +128,0 @@ </Story>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

179223

increased by4.91%

Number of package files

117

increased by7.34%

Lines of code

4042

increased by5.48%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

9

increased by12.5%

Number of lines in readme file

315

decreased by-2.17%

Dependency changes

• + Addedlodash-es@^4.17.21

• + Added@babel/compat-data@7.25.2(transitive)

• + Added@babel/generator@7.25.0(transitive)

• + Added@babel/helper-create-class-features-plugin@7.25.0(transitive)

• + Added@babel/parser@7.25.3(transitive)

• + Added@babel/plugin-syntax-typescript@7.24.7(transitive)

• + Added@babel/plugin-transform-async-generator-functions@7.25.0(transitive)

• + Added@babel/plugin-transform-class-properties@7.24.7(transitive)

• + Added@babel/plugin-transform-classes@7.25.0(transitive)

• + Added@babel/plugin-transform-private-methods@7.24.7(transitive)

• + Added@babel/plugin-transform-unicode-sets-regex@7.24.7(transitive)

• + Added@babel/preset-env@7.25.3(transitive)

• + Added@babel/runtime@7.25.0(transitive)

• + Added@babel/traverse@7.25.3(transitive)

• + Added@babel/types@7.25.2(transitive)

• + Addedlodash-es@4.17.21(transitive)

• + Addedsvelte@5.0.0-next.232(transitive)

• - Removed@babel/compat-data@7.25.4(transitive)

• - Removed@babel/generator@7.25.4(transitive)

• - Removed@babel/helper-create-class-features-plugin@7.25.4(transitive)

• - Removed@babel/parser@7.25.4(transitive)

• - Removed@babel/plugin-syntax-typescript@7.25.4(transitive)

• - Removed@babel/plugin-transform-async-generator-functions@7.25.4(transitive)

• - Removed@babel/plugin-transform-class-properties@7.25.4(transitive)

• - Removed@babel/plugin-transform-classes@7.25.4(transitive)

• - Removed@babel/plugin-transform-private-methods@7.25.4(transitive)

• - Removed@babel/plugin-transform-unicode-sets-regex@7.25.4(transitive)

• - Removed@babel/preset-env@7.25.4(transitive)

• - Removed@babel/runtime@7.25.4(transitive)

• - Removed@babel/traverse@7.25.4(transitive)

• - Removed@babel/types@7.25.4(transitive)

• - Removedsvelte@5.0.0-next.233(transitive)