@lark-apaas/fullstack-vite-preset 1.0.1-beta.2 → 1.0.1-beta.21

package/lib/vite-plugins/vite-client-patch-plugin.js

@@ -0,0 +1,53 @@
+"use strict";
+/**
+ * Vite Client Patch Plugin
+ *
+ * 问题背景：
+ * 在云端开发环境（如通过反向代理 aiforce.run 访问）中，电脑休眠后唤醒，
+ * Vite HMR WebSocket 断连重连时会触发 location.reload()。
+ * 此时浏览器 HTTP/2 连接池中持有休眠前的死连接，reload 请求复用该死连接，
+ * 导致页面 blocked ~18s 后超时白屏（ERR_CONNECTION_TIMED_OUT）。
+ *
+ * 根本原因：
+ * Vite 的 @vite/client 在 vite:ws:disconnect 后调用 waitForSuccessfulPing()，
+ * WS ping 成功（新 TCP）后立即 location.reload()，
+ * 但 reload 走的是旧的死 HTTP/2 连接，不是新 TCP。
+ *
+ * 解决方案：
+ * 通过 Vite transform hook 拦截 @vite/client，直接移除 WS 重连后的 location.reload()。
+ * 用户若需要获取最新代码，手动刷新即可（符合云端 IDE 使用预期）。
+ *
+ * 适用范围：仅 dev server (apply: 'serve')
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viteClientPatchPlugin = viteClientPatchPlugin;
+/**
+ * 匹配 vite:ws:disconnect 处理器中的重连刷新代码：
+ *   await waitForSuccessfulPing(url.href);
+ *   location.reload();
+ */
+const RECONNECT_RELOAD_PATTERN = /(await waitForSuccessfulPing\(url\.href\);)\r?\n(\s*)location\.reload\(\);/;
+function viteClientPatchPlugin() {
+    return {
+        name: 'fullstack-vite-client-patch',
+        enforce: 'post',
+        apply: 'serve',
+        transform(code, id) {
+            if (!id.includes('vite/dist/client/client.mjs')) {
+                return;
+            }
+            if (!RECONNECT_RELOAD_PATTERN.test(code)) {
+                console.warn('[fullstack-vite-client-patch] Warning: Could not find the reconnect-reload pattern ' +
+                    'in @vite/client. The patch has NOT been applied. ' +
+                    'Check if this Vite version changed the vite:ws:disconnect handler.');
+                return;
+            }
+            // Remove location.reload() — suppress auto-reload after WS reconnect.
+            // In cloud environments, the browser's stale HTTP/2 connection causes ~18s timeout on reload.
+            // Users can manually refresh when needed.
+            const patchedCode = code.replace(RECONNECT_RELOAD_PATTERN, (_, pingLine) => pingLine);
+            return { code: patchedCode };
+        },
+    };
+}
+//# sourceMappingURL=vite-client-patch-plugin.js.map

package/lib/vite-plugins/vite-client-patch-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-client-patch-plugin.js","sourceRoot":"","sources":["../../src/vite-plugins/vite-client-patch-plugin.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;AAYH,sDA+BC;AAvCD;;;;GAIG;AACH,MAAM,wBAAwB,GAC5B,4EAA4E,CAAC;AAE/E,SAAgB,qBAAqB;IACnC,OAAO;QACL,IAAI,EAAE,6BAA6B;QACnC,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,OAAO;QAEd,SAAS,CAAC,IAAI,EAAE,EAAE;YAChB,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC,EAAE,CAAC;gBAChD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBACzC,OAAO,CAAC,IAAI,CACV,qFAAqF;oBACnF,mDAAmD;oBACnD,oEAAoE,CACvE,CAAC;gBACF,OAAO;YACT,CAAC;YAED,sEAAsE;YACtE,8FAA8F;YAC9F,0CAA0C;YAC1C,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAC9B,wBAAwB,EACxB,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAC1B,CAAC;YAEF,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;QAC/B,CAAC;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lark-apaas/fullstack-vite-preset",
-  "version": "1.0.1-beta.2",
+  "version": "1.0.1-beta.21",
   "files": [
     "lib",
     "src/empty.css",
     "src/inspector-stub.js",
     "src/module-alias/clsx.mjs",
     "src/module-alias/echarts.mjs",
+    "src/module-alias/echarts-for-react.mjs",
     "src/module-alias/registry_echarts_theme.mjs",
     "src/overlay"
   ],
