@cfp-studio/plugin-react 17.3.0 → 17.3.1

package/README.md

@@ -3,6 +3,7 @@
 React 框架的 CFP Studio 插件，支持 React 组件/Story 静态分析、属性/类型提取、预览渲染、CSF/Storybook 兼容等。
 
 ## 特性
+
 - 自动检测并适配 React 16/17/18+ 项目
 - 支持 React 组件/Story 的批量静态分析与属性/类型提取
 - 兼容 CSF/Storybook 规范，支持 args/参数提取
@@ -10,6 +11,7 @@ React 框架的 CFP Studio 插件，支持 React 组件/Story 静态分析、属
 - 内置丰富的 E2E/单元测试用例，覆盖多种工程模板
 
 ## 架构与工作原理
+
 - 通过 `FrameworkPluginFactory` 实现插件注册与兼容性检测
 - 使用 `@cfp-studio/analyzer-react` 进行 TS/JSX 类型分析
 - `react-js-imports-plugin` 自动为 .js 文件注入 React 导入，兼容 React 17+ 新写法
@@ -17,6 +19,7 @@ React 框架的 CFP Studio 插件，支持 React 组件/Story 静态分析、属
 - 支持多种 React 工程模板（apps/ 下有多种测试工程）
 
 ## 主要 API/模块
+
 - `src/index.ts`：插件主入口，注册工厂与分析器
 - `src/react-js-imports-plugin.ts`：自动注入 React 导入
 - `preview/index.tsx`：前端渲染入口
@@ -24,19 +27,23 @@ React 框架的 CFP Studio 插件，支持 React 组件/Story 静态分析、属
 - `tests/`、`apps/`：丰富的测试与模板
 
 ## 用法示例
+
 ```ts
-import { reactFrameworkPlugin } from '@cfp-studio/plugin-react';
+import { reactFrameworkPlugin } from "@cfp-studio/plugin-react";
 // 传入 core/Previewer 或 createChromelessWorkspace 等集成
 ```
 
 ## 依赖
+
 - `react`、`@cfp-studio/*`、`typescript`、`vite`、`esbuild-plugin-polyfill-node`
 - 测试：`vitest`、`@playwright/test`
 
 ## 构建
+
 ```sh
 pnpm build
 ```
 
 ## 许可证
+
 MIT

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 /// <reference types="node" />
-import { Reader } from "@cfp-studio/vfs";
-import * as fs$1 from "node:fs";
 import * as url$1 from "node:url";
 import { URL as URL$1 } from "node:url";
+import * as fs$1 from "node:fs";
+import { Reader } from "@cfp-studio/vfs";
 import { Analyzer } from "@cfp-studio/analyzer-api";
 import * as http from "node:http";
 import { Agent, ClientRequest, ClientRequestArgs, IncomingMessage, OutgoingHttpHeaders, Server } from "node:http";
@@ -15,6 +15,8 @@ import * as stream from "node:stream";
 import { Duplex, DuplexOptions } from "node:stream";
 import { SecureContextOptions } from "node:tls";
 import { ZlibOptions } from "node:zlib";
+import Lightningcss from "lightningcss";
+import DartSass from "sass";
 import SassEmbedded from "sass-embedded";
 import Less from "less";
 import Stylus from "stylus";
