storybook-framework-cedarjs 1.0.1-next.0 → 1.1.0-rc.33

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.
@@ -1,12 +1,13 @@
1
1
  /**
2
2
  * This is heavily based on the react-docgen `displayNameHandler`
3
3
  * (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts)
4
- * but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name.
5
- * This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName`
6
- * and not the component's actual name.
4
+ * but instead defines an `actualName` property on the generated docs that is taken first from the
5
+ * component's actual name. This addresses an issue where the name that the generated docs are
6
+ * stored under is incorrectly named with the `displayName` and not the component's actual name.
7
7
  *
8
- * This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified
9
- * directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
8
+ * This is inspired by `actualNameHandler` from
9
+ * https://github.com/storybookjs/babel-plugin-react-docgen, but is modified directly from
10
+ * displayNameHandler, using the same approach as babel-plugin-react-docgen.
10
11
  */
11
12
  import type { Handler } from 'react-docgen';
12
13
  declare const actualNameHandler: Handler;
@@ -1 +1 @@
1
- {"version":3,"file":"actualNameHandler.d.ts","sourceRoot":"","sources":["../../../src/plugins/docgen-handlers/actualNameHandler.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,OAAO,EAA6B,MAAM,cAAc,CAAA;AAKtE,QAAA,MAAM,iBAAiB,EAAE,OA0CxB,CAAA;AAED,eAAe,iBAAiB,CAAA"}
1
+ {"version":3,"file":"actualNameHandler.d.ts","sourceRoot":"","sources":["../../../src/plugins/docgen-handlers/actualNameHandler.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,OAAO,EAA6B,MAAM,cAAc,CAAA;AAKtE,QAAA,MAAM,iBAAiB,EAAE,OA4CxB,CAAA;AAED,eAAe,iBAAiB,CAAA"}
@@ -1,6 +1,7 @@
1
1
  import { utils } from "react-docgen";
2
2
  const { getNameOrValue, isReactForwardRefCall } = utils;
3
3
  const actualNameHandler = function actualNameHandler2(documentation, componentDefinition) {
4
+ documentation.set("definedInFile", componentDefinition.hub.file.opts.filename);
4
5
  if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has("id")) {
5
6
  documentation.set(
6
7
  "actualName",
@@ -0,0 +1,7 @@
1
+ export declare class ReactDocgenResolveError extends Error {
2
+ readonly code = "MODULE_NOT_FOUND";
3
+ constructor(filename: string);
4
+ }
5
+ export declare const RESOLVE_EXTENSIONS: string[];
6
+ export declare function defaultLookupModule(filename: string, basedir: string): string;
7
+ //# sourceMappingURL=docgen-resolver.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"docgen-resolver.d.ts","sourceRoot":"","sources":["../../src/plugins/docgen-resolver.ts"],"names":[],"mappings":"AAQA,qBAAa,uBAAwB,SAAQ,KAAK;IAEhD,QAAQ,CAAC,IAAI,sBAAqB;gBAEtB,QAAQ,EAAE,MAAM;CAG7B;AASD,eAAO,MAAM,kBAAkB,UAa9B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAsC7E"}
@@ -0,0 +1,59 @@
1
+ import { extname } from "node:path";
2
+ import resolve from "resolve";
3
+ class ReactDocgenResolveError extends Error {
4
+ // the magic string that react-docgen uses to check if a module is ignored
5
+ code = "MODULE_NOT_FOUND";
6
+ constructor(filename) {
7
+ super(`'${filename}' was ignored by react-docgen.`);
8
+ }
9
+ }
10
+ const RESOLVE_EXTENSIONS = [
11
+ ".js",
12
+ ".cts",
13
+ ".mts",
14
+ ".ctsx",
15
+ ".mtsx",
16
+ ".ts",
17
+ ".tsx",
18
+ ".mjs",
19
+ ".cjs",
20
+ ".mts",
21
+ ".cts",
22
+ ".jsx"
23
+ ];
24
+ function defaultLookupModule(filename, basedir) {
25
+ const resolveOptions = {
26
+ basedir,
27
+ extensions: RESOLVE_EXTENSIONS,
28
+ // we do not need to check core modules as we cannot import them anyway
29
+ includeCoreModules: false
30
+ };
31
+ try {
32
+ return resolve.sync(filename, resolveOptions);
33
+ } catch (error) {
34
+ const ext = extname(filename);
35
+ let newFilename;
36
+ switch (ext) {
37
+ case ".js":
38
+ case ".mjs":
39
+ case ".cjs":
40
+ newFilename = `${filename.slice(0, -2)}ts`;
41
+ break;
42
+ case ".jsx":
43
+ newFilename = `${filename.slice(0, -3)}tsx`;
44
+ break;
45
+ default:
46
+ throw error;
47
+ }
48
+ return resolve.sync(newFilename, {
49
+ ...resolveOptions,
50
+ // we already know that there is an extension at this point, so no need to check other extensions
51
+ extensions: []
52
+ });
53
+ }
54
+ }
55
+ export {
56
+ RESOLVE_EXTENSIONS,
57
+ ReactDocgenResolveError,
58
+ defaultLookupModule
59
+ };
@@ -1,8 +1,10 @@
1
+ import * as TsconfigPaths from 'tsconfig-paths';
1
2
  import type { PluginOption } from 'vite';
2
3
  type Options = {
3
4
  include?: string | RegExp | (string | RegExp)[];
4
5
  exclude?: string | RegExp | (string | RegExp)[];
5
6
  };
6
- export declare function reactDocgen({ include, exclude, }?: Options): PluginOption;
7
+ export declare function reactDocgen({ include, exclude, }?: Options): Promise<PluginOption>;
8
+ export declare function getReactDocgenImporter(matchPath: TsconfigPaths.MatchPath | undefined): import("react-docgen").Importer;
7
9
  export {};
8
10
  //# sourceMappingURL=react-docgen.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"react-docgen.d.ts","sourceRoot":"","sources":["../../src/plugins/react-docgen.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAYxC,KAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAChD,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAA0B,EAC1B,OAA8B,GAC/B,GAAE,OAAY,GAAG,YAAY,CA2C7B"}
1
+ {"version":3,"file":"react-docgen.d.ts","sourceRoot":"","sources":["../../src/plugins/react-docgen.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,aAAa,MAAM,gBAAgB,CAAA;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAgBxC,KAAK,OAAO,GAAG;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAChD,CAAA;AAED,wBAAsB,WAAW,CAAC,EAChC,OAA8B,EAC9B,OAA8B,GAC/B,GAAE,OAAY,GAAG,OAAO,CAAC,YAAY,CAAC,CAuDtC;AAED,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,aAAa,CAAC,SAAS,GAAG,SAAS,mCA+B/C"}
@@ -1,50 +1,67 @@
1
- import path from "path";
1
+ import { existsSync } from "node:fs";
2
+ import { relative, sep } from "node:path";
2
3
  import { createFilter } from "@rollup/pluginutils";
4
+ import { getProjectRoot } from "@storybook/core-common";
5
+ import * as find from "empathic/find";
3
6
  import MagicString from "magic-string";
4
7
  import {
5
8
  ERROR_CODES,
6
- parse,
7
9
  builtinHandlers as docgenHandlers,
8
10
  builtinResolvers as docgenResolver,
9
- builtinImporters as docgenImporters
11
+ makeFsImporter,
12
+ parse
10
13
  } from "react-docgen";
14
+ import * as TsconfigPaths from "tsconfig-paths";
11
15
  import actualNameHandler from "./docgen-handlers/actualNameHandler.js";
16
+ import {
17
+ RESOLVE_EXTENSIONS,
18
+ ReactDocgenResolveError,
19
+ defaultLookupModule
20
+ } from "./docgen-resolver.js";
12
21
  const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
13
22
  const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
14
- const defaultImporter = docgenImporters.fsImporter;
15
23
  const handlers = [...defaultHandlers, actualNameHandler];
16
- function reactDocgen({
17
- include = /\.(tsx?|jsx?)$/,
24
+ async function reactDocgen({
25
+ include = /\.(mjs|tsx?|jsx?)$/,
18
26
  exclude = [/node_modules\/.*/]
19
27
  } = {}) {
20
28
  const cwd = process.cwd();
21
29
  const filter = createFilter(include, exclude);
30
+ const tsconfigPath = find.up("tsconfig.json", { cwd, last: getProjectRoot() });
31
+ const tsconfig = TsconfigPaths.loadConfig(tsconfigPath);
32
+ let matchPath;
33
+ if (tsconfig.resultType === "success") {
34
+ matchPath = TsconfigPaths.createMatchPath(
35
+ tsconfig.absoluteBaseUrl,
36
+ tsconfig.paths,
37
+ ["browser", "module", "main"]
38
+ );
39
+ }
22
40
  return {
23
41
  name: "storybook:react-docgen-plugin",
24
42
  enforce: "pre",
25
43
  async transform(src, id) {
26
- const relPath = path.relative(cwd, id);
27
- if (!filter(relPath)) {
44
+ if (!filter(relative(cwd, id))) {
28
45
  return;
29
46
  }
30
47
  try {
31
48
  const docgenResults = parse(src, {
32
49
  resolver: defaultResolver,
33
50
  handlers,
34
- importer: defaultImporter,
51
+ importer: getReactDocgenImporter(matchPath),
35
52
  filename: id
36
53
  });
37
54
  const s = new MagicString(src);
38
55
  docgenResults.forEach((info) => {
39
- const { actualName, ...docgenInfo } = info;
40
- if (actualName) {
56
+ const { actualName, definedInFile, ...docgenInfo } = info;
57
+ if (actualName && definedInFile == id) {
41
58
  const docNode = JSON.stringify(docgenInfo);
42
59
  s.append(`;${actualName}.__docgenInfo=${docNode}`);
43
60
  }
44
61
  });
45
62
  return {
46
63
  code: s.toString(),
47
- map: s.generateMap()
64
+ map: s.generateMap({ hires: true, source: id })
48
65
  };
49
66
  } catch (e) {
50
67
  if (e.code === ERROR_CODES.MISSING_DEFINITION) {
@@ -55,6 +72,35 @@ function reactDocgen({
55
72
  }
56
73
  };
57
74
  }
75
+ function getReactDocgenImporter(matchPath) {
76
+ return makeFsImporter((filename, basedir) => {
77
+ const mappedFilenameByPaths = (() => {
78
+ if (matchPath) {
79
+ const match = matchPath(filename);
80
+ return match || filename;
81
+ } else {
82
+ return filename;
83
+ }
84
+ })();
85
+ const result = defaultLookupModule(mappedFilenameByPaths, basedir);
86
+ if (result.includes(`${sep}react-native${sep}index.js`)) {
87
+ const replaced = result.replace(
88
+ `${sep}react-native${sep}index.js`,
89
+ `${sep}react-native-web${sep}dist${sep}index.js`
90
+ );
91
+ if (existsSync(replaced)) {
92
+ if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
93
+ return replaced;
94
+ }
95
+ }
96
+ }
97
+ if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
98
+ return result;
99
+ }
100
+ throw new ReactDocgenResolveError(filename);
101
+ });
102
+ }
58
103
  export {
104
+ getReactDocgenImporter,
59
105
  reactDocgen
60
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook-framework-cedarjs",
3
- "version": "1.0.1-next.0+5d18bf5dc",
3
+ "version": "1.1.0-rc.33",
4
4
  "description": "Storybook for CedarJS",
5
5
  "keywords": [
6
6
  "Storybook",
@@ -52,12 +52,13 @@
52
52
  "test:watch": "vitest watch"
53
53
  },
54
54
  "dependencies": {
55
- "@cedarjs/testing": "1.0.1-next.0+5d18bf5dc",
55
+ "@cedarjs/testing": "1.1.0-rc.33",
56
56
  "@joshwooding/vite-plugin-react-docgen-typescript": "0.6.2",
57
57
  "@rollup/pluginutils": "5.1.4",
58
58
  "@storybook/addon-essentials": "7.6.20",
59
59
  "@storybook/builder-vite": "7.6.20",
60
60
  "@storybook/react": "7.6.20",
61
+ "empathic": "2.0.0",
61
62
  "magic-string": "0.30.18",
62
63
  "react-docgen": "7.0.3",
63
64
  "unplugin-auto-import": "19.3.0",
@@ -72,8 +73,8 @@
72
73
  "vitest": "3.2.4"
73
74
  },
74
75
  "peerDependencies": {
75
- "@cedarjs/project-config": "1.0.0",
76
- "@cedarjs/router": "1.0.0",
76
+ "@cedarjs/project-config": "1.1.0-rc.33",
77
+ "@cedarjs/router": "1.1.0-rc.33",
77
78
  "react": "18.3.1",
78
79
  "react-dom": "18.3.1",
79
80
  "storybook": "7.6.20"
@@ -91,5 +92,5 @@
91
92
  ],
92
93
  "platform": "node"
93
94
  },
94
- "gitHead": "5d18bf5dc354ad0d1446e8cc45fcad3d08cad5e7"
95
+ "gitHead": "86cce410c6f5611663ebcdb11df912f35d0b17fb"
95
96
  }