@storybook/react 10.3.0-alpha.8 → 10.3.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/preset.js CHANGED
@@ -1,19 +1,42 @@
1
- import CJS_COMPAT_NODE_URL_uwov6adlzc9 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_uwov6adlzc9 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_uwov6adlzc9 from "node:module";
1
+ import CJS_COMPAT_NODE_URL_4h3pb8d4ylr from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_4h3pb8d4ylr from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_4h3pb8d4ylr from "node:module";
4
4
 
5
- var __filename = CJS_COMPAT_NODE_URL_uwov6adlzc9.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_uwov6adlzc9.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_uwov6adlzc9.createRequire(import.meta.url);
5
+ var __filename = CJS_COMPAT_NODE_URL_4h3pb8d4ylr.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_4h3pb8d4ylr.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_4h3pb8d4ylr.createRequire(import.meta.url);
8
8
 
9
9
  // ------------------------------------------------------------
10
10
  // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
11
  // ------------------------------------------------------------
12
- import {
13
- __commonJS,
14
- __require,
15
- __toESM
16
- } from "./_node-chunks/chunk-63BVDLL2.js";
12
+ var __create = Object.create;
13
+ var __defProp = Object.defineProperty;
14
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
15
+ var __getOwnPropNames = Object.getOwnPropertyNames;
16
+ var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
17
+ var __require = /* @__PURE__ */ ((x) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(x, {
18
+ get: (a, b) => (typeof require < "u" ? require : a)[b]
19
+ }) : x)(function(x) {
20
+ if (typeof require < "u") return require.apply(this, arguments);
21
+ throw Error('Dynamic require of "' + x + '" is not supported');
22
+ });
23
+ var __commonJS = (cb, mod) => function() {
24
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
25
+ };
26
+ var __copyProps = (to, from, except, desc) => {
27
+ if (from && typeof from == "object" || typeof from == "function")
28
+ for (let key of __getOwnPropNames(from))
29
+ !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
30
+ return to;
31
+ };
32
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
33
+ // If the importer is in node compatibility mode or this is not an ESM
34
+ // file that has been converted to a CommonJS file using a Babel-
35
+ // compatible transform (i.e. "__esModule" has not been set), then set
36
+ // "default" to the CommonJS "module.exports" for node compatibility.
37
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
38
+ mod
39
+ ));
17
40
 
18
41
  // ../../../node_modules/estraverse/estraverse.js
