@storybook/react 10.5.0-alpha.5 → 10.5.0-alpha.6

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_ncp5j0auwhe from 'node:url';
-import CJS_COMPAT_NODE_PATH_ncp5j0auwhe from 'node:path';
-import CJS_COMPAT_NODE_MODULE_ncp5j0auwhe from "node:module";
+import CJS_COMPAT_NODE_URL_swx3ow7zp9i from 'node:url';
+import CJS_COMPAT_NODE_PATH_swx3ow7zp9i from 'node:path';
+import CJS_COMPAT_NODE_MODULE_swx3ow7zp9i from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_ncp5j0auwhe.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_ncp5j0auwhe.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_ncp5j0auwhe.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_swx3ow7zp9i.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_swx3ow7zp9i.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_swx3ow7zp9i.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -16280,9 +16280,9 @@ function buildReactComponentDocgenFromResolved({
   docgenEngine,
   filterStoryIds
 }) {
-  let componentId = getComponentIdFromEntry(entry), title = entry.title.split("/").at(-1).replace(/\s+/g, ""), packageName = getPackageInfo(component?.path, storyPath), fallbackImport = getFallbackImport(packageName, componentName), imports = getImports({ components: allComponents, packageName }).join(`
+  let id = getComponentIdFromEntry(entry), title = entry.title.split("/").at(-1).replace(/\s+/g, ""), packageName = getPackageInfo(component?.path, storyPath), fallbackImport = getFallbackImport(packageName, componentName), imports = getImports({ components: allComponents, packageName }).join(`
 `).trim() || fallbackImport, stories = extractStorySnippets(csf, component?.componentName, filterStoryIds), base2 = {
-    componentId,
+    id,
     name: componentName ?? title,
     path: storyFilePath,
     stories,
@@ -16345,32 +16345,6 @@ ${storyFile}`
     error: docgenError
   };
 }
-function toReactComponentManifest(resolved) {
-  let { componentId, subcomponents, ...rest } = resolved;
-  return {
-    ...rest,
-    id: componentId,
-    ...subcomponents ? {
-      subcomponents: Object.fromEntries(
-        Object.entries(subcomponents).map(([key, sub]) => [
-          key,
-          {
-            name: sub.name,
-            path: sub.path,
-            description: sub.description,
-            summary: sub.summary,
-            import: sub.import,
-            jsDocTags: sub.jsDocTags,
-            error: sub.error,
-            reactDocgen: sub.reactDocgen,
-            reactDocgenTypescript: sub.reactDocgenTypescript,
-            reactComponentMeta: sub.reactComponentMeta
-          }
-        ])
-      )
-    } : {}
-  };
-}
 
 // src/componentManifest/componentMetaManagerSingleton.ts
 import { logger as logger8 } from "storybook/internal/node-logger";
@@ -16454,19 +16428,19 @@ function resolveComponentSymbol(typescript, checker, symbol, contextNode, depth
   }
   return resolved;
 }
