Merge pull request #260 from storybookjs/fix-esm

Fix badly formatted ESM that was breaking Node 22 and 23

Author: JReinhold

.gitignore

@@ -11,3 +11,4 @@ package-lock.json
 
 # .d.ts files generated by `svelte-package`
 examples/**/*.d.ts
+tests/extractor.d.ts

.nvmrc

@@ -1 +1 @@
-18
+22

package.json

@@ -53,7 +53,6 @@
   "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.26.1",

pnpm-lock.yaml

@@ -73,8 +73,8 @@ export async function transformPlugin(): Promise<Plugin> {
       return {
         optimizeDeps: {
           include: ['@storybook/addon-svelte-csf/internal/create-runtime-stories'],
-        }
-      }
+        },
+      };
     },
     async transform(compiledCode, id) {
       if (!filter(id)) return undefined;

src/compiler/plugins.ts

@@ -7,7 +7,7 @@ import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
 import { describe, it } from 'vitest';
 
-import { transformDefineMeta } from './index';
+import { transformDefineMeta } from './index.js';
 
 import { getSvelteAST } from '$lib/parser/ast.js';
 import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
@@ -51,6 +51,8 @@ describe(transformDefineMeta.name, () => {
       ast: parseAst(code.toString()),
     });
 
-    expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(`"const { Story } = defineMeta(meta);"`);
+    expect(print(defineMetaVariableDeclaration).code).toMatchInlineSnapshot(
+      `"const { Story } = defineMeta(meta);"`
+    );
   });
 });

src/compiler/post-transform/define-meta/index.test.ts

@@ -1,7 +1,7 @@
 import { print } from 'esrap';
 import type MagicString from 'magic-string';
 
-import { replaceDefineMetaArgument } from './replace-argument';
+import { replaceDefineMetaArgument } from './replace-argument.js';
 import { insertDefineMetaJSDocCommentAsDescription } from './insert-description.js';
 
 import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';

src/compiler/post-transform/define-meta/index.ts