@@ -32,14 +33,19 @@
     "@babel/parser": "^7.28.0",
     "@babel/traverse": "^7.28.0",
     "@babel/types": "^7.28.2",
-    "@lark-apaas/devtool-kits": "1.2.16-beta.3",
-    "@lark-apaas/miaoda-inspector-jsx-runtime": "^1.0.1",
-    "@lark-apaas/vite-inspector-plugin": "^1.0.1",
+    "@lark-apaas/devtool-kits": "1.2.16-beta.5",
+    "@lark-apaas/styled-jsx": "^1.0.1",
+    "@lark-apaas/vite-inspector-plugin": "^1.0.2",
     "@vitejs/plugin-react": "^4.5.0",
     "clsx": "^2.1.1",
     "colorjs.io": "^0.5.2",
+    "core-js": "^3.40.0",
     "dotenv": "^16.4.5",
     "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.2",
+    "glob": "^11.0.0",
+    "html-minifier-terser": "^7.2.0",
+    "lightningcss": "^1.28.0",
     "postcss-import": "^16.1.1",
     "styled-jsx": "^5.1.6",
     "tailwind-merge": "^2.5.5",

package/src/module-alias/echarts-for-react.mjs

@@ -0,0 +1,129 @@
+import React from 'react';
+import OriginalReactECharts from 'echarts-for-react';
+import Color from 'colorjs.io';
+
+/**
+ * Convert HSL/HSLA color to hex or rgba
+ */
+export function convertColorToHex(color) {
+  if (typeof color !== 'string') return color;
+
+  const trimmed = color.trim();
+  if (!trimmed.startsWith('hsl')) {
+    return color;
+  }
+
+  try {
+    const colorObj = new Color(trimmed);
+
+    if (colorObj.alpha < 1) {
+      return colorObj.to('srgb').toString({ format: 'rgba' });
+    } else {
+      return colorObj.to('srgb').toString({ format: 'hex' });
+    }
+  } catch (error) {
+    console.warn(`Failed to convert color: ${color}`, error);
+    return color;
+  }
+}
+
+function convertColorValue(propValue, visited) {
+  if (typeof propValue === 'string') {
+    return convertColorToHex(propValue);
+  }
+  if (Array.isArray(propValue)) {
+    return propValue.map((item) =>
+      typeof item === 'string' ? convertColorToHex(item) : transformColors(item, visited)
+    );
+  }
+  return transformColors(propValue, visited);
+}
+
+/**
+ * Deep traverse object to transform all HSL colors in 'color' property
+ */
+export function transformColors(value, visited = new WeakSet()) {
+  if (value === null || value === undefined) return value;
+  if (typeof value !== 'object') return value;
+  if (visited.has(value)) return value;
+  if (value instanceof Date || value instanceof RegExp) return value;
+
+  visited.add(value);
+
+  if (Array.isArray(value)) {
+    return value.map((item) => transformColors(item, visited));
+  }
+
+  const result = {};
+  for (const key in value) {
+    if (!Object.prototype.hasOwnProperty.call(value, key)) continue;
+
+    const propValue = value[key];
+
+    if (key === 'color') {
+      if (typeof propValue === 'function') {
+        result[key] = (...args) => convertColorValue(propValue(...args), visited);
+      } else {
+        result[key] = convertColorValue(propValue, visited);
+      }
+    } else {
+      result[key] = transformColors(propValue, visited);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Remove label.color and emphasis.label.color from funnel series
+ * to let ECharts use default contrast colors
+ */
+function removeFunnelLabelColor(option) {
+  if (!Array.isArray(option.series)) return option;
+
+  const series = option.series.map((item) => {
+    if (item?.type !== 'funnel') return item;
+
+    let result = { ...item };
+
+    // remove label.color
+    if (result.label && typeof result.label === 'object') {
+      const { color: _, ...labelRest } = result.label;
+      result = { ...result, label: labelRest };
+    }
+
+    // remove emphasis.label.color
+    const emphasis = result.emphasis;
+    if (emphasis?.label && typeof emphasis.label === 'object') {
+      const { color: _, ...emphasisLabelRest } = emphasis.label;
+      result = { ...result, emphasis: { ...emphasis, label: emphasisLabelRest } };
+    }
+
+    return result;
+  });
+
+  return { ...option, series };
+}
+
+/**
+ * EChartsReact wrapper component
+ * - Automatically converts HSL colors to hex in option
+ * - Removes label.color from funnel series
+ */
+export class EChartsReact extends React.Component {
+  render() {
+    const { option, ...rest } = this.props;
+
+    const transformedOption = option
+      ? removeFunnelLabelColor(transformColors(option))
+      : option;
+
+    return React.createElement(OriginalReactECharts, {
+      option: transformedOption,
+      ...rest,
+    });
+  }
+}
+
+export * from 'echarts-for-react';
+export default EChartsReact;

package/src/module-alias/echarts.mjs

@@ -2,10 +2,23 @@ import * as echartsNamespace from 'echarts';
 export { echartsNamespace as echarts };
 export * from 'echarts';
 
+import * as echarts from 'echarts';
 import { registerTheme } from 'echarts';
 import { getShadcnEChartsTheme } from './registry_echarts_theme.mjs';
 
 let isRegistered = false;
+let isWindowMounted = false;
+
+/**
+ * Mount echarts to window for debugging
+ */
+export function registerEchartsToWindow() {
+  if (isWindowMounted || typeof globalThis.window === 'undefined') {
+    return;
+  }
+  isWindowMounted = true;
+  globalThis.echarts = echarts;
+}
 
 export function resgisterEchartsTheme() {
   // Register ud theme, only register once globally
@@ -26,4 +39,5 @@ export function resgisterEchartsTheme() {
   }
 }
 
+registerEchartsToWindow();
 resgisterEchartsTheme();

package/src/module-alias/registry_echarts_theme.mjs

@@ -40,7 +40,7 @@ export function generateEChartsTheme(element = document.body) {
     color: chartColors,
     backgroundColor: 'transparent',
     textStyle: {
-      color: foreground,
+      // color: foreground,
     },
     title: {
       textStyle: {

package/lib/vite-plugins/inspector-css-plugin.d.ts

@@ -1,19 +0,0 @@
-import type { Plugin } from 'vite';
-/**
- * Vite plugin to handle inspector CSS imports
- *
- * Creates an empty inspector.dev.css stub file if it doesn't exist.
- * This is needed because:
- * 1. @lark-apaas/client-toolkit imports @/inspector.dev.css
- * 2. Vite's internal postcss-import processes @import statements before
- *    custom plugins can intercept them
- * 3. The inspector UI injects its own styles at runtime, so this file
- *    can be empty
- *
- * In production mode, the stub file is cleaned up after build.
- * In development mode, the stub file is kept (or user can provide real CSS).
- */
-export declare function inspectorCssPlugin(options: {
-    isDev: boolean;
-}): Plugin;
-//# sourceMappingURL=inspector-css-plugin.d.ts.map

package/lib/vite-plugins/inspector-css-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector-css-plugin.d.ts","sourceRoot":"","sources":["../../src/vite-plugins/inspector-css-plugin.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAKnD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,OAAO,CAAA;CAAE,GAAG,MAAM,CA8CtE"}

package/lib/vite-plugins/inspector-css-plugin.js

@@ -1,70 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inspectorCssPlugin = inspectorCssPlugin;
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const INSPECTOR_CSS_FILENAME = 'inspector.dev.css';
-const EMPTY_CSS_CONTENT = '/* Inspector CSS - placeholder for postcss-import */\n';
-/**
- * Vite plugin to handle inspector CSS imports
- *
- * Creates an empty inspector.dev.css stub file if it doesn't exist.
- * This is needed because:
- * 1. @lark-apaas/client-toolkit imports @/inspector.dev.css
- * 2. Vite's internal postcss-import processes @import statements before
- *    custom plugins can intercept them
- * 3. The inspector UI injects its own styles at runtime, so this file
- *    can be empty
- *
- * In production mode, the stub file is cleaned up after build.
- * In development mode, the stub file is kept (or user can provide real CSS).
- */
-function inspectorCssPlugin(options) {
-    const { isDev } = options;
-    let createdStubFile = null;
-    return {
-        name: 'vite-inspector-css',
-        enforce: 'pre',
-        configResolved(config) {
-            const rootDir = config.root || process.cwd();
-            const stubPath = path_1.default.resolve(rootDir, 'client/src', INSPECTOR_CSS_FILENAME);
-            // Create stub file if it doesn't exist (both dev and production)
-            // This prevents Vite's internal postcss-import from failing
-            if (!fs_1.default.existsSync(stubPath)) {
-                try {
-                    // Ensure directory exists
-                    const dir = path_1.default.dirname(stubPath);
-                    if (!fs_1.default.existsSync(dir)) {
-                        fs_1.default.mkdirSync(dir, { recursive: true });
-                    }
-                    fs_1.default.writeFileSync(stubPath, EMPTY_CSS_CONTENT);
-                    // Only track for cleanup in production mode
-                    if (!isDev) {
-                        createdStubFile = stubPath;
-                    }
-                    console.log(`[vite-inspector-css] Created stub: ${stubPath}`);
-                }
-                catch (e) {
-                    console.warn(`[vite-inspector-css] Could not create stub file: ${e}`);
-                }
-            }
-        },
-        buildEnd() {
-            // Clean up the stub file after production build completes
-            if (createdStubFile && fs_1.default.existsSync(createdStubFile)) {
-                try {
-                    fs_1.default.unlinkSync(createdStubFile);
-                    console.log(`[vite-inspector-css] Cleaned up stub: ${createdStubFile}`);
-                }
-                catch (e) {
-                    console.warn(`[vite-inspector-css] Could not clean up stub file: ${e}`);
-                }
-                createdStubFile = null;
-            }
-        },
-    };
-}
-//# sourceMappingURL=inspector-css-plugin.js.map

package/lib/vite-plugins/inspector-css-plugin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector-css-plugin.js","sourceRoot":"","sources":["../../src/vite-plugins/inspector-css-plugin.ts"],"names":[],"mappings":";;;;;AAqBA,gDA8CC;AAnED,4CAAoB;AACpB,gDAAwB;AAGxB,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AACnD,MAAM,iBAAiB,GAAG,wDAAwD,CAAC;AAEnF;;;;;;;;;;;;;GAaG;AACH,SAAgB,kBAAkB,CAAC,OAA2B;IAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAC1B,IAAI,eAAe,GAAkB,IAAI,CAAC;IAE1C,OAAO;QACL,IAAI,EAAE,oBAAoB;QAC1B,OAAO,EAAE,KAAK;QAEd,cAAc,CAAC,MAAsB;YACnC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;YAC7C,MAAM,QAAQ,GAAG,cAAI,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,sBAAsB,CAAC,CAAC;YAE7E,iEAAiE;YACjE,4DAA4D;YAC5D,IAAI,CAAC,YAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC;oBACH,0BAA0B;oBAC1B,MAAM,GAAG,GAAG,cAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;oBACnC,IAAI,CAAC,YAAE,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;wBACxB,YAAE,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;oBACzC,CAAC;oBACD,YAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;oBAC9C,4CAA4C;oBAC5C,IAAI,CAAC,KAAK,EAAE,CAAC;wBACX,eAAe,GAAG,QAAQ,CAAC;oBAC7B,CAAC;oBACD,OAAO,CAAC,GAAG,CAAC,sCAAsC,QAAQ,EAAE,CAAC,CAAC;gBAChE,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,EAAE,CAAC,CAAC;gBACxE,CAAC;YACH,CAAC;QACH,CAAC;QAED,QAAQ;YACN,0DAA0D;YAC1D,IAAI,eAAe,IAAI,YAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;gBACtD,IAAI,CAAC;oBACH,YAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;oBAC/B,OAAO,CAAC,GAAG,CAAC,yCAAyC,eAAe,EAAE,CAAC,CAAC;gBAC1E,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,EAAE,CAAC,CAAC;gBAC1E,CAAC;gBACD,eAAe,GAAG,IAAI,CAAC;YACzB,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}