@sit-onyx/storybook-utils 1.0.0-alpha.163 → 1.0.0-alpha.165

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.163",
+  "version": "1.0.0-alpha.165",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -30,7 +30,7 @@
     "@storybook/vue3": ">= 8.0.0",
     "storybook-dark-mode": ">= 4",
     "@sit-onyx/icons": "^0.1.0-alpha.2",
-    "sit-onyx": "^1.0.0-alpha.157"
+    "sit-onyx": "^1.0.0-alpha.158"
   },
   "dependencies": {
     "deepmerge-ts": "^7.0.3"

package/src/source-code-generator.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 //
 // This file is only a temporary copy of the improved source code generation for Storybook.
 // It is intended to be deleted once its officially released in Storybook itself, see:
@@ -9,6 +10,7 @@ import {
   generatePropsSourceCode,
   generateSlotSourceCode,
   generateSourceCode,
+  getFunctionParamNames,
   parseDocgenInfo,
   type SourceCodeGeneratorContext,
 } from "./source-code-generator";
@@ -234,3 +236,23 @@ test.each([
   const docgenInfo = parseDocgenInfo({ __docgenInfo });
   expect(docgenInfo.eventNames).toStrictEqual(eventNames);
 });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+test.each<{ fn: (...args: any[]) => unknown; expectedNames: string[] }>([
+  { fn: () => ({}), expectedNames: [] },
+  { fn: (a) => ({}), expectedNames: ["a"] },
+  { fn: (a, b) => ({}), expectedNames: ["a", "b"] },
+  { fn: (a, b, { c }) => ({}), expectedNames: ["a", "b", "{", "c", "}"] },
+  { fn: ({ a, b }) => ({}), expectedNames: ["{", "a", "b", "}"] },
+  {
+    fn: {
+      // simulate minified function after running "storybook build"
+      toString: () => "({a:foo,b:bar})=>({})",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as (...args: any[]) => unknown,
+    expectedNames: ["{", "a", "b", "}"],
+  },
+])("should extract function parameter names", ({ fn, expectedNames }) => {
+  const paramNames = getFunctionParamNames(fn);
+  expect(paramNames).toStrictEqual(expectedNames);
+});

package/src/source-code-generator.ts

@@ -478,13 +478,29 @@ const getVNodeName = (vnode: VNode) => {
  * @see Based on https://stackoverflow.com/a/9924463
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
-const getFunctionParamNames = (func: Function): string[] => {
+export const getFunctionParamNames = (func: Function): string[] => {
   const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
   const ARGUMENT_NAMES = /([^\s,]+)/g;
 
   const fnStr = func.toString().replace(STRIP_COMMENTS, "");
   const result = fnStr.slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")")).match(ARGUMENT_NAMES);
-  return result ?? [];
+  if (!result) return [];
+
+  // when running "storybook build", the function will be minified, so result for e.g.
+  // `({ foo, bar }) => { // function body }` will be `["{foo:e", "bar:a}"]`
+  // therefore we need to remove the :e and :a mappings and extract the "{" and "}"" from the destructured object
+  // so the final result becomes `["{", "foo", "bar", "}"]`
+  return result.flatMap((param) => {
+    if (["{", "}"].includes(param)) return param;
+    const nonMinifiedName = param.split(":")[0].trim();
+    if (nonMinifiedName.startsWith("{")) {
+      return ["{", nonMinifiedName.substring(1)];
+    }
+    if (param.endsWith("}") && !nonMinifiedName.endsWith("}")) {
+      return [nonMinifiedName, "}"];
+    }
+    return nonMinifiedName;
+  });
 };
 
 /**