Socket
Socket
Sign inDemoInstall

@storybook/addon-svelte-csf

Package Overview
Dependencies
Maintainers
0
Versions
279
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 4.2.0--canary.186.ede9fbf.0 to 4.2.0--canary.186.fdebf5c.0

dist/utils/error/codemod/index.d.ts
dist/utils/error/codemod/index.js

22

dist/compiler/plugins.js

@@ -19,3 +19,3 @@ /**

export async function preTransformPlugin() {
const [{ createFilter }] = await Promise.all([import('vite')]);
const [{ createFilter }, { print }] = await Promise.all([import('vite'), import('svelte-ast-print')]);
const include = /\.stories\.svelte$/;

@@ -29,10 +29,16 @@ const filter = createFilter(include);

return undefined;
const { print } = await import('svelte-ast-print');
const svelteAST = getSvelteAST({ code, filename: id });
const transformedSvelteAST = await codemodLegacyNodes(svelteAST);
const transformedSvelteAST = await codemodLegacyNodes({
ast: svelteAST,
filename: id,
});
let magicCode = new MagicString(code);
magicCode.overwrite(0, code.length - 1, print(transformedSvelteAST));
const stringifiedMagicCode = magicCode.toString();
return {
code: magicCode.toString(),
code: stringifiedMagicCode,
map: magicCode.generateMap({ hires: true, source: id }),
meta: {
_storybook_csf_pre_transform: stringifiedMagicCode,
},
};

@@ -58,8 +64,4 @@ },

let magicCompiledCode = new MagicString(compiledCode);
// FIXME: This needs to change.
// we need to access the code - results from `pre-transform` plugin - 'storybook:addon-svelte-csf-plugin-post'.
// But how?
// @ts-expect-error FIXME: `this.originalCode` exists at runtime in the development mode only.
// Need to research if its documented somewhere
let rawCode = this.originalCode ?? fs.readFileSync(id).toString();
let rawCode = this.getModuleInfo(id)?.meta._storybook_csf_pre_transform ??
fs.readFileSync(id).toString();
if (svelteConfig?.preprocess) {

@@ -66,0 +68,0 @@ const processed = await preprocess(rawCode, svelteConfig.preprocess, {

1

dist/compiler/post-transform/appendix/create-import.js

@@ -16,3 +16,2 @@ import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };

type: 'Literal',
// TODO: Probably possible to achieve picking the whole path from `pkg.exports` with Object.keys or something like that
value: `${pkg.name}/internal/create-runtime-stories`,

@@ -19,0 +18,0 @@ },

7

dist/compiler/post-transform/define-meta/insert-description.js

@@ -1,2 +0,2 @@

import { logger } from '@storybook/client-logger';
import { logger } from '@storybook/node-logger';
import { findASTPropertyIndex, findPropertyDescriptionIndex, findPropertyDocsIndex, findPropertyParametersIndex, getDescriptionPropertyValue, getDocsPropertyValue, getParametersPropertyValue, } from '#compiler/post-transform/shared/description';

@@ -70,3 +70,6 @@ import { createASTProperty, createASTObjectExpression } from '#parser/ast';

}) !== -1) {
logger.warn(`defineMeta() already has explicitly set description. Ignoring the JSDoc comment above. Stories file: ${filename}`);
logger.warn(`Svelte CSF:
Description was already set in parameters.docs.description.component,
ignoring JSDoc comment above defineMeta() in:
${filename}`);
return;

@@ -73,0 +76,0 @@ }

36

dist/compiler/post-transform/shared/description.js

@@ -1,2 +0,2 @@

import { logger } from '@storybook/client-logger';
import { logger } from '@storybook/node-logger';
import dedent from 'dedent';

@@ -60,7 +60,11 @@ import { createASTObjectExpression } from '#parser/ast';

logger.warn(dedent `
Encountered invalid schema in an attempt to access 'parameters' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${property.value.type}'.
This issue occurred in the stories file: ${filename}
Svelte CSF:
Could not access 'parameters' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${property.value.type}', in:
${filename}
Property:
${JSON.stringify(property, null, 2)}
`);
// TODO: this is unsafe. If this happens, we'll just have an error later on. we want to skip instead.
return undefined;

@@ -92,6 +96,9 @@ }

logger.warn(dedent `
Encountered invalid schema in an attempt to access 'parameters.docs' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${value.type}'.
This issue occurred in the stories file: ${filename}
Svelte CSF:
Could not access 'parameters.docs' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${property.value.type}', in:
${filename}
Property:
${JSON.stringify(property, null, 2)}
`);

@@ -118,6 +125,9 @@ return undefined;

logger.warn(dedent `
Encountered invalid schema in an attempt to access 'parameters.docs.description' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${value.type}'.
This issue occurred in the stories file: ${filename}.
Svelte CSF:
Could not access 'parameters.docs.description' of ${component ? "Story's prop" : 'defineMeta'}}.
Expected value to be an object expression.
Instead it was '${property.value.type}', in:
${filename}
Property:
${JSON.stringify(property, null, 2)}
`);

@@ -124,0 +134,0 @@ return undefined;

12

dist/compiler/post-transform/story/insert-description.js

@@ -1,2 +0,2 @@

import { logger } from '@storybook/client-logger';
import { logger } from '@storybook/node-logger';
import dedent from 'dedent';

@@ -63,6 +63,8 @@ import { findASTPropertyIndex, findPropertyDescriptionIndex, findPropertyDocsIndex, findPropertyParametersIndex, getParametersPropertyValue, getDocsPropertyValue, getDescriptionPropertyValue, } from '#compiler/post-transform/shared/description';

logger.warn(dedent `
<Story name="${name}" /> component(s) already has explicitly set 'parameterds.docs.description.story'.
Ignoring the HTML comment above.
Stories file: file://${filename}
`);
Svelte CSF:
Description was already set in parameters.docs.description.story
in the story: <Story name="${name}" />.
ignoring JSDoc comment above.
in:
${filename}`);
return;

@@ -69,0 +71,0 @@ }

7

dist/compiler/pre-transform/codemods/import-declaration.d.ts
import type { ImportDeclaration } from 'estree';
interface Params {
node: ImportDeclaration;
filename?: string;
}
/**

@@ -15,2 +19,3 @@ *

*/
export declare function transformImportDeclaration(importDeclaration: ImportDeclaration): ImportDeclaration;
export declare function transformImportDeclaration(params: Params): ImportDeclaration;
export {};

