@cfp-studio/plugin-react 17.3.0 → 17.3.2

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/shims/router-utils.spec.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest";
+
+import { generatePath, matchPath, resolvePath } from "./umi.js";
+
+/**
+ * 对照测试：shim 里 react-router 纯函数的转导出必须与 `react-router@6.3.0`
+ * 的**真实输出**一致。
+ *
+ * 每个期望值都是在真实包上跑出来的（不是手写的猜测）：
+ *
+ * ```sh
+ * node -e "const rr=require('<...>/react-router/main.js'); console.log(rr.matchPath('/users/:id','/users/42'))"
+ * ```
+ *
+ * ## 为什么这份测试重要
+ *
+ * 早期 shim 用的是「按 `/` 切段逐个比」的简版，错四处且都很难发现：
+ *
+ * | # | 输入 | 简版错误 | 后果 |
+ * | --- | --- | --- | --- |
+ * | 1 | 任意 | 返回 `params` 本体而非 `{ params, pathname, pathnameBase, pattern }` | 写 `match?.params.id` 的组件拿到 `undefined` |
+ * | 2 | `/files/*` + `/files/a/b/c` | 丢掉 splat 捕获 | 组件看到「匹配成功」但 `params["*"]` 为空 |
+ * | 3 | `/users/:id` + `/Users/42` | 大小写敏感 → `null` | 大小写不同的 URL 导不了 |
+ * | 4 | `/users/:id?` + `/users/42` | 产出 `"id?"` 这个脏键 | 参数名带问号 |
+ *
+ * 简版还让 e2e 用例 3e 断言的是 `match?.id`（简版的形状）—— 测试是绿的，
+ * 但语义是错的。这份单测把真实形状固定下来。
+ *
+ * ## 为什么测试放在 `src/` 而不是 `preview/`
+ *
+ * `preview/` 整体被 `vitest.config.ts` 排除（里面是浏览器端渲染入口）。
+ * 这份用例虽然测的是 `preview/shims/umi.tsx`，但它只是普通函数、不碰 DOM，
+ * 从 `src/` 引用即可。
+ */
+describe("matchPath 与 react-router 6.3 对齐", () => {
+	it("返回 `{ params, pathname, pathnameBase, pattern }` 四键（不是 params 本体）", () => {
+		const match = matchPath("/users/:id", "/users/42");
+		expect(Object.keys(match ?? {}).sort()).toEqual(["params", "pathname", "pathnameBase", "pattern"]);
+	});
+
+	it("基本参数捕获", () => {
+		expect(matchPath("/users/:id", "/users/42")).toEqual({
+			params: { id: "42" },
+			pathname: "/users/42",
+			pathnameBase: "/users/42",
+			pattern: { path: "/users/:id", caseSensitive: false, end: true },
+		});
+	});
+
+	it("默认大小写不敏感（`caseSensitive: false`）", () => {
+		expect(matchPath("/users/:id", "/Users/42")?.params.id).toBe("42");
+	});
+
+	it("`caseSensitive: true` 时大小写敏感", () => {
+		expect(matchPath({ path: "/users/:id", caseSensitive: true }, "/Users/42")).toBeNull();
+	});
+
+	it('尾部 splat 是具名捕获组，值进 `params["*"]`', () => {
+		const match = matchPath("/files/*", "/files/a/b/c");
+		expect(match?.params["*"]).toBe("a/b/c");
+		// `pathnameBase` 不含 splat 部分。
+		expect(match?.pathnameBase).toBe("/files");
+	});
+
+	it("`/files/*` 也能匹配 `/files` 本身（splat 为空字符串，不是 undefined）", () => {
+		expect(matchPath("/files/*", "/files")?.params["*"]).toBe("");
+	});
+
+	it("`/users/:id/*` 同时捕获参数与 splat", () => {
+		const match = matchPath("/users/:id/*", "/users/42/extra/deep");
+		expect(match?.params.id).toBe("42");
+		expect(match?.params["*"]).toBe("extra/deep");
+	});
+
+	it("`end: false` 允许前缀匹配", () => {
+		expect(matchPath({ path: "/users", end: false }, "/users/42/extra")?.pathnameBase).toBe("/users");
+	});
+
+	it("默认 `end: true`：多出的段不匹配", () => {
+		expect(matchPath("/users/:id", "/users/42/extra")).toBeNull();
+	});
+
+	it("忽略尾部斜杠", () => {
+		expect(matchPath("/users/:id/", "/users/42")?.params.id).toBe("42");
+	});
+
+	it("根路径", () => {
+		expect(matchPath("/", "/")).toEqual({
+			params: {},
+			pathname: "/",
+			pathnameBase: "/",
+			pattern: { path: "/", caseSensitive: false, end: true },
+		});
+	});
+
+	it("纯 `*` 匹配任意路径", () => {
+		expect(matchPath("*", "/anything/at/all")?.params["*"]).toBe("anything/at/all");
+	});
+
+	it("URL 段会被解码", () => {
+		expect(matchPath("/u/:id", "/u/%E4%B8%AD")?.params.id).toBe("中");
+	});
+
+	it("malformed 百分号编码不抛错，原样返回", () => {
+		expect(matchPath("/u/:id", "/u/%ZZ")?.params.id).toBe("%ZZ");
+	});
+
+	it("`:id?` 在 v6 不是可选段，且不产出 `id?` 这种脏键", () => {
+		// 与真实 react-router 一致：`?` 被当作字面字符，匹配不上。
+		expect(matchPath("/users/:id?", "/users/42")).toBeNull();
+		expect(matchPath("/users/:id?", "/users")).toBeNull();
+	});
+});
+
+describe("resolvePath 与 react-router 6.3 对齐", () => {
+	const cases: Array<[string, string, string]> = [
+		["child", "/parent/", "/parent/child"],
+		["child", "/parent", "/parent/child"],
+		["../sibling", "/a/b/", "/a/sibling"],
+		["../../up", "/a/b/c", "/a/up"],
+		["./same", "/a/b", "/a/b/same"],
+		["", "/a/b", "/a/b"],
+		["/abs", "/a/b", "/abs"],
+		["child", "/", "/child"],
+	];
+
+	for (const [to, from, expected] of cases) {
+		it(`resolvePath(${JSON.stringify(to)}, ${JSON.stringify(from)}) → ${expected}`, () => {
+			expect(resolvePath(to, from).pathname).toBe(expected);
+		});
+	}
+
+	it("保留 search 与 hash（并补上前缀符号）", () => {
+		expect(resolvePath("x?q=1#h", "/base/")).toEqual({ pathname: "/base/x", search: "?q=1", hash: "#h" });
+	});
+});
+
+describe("generatePath 与 react-router 6.3 对齐", () => {
+	it("替换 `:param`", () => {
+		expect(generatePath("/users/:id/posts/:postId", { id: "7", postId: "9" })).toBe("/users/7/posts/9");
+	});
+
+	it("不做 URL 编码（中文原样）", () => {
+		expect(generatePath("/u/:id", { id: "中文" })).toBe("/u/中文");
+	});
+
+	it("支持尾部 splat", () => {
+		expect(generatePath("/files/*", { "*": "a/b" })).toBe("/files/a/b");
+	});
+
+	it("splat 为空时去掉末尾星号", () => {
+		expect(generatePath("/files/*", {})).toBe("/files");
+	});
+
+	it("缺失参数抛错（与真实实现一致）", () => {
+		expect(() => generatePath("/u/:id", {})).toThrow('Missing ":id" param');
+	});
+});