fix: rename parameters to meta, since SB params don't have to be seri… (

tajo#36) * fix: rename parameters to meta, since SB params don't have to be serializable * fix: types and lint * fix: snap test
talshani · Dec 6, 2021 · 29f4f4c · 29f4f4c
1 parent b95b899
commit 29f4f4c
Show file tree

Hide file tree

Showing 23 changed files with 164 additions and 143 deletions.
diff --git a/packages/example/src/my-blah.stories.tsx b/packages/example/src/my-blah.stories.tsx
@@ -2,10 +2,17 @@ import { useState } from "react";
 
 export default {
   title: "Big Blah / Ruck",
-  parameters: {
+  meta: {
     baseweb: "test",
     browsers: ["chrome"],
   },
+  decorators: [
+    (Story: React.FC) => (
+      <div style={{ margin: "3em" }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export const Middle = () => {

diff --git a/packages/ladle/lib/cli/vite-plugin/generate/get-meta-json.js b/packages/ladle/lib/cli/vite-plugin/generate/get-meta-json.js
@@ -25,13 +25,13 @@ const getMetaJson = (entryData) => {
       version: 1,
     },
     stories:
-      /** @type {{[key: string]: {name: string; levels: string[]; parameters: any}}} */ ({}),
+      /** @type {{[key: string]: {name: string; levels: string[]; meta: any}}} */ ({}),
   };
   storyIds.forEach((storyId) => {
     result.stories[storyId] = {
       ...storyIdToMeta(storyId),
       ...storyMeta[storyId],
-      parameters: storyParams[storyId] ? storyParams[storyId].parameters : {},
+      meta: storyParams[storyId] ? storyParams[storyId].meta : {},
     };
   });
   return result;

diff --git a/packages/ladle/lib/cli/vite-plugin/generate/get-story-list.js b/packages/ladle/lib/cli/vite-plugin/generate/get-story-list.js
@@ -29,7 +29,7 @@ const getStoryList = (entryData) => {
               let paramsAst = null;
               if (storyParams[story]) {
                 paramsAst = t.objectProperty(
-                  t.identifier("parameters"),
+                  t.identifier("meta"),
                   /** @type {any} */ (template).default.ast(
                     `const foo = ${JSON.stringify(storyParams[story])}`,
                   ).declarations[0].init,

diff --git a/packages/ladle/lib/cli/vite-plugin/parse/get-default-export.js b/packages/ladle/lib/cli/vite-plugin/parse/get-default-export.js
@@ -12,12 +12,25 @@ const getDefaultExport = (result, astPath) => {
       objNode =
         astPath.scope.bindings[astPath.node.declaration.name].path.node.init;
     }
-    const obj = converter(objNode);
-    const json = JSON.stringify(obj);
-    result.exportDefaultProps = JSON.parse(json);
+    objNode.properties.forEach((/** @type {any} */ prop) => {
+      if (prop.type === "ObjectProperty" && prop.key.name === "title") {
+        if (prop.value.type !== "StringLiteral") {
+          throw new Error("Default title must be a string literal.");
+        }
+        result.exportDefaultProps.title = prop.value.value;
+      } else if (
+        prop.type === "ObjectProperty" &&
+        prop.key.type === "Identifier" &&
+        prop.key.name === "meta"
+      ) {
+        const obj = converter(prop.value);
+        const json = JSON.stringify(obj);
+        result.exportDefaultProps.meta = JSON.parse(json);
+      }
+    });
   } catch (e) {
     throw new Error(
-      `Can't parse the default export of ${result.entry}. It must be serializable.`,
+      `Can't parse the default title and meta of ${result.entry}. Meta must be serializable and title a string literal.`,
     );
   }
 };

diff --git a/packages/ladle/lib/cli/vite-plugin/parse/get-entry-data.js b/packages/ladle/lib/cli/vite-plugin/parse/get-entry-data.js
@@ -5,7 +5,7 @@ import debugFactory from "debug";
 import { getFileId } from "../naming-utils.js";
 import getAst from "../get-ast.js";
 import getDefaultExport from "./get-default-export.js";
-import getStorynameAndParameters from "./get-storyname-and-parameters.js";
+import getStorynameAndMeta from "./get-storyname-and-meta.js";
 import getNamedExports from "./get-named-exports.js";
 
 const debug = debugFactory("ladle:vite");
@@ -33,8 +33,8 @@ export const getSingleEntry = async (entry) => {
   const result = {
     entry,
     stories: [],
-    exportDefaultProps: { title: undefined, parameters: undefined },
-    namedExportToParameters: {},
+    exportDefaultProps: { title: undefined, meta: undefined },
+    namedExportToMeta: {},
     namedExportToStoryName: {},
     storyParams: {},
     fileId: getFileId(entry),
@@ -45,7 +45,7 @@ export const getSingleEntry = async (entry) => {
   );
   const ast = getAst(code, entry);
   /** @type {any} */ (traverse).default(ast, {
-    Program: getStorynameAndParameters.bind(this, result),
+    Program: getStorynameAndMeta.bind(this, result),
     ExportDefaultDeclaration: getDefaultExport.bind(this, result),
     ExportNamedDeclaration: getNamedExports.bind(this, result),
   });

diff --git a/packages/ladle/lib/cli/vite-plugin/parse/get-named-exports.js b/packages/ladle/lib/cli/vite-plugin/parse/get-named-exports.js
@@ -15,7 +15,7 @@ const getNamedExports = (
   {
     fileId,
     exportDefaultProps,
-    namedExportToParameters,
+    namedExportToMeta,
     namedExportToStoryName,
     storyParams,
     stories,
@@ -50,14 +50,14 @@ const getNamedExports = (
   const storyId = `${kebabCase(
     storyNamespace,
   )}${storyDelimiter}${storyDelimiter}${kebabCase(storyName)}`;
-  // attach default parameters to each story
-  if (exportDefaultProps && exportDefaultProps.parameters) {
+  // attach default meta to each story
+  if (exportDefaultProps && exportDefaultProps.meta) {
     storyParams[storyId] = exportDefaultProps;
   }
-  // add and merge story specific parameters
-  if (namedExportToParameters[namedExport]) {
+  // add and merge story specific meta
+  if (namedExportToMeta[namedExport]) {
     storyParams[storyId] = merge(cloneDeep(storyParams[storyId] || {}), {
-      parameters: namedExportToParameters[namedExport],
+      meta: namedExportToMeta[namedExport],
     });
   }
   const componentName = getEncodedStoryName(

diff --git a/...gin/parse/get-storyname-and-parameters.js → ...te-plugin/parse/get-storyname-and-meta.js b/...gin/parse/get-storyname-and-parameters.js → ...te-plugin/parse/get-storyname-and-meta.js
@@ -4,7 +4,7 @@ import { converter } from "../ast-to-obj.js";
  * @param {import('../../../shared/types').ParsedStoriesResult} result
  * @param {any} astPath
  */
-const getStorynameAndParameters = (result, astPath) => {
+const getStorynameAndMeta = (result, astPath) => {
   astPath.node.body.forEach((/** @type {any} */ child) => {
     if (
       child.type === "ExpressionStatement" &&
@@ -21,20 +21,20 @@ const getStorynameAndParameters = (result, astPath) => {
           result.namedExportToStoryName[storyExport] =
             child.expression.right.value;
         }
-      } else if (child.expression.left.property.name === "parameters") {
+      } else if (child.expression.left.property.name === "meta") {
         const storyExport = child.expression.left.object.name;
         if (child.expression.right.type !== "ObjectExpression") {
           throw new Error(
-            `${storyExport}.parameters in ${result.entry} must be an object expression.`,
+            `${storyExport}.meta in ${result.entry} must be an object expression.`,
           );
         } else {
           try {
             const obj = converter(child.expression.right);
             const json = JSON.stringify(obj);
-            result.namedExportToParameters[storyExport] = JSON.parse(json);
+            result.namedExportToMeta[storyExport] = JSON.parse(json);
           } catch (e) {
             throw new Error(
-              `${storyExport}.parameters in ${result.entry} must be serializable.`,
+              `${storyExport}.meta in ${result.entry} must be serializable.`,
             );
           }
         }
@@ -43,4 +43,4 @@ const getStorynameAndParameters = (result, astPath) => {
   });
 };
 
-export default getStorynameAndParameters;
+export default getStorynameAndMeta;
diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts
@@ -164,11 +164,11 @@ export type ParsedStoriesResult = {
   }[];
   exportDefaultProps: {
     title?: string;
-    parameters: any;
+    meta: any;
   };
-  namedExportToParameters: { [key: string]: any };
+  namedExportToMeta: { [key: string]: any };
   namedExportToStoryName: { [key: string]: string };
-  storyParams: { [key: string]: { title?: string; parameters: any } };
+  storyParams: { [key: string]: { title?: string; meta: any } };
   fileId: string;
 };
 

diff --git a/packages/ladle/tests/__snapshots__/get-generated-list.test.ts.snap b/packages/ladle/tests/__snapshots__/get-generated-list.test.ts.snap
@@ -107,26 +107,26 @@ if (import.meta.hot) {
 "
 `;
 
-exports[`Extract and merge story parameters 1`] = `
+exports[`Extract and merge story meta 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
 
-const title$$cat = lazy(() => import(\\"../../../tests/fixtures/story-parameters.stories.tsx\\").then(module => {
+const title$$cat = lazy(() => import(\\"../../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
   return {
     default: module.Cat
   };
 }));
-const title$$dog = lazy(() => import(\\"../../../tests/fixtures/story-parameters.stories.tsx\\").then(module => {
+const title$$dog = lazy(() => import(\\"../../../tests/fixtures/story-meta.stories.tsx\\").then(module => {
   return {
     default: module.Dog
   };
 }));
 export let stories = {
   \\"title--cat\\": {
     component: title$$cat,
-    parameters: {
+    meta: {
       \\"title\\": \\"Title\\",
-      \\"parameters\\": {
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"theme\\": \\"dark\\",
           \\"browsers\\": [\\"chrome\\", \\"firefox\\"],
@@ -138,9 +138,9 @@ export let stories = {
   },
   \\"title--dog\\": {
     component: title$$dog,
-    parameters: {
+    meta: {
       \\"title\\": \\"Title\\",
-      \\"parameters\\": {
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"theme\\": \\"dark\\",
           \\"browsers\\": [\\"chrome\\", \\"webkit\\"]
@@ -168,21 +168,21 @@ if (import.meta.hot) {
 "
 `;
 
-exports[`Extract default parameters 1`] = `
+exports[`Extract default meta 1`] = `
 "
 import { lazy, createElement, Fragment } from \\"react\\";
 
-const title$$cat = lazy(() => import(\\"../../../tests/fixtures/default-parameters.stories.tsx\\").then(module => {
+const title$$cat = lazy(() => import(\\"../../../tests/fixtures/default-meta.stories.tsx\\").then(module => {
   return {
     default: module.Cat
   };
 }));
 export let stories = {
   \\"title--cat\\": {
     component: title$$cat,
-    parameters: {
+    meta: {
       \\"title\\": \\"Title\\",
-      \\"parameters\\": {
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"foo\\": \\"title\\"
         }

diff --git a/packages/ladle/tests/__snapshots__/get-meta-json.test.ts.snap b/packages/ladle/tests/__snapshots__/get-meta-json.test.ts.snap
@@ -16,7 +16,7 @@ exports[`Capital letters in story names converted into delimiters 1`] = `
       \\"locStart\\": 3,
       \\"locEnd\\": 5,
       \\"filePath\\": \\"tests/fixtures/capitalization.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     },
     \\"capitalization--big-barking-dog\\": {
       \\"name\\": \\"Big barking dog\\",
@@ -26,7 +26,7 @@ exports[`Capital letters in story names converted into delimiters 1`] = `
       \\"locStart\\": 7,
       \\"locEnd\\": 9,
       \\"filePath\\": \\"tests/fixtures/capitalization.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"
@@ -48,7 +48,7 @@ exports[`Capital letters in the filename converted into delimiters 1`] = `
       \\"locStart\\": 3,
       \\"locEnd\\": 5,
       \\"filePath\\": \\"tests/fixtures/filenameCapitalization.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"
@@ -70,13 +70,13 @@ exports[`Default title is used instead of the file name 1`] = `
       \\"locStart\\": 7,
       \\"locEnd\\": 9,
       \\"filePath\\": \\"tests/fixtures/default-title.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"
 `;
 
-exports[`Extract and merge story parameters 1`] = `
+exports[`Extract and merge story meta 1`] = `
 "{
   \\"about\\": {
     \\"homepage\\": \\"https://www.ladle.dev\\",
@@ -91,8 +91,8 @@ exports[`Extract and merge story parameters 1`] = `
       ],
       \\"locStart\\": 13,
       \\"locEnd\\": 15,
-      \\"filePath\\": \\"tests/fixtures/story-parameters.stories.tsx\\",
-      \\"parameters\\": {
+      \\"filePath\\": \\"tests/fixtures/story-meta.stories.tsx\\",
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"theme\\": \\"dark\\",
           \\"browsers\\": [
@@ -111,8 +111,8 @@ exports[`Extract and merge story parameters 1`] = `
       ],
       \\"locStart\\": 25,
       \\"locEnd\\": 27,
-      \\"filePath\\": \\"tests/fixtures/story-parameters.stories.tsx\\",
-      \\"parameters\\": {
+      \\"filePath\\": \\"tests/fixtures/story-meta.stories.tsx\\",
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"theme\\": \\"dark\\",
           \\"browsers\\": [
@@ -126,7 +126,7 @@ exports[`Extract and merge story parameters 1`] = `
 }"
 `;
 
-exports[`Extract default parameters 1`] = `
+exports[`Extract default meta 1`] = `
 "{
   \\"about\\": {
     \\"homepage\\": \\"https://www.ladle.dev\\",
@@ -141,8 +141,8 @@ exports[`Extract default parameters 1`] = `
       ],
       \\"locStart\\": 12,
       \\"locEnd\\": 14,
-      \\"filePath\\": \\"tests/fixtures/default-parameters.stories.tsx\\",
-      \\"parameters\\": {
+      \\"filePath\\": \\"tests/fixtures/default-meta.stories.tsx\\",
+      \\"meta\\": {
         \\"baseweb\\": {
           \\"foo\\": \\"title\\"
         }
@@ -168,7 +168,7 @@ exports[`Single file with two stories 1`] = `
       \\"locStart\\": 3,
       \\"locEnd\\": 5,
       \\"filePath\\": \\"tests/fixtures/animals.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     },
     \\"animals--dog\\": {
       \\"name\\": \\"Dog\\",
@@ -178,7 +178,7 @@ exports[`Single file with two stories 1`] = `
       \\"locStart\\": 7,
       \\"locEnd\\": 9,
       \\"filePath\\": \\"tests/fixtures/animals.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"
@@ -200,7 +200,7 @@ exports[`Story name replaces named export as a story name 1`] = `
       \\"locStart\\": 3,
       \\"locEnd\\": 8,
       \\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     },
     \\"storyname--capital-city\\": {
       \\"name\\": \\"Capital city\\",
@@ -210,7 +210,7 @@ exports[`Story name replaces named export as a story name 1`] = `
       \\"locStart\\": 13,
       \\"locEnd\\": 15,
       \\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     },
     \\"storyname--champs-élysées\\": {
       \\"name\\": \\"Champs élysées\\",
@@ -220,7 +220,7 @@ exports[`Story name replaces named export as a story name 1`] = `
       \\"locStart\\": 17,
       \\"locEnd\\": 19,
       \\"filePath\\": \\"tests/fixtures/storyname.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"
@@ -243,7 +243,7 @@ exports[`Turn file name delimiters into spaces and levels correctly 1`] = `
       \\"locStart\\": 3,
       \\"locEnd\\": 5,
       \\"filePath\\": \\"tests/fixtures/our-animals--mammals.stories.tsx\\",
-      \\"parameters\\": {}
+      \\"meta\\": {}
     }
   }
 }"