@@ -1,5 +1,3 @@
-import { logger } from '@storybook/node-logger';
-
 import {
   findASTPropertyIndex,
   findPropertyDescriptionIndex,
@@ -103,7 +101,7 @@ export function insertDefineMetaJSDocCommentAsDescription(params: Params): void
       }),
     }) !== -1
   ) {
-    logger.warn(
+    console.warn(
       `Svelte CSF:
         Description was already set in parameters.docs.description.component,
         ignoring JSDoc comment above defineMeta() in:

src/compiler/post-transform/define-meta/insert-description.ts

@@ -1,8 +1,8 @@
-import { createASTIdentifier, type ESTreeAST } from '../../../parser/ast';
-import type { CompiledASTNodes } from '../../../parser/extract/compiled/nodes';
-import type { SvelteASTNodes } from '../../../parser/extract/svelte/nodes';
-import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta';
-import { NoDestructuredDefineMetaCallError } from '../../../utils/error/parser/analyse/define-meta';
+import { createASTIdentifier, type ESTreeAST } from '../../../parser/ast.js';
+import type { CompiledASTNodes } from '../../../parser/extract/compiled/nodes.js';
+import type { SvelteASTNodes } from '../../../parser/extract/svelte/nodes.js';
+import { getDefineMetaFirstArgumentObjectExpression } from '../../../parser/extract/svelte/define-meta.js';
+import { NoDestructuredDefineMetaCallError } from '../../../utils/error/parser/analyse/define-meta.js';
 
 interface Params {
   nodes: {

src/compiler/post-transform/define-meta/replace-argument.ts

@@ -6,7 +6,7 @@ import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
 import { describe, it } from 'vitest';
 
-import { transformStoriesCode } from '.';
+import { transformStoriesCode } from './index.js';
 
 import { getSvelteAST } from '$lib/parser/ast.js';
 import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';

src/compiler/post-transform/index.test.ts

@@ -1,4 +1,3 @@
-import { logger } from '@storybook/node-logger';
 import dedent from 'dedent';
 
 import type { ESTreeAST, SvelteAST } from '$lib/parser/ast.js';
@@ -81,7 +80,7 @@ export const getParametersPropertyValue = (
   }
 
   if (property.value.type !== 'ObjectExpression') {
-    logger.warn(dedent`
+    console.warn(dedent`
       Svelte CSF:
         Could not access 'parameters' of ${component ? "Story's prop" : 'defineMeta'}}.
         Expected value to be an object expression.
@@ -124,7 +123,7 @@ export const getDocsPropertyValue = (options: Omit<FindPropertyOptions, 'name'>)
   const { value } = property;
 
   if (value.type !== 'ObjectExpression') {
-    logger.warn(dedent`
+    console.warn(dedent`
       Svelte CSF:
         Could not access 'parameters.docs' of ${component ? "Story's prop" : 'defineMeta'}}.
         Expected value to be an object expression.
@@ -160,7 +159,7 @@ export const getDescriptionPropertyValue = (options: Omit<FindPropertyOptions, '
   const { value } = property;
 
   if (value.type !== 'ObjectExpression') {
-    logger.warn(dedent`
+    console.warn(dedent`
       Svelte CSF:
         Could not access 'parameters.docs.description' of ${component ? "Story's prop" : 'defineMeta'}}.
         Expected value to be an object expression.

src/compiler/post-transform/shared/description.ts

@@ -7,7 +7,7 @@ import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
 import { describe, it } from 'vitest';
 
-import { transformStory } from '.';
+import { transformStory } from './index.js';
 
 import { getSvelteAST } from '$lib/parser/ast.js';
 import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';

src/compiler/post-transform/story/index.test.ts

@@ -1,4 +1,3 @@
-import { logger } from '@storybook/node-logger';
 import dedent from 'dedent';
 
 import {
@@ -99,7 +98,7 @@ export function insertStoryHTMLCommentAsDescription(params: Params) {
       (p) => p.type === 'Property' && p.key.type === 'Literal' && p.key.value === 'name'
     ) as ESTreeAST.Property;
     const name = (propertyName.value as ESTreeAST.Literal).value;
-    logger.warn(
+    console.warn(
       dedent`
         Svelte CSF:
           Description was already set in parameters.docs.description.story
@@ -124,11 +123,11 @@ export function insertStoryHTMLCommentAsDescription(params: Params) {
   );
 
   if (compiled.type === 'CallExpression') {
-    compiled.arguments[1] === storyPropsObjectExpression;
+    compiled.arguments[1] = storyPropsObjectExpression;
   } else if (
     compiled.type === 'ExpressionStatement' &&
     compiled.expression.type === 'CallExpression'
   ) {
-    compiled.expression.arguments[1] === storyPropsObjectExpression;
+    compiled.expression.arguments[1] = storyPropsObjectExpression;
   }
 }

src/compiler/post-transform/story/insert-description.ts

@@ -9,8 +9,8 @@ import {
 } from '$lib/parser/ast.js';
 import { InvalidTemplateAttribute } from '$lib/utils/error/legacy-api/index.js';
 
-import { hashTemplateName } from '$lib/utils/identifier-utils';
-import type { State } from '..';
+import { hashTemplateName } from '$lib/utils/identifier-utils.js';
+import type { State } from '../index.js';
 
 interface Params {
   component: SvelteAST.Component;

src/compiler/pre-transform/codemods/legacy-story.ts

@@ -1,6 +1,6 @@
 import { getStringValueFromAttribute } from '$lib/parser/analyse/story/attributes.js';
 import type { SvelteAST } from '$lib/parser/ast.js';
-import { hashTemplateName } from '$lib/utils/identifier-utils';
+import { hashTemplateName } from '$lib/utils/identifier-utils.js';
 
 interface Params {
   component: SvelteAST.Component;

src/compiler/pre-transform/codemods/template-to-snippet.ts

@@ -50,4 +50,4 @@ export {
 };
 
 // TODO: Remove in next major release
-export * from './legacy-types.d';
+export type * from './legacy-types.d.ts';

src/index.ts

@@ -9,7 +9,7 @@ Vite pre-transform hook does codemod where this component gets transformed into
 @see {@link https://github.com/storybookjs/addon-svelte-csf/blob/main/MIGRATION.md#meta-component-removed-in-favor-of-definemeta}
 -->
 <script lang="ts">
-  import type { MetaProps, Slots } from '../legacy-types.d';
+  import type { MetaProps, Slots } from '../legacy-types.d.ts';
 
   type $$Props = MetaProps;
 </script>

src/runtime/LegacyMeta.svelte

@@ -10,7 +10,7 @@ Vite pre-transform hook does codemod where this component gets transformed into
 -->
 
 <script lang="ts">
-  import type { Slots, StoryProps } from '../legacy-types.d';
+  import type { Slots, StoryProps } from '../legacy-types.d.ts';
 
   type $$Props = StoryProps;
   type $$Slots = Slots;

src/runtime/LegacyStory.svelte

@@ -9,7 +9,7 @@ Vite pre-transform hook does codemod where this component gets transformed into
 @see {@link https://github.com/storybookjs/addon-svelte-csf/blob/main/MIGRATION.md#template-component-removed}
 -->
 <script lang="ts">
-  import type { Slots, TemplateProps } from '../legacy-types.d';
+  import type { Slots, TemplateProps } from '../legacy-types.d.ts';
 
   export let id: string = 'default';
   // silents the Svelte warning about 'id' being unused. It's only here for typing purposes.

src/runtime/LegacyTemplate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component } from 'svelte';
 
-  import type { Cmp } from '$lib/types';
+  import type { Cmp } from '$lib/types.js';
 
   import {
     type StoriesRepository,

src/runtime/StoriesExtractor.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" generics="const TCmp extends Cmp">
   import type { Snippet } from 'svelte';
 
-  import { useStoriesExtractor } from './contexts/extractor.svelte';
-  import { useStoryRenderer, type StoryRendererContext } from './contexts/renderer.svelte';
-  import { useStoriesTemplate } from './contexts/template.svelte';
+  import { useStoriesExtractor } from './contexts/extractor.svelte.js';
+  import { useStoryRenderer, type StoryRendererContext } from './contexts/renderer.svelte.js';
+  import { useStoriesTemplate } from './contexts/template.svelte.js';
 
-  import { storyNameToExportName } from '../utils/identifier-utils';
-  import type { Cmp, StoryAnnotations } from '../types';
+  import { storyNameToExportName } from '../utils/identifier-utils.js';
+  import type { Cmp, StoryAnnotations } from '../types.js';
 
   type Props = Partial<StoryAnnotations<TCmp>> & {
     /**

src/runtime/Story.svelte

@@ -2,9 +2,9 @@
   import type { Component } from 'svelte';
 
   import { useStoryRenderer } from './contexts/renderer.svelte';
-  import { emitCode } from './emit-code';
+  import { emitCode } from './emit-code.js';
 
-  import type { Cmp, StoryAnnotations, StoryContext } from '../types';
+  import type { Cmp, StoryAnnotations, StoryContext } from '../types.js';
 
   type Props = {
     Stories: Component;

src/runtime/StoryRenderer.svelte

@@ -53,7 +53,7 @@ export function useStoriesExtractor<TCmp extends Cmp>() {
       CONTEXT_KEY,
       buildContext<TCmp>({
         isExtracting: false,
-        register: () => { },
+        register: () => {},
       })
     );
   }

src/runtime/contexts/extractor.svelte.ts

@@ -1,7 +1,7 @@
 export default {
-    kit: {
-        files: {
-            lib: 'src',
-        }
-    }
+  kit: {
+    files: {
+      lib: 'src',
+    },
+  },
 };

svelte.config.js

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "lib": ["esnext", "DOM", "DOM.Iterable"],
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "noImplicitAny": false,
     "resolveJsonModule": true,
     "rootDir": ".",
@@ -14,15 +14,11 @@
     "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "types": ["vitest/importMeta"],
-		"forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true,
     "paths": {
-			"$lib": [
-				"src"
-			],
-			"$lib/*": [
-				"src/*"
-			]
-		},
+      "$lib": ["src"],
+      "$lib/*": ["src/*"]
+    },
     "plugins": [
       {
         "name": "typescript-svelte-plugin",

tests/extractor.d.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   resolve: {
     alias: {
       // This is already set up in svelte.config.js, but we need it explicitly here for vitest
-      '$lib': path.resolve(__dirname, 'src'),
+      $lib: path.resolve(__dirname, 'src'),
     },
   },
   test: {