sy-lowcode-workspace-tools 0.1.0

package/scripts/build-pages.mjs

@@ -0,0 +1,691 @@
+/**
+ * build-pages.mjs - 构建复杂代码页
+ */
+
+import crypto from "node:crypto";
+import fsSync from "node:fs";
+import fs from "node:fs/promises";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { gzipSync } from "node:zlib";
+import react from "@vitejs/plugin-react";
+import { build } from "vite";
+import { discoverPages, distRoot, rootDir, srcRoot } from "./utils/pages.mjs";
+
+const require = createRequire(import.meta.url);
+const tmpDir = path.join(rootDir, ".tmp");
+const runtimeDistDir = path.join(distRoot, "page-runtime");
+const runtimeVersionPlaceholder = "__SY_PAGE_RUNTIME_VERSION__";
+const runtimeCacheFileName = "build-cache.json";
+const validBundleModes = new Set(["shared", "self-contained"]);
+
+const runtimePackages = [
+  "react",
+  "react-dom",
+  "@ant-design/cssinjs",
+  "antd",
+  "@ant-design/icons",
+  "sy-form-components",
+  "sy-page-sdk",
+];
+
+const proxyModuleIds = new Map(
+  [
+    "react",
+    "react/jsx-runtime",
+    "react-dom/client",
+    "@ant-design/cssinjs",
+    "antd",
+    "antd/locale/zh_CN",
+    "@ant-design/icons",
+    "sy-form-components",
+    "sy-page-sdk",
+    "sy-page-sdk/react",
+  ].map((id) => [id, `\0sy-page-runtime-proxy:${id}`]),
+);
+
+const staticProxyExports = {
+  "sy-page-sdk": ["createPageSdk"],
+  "sy-page-sdk/react": [
+    "createReactPage",
+    "PageProvider",
+    "useCurrentUser",
+    "useDataSource",
+    "useFormViewPermissions",
+    "useMessage",
+    "useModal",
+    "useNavigation",
+    "usePageContext",
+    "usePageProps",
+    "usePageRoute",
+    "usePageSdk",
+    "createPageSdk",
+  ],
+  "react/jsx-runtime": ["Fragment", "jsx", "jsxs"],
+  "react-dom/client": ["createRoot", "hydrateRoot"],
+  "@ant-design/cssinjs": ["StyleProvider", "createCache", "extractStyle"],
+  "antd/locale/zh_CN": [],
+};
+
+const exportNameCache = new Map();
+
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes)) return "-";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}
+
+function formatDuration(startTime) {
+  return `${((Date.now() - startTime) / 1000).toFixed(2)}s`;
+}
+
+function fileSizeLabel(filePath) {
+  if (!fsSync.existsSync(filePath)) return "未生成";
+  return formatBytes(fsSync.statSync(filePath).size);
+}
+
+function fileGzipSizeLabel(filePath) {
+  if (!fsSync.existsSync(filePath)) return "未生成";
+  return formatBytes(gzipSync(fsSync.readFileSync(filePath)).length);
+}
+
+function readTextIfExists(filePath) {
+  if (!fsSync.existsSync(filePath)) return "";
+  return fsSync.readFileSync(filePath, "utf-8");
+}
+
+function readPackageVersion(packageName) {
+  try {
+    let current = path.dirname(require.resolve(packageName));
+    while (current && current !== path.dirname(current)) {
+      const packageJsonPath = path.join(current, "package.json");
+      if (fsSync.existsSync(packageJsonPath)) {
+        return JSON.parse(fsSync.readFileSync(packageJsonPath, "utf-8")).version || "unknown";
+      }
+      current = path.dirname(current);
+    }
+    return "unknown";
+  } catch {
+    return "missing";
+  }
+}
+
+function normalizeBundleMode(value) {
+  const mode = String(value || "shared").trim();
+  if (validBundleModes.has(mode)) return mode;
+  throw new Error(
+    `不支持的构建模式: ${mode}，可选值: ${Array.from(validBundleModes).join(", ")}`,
+  );
+}
+
+/**
+ * @param {string[]} argv - 命令行参数数组
+ * @returns {{ page: string, bundleMode: string, runtimeCache: boolean, help: boolean }}
+ */
+function parseArgs(argv) {
+  const result = {
+    page: "",
+    bundleMode: normalizeBundleMode(process.env.APP_BUNDLE_MODE),
+    runtimeCache: process.env.APP_RUNTIME_CACHE !== "false",
+    help: false,
+  };
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index];
+    if (arg === "--help" || arg === "-h") {
+      result.help = true;
+      continue;
+    }
+    if (arg === "--page" && argv[index + 1]) {
+      result.page = argv[index + 1];
+      index += 1;
+      continue;
+    }
+    if (arg === "--bundle-mode" && argv[index + 1]) {
+      result.bundleMode = normalizeBundleMode(argv[index + 1]);
+      index += 1;
+      continue;
+    }
+    if (arg === "--no-runtime-cache") {
+      result.runtimeCache = false;
+    }
+  }
+  return result;
+}
+
+function printHelp() {
+  console.log(`
+build-pages - 构建复杂代码页
+
+用法:
+  tsx scripts/build-pages.mjs [options]
+
+选项:
+  --page <name>       只构建指定页面目录
+  --bundle-mode       shared 或 self-contained，默认 shared
+  --no-runtime-cache  强制重建共享 runtime
+  --help, -h          显示帮助信息
+`);
+}
+
+function createRuntimeInputHash(runtimeEntryContent) {
+  const hash = crypto.createHash("sha256");
+  const packageVersions = runtimePackages.reduce((result, packageName) => {
+    result[packageName] = readPackageVersion(packageName);
+    return result;
+  }, {});
+  const configFiles = [
+    path.join(rootDir, "src/index.css"),
+    path.join(rootDir, "tailwind.config.cjs"),
+    path.join(rootDir, "postcss.config.cjs"),
+    fileURLToPath(import.meta.url),
+  ];
+
+  hash.update("sy-page-runtime-v1-input");
+  hash.update(runtimeEntryContent);
+  hash.update(JSON.stringify(packageVersions));
+  configFiles.forEach((filePath) => {
+    hash.update(filePath);
+    hash.update(readTextIfExists(filePath));
+  });
+  return hash.digest("hex");
+}
+
+function createRuntimeEntryContent() {
+  return `import * as ReactModule from 'react';
+import * as ReactJsxRuntimeModule from 'react/jsx-runtime';
+import * as ReactDomClientModule from 'react-dom/client';
+import * as CssInJsModule from '@ant-design/cssinjs';
+import * as AntdModule from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import * as IconsModule from '@ant-design/icons';
+import * as SyFormComponentsModule from 'sy-form-components';
+import * as PageSdkModule from 'sy-page-sdk';
+import * as PageSdkReactModule from 'sy-page-sdk/react';
+import '../src/index.css';
+
+const runtimeVersion = '${runtimeVersionPlaceholder}';
+
+const withDefault = (moduleValue, defaultValue) => ({
+  ...moduleValue,
+  default: defaultValue ?? moduleValue.default ?? moduleValue,
+});
+
+export const pageRuntime = {
+  protocol: 'sy-page-runtime',
+  majorVersion: 1,
+  version: runtimeVersion,
+  modules: {
+    react: withDefault(ReactModule, ReactModule.default || ReactModule),
+    'react/jsx-runtime': ReactJsxRuntimeModule,
+    'react-dom/client': ReactDomClientModule,
+    '@ant-design/cssinjs': CssInJsModule,
+    antd: withDefault(AntdModule, null),
+    'antd/locale/zh_CN': { default: zhCN },
+    '@ant-design/icons': IconsModule,
+    'sy-form-components': SyFormComponentsModule,
+    'sy-page-sdk': PageSdkModule,
+    'sy-page-sdk/react': PageSdkReactModule,
+  },
+};
+
+globalThis.SY_PAGE_RUNTIME_V1 = pageRuntime;
+
+export default pageRuntime;
+`;
+}
+
+function readRuntimeManifest() {
+  const manifestPath = path.join(runtimeDistDir, "manifest.json");
+  if (!fsSync.existsSync(manifestPath)) return null;
+  try {
+    return JSON.parse(fsSync.readFileSync(manifestPath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function readRuntimeBuildCache() {
+  const cachePath = path.join(runtimeDistDir, runtimeCacheFileName);
+  if (!fsSync.existsSync(cachePath)) return null;
+  try {
+    return JSON.parse(fsSync.readFileSync(cachePath, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+
+function isRuntimeCacheValid(inputHash) {
+  const manifest = readRuntimeManifest();
+  const cache = readRuntimeBuildCache();
+  if (
+    !manifest ||
+    manifest.protocol !== "sy-page-runtime" ||
+    manifest.majorVersion !== 1 ||
+    !manifest.version ||
+    !manifest.files?.entry ||
+    !cache ||
+    cache.inputHash !== inputHash ||
+    cache.runtimeVersion !== manifest.version
+  ) {
+    return false;
+  }
+  const runtimeJsPath = path.join(runtimeDistDir, manifest.files.entry);
+  if (!fsSync.existsSync(runtimeJsPath)) return false;
+  if (manifest.files.css && !fsSync.existsSync(path.join(runtimeDistDir, manifest.files.css))) {
+    return false;
+  }
+  return true;
+}
+
+async function createCssOptions() {
+  const tailwindcssModule = await import("tailwindcss");
+  const autoprefixerModule = await import("autoprefixer");
+  const tailwindcss = tailwindcssModule.default ?? tailwindcssModule;
+  const autoprefixer = autoprefixerModule.default ?? autoprefixerModule;
+  return {
+    postcss: {
+      plugins: [
+        tailwindcss({ config: path.join(rootDir, "tailwind.config.cjs") }),
+        autoprefixer(),
+      ],
+    },
+  };
+}
+
+function createResolveAlias() {
+  return [
+    {
+      find: "@",
+      replacement: srcRoot,
+    },
+  ];
+}
+
+async function buildSharedRuntime(options = {}) {
+  const startedAt = Date.now();
+  const entryContent = createRuntimeEntryContent();
+  const inputHash = createRuntimeInputHash(entryContent);
+  if (options.runtimeCache !== false && isRuntimeCacheValid(inputHash)) {
+    const manifest = readRuntimeManifest();
+    console.log(`[build] 代码页共享 runtime 缓存命中: ${manifest.version}`);
+    return;
+  }
+
+  const entryPath = path.join(tmpDir, "page-runtime-entry.jsx");
+  await fs.writeFile(entryPath, entryContent, "utf8");
+
+  try {
+    const cssOptions = await createCssOptions();
+    console.log("[build] 构建代码页共享 runtime");
+    await build({
+      configFile: false,
+      root: rootDir,
+      publicDir: false,
+      css: cssOptions,
+      define: {
+        "process.env.NODE_ENV": JSON.stringify("production"),
+        "process.env": JSON.stringify({ NODE_ENV: "production" }),
+      },
+      plugins: [react()],
+      resolve: {
+        alias: createResolveAlias(),
+        dedupe: ["react", "react-dom", "antd", "@ant-design/cssinjs"],
+      },
+      build: {
+        target: "es2018",
+        assetsInlineLimit: 0,
+        cssCodeSplit: false,
+        emptyOutDir: true,
+        minify: true,
+        outDir: runtimeDistDir,
+        lib: {
+          entry: entryPath,
+          formats: ["es"],
+          fileName: () => "runtime.js",
+        },
+        rollupOptions: {
+          output: {
+            inlineDynamicImports: true,
+            entryFileNames: "runtime.js",
+            chunkFileNames: "runtime.js",
+            assetFileNames: (assetInfo) => {
+              if (String(assetInfo.name || "").endsWith(".css")) {
+                return "style.css";
+              }
+              return "assets/[name]-[hash][extname]";
+            },
+          },
+        },
+      },
+      logLevel: "warn",
+    });
+
+    const runtimeJsPath = path.join(runtimeDistDir, "runtime.js");
+    const runtimeCssPath = path.join(runtimeDistDir, "style.css");
+    const runtimeJs = fsSync.readFileSync(runtimeJsPath);
+    const runtimeCss = fsSync.existsSync(runtimeCssPath)
+      ? fsSync.readFileSync(runtimeCssPath)
+      : Buffer.alloc(0);
+    const hash = crypto
+      .createHash("sha256")
+      .update(runtimeJs)
+      .update(runtimeCss)
+      .digest("hex")
+      .slice(0, 12);
+    const runtimeVersion = `v1-${hash}`;
+    await fs.writeFile(
+      runtimeJsPath,
+      runtimeJs
+        .toString("utf-8")
+        .split(runtimeVersionPlaceholder)
+        .join(runtimeVersion),
+      "utf8",
+    );
+    const manifest = {
+      protocol: "sy-page-runtime",
+      majorVersion: 1,
+      version: runtimeVersion,
+      inputHash,
+      files: {
+        entry: "runtime.js",
+        css: fsSync.existsSync(runtimeCssPath) ? "style.css" : null,
+      },
+      sizes: {
+        entry: fsSync.statSync(runtimeJsPath).size,
+        entryGzip: gzipSync(fsSync.readFileSync(runtimeJsPath)).length,
+        css: fsSync.existsSync(runtimeCssPath) ? fsSync.statSync(runtimeCssPath).size : 0,
+        cssGzip: fsSync.existsSync(runtimeCssPath)
+          ? gzipSync(fsSync.readFileSync(runtimeCssPath)).length
+          : 0,
+      },
+      builtAt: new Date().toISOString(),
+    };
+    await fs.writeFile(
+      path.join(runtimeDistDir, "manifest.json"),
+      JSON.stringify(manifest, null, 2),
+      "utf8",
+    );
+    await fs.writeFile(
+      path.join(runtimeDistDir, runtimeCacheFileName),
+      JSON.stringify(
+        {
+          inputHash,
+          runtimeVersion,
+          updatedAt: new Date().toISOString(),
+        },
+        null,
+        2,
+      ),
+      "utf8",
+    );
+    console.log(`[build] 代码页共享 runtime 构建完成，用时 ${formatDuration(startedAt)}`);
+    console.log(`[build] runtime.js: ${fileSizeLabel(runtimeJsPath)} / gzip ${fileGzipSizeLabel(runtimeJsPath)}`);
+    console.log(`[build] style.css: ${fileSizeLabel(runtimeCssPath)} / gzip ${fileGzipSizeLabel(runtimeCssPath)}`);
+  } finally {
+    await fs.rm(entryPath, { force: true });
+  }
+}
+
+function isValidExportName(name) {
+  return /^[A-Za-z_$][\w$]*$/.test(name) && name !== "default";
+}
+
+async function getProxyExportNames(source) {
+  if (exportNameCache.has(source)) return exportNameCache.get(source);
+  if (staticProxyExports[source]) {
+    exportNameCache.set(source, staticProxyExports[source]);
+    return staticProxyExports[source];
+  }
+  if (source === "sy-form-components" || source === "@ant-design/icons") {
+    const parsed = readPackageTypeExports(source);
+    exportNameCache.set(source, parsed);
+    return parsed;
+  }
+  try {
+    const moduleValue = await import(source);
+    const names = Object.keys(moduleValue).filter(isValidExportName);
+    exportNameCache.set(source, names);
+    return names;
+  } catch {
+    exportNameCache.set(source, []);
+    return [];
+  }
+}
+
+function readPackageTypeExports(source) {
+  try {
+    const entryPath = require.resolve(source);
+    let currentDir = path.dirname(entryPath);
+    let packageJsonPath = "";
+    while (currentDir && currentDir !== path.dirname(currentDir)) {
+      const candidate = path.join(currentDir, "package.json");
+      if (fsSync.existsSync(candidate)) {
+        packageJsonPath = candidate;
+        break;
+      }
+      currentDir = path.dirname(currentDir);
+    }
+    if (!packageJsonPath) return [];
+    const packageJson = JSON.parse(fsSync.readFileSync(packageJsonPath, "utf-8"));
+    const typesPath = packageJson.types || packageJson.typings;
+    if (!typesPath) return [];
+    const dtsPath = path.resolve(path.dirname(packageJsonPath), typesPath);
+    const content = fsSync.readFileSync(dtsPath, "utf-8");
+    const names = new Set();
+    for (const match of content.matchAll(
+      /export\s+(?:declare\s+)?(?:const|function|class)\s+([A-Za-z_$][\w$]*)/g,
+    )) {
+      names.add(match[1]);
+    }
+    for (const match of content.matchAll(/export\s*\{([^}]+)\}/g)) {
+      match[1]
+        .split(",")
+        .map((item) => item.trim().split(/\s+as\s+/).pop()?.trim())
+        .filter((item) => item && isValidExportName(item))
+        .forEach((item) => names.add(item));
+    }
+    return Array.from(names);
+  } catch {
+    return [];
+  }
+}
+
+async function createProxyModuleCode(source) {
+  const exportNames = await getProxyExportNames(source);
+  const globalKey = JSON.stringify(source);
+  const namedExports = exportNames
+    .map((name) => `export const ${name} = moduleValue[${JSON.stringify(name)}];`)
+    .join("\n");
+  const defaultExport =
+    source === "antd/locale/zh_CN"
+      ? "export default moduleValue.default;"
+      : `export default (moduleValue.default ?? moduleValue);`;
+
+  return `const runtime = globalThis.SY_PAGE_RUNTIME_V1;
+if (!runtime || runtime.protocol !== 'sy-page-runtime' || runtime.majorVersion !== 1) {
+  throw new Error('代码页共享运行时未加载或版本不兼容');
+}
+const moduleValue = runtime.modules[${globalKey}];
+if (!moduleValue) {
+  throw new Error('代码页共享运行时缺少模块: ${source}');
+}
+${namedExports}
+${defaultExport}
+`;
+}
+
+function createSharedRuntimeProxyPlugin() {
+  return {
+    name: "sy-page-runtime-proxy",
+    enforce: "pre",
+    resolveId(source) {
+      return proxyModuleIds.get(source) || null;
+    },
+    async load(id) {
+      const source = Array.from(proxyModuleIds.entries()).find(
+        ([, proxyId]) => proxyId === id,
+      )?.[0];
+      if (!source) return null;
+      return createProxyModuleCode(source);
+    },
+    transform(code, id) {
+      if (!id.includes(`${path.sep}src${path.sep}pages${path.sep}`)) return null;
+      if (!/\.[cm]?[jt]sx?$/.test(id)) return null;
+      return code.replace(
+        /^\s*import\s+["'](?:\.\.\/\.\.\/index\.css|\.\.\/index\.css)["'];?\s*$/gm,
+        "",
+      );
+    },
+  };
+}
+
+/**
+ * 确保构建产物的文件名与预期一致，必要时重命名
+ * @param {string} targetDir - 目标目录
+ * @param {string} expectedName - 期望的文件名
+ * @param {string} extension - 文件扩展名
+ * @returns {Promise<string|null>}
+ */
+async function ensureFileName(targetDir, expectedName, extension) {
+  const files = await fs.readdir(targetDir);
+  const matchingFile = files.find((fileName) => fileName.endsWith(extension));
+  if (!matchingFile) return null;
+  if (matchingFile === expectedName) return path.join(targetDir, matchingFile);
+  const sourcePath = path.join(targetDir, matchingFile);
+  const targetPath = path.join(targetDir, expectedName);
+  await fs.rename(sourcePath, targetPath);
+  return targetPath;
+}
+
+/**
+ * 构建单个代码页的 Vite bundle
+ * @param {{ config: { code: string }, entryPath: string }} page - 页面信息
+ * @param {string} bundleMode - 构建模式
+ * @returns {Promise<void>}
+ */
+async function buildPage(page, bundleMode) {
+  const startedAt = Date.now();
+  console.log(`📦 构建代码页: ${page.config.code} (${bundleMode})`);
+  const outDir = path.join(distRoot, "pages", page.config.code);
+  await fs.mkdir(outDir, { recursive: true });
+
+  const cssOptions = await createCssOptions();
+  await build({
+    configFile: false,
+    mode: "production",
+    root: rootDir,
+    publicDir: false,
+    css: cssOptions,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env": JSON.stringify({ NODE_ENV: "production" }),
+    },
+    plugins: [bundleMode === "shared" ? createSharedRuntimeProxyPlugin() : null, react()].filter(
+      Boolean,
+    ),
+    resolve: {
+      alias: createResolveAlias(),
+      dedupe: ["react", "react-dom", "antd", "@ant-design/cssinjs"],
+    },
+    build: {
+      target: "es2018",
+      assetsInlineLimit: 0,
+      cssCodeSplit: false,
+      emptyOutDir: true,
+      minify: true,
+      outDir,
+      lib: {
+        entry: page.entryPath,
+        formats: ["es"],
+        fileName: () => "index",
+      },
+      rollupOptions: {
+        output: {
+          inlineDynamicImports: true,
+          entryFileNames: "index.js",
+          chunkFileNames: "index.js",
+          assetFileNames: (assetInfo) => {
+            if (String(assetInfo.name || "").endsWith(".css")) {
+              return "style.css";
+            }
+            return "assets/[name]-[hash][extname]";
+          },
+        },
+      },
+    },
+    logLevel: "warn",
+  });
+
+  const jsPath = await ensureFileName(outDir, "index.js", ".js");
+  if (!jsPath) throw new Error(`页面 ${page.config.code} 未生成 index.js`);
+  const cssPath = await ensureFileName(outDir, "style.css", ".css");
+  if (!cssPath) await fs.writeFile(path.join(outDir, "style.css"), "", "utf8");
+
+  const outputCode = await fs.readFile(jsPath, "utf8");
+  const bareImportMatch = outputCode.match(
+    /\bfrom\s*["'](?:react|react-dom|react\/jsx-runtime|antd|@ant-design\/cssinjs|@ant-design\/icons|sy-form-components|@sy\/page-sdk(?:\/react)?)["']/,
+  );
+  if (bareImportMatch) {
+    throw new Error(`构建产物仍包含浏览器无法直接加载的裸模块导入: ${bareImportMatch[0]}`);
+  }
+  if (/\bprocess\.env\b/.test(outputCode)) {
+    throw new Error("构建产物仍包含浏览器不存在的 process.env 引用");
+  }
+  console.log(`[build] 代码页 ${page.config.code} 构建完成，用时 ${formatDuration(startedAt)}`);
+  console.log(`[build] index.js: ${fileSizeLabel(jsPath)} / gzip ${fileGzipSizeLabel(jsPath)}`);
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  const pages = await discoverPages(args.page);
+  if (pages.length === 0) {
+    if (args.page) {
+      throw new Error(`找不到代码页 "${args.page}"`);
+    }
+    console.log("未发现复杂代码页，跳过 pages 构建");
+    return;
+  }
+
+  if (!args.page) {
+    await fs.rm(path.join(distRoot, "pages"), { recursive: true, force: true });
+  }
+  await fs.mkdir(tmpDir, { recursive: true });
+
+  if (args.bundleMode === "shared") {
+    await buildSharedRuntime({ runtimeCache: args.runtimeCache });
+    console.log("");
+  }
+
+  let succeeded = 0;
+  let failed = 0;
+  for (const page of pages) {
+    try {
+      await buildPage(page, args.bundleMode);
+      succeeded += 1;
+    } catch (error) {
+      failed += 1;
+      console.error(`  ❌ 构建失败: ${error.stack || error.message}`);
+    }
+  }
+
+  try {
+    const remaining = await fs.readdir(tmpDir);
+    if (remaining.length === 0) {
+      await fs.rmdir(tmpDir);
+    }
+  } catch {
+    // ignore
+  }
+
+  console.log(`完成: ${succeeded} 成功, ${failed} 失败`);
+  if (failed > 0) process.exit(1);
+}
+
+await main();