xshell 1.0.213 → 1.1.0

package/Terminal.js

@@ -10,7 +10,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import { Model } from 'react-object-model';
 import { assert, defer, genid } from "./utils.browser.js";
 export function Terminal({ font }) {
-    let rterminal = useRef();
+    let rterminal = useRef(undefined);
     useEffect(() => {
         (async () => {
             await document.fonts.ready;

package/builder.d.ts

@@ -6,10 +6,14 @@ import { Lock } from './utils.ts';
 export interface Dependency {
     /** 项目隐含的子依赖 */
     dependencies?: string[];
-    /** 开发环境依赖的 .js 文件 */
-    devs?: string[];
-    /** 生产环境依赖的 .js 文件 */
-    productions?: string[];
+    /** 开发环境依赖的 .js 文件
+        string 类型时为 node_modules 下的相对路径，输出到 {fpd_out}vendors/ 同样的相对路径
+        AssetOption 类型时见 {@link AssetOption} */
+    devs?: (string | AssetOption)[];
+    /** 生产环境依赖的 .js 文件
+        string 类型时为 node_modules 下的相对路径，输出到 {fpd_out}vendors/ 同样的相对路径
+        AssetOption 类型时见 {@link AssetOption} */
+    productions?: (string | AssetOption)[];
     /** 需要直接复制到输出目录的资源 */
     assets?: {
         productions: string[];
@@ -17,11 +21,11 @@ export interface Dependency {
     };
     /** .map 代码映射 */
     maps?: {
-        productions?: string[];
-        devs?: string[];
+        productions?: (string | AssetOption)[];
+        devs?: (string | AssetOption)[];
     };
 }
-type DependencyId = 'react' | 'react-dom' | 'lodash' | 'jquery' | 'xterm' | 'swiper' | 'dayjs' | 'antd' | 'antd-icons' | 'vscode-oniguruma' | 'antd-plots' | 'gridstack' | 'quill' | 'monaco' | 'echarts';
+type DependencyId = 'react' | 'lodash' | 'jquery' | 'xterm' | 'swiper' | 'dayjs' | 'antd' | 'antd-icons' | 'vscode-oniguruma' | 'antd-plots' | 'gridstack' | 'quill' | 'monaco' | 'echarts';
 export interface HtmlOptions {
     title: string;
     /** `index.js` 也可以设置 entries 中的其他项, 应填写相对于 fpd_out 的路径 */
@@ -45,9 +49,9 @@ export interface HtmlOptions {
     notice?: boolean;
 }
 interface AssetOption {
-    /** 相对 fpd_root 的路径 */
+    /** 相对 fpd_root 的路径，或者绝对路径 */
     src: string;
-    /** 默认为 {fpd_out}/ 加上 src 中的路径 */
+    /** 相对 fpd_out 的路径，或者绝对路径，默认等于 src 的值 */
     out?: string;
 }
 type Assets = {
@@ -137,18 +141,19 @@ export declare class Bundler {
     close(): Promise<void>;
     build_all(print?: boolean): Promise<void>;
     build_all_and_close(print?: boolean): Promise<void>;
+    build_and_close(print?: boolean): Promise<void>;
     build_htmls(print?: {
         info: boolean;
         files: boolean;
     }): Promise<void>;
-    resolve_dependencies(dependency_ids?: DependencyId[], resolveds?: Set<DependencyId>): Set<DependencyId>;
+    resolve_dependencies(dependency_ids: DependencyId[], resolveds?: Set<DependencyId>): Set<DependencyId>;
     /** 解析依赖的文件
         - dependencies: 依赖 id
         - assets: false 时只包括在 script 标签加载的文件;  true 时包括 assets, maps 等 */
-    resolve_dependency_files(_dependencies: DependencyId[], assets: boolean, { production, source_map }?: {
+    resolve_dependency_assets(_dependencies: DependencyId[], assets: boolean, { production, source_map }?: {
         production?: boolean;
         source_map?: boolean;
-    }): string[];
+    }): (string | AssetOption)[];
     copy_files({ dependencies, production, assets, fpd_root, fpd_out, print }?: {
         dependencies?: DependencyId[];
         production?: boolean;

package/builder.js

@@ -15,15 +15,23 @@ const monaco_files = [
     // 'language/typescript/tsMode.js',
     // 'language/typescript/tsWorker.js',
 ];
+function get_react_js(production, src, map) {
+    return `${src ? import.meta.dirname.fpd : 'vendors/react/'}react.${production ? 'production' : 'development'}.js${map ? '.map' : ''}`;
+}
+function get_react_asset(production, map) {
+    return {
+        src: get_react_js(production, true, map),
+        out: get_react_js(production, false, map),
+    };
+}
 const dependencies = {
     react: {
-        productions: ['react/umd/react.production.min.js'],
-        devs: ['react/umd/react.development.js'],
-    },
-    'react-dom': {
-        dependencies: ['react'],
-        productions: ['react-dom/umd/react-dom.production.min.js'],
-        devs: ['react-dom/umd/react-dom.development.js'],
+        productions: [get_react_asset(true, false)],
+        devs: [get_react_asset(false, false)],
+        maps: {
+            productions: [get_react_asset(true, true)],
+            devs: [get_react_asset(false, true)],
+        }
     },
     lodash: {
         productions: ['lodash/lodash.min.js'],
@@ -45,7 +53,7 @@ const dependencies = {
         productions: ['dayjs/dayjs.min.js'],
     },
     antd: {
-        dependencies: ['dayjs', 'react', 'react-dom'],
+        dependencies: ['dayjs', 'react'],
         productions: ['antd/dist/antd.min.js'],
         devs: ['antd/dist/antd.js'],
         maps: {
@@ -104,6 +112,16 @@ const dependencies = {
         }
     }
 };
+function get_asset_out(asset) {
+    return typeof asset === 'string'
+        ? asset
+        : asset.out || asset.src;
+}
+function get_vendor_asset_out(asset) {
+    return typeof asset === 'string'
+        ? `vendors/${asset}`
+        : asset.out || asset.src;
+}
 export class Bundler {
     name;
     fpd_root;
@@ -214,7 +232,9 @@ export class Bundler {
             // 取全局变量 window.React 的值作为 import { useState } from 'react' 中 { ... } 这部分的结果，再解构里面的 useState 属性
             externals: filter_values({
                 react: 'React',
+                'react/jsx-runtime': 'ReactJSX',
                 'react-dom': 'ReactDOM',
+                'react-dom/client': 'ReactDOMClient',
                 jquery: '$',
                 ...target === 'web' ? {
                     lodash: '_',
@@ -470,17 +490,17 @@ export class Bundler {
     }
     async build_all_and_close(print = true) {
         await Promise.all([
-            (async () => {
-                await this.build(print);
-                await this.close();
-            })(),
+            this.build_and_close(print),
             this.copy_files({ print: { info: print, files: false } }),
             this.target === 'web' && this.htmls && this.build_htmls({ info: print, files: false })
         ]);
     }
+    async build_and_close(print = true) {
+        await this.build(print);
+        await this.close();
+    }
     async build_htmls(print = { info: true, files: false }) {
-        await Promise.all(Object.entries(this.htmls).map(async ([fp_html, { entry = 'index.js', device_viewport: device_width = false, icon, manifest, dependencies: _dependencies = this.dependencies, title, scripts, mscripts, notice = false, heads, }]) => {
-            const get = (asset) => typeof asset === 'string' ? asset : asset.out;
+        await Promise.all(Object.entries(this.htmls).map(async ([fp_html, { entry = 'index.js', device_viewport: device_width = false, icon, manifest, dependencies: _dependencies = [], title, scripts, mscripts, notice = false, heads, }]) => {
             const html_template = '<!doctype html>\n' +
                 '<html>\n' +
                 '    <head>\n' +
@@ -488,21 +508,28 @@ export class Bundler {
                 "        <meta charset='utf-8' />\n" +
                 (heads ? heads.map(head => `        ${head}`).join_lines() : '') +
                 (device_width ? "        <meta name='viewport' content='width=device-width, initial-scale=1.0' />\n" : '') +
-                (icon ? `        <link rel='icon' href='{root}${get(icon)}' />\n` : '') +
+                (icon ? `        <link rel='icon' href='{root}${get_asset_out(icon)}' />\n` : '') +
                 (manifest ? `        <link rel='manifest' href='{root}${manifest}' />\n` : '') +
-                this.resolve_dependency_files(_dependencies, false, { production: this.production }).map(fp => `        <script src='{root}vendors/${fp}' defer></script>`).join_lines() +
-                (scripts?.before ? scripts.before.map(asset => `        <script src='{root}${get(asset)}' defer></script>`).join_lines() : '') +
-                (mscripts ? mscripts.map(mscript => `        <script src='{root}${get(mscript)}' type='module'></script>`).join_lines() : '') +
+                this.resolve_dependency_assets(_dependencies, false, { production: this.production }).map(asset => `        <script src='{root}${get_vendor_asset_out(asset)}' defer></script>`).join_lines() +
+                (scripts?.before
+                    ? scripts.before.map(asset => `        <script src='{root}${get_asset_out(asset)}' defer></script>`).join_lines()
+                    : '') +
+                (mscripts
+                    ? mscripts.map(mscript => `        <script src='{root}${get_asset_out(mscript)}' type='module'></script>`).join_lines()
+                    : '') +
                 `        <script src='{root}${entry}' type='module'></script>\n` +
-                (scripts?.after ? scripts.after.map(asset => `        <script src='{root}${get(asset)}' defer></script>`).join_lines() : '') +
+                (scripts?.after
+                    ? scripts.after.map(asset => `        <script src='{root}${get_asset_out(asset)}' defer></script>`).join_lines()
+                    : '') +
                 '    </head>\n' +
                 '    <body>\n' +
-                "        <div class='root'>\n" +
-                (notice ?
-                    '            <h2>正在加载 ··· (最多需要十秒钟)</h2>\n' +
-                        '            <h2>如果一直停留在此页面请按 f12 或右键 > 检查，打开开发者工具查看底部控制台报错，并尝试更换浏览器或将浏览器更新到最新版本，同时检查网络连接情况</h2>\n'
+                "        <div class='root'>" +
+                (notice
+                    ? '\n            <h2>正在加载 ··· (最多需要十秒钟)</h2>\n' +
+                        '            <h2>如果一直停留在此页面请按 f12 或右键 > 检查，打开开发者工具查看底部控制台报错，并尝试更换浏览器或将浏览器更新到最新版本，同时检查网络连接情况</h2>\n' +
+                        '        '
                     : '') +
-                '        </div>\n' +
+                '</div>\n' +
                 '    </body>\n' +
                 '</html>\n';
             await Promise.all([
@@ -515,10 +542,10 @@ export class Bundler {
         if (print.files)
             console.log(`${this.name} 的所有 html 页面构建完成`);
     }
-    resolve_dependencies(dependency_ids = this.dependencies, resolveds = new Set()) {
+    resolve_dependencies(dependency_ids, resolveds = new Set()) {
         dependency_ids.forEach(id => {
             if (!resolveds.has(id)) {
-                const dependency_ids_ = dependencies[id].dependencies;
+                const { dependencies: dependency_ids_ } = dependencies[id];
                 if (dependency_ids_)
                     this.resolve_dependencies(dependency_ids_, resolveds);
                 resolveds.add(id);
@@ -529,7 +556,7 @@ export class Bundler {
     /** 解析依赖的文件
         - dependencies: 依赖 id
         - assets: false 时只包括在 script 标签加载的文件;  true 时包括 assets, maps 等 */
-    resolve_dependency_files(_dependencies, assets, { production = this.production, source_map = this.source_map } = {}) {
+    resolve_dependency_assets(_dependencies, assets, { production = this.production, source_map = this.source_map } = {}) {
         return this.resolve_dependencies(_dependencies).map(id => {
             const dependency = dependencies[id];
             const { assets: _assets, maps } = dependency;
@@ -544,7 +571,7 @@ export class Bundler {
         if (print.files)
             console.log(`复制 ${this.name} 的依赖文件到 ${this.fpd_out}`);
         if (dependencies.length)
-            await fmkdir(`${fpd_out}vendors/`, { print: false });
+            await fmkdir(`${fpd_out}vendors/`, noprint);
         // 输出路径 -> 原路径，用来保证只复制一次且是同样的映射
         let records = new Map();
         const { name } = this;
@@ -552,16 +579,17 @@ export class Bundler {
             let src, out;
             if (typeof asset === 'string')
                 src = out = asset;
-            else
+            else {
                 ({ src, out } = asset);
+                out ??= src;
+            }
             await fcopy_record(path.resolve_with_slash(fpd_root, src), `${fpd_out}${out}`);
         }
+        /** 保证同样的输出资源只被写入一次 */
         async function fcopy_record(fp_src, fp_out) {
-            // 保证同样的输出资源只被写入一次
             const fp_src_old = records.get(fp_out);
             if (fp_src_old) {
-                if (fp_src_old === fp_src) { }
-                else
+                if (fp_src_old !== fp_src)
                     throw new Error(`${name} 复制项目资源冲突, ${fp_src_old} 和 ${fp_src} 均复制到 ${fp_out}`);
             }
             else {
@@ -570,25 +598,29 @@ export class Bundler {
             }
         }
         await Promise.all([
-            ...this.resolve_dependency_files(dependencies, true, { production })
-                .map(async (fp) => fcopy_record(`${fpd_root}node_modules/${fp}`, `${fpd_out}vendors/${fp}`)),
+            ...this.resolve_dependency_assets(dependencies, true, { production })
+                .map(async (asset) => typeof asset === 'string'
+                ? fcopy_record(`${fpd_root}node_modules/${asset}`, `${fpd_out}vendors/${asset}`)
+                : fcopy_record(path.resolve_with_slash(fpd_root, asset.src), path.resolve_with_slash(fpd_out, asset.out || asset.src))),
             ...this.resolve_config(assets, production)
                 .map(fcopy_asset),
-            ...this.htmls ? Object.entries(this.htmls).map(async ([fp_html, { icon, manifest, scripts, mscripts }]) => Promise.all([
-                icon,
-                manifest,
-                ...(scripts?.before || []),
-                ...(scripts?.after || []),
-                ...(mscripts || [])
-            ].filter(not_empty)
-                .map(fcopy_asset))) : []
+            ...this.htmls
+                ? Object.values(this.htmls).map(async ({ icon, manifest, scripts, mscripts }) => Promise.all([
+                    icon,
+                    manifest,
+                    ...(scripts?.before || []),
+                    ...(scripts?.after || []),
+                    ...(mscripts || [])
+                ].filter(not_empty)
+                    .map(fcopy_asset))) : []
         ]);
     }
     /** 为空时返回空数组 */
     resolve_config(config, production) {
         return config
-            ? (production ? config.productions : config.devs || config.productions) ||
-                []
+            ? (production
+                ? config.productions
+                : config.devs || config.productions) || []
             : [];
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xshell",
-    "version": "1.0.213",
+    "version": "1.1.000",
     "type": "module",
     "main": "./index.js",
     "bin": {
@@ -51,9 +51,9 @@
     "dependencies": {
         "@babel/core": "^7.26.0",
         "@babel/parser": "^7.26.3",
-        "@babel/traverse": "^7.26.3",
+        "@babel/traverse": "^7.26.4",
         "@koa/cors": "^5.0.0",
-        "@stylistic/eslint-plugin": "^2.11.0",
+        "@stylistic/eslint-plugin": "^2.12.0",
         "@svgr/webpack": "^8.1.0",
         "@types/sass-loader": "^8.0.9",
         "@types/ws": "^8.5.13",
@@ -66,7 +66,7 @@
         "@xterm/xterm": "^5.5.0",
         "ali-oss": "^6.22.0",
         "archiver": "^7.0.1",
-        "byte-size": "^9.0.0",
+        "byte-size": "^9.0.1",
         "chalk": "^5.3.0",
         "chardet": "^2.0.0",
         "cli-table3": "^0.6.5",
@@ -80,7 +80,7 @@
         "eslint-plugin-react": "^7.37.2",
         "gulp-sort": "^2.0.0",
         "hash-string": "^1.0.0",
-        "https-proxy-agent": "^7.0.5",
+        "https-proxy-agent": "^7.0.6",
         "i18next": "^24.0.5",
         "i18next-scanner": "^4.6.0",
         "koa": "^2.15.3",
@@ -90,9 +90,9 @@
         "map-stream": "^0.0.7",
         "mime-types": "^2.1.35",
         "ora": "^8.1.1",
-        "react": "^18.3.1",
+        "react": "^19.0.0",
         "react-i18next": "^15.1.3",
-        "react-object-model": "^1.2.18",
+        "react-object-model": "^1.2.20",
         "resolve-path": "^1.4.0",
         "sass": "^1.82.0",
         "sass-loader": "^16.0.4",
@@ -127,7 +127,7 @@
         "@types/lodash": "^4.17.13",
         "@types/mime-types": "^2.1.4",
         "@types/node": "^22.10.1",
-        "@types/react": "^18.3.13",
+        "@types/react": "^19.0.1",
         "@types/through2": "^2.0.41",
         "@types/tough-cookie": "^4.0.5",
         "@types/ua-parser-js": "^0.7.39",