fix: Temporarily disable save from UI feature (#285)

Author: xeho91

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

@@ -7,11 +7,13 @@ import MagicString from 'magic-string';
 import { parseAst } from 'rollup/parseAst';
 import { describe, it } from 'vitest';
 
-import { transformDefineMeta } from './index.js';
+import { createMetaVariableDeclaration, transformDefineMeta } from './index.js';
 
 import { getSvelteAST } from '$lib/parser/ast.js';
 import { extractSvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
 import { extractCompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
+import { insertDefineMetaParameters } from './insert-parameters.js';
+import { replaceDefineMetaArgument } from './replace-argument.js';
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
@@ -56,3 +58,62 @@ describe(transformDefineMeta.name, () => {
     );
   });
 });
+
+describe(createMetaVariableDeclaration.name, () => {
+  it('parameters are transformed correctly', async ({ expect }) => {
+    const filename = path.resolve(__dirname, '../../../../tests/stories/Example.stories.svelte');
+    const originalCode = fs.readFileSync(filename).toString();
+    const compiledPreTransformCode = fs
+      .readFileSync(
+        path.resolve(
+          __dirname,
+          '../../../../tests/__compiled__/pre-transform/Example.stories.dev.js'
+        )
+      )
+      .toString();
+    const svelteAST = getSvelteAST({ code: originalCode, filename });
+    const svelteASTNodes = await extractSvelteASTNodes({
+      ast: svelteAST,
+      filename,
+    });
+    const compiledASTNodes = await extractCompiledASTNodes({
+      ast: parseAst(compiledPreTransformCode),
+      filename,
+    });
+    insertDefineMetaParameters({
+      nodes: {
+        svelte: svelteASTNodes,
+        compiled: compiledASTNodes,
+      },
+      filename,
+    });
+
+    const metaObjectExpression = replaceDefineMetaArgument({
+      nodes: {
+        svelte: svelteASTNodes,
+        compiled: compiledASTNodes,
+      },
+    });
+    const metaVariableDeclaration = createMetaVariableDeclaration({ init: metaObjectExpression });
+
+    expect(print(metaVariableDeclaration).code).toMatchInlineSnapshot(`
+      "const meta = {
+      	title: 'Example',
+      	component: Example,
+      	tags: ['autodocs'],
+      	args: {
+      		onclick: action('onclick'),
+      		onmouseenter: action('onmouseenter'),
+      		onmouseleave: action('onmouseleave')
+      	},
+      	parameters: {
+      		docs: {
+      			description: {
+      				component: "Description set explicitly in the comment above \`defineMeta\`.\\n\\nMultiline supported. And also Markdown syntax:\\n\\n* **Bold**,\\n* _Italic_,\\n* \`Code\`."
+      			}
+      		}
+      	}
+      };"
+    `);
+  });
+});

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

@@ -2,7 +2,7 @@ import { print } from 'esrap';
 import type MagicString from 'magic-string';
 
 import { replaceDefineMetaArgument } from './replace-argument.js';
-import { insertDefineMetaJSDocCommentAsDescription } from './insert-description.js';
+import { insertDefineMetaParameters } from './insert-parameters.js';
 
 import { createASTIdentifier, type ESTreeAST } from '$lib/parser/ast.js';
 import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
