@storybook/react 10.1.0-alpha.2 → 10.1.0-alpha.4

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_1skdcz3rbd6 from 'node:url';
-import CJS_COMPAT_NODE_PATH_1skdcz3rbd6 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_1skdcz3rbd6 from "node:module";
+import CJS_COMPAT_NODE_URL_ou6ur9ka85b from 'node:url';
+import CJS_COMPAT_NODE_PATH_ou6ur9ka85b from 'node:path';
+import CJS_COMPAT_NODE_MODULE_ou6ur9ka85b from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_1skdcz3rbd6.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_1skdcz3rbd6.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_1skdcz3rbd6.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_ou6ur9ka85b.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_ou6ur9ka85b.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_ou6ur9ka85b.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -4065,7 +4065,9 @@ function getCodeSnippet(csf, storyName, componentName) {
   const metaArgs = metaArgsRecord(metaObj ?? null);
   const storyArgsPath = storyProps.filter((p) => keyOf(p.node) === "args").map((p) => p.get("value")).find((v) => v.isObjectExpression());
   const storyArgs = argsRecordFromObjectPath(storyArgsPath);
-  const merged = { ...metaArgs, ...storyArgs };
+  const storyAssignedArgsPath = storyArgsAssignmentPath(csf._file.path, storyName);
+  const storyAssignedArgs = argsRecordFromObjectPath(storyAssignedArgsPath);
+  const merged = { ...metaArgs, ...storyArgs, ...storyAssignedArgs };
   const entries = Object.entries(merged).filter(([k]) => k !== "children");
   const validEntries = entries.filter(([k, v]) => isValidJsxAttrName(k) && v != null);
   const invalidEntries = entries.filter(([k, v]) => !isValidJsxAttrName(k) && v != null);
@@ -4138,6 +4140,26 @@ var isValidJsxAttrName = /* @__PURE__ */ __name((n) => /^[A-Za-z_][A-Za-z0-9_:-]
 var argsRecordFromObjectPath = /* @__PURE__ */ __name((objPath) => objPath ? Object.fromEntries(
   objPath.get("properties").filter((p) => p.isObjectProperty()).map((p) => [keyOf(p.node), p.get("value").node]).filter((e) => Boolean(e[0]))
 ) : {}, "argsRecordFromObjectPath");
+function storyArgsAssignmentPath(program, storyName) {
+  let found = null;
+  program.traverse({
+    AssignmentExpression(p) {
+      const left = p.get("left");
+      const right = p.get("right");
+      if (left.isMemberExpression()) {
+        const obj = left.get("object");
+        const prop = left.get("property");
+        const isStoryIdent = obj.isIdentifier() && obj.node.name === storyName;
+        const isArgsProp = prop.isIdentifier() && prop.node.name === "args" && !left.node.computed || t.isStringLiteral(prop.node) && left.node.computed && prop.node.value === "args";
+        if (isStoryIdent && isArgsProp && right.isObjectExpression()) {
+          found = right;
+        }
+      }
+    }
+  });
+  return found;
+}
+__name(storyArgsAssignmentPath, "storyArgsAssignmentPath");
 var argsRecordFromObjectNode = /* @__PURE__ */ __name((obj) => obj ? Object.fromEntries(
   obj.properties.filter((p) => t.isObjectProperty(p)).map((p) => [keyOf(p), p.value]).filter((e) => Boolean(e[0]))
 ) : {}, "argsRecordFromObjectNode");
@@ -4769,6 +4791,8 @@ import { existsSync as existsSync2 } from "node:fs";
 import { sep as sep2 } from "node:path";
 import { types as t2 } from "storybook/internal/babel";
 import { getProjectRoot } from "storybook/internal/common";
+import { supportedExtensions as supportedExtensions2 } from "storybook/internal/common";
+import { resolveImport } from "storybook/internal/common";
 
 // ../../node_modules/empathic/find.mjs
 import { join as join4 } from "node:path";
@@ -4853,7 +4877,7 @@ var actualNameHandler_default = actualNameHandler;
 
 // src/componentManifest/reactDocgen/docgenResolver.ts
 var import_resolve2 = __toESM(require_resolve(), 1);
-import { extname as extname2 } from "node:path";
+import { supportedExtensions } from "storybook/internal/common";
 var ReactDocgenResolveError = class extends Error {
   constructor(filename) {
     super(`'${filename}' was ignored by react-docgen.`);
@@ -4864,56 +4888,6 @@ var ReactDocgenResolveError = class extends Error {
     __name(this, "ReactDocgenResolveError");
   }
 };
-var RESOLVE_EXTENSIONS = [
-  ".js",
-  ".cts",
-  // These were originally not in the code, I added them
-  ".mts",
-  // These were originally not in the code, I added them
-  ".ctsx",
-  // These were originally not in the code, I added them
-  ".mtsx",
-  // These were originally not in the code, I added them
-  ".ts",
-  ".tsx",
-  ".mjs",
-  ".cjs",
-  ".mts",
-  ".cts",
-  ".jsx"
-];
-function defaultLookupModule(filename, basedir) {
-  const resolveOptions = {
-    basedir,
-    extensions: RESOLVE_EXTENSIONS,
-    // we do not need to check core modules as we cannot import them anyway
-    includeCoreModules: false
-  };
-  try {
-    return import_resolve2.default.sync(filename, resolveOptions);
-  } catch (error) {
-    const ext = extname2(filename);
-    let newFilename;
-    switch (ext) {
-      case ".js":
-      case ".mjs":
-      case ".cjs":
-        newFilename = `${filename.slice(0, -2)}ts`;
-        break;
-      case ".jsx":
-        newFilename = `${filename.slice(0, -3)}tsx`;
-        break;
-      default:
-        throw error;
-    }
-    return import_resolve2.default.sync(newFilename, {
-      ...resolveOptions,
-      // we already know that there is an extension at this point, so no need to check other extensions
-      extensions: []
-    });
-  }
-}
-__name(defaultLookupModule, "defaultLookupModule");
 
 // src/componentManifest/reactDocgen/exportNameHandler.ts
 import { utils as utils2 } from "react-docgen";
@@ -5096,25 +5070,25 @@ function getReactDocgenImporter(matchPath) {
   return makeFsImporter((filename, basedir) => {
     const mappedFilenameByPaths = (() => {
       if (matchPath) {
-        const match = matchPath(filename);
+        const match = matchPath(filename, void 0, void 0, supportedExtensions2);
         return match || filename;
       } else {
         return filename;
       }
     })();
-    const result = defaultLookupModule(mappedFilenameByPaths, basedir);
+    const result = resolveImport(mappedFilenameByPaths, { basedir });
     if (result.includes(`${sep2}react-native${sep2}index.js`)) {
       const replaced = result.replace(
         `${sep2}react-native${sep2}index.js`,
         `${sep2}react-native-web${sep2}dist${sep2}index.js`
       );
       if (existsSync2(replaced)) {
-        if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+        if (supportedExtensions2.find((ext) => result.endsWith(ext))) {
           return replaced;
         }
       }
     }
-    if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+    if (supportedExtensions2.find((ext) => result.endsWith(ext))) {
       return result;
     }
     throw new ReactDocgenResolveError(filename);
@@ -5140,7 +5114,7 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
         const name = csf._meta?.component ?? entry.title.split("/").at(-1);
         const id = entry.id.split("--")[0];
         const importPath = entry.importPath;
-        const examples = Object.keys(csf._stories).map((storyName) => {
+        const stories = Object.keys(csf._stories).map((storyName) => {
           try {
             return {
               name: storyName,
@@ -5150,9 +5124,7 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
             invariant(e instanceof Error);
             return {
               name: storyName,
-              error: {
-                message: e.message
-              }
+              error: { name: e.name, message: e.message }
             };
           }
         }).filter(Boolean);
@@ -5160,16 +5132,26 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
           id,
           name,
           path: importPath,
-          examples,
+          stories,
           jsDocTags: {}
         };
         if (!entry.componentPath) {
-          const message = `No component file found for the "${name}" component.`;
+          const componentName = csf._meta?.component;
+          const error2 = !componentName ? {
+            name: "No meta.component specified",
+            message: "Specify meta.component for the component to be included in the manifest."
+          } : {
+            name: "No component import found",
+            message: `No component file found for the "${componentName}" component.`
+          };
           return {
             ...base,
             name,
-            examples,
-            error: { message }
+            stories,
+            error: {
+              name: error2.name,
+              message: csf._metaStatementPath?.buildCodeFrameError(error2.message).message ?? error2.message
+            }
           };
         }
         let componentFile;
@@ -5180,9 +5162,11 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
           return {
             ...base,
             name,
-            examples,
+            stories,
             error: {
-              message: `Could not read the component file located at ${entry.componentPath}`
+              name: "Component file could not be read",
+              message: `Could not read the component file located at "${entry.componentPath}".
+Prefer relative imports.`
             }
           };
         }
@@ -5192,7 +5176,12 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
         });
         const docgen = getMatchingDocgen(docgens, csf);
         const error = !docgen ? {
-          message: `Could not parse props information for the located at ${entry.componentPath}`
+          name: "Docgen evaluation failed",
+          message: `Could not parse props information for the component file located at "${entry.componentPath}"
+Avoid barrel files when importing your component file.
+Prefer relative imports if possible.
+Avoid pointing to transpiled files.
+You can debug your component file in this playground: https://react-docgen.dev/playground`
         } : void 0;
         const metaDescription = extractDescription(csf._metaStatement);
         const jsdocComment = metaDescription || docgen?.description;
@@ -5206,7 +5195,7 @@ var componentManifestGenerator = /* @__PURE__ */ __name(async () => {
           import: tags.import?.[0],
           reactDocgen: docgen,
           jsDocTags: tags,
-          examples,
+          stories,
           error
         };
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "10.1.0-alpha.2",
+  "version": "10.1.0-alpha.4",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react-dom-shim": "10.1.0-alpha.2",
+    "@storybook/react-dom-shim": "10.1.0-alpha.4",
     "react-docgen": "^8.0.2"
   },
   "devDependencies": {
@@ -80,7 +80,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^10.1.0-alpha.2",
+    "storybook": "^10.1.0-alpha.4",
     "typescript": ">= 4.9.x"
   },
   "peerDependenciesMeta": {