14

dist/compiler/pre-transform/codemods/import-declaration.js

@@ -0,1 +1,2 @@

import { DefaultOrNamespaceImportUsedError } from '#utils/error/parser/extract/svelte';
/**

@@ -14,4 +15,5 @@ *

*/
export function transformImportDeclaration(importDeclaration) {
let { specifiers, ...rest } = importDeclaration;
export function transformImportDeclaration(params) {
const { node, filename } = params;
let { specifiers, ...rest } = node;
let newSpecifiers = [];

@@ -21,8 +23,8 @@ let hasDefineMeta = false;

if (specifier.type !== 'ImportSpecifier') {
// TODO: Update and document error message, this issue could exist in both legacy and new syntax
throw new Error();
throw new DefaultOrNamespaceImportUsedError(filename);
}
if (specifier.imported.name === 'defineMeta') {
if (['defineMeta', 'setTemplate'].includes(specifier.imported.name)) {
newSpecifiers.push(specifier);
hasDefineMeta = true;
if (specifier.imported.name === 'defineMeta')
hasDefineMeta = true;
}

@@ -29,0 +31,0 @@ }

7

dist/compiler/pre-transform/codemods/legacy-story.d.ts
import type { Component } from 'svelte/compiler';
export declare function transformLegacyStory(component: Component): Component;
interface Params {
node: Component;
filename?: string;
}
export declare function transformLegacyStory(params: Params): Component;
export {};

20

dist/compiler/pre-transform/codemods/legacy-story.js

@@ -0,4 +1,8 @@

import { camelCase } from 'es-toolkit/string';
import { createASTAttribute, createASTExpressionTag, createASTObjectExpression, createASTProperty, } from '#parser/ast';
export function transformLegacyStory(component) {
let { attributes, fragment, ...rest } = component;
import { InvalidTemplateAttribute } from '#utils/error/codemod/index';
import { storyNameToExportName } from '#utils/identifier-utils';
export function transformLegacyStory(params) {
const { node, filename } = params;
let { attributes, fragment, ...rest } = node;
let newAttributes = [];

@@ -46,3 +50,3 @@ let autodocs;

if (attribute.type === 'Attribute' && attribute.name === 'template') {
attribute = templateToChildren(attribute);
attribute = templateToChildren(attribute, filename);
}

@@ -143,7 +147,6 @@ newAttributes.push(attribute);

}
function templateToChildren(attribute) {
function templateToChildren(attribute, filename) {
const { name, value, ...rest } = attribute;
if (value === true) {
// TODO: Improve error message
throw new Error('');
throw new InvalidTemplateAttribute({ attribute, filename });
}

@@ -156,6 +159,5 @@ return {

type: 'Identifier',
// TODO: Transform name to be snakeCase or valid JavaScript syntax for naming variables
name: value[0].type === 'Text'
name: camelCase(value[0].type === 'Text'
? value[0].data
: value[0].expression.value,
: value[0].expression.value),
}),

@@ -162,0 +164,0 @@ ],

15

dist/compiler/pre-transform/codemods/template-to-snippet.js

@@ -29,6 +29,3 @@ import { getStringValueFromAttribute } from '#parser/analyse/story/attributes';

const attributeId = attributes.find((attr) => {
if (attr.type === 'Attribute') {
return attr.name === 'id';
}
// Will TypeScript 5.5 handle type inference for this one better? 🤔
return attr.type === 'Attribute' && attr.name === 'id';
});

@@ -40,12 +37,6 @@ const id = getStringValueFromAttribute({

const letDirectiveArgs = attributes.find((attr) => {
if (attr.type === 'LetDirective') {
return attr.name === 'args';
}
// Will TypeScript 5.5 handle type inference for this one better? 🤔
return attr.type === 'LetDirective' && attr.name === 'args';
});
const letDirectiveContext = attributes.find((attr) => {
if (attr.type === 'LetDirective') {
return attr.name === 'context';
}
// Will TypeScript 5.5 handle type inference for this one better? 🤔
return attr.type === 'LetDirective' && attr.name === 'context';
});

@@ -52,0 +43,0 @@ let parameters = [];

7

dist/compiler/pre-transform/index.d.ts
import type { Root } from 'svelte/compiler';
export declare function codemodLegacyNodes(ast: Root): Promise<Root>;
interface Params {
ast: Root;
filename?: string;
}
export declare function codemodLegacyNodes(params: Params): Promise<Root>;
export {};

11

dist/compiler/pre-transform/index.js

@@ -7,4 +7,6 @@ import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };

import { transformTemplateToSnippet } from '#compiler/pre-transform/codemods/template-to-snippet';
export async function codemodLegacyNodes(ast) {
import { MissingModuleTagError } from '#utils/error/parser/extract/svelte';
export async function codemodLegacyNodes(params) {
const { walk } = await import('zimmerframe');
const { ast, filename } = params;
const state = {

@@ -22,4 +24,3 @@ componentIdentifierName: {},

if (!module) {
// TODO: Add description & document - invalid syntax in both modern and legacy
throw new Error();
throw new MissingModuleTagError(filename);
}

@@ -50,3 +51,3 @@ const transformedModule = visit(module, state);

state.componentIdentifierName = getComponentsIdentifiersNames(specifiers);
return transformImportDeclaration(node);
return transformImportDeclaration({ node, filename });
}

@@ -84,3 +85,3 @@ },

state.componentMetaHtmlComment = undefined;
return transformLegacyStory(node);
return transformLegacyStory({ node, filename });
}

@@ -87,0 +88,0 @@ if (name === componentIdentifierName?.Template) {

3

dist/index.js
import StoryComponent from './runtime/Story.svelte';
// TODO: Remove in next major release
import LegacyMetaComponent from './runtime/LegacyMeta.svelte';
// TODO: Remove in next major release
import LegacyStoryComponent from './runtime/LegacyStory.svelte';
// TODO: Remove in next major release
import LegacyTemplateComponent from './runtime/LegacyTemplate.svelte';

@@ -13,2 +15,3 @@ export { setTemplate } from './runtime/contexts/template.svelte';

}
// TODO: Remove in next major release
export {

@@ -15,0 +18,0 @@ /**

2

dist/indexer/index.d.ts
import type { Indexer } from '@storybook/types';
export declare const indexer: Indexer;
export declare const createIndexer: (legacyTemplate: boolean) => Indexer;

10

dist/indexer/index.js
import { combineTags } from '@storybook/csf';
import { parseForIndexer } from '#indexer/parser';
export const indexer = {
export const createIndexer = (legacyTemplate) => ({
test: /\.svelte$/,
createIndex: async (filename, { makeTitle }) => {
const { meta, stories } = await parseForIndexer(filename,
// TODO: @JReinhold Replace with dynamic pass of options
{
supportLegacy: false,
});
const { meta, stories } = await parseForIndexer(filename, { legacyTemplate });
return stories.map((story) => {

@@ -22,2 +18,2 @@ return {

},
};
});

70

dist/indexer/parser.js

@@ -9,3 +9,4 @@ import fs from 'node:fs/promises';

import { getPropertyArrayOfStringsValue, getPropertyStringValue, } from '#parser/analyse/define-meta/properties';
import { DefaultOrNamespaceImportUsedError, GetDefineMetaFirstArgumentError, MissingModuleTagError, } from '#utils/error/parser/extract/svelte';
import { DefaultOrNamespaceImportUsedError, GetDefineMetaFirstArgumentError, MissingModuleTagError, NoStoryComponentDestructuredError, } from '#utils/error/parser/extract/svelte';
import { NoDestructuredDefineMetaCallError } from '#utils/error/parser/analyse/define-meta';
export async function parseForIndexer(filename, options) {

@@ -17,8 +18,4 @@ let [code, { walk }, { loadSvelteConfig }] = await Promise.all([

]);
const { supportLegacy } = options;
const { legacyTemplate } = options;
const svelteConfig = await loadSvelteConfig();
let defineMetaIdentifier = 'defineMeta';
let componentStoryIdentifier = 'Story';
// TODO: Remove it in the next major version
let componentMetaIdentifier = 'Meta';
if (svelteConfig?.preprocess) {

@@ -43,3 +40,6 @@ code = (await preprocess(code, svelteConfig.preprocess, {

const { state, visit } = context;
if (!module && !supportLegacy) {
if (module) {
visit(module, state);
}
else if (!legacyTemplate) {
throw new MissingModuleTagError(filename);

@@ -60,5 +60,3 @@ }

for (const statement of body) {
if (supportLegacy &&
statement.type === 'ImportDeclaration' &&
statement.source.value === pkg.name) {
if (statement.type === 'ImportDeclaration' && statement.source.value === pkg.name) {
visit(statement, state);

@@ -70,3 +68,3 @@ }

// TODO: Remove it in the next major version
if (supportLegacy && statement.type === 'ExportNamedDeclaration') {
if (legacyTemplate && statement.type === 'ExportNamedDeclaration') {
const { declaration } = statement;

@@ -79,4 +77,5 @@ if (declaration?.type === 'VariableDeclaration') {

},
ImportDeclaration(node, _context) {
ImportDeclaration(node, context) {
const { specifiers } = node;
const { state } = context;
for (const specifier of specifiers) {

@@ -86,12 +85,12 @@ if (specifier.type !== 'ImportSpecifier') {

}
if (supportLegacy && specifier.import.name === defineMetaIdentifier) {
componentMetaIdentifier = specifier.local.name;
if (specifier.imported.name === 'defineMeta') {
state.defineMetaImport = specifier;
}
// TODO: Remove it in the next major version
if (supportLegacy && specifier.import.name === componentMetaIdentifier) {
componentMetaIdentifier = specifier.local.name;
if (legacyTemplate && specifier.imported.name === 'Meta') {
state.legacyMetaImport = specifier;
}
// TODO: Remove it in the next major version
if (supportLegacy && specifier.import.name === componentStoryIdentifier) {
componentStoryIdentifier = specifier.local.name;
if (legacyTemplate && specifier.imported.name === 'Story') {
state.legacyStoryImport = specifier;
}

@@ -106,7 +105,9 @@ }

const { arguments: arguments_, callee } = init;
if (callee.type === 'Identifier' && callee.name === defineMetaIdentifier) {
if (callee.type === 'Identifier' && callee.name === state.defineMetaImport?.local.name) {
foundMeta = true;
if (id?.type !== 'ObjectPattern') {
// TODO:
throw new Error('Invalid syntax');
throw new NoDestructuredDefineMetaCallError({
defineMetaVariableDeclarator: declarations[0],
filename,
});
}

@@ -116,8 +117,10 @@ const { properties } = id;

property.key.type === 'Identifier' &&
property.key.name === componentStoryIdentifier);
property.key.name === 'Story');
if (!destructuredStoryIdentifier) {
// TODO:
throw new Error('Invalid syntax');
throw new NoStoryComponentDestructuredError({
filename,
defineMetaImport: state.defineMetaImport,
});
}
componentStoryIdentifier = destructuredStoryIdentifier.value.name;
state.defineMetaStory = destructuredStoryIdentifier.value;
if (arguments_[0].type !== 'ObjectExpression') {

@@ -132,3 +135,4 @@ throw new GetDefineMetaFirstArgumentError({

}
if (supportLegacy && !foundMeta && id.type === 'Identifier') {
// TODO: Remove in the next major version
if (legacyTemplate && !foundMeta && id.type === 'Identifier') {
const { name } = id;

@@ -154,3 +158,3 @@ if (name === 'meta') {

if (property.type === 'Property' && property.key.type === 'Identifier') {
visit(node, state);
visit(property, state);
}

@@ -187,3 +191,3 @@ }

// TODO: Remove in the next major version
if (!foundMeta && supportLegacy && name === componentMetaIdentifier) {
if (!foundMeta && legacyTemplate && name === state.legacyMetaImport?.local.name) {
const { attributes } = node;

@@ -212,3 +216,5 @@ for (const attribute of attributes) {

}
if (name === componentStoryIdentifier) {
if (state.defineMetaStory?.name === name ||
// TODO: Remove in the next major version
(legacyTemplate && name === state.legacyStoryImport?.local.name)) {
const attribute = extractStoryAttributesNodes({

@@ -237,3 +243,7 @@ component: node,

});
return results;
const { meta, stories } = results;
return {
meta,
stories,
};
}

10

dist/preset.d.ts

@@ -5,12 +5,14 @@ import type { StorybookConfig } from '@storybook/svelte-vite';

/**
* **Do you want to enable support for legacy code?**
* Enable support for legacy templating.
* This option is deprecated, it will be removed in a future major version and should only be used for gradual migration purposes.
* Please migrate to the new snippet-based templating API when possible.
*
* It will add overhead to the runtime, because it will trigger a pre-transform plugin,
* which will run codemods to transform legacy syntax into modern.
* Enabling this can slow down the build-performance because it requires more transformations.
*
* @default false
* @deprecated
*/
supportLegacy?: boolean;
legacyTemplate?: boolean;
}
export declare const viteFinal: StorybookConfig['viteFinal'];
export declare const experimental_indexers: StorybookConfig['experimental_indexers'];

10

dist/preset.js
import { postTransformPlugin, preTransformPlugin } from '#compiler/plugins';
import { indexer } from '#indexer/index';
import { createIndexer } from '#indexer/index';
export const viteFinal = async (config, options) => {
let { plugins = [], ...restConfig } = config;
const { supportLegacy = false } = options;
if (supportLegacy) {
const { legacyTemplate = false } = options;
if (legacyTemplate) {
plugins.unshift(await preTransformPlugin());

@@ -15,4 +15,4 @@ }

};
export const experimental_indexers = (indexers) => {
return [indexer, ...(indexers || [])];
export const experimental_indexers = (indexers, options) => {
return [createIndexer(options.legacyTemplate ?? false), ...(indexers || [])];
};

4

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

@@ -16,3 +16,3 @@ import { type Component } from 'svelte';

*/
export declare const createRuntimeStories: (Stories: Component, meta: Meta<Cmp>) => Record<string, import("@storybook/types").StoryAnnotations<import("@storybook/svelte").SvelteRenderer<import("svelte").SvelteComponent<{
export declare const createRuntimeStories: (Stories: Component, meta: Meta<Cmp>) => Record<string, import("@storybook/csf").StoryAnnotations<import("@storybook/svelte").SvelteRenderer<import("svelte").SvelteComponent<{
Stories: Component;

@@ -26,3 +26,3 @@ exportName: string;

$$bindings?: "" | undefined;
} & Record<string, any>>, {
}>, {
Stories: Component;

@@ -29,0 +29,0 @@ exportName: string;

4

dist/runtime/LegacyMeta.svelte.d.ts

@@ -12,6 +12,6 @@ import { SvelteComponent } from "svelte";

}
declare const LegacyMeta: $$__sveltets_2_IsomorphicComponent<import("@storybook/types").ComponentAnnotations<import("@storybook/svelte").SvelteRenderer<SvelteComponent<Record<string, any>, any, any>>, import("@storybook/types").Args>, {
declare const LegacyMeta: $$__sveltets_2_IsomorphicComponent<import("@storybook/csf").ComponentAnnotations<import("@storybook/svelte").SvelteRenderer<SvelteComponent<Record<string, any>, any, any>>, import("@storybook/csf").Args>, {
[evt: string]: CustomEvent<any>;
}, {}, Record<string, any>, "">;
}, {}, {}, "">;
type LegacyMeta = InstanceType<typeof LegacyMeta>;
export default LegacyMeta;

2

dist/runtime/LegacyStory.svelte.d.ts

@@ -18,4 +18,4 @@ 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> {

};
}, Record<string, any>, "">;
}, {}, "">;
type LegacyStory = InstanceType<typeof LegacyStory>;
export default LegacyStory;

2

dist/runtime/LegacyTemplate.svelte.d.ts

@@ -18,4 +18,4 @@ 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> {

};
}, Record<string, any>, string>;
}, {}, string>;
type LegacyTemplate = InstanceType<typeof LegacyTemplate>;
export default LegacyTemplate;

2

dist/runtime/StoriesExtractor.svelte.d.ts

@@ -20,4 +20,4 @@ import type { Component } from 'svelte';

[evt: string]: CustomEvent<any>;
}, {}, Record<string, any>, "">;
}, {}, {}, "">;
type StoriesExtractor = InstanceType<typeof StoriesExtractor>;
export default StoriesExtractor;

2

dist/runtime/StoryRenderer.svelte.d.ts

@@ -20,4 +20,4 @@ import type { Component } from 'svelte';

[evt: string]: CustomEvent<any>;
}, {}, Record<string, any>, "">;
}, {}, {}, "">;
type StoryRenderer = InstanceType<typeof StoryRenderer>;
export default StoryRenderer;