@@ -24,17 +24,9 @@ interface Params {
 export function transformDefineMeta(params: Params): void {
   const { code, nodes, filename } = params;
 
-  insertDefineMetaJSDocCommentAsDescription({
-    nodes,
-    filename,
-  });
-  const metaObjectExpression = replaceDefineMetaArgument({
-    nodes,
-    filename,
-  });
-  const metaVariableDeclaration = createMetaVariableDeclaration({
-    init: metaObjectExpression,
-  });
+  insertDefineMetaParameters({ nodes, filename });
+  const metaObjectExpression = replaceDefineMetaArgument({ nodes, filename });
+  const metaVariableDeclaration = createMetaVariableDeclaration({ init: metaObjectExpression });
 
   const { compiled } = nodes;
   const { defineMetaVariableDeclaration } = compiled;
@@ -49,7 +41,6 @@ export function createMetaVariableDeclaration({
 }: {
   init: ESTreeAST.ObjectExpression;
 }): ESTreeAST.VariableDeclaration {
-  //
   return {
     type: 'VariableDeclaration',
     kind: 'const',

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

@@ -6,7 +6,7 @@ import {
   getDescriptionPropertyValue,
   getDocsPropertyValue,
   getParametersPropertyValue,
-} from '$lib/compiler/post-transform/shared/description.js';
+} from '$lib/compiler/post-transform/shared/parameters.js';
 import { createASTObjectExpression, createASTProperty, type ESTreeAST } from '$lib/parser/ast.js';
 import type { SvelteASTNodes } from '$lib/parser/extract/svelte/nodes.js';
 import type { CompiledASTNodes } from '$lib/parser/extract/compiled/nodes.js';
@@ -21,6 +21,7 @@ interface Params {
 }
 
 /**
+ * This function inserts parameters to `defineMeta()`.
  * Attempt to insert JSDoc comment above the `defineMeta()` call.
  *
  * Before:
@@ -42,18 +43,15 @@ interface Params {
  * });
  * ```
  */
-export function insertDefineMetaJSDocCommentAsDescription(params: Params): void {
+export function insertDefineMetaParameters(params: Params): void {
   const { nodes, filename } = params;
-  const { compiled, svelte } = nodes;
-  const { defineMetaVariableDeclaration } = svelte;
-  const { leadingComments } = defineMetaVariableDeclaration;
 
-  if (!leadingComments) {
+  if (!nodes.svelte.defineMetaVariableDeclaration.leadingComments) {
     return;
   }
 
   const defineMetaFirstArgumentObjectExpression = getDefineMetaFirstArgumentObjectExpression({
-    nodes: compiled,
+    nodes: nodes.compiled,
     filename,
   });
 
@@ -117,7 +115,7 @@ export function insertDefineMetaJSDocCommentAsDescription(params: Params): void
   }).properties.push(
     createASTProperty('component', {
       type: 'Literal',
-      value: extractDescription(leadingComments),
+      value: extractDescription(nodes.svelte.defineMetaVariableDeclaration.leadingComments),
     })
   );
 }

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

@@ -1,8 +1,6 @@
 import dedent from 'dedent';
 
-import type { ESTreeAST, SvelteAST } from '$lib/parser/ast.js';
-
-import { createASTObjectExpression } from '$lib/parser/ast.js';
+import { createASTObjectExpression, type ESTreeAST, type SvelteAST } from '$lib/parser/ast.js';
 
 interface FindPropertyOptions {
   name: string;

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

@@ -8,7 +8,7 @@ import {
   getParametersPropertyValue,
   getDocsPropertyValue,
   getDescriptionPropertyValue,
-} from '$lib/compiler/post-transform/shared/description.js';
+} from '$lib/compiler/post-transform/shared/parameters.js';
 import { createASTObjectExpression, createASTProperty } from '$lib/parser/ast.js';
 
 import type { ESTreeAST } from '$lib/parser/ast.js';

src/compiler/post-transform/story/insert-svelte-csf.ts

@@ -1,7 +1,7 @@
 import {
   findPropertyParametersIndex,
   getParametersPropertyValue,
-} from '$lib/compiler/post-transform/shared/description.js';
+} from '$lib/compiler/post-transform/shared/parameters.js';
 
 import type { extractStoriesNodesFromExportDefaultFn } from '$lib/parser/extract/compiled/stories.js';
 import { getStoryPropsObjectExpression } from '$lib/parser/extract/compiled/story.js';

src/runtime/create-runtime-stories.ts

@@ -83,5 +83,18 @@ export const createRuntimeStories = (Stories: Component, meta: Meta<Cmp>) => {
     stories[exportName] = storyObj;
   }
 
+  if (!meta.parameters) {
+    meta.parameters = {};
+  }
+
+  if (!meta.parameters.controls) {
+    meta.parameters.controls = {};
+  }
+
+  // Inserts https://storybook.js.org/docs/essentials/controls#disablesavefromui
+  // Ref: https://github.com/storybookjs/addon-svelte-csf/issues/240
+  // TODO: Restore this feature
+  meta.parameters.controls.disableSaveFromUI = true;
+
   return stories;
 };