-function resolvePropsFromStoryFile(typescript, checker, storySourceFile, componentRef) {
+function findImportSymbolInStoryFile(typescript, checker, storySourceFile, componentRef) {
   let importSpecifier = componentRef.importId, importName = componentRef.importName, memberAccess = componentRef.member;
-  if (!importSpecifier)
-    return;
-  let importSymbol;
-  for (let stmt of storySourceFile.statements) {
-    if (!typescript.isImportDeclaration(stmt))
-      continue;
-    let moduleSpec = stmt.moduleSpecifier;
-    if (!typescript.isStringLiteral(moduleSpec) || moduleSpec.text !== importSpecifier)
-      continue;
-    let clause = stmt.importClause;
-    if (clause) {
+  if (importSpecifier)
+    for (let stmt of storySourceFile.statements) {
+      if (!typescript.isImportDeclaration(stmt))
+        continue;
+      let moduleSpec = stmt.moduleSpecifier;
+      if (!typescript.isStringLiteral(moduleSpec) || moduleSpec.text !== importSpecifier)
+        continue;
+      let clause = stmt.importClause;
+      if (!clause)
+        continue;
+      let importSymbol;
       if (importName === "default") {
         if (clause.name && (importSymbol = checker.getSymbolAtLocation(clause.name)), !importSymbol && clause.namedBindings && typescript.isNamedImports(clause.namedBindings)) {
           for (let spec of clause.namedBindings.elements)
@@ -16483,9 +16457,28 @@ function resolvePropsFromStoryFile(typescript, checker, storySourceFile, compone
           }
       }
       if (!importSymbol && memberAccess && clause.namedBindings && typescript.isNamespaceImport(clause.namedBindings) && (importSymbol = checker.getSymbolAtLocation(clause.namedBindings.name)), importSymbol)
-        break;
+        return importSymbol;
     }
+}
+function metaComponentMatchesRef(typescript, checker, storySourceFile, componentRef, metaComponentInitializer) {
+  let refSymbol = findImportSymbolInStoryFile(typescript, checker, storySourceFile, componentRef), metaSymbol = resolveComponentSymbolFromNode(typescript, checker, metaComponentInitializer);
+  if (refSymbol && metaSymbol && !componentRef.member)
+    return resolveAliasedSymbol(typescript, checker, refSymbol) === resolveAliasedSymbol(typescript, checker, metaSymbol);
+  if (typescript.isIdentifier(metaComponentInitializer))
+    return componentRef.componentName === metaComponentInitializer.text;
+  if (typescript.isPropertyAccessExpression(metaComponentInitializer) && typescript.isIdentifier(metaComponentInitializer.expression)) {
+    let metaName = `${metaComponentInitializer.expression.text}.${metaComponentInitializer.name.text}`;
+    return componentRef.componentName === metaName;
   }
+  return !1;
+}
+function resolvePropsFromStoryFile(typescript, checker, storySourceFile, componentRef) {
+  let memberAccess = componentRef.member, importSymbol = findImportSymbolInStoryFile(
+    typescript,
+    checker,
+    storySourceFile,
+    componentRef
+  );
   if (!importSymbol)
     return;
   let result;
@@ -16556,6 +16549,37 @@ function resolvePropsFromComponentType(typescript, checker, componentType) {
     }
   }
 }
+function resolvePropsFromComponentExport(typescript, checker, componentSourceFile, componentRef) {
+  let moduleSymbol = checker.getSymbolAtLocation(componentSourceFile);
+  if (!moduleSymbol)
+    return;
+  let exports = checker.getExportsOfModule(checker.getMergedSymbol(moduleSymbol)), exportName = componentRef.importName ?? componentRef.componentName.split(".").at(-1);
+  if (!exportName)
+    return;
+  let exportSymbol, componentType;
+  if (componentRef.namespace && componentRef.member) {
+    let namespaceExportName = componentRef.importName ?? componentRef.member;
+    if (exportSymbol = namespaceExportName === "default" ? exports.find((symbol) => symbol.getName() === "default") : exports.find((symbol) => symbol.getName() === namespaceExportName), !exportSymbol)
+      return;
+    componentType = checker.getTypeOfSymbol(exportSymbol);
+  } else {
+    if (exportSymbol = exportName === "default" ? exports.find((symbol) => symbol.getName() === "default") : exports.find((symbol) => symbol.getName() === exportName), !exportSymbol)
+      return;
+    if (componentType = checker.getTypeOfSymbol(exportSymbol), componentRef.member) {
+      let memberSymbol = componentType.getProperty(componentRef.member);
+      if (!memberSymbol)
+        return;
+      exportSymbol = memberSymbol, componentType = checker.getTypeOfSymbol(memberSymbol);
+    }
+  }
+  let propsType = resolvePropsFromComponentType(typescript, checker, componentType), contextNode = exportSymbol ? getSymbolContextNode(exportSymbol) : void 0;
+  if (!(!propsType || !exportSymbol || !contextNode))
+    return {
+      componentRef,
+      propsType,
+      symbol: resolveComponentSymbol(typescript, checker, exportSymbol, contextNode)
+    };
+}
 function getPropSourceFile(prop) {
   let declarations = prop.getDeclarations();
   if (declarations?.length) {
@@ -17175,6 +17199,11 @@ var ComponentMetaProject = class {
           checker,
           storySourceFile,
           entryComponent
+        )), resolvedComponent || (resolvedComponent = resolvePropsFromComponentExport(
+          this.typescript,
+          checker,
+          componentSourceFile,
+          entryComponent
         )), !resolvedComponent)
           continue;
         let serializationContext = serializationContextByComponentPath.get(componentPath);
@@ -17230,7 +17259,16 @@ var ComponentMetaProject = class {
     if (!defaultExport)
       return;
     let componentProp = checker.getTypeOfSymbol(defaultExport).getProperty("component");
-    if (!componentProp)
+    if (!componentProp?.valueDeclaration || !this.typescript.isPropertyAssignment(componentProp.valueDeclaration))
+      return;
+    let metaComponentInitializer = componentProp.valueDeclaration.initializer;
+    if (!metaComponentInitializer || !metaComponentMatchesRef(
+      this.typescript,
+      checker,
+      storySourceFile,
+      componentRef,
+      metaComponentInitializer
+    ))
       return;
     let componentType = checker.getTypeOfSymbol(componentProp), selectedSymbol = componentProp.valueDeclaration && this.typescript.isPropertyAssignment(componentProp.valueDeclaration) ? checker.getSymbolAtLocation(componentProp.valueDeclaration.initializer) : componentType.getSymbol?.();
     if (memberAccess) {
@@ -17620,7 +17658,17 @@ function getSharedComponentMetaManager() {
 
 // src/componentManifest/generator.ts
 var manifests = async (existingManifests = {}, options) => {
-  let { manifestEntries, presets, watch: watch2 } = options, typescriptOptions = await presets?.apply("typescript", {}) ?? {}, docgenEngine = (await presets?.apply("features", {}))?.experimentalReactComponentMeta ? "react-component-meta" : typescriptOptions.reactDocgen || "react-docgen";
+  let { manifestEntries, presets, watch: watch2 } = options, typescriptOptions = await presets?.apply("typescript", {}) ?? {}, features = await presets?.apply("features", {});
+  if (features?.experimentalDocgenServer)
+    return {
+      ...existingManifests,
+      components: {
+        v: 0,
+        components: {},
+        meta: { docgen: "react-component-meta", durationMs: 0 }
+      }
+    };
+  let docgenEngine = features?.experimentalReactComponentMeta ? "react-component-meta" : typescriptOptions.reactDocgen || "react-docgen";
   invalidateCache(), invalidateParser();
   let startTime = performance.now(), manager = docgenEngine === "react-component-meta" ? await getSharedComponentMetaManager() : void 0, entriesByUniqueComponent = [
     ...selectComponentEntriesByComponentId(manifestEntries).values()
@@ -17660,21 +17708,19 @@ var manifests = async (existingManifests = {}, options) => {
       componentName,
       allComponents,
       subcomponents
-    }) => toReactComponentManifest(
-      buildReactComponentDocgenFromResolved({
-        entry,
-        storyPath,
-        storyFilePath,
-        storyFile,
-        csf,
-        componentName,
-        component,
-        allComponents,
-        subcomponents,
-        docgenEngine,
-        filterStoryIds: manifestEntryIds
-      })
-    )
+    }) => buildReactComponentDocgenFromResolved({
+      entry,
+      storyPath,
+      storyFilePath,
+      storyFile,
+      csf,
+      componentName,
+      component,
+      allComponents,
+      subcomponents,
+      docgenEngine,
+      filterStoryIds: manifestEntryIds
+    })
   ).filter((component) => component !== void 0);
   manager && watch2 && manager.startWatching();
   let durationMs = Math.round(performance.now() - startTime);
@@ -17769,57 +17815,6 @@ import { STORY_FILE_TEST_REGEXP, getStoryImportPathFromEntry as getStoryImportPa
 
 // src/docgen/buildDocgen.ts
 import { getStoryImportPathFromEntry as getStoryImportPathFromEntry2 } from "storybook/internal/common";
-function mapProps(doc) {
-  return doc ? Object.values(doc.props).map((prop) => ({
-    name: prop.name,
-    required: prop.required,
-    type: prop.type,
-    description: prop.description,
-    defaultValue: prop.defaultValue,
-    parent: prop.parent,
-    declarations: prop.declarations
-  })) : [];
-}
-function mapSubcomponentToDocgen(sub) {
-  return {
-    name: sub.name,
-    path: sub.path,
-    description: sub.description,
-    summary: sub.summary,
-    import: sub.import,
-    jsDocTags: sub.jsDocTags,
-    props: mapProps(sub.reactComponentMeta),
-    error: sub.error
-  };
-}
-function toDocgenPayload(resolved) {
-  let stories = resolved.stories.length > 0 ? resolved.stories.map((story) => ({
-    id: story.id,
-    name: story.name,
-    snippet: story.snippet,
-    description: story.description,
-    summary: story.summary,
-    error: story.error
-  })) : void 0, subcomponents = resolved.subcomponents && Object.keys(resolved.subcomponents).length > 0 ? Object.fromEntries(
-    Object.entries(resolved.subcomponents).map(([key, sub]) => [
-      key,
-      mapSubcomponentToDocgen(sub)
-    ])
-  ) : void 0;
-  return {
-    componentId: resolved.componentId,
-    name: resolved.name,
-    path: resolved.path,
-    import: resolved.import,
-    description: resolved.description ?? "",
-    summary: resolved.summary,
-    jsDocTags: resolved.jsDocTags,
-    props: mapProps(resolved.reactComponentMeta),
-    error: resolved.error,
-    ...subcomponents ? { subcomponents } : {},
-    ...stories ? { stories } : {}
-  };
-}
 async function buildDocgenPayload(input, context) {
   let storyFilePath = getStoryImportPathFromEntry2(input.entry);
   if (!storyFilePath)
@@ -17841,8 +17836,7 @@ async function buildDocgenPayload(input, context) {
     ...component ? [{ storyPath, component }] : [],
     ...usableSubcomponents.map((sub) => ({ storyPath, component: sub.component }))
   ];
-  storyRefs.length > 0 && context.componentMetaManager.batchExtract(storyRefs);
-  let componentDocgen = buildReactComponentDocgenFromResolved({
+  return storyRefs.length > 0 && context.componentMetaManager.batchExtract(storyRefs), buildReactComponentDocgenFromResolved({
     entry: input.entry,
     storyPath,
     storyFilePath,
@@ -17854,7 +17848,6 @@ async function buildDocgenPayload(input, context) {
     subcomponents,
     docgenEngine: "react-component-meta"
   });
-  return toDocgenPayload(componentDocgen);
 }
 
 // src/docgen/preset.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "10.5.0-alpha.5",
+  "version": "10.5.0-alpha.6",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -53,7 +53,7 @@
   ],
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react-dom-shim": "10.5.0-alpha.5",
+    "@storybook/react-dom-shim": "10.5.0-alpha.6",
     "react-docgen": "^8.0.2",
     "react-docgen-typescript": "^2.2.2"
   },
@@ -74,6 +74,7 @@
     "escodegen": "^2.1.0",
     "expect-type": "^0.15.0",
     "html-tags": "^3.1.0",
+    "memfs": "^4.11.1",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "patch:react-element-to-jsx-string@npm%3A@7rulnik/react-element-to-jsx-string@15.0.1#~/.yarn/patches/@7rulnik-react-element-to-jsx-string-npm-15.0.1-e53b67c4b3.patch",
     "require-from-string": "^2.0.2",
@@ -85,7 +86,7 @@
     "@types/react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "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.5.0-alpha.5",
+    "storybook": "^10.5.0-alpha.6",
     "typescript": ">= 4.9.x"
   },
   "peerDependenciesMeta": {