1

dist/utils/error.d.ts

@@ -17,2 +17,3 @@ import url from 'node:url';

readonly compiler: "COMPILER";
readonly codemod: "CODEMOD";
};

@@ -19,0 +20,0 @@ /**

1

dist/utils/error.js

@@ -17,2 +17,3 @@ import url from 'node:url';

compiler: 'COMPILER',
codemod: 'CODEMOD',
};

@@ -19,0 +20,0 @@ /**

6

dist/utils/error/parser/analyse/define-meta.d.ts

@@ -6,2 +6,3 @@ import { StorybookSvelteCSFError } from '#utils/error';

readonly code = 1;
documentation: boolean;
componentProperty: Property;

@@ -17,2 +18,3 @@ constructor({ filename, componentProperty, }: {

readonly code = 2;
documentation: boolean;
defineMetaVariableDeclarator: VariableDeclarator;

@@ -28,2 +30,3 @@ constructor({ filename, defineMetaVariableDeclarator, }: {

readonly code = 3;
documentation: boolean;
constructor(filename: StorybookSvelteCSFError['filename']);

@@ -35,2 +38,3 @@ template(): string;

readonly code = 4;
documentation: boolean;
readonly property: Property;

@@ -46,2 +50,3 @@ constructor({ filename, property, }: {

readonly code = 5;
documentation: boolean;
readonly property: Property;

@@ -57,2 +62,3 @@ constructor({ filename, property, }: {

readonly code = 6;
documentation: boolean;
readonly property: Property;

@@ -59,0 +65,0 @@ readonly element: ArrayExpression['elements'][number];

35

dist/utils/error/parser/analyse/define-meta.js

@@ -6,2 +6,3 @@ import { StorybookSvelteCSFError } from '#utils/error';

code = 1;
documentation = true;
componentProperty;

@@ -14,7 +15,5 @@ constructor({ filename, componentProperty, }) {

return dedent `
Invalid schema.
The 'component' property of 'defineMeta' must reference an imported Svelte component.
The current type of the property is '${this.componentProperty.value.type}'.
'defineMeta's property with key 'component' value should be an identifier to Svelte component import specifier.
The current type is '${this.componentProperty.value.type}'.
The issue occurred in Stories file: ${this.filepathURL}

@@ -27,2 +26,3 @@ `;

code = 2;
documentation = true;
defineMetaVariableDeclarator;

@@ -35,5 +35,3 @@ constructor({ filename, defineMetaVariableDeclarator, }) {

return dedent `
Invalid schema.
Storybook addon "${StorybookSvelteCSFError.packageName}" tried to access destructured object pattern from a variable declaration with 'defineMeta()' call.
The return value of the 'defineMeta' call was not destructured to { Story }.
The issue occurred in Stories file: ${this.filepathURL}

@@ -48,2 +46,3 @@

code = 3;
documentation = true;
constructor(filename) {

@@ -55,2 +54,3 @@ super({ filename });

Could not find 'meta' identifier in the compiled output of stories file: ${this.filepathURL}
This is most likely a bug in @storybook/addon-svelte-csf. Please open an issue on GitHub.
`;

@@ -62,2 +62,3 @@ }

code = 4;
documentation = true;
property;

@@ -70,7 +71,5 @@ constructor({ filename, property, }) {

return dedent `
Invalid schema.
The '${this.property.key.name}' passed to 'defineMeta()' must be a static string literal.
But it is of type '${this.property.value.type}'.
'defineMeta()' first argument object property '${this.property.key.name}' value is supposed to be a static string literal.
Instead it has a type '${this.property.value.type}'.
This issue occurred in stories file: ${this.filepathURL}

@@ -83,2 +82,3 @@ `;

code = 5;
documentation = true;
property;

@@ -91,7 +91,5 @@ constructor({ filename, property, }) {

return dedent `
Invalid schema.
The '${this.property.key.name}' passed to 'defineMeta()' must be a static array.
But it is of type '${this.property.value.type}'.
'defineMeta()' first argument object property '${this.property.key.name}' value is supposed to be an array expression.
Instead it has a type '${this.property.value.type}'.
This issue occurred in stories file: ${this.filepathURL}

@@ -104,2 +102,3 @@ `;

code = 6;
documentation = true;
property;

@@ -114,7 +113,5 @@ element;

return dedent `
Invalid schema.
All entries in the '${this.property.key.name}' property passed to 'defineMeta()' must be static strings.
One of the elements is not a string but is instead of type '${this.element?.type}'.
'defineMeta()' first argument object property '${this.property.key.name}' value is supposed to be an array with only static string literals.
One of the elements is not a string. Instead it has a type '${this.element?.type}'.
This issue occurred in stories file: ${this.filepathURL}

@@ -121,0 +118,0 @@ `;

6

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

@@ -8,2 +8,3 @@ import type { Attribute } from 'svelte/compiler';

readonly code = 1;
documentation: boolean;
attribute: Attribute;

@@ -20,2 +21,3 @@ constructor({ filename, attribute, component, }: {

readonly code = 2;
documentation: boolean;
attribute: Attribute;

@@ -33,2 +35,3 @@ constructor({ filename, attribute, component, }: {

readonly code = 3;
documentation: boolean;
attribute: Attribute;

@@ -48,2 +51,3 @@ element: ArrayExpression['elements'][number];

readonly code = 4;
documentation: boolean;
constructor({ filename, component, }: {

@@ -58,2 +62,3 @@ filename: StorybookSvelteCSFError['filename'];

readonly code = 5;
documentation: boolean;
value: string;

@@ -70,2 +75,3 @@ constructor({ filename, component, value, }: {

readonly code = 6;
documentation: boolean;
identifiers: ReturnType<typeof getStoryIdentifiers>;

@@ -72,0 +78,0 @@ duplicateIdentifiers: NonNullable<ReturnType<typeof getStoryIdentifiers>>;

20

dist/utils/error/parser/analyse/story.js

@@ -6,2 +6,3 @@ import dedent from 'dedent';

code = 1;
documentation = true;
attribute;

@@ -14,6 +15,5 @@ constructor({ filename, attribute, component, }) {

return dedent `
Invalid schema.
In the stories file: ${this.filepathURL}
A '${this.quickStoryRawCodeIdentifier}' has an attribute '${this.attribute.name}' whose value was expected to be a static literal string.
A '${this.quickStoryRawCodeIdentifier}' has a prop '${this.attribute.name}' whose value must be a static literal string.
`;

@@ -25,2 +25,3 @@ }

code = 2;
documentation = true;
attribute;

@@ -43,7 +44,6 @@ constructor({ filename, attribute, component, }) {

return dedent `
Invalid schema.
In the stories file: ${this.filepathURL}
A '${this.quickStoryRawCodeIdentifier}' has attribute '${this.attribute.name}' whose value was expected to be an array expression.
Instead the value type is '${this.valueType}'.
A '${this.quickStoryRawCodeIdentifier}' has a prop'${this.attribute.name}' whose value was expected to be a static array.
Instead the value type is '${this.valueType}'.
`;

@@ -55,2 +55,3 @@ }

code = 3;
documentation = true;
attribute;

@@ -75,8 +76,6 @@ element;

return dedent `
Invalid schema.
In the stories file: ${this.filepathURL}
A '${this.quickStoryRawCodeIdentifier}' has attribute '${this.attribute.name}' whose value was expected to be an array expression.
And this array elements are supposed to be static literal strings only.
One of the elements has a type '${this.valueType}'
All elements in the array must be static literal strings only, but one of the elements is of type '${this.valueType}'.
`;

@@ -88,2 +87,3 @@ }

code = 4;
documentation = true;
constructor({ filename, component, }) {

@@ -95,3 +95,3 @@ super({ component, filename });

Missing 'name' or 'exportName' attribute (prop) in a '<Story />' definition in the stories file: '${this.filepathURL}'.
All stories must either have a 'name' or an 'exportName' prop.
All stories must either have a 'name' or an 'exportName' prop, or both.
`;

@@ -103,2 +103,3 @@ }

code = 5;
documentation = true;
value;

@@ -122,2 +123,3 @@ constructor({ filename, component, value, }) {

code = 6;
documentation = true;
identifiers;

@@ -124,0 +126,0 @@ duplicateIdentifiers;

67

package.json
{
"name": "@storybook/addon-svelte-csf",
"version": "4.2.0--canary.186.ede9fbf.0",
"version": "4.2.0--canary.186.fdebf5c.0",
"description": "Allows to write stories in Svelte syntax",

@@ -12,7 +12,6 @@ "keywords": [

"type": "git",
"url": "https://github.com/storybookjs/addon-svelte-csf"
"url": "git+https://github.com/storybookjs/addon-svelte-csf.git"
},
"license": "MIT",
"type": "module",
"packageManager": "pnpm@9.1.3+sha512.7c2ea089e1a6af306409c4fc8c4f0897bdac32b772016196c469d9428f1fe2d5a21daf8ad6512762654ac645b5d9136bb210ec9a00afa8dbc4677843ba362ecd",
"imports": {

@@ -49,22 +48,28 @@ "#tests/*": {

"scripts": {
"clean": "rimraf ./dist ./node_modules/.cache ./storybook-static ./svelte-kit ./.vite-inspect",
"build": "svelte-package --input ./src --types",
"prepublish": "pnpm run clean && pnpm run build",
"test": "vitest run",
"test:watch": "vitest watch",
"format": "prettier --write .",
"build-storybook": "storybook build",
"check": "svelte-check",
"chromatic": "chromatic --exit-zero-on-changes",
"clean": "rimraf ./dist ./node_modules/.cache ./storybook-static ./svelte-kit ./.vite-inspect",
"coverage": "vitest run --coverage",
"check": "svelte-check",
"format": "prettier --write .",
"lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.json,.html,.svelte,.ts --report-unused-disable-directives",
"prepublish": "pnpm run clean && pnpm run build",
"release": "pnpm run build && auto shipit",
"start": "concurrently \"pnpm run storybook --quiet\" \"pnpm run build --watch\"",
"storybook": "storybook dev --port 6006 --no-open",
"start": "concurrently \"pnpm run storybook --quiet\" \"pnpm run build --watch\"",
"build-storybook": "storybook build",
"release": "pnpm run build && auto shipit"
"test": "vitest run",
"test:watch": "vitest watch"
},
"dependencies": {
"@storybook/csf": "^0.1.11",
"@storybook/docs-tools": "^8.0.0",
"@storybook/node-logger": "^8.0.0",
"@storybook/types": "^8.0.0",
"dedent": "^1.5.3",
"es-toolkit": "^1.13.1",
"esrap": "^1.2.2",
"lodash-es": "^4.17.21",
"magic-string": "^0.30.10",
"svelte-ast-print": "0.2.3",
"zimmerframe": "^1.1.2"

@@ -74,16 +79,11 @@ },

"@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.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",
"@storybook/addon-actions": "^8.2.2",
"@storybook/addon-essentials": "^8.2.2",
"@storybook/addon-interactions": "^8.2.2",
"@storybook/client-logger": "^8.2.2",
"@storybook/eslint-config-storybook": "^4.0.0",
"@storybook/preview-api": "^8.2.2",
"@storybook/svelte": "^8.2.2",
"@storybook/svelte-vite": "^8.2.2",
"@storybook/test": "^8.2.2",
"@sveltejs/package": "^2.3.2",

@@ -99,3 +99,3 @@ "@sveltejs/vite-plugin-svelte": "4.0.0-next.3",

"eslint": "^7.32.0",
"eslint-plugin-storybook": "^0.6.15",
"eslint-plugin-storybook": "^0.8.0",
"jsdom": "^24.1.0",

@@ -106,5 +106,4 @@ "prettier": "^3.3.2",

"rollup": "^4.18.0",
"storybook": "^8.1.11",
"storybook": "^8.2.2",
"svelte": "5.0.0-next.155",
"svelte-ast-print": "0.2.2",
"svelte-check": "^3.8.4",

@@ -126,2 +125,6 @@ "tslib": "^2.6.3",

},
"packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5",
"publishConfig": {
"access": "public"
},
"auto": {

@@ -133,4 +136,6 @@ "plugins": [

},
"publishConfig": {
"access": "public"
"pnpm": {
"overrides": {
"svelte-preprocess": "^6.0.2"
}
},

@@ -137,0 +142,0 @@ "storybook": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc