@shijiu/jsview 2.1.448-test.0 → 2.1.482-test.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview",
-  "version": "2.1.448-test.0",
+  "version": "2.1.482-test.0",
   "bin": {
     "jsview-post-build": "./tools/jsview-post-build.js",
     "jsview-post-install": "./tools/jsview-post-install.js"

package/patches/node_modules/@originjs/vite-plugin-federation/1.3.4/@originjs+vite-plugin-federation+1.3.4.patch

@@ -1,8 +1,30 @@
 diff --git a/node_modules/@originjs/vite-plugin-federation/dist/index.js b/node_modules/@originjs/vite-plugin-federation/dist/index.js
-index 980b8e3..48baae5 100644
+index 980b8e3..534e796 100644
 --- a/node_modules/@originjs/vite-plugin-federation/dist/index.js
 +++ b/node_modules/@originjs/vite-plugin-federation/dist/index.js
-@@ -970,8 +970,11 @@ function prodExposePlugin(options) {
+@@ -301,11 +301,20 @@ function createRemotesMap(remotes) {
+       return `'${external}'`;
+     }
+   };
++// JsView Modified >>>
++//   return `const remotesMap = {
++// ${remotes.map(
++//     (remote) => `'${remote.id}':{url:${createUrl(remote)},format:'${remote.config.format}',from:'${remote.config.from}'}`
++//   ).join(",\n  ")}
++// };`;
+   return `const remotesMap = {
+ ${remotes.map(
+     (remote) => `'${remote.id}':{url:${createUrl(remote)},format:'${remote.config.format}',from:'${remote.config.from}'}`
+   ).join(",\n  ")}
+-};`;
++};;
++window.JsvCode.Federation = { remotesMap };
++`;
++// JsView Modified <<<
+ }
+ function getFileExtname(url) {
+   const fileNameAndParamArr = normalizePath(url).split("/");
+@@ -970,8 +979,11 @@ function prodExposePlugin(options) {
          const filepathMap = /* @__PURE__ */ new Map();
          const getFilename = (name) => path.parse(path.parse(name).name).name;
          const cssBundlesMap = Object.keys(bundle).filter((name) => path.extname(name) === ".css").reduce((res, name) => {
@@ -16,7 +38,7 @@ index 980b8e3..48baae5 100644
            return res;
          }, /* @__PURE__ */ new Map());
          remoteEntryChunk.code = remoteEntryChunk.code.replace(
-@@ -1481,6 +1484,16 @@ function federation(options) {
+@@ -1481,6 +1493,16 @@ function federation(options) {
        }
        builderInfo.builder = "vite";
        builderInfo.assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) ?? "assets";
@@ -34,10 +56,32 @@ index 980b8e3..48baae5 100644
      configureServer(server) {
        var _a;
 diff --git a/node_modules/@originjs/vite-plugin-federation/dist/index.mjs b/node_modules/@originjs/vite-plugin-federation/dist/index.mjs
-index 57bae8f..9320e8d 100644
+index 57bae8f..3b3c2c1 100644
 --- a/node_modules/@originjs/vite-plugin-federation/dist/index.mjs
 +++ b/node_modules/@originjs/vite-plugin-federation/dist/index.mjs
-@@ -953,8 +953,11 @@ function prodExposePlugin(options) {
+@@ -284,11 +284,20 @@ function createRemotesMap(remotes) {
+       return `'${external}'`;
+     }
+   };
++// JsView Modified >>>
++//   return `const remotesMap = {
++// ${remotes.map(
++//     (remote) => `'${remote.id}':{url:${createUrl(remote)},format:'${remote.config.format}',from:'${remote.config.from}'}`
++//   ).join(",\n  ")}
++// };`;
+   return `const remotesMap = {
+ ${remotes.map(
+     (remote) => `'${remote.id}':{url:${createUrl(remote)},format:'${remote.config.format}',from:'${remote.config.from}'}`
+   ).join(",\n  ")}
+-};`;
++};;
++window.JsvCode.Federation = { remotesMap };
++`;
++// JsView Modified <<<
+ }
+ function getFileExtname(url) {
+   const fileNameAndParamArr = normalizePath(url).split("/");
+@@ -953,8 +962,11 @@ function prodExposePlugin(options) {
          const filepathMap = /* @__PURE__ */ new Map();
          const getFilename = (name) => parse(parse(name).name).name;
          const cssBundlesMap = Object.keys(bundle).filter((name) => extname(name) === ".css").reduce((res, name) => {
@@ -51,7 +95,7 @@ index 57bae8f..9320e8d 100644
            return res;
          }, /* @__PURE__ */ new Map());
          remoteEntryChunk.code = remoteEntryChunk.code.replace(
-@@ -1464,6 +1467,16 @@ function federation(options) {
+@@ -1464,6 +1476,16 @@ function federation(options) {
        }
        builderInfo.builder = "vite";
        builderInfo.assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) ?? "assets";

package/patches/node_modules/vite/dist/node/jsview-vite-extension.js

@@ -87,7 +87,7 @@ const jsviewConfig = defineConfig({
   },
   server: {
     host: true,
-    open: process.platform === "darwin",
+    open: !process.env['JSVIEW_DISABLE_OPEN_BROWSER'] && process.platform === "darwin",
     watch: {
       ignored: [
         '!**/node_modules/@shijiu/**',

package/tools/jsview-common.mjs

@@ -350,6 +350,18 @@ function execCommand(cmdline, withOutput)
   }
 }
 
+function execCommandAsync(cmdline)
+{
+  Logger.Info('Run [' + cmdline + ']... ');
+  const child = childProcess.exec(cmdline);
+  child.stdout.on('data', (data) => {
+    console.log(data);
+  });
+  child.stderr.on('data', (data) => {
+    Logger.ErrorAndExit(data)
+  });
+}
+
 function checkNodeVersion(minMajorVersion = 16)
 {
   const versions = process.version.replace('v', '').split('.');
@@ -466,6 +478,23 @@ function getNpmRegistry()
   return 'https://nexus.cluster.qcast.cn/repository/npm-public';
 }
 
+function getNetworkIpv4Addresses() {
+  const addresses = [];
+  const interfaces = os.networkInterfaces();
+  for (const devName in interfaces) {
+    const iface = interfaces[devName];
+
+    for (var idx = 0; idx < iface.length; idx++) {
+      var alias = iface[idx];
+      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+        addresses.push(alias.address);
+      }
+    }
+  }
+
+  return addresses;
+}
+
 export {
   askAndAnswer,
   checkNodeVersion,
@@ -473,8 +502,10 @@ export {
   cpSync,
   downloadFileAsync,
   execCommand,
-  getOptions,
+  execCommandAsync,
+  getNetworkIpv4Addresses,
   getNpmRegistry,
+  getOptions,
   isSymlinkSync,
   loadPackageObject,
   makeZip,

package/tools/jsview-logger.js

@@ -13,6 +13,10 @@ class Logger {
     process.exit(1);
   }
 
+  static ErrorAndExitNoSilent(...args) {
+    Logger.ErrorNoException(...args);
+    process.exit(0);
+  }
 
   static ErrorAndThrow(...args) {
     Logger.Error(...args);
@@ -49,6 +53,14 @@ class Logger {
     console.warn(Logger.Yellow(Logger.Bold('JsView Warning:')), ...args);
   }
 
+  static Tip(...args) {
+    const size = args?.length ?? 0;
+    for(let idx = 0; idx < size; idx++) {
+      args[idx] = Logger.Blue(Logger.Bold(args[idx]));
+    }
+    console.info(...args);
+  }
+
   static Info(...args) {
     console.info(Logger.Green('JsView Info:'), ...args);
   }

package/tools/jsview-run-tool.mjs

@@ -4,6 +4,7 @@
 import {
     askAndAnswer,
     checkNodeVersion,
+    getNetworkIpv4Addresses,
     getOptions,
     parseArguments,
     Logger,
@@ -27,6 +28,7 @@ async function getExtraOptions(argv)
     commandCount += (argv.buildMinmap ? 1 : 0);
     commandCount += (argv.buildZip ? 1 : 0);
     commandCount += (argv.moduleFederation ? 1 : 0);
+    commandCount += (argv.vueDevtools ? 1 : 0);
     if(commandCount == 0) {
         if(argv.help || argv.h) {
             printArgumentsUsages(requiredUsages, optionalUsages);
@@ -34,48 +36,34 @@ async function getExtraOptions(argv)
         }
 
         const commandPrompt = [
-            ' 1. runon-android',
-            ' 2. config-app',
-            ' 3. gen-keypair',
-            ' 4. build-minmap',
-            ' 5. build-offline',
-            ' 6. module-federation',
+            'runonAndroid',
+            'configApp',
+            'genKeypair',
+            'buildMinmap',
+            'buildZip',
+            'vueDevtools',
+            'moduleFederation',
         ];
 
         Logger.Info();
         Logger.Info('Please choice a command:');
-        for(const key of commandPrompt) {
-            Logger.Info(key);
+        for(let idx = 0; idx < commandPrompt.length; idx++) {
+            Logger.Info(idx, ': ' + commandPrompt[idx].replace(/[A-Z]/g, match => `-${match.toLowerCase()}`));
         }
-        const answer = askAndAnswer('Command Index: ');
-        switch(answer) {
-        case '1':
-            options.runonAndroid = true; 
-            break;
-        case '2':
-            options.configApp = true; 
-            break;
-        case '3':
-            options.genKeypair = true; 
-            break;
-        case '4':
-            options.buildMinmap = true; 
-            break;
-        case '5':
-            options.buildZip = true; 
-            break;
-        case '6':
-            options.moduleFederation = true; 
-            break;
-        default:
-            Logger.ErrorAndExitNoException("Unknown input: " + answer);
+        const answer = askAndAnswer(`Command Index (0~${commandPrompt.length-1}): `);
+        const command = commandPrompt[answer];
+        if(!command) {
+            Logger.ErrorAndExitNoException("Bad index: " + answer);
         }
+        Logger.Info('command:', command);
+        options[command] = true
     } else if(commandCount == 1) {
         options.runonAndroid = argv.runonAndroid; 
         options.configApp = argv.configApp; 
         options.genKeypair = argv.genKeypair; 
         options.buildMinmap = argv.buildMinmap;
         options.buildZip = argv.buildZip; 
+        options.vueDevtools = argv.vueDevtools; 
         options.moduleFederation = argv.moduleFederation; 
     } else if(commandCount > 1) {
         Logger.ErrorAndExitNoException("Only one command can be executed.");
@@ -117,6 +105,14 @@ function doCommand(options) {
         }
 
         command = 'node node_modules/@shijiu/jsview/tools/jsview-build-zip.mjs --password=' + password;
+    } else if(options.vueDevtools) {
+        var defaultPort = 8098;
+        const port = (typeof(options.vueDevtools) === 'string' ? options.vueDevtools : defaultPort);
+        if(port !== options.vueDevtools) {
+            Logger.Warn('Vue Devtools server port is not set, use default value: ' + defaultPort);
+        }
+
+        command = 'node node_modules/@shijiu/jsview/tools/jsview-vue-devtools.mjs --port=' + port;
     } else if(options.moduleFederation) {
         var argumentsLine = options.argumentsLine.replace(/ --framework.*? /, ' ');
         argumentsLine = argumentsLine.replace(' -f ', ' ').replace(' --module-federation ', ' ');
@@ -145,6 +141,7 @@ const optionalUsages = {
   '-g | --gen-keypair': 'Generate sign keypair.',
   '-m | --build-minmap': 'Build target with filter map, like: -m or --build-minmap=[filter].',
   '-z | --build-zip': 'Build target to offline zip package, like: -z or --build-zip=[password].',
+  '-d | --vue-devtools': 'Start vue dev server and vue-devtools standalone, like: -d or --vue-devtools=[port].',
   '-f | --module-federation': 'Make project to module federation, use --module-federation --help for details.',
 };
 const argv = parseArguments(requiredUsages, optionalUsages, true, true, true);

package/tools/jsview-vue-devtools.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+    askAndAnswer,
+    checkNodeVersion,
+    execCommand,
+    getNetworkIpv4Addresses,
+    getOptions,
+    parseArguments,
+    Logger,
+} from './jsview-common.mjs';
+
+function getDefaultPort() {
+    return 8098;
+}
+
+async function getExtraOptions(argv)
+{
+    const options = getOptions(argv.framework);
+
+    options.hostIp = 'your-pc-ip';
+    const addresses = getNetworkIpv4Addresses();
+    if(addresses.length > 0) {
+        options.hostIp = addresses[0];
+    }
+    options.hostPort = argv.port ?? getDefaultPort();
+
+    if(process.platform == 'win32' && options.hostPort != getDefaultPort()) {
+        Logger.ErrorAndExit("Windows can't support to set custom port to Vue DevTools standalone application. please use default value.")
+    }
+
+    return options;
+}
+
+async function runVueDevtoolsStandalone(options)
+{
+    const vuedtFilePath = options.modulesDir + '/.bin/vue-devtools';
+
+    var exportPrefix = 'export';
+    if(process.platform == 'win32') {
+        exportPrefix = 'set'
+    }
+
+    if (fs.existsSync(vuedtFilePath) == false
+    || fs.existsSync(options.modulesDir + '/electron') == false) {
+        Logger.ErrorNoException('Vue DevTools standalone application is not found.')
+        Logger.Info(' Do you want to install it thought "@vue/vue-devtools@6.5.1"?');
+        const answer = askAndAnswer('(y/N) ');
+        if (answer.substring(0, 1) != 'y' && answer.substring(0, 3) != 'yes') {
+            Logger.ErrorAndExitNoSilent('User cancelled.')
+        }
+
+        const exportElectronMirror = exportPrefix + ' ELECTRON_MIRROR=http://cdn.release.qcast.cn/RN_devtools/electron-env/'
+        let cmdline = exportElectronMirror + ' && npm install --package-lock-only --save-exact --save-dev electron@21.4.4 @vue/devtools@6.5.1'
+        execCommand(cmdline);
+        cmdline = exportElectronMirror + ' && npm ci'
+        execCommand(cmdline);
+        
+        console.log()
+        console.log()
+        Logger.Tip(" *** NOTICE ***:")
+        Logger.Tip(" Don't forget to add the following code at the beginning of your source entry ['main.ts' or 'main.tsx']:")
+        console.log("    if (process.env.NODE_ENV === 'development') {")
+        console.log("      window.requestAnimationFrame = (callback) => setTimeout(callback, 0)")
+        console.log("      const devtools = await import('@vue/devtools')")
+        console.log("      devtools.connect('" + options.hostIp + "', " + options.hostPort + ")")
+        console.log("      console.warn('@vue/devtools has been ready.')")
+        console.log("    }")
+        console.log()
+    }
+
+    var cmdline = /* 不要添加 `node `，windows cmd执行出错 */ path.relative(options.projectDir, vuedtFilePath)
+    if(process.platform != 'win32') { // 在Window系统上设置port 会导致WebSocket连接失败。
+        cmdline = (exportPrefix + ' PORT=' + options.hostPort + ' && ' + cmdline);
+    }
+    execCommand(cmdline);
+}
+
+async function main(argv)
+{
+    checkNodeVersion();
+
+    const options = await getExtraOptions(argv);
+
+    runVueDevtoolsStandalone(options);
+}
+
+const requiredUsages = {
+};
+const optionalUsages = {
+  '--port': 'Set vue devtools standalone server port. default is: ' + getDefaultPort(),
+};
+const argv = parseArguments(requiredUsages, optionalUsages, false);
+main(argv)