@airiot/cli 1.0.12 → 1.0.13

package/config/envs.js

@@ -118,6 +118,13 @@ const getModule = () => {
   return modules;
 };
 
+const getProxy = () => {
+  if (developConfig.proxy) {
+    return developConfig.proxy;
+  }
+  return {};
+}
+
 const translateKeys = () => {
   const envs = process.env;
   const args = process.argv;
@@ -139,4 +146,24 @@ const translateKeys = () => {
   return { appid, secret };
 }
 
-export { getHost, getBaseUrl, getModule, getOpsInfo, developConfig, translateKeys };
+const getDllMode = () => {
+  const envs = process.env;
+  const args = process.argv;
+
+  let dllMode = "umd";
+
+  if (developConfig.dllMode) {
+    dllMode = developConfig.dllMode;
+  } else {
+    const dllArgs = args.filter(arg => arg.startsWith("--dllMode="));
+    if (dllArgs.length !== 0) {
+      dllMode = dllArgs[0].replace('--dllMode=', '');
+    } else if (envs.IOT_DLL_MODE) {
+      dllMode = envs.IOT_DLL_MODE;
+    }
+  }
+
+  return dllMode;
+}
+
+export { getHost, getBaseUrl, getModule, getOpsInfo, getProxy, getDllMode, developConfig, translateKeys };

package/config/eslint.config.js

@@ -28,8 +28,6 @@ export default defineConfig([
       sourceType: 'module',
       globals: {
         ...globals.browser,
-        moment: "readonly",
-        _: "readonly",
         _t1: "writable",
         _r: 'writable',
         _t: 'writable',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@airiot/cli",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "AIRIOT平台前端包管理工具",
   "type": "module",
   "scripts": {},

package/scripts/start.js

@@ -1,6 +1,6 @@
 import chalk from 'chalk';
 import {createServer} from 'vite';
-import { getHost, getBaseUrl } from '../config/envs.js';
+import { getHost, getBaseUrl, getProxy } from '../config/envs.js';
 import paths from '../config/paths.js';
 import plugins from '../vite-plugin/index.js';
 
@@ -8,6 +8,7 @@ const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 
 const host = getHost();
 const baseUrl = getBaseUrl();
+const proxyConfig = getProxy();
 
 console.log(chalk.green('[iot:envs] 请求 IOT_URL 为: ' + host + ', 基础路径为: ' + baseUrl));
 
@@ -29,6 +30,7 @@ console.log(chalk.green('[iot:envs] 请求 IOT_URL 为: ' + host + ', 基础路
       changeOrigin: true
     }
   }
+  Object.assign(proxy, proxyConfig);
 
   const server = await createServer({
     configFile: false,

package/vite-plugin/externals.js

@@ -1,6 +1,8 @@
 export default {
   "react": "React",
   "react-dom": "ReactDOM",
+  "react/jsx-runtime": "ReactJSXRuntime",
+  "react/jsx-dev-runtime": "ReactJSXDevRuntime",
   "react-dnd": "ReactDnD",
   "react-dnd-html5-backend": "ReactDnDHTML5Backend",
   "react-router": "ReactRouter",

package/vite-plugin/importmap.js

@@ -1,4 +1,44 @@
 export default {
-  "react-router": "https://esm.sh/react-router@6",
-  "react-router-dom": "https://esm.sh/react-router-dom@6"
+  "react": "/node_modules/@airiot/dll/esm/react.js",
+  "react/jsx-runtime": "/node_modules/@airiot/dll/esm/react.js",
+  "react/jsx-dev-runtime": "/node_modules/@airiot/dll/esm/react.js",
+  "react-dom": "/node_modules/@airiot/dll/esm/react.js",
+  "react-dom/client": "/node_modules/@airiot/dll/esm/react.js",
+
+  // React Router
+  "history": "/node_modules/@airiot/dll/esm/history.js",
+  "react-router": "/node_modules/@airiot/dll/esm/react-router.js",
+  "react-router-dom": "/node_modules/@airiot/dll/esm/react-router-dom.js",
+
+  // React DnD
+  "react-dnd": "/node_modules/@airiot/dll/esm/react-dnd_.js",
+  "react-dnd-html5-backend": "/node_modules/@airiot/dll/esm/react-dnd-html5-backend.js",
+
+  // Utility Libraries
+  "lodash": "/node_modules/@airiot/dll/esm/lodash.js",
+  "async": "/node_modules/@airiot/dll/esm/async.js",
+  "moment": "/node_modules/@airiot/dll/esm/moment.js",
+  "dayjs": "/node_modules/@airiot/dll/esm/dayjs.js",
+
+  // Excel
+  "xlsx": "/node_modules/@airiot/dll/esm/xlsx_.js",
+
+  // Jotai State Management
+  "jotai": "/node_modules/@airiot/dll/esm/jotai.js",
+  "jotai/utils": "/node_modules/@airiot/dll/esm/jotai/utils.js",
+
+  // Ant Design
+  "antd": "/node_modules/@airiot/dll/esm/antd.js",
+  "@ant-design/icons": "/node_modules/@airiot/dll/esm/@ant-design/icons.js",
+  // "xui": "/node_modules/@airiot/dll/esm/xui.js",
+
+  // Xadmin Libraries
+  "xadmin": "/node_modules/@airiot/dll/esm/xadmin.js",
+  "xadmin-i18n": "/node_modules/@airiot/dll/esm/xadmin-i18n.js",
+  "xadmin-ui": "/node_modules/@airiot/dll/esm/xadmin-ui.js",
+  "xadmin-form": "/node_modules/@airiot/dll/esm/xadmin-form.js",
+  "xadmin-model": "/node_modules/@airiot/dll/esm/xadmin-model.js",
+  "xadmin-auth": "/node_modules/@airiot/dll/esm/xadmin-auth.js",
+  "xadmin-antd": "/node_modules/@airiot/dll/esm/xadmin-antd.js",
+  // "xadmin-xui": "/node_modules/@airiot/dll/esm/xadmin-xui.js"
 }

package/vite-plugin/importmaps.js

@@ -0,0 +1,108 @@
+import path from "path";
+import { emptyDirSync } from 'fs-extra';
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+
+export default function importMapPlugin(
+  options
+) {
+  const { imports, externals, autoRestart = false } = options;
+
+  let resolvedImports = imports ?? {};
+  const externalCacheDir = path.join(process.cwd(), 'node_modules', '.vite_external');
+
+  return {
+    name: "vite-plugin-import-map",
+    enforce: "pre",
+
+    config() {
+
+      resolvedImports = Object.fromEntries(
+        Object.entries(resolvedImports).map(([key, value]) => {
+          if (!value.startsWith("/") && !value.startsWith("http://") && !value.startsWith("https://") && !value.startsWith("//")) {
+            value = path.resolve(process.cwd(), value);
+          }
+
+          return [key, value];
+        })
+      );
+
+      if (!existsSync) {
+          mkdirSync(externalCacheDir);
+      }
+      else {
+          emptyDirSync(externalCacheDir);
+      }
+
+      return {
+        build: {
+          rollupOptions: {
+            external: Object.keys(resolvedImports),
+          },
+        },
+        optimizeDeps: {
+          //exclude: Object.keys(resolvedImports).filter(libName => !externals[libName]),
+        },
+        resolve: {
+          alias: Object.keys(resolvedImports).map((libName) => {
+            if(externals[libName]) {
+              const libPath = path.join(externalCacheDir, `${libName.replace(/\//g, '_')}.js`);
+              writeFileSync(libPath, `module.exports = ${externals[libName]};`);
+              return {
+                  find: new RegExp(`^${libName}$`),
+                  replacement: libPath
+              };
+            }
+            return null
+          }).filter(Boolean),
+        },
+      };
+    },
+
+    transformIndexHtml(html) {
+      // const importMapJson = JSON.stringify({ imports: resolvedImports });
+      // const scriptTag = `<script type="importmap">${importMapJson}</script>`;
+      const scriptTag = `<script type="module">${Object.keys(resolvedImports).map(libName => externals[libName] ?  `import * as ${externals[libName]} from "${libName}";window.${externals[libName]} = ${externals[libName]}; ` : '').join(' ')}</script>`;
+      return html.replace("</head>", `${scriptTag}</head>`);
+    },
+
+    // handleHotUpdate({ file, server }) {
+    //   if (
+    //     importMapPath &&
+    //     path.resolve(file) === path.resolve(process.cwd(), importMapPath)
+    //   ) {
+    //     try {
+    //       const fileContents = fs.readFileSync(file, "utf-8");
+    //       const parsedData = JSON.parse(fileContents);
+
+    //       if (parsedData.imports) {
+    //         resolvedImports = parsedData.imports;
+    //         console.log(
+    //           "[vite-plugin-import-map] Updated import map on the fly:",
+    //           resolvedImports
+    //         );
+    //       }
+
+    //       if (autoRestart) {
+    //         console.log(
+    //           "[vite-plugin-import-map] Restarting Vite server to apply changes..."
+    //         );
+    //         server.restart();
+    //       } else {
+    //         console.log(
+    //           "[vite-plugin-import-map] Import map updated. Please restart Vite manually to apply changes."
+    //         );
+    //       }
+
+    //       server.ws.send({
+    //         type: "full-reload",
+    //       });
+    //     } catch (error) {
+    //       console.error(
+    //         "[vite-plugin-import-map] Error reading or parsing import-map.json:",
+    //         error
+    //       );
+    //     }
+    //   }
+    // },
+  };
+}

package/vite-plugin/index.js

@@ -9,12 +9,16 @@ import jsInJsxPlugin from './js-in-jsx.js'
 import svgInline from './svg-inline.js';
 import buildinfoPlugin from './buildinfo.js';
 import lazyImportPlugin from './lazyImport.js';
+import importMapPlugin from "./importmaps.js";
 
 import externals from './externals.js'
+import importmap from './importmap.js';
 import paths from '../config/paths.js';
 
+import { getDllMode } from '../config/envs.js';
 
 const getPlugins = async (mode) => {
+  const dllMode = getDllMode() || "umd";
 
   const plugins = [
     react({
@@ -23,7 +27,11 @@ const getPlugins = async (mode) => {
     commonjs({
       requireReturnsDefault: 'preferred'
     }),
-    createExternal({
+    dllMode == "esm" && importMapPlugin({
+      imports: importmap,
+      externals
+    }),
+    dllMode == "umd" && createExternal({
       externals
     }),
     cssInjectedByJsPlugin({

package/vite-plugin/js-in-jsx.js

@@ -1,61 +1,24 @@
-import fs from "node:fs/promises";
-import url from "node:url";
-import react from "@vitejs/plugin-react";
 import * as vite from "vite";
 
-// Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
-function escapeRegExp(string) {
-  // $& means the whole matched string
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); 
-}
-
-// NOTE: Keep trailing slash to use resulting path in prefix matching.
-const srcDir = url.fileURLToPath(new URL("./src/", import.meta.url));
-// NOTE: Since ESBuild evaluates this regex using Go's engine, it is not
-// clear whether the JS-specific regex escape logic is sound.
-const srcJsRegex = new RegExp(`^${escapeRegExp(srcDir)}.*\\.js$`);
-
 const vitePlugin = () => ({
   name: "js-in-jsx",
-  enforce: "pre",
+  enforce: "pre", // 必须在 Vite 核心插件之前运行
+  
   config: () => ({
-    build: {
-      commonjsOptions: {
-        transformMixedEsModules: true,
-      },
-    },
-    esbuild: {
-      loader: "jsx",
-      include: /\/src\/.*\.js$|\/src\/.*\.jsx$/,
-      exclude: [],
-    },
-    optimizeDeps: {
-      esbuildOptions: {
-        loader: {
-          ".js": "jsx",
-          ".ts": "tsx",
-          ".svg": "text",
-        },
+  esbuild: {
+    // 关键：使用对象映射，精确控制 .js 文件使用 jsx loader
+    // 而不影响 .ts 使用 ts loader
+    loader: "tsx", // 默认兜底（可选）
+    include: /src\/.*\.[tj]sx?$/, // 包含 .js, .ts, .jsx, .tsx
+    exclude: [],
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        '.js': 'jsx',
       },
     },
-  }),
-  async transform(code, id) {
-    // Ignore Rollup virtual modules.
-    if (id.startsWith("\0")) {
-      return;
-    }
-    // Strip off any "proxy id" component before testing against path.
-    // See: https://github.com/vitejs/vite-plugin-react-swc/blob/a1bfc313612a8143a153ce87f52925059459aeb2/src/index.ts#L89
-    // See: https://rollupjs.org/plugin-development/#inter-plugin-communication
-    [id] = id.split("?");
-    if (id.startsWith(srcDir) && id.endsWith(".js")) {
-      return await vite.transformWithEsbuild(code, id, {
-        loader: "jsx",
-        jsx: "automatic",
-        jsxDev: import.meta.env.DEV,
-      });
-    }
-  }
+  }})
 });
 
-export default vitePlugin
+export default vitePlugin;

package/vite-plugin/plugin.js

@@ -1,7 +1,9 @@
 import paths from '../config/paths.js'
 import { promises as fsPromises } from 'fs';
 import fetch from 'node-fetch';
-import { getBaseUrl, getHost, developConfig } from '../config/envs.js';
+import { getBaseUrl, getHost, developConfig, getDllMode } from '../config/envs.js';
+
+import imports from './importmap.js'
 
 const jsonData = await fsPromises.readFile(paths.appPackageJson, 'utf-8');
 const htmlTpl = await fsPromises.readFile(paths.appHtml, 'utf-8');
@@ -15,15 +17,22 @@ const findModule = (scripts, packageName) => {
 const loadOnline = true
 const host = getHost()
 const basePath = getBaseUrl() + '/node_modules'
+const baseUrl = getBaseUrl()
+
+const importMap = Object.fromEntries(
+  Object.entries(imports).map(([key, value]) => {
+    return [key, baseUrl + value];
+  })
+);
 
 const defaultModules = [
-  '@airiot/i18n', '@airiot/theme', '@airiot/core'
+  '@airiot/i18n', '@airiot/core'
 ]
 
 let scripts, frontScripts;
 
-let dllScript = basePath + '/@airiot/dll/dist/iot.min.js',
-  dllDevScript = basePath + '/@airiot/dll/dist/iot.js';
+let dllScript = developConfig.dll?.url || (basePath + '/@airiot/dll/dist/iot.min.js'),
+  dllDevScript = developConfig.dll?.devUrl || (basePath + '/@airiot/dll/dist/iot.js');
 
 const filterDll = s => {
   if(s.indexOf("@airiot/dll") >= 0) {
@@ -133,9 +142,17 @@ const getHtmlScripts = async (html, isAdmin, mode) => {
     await loadPackageScripts()
   }
   const appendScripts = isAdmin ? scripts : frontScripts
+
+  const dllMod = getDllMode() || "umd";
+  const dllScripts = dllMod == "umd" ? [
+    { tag: 'script', attrs: { src: mode == 'dev' ? dllDevScript : dllScript }, injectTo: 'body' },
+  ] : ( dllMod == "esm" ? [
+    { tag: 'script', attrs: { type: 'importmap' }, children: JSON.stringify({ imports: importMap }), injectTo: 'head' },
+  ] : [] )
+
   return [
+    ...dllScripts,
     { tag: 'script', attrs: { }, children: 'window._r = s => s; window._t1 = s => s', injectTo: 'body-prepend' },
-    { tag: 'script', attrs: { src: mode == 'dev' ? dllDevScript : dllScript }, injectTo: 'body' },
     ...appendScripts.map(script => ({ tag: 'script', attrs: { ...script }, injectTo: 'body' })),
     { tag: 'script', attrs: { type: 'module' }, children: '__app__.start()', injectTo: 'body' },
   ]
@@ -164,6 +181,8 @@ const airiotPlugin = (mode) => {
                 return html.replace('<body>', '<body>' + makeScriptTag(script))
               } else if(script.injectTo == 'body') {
                 return html.replace('</body>', makeScriptTag(script) + '</body>')
+              } else if(script.injectTo == 'head') {
+                return html.replace('</head>', makeScriptTag(script) + '</head>')
               }
               return html
             }, htmlTpl)