@@ -34,7 +36,7 @@ type FrameworkPluginInfo = {
  * @returns 实现了 Api 接口的 AxiosApi 实例
  */
 //#endregion
-//#region ../../../../node_modules/.pnpm/@types+estree@1.0.8/node_modules/@types/estree/index.d.ts
+//#region ../../../../node_modules/.pnpm/@types+estree@1.0.9/node_modules/@types/estree/index.d.ts
 // This definition file follows a somewhat unusual format. ESTree allows
 // runtime type checks based on the `type` parameter. In order to explain this
 // to typescript we want to use discriminated union types:
@@ -284,7 +286,7 @@ interface PrivateIdentifier extends BaseNode {
 }
 interface Property extends BaseNode {
   type: "Property";
-  key: Expression | PrivateIdentifier;
+  key: Expression;
   value: Expression | Pattern; // Could be an AssignmentProperty
   kind: "init" | "get" | "set";
   method: boolean;
@@ -558,7 +560,7 @@ interface AwaitExpression extends BaseExpression {
   argument: Expression;
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/rollup@4.52.0/node_modules/rollup/dist/rollup.d.ts
+//#region ../../../../node_modules/.pnpm/rollup@4.65.0/node_modules/rollup/dist/rollup.d.ts
 declare module 'estree' {
   export interface Decorator extends BaseNode {
     type: 'Decorator';
@@ -638,11 +640,11 @@ type DecodedSourceMapOrMissing = {
   missing?: false | undefined;
 });
 interface SourceMap$1 {
-  file: string;
+  file?: string | undefined;
   mappings: string;
   names: string[];
   sources: string[];
-  sourcesContent?: string[] | undefined;
+  sourcesContent?: (string | null)[] | undefined;
   version: number;
   debugId?: string | undefined;
   toString(): string;
@@ -664,7 +666,8 @@ interface SourceDescription extends Partial<PartialNull<ModuleOptions>> {
 }
 interface TransformModuleJSON {
   ast?: ProgramNode | undefined;
-  code: string; // note if plugins use new this.cache to opt-out auto transform cache
+  code: string;
+  safeVariableNames: Record<string, string> | null; // note if plugins use new this.cache to opt-out auto transform cache
   customTransformCache: boolean;
   originalCode: string;
   originalSourcemap: ExistingDecodedSourceMap | null;
@@ -672,6 +675,7 @@ interface TransformModuleJSON {
   transformDependencies: string[];
 }
 interface ModuleJSON extends TransformModuleJSON, ModuleOptions {
+  safeVariableNames: Record<string, string> | null;
   ast: ProgramNode;
   dependencies: string[];
   id: string;
@@ -727,6 +731,7 @@ interface ModuleInfo extends ModuleOptions {
   dynamicallyImportedIds: readonly string[];
   exportedBindings: Record<string, string[]> | null;
   exports: string[] | null;
+  safeVariableNames: Record<string, string> | null;
   hasDefaultExport: boolean | null;
   id: string;
   implicitlyLoadedAfterOneOf: readonly string[];
@@ -774,6 +779,7 @@ interface PluginContext extends MinimalPluginContext$1 {
   } & Partial<PartialNull<ModuleOptions>>) => Promise<ModuleInfo>;
   parse: ParseAst;
   resolve: (source: string, importer?: string, options?: {
+    importerAttributes?: Record<string, string>;
     attributes?: Record<string, string>;
     custom?: CustomPluginOptions;
     isEntry?: boolean;
@@ -810,10 +816,12 @@ type ResolveIdResult = string | NullValue | false | PartialResolvedId;
 type ResolveIdHook = (this: PluginContext, source: string, importer: string | undefined, options: {
   attributes: Record<string, string>;
   custom?: CustomPluginOptions;
+  importerAttributes?: Record<string, string> | undefined;
   isEntry: boolean;
 }) => ResolveIdResult;
 type ShouldTransformCachedModuleHook = (this: PluginContext, options: {
   ast: ProgramNode;
+  attributes: Record<string, string>;
   code: string;
   id: string;
   meta: CustomPluginOptions;
@@ -824,7 +832,12 @@ type ShouldTransformCachedModuleHook = (this: PluginContext, options: {
 type IsExternal = (source: string, importer: string | undefined, isResolved: boolean) => boolean;
 type HasModuleSideEffects = (id: string, external: boolean) => boolean;
 type LoadResult = SourceDescription | string | NullValue;
-type LoadHook = (this: PluginContext, id: string) => LoadResult;
+type LoadHook = (this: PluginContext, id: string, // temporarily marked as optional for better Vite type-compatibility
+options?: {
+  // unused, temporarily added for better Vite type-compatibility
+  ssr?: boolean | undefined; // temporarily marked as optional for better Vite type-compatibility
+  attributes?: Record<string, string>;
+} | undefined) => LoadResult;
 interface TransformPluginContext extends PluginContext {
   debug: LoggingFunctionWithPosition;
   error: (error: RollupError | string, pos?: number | {
@@ -836,7 +849,12 @@ interface TransformPluginContext extends PluginContext {
   warn: LoggingFunctionWithPosition;
 }
 type TransformResult$2 = string | NullValue | Partial<SourceDescription>;
-type TransformHook = (this: TransformPluginContext, code: string, id: string) => TransformResult$2;
+type TransformHook = (this: TransformPluginContext, code: string, id: string, // temporarily marked as optional for better Vite type-compatibility
+options?: {
+  // unused, temporarily added for better Vite type-compatibility
+  ssr?: boolean | undefined; // temporarily marked as optional for better Vite type-compatibility
+  attributes?: Record<string, string>;
+} | undefined) => TransformResult$2;
 type ModuleParsedHook = (this: PluginContext, info: ModuleInfo) => void;
 type RenderChunkHook = (this: PluginContext, code: string, chunk: RenderedChunk, options: NormalizedOutputOptions, meta: {
   chunks: Record<string, RenderedChunk>;
@@ -846,13 +864,16 @@ type RenderChunkHook = (this: PluginContext, code: string, chunk: RenderedChunk,
 } | string | NullValue;
 type ResolveDynamicImportHook = (this: PluginContext, specifier: string | AstNode, importer: string, options: {
   attributes: Record<string, string>;
+  importerAttributes: Record<string, string>;
 }) => ResolveIdResult;
 type ResolveImportMetaHook = (this: PluginContext, property: string | null, options: {
+  attributes: Record<string, string>;
   chunkId: string;
   format: InternalModuleFormat;
   moduleId: string;
 }) => string | NullValue;
 type ResolveFileUrlHook = (this: PluginContext, options: {
+  attributes: Record<string, string>;
   chunkId: string;
   fileName: string;
   format: InternalModuleFormat;
@@ -903,6 +924,7 @@ interface FunctionPluginHooks {
     chunk: PreRenderedChunkWithFileName;
     targetChunk: PreRenderedChunkWithFileName | null;
     getTargetChunkImports: () => DynamicImportTargetChunk[] | null;
+    targetModuleAttributes: Record<string, string>;
   }) => {
     left: string;
     right: string;
@@ -1318,16 +1340,14 @@ interface AwaitingEventEmitter<T extends Record<string, (...parameters: any) =>
   off<K extends keyof T>(event: K, listener: AwaitedEventListener<T, K>): this;
   /**
    * Registers an event listener that will be awaited before Rollup continues.
-   * All listeners will be awaited in parallel while rejections are tracked via
-   * Promise.all.
+   * All listeners are invoked and awaited in parallel. Rollup waits until all
+   * of them have settled and then throws the first rejection, if any.
    */
   on<K extends keyof T>(event: K, listener: AwaitedEventListener<T, K>): this;
   /**
-   * Registers an event listener that will be awaited before Rollup continues.
-   * All listeners will be awaited in parallel while rejections are tracked via
-   * Promise.all.
-   * Listeners are removed automatically when removeListenersForCurrentRun is
-   * called, which happens automatically after each run.
+   * Registers an event listener like `on`. Listeners are removed automatically
+   * when removeListenersForCurrentRun is called, which happens right before each
+   * rebuild, after the changes that triggered it were announced.
    */
   onCurrentRun<K extends keyof T>(event: K, listener: (...parameters: Parameters<T[K]>) => Promise<ReturnType<T[K]>>): this;
   removeAllListeners(): this;
@@ -1428,7 +1448,7 @@ interface RollupFileStats {
   birthtime: Date;
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/hmrPayload.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/hmrPayload.d.ts
 type HotPayload = ConnectedPayload | PingPayload | UpdatePayload | FullReloadPayload | CustomPayload | ErrorPayload | PrunePayload;
 interface ConnectedPayload {
   type: 'connected';
@@ -1487,7 +1507,7 @@ interface ErrorPayload {
   };
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/customEvent.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/customEvent.d.ts
 interface CustomEventMap {
   'vite:beforeUpdate': UpdatePayload;
   'vite:afterUpdate': UpdatePayload;
@@ -1518,7 +1538,7 @@ interface InvalidatePayload {
  */
 type InferCustomEventPayload<T extends string> = T extends keyof CustomEventMap ? CustomEventMap[T] : any;
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf.d.ts
 interface FetchFunctionOptions {
   cached?: boolean;
   startOffset?: number;
@@ -2181,12 +2201,12 @@ declare global {
   interface URL {}
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/internal/lightningcssOptions.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/internal/lightningcssOptions.d.ts
 /* eslint-enable @typescript-eslint/ban-ts-comment */
 type LightningCSSOptions = Omit<Lightningcss.BundleAsyncOptions<Lightningcss.CustomAtRules>, 'filename' | 'resolver' | 'minify' | 'sourceMap' | 'analyzeDependencies' // properties not overridden by Vite, but does not make sense to set by end users
 | 'inputSourceMap' | 'projectRoot'>;
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/internal/cssPreprocessorOptions.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/internal/cssPreprocessorOptions.d.ts
 /* eslint-enable @typescript-eslint/ban-ts-comment */
 // https://github.com/type-challenges/type-challenges/issues/29285
 type IsAny<T> = boolean extends (T extends never ? true : false) ? true : false;
@@ -2209,7 +2229,7 @@ declare global {
   interface HTMLLinkElement {}
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/metadata.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/types/metadata.d.ts
 interface ChunkMetadata {
   importedAssets: Set<string>;
   importedCss: Set<string>;
@@ -2242,7 +2262,7 @@ declare module 'rollup' {
   }
 }
 //#endregion
-//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/dist/node/index.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.1_13c54df9746541450cb8a36e10ae9cdd/node_modules/vite/dist/node/index.d.ts
 interface Alias {
   find: string | RegExp;
   replacement: string;
@@ -5757,9 +5777,6 @@ interface FrameworkPlugin extends Analyzer {
  */
 //#endregion
 //#region src/index.d.ts
-/**
- * 定义一个名为 reactFrameworkPlugin 的框架插件工厂对象
- */
 declare const reactFrameworkPlugin: FrameworkPluginFactory;
 /**
  * 导出默认的 reactFrameworkPlugin 对象

package/dist/index.mjs

@@ -1 +1 @@
-import{createAnalyzer as e}from"@cfp-studio/analyzer-api/analyzer";import{createFileSystemReader as t,createStackedReader as n}from"@cfp-studio/vfs";import r from"node:fs";import i from"node:path";import a from"typescript";import o from"node:url";import{decodePreviewableId as s,defineSpecialTypes as c,generatePreviewableId as l}from"@cfp-studio/analyzer-api";import{parseSerializableValue as u}from"@cfp-studio/serializable-values";import{extractArgs as d,extractCsf3Stories as f,extractStoriesInfo as p,resolvePreviewableId as m}from"@cfp-studio/storybook-helpers";import{EMPTY_OBJECT_TYPE as h,NODE_TYPE as g,UNKNOWN_TYPE as _,arrayType as v,dereferenceType as y,functionType as b,helpers as x,maybeOptionalType as S,objectType as C,stripUnusedTypes as w}from"@cfp-studio/type-analyzer";import T from"@vitejs/plugin-react";import{polyfillNode as E}from"esbuild-plugin-polyfill-node";function D(e,t){for(let n of e.statements)if(a.isExpressionStatement(n)&&a.isBinaryExpression(n.expression)&&n.expression.operatorToken.kind===a.SyntaxKind.EqualsToken&&a.isPropertyAccessExpression(n.expression.left)&&a.isIdentifier(n.expression.left.expression)){if(n.expression.left.expression.text!==t)continue;if(n.expression.left.name.text===`propTypes`)return n.expression.right}else if(a.isClassDeclaration(n)&&n.name){if(n.name.text!==t)continue;for(let e of n.members)if(a.isPropertyDeclaration(e)&&e.initializer&&e.name.getText()===`propTypes`)return e.initializer}return null}function O(e,t,n,r,i){let a=t.sourceFile(n),o=null;a&&(o=D(a,r));let s=null;return s=o?A(t,o):k(e,t,i),{props:s.type,types:{...s.collected}}}function k(e,t,n){let r=n.getParameters()[0];if(!r)return{type:h,collected:{}};if(!r.valueDeclaration)return{type:_,collected:{}};let i=t.checker.getTypeOfSymbolAtLocation(r,r.valueDeclaration);try{let{type:e,collected:n}=t.resolveType(i);if([e]=y(e,n,[]),e.kind===`object`&&a.isParameter(r.valueDeclaration)&&a.isObjectBindingPattern(r.valueDeclaration.name)){let t=r.valueDeclaration.name,n=new Set,i=new Set,o=!1;for(let e of t.elements){if(e.dotDotDotToken){o=!0;break}let t=e.propertyName||e.name;if(!a.isIdentifier(t)){o=!0;break}n.add(t.text),e.initializer&&i.add(t.text)}o||(e=C(Object.fromEntries(Object.entries(e.fields).filter(([e])=>n.has(e)).map(([e,t])=>[e,S(t,i.has(e))]))))}return{type:e,collected:n}}catch(n){e.warn(`Unable to resolve props type for ${t.checker.typeToString(i)}`),e.error(n.toString())}return{type:_,collected:{}}}function A(e,t){let n=e.checker.getTypeAtLocation(t),r={},i={};for(let t of n.getProperties())r[t.name]=(()=>{if(!t.valueDeclaration)return _;let n=e.checker.getTypeAtLocation(t.valueDeclaration),r=e.resolveTypeArguments(n),a=r.types[0];return a?(i={...i,...r.collected},S(a,n.symbol.name===`Requireable`)):_})();let a=C(r);return{type:a,collected:w(i,[a])}}async function j(e,t,n,r){let o=t.sourceFile(r);if(!o)return[];let c=[];for(let e of o.statements)if(a.isExportAssignment(e)){if(a.isIdentifier(e.expression))continue;c.push([`default`,e,e.expression])}else if(a.isVariableStatement(e))for(let t of e.declarationList.declarations)!a.isIdentifier(t.name)||!t.initializer||c.push([t.name.text,e,t.initializer]);else if(a.isFunctionDeclaration(e)){let t=!!e.modifiers?.find(e=>e.kind===a.SyntaxKind.ExportKeyword)&&!!e.modifiers?.find(e=>e.kind===a.SyntaxKind.DefaultKeyword),n=e.name?.text;(t||n)&&c.push([n||`default`,e,e])}else a.isClassDeclaration(e)&&e.name&&c.push([e.name.text,e,e]);let m=p(o);e.debug(`**storiresInfo: ${m}`);let h=[],g=d(o),v=x.extractExportedNames(o);async function y(i,a,o){if(o===`default`&&m)return null;let s=g[o],c=o===`default`||!!v[o],l=N(t.checker,a);if(m&&c&&(s||l?.parameters.length===0)){let r=M(e,t,n,m.component);return{...i,analyze:async()=>({args:s?{sourcePosition:{start:s.getStart(),end:s.getEnd()},value:await u(s)}:null}),associatedComponent:r}}return l?{...i,exported:c,analyze:async()=>O(e,t,r,o,l)}:null}for(let[e,t,a]of c){let o=await y({id:l({filePath:i.relative(n,r),name:e}),sourcePosition:{start:t.getStart(),end:t.getEnd()}},a,e);o&&h.push(o)}return[...h,...await f(n,t,o,async r=>{let{filePath:a}=s(r),o=(await j(e,t,n,i.join(n,a))).find(e=>e.id===r);return!o||!(`exported`in o)?{props:_,types:{}}:o.analyze()})]}function M(e,t,n,r){let a=m(n,t.checker,r);return r&&a?{id:a,analyze:async()=>{let o=N(t.checker,r);if(!o)return{props:_,types:{}};let{filePath:c,name:l}=s(a);return O(e,t,i.join(n,c),l,o)}}:null}function N(e,t){let n=e.getTypeAtLocation(t);if(n.flags===a.TypeFlags.Any&&a.isCallExpression(t)&&a.isPropertyAccessExpression(t.expression)&&a.isIdentifier(t.expression.name)&&t.expression.name.text===`bind`){let r=e.getSymbolAtLocation(t.expression.expression);r?.valueDeclaration&&a.isVariableDeclaration(r.valueDeclaration)&&r.valueDeclaration.initializer&&(n=e.getTypeAtLocation(r.valueDeclaration.initializer))}for(let e of n.getCallSignatures())if(P(e.getReturnType()))return e;if(n.symbol){let r=e.getTypeOfSymbolAtLocation(n.symbol,t);for(let e of r.getConstructSignatures())if(e.getReturnType().getProperty(`render`))return e}return null}function P(e){return!!I(e)}const F=new Set([`Element`,`ReactElement`]);function I(e){if(e.isUnion()){for(let t of e.types)if(I(t))return!0}return F.has(e.symbol?.getEscapedName().toString())}const L=c({Component:g,ComponentClass:b(g),FunctionComponent:b(g),ReactElement:g,ReactNode:g,ReactNodeArray:v(g),ReactPortal:g}),R=e({typeAnalyzerOptions:({reader:e,rootDir:s})=>{let c=o.fileURLToPath(new URL(`.`,import.meta.url)),l=i.join(c,`..`,`types`),u=i.join(c,`..`,`node_modules`),d=r.existsSync(l)?l:u;return{reader:n([e,t({mapping:{from:d,to:i.join(s,`node_modules`)},watch:!1}),...d===l?[t({mapping:{from:l,to:i.join(s,`node_modules`,`@types`)},watch:!1})]:[]]),specialTypes:L,tsCompilerOptions:{jsx:a.JsxEmit.ReactJSX,jsxImportSource:`react`}}},crawlFile:({logger:e,resolver:t,rootDir:n,absoluteFilePath:r})=>j(e,t,n,r)}),z=/import (\* as )?React[ ,]/;function B(){return{name:`previewjs:react-js-imports`,async transform(e,t){return t.includes(`node_modules`)||i.extname(t)!==`.js`||z.test(e)?e:`import React from 'react';${e}`}}}const V={info:{apiVersion:5,name:`@cfp-studio/plugin-react`},isCompatible:async e=>{let t=await e.react?.readInstalledVersion();if(!t)return!1;let[n,r]=t.split(`.`).map(e=>Number.parseInt(e));return Number.isNaN(n)||Number.isNaN(r)?!1:n>=17||n===16&&r>=14},async create({rootDir:e,reader:t,logger:n,dependencies:r}){let a=o.fileURLToPath(new URL(`.`,import.meta.url)),s=R({rootDir:e,reader:t,logger:n});return{defaultWrapperPath:`__previewjs__/Wrapper.tsx`,previewDirPath:i.join(a,`..`,`preview`),...s,viteConfig:e=>{let t=e.find(e=>e.name.startsWith(`vite:react-`));return{optimizeDeps:{esbuildOptions:{plugins:r.next?[E()]:[]}},resolve:{alias:{"react-native":`react-native-web`}},plugins:[B(),...e,...t?[]:[T()],{name:`previewjs:update-react-import`,async transform(e,t){if(!t.endsWith(`__previewjs_internal__/renderer/index.tsx`))return;let n=Number.parseInt(await r.react?.readInstalledVersion()||`0`);return e.replace(/__PREVIEWJS_PLUGIN_REACT_IMPORT_PATH__/g,n>=18?`./render-18`:`./render-16`)}}]}}}}};export{V as default};
+import e from"node:path";import t from"node:url";import n from"@vitejs/plugin-react";import{polyfillNode as r}from"esbuild-plugin-polyfill-node";import i from"node:fs";import{createAnalyzer as a}from"@cfp-studio/analyzer-api/analyzer";import{createFileSystemReader as o,createStackedReader as s}from"@cfp-studio/vfs";import c from"typescript";import{decodePreviewableId as l,defineSpecialTypes as u,generatePreviewableId as d}from"@cfp-studio/analyzer-api";import{parseSerializableValue as f}from"@cfp-studio/serializable-values";import{extractArgs as p,extractCsf3Stories as m,extractStoriesInfo as h,resolvePreviewableId as g}from"@cfp-studio/storybook-helpers";import{EMPTY_OBJECT_TYPE as _,NODE_TYPE as v,UNKNOWN_TYPE as y,arrayType as b,dereferenceType as x,functionType as S,helpers as C,maybeOptionalType as w,objectType as T,stripUnusedTypes as E}from"@cfp-studio/type-analyzer";function D(e,t){for(let n of e.statements)if(c.isExpressionStatement(n)&&c.isBinaryExpression(n.expression)&&n.expression.operatorToken.kind===c.SyntaxKind.EqualsToken&&c.isPropertyAccessExpression(n.expression.left)&&c.isIdentifier(n.expression.left.expression)){if(n.expression.left.expression.text!==t)continue;if(n.expression.left.name.text===`propTypes`)return n.expression.right}else if(c.isClassDeclaration(n)&&n.name){if(n.name.text!==t)continue;for(let e of n.members)if(c.isPropertyDeclaration(e)&&e.initializer&&e.name.getText()===`propTypes`)return e.initializer}return null}function O(e,t,n,r,i){let a=t.sourceFile(n),o=null;a&&(o=D(a,r));let s=null;return s=o?A(t,o):k(e,t,i),{props:s.type,types:{...s.collected}}}function k(e,t,n){let r=n.getParameters()[0];if(!r)return{type:_,collected:{}};if(!r.valueDeclaration)return{type:y,collected:{}};let i=t.checker.getTypeOfSymbolAtLocation(r,r.valueDeclaration);try{let{type:e,collected:n}=t.resolveType(i);if([e]=x(e,n,[]),e.kind===`object`&&c.isParameter(r.valueDeclaration)&&c.isObjectBindingPattern(r.valueDeclaration.name)){let t=r.valueDeclaration.name,n=new Set,i=new Set,a=!1;for(let e of t.elements){if(e.dotDotDotToken){a=!0;break}let t=e.propertyName||e.name;if(!c.isIdentifier(t)){a=!0;break}n.add(t.text),e.initializer&&i.add(t.text)}a||(e=T(Object.fromEntries(Object.entries(e.fields).filter(([e])=>n.has(e)).map(([e,t])=>[e,w(t,i.has(e))]))))}return{type:e,collected:n}}catch(n){e.warn(`Unable to resolve props type for ${t.checker.typeToString(i)}`),e.error(n.toString())}return{type:y,collected:{}}}function A(e,t){let n=e.checker.getTypeAtLocation(t),r={},i={};for(let t of n.getProperties())r[t.name]=(()=>{if(!t.valueDeclaration)return y;let n=e.checker.getTypeAtLocation(t.valueDeclaration),r=e.resolveTypeArguments(n),a=r.types[0];return a?(i={...i,...r.collected},w(a,n.symbol.name===`Requireable`)):y})();let a=T(r);return{type:a,collected:E(i,[a])}}async function j(t,n,r,i){let a=n.sourceFile(i);if(!a)return[];let o=[];for(let e of a.statements)if(c.isExportAssignment(e)){if(c.isIdentifier(e.expression))continue;o.push([`default`,e,e.expression])}else if(c.isVariableStatement(e))for(let t of e.declarationList.declarations)!c.isIdentifier(t.name)||!t.initializer||o.push([t.name.text,e,t.initializer]);else if(c.isFunctionDeclaration(e)){let t=!!e.modifiers?.find(e=>e.kind===c.SyntaxKind.ExportKeyword)&&!!e.modifiers?.find(e=>e.kind===c.SyntaxKind.DefaultKeyword),n=e.name?.text;(t||n)&&o.push([n||`default`,e,e])}else c.isClassDeclaration(e)&&e.name&&o.push([e.name.text,e,e]);let s=h(a);t.debug(`**storiresInfo: ${s}`);let u=[],g=p(a),_=C.extractExportedNames(a);async function v(e,a,o){if(o===`default`&&s)return null;let c=g[o],l=o===`default`||!!_[o],u=N(n.checker,a);if(s&&l&&(c||u?.parameters.length===0)){let i=M(t,n,r,s.component);return{...e,analyze:async()=>({args:c?{sourcePosition:{start:c.getStart(),end:c.getEnd()},value:await f(c)}:null}),associatedComponent:i}}return u?{...e,exported:l,analyze:async()=>O(t,n,i,o,u)}:null}for(let[t,n,a]of o){let o=await v({id:d({filePath:e.relative(r,i),name:t}),sourcePosition:{start:n.getStart(),end:n.getEnd()}},a,t);o&&u.push(o)}return[...u,...await m(r,n,a,async i=>{let{filePath:a}=l(i),o=(await j(t,n,r,e.join(r,a))).find(e=>e.id===i);return!o||!(`exported`in o)?{props:y,types:{}}:o.analyze()})]}function M(t,n,r,i){let a=g(r,n.checker,i);return i&&a?{id:a,analyze:async()=>{let o=N(n.checker,i);if(!o)return{props:y,types:{}};let{filePath:s,name:c}=l(a);return O(t,n,e.join(r,s),c,o)}}:null}function N(e,t){let n=e.getTypeAtLocation(t);if(n.flags===c.TypeFlags.Any&&c.isCallExpression(t)&&c.isPropertyAccessExpression(t.expression)&&c.isIdentifier(t.expression.name)&&t.expression.name.text===`bind`){let r=e.getSymbolAtLocation(t.expression.expression);r?.valueDeclaration&&c.isVariableDeclaration(r.valueDeclaration)&&r.valueDeclaration.initializer&&(n=e.getTypeAtLocation(r.valueDeclaration.initializer))}for(let e of n.getCallSignatures())if(P(e.getReturnType()))return e;if(n.symbol){let r=e.getTypeOfSymbolAtLocation(n.symbol,t);for(let e of r.getConstructSignatures())if(e.getReturnType().getProperty(`render`))return e}return null}function P(e){return!!I(e)}const F=new Set([`Element`,`ReactElement`]);function I(e){if(e.isUnion()){for(let t of e.types)if(I(t))return!0}return F.has(e.symbol?.getEscapedName().toString())}const L=u({Component:v,ComponentClass:S(v),FunctionComponent:S(v),ReactElement:v,ReactNode:v,ReactNodeArray:b(v),ReactPortal:v}),R=a({typeAnalyzerOptions:({reader:n,rootDir:r})=>{let a=t.fileURLToPath(new URL(`.`,import.meta.url)),l=e.join(a,`..`,`types`),u=e.join(a,`..`,`node_modules`),d=i.existsSync(l)?l:u;return{reader:s([n,o({mapping:{from:d,to:e.join(r,`node_modules`)},watch:!1}),...d===l?[o({mapping:{from:l,to:e.join(r,`node_modules`,`@types`)},watch:!1})]:[]]),specialTypes:L,tsCompilerOptions:{jsx:c.JsxEmit.ReactJSX,jsxImportSource:`react`}}},crawlFile:({logger:e,resolver:t,rootDir:n,absoluteFilePath:r})=>j(e,t,n,r)}),z={line:`data-inspector-line`,column:`data-inspector-column`,relativePath:`data-inspector-relative-path`};function B(e){return e.includes(z.relativePath)}function V(e,t){if(!e.includes(`<`)||B(e))return;let n=c.createSourceFile(t.relativePath,e,c.ScriptTarget.Latest,!0,c.ScriptKind.TSX),r=[],i=e=>{if(c.isJsxElement(e)||c.isJsxSelfClosingElement(e)){let i=c.isJsxElement(e)?e.openingElement:e,a=i.tagName.getStart(n),{line:o,character:s}=n.getLineAndCharacterOfPosition(a),l=i.tagName.getEnd(),u=` ${z.line}="${o+1}" ${z.column}="${s+1}" ${z.relativePath}="${H(t.relativePath)}"`;r.push({at:l,text:u})}c.forEachChild(e,i)};if(i(n),r.length===0)return;r.sort((e,t)=>t.at-e.at);let a=e;for(let{at:e,text:t}of r)a=a.slice(0,e)+t+a.slice(e);return a}function H(e){return e.replace(/&/g,`&amp;`).replace(/"/g,`&quot;`)}const U=/import (\* as )?React[ ,]/;function W(){return{name:`previewjs:react-js-imports`,async transform(t,n){return n.includes(`node_modules`)||e.extname(n)!==`.js`||U.test(t)?t:`import React from 'react';${t}`}}}function G(){let t=``;return{name:`previewjs:inspector-attrs`,enforce:`pre`,configResolved(e){t=e.root},transform(n,r){let i=r.split(`?`)[0]??r;if(!/\.[jt]sx$/.test(i)||i.includes(`node_modules`)||i.includes(`__previewjs__`))return;let a=V(n,{relativePath:e.relative(t,i).split(e.sep).join(`/`)});if(a!==void 0)return{code:a,map:null}}}}const K={info:{apiVersion:5,name:`@cfp-studio/plugin-react`},isCompatible:async e=>{let t=await e.react?.readInstalledVersion();if(!t)return!1;let[n,r]=t.split(`.`).map(e=>Number.parseInt(e));return Number.isNaN(n)||Number.isNaN(r)?!1:n>=17||n===16&&r>=14},async create({rootDir:i,reader:a,logger:o,dependencies:s}){let c=t.fileURLToPath(new URL(`.`,import.meta.url)),l=R({rootDir:i,reader:a,logger:o});return{defaultWrapperPath:`__previewjs__/Wrapper.tsx`,previewDirPath:e.join(c,`..`,`preview`),...l,viteConfig:e=>{let t=e.find(e=>e.name.startsWith(`vite:react-`));return{optimizeDeps:{esbuildOptions:{plugins:s.next?[r()]:[]}},resolve:{alias:{"react-native":`react-native-web`}},plugins:[G(),W(),...e,...t?[]:[n()],{name:`previewjs:update-react-import`,async transform(e,t){if(!t.endsWith(`__previewjs_internal__/renderer/index.tsx`))return;let n=Number.parseInt(await s.react?.readInstalledVersion()||`0`);return e.replace(/__PREVIEWJS_PLUGIN_REACT_IMPORT_PATH__/g,n>=18?`./render-18`:`./render-16`)}}]}}}}};export{K as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfp-studio/plugin-react",
-  "version": "17.3.0",
+  "version": "17.3.1",
   "license": "MIT",
   "files": [
     "dist",
@@ -16,10 +16,10 @@
     "esbuild-plugin-polyfill-node": "0.3.0",
     "typescript": "5.9.3",
     "@cfp-studio/analyzer-api": "0.1.13",
-    "@cfp-studio/type-analyzer": "10.1.8",
     "@cfp-studio/serializable-values": "9.0.8",
     "@cfp-studio/storybook-helpers": "6.0.2",
-    "@cfp-studio/vfs": "2.1.6"
+    "@cfp-studio/type-analyzer": "10.1.8",
+    "@cfp-studio/vfs": "2.1.7"
   },
   "devDependencies": {
     "@playwright/test": "1.64.1",
@@ -34,8 +34,8 @@
     "vite": "6.4.5",
     "vitest": "5.0.5",
     "@cfp-studio/core": "1.0.6",
-    "@cfp-studio/testing": "14.0.1",
-    "@cfp-studio/iframe": "18.2.0"
+    "@cfp-studio/iframe": "18.4.1",
+    "@cfp-studio/testing": "14.0.1"
   },
   "engines": {
     "node": ">=20"

package/preview/error-boundary.tsx

@@ -2,48 +2,42 @@ import type { ReactNode } from "react";
 import { Component } from "react";
 
 type ErrorBoundaryProps = {
-  renderId: number;
-  children: ReactNode;
+	renderId: number;
+	children: ReactNode;
 };
 
 let errorBoundaryInstance: ErrorBoundary | null = null;
 
-export async function expectErrorBoundary(
-  renderId: number,
-  shouldAbortRender: () => boolean
-) {
-  while (
-    !errorBoundaryInstance ||
-    errorBoundaryInstance.props.renderId !== renderId
-  ) {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    if (shouldAbortRender()) {
-      return null;
-    }
-  }
-  return errorBoundaryInstance;
+export async function expectErrorBoundary(renderId: number, shouldAbortRender: () => boolean) {
+	while (!errorBoundaryInstance || errorBoundaryInstance.props.renderId !== renderId) {
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		if (shouldAbortRender()) {
+			return null;
+		}
+	}
+	return errorBoundaryInstance;
 }
 
 export class ErrorBoundary extends Component<ErrorBoundaryProps> {
-  state = {
-    error: null as Error | null,
-  };
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    errorBoundaryInstance = this;
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-
-  render() {
-    if (this.state.error) {
-      return <></>;
-    }
-
-    return this.props.children;
-  }
+	state = {
+		error: null as Error | null,
+	};
+
+	constructor(props: ErrorBoundaryProps) {
+		super(props);
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		errorBoundaryInstance = this;
+	}
+
+	static getDerivedStateFromError(error: Error) {
+		return { error };
+	}
+
+	render() {
+		if (this.state.error) {
+			return <></>;
+		}
+
+		return this.props.children;
+	}
 }

package/preview/index.tsx

@@ -1,8 +1,9 @@
 import type { GetPropsFn, RendererLoader } from "@cfp-studio/iframe";
-import React from "react";
-import { ErrorBoundary, expectErrorBoundary } from "./error-boundary";
 // @ts-ignore
 import { render } from "__PREVIEWJS_PLUGIN_REACT_IMPORT_PATH__";
+import React from "react";
+
+import { ErrorBoundary, expectErrorBoundary } from "./error-boundary";
 import { rootContainer } from "./root";
 
 /**
@@ -17,78 +18,70 @@ import { rootContainer } from "./root";
  * @returns 一个对象，包含渲染函数和 JSX 工厂函数。
  */
 export const loadRenderer: RendererLoader = async ({
-  wrapperModule,
-  wrapperName,
-  previewableModule,
-  previewableName,
-  renderId,
-  shouldAbortRender,
+	wrapperModule,
+	wrapperName,
+	previewableModule,
+	previewableName,
+	renderId,
+	shouldAbortRender,
 }) => {
-  const isStoryModule = !!previewableModule.default?.component;
-  const Wrapper = wrapperModule?.[wrapperName || "Wrapper"] || React.Fragment;
-  const Previewable =
-    previewableModule[previewableName] ||
-    previewableModule.PreviewJsEval(
-      `try { return ${previewableName}; } catch { return null; }`
-    );
-  if (!Previewable) {
-    throw new Error(`No component or story named '${previewableName}'`);
-  }
-  const decorators = [
-    ...(Previewable.decorators || []),
-    ...(previewableModule.default?.decorators || []),
-  ];
-  const RenderComponent = isStoryModule
-    ? typeof Previewable === "function"
-      ? Previewable
-      : Previewable.render ||
-        Previewable.component ||
-        previewableModule.default?.render ||
-        previewableModule.default?.component ||
-        Previewable
-    : Previewable;
-  const Renderer = (props: any) => {
-    return (
-      <ErrorBoundary renderId={renderId}>
-        <Wrapper>
-          {decorators.reduce(
-            (component, decorator) => () => decorator(component),
-            () => <RenderComponent {...props} />
-          )()}
-        </Wrapper>
-      </ErrorBoundary>
-    );
-  };
-  return {
-    render: async (getProps: GetPropsFn) => {
-      if (shouldAbortRender()) {
-        return;
-      }
-      await render(
-        <Renderer
-          {...getProps({
-            presetGlobalProps: previewableModule.default?.args || {},
-            presetProps: Previewable.args || {},
-          })}
-        />
-      );
-      if (shouldAbortRender()) {
-        return;
-      }
-      const errorBoundary = await expectErrorBoundary(
-        renderId,
-        shouldAbortRender
-      );
-      if (!errorBoundary) {
-        return;
-      }
-      if (errorBoundary.state.error) {
-        throw errorBoundary.state.error;
-      }
-      if (Previewable.play) {
-        await Previewable.play({ canvasElement: rootContainer });
-      }
-    },
-    jsxFactory: React.createElement,
-  };
+	const isStoryModule = !!previewableModule.default?.component;
+	const Wrapper = wrapperModule?.[wrapperName || "Wrapper"] || React.Fragment;
+	const Previewable =
+		previewableModule[previewableName] ||
+		previewableModule.PreviewJsEval(`try { return ${previewableName}; } catch { return null; }`);
+	if (!Previewable) {
+		throw new Error(`No component or story named '${previewableName}'`);
+	}
+	const decorators = [...(Previewable.decorators || []), ...(previewableModule.default?.decorators || [])];
+	const RenderComponent = isStoryModule
+		? typeof Previewable === "function"
+			? Previewable
+			: Previewable.render ||
+				Previewable.component ||
+				previewableModule.default?.render ||
+				previewableModule.default?.component ||
+				Previewable
+		: Previewable;
+	const Renderer = (props: any) => {
+		return (
+			<ErrorBoundary renderId={renderId}>
+				<Wrapper>
+					{decorators.reduce(
+						(component, decorator) => () => decorator(component),
+						() => <RenderComponent {...props} />,
+					)()}
+				</Wrapper>
+			</ErrorBoundary>
+		);
+	};
+	return {
+		render: async (getProps: GetPropsFn) => {
+			if (shouldAbortRender()) {
+				return;
+			}
+			await render(
+				<Renderer
+					{...getProps({
+						presetGlobalProps: previewableModule.default?.args || {},
+						presetProps: Previewable.args || {},
+					})}
+				/>,
+			);
+			if (shouldAbortRender()) {
+				return;
+			}
+			const errorBoundary = await expectErrorBoundary(renderId, shouldAbortRender);
+			if (!errorBoundary) {
+				return;
+			}
+			if (errorBoundary.state.error) {
+				throw errorBoundary.state.error;
+			}
+			if (Previewable.play) {
+				await Previewable.play({ canvasElement: rootContainer });
+			}
+		},
+		jsxFactory: React.createElement,
+	};
 };

package/preview/render-16.tsx

@@ -1,6 +1,7 @@
 import ReactDOM from "react-dom";
+
 import { rootContainer } from "./root";
 
 export function render(node: JSX.Element) {
-  ReactDOM.render(node, rootContainer);
+	ReactDOM.render(node, rootContainer);
 }

package/preview/render-18.tsx

@@ -1,11 +1,12 @@
 import type { Root } from "react-dom/client";
 import { createRoot } from "react-dom/client";
+
 import { rootContainer } from "./root";
 
 let root: Root | null = null;
 export function render(node: JSX.Element) {
-  if (!root) {
-    root = createRoot(rootContainer);
-  }
-  root.render(node);
+	if (!root) {
+		root = createRoot(rootContainer);
+	}
+	root.render(node);
 }

package/preview/tsconfig.json

@@ -1,9 +1,9 @@
 {
-  "extends": "../../../../../tsconfig.base.json",
-  "compilerOptions": {
-    "module": "ES2022",
-    "moduleResolution": "Bundler",
-    "jsx": "preserve"
-  },
-  "exclude": ["types"]
+	"extends": "../../../../../tsconfig.base.json",
+	"compilerOptions": {
+		"module": "ES2022",
+		"moduleResolution": "Bundler",
+		"jsx": "preserve"
+	},
+	"exclude": ["types"]
 }