openxiangda 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "OpenXiangda CLI, workspace build tools, runtime SDK, and form components.",
   "private": false,
   "bin": {

package/packages/sdk/src/build-source/scripts/build-forms.mjs

@@ -19,6 +19,10 @@ import {
 } from "./utils/incremental.mjs";
 import { createNamespaceCssPlugin } from "./utils/namespace-css.mjs";
 import { validateRuntimeCssFile } from "./utils/runtime-css-check.mjs";
+import {
+  extractLargeDataUrlAssets,
+  formatExtractedAssetSummary,
+} from "./utils/static-assets.mjs";
 
 process.env.NODE_ENV = "production";
 process.env.BABEL_ENV = "production";
@@ -728,6 +732,12 @@ async function buildSharedRuntime(options = {}) {
 
     const runtimeJsPath = path.join(runtimeDistDir, "runtime.js");
     const runtimeCssPath = path.join(runtimeDistDir, "style.css");
+    const extractedAssets = extractLargeDataUrlAssets({
+      outDir: runtimeDistDir,
+      files: [runtimeJsPath, runtimeCssPath],
+    });
+    const extractedSummary = formatExtractedAssetSummary(extractedAssets);
+    if (extractedSummary) console.log(`[build] ${extractedSummary}`);
     validateRuntimeCssFile(runtimeCssPath, { label: "表单共享 runtime" });
     const runtimeOutputCode = fs.readFileSync(runtimeJsPath, "utf-8");
     if (/\bjsxDEV\b|react\/jsx-dev-runtime/.test(runtimeOutputCode)) {
@@ -877,6 +887,12 @@ async function buildForm(form) {
     if (!fs.existsSync(cssOutput)) {
       fs.writeFileSync(cssOutput, "", "utf-8");
     }
+    const extractedAssets = extractLargeDataUrlAssets({
+      outDir: form.outDir,
+      files: [entryOutput, cssOutput],
+    });
+    const extractedSummary = formatExtractedAssetSummary(extractedAssets);
+    if (extractedSummary) console.log(`[build] ${extractedSummary}`);
     console.log(
       `[build] 输出: index.js ${fileSizeLabel(entryOutput)} / gzip ${fileGzipSizeLabel(entryOutput)}`,
     );

package/packages/sdk/src/build-source/scripts/build-pages.mjs

@@ -18,6 +18,10 @@ import {
 } from "./utils/incremental.mjs";
 import { createNamespaceCssPlugin } from "./utils/namespace-css.mjs";
 import { validateRuntimeCssFile } from "./utils/runtime-css-check.mjs";
+import {
+  extractLargeDataUrlAssets,
+  formatExtractedAssetSummary,
+} from "./utils/static-assets.mjs";
 
 process.env.NODE_ENV = "production";
 process.env.BABEL_ENV = "production";
@@ -428,6 +432,12 @@ async function buildSharedRuntime(options = {}) {
 
     const runtimeJsPath = path.join(runtimeDistDir, "runtime.js");
     const runtimeCssPath = path.join(runtimeDistDir, "style.css");
+    const extractedAssets = extractLargeDataUrlAssets({
+      outDir: runtimeDistDir,
+      files: [runtimeJsPath, runtimeCssPath],
+    });
+    const extractedSummary = formatExtractedAssetSummary(extractedAssets);
+    if (extractedSummary) console.log(`[build] ${extractedSummary}`);
     validateRuntimeCssFile(runtimeCssPath, { label: "代码页共享 runtime" });
     const runtimeJs = fsSync.readFileSync(runtimeJsPath);
     const runtimeCss = fsSync.existsSync(runtimeCssPath)
@@ -513,8 +523,10 @@ async function getProxyExportNames(source) {
   }
   if (source === "openxiangda") {
     const parsed = readPackageTypeExports(source);
-    exportNameCache.set(source, parsed);
-    return parsed;
+    const runtimeExports = await readRuntimeModuleExports(source).catch(() => []);
+    const names = Array.from(new Set([...parsed, ...runtimeExports]));
+    exportNameCache.set(source, names);
+    return names;
   }
   if (source === "@ant-design/icons") {
     const names = await readRuntimeModuleExports(source);
@@ -538,7 +550,8 @@ async function readRuntimeModuleExports(source) {
 
 function readPackageTypeExports(source) {
   try {
-    const entryPath = require.resolve(source);
+    const entryPath = resolvePackageEntry(source);
+    if (!entryPath) return [];
     let currentDir = path.dirname(entryPath);
     let packageJsonPath = "";
     while (currentDir && currentDir !== path.dirname(currentDir)) {
@@ -582,6 +595,21 @@ function readPackageTypeExports(source) {
   }
 }
 
+function resolvePackageEntry(source) {
+  const attempts = [
+    () => require.resolve(source),
+    () => require.resolve(source, { paths: [rootDir] }),
+  ];
+  for (const attempt of attempts) {
+    try {
+      return attempt();
+    } catch {
+      // Try the next resolution root.
+    }
+  }
+  return "";
+}
+
 async function createProxyModuleCode(source) {
   const exportNames = await getProxyExportNames(source);
   const globalKey = JSON.stringify(source);
@@ -716,6 +744,13 @@ async function buildPage(page) {
   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 finalCssPath = path.join(outDir, "style.css");
+  const extractedAssets = extractLargeDataUrlAssets({
+    outDir,
+    files: [jsPath, finalCssPath],
+  });
+  const extractedSummary = formatExtractedAssetSummary(extractedAssets);
+  if (extractedSummary) console.log(`[build] ${extractedSummary}`);
 
   const outputCode = await fs.readFile(jsPath, "utf8");
   const bareImportMatch = outputCode.match(

package/packages/sdk/src/build-source/scripts/utils/static-assets.mjs

@@ -0,0 +1,165 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+
+const defaultInlineLimit = 4096;
+
+const mimeExtensions = new Map([
+  ["image/png", ".png"],
+  ["image/jpeg", ".jpg"],
+  ["image/gif", ".gif"],
+  ["image/svg+xml", ".svg"],
+  ["image/webp", ".webp"],
+  ["image/avif", ".avif"],
+  ["image/x-icon", ".ico"],
+  ["font/woff", ".woff"],
+  ["font/woff2", ".woff2"],
+  ["font/ttf", ".ttf"],
+  ["application/vnd.ms-fontobject", ".eot"],
+  ["application/octet-stream", ".bin"],
+]);
+
+function readInlineLimit() {
+  const raw =
+    process.env.LOWCODE_WORKSPACE_ASSETS_INLINE_LIMIT ||
+    process.env.LOWCODE_ASSETS_INLINE_LIMIT ||
+    "";
+  if (!raw) return defaultInlineLimit;
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed) || parsed < 0) return defaultInlineLimit;
+  return parsed;
+}
+
+function parseDataUrl(value) {
+  if (!value.startsWith("data:")) return null;
+  const commaIndex = value.indexOf(",");
+  if (commaIndex < 0) return null;
+  const meta = value.slice(5, commaIndex);
+  const body = value.slice(commaIndex + 1);
+  const parts = meta.split(";").filter(Boolean);
+  const mime = (parts[0] || "application/octet-stream").toLowerCase();
+  if (!parts.slice(1).some((part) => part.toLowerCase() === "base64")) {
+    return null;
+  }
+  if (!/^[A-Za-z0-9+/=]+$/.test(body)) return null;
+  return { mime, buffer: Buffer.from(body, "base64") };
+}
+
+function resolveAssetFile(parsed, assetCache, assetsDir) {
+  const hash = crypto.createHash("sha256").update(parsed.buffer).digest("hex").slice(0, 16);
+  const ext = mimeExtensions.get(parsed.mime) || ".bin";
+  const cacheKey = `${parsed.mime}:${hash}`;
+  const cached = assetCache.get(cacheKey);
+  if (cached) return cached;
+
+  const fileName = `asset-${hash}${ext}`;
+  const filePath = path.join(assetsDir, fileName);
+  fs.mkdirSync(assetsDir, { recursive: true });
+  if (!fs.existsSync(filePath)) {
+    fs.writeFileSync(filePath, parsed.buffer);
+  }
+  const asset = {
+    fileName,
+    filePath,
+    mime: parsed.mime,
+    size: parsed.buffer.length,
+  };
+  assetCache.set(cacheKey, asset);
+  return asset;
+}
+
+function createExtractor({ inlineLimit, assetsDir, assetCache, emittedAssets }) {
+  return function extract(dataUrl) {
+    const parsed = parseDataUrl(dataUrl);
+    if (!parsed || parsed.buffer.length <= inlineLimit) return null;
+    const asset = resolveAssetFile(parsed, assetCache, assetsDir);
+    emittedAssets.set(asset.fileName, asset);
+    return asset;
+  };
+}
+
+function rewriteCss(content, extractAsset) {
+  let changed = false;
+  const code = content.replace(
+    /url\(\s*(["']?)(data:[^"'\\)]*?;base64,[A-Za-z0-9+/=]+)\1\s*\)/g,
+    (full, _quote, dataUrl) => {
+      const asset = extractAsset(dataUrl);
+      if (!asset) return full;
+      changed = true;
+      return `url("assets/${asset.fileName}")`;
+    },
+  );
+  return { changed, code };
+}
+
+function rewriteJs(content, extractAsset) {
+  let changed = false;
+  const code = content.replace(
+    /(["'])(data:[^"'\\]*?;base64,[A-Za-z0-9+/=]+)\1/g,
+    (full, _quote, dataUrl) => {
+      const asset = extractAsset(dataUrl);
+      if (!asset) return full;
+      changed = true;
+      return `new URL("assets/${asset.fileName}", import.meta.url).href`;
+    },
+  );
+  return { changed, code };
+}
+
+function rewriteFile(filePath, extractAsset) {
+  if (!fs.existsSync(filePath)) return { changed: false };
+  const ext = path.extname(filePath).toLowerCase();
+  if (ext !== ".css" && ext !== ".js" && ext !== ".mjs") {
+    return { changed: false };
+  }
+  const content = fs.readFileSync(filePath, "utf-8");
+  const result = ext === ".css" ? rewriteCss(content, extractAsset) : rewriteJs(content, extractAsset);
+  if (result.changed) {
+    fs.writeFileSync(filePath, result.code, "utf-8");
+  }
+  return { changed: result.changed };
+}
+
+export function extractLargeDataUrlAssets(options) {
+  const outDir = options?.outDir;
+  const files = (options?.files || []).filter(Boolean);
+  if (!outDir || files.length === 0) {
+    return { extracted: [], changedFiles: [] };
+  }
+
+  const inlineLimit =
+    typeof options.inlineLimit === "number" ? options.inlineLimit : readInlineLimit();
+  const assetsDir = path.join(outDir, options.assetsDir || "assets");
+  const assetCache = new Map();
+  const emittedAssets = new Map();
+  const extractAsset = createExtractor({
+    inlineLimit,
+    assetsDir,
+    assetCache,
+    emittedAssets,
+  });
+  const changedFiles = [];
+
+  for (const file of files) {
+    const result = rewriteFile(file, extractAsset);
+    if (result.changed) changedFiles.push(file);
+  }
+
+  return {
+    changedFiles,
+    extracted: Array.from(emittedAssets.values()),
+    inlineLimit,
+  };
+}
+
+export function formatExtractedAssetSummary(result) {
+  const count = result?.extracted?.length || 0;
+  if (!count) return "";
+  const total = result.extracted.reduce((sum, asset) => sum + asset.size, 0);
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  };
+  return `抽离静态资源 ${count} 个，${formatBytes(total)}，阈值 ${formatBytes(result.inlineLimit)}`;
+}

package/packages/sdk/src/build-source/scripts/utils/static-assets.test.ts

@@ -0,0 +1,65 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { extractLargeDataUrlAssets } from "./static-assets.mjs";
+
+let tempDirs: string[] = [];
+
+function createTempDir() {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "static-assets-"));
+  tempDirs.push(dir);
+  return dir;
+}
+
+function dataUrl(content: string, mime = "image/png") {
+  return `data:${mime};base64,${Buffer.from(content).toString("base64")}`;
+}
+
+afterEach(() => {
+  for (const dir of tempDirs) {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+  tempDirs = [];
+});
+
+describe("static asset extraction", () => {
+  it("keeps small data URLs inline and extracts large CSS/JS data URLs", () => {
+    const outDir = createTempDir();
+    const cssPath = path.join(outDir, "style.css");
+    const jsPath = path.join(outDir, "index.js");
+    const small = dataUrl("tiny");
+    const large = dataUrl("large-static-asset-content");
+
+    fs.writeFileSync(
+      cssPath,
+      `.hero{background:url("${large}")}.icon{background:url(${small})}`,
+      "utf-8",
+    );
+    fs.writeFileSync(
+      jsPath,
+      `const hero = "${large}"; const icon = "${small}"; export { hero, icon };`,
+      "utf-8",
+    );
+
+    const result = extractLargeDataUrlAssets({
+      outDir,
+      files: [cssPath, jsPath],
+      inlineLimit: 8,
+    });
+
+    expect(result.extracted).toHaveLength(1);
+    const [asset] = result.extracted;
+    expect(asset.fileName).toMatch(/^asset-[a-f0-9]{16}\.png$/);
+    expect(fs.existsSync(path.join(outDir, "assets", asset.fileName))).toBe(true);
+
+    const css = fs.readFileSync(cssPath, "utf-8");
+    const js = fs.readFileSync(jsPath, "utf-8");
+    expect(css).toContain(`url("assets/${asset.fileName}")`);
+    expect(css).toContain(small);
+    expect(js).toContain(`new URL("assets/${asset.fileName}", import.meta.url).href`);
+    expect(js).toContain(small);
+  });
+});