19
42
  var require_estraverse = __commonJS({
@@ -3129,8 +3152,8 @@ var require_acorn = __commonJS({
3129
3152
  }, Parser2.parse = function(input, options) {
3130
3153
  return new this(options, input).parse();
3131
3154
  }, Parser2.parseExpressionAt = function(input, pos, options) {
3132
- var parser = new this(options, input, pos);
3133
- return parser.nextToken(), parser.parseExpression();
3155
+ var parser2 = new this(options, input, pos);
3156
+ return parser2.nextToken(), parser2.parseExpression();
3134
3157
  }, Parser2.tokenizer = function(input, options) {
3135
3158
  return new this(options, input);
3136
3159
  }, Object.defineProperties(Parser2.prototype, prototypeAccessors);
@@ -4097,8 +4120,8 @@ var require_acorn = __commonJS({
4097
4120
  return scope;
4098
4121
  }
4099
4122
  };
4100
- var Node = function(parser, pos, loc) {
4101
- this.type = "", this.start = pos, this.end = 0, parser.options.locations && (this.loc = new SourceLocation(parser, loc)), parser.options.directSourceFile && (this.sourceFile = parser.options.directSourceFile), parser.options.ranges && (this.range = [pos, 0]);
4123
+ var Node = function(parser2, pos, loc) {
4124
+ this.type = "", this.start = pos, this.end = 0, parser2.options.locations && (this.loc = new SourceLocation(parser2, loc)), parser2.options.directSourceFile && (this.sourceFile = parser2.options.directSourceFile), parser2.options.ranges && (this.range = [pos, 0]);
4102
4125
  }, pp$6 = Parser2.prototype;
4103
4126
  pp$6.startNode = function() {
4104
4127
  return new Node(this, this.start, this.startLoc);
@@ -4193,8 +4216,8 @@ var require_acorn = __commonJS({
4193
4216
  d.nonBinary.Script_Extensions = d.nonBinary.Script, d.nonBinary.gc = d.nonBinary.General_Category, d.nonBinary.sc = d.nonBinary.Script, d.nonBinary.scx = d.nonBinary.Script_Extensions;
4194
4217
  }
4195
4218
  buildUnicodeData(9), buildUnicodeData(10), buildUnicodeData(11);
4196
- var pp$8 = Parser2.prototype, RegExpValidationState = function(parser) {
4197
- this.parser = parser, this.validFlags = "gim" + (parser.options.ecmaVersion >= 6 ? "uy" : "") + (parser.options.ecmaVersion >= 9 ? "s" : ""), this.unicodeProperties = data[parser.options.ecmaVersion >= 11 ? 11 : parser.options.ecmaVersion], this.source = "", this.flags = "", this.start = 0, this.switchU = !1, this.switchN = !1, this.pos = 0, this.lastIntValue = 0, this.lastStringValue = "", this.lastAssertionIsQuantifiable = !1, this.numCapturingParens = 0, this.maxBackReference = 0, this.groupNames = [], this.backReferenceNames = [];
4219
+ var pp$8 = Parser2.prototype, RegExpValidationState = function(parser2) {
4220
+ this.parser = parser2, this.validFlags = "gim" + (parser2.options.ecmaVersion >= 6 ? "uy" : "") + (parser2.options.ecmaVersion >= 9 ? "s" : ""), this.unicodeProperties = data[parser2.options.ecmaVersion >= 11 ? 11 : parser2.options.ecmaVersion], this.source = "", this.flags = "", this.start = 0, this.switchU = !1, this.switchN = !1, this.pos = 0, this.lastIntValue = 0, this.lastStringValue = "", this.lastAssertionIsQuantifiable = !1, this.numCapturingParens = 0, this.maxBackReference = 0, this.groupNames = [], this.backReferenceNames = [];
4198
4221
  };
4199
4222
  RegExpValidationState.prototype.reset = function(start, pattern, flags) {
4200
4223
  var unicode = flags.indexOf("u") !== -1;
@@ -10432,42 +10455,12 @@ var extractArgTypes = (component) => {
10432
10455
  };
10433
10456
 
10434
10457
  // src/componentManifest/reactDocgen.ts
10458
+ var import_ts_dedent2 = __toESM(require_dist(), 1), TsconfigPaths = __toESM(require_lib2(), 1);
10435
10459
  import { existsSync as existsSync2 } from "node:fs";
10436
10460
  import { dirname as dirname3, sep as sep2 } from "node:path";
10437
10461
  import { babelParse, types as t } from "storybook/internal/babel";
10438
- import { getProjectRoot, supportedExtensions as supportedExtensions2 } from "storybook/internal/common";
10462
+ import { supportedExtensions as supportedExtensions2 } from "storybook/internal/common";
10439
10463
  import { logger as logger2 } from "storybook/internal/node-logger";
10440
-
10441
- // ../../../node_modules/empathic/find.mjs
10442
- import { join as join3 } from "node:path";
10443
- import { existsSync, statSync } from "node:fs";
10444
-
10445
- // ../../../node_modules/empathic/walk.mjs
10446
- import { dirname as dirname2 } from "node:path";
10447
-
10448
- // ../../../node_modules/empathic/resolve.mjs
10449
- import { isAbsolute as isAbsolute2, join as join2, resolve as resolve2 } from "node:path";
10450
- function absolute(input, root) {
10451
- return isAbsolute2(input) ? input : resolve2(root || ".", input);
10452
- }
10453
-
10454
- // ../../../node_modules/empathic/walk.mjs
10455
- function up(base2, options) {
10456
- let { last: last2, cwd: cwd2 } = options || {}, tmp = absolute(base2, cwd2), root = absolute(last2 || "/", cwd2), prev, arr = [];
10457
- for (; prev !== root && (arr.push(tmp), tmp = dirname2(prev = tmp), tmp !== prev); )
10458
- ;
10459
- return arr;
10460
- }
10461
-
10462
- // ../../../node_modules/empathic/find.mjs
10463
- function up2(name, options) {
10464
- let dir, tmp, start = options && options.cwd || "";
10465
- for (dir of up(start, options))
10466
- if (tmp = join3(dir, name), existsSync(tmp)) return tmp;
10467
- }
10468
-
10469
- // src/componentManifest/reactDocgen.ts
10470
- var import_ts_dedent2 = __toESM(require_dist(), 1), TsconfigPaths = __toESM(require_lib2(), 1);
10471
10464
  import {
10472
10465
  builtinHandlers as docgenHandlers,
10473
10466
  builtinResolvers as docgenResolver,
@@ -10698,11 +10691,11 @@ function getParser4({ startLine = 0, fence = "```", spacing = "compact", markers
10698
10691
  }
10699
10692
 
10700
10693
  // ../../../node_modules/comment-parser/es6/stringifier/index.js
10701
- function join4(tokens) {
10694
+ function join2(tokens) {
10702
10695
  return tokens.start + tokens.delimiter + tokens.postDelimiter + tokens.tag + tokens.postTag + tokens.type + tokens.postType + tokens.name + tokens.postName + tokens.description + tokens.end + tokens.lineEnd;
10703
10696
  }
10704
10697
  function getStringifier() {
10705
- return (block) => block.source.map(({ tokens }) => join4(tokens)).join(`
10698
+ return (block) => block.source.map(({ tokens }) => join2(tokens)).join(`
10706
10699
  `);
10707
10700
  }
10708
10701
 
@@ -10732,8 +10725,38 @@ var stringify = getStringifier();
10732
10725
 
10733
10726
  // src/componentManifest/utils.ts
10734
10727
  import { readFileSync } from "node:fs";
10735
- import { resolveImport } from "storybook/internal/common";
10728
+ import { getProjectRoot, resolveImport } from "storybook/internal/common";
10736
10729
  import { logger } from "storybook/internal/node-logger";
10730
+
10731
+ // ../../../node_modules/empathic/find.mjs
10732
+ import { join as join4 } from "node:path";
10733
+ import { existsSync, statSync } from "node:fs";
10734
+
10735
+ // ../../../node_modules/empathic/walk.mjs
10736
+ import { dirname as dirname2 } from "node:path";
10737
+
10738
+ // ../../../node_modules/empathic/resolve.mjs
10739
+ import { isAbsolute as isAbsolute2, join as join3, resolve as resolve2 } from "node:path";
10740
+ function absolute(input, root) {
10741
+ return isAbsolute2(input) ? input : resolve2(root || ".", input);
10742
+ }
10743
+
10744
+ // ../../../node_modules/empathic/walk.mjs
10745
+ function up(base2, options) {
10746
+ let { last: last2, cwd: cwd2 } = options || {}, tmp = absolute(base2, cwd2), root = absolute(last2 || "/", cwd2), prev, arr = [];
10747
+ for (; prev !== root && (arr.push(tmp), tmp = dirname2(prev = tmp), tmp !== prev); )
10748
+ ;
10749
+ return arr;
10750
+ }
10751
+
10752
+ // ../../../node_modules/empathic/find.mjs
10753
+ function up2(name, options) {
10754
+ let dir, tmp, start = options && options.cwd || "";
10755
+ for (dir of up(start, options))
10756
+ if (tmp = join4(dir, name), existsSync(tmp)) return tmp;
10757
+ }
10758
+
10759
+ // src/componentManifest/utils.ts
10737
10760
  var groupBy = (items, keySelector) => items.reduce((acc = {}, item, index) => {
10738
10761
  let key = keySelector(item, index);
10739
10762
  return Array.isArray(acc[key]) || (acc[key] = []), acc[key].push(item), acc;
@@ -10759,7 +10782,10 @@ var memoStore = /* @__PURE__ */ new WeakMap(), cached = (fn, opts = {}) => {
10759
10782
  };
10760
10783
  }, invalidateCache = () => {
10761
10784
  memoStore = /* @__PURE__ */ new WeakMap();
10762
- }, cachedReadFileSync = cached(readFileSync, { name: "cachedReadFile" }), cachedFindUp = cached(up2, { name: "findUp" }), cachedResolveImport = cached(resolveImport, { name: "resolveImport" });
10785
+ }, cachedReadFileSync = cached(readFileSync, { name: "cachedReadFile" }), cachedFindUp = cached(up2, { name: "findUp" }), cachedResolveImport = cached(resolveImport, { name: "resolveImport" }), findTsconfigPath = cached(
10786
+ (cwd2) => up2("tsconfig.json", { cwd: cwd2, last: getProjectRoot() }),
10787
+ { name: "findTsconfigPath" }
10788
+ );
10763
10789
 
10764
10790
  // src/componentManifest/jsdocTags.ts
10765
10791
  function extractJSDocInfo(jsdocComment) {
@@ -10945,7 +10971,7 @@ function matchPath(id, basedir) {
10945
10971
  }
10946
10972
  var getTsConfig = cached(
10947
10973
  (cwd2) => {
10948
- let tsconfigPath = up2("tsconfig.json", { cwd: cwd2, last: getProjectRoot() });
10974
+ let tsconfigPath = findTsconfigPath(cwd2);
10949
10975
  return TsconfigPaths.loadConfig(tsconfigPath);
10950
10976
  },
10951
10977
  { name: "getTsConfig" }
@@ -11176,11 +11202,11 @@ var REACT_NODE_TYPES = /* @__PURE__ */ new Set([
11176
11202
  ]);
11177
11203
  var getTsConfig2 = async () => {
11178
11204
  try {
11179
- let ts = await import("typescript"), tsconfigPath = ts.findConfigFile(process.cwd(), ts.sys.fileExists);
11205
+ let ts2 = await import("typescript"), tsconfigPath = ts2.findConfigFile(process.cwd(), ts2.sys.fileExists);
11180
11206
  if (console.log({ tsconfigPath }), tsconfigPath === void 0)
11181
11207
  return {};
11182
- let basePath = dirname4(tsconfigPath), { config, error } = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
11183
- return error ? {} : ts.parseJsonConfigFileContent(config, ts.sys, basePath, {}, tsconfigPath).options;
11208
+ let basePath = dirname4(tsconfigPath), { config, error } = ts2.readConfigFile(tsconfigPath, ts2.sys.readFile);
11209
+ return error ? {} : ts2.parseJsonConfigFileContent(config, ts2.sys, basePath, {}, tsconfigPath).options;
11184
11210
  } catch {
11185
11211
  return {};
11186
11212
  }
@@ -11193,7 +11219,7 @@ var extractArgTypesFromDocgenTypescript = async ({
11193
11219
  reactDocgenTypescriptOptions
11194
11220
  }) => {
11195
11221
  try {
11196
- let { withCompilerOptions } = (await import("./_node-chunks/lib-BNFWLTPX.js")).default, defaultOptions = {
11222
+ let { withCompilerOptions: withCompilerOptions2 } = (await import("react-docgen-typescript")).default, defaultOptions = {
11197
11223
  shouldExtractLiteralValuesFromEnum: !0,
11198
11224
  shouldRemoveUndefinedFromOptional: !0,
11199
11225
  propFilter: (prop) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : !0,
@@ -11204,7 +11230,7 @@ var extractArgTypesFromDocgenTypescript = async ({
11204
11230
  ...reactDocgenTypescriptOptions,
11205
11231
  // Always ensure savePropValueAsString is true for consistency
11206
11232
  savePropValueAsString: !0
11207
- }, docgens = withCompilerOptions(
11233
+ }, docgens = withCompilerOptions2(
11208
11234
  { ...tsConfig, noErrorTruncation: !0, strict: !0 },
11209
11235
  mergedOptions
11210
11236
  ).parse(componentFilePath);
@@ -11233,7 +11259,6 @@ import { recast as recast2 } from "storybook/internal/babel";
11233
11259
  import { Tag } from "storybook/internal/core-server";
11234
11260
  import { storyNameFromExport } from "storybook/internal/csf";
11235
11261
  import { extractDescription, loadCsf } from "storybook/internal/csf-tools";
11236
- import { logger as logger6 } from "storybook/internal/node-logger";
11237
11262
 
11238
11263
  // ../../../node_modules/es-toolkit/dist/array/uniqBy.mjs
11239
11264
  function uniqBy(arr, mapper) {
@@ -11516,16 +11541,135 @@ function pathForNode(program, target) {
11516
11541
  }
11517
11542
 
11518
11543
  // src/componentManifest/getComponentImports.ts
11519
- import { dirname as dirname5 } from "node:path";
11544
+ import { dirname as dirname6 } from "node:path";
11520
11545
  import { babelParse as babelParse2, recast, types as t3 } from "storybook/internal/babel";
11521
11546
  import { logger as logger5 } from "storybook/internal/node-logger";
11547
+
11548
+ // src/componentManifest/reactDocgenTypescript.ts
11549
+ import { dirname as dirname5 } from "node:path";
11550
+ import {
11551
+ withCompilerOptions
11552
+ } from "react-docgen-typescript";
11553
+ import ts from "typescript";
11554
+ var LARGE_NON_USER_SOURCE_THRESHOLD = 30, getPropSource = (prop) => prop.parent?.fileName ?? prop.declarations?.[0]?.fileName, getLargeNonUserPropSources = (props) => {
11555
+ let countBySource = /* @__PURE__ */ new Map();
11556
+ for (let prop of Object.values(props)) {
11557
+ let source = getPropSource(prop);
11558
+ (source?.includes("node_modules") || source?.endsWith(".d.ts")) && countBySource.set(source, (countBySource.get(source) ?? 0) + 1);
11559
+ }
11560
+ let largeNonUserSources = /* @__PURE__ */ new Set();
11561
+ for (let [source, count] of countBySource)
11562
+ count > LARGE_NON_USER_SOURCE_THRESHOLD && largeNonUserSources.add(source);
11563
+ return largeNonUserSources;
11564
+ };
11565
+ function findDisplayNameAssignment(sourceFile, identifierName) {
11566
+ for (let statement of sourceFile.statements) {
11567
+ if (!ts.isExpressionStatement(statement))
11568
+ continue;
11569
+ let expr = statement.expression;
11570
+ if (ts.isBinaryExpression(expr) && expr.operatorToken.kind === ts.SyntaxKind.EqualsToken && ts.isPropertyAccessExpression(expr.left) && expr.left.name.text === "displayName" && ts.isIdentifier(expr.left.expression) && expr.left.expression.text === identifierName && ts.isStringLiteral(expr.right))
11571
+ return expr.right.text;
11572
+ }
11573
+ }
11574
+ function getExportNameMap(checker, sourceFile) {
11575
+ let moduleSymbol = checker.getSymbolAtLocation(sourceFile);
11576
+ if (!moduleSymbol)
11577
+ return /* @__PURE__ */ new Map();
11578
+ let result = /* @__PURE__ */ new Map(), fileName = sourceFile.fileName.replace(/.*\//, "").replace(/\.[^.]+$/, "");
11579
+ for (let exportSymbol of checker.getExportsOfModule(moduleSymbol)) {
11580
+ let resolved = exportSymbol.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(exportSymbol) : exportSymbol, declaration = resolved.valueDeclaration ?? resolved.getDeclarations()?.[0];
11581
+ if (!declaration)
11582
+ continue;
11583
+ let type = checker.getTypeOfSymbolAtLocation(resolved, declaration), isStateless = type.getCallSignatures().some((sig) => {
11584
+ let params = sig.getParameters();
11585
+ return params.length === 1 || params.length > 0 && params[0].getName() === "props";
11586
+ }), isStateful = type.getConstructSignatures().some(
11587
+ (sig) => sig.getReturnType().getProperty("props") !== void 0
11588
+ );
11589
+ if (isStateless || isStateful) {
11590
+ let exportName = exportSymbol.getName(), resolvedName = resolved.getName();
11591
+ result.set(resolvedName, exportName), exportName === "default" && result.set(fileName, "default");
11592
+ let displayNameValue = findDisplayNameAssignment(sourceFile, resolvedName);
11593
+ displayNameValue && result.set(displayNameValue, exportName);
11594
+ }
11595
+ }
11596
+ return result;
11597
+ }
11598
+ var cachedCompilerOptions, cachedFileNames, previousProgram, parser, cachedParserOptionsKey;
11599
+ function invalidateParser() {
11600
+ parser = void 0, cachedCompilerOptions = void 0, cachedFileNames = void 0;
11601
+ }
11602
+ function getParser5(userOptions) {
11603
+ let optionsKey = JSON.stringify(userOptions ?? {});
11604
+ if (parser && cachedParserOptionsKey !== optionsKey && (parser = void 0), !parser) {
11605
+ let configPath = findTsconfigPath(process.cwd());
11606
+ if (cachedCompilerOptions = { noErrorTruncation: !0, strict: !0 }, configPath) {
11607
+ let { config } = ts.readConfigFile(configPath, ts.sys.readFile), parsed = ts.parseJsonConfigFileContent(config, ts.sys, dirname5(configPath));
11608
+ cachedCompilerOptions = { ...parsed.options, noErrorTruncation: !0 }, cachedFileNames = parsed.fileNames;
11609
+ }
11610
+ let program = ts.createProgram(
11611
+ cachedFileNames ?? [],
11612
+ cachedCompilerOptions,
11613
+ void 0,
11614
+ previousProgram
11615
+ );
11616
+ previousProgram = program;
11617
+ let parserOptions = {
11618
+ shouldExtractLiteralValuesFromEnum: !0,
11619
+ shouldRemoveUndefinedFromOptional: !0,
11620
+ ...userOptions,
11621
+ // Always force savePropValueAsString so default values are in a consistent format
11622
+ savePropValueAsString: !0
11623
+ };
11624
+ parser = {
11625
+ program,
11626
+ fileParser: withCompilerOptions(cachedCompilerOptions, parserOptions)
11627
+ }, cachedParserOptionsKey = optionsKey;
11628
+ }
11629
+ return parser;
11630
+ }
11631
+ function matchComponentDoc(docs, {
11632
+ importName,
11633
+ localImportName,
11634
+ componentName
11635
+ }) {
11636
+ if (docs.length !== 0)
11637
+ return docs.length === 1 ? docs[0] : docs.find(
11638
+ (doc) => doc.exportName === importName || doc.exportName === localImportName || doc.displayName === importName || doc.displayName === localImportName || doc.displayName === componentName
11639
+ );
11640
+ }
11641
+ var parseWithReactDocgenTypescript = cached(
11642
+ (filePath, userOptions) => {
11643
+ let { program, fileParser } = getParser5(userOptions), checker = program.getTypeChecker(), sourceFile = program.getSourceFile(filePath), docs = fileParser.parseWithProgramProvider(filePath, () => program), exportNameMap = sourceFile ? getExportNameMap(checker, sourceFile) : /* @__PURE__ */ new Map();
11644
+ return docs.map((doc) => {
11645
+ let largeNonUserSources = getLargeNonUserPropSources(doc.props);
11646
+ return {
11647
+ ...doc,
11648
+ // Use name-based lookup: displayName is the resolved symbol name, so look it up in the
11649
+ // export map to get the public export name. Falls back to displayName when not aliased.
11650
+ exportName: exportNameMap.get(doc.displayName) ?? doc.displayName,
11651
+ // Filter out bulk props from non-user sources (React built-ins, DOM, CSS-in-JS system props)
11652
+ props: Object.fromEntries(
11653
+ Object.entries(doc.props).filter(([, prop]) => {
11654
+ let source = getPropSource(prop);
11655
+ return !source || !largeNonUserSources.has(source);
11656
+ })
11657
+ )
11658
+ };
11659
+ });
11660
+ },
11661
+ { name: "parseWithReactDocgenTypescript" }
11662
+ );
11663
+
11664
+ // src/componentManifest/getComponentImports.ts
11522
11665
  var baseIdentifier = (component) => component.split(".")[0] ?? component, isTypeSpecifier = (s) => t3.isImportSpecifier(s) && s.importKind === "type", importedName = (im) => t3.isIdentifier(im) ? im.name : im.value, addUniqueBy = (arr, item, eq2) => {
11523
11666
  arr.find(eq2) || arr.push(item);
11524
11667
  }, getComponents = ({
11525
11668
  csf,
11526
- storyFilePath
11669
+ storyFilePath,
11670
+ typescriptOptions
11527
11671
  }) => {
11528
- let program = csf._file.path, componentSet = /* @__PURE__ */ new Set(), localToImport = /* @__PURE__ */ new Map();
11672
+ let { reactDocgen = "react-docgen", reactDocgenTypescriptOptions } = typescriptOptions, reactDocgenConfig = reactDocgen || "react-docgen", program = csf._file.path, componentSet = /* @__PURE__ */ new Set(), localToImport = /* @__PURE__ */ new Map();
11529
11673
  program.traverse({
11530
11674
  JSXOpeningElement(p) {
11531
11675
  let n = p.node.name;
@@ -11596,25 +11740,51 @@ var baseIdentifier = (component) => component.split(".")[0] ?? component, isType
11596
11740
  }).map((component) => {
11597
11741
  let path3, isPackage = !1;
11598
11742
  try {
11599
- component.importId && storyFilePath && (path3 = cachedResolveImport(matchPath(component.importId, dirname5(storyFilePath)), {
11600
- basedir: dirname5(storyFilePath)
11743
+ component.importId && storyFilePath && (path3 = cachedResolveImport(matchPath(component.importId, dirname6(storyFilePath)), {
11744
+ basedir: dirname6(storyFilePath)
11601
11745
  }));
11602
11746
  } catch (e) {
11603
11747
  logger5.debug(e);
11604
11748
  }
11605
11749
  try {
11606
- component.importId && !component.importId.startsWith(".") && storyFilePath && (cachedResolveImport(component.importId, { basedir: dirname5(storyFilePath) }), isPackage = !0);
11750
+ component.importId && !component.importId.startsWith(".") && storyFilePath && (cachedResolveImport(component.importId, { basedir: dirname6(storyFilePath) }), isPackage = !0);
11607
11751
  } catch {
11608
11752
  }
11609
11753
  let componentWithPackage = { ...component, isPackage };
11610
11754
  if (path3) {
11611
- let reactDocgen = getReactDocgen(path3, componentWithPackage);
11612
- return {
11613
- ...componentWithPackage,
11614
- path: path3,
11615
- reactDocgen,
11616
- importOverride: reactDocgen.type === "success" ? getImportTag(reactDocgen.data) : void 0
11617
- };
11755
+ if (reactDocgenConfig === "react-docgen-typescript") {
11756
+ let reactDocgenTypescript, reactDocgenTypescriptError;
11757
+ try {
11758
+ reactDocgenTypescript = matchComponentDoc(
11759
+ parseWithReactDocgenTypescript(path3, reactDocgenTypescriptOptions),
11760
+ component
11761
+ );
11762
+ } catch (e) {
11763
+ let message = e instanceof Error ? e.message : String(e);
11764
+ logger5.debug(`react-docgen-typescript failed for ${path3}: ${message}`), reactDocgenTypescriptError = {
11765
+ name: "react-docgen-typescript parse error",
11766
+ message: `File: ${path3}
11767
+ ${message}`
11768
+ };
11769
+ }
11770
+ let importOverride = reactDocgenTypescript ? getImportTag(reactDocgenTypescript) : void 0;
11771
+ return {
11772
+ ...componentWithPackage,
11773
+ path: path3,
11774
+ ...reactDocgenTypescript ? { reactDocgenTypescript } : {},
11775
+ ...reactDocgenTypescriptError ? { reactDocgenTypescriptError } : {},
11776
+ importOverride
11777
+ };
11778
+ }
11779
+ if (reactDocgenConfig === "react-docgen") {
11780
+ let reactDocgen2 = getReactDocgen(path3, componentWithPackage);
11781
+ return {
11782
+ ...componentWithPackage,
11783
+ path: path3,
11784
+ reactDocgen: reactDocgen2,
11785
+ importOverride: reactDocgen2.type === "success" ? getImportTag(reactDocgen2.data) : void 0
11786
+ };
11787
+ }
11618
11788
  }
11619
11789
  return componentWithPackage;
11620
11790
  }).sort((a, b) => a.componentName.localeCompare(b.componentName));
@@ -11809,9 +11979,10 @@ function extractComponentDescription(csf, docgen) {
11809
11979
  jsDocTags: tags
11810
11980
  };
11811
11981
  }
11812
- var manifests = async (existingManifests = {}, { manifestEntries }) => {
11813
- invalidateCache();
11814
- let startPerformance = performance.now(), components = uniqBy(
11982
+ var manifests = async (existingManifests = {}, options) => {
11983
+ let { manifestEntries, presets } = options, typescriptOptions = await presets?.apply("typescript", {}) ?? {};
11984
+ invalidateCache(), invalidateParser();
11985
+ let startTime = performance.now(), components = uniqBy(
11815
11986
  manifestEntries.filter(
11816
11987
  (entry) => entry.type === "story" && entry.subtype === "story" || // addon-docs will add docs entries to these manifest entries afterwards
11817
11988
  // Docs entries have importPath pointing to MDX file, but storiesImports[0] points to the story file
@@ -11822,7 +11993,11 @@ var manifests = async (existingManifests = {}, { manifestEntries }) => {
11822
11993
  let storyFilePath = entry.type === "story" ? entry.importPath : (
11823
11994
  // For attached docs entries, storiesImports[0] points to the stories file being attached to
11824
11995
  entry.storiesImports[0]
11825
- ), absoluteImportPath = path.join(process.cwd(), storyFilePath), storyFile = cachedReadFileSync(absoluteImportPath, "utf-8"), csf = loadCsf(storyFile, { makeTitle: () => entry.title }).parse(), componentName = csf._meta?.component, id = entry.id.split("--")[0], title = entry.title.split("/").at(-1).replace(/\s+/g, ""), allComponents = getComponents({ csf, storyFilePath: absoluteImportPath }), component = findMatchingComponent(
11996
+ ), absoluteImportPath = path.join(process.cwd(), storyFilePath), storyFile = cachedReadFileSync(absoluteImportPath, "utf-8"), csf = loadCsf(storyFile, { makeTitle: () => entry.title }).parse(), componentName = csf._meta?.component, id = entry.id.split("--")[0], title = entry.title.split("/").at(-1).replace(/\s+/g, ""), allComponents = getComponents({
11997
+ csf,
11998
+ storyFilePath: absoluteImportPath,
11999
+ typescriptOptions
12000
+ }), component = findMatchingComponent(
11826
12001
  allComponents,
11827
12002
  componentName,
11828
12003
  entry.title.replace(/\s+/g, "")
@@ -11835,7 +12010,7 @@ var manifests = async (existingManifests = {}, { manifestEntries }) => {
11835
12010
  import: imports,
11836
12011
  jsDocTags: {}
11837
12012
  };
11838
- if (!component?.reactDocgen) {
12013
+ if (!(component?.reactDocgen || component?.reactDocgenTypescript)) {
11839
12014
  let error = csf._meta?.component ? {
11840
12015
  name: "No component import found",
11841
12016
  message: `No component file found for the "${csf.meta.component}" component.`
@@ -11854,22 +12029,30 @@ ${storyFile}`
11854
12029
  }
11855
12030
  };
11856
12031
  }
11857
- let docgenResult = component.reactDocgen, docgen = docgenResult.type === "success" ? docgenResult.data : void 0, { description, summary, jsDocTags } = extractComponentDescription(csf, docgen);
12032
+ let docgenResult = component.reactDocgen, docgen = docgenResult?.type === "success" ? docgenResult.data : void 0, reactDocgenTypescriptDoc = component.reactDocgenTypescript, docgenDescription = docgen?.description ?? reactDocgenTypescriptDoc?.description, { description, summary, jsDocTags } = extractComponentDescription(
12033
+ csf,
12034
+ docgenDescription ? { description: docgenDescription } : void 0
12035
+ );
11858
12036
  return {
11859
12037
  ...base2,
11860
12038
  description,
11861
12039
  summary,
11862
12040
  import: imports,
11863
- reactDocgen: docgen,
12041
+ ...docgen ? { reactDocgen: docgen } : {},
12042
+ ...reactDocgenTypescriptDoc ? { reactDocgenTypescript: reactDocgenTypescriptDoc } : {},
11864
12043
  jsDocTags,
11865
- error: docgenResult.type === "error" ? docgenResult.error : void 0
12044
+ error: (docgenResult?.type === "error" ? docgenResult.error : void 0) ?? component.reactDocgenTypescriptError
11866
12045
  };
11867
- }).filter((component) => component !== void 0);
11868
- return logger6.verbose(`Component manifest generation took ${performance.now() - startPerformance}ms`), {
12046
+ }).filter((component) => component !== void 0), durationMs = Math.round(performance.now() - startTime);
12047
+ return {
11869
12048
  ...existingManifests,
11870
12049
  components: {
11871
12050
  v: 0,
11872
- components: Object.fromEntries(components.map((component) => [component.id, component]))
12051
+ components: Object.fromEntries(components.map((component) => [component.id, component])),
12052
+ meta: {
12053
+ docgen: typescriptOptions.reactDocgen ?? "react-docgen",
12054
+ durationMs
12055
+ }
11873
12056
  }
11874
12057
  };
11875
12058
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react",
3
- "version": "10.3.0-alpha.8",
3
+ "version": "10.3.0-alpha.9",
4
4
  "description": "Storybook React renderer",
5
5
  "keywords": [
6
6
  "storybook"
@@ -53,8 +53,9 @@
53
53
  ],
54
54
  "dependencies": {
55
55
  "@storybook/global": "^5.0.0",
56
- "@storybook/react-dom-shim": "10.3.0-alpha.8",
57
- "react-docgen": "^8.0.2"
56
+ "@storybook/react-dom-shim": "10.3.0-alpha.9",
57
+ "react-docgen": "^8.0.2",
58
+ "react-docgen-typescript": "^2.2.2"
58
59
  },
59
60
  "devDependencies": {
60
61
  "@types/babel-plugin-react-docgen": "^4.2.3",
@@ -80,7 +81,7 @@
80
81
  "peerDependencies": {
81
82
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
82
83
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
83
- "storybook": "^10.3.0-alpha.8",
84
+ "storybook": "^10.3.0-alpha.9",
84
85
  "typescript": ">= 4.9.x"
85
86
  },
86
87
  "peerDependenciesMeta": {
@@ -1,45 +0,0 @@
1
- import CJS_COMPAT_NODE_URL_uwov6adlzc9 from 'node:url';
2
- import CJS_COMPAT_NODE_PATH_uwov6adlzc9 from 'node:path';
3
- import CJS_COMPAT_NODE_MODULE_uwov6adlzc9 from "node:module";
4
-
5
- var __filename = CJS_COMPAT_NODE_URL_uwov6adlzc9.fileURLToPath(import.meta.url);
6
- var __dirname = CJS_COMPAT_NODE_PATH_uwov6adlzc9.dirname(__filename);
7
- var require = CJS_COMPAT_NODE_MODULE_uwov6adlzc9.createRequire(import.meta.url);
8
-
9
- // ------------------------------------------------------------
10
- // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
- // ------------------------------------------------------------
12
- var __create = Object.create;
13
- var __defProp = Object.defineProperty;
14
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
15
- var __getOwnPropNames = Object.getOwnPropertyNames;
16
- var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
17
- var __require = /* @__PURE__ */ ((x) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(x, {
18
- get: (a, b) => (typeof require < "u" ? require : a)[b]
19
- }) : x)(function(x) {
20
- if (typeof require < "u") return require.apply(this, arguments);
21
- throw Error('Dynamic require of "' + x + '" is not supported');
22
- });
23
- var __commonJS = (cb, mod) => function() {
24
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
25
- };
26
- var __copyProps = (to, from, except, desc) => {
27
- if (from && typeof from == "object" || typeof from == "function")
28
- for (let key of __getOwnPropNames(from))
29
- !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
30
- return to;
31
- };
32
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
33
- // If the importer is in node compatibility mode or this is not an ESM
34
- // file that has been converted to a CommonJS file using a Babel-
35
- // compatible transform (i.e. "__esModule" has not been set), then set
36
- // "default" to the CommonJS "module.exports" for node compatibility.
37
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
38
- mod
39
- ));
40
-
41
- export {
42
- __require,
43
- __commonJS,
44
- __toESM
45
- };