@shijiu/jsview 2.1.435 → 2.1.476-test.0

package/tools/jsview-module-federation.mjs

@@ -0,0 +1,354 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+  checkNodeVersion,
+  execCommand,
+  getOptions,
+  parseArguments,
+  Logger,
+} from './jsview-common.mjs';
+import { assert } from 'node:console';
+
+async function updateToFederationBase(options)
+{
+  Logger.Info('Updating package.json...');
+
+  const devDeps = '@originjs/vite-plugin-federation@1.3.4'
+  Logger.Info('Installing ' + devDeps + ' ...');
+  execCommand('npm install --save-dev ' + devDeps);
+  execCommand('npm ci');
+}
+
+function genFederationUrl(options)
+{
+  var content = '';
+
+  if(options.mode == 'host') {
+    content = `
+const remoteDomain = '${options.remoteDomain}' // 替换成你的 Remote 端 base url 或 ip:port;
+const remoteEntryUrl = remoteDomain + '/js/remoteEntry.js'`;
+
+    if(options.jsviewMode == 'expose') {
+      content += `
+const jsviewLoaderUrl = remoteDomain + '/js/JsViewLoader.js'`
+    }
+  }
+
+  return content;
+}
+
+function genConfigFunction(options)
+{
+  var content = '';
+
+  if(options.mode == 'remote') {
+    content = `
+function getRemoteConfig() {
+  const config = {
+    name: 'remote-lib',
+    filename: 'remoteEntry.js',
+    // 需要暴露的模块
+    exposes: {`;
+
+    if(options.jsviewMode == 'expose') {
+      content += `
+      // 必须模块，JsView 编译需要
+      './JsViewLoader': 'node_modules/@shijiu/jsview/loader/jsview-loader.js',
+      './JsViewVue': '/node_modules/@shijiu/jsview-vue/index.js',`;
+      content += '\n'
+    }
+
+    content += `
+      // 自定义模块，根据需要自行配置
+      './App.vue': './src/App.vue',
+    },`;
+  } else  if(options.mode == 'host') {
+    content = `
+function getHostConfig() {
+  const config = {
+    name: 'host-app',
+    remotes: {
+      'RemoteEntry': remoteEntryUrl,
+    },`;
+  }
+
+  content += `
+    shared: {`;
+  if(options.jsviewMode == 'shared') {
+    content += `
+      '@shijiu/jsview-vue': {},
+      jsview:  { packagePath: '@shijiu/jsview-vue' },`;
+  }
+  content += `
+      vue: {},
+      'vue-router': {},
+    },
+  }
+
+  return config
+}`;
+
+  return content;
+}
+
+function genChunkFileNameFunction(options)
+{
+  var content = '';
+
+  if(options.mode == 'remote') {
+    if(options.jsviewMode == 'expose') {
+      content = `
+function getChunkFileName(chunkInfo) {
+  if(chunkInfo.name == '__federation_expose_JsViewLoader') {
+    return 'js/JsViewLoader.js'
+  }
+  return (process.env['JSVIEW_KEEP_CHUNKNAME'] ? 'js/[name].[hash].js' : 'js/chunk.jsv.[hash].js')
+}`;
+    }
+  }
+
+  return content;
+}
+
+function genFederationConfigFunction(options)
+{
+  var content = '';
+  if(options.mode == 'remote') {
+    content += `
+function setFederationRemoteConfig(config, federation) {`;
+  } else  if(options.mode == 'host') {
+    content += `
+function setFederationHostConfig(config, federation) {`;
+  }
+
+  content += `
+  config.build = (config.build || {})
+  config.build.rollupOptions = (config.build.rollupOptions || {})
+  config.build.rollupOptions.output = (config.build.rollupOptions.output || {})
+  config.build.rollupOptions.output.manualChunks = (config.build.rollupOptions.output.manualChunks || {})
+  config.build.rollupOptions.output.manualChunks["__federation_fn_import"] = ["__federation_fn_import"]`;
+
+  if(options.mode == 'remote') {
+    if(options.jsviewMode == 'expose') {
+      content += `
+  config.build.rollupOptions.output.chunkFileNames = getChunkFileName`;
+    }
+  }
+
+  content += '\n'
+  if(options.mode == 'remote') {
+    content += `
+  const federationConfig = getRemoteConfig()`;
+  } else  if(options.mode == 'host') {
+    content += `
+  const federationConfig = getHostConfig()`;
+  }
+
+  content += `
+  config.plugins.push(federation(federationConfig))
+
+}`;
+
+  return content;
+}
+
+function createFederationRemoteConfigFile(options)
+{
+  const federationConfigName = 'federation.remote.config.ts';
+  Logger.Info('Creating ' + federationConfigName + ' ...');
+
+  var federationConfigContent = `
+import federation from '@originjs/vite-plugin-federation'`;
+
+  federationConfigContent += '\n';
+  federationConfigContent += genConfigFunction(options);
+  federationConfigContent += '\n';
+  federationConfigContent += genChunkFileNameFunction(options);
+  federationConfigContent += '\n';
+  federationConfigContent += genFederationConfigFunction(options);
+  federationConfigContent += '\n';
+
+  federationConfigContent += `
+export {
+  setFederationRemoteConfig,
+}`;
+  
+  fs.writeFileSync(path.resolve(options.projectDir, federationConfigName),
+                   federationConfigContent,
+                   'utf-8');
+}
+
+function createFederationHostConfigFile(options)
+{
+  const federationConfigName = 'federation.host.config.ts';
+  Logger.Info('Creating ' + federationConfigName + ' ...');
+
+  var federationConfigContent = '';
+
+  federationConfigContent += '\n';
+  federationConfigContent += genFederationUrl(options);
+  federationConfigContent += '\n';
+  federationConfigContent += genConfigFunction(options);
+  federationConfigContent += '\n';
+  federationConfigContent += genFederationConfigFunction(options);
+  federationConfigContent += '\n';
+
+  federationConfigContent += `
+export {
+  setFederationHostConfig,`;
+  if(options.jsviewMode == 'expose') {
+    federationConfigContent += `
+  jsviewLoaderUrl,`;
+  }
+  federationConfigContent += `
+}`;
+  
+  fs.writeFileSync(path.resolve(options.projectDir, federationConfigName),
+                   federationConfigContent,
+                   'utf-8');
+}
+
+async function updateViteConfigFile(options)
+{
+  const viteConfigName = 'vite.config.ts';
+  Logger.Info('Updating ' + viteConfigName + ' ...');
+
+  const viteConfigPath = path.resolve(options.projectDir, viteConfigName);
+  var viteConfigContent = fs.readFileSync(viteConfigPath, 'utf-8');
+
+  const regex = /export default defineConfig(?!\(viteConfig\))/;
+  if(regex.test(viteConfigContent)) {
+    viteConfigContent = viteConfigContent.replace(regex, 'const viteConfig = ');
+
+    // 开头添加
+    viteConfigContent = "import federation from '@originjs/vite-plugin-federation'\n" + viteConfigContent;
+    if(options.mode == 'remote') {
+      viteConfigContent = "import { setFederationRemoteConfig } from './federation.remote.config'\n" + viteConfigContent;
+    } else if(options.mode == 'host') {
+      viteConfigContent = "import { setFederationHostConfig } from './federation.host.config'\n" + viteConfigContent;
+    }
+
+    // 末尾添加
+    viteConfigContent += '\n';
+    if(options.mode == 'remote') {
+      viteConfigContent += 'setFederationRemoteConfig(viteConfig, federation)\n';
+    } else if(options.mode == 'host') {
+      viteConfigContent += 'setFederationHostConfig(viteConfig, federation)\n';
+    }
+    viteConfigContent += '\n';
+    viteConfigContent += 'export default defineConfig(viteConfig)\n';
+  }
+
+  fs.writeFileSync(viteConfigPath, viteConfigContent, 'utf-8');
+
+}
+
+function updateJsviewConfigFile(options)
+{
+  const jsviewConfigName = path.basename(options.appJsviewConfigFile);
+  Logger.Info('Updating ' + jsviewConfigName + ' ...');
+
+  if(options.mode == 'host') {
+    if(options.jsviewMode == 'expose') {
+      var jsviewConfigContent = fs.readFileSync(options.appJsviewConfigFile, 'utf-8');
+      const regex = /jsviewLoaderUrl/;
+      if(regex.test(jsviewConfigContent) == false) {
+        jsviewConfigContent = "import { jsviewLoaderUrl } from '../../federation.host.config'\n" + jsviewConfigContent;
+        jsviewConfigContent = jsviewConfigContent.replace(/remoteLoader.*?,/, 'remoteLoader: jsviewLoaderUrl,');
+      }
+      fs.writeFileSync(options.appJsviewConfigFile, jsviewConfigContent, 'utf-8');
+    }
+  }
+}
+
+function updateTsConfigFile(options)
+{
+  const tsConfigName = 'tsconfig.json';
+  Logger.Info('Updating ' + tsConfigName + ' ...');
+
+  if(options.mode == 'host') {
+    if(options.jsviewMode == 'expose') {
+      const tsConfigPath = path.resolve(options.projectDir, tsConfigName);
+      var tsConfigContent = fs.readFileSync(tsConfigPath, 'utf-8');
+      const regex = /RemoteEntry/;
+      if(regex.test(tsConfigContent) == false) {
+        tsConfigContent = tsConfigContent.replace(/"jsview"/, '"RemoteEntry/JsViewVue": [ "./node_modules/@shijiu/jsview-vue" ],\n    $&');
+      }
+      fs.writeFileSync(tsConfigPath, tsConfigContent, 'utf-8');
+    }
+  }
+}
+
+function updateToFederationRemote(options)
+{
+  createFederationRemoteConfigFile(options);
+
+  updateViteConfigFile(options);
+}
+
+function updateToFederationHost(options)
+{
+  createFederationHostConfigFile(options);
+
+  updateViteConfigFile(options);
+
+  updateJsviewConfigFile(options);
+
+  updateTsConfigFile(options);
+}
+
+
+async function main(argv)
+{
+  checkNodeVersion();
+
+
+  const options = getOptions();
+
+  if(argv.mode != 'remote' && argv.mode != 'host') {
+    Logger.ErrorAndExit('Invalid --mode, its value can only be "remote" or "host".');
+  }
+  options.mode = argv.mode;
+
+  if(argv.jsview != 'shared' && argv.jsview != 'expose') {
+    Logger.ErrorAndExit('Invalid --jsview, its value can only be "shared" or "expose".');
+  }
+  options.jsviewMode = argv.jsview;
+
+  if(argv.mode == 'host' && !argv.remoteDomain) {
+    Logger.ErrorAndExit('--remote-domain is required for host mode.');
+  }
+  options.remoteDomain = argv.remoteDomain;
+
+  Logger.Info();
+  Logger.Info('Updating to module federation ' + options.mode + ' ...');
+  await updateToFederationBase(options);
+  if(options.mode == 'remote') {
+    await updateToFederationRemote(options);
+  } else if(options.mode == 'host') {
+    await updateToFederationHost(options);
+  } else {
+    assert(0);
+  }
+  Logger.Info('Success to update project to module federation.');
+  Logger.Info('Module federation info:');
+  Logger.Info('  Mode:             ' + options.mode);
+  Logger.Info('  JsView:           ' + options.jsviewMode);
+  if(options.mode == 'host') {
+    Logger.Info('  remote entry url: ' + options.remoteDomain + '/js/remoteEntry.js');
+  }
+}
+
+
+const requiredUsages = {
+  '--mode': 'Project mode. the value is "remote" or "host"',
+  '--jsview': 'jsview mode. the value is "shared" or "expose"',
+};
+const optionalUsages = {
+  '--remote-domain': 'remote domain. Host use this domain to access remote module.',
+};
+const argv = parseArguments(requiredUsages, optionalUsages);
+main(argv)

package/tools/jsview-post-build.mjs

@@ -8,7 +8,7 @@ import url from 'node:url'
 import {
   checkNodeVersion,
   getOptions,
-  getPackageObject,
+  loadPackageObject,
   parseArguments,
   Logger,
 } from './jsview-common.mjs';
@@ -252,7 +252,7 @@ function makeJsvList(options)
 
 async function makeJsvInfo(options)
 {
-  const jsviewPkgJson = getPackageObject(options.jsviewDir);
+  const jsviewPkgJson = loadPackageObject(options.jsviewDir);
 
   const jsviewVersionURL = url.pathToFileURL(options.jsviewDomRevisionFile);
   const { default: jsviewTargetVersion } = await import(jsviewVersionURL);

package/tools/jsview-post-install.mjs

@@ -9,7 +9,7 @@ import {
   cpSync,
   execCommand,
   getOptions,
-  getPackageObject,
+  loadPackageObject,
   isSymlinkSync,
   parseArguments,
   symlinkSync,
@@ -33,7 +33,7 @@ function checkNpmCommand()
 
 function checkNpmLinkForDebug(options, linkablePkgNames)
 {
-  const pkgObj = getPackageObject(options.projectDir);
+  const pkgObj = loadPackageObject(options.projectDir);
 
   // node 16 不会安装本地包的二次依赖, 需要手动安装。
   let missingDepPkgs = '';
@@ -46,7 +46,7 @@ function checkNpmLinkForDebug(options, linkablePkgNames)
     }
 
     const linkablePath = path.resolve(options.modulesDir, linkableName);
-    const linkablePkgObj = getPackageObject(linkablePath);
+    const linkablePkgObj = loadPackageObject(linkablePath);
 
     for (const dep in linkablePkgObj.dependencies ?? {}) {
       const depPath = path.resolve(options.modulesDir, dep);
@@ -98,11 +98,11 @@ function checkPatches(options, pkgNeedPatch, skipCheckVersion)
   for (const pkgName of pkgNeedPatch) {
     if (skipCheckVersion !== true) {
       const patchPkgDir = path.resolve(options.jsviewPatchModulesDir, pkgName);
-      const patchPkgObj = getPackageObject(patchPkgDir);
+      const patchPkgObj = loadPackageObject(patchPkgDir);
       Logger.Info('  ' + pkgName + ': ' + patchPkgObj.version);
 
       const modulePkgDir = path.resolve(options.modulesDir, pkgName);
-      const modulePkgObj = getPackageObject(modulePkgDir);
+      const modulePkgObj = loadPackageObject(modulePkgDir);
       if (modulePkgObj.version != patchPkgObj.version) {
         Logger.ErrorAndExit(pkgName + '@' + modulePkgObj.version + ' is not supported, required version is ' + patchPkgObj.version);
       }
@@ -114,7 +114,7 @@ function checkPatches(options, pkgNeedPatch, skipCheckVersion)
 
 function installPatches(options, pkgNeedPatch)
 {
-  Logger.Info('Patching JsView:');
+  Logger.Info('Stage 1: Installing patches for JsView:');
   for (const pkgName of pkgNeedPatch) {
     const patchSrc = path.resolve(options.jsviewPatchModulesDir, pkgName);
     const patchDest = path.resolve(options.modulesDir, pkgName);
@@ -126,6 +126,86 @@ function installPatches(options, pkgNeedPatch)
   rmSync(options.projectDir, options.cacheDir);
 }
 
+function getPatchListRecursive(patchDir)
+{
+  var patchList = [];
+
+  const pkgNameArray = fs.readdirSync(patchDir);
+  for (const pkgName of pkgNameArray) {
+    const pkgFullPath = path.resolve(patchDir, pkgName);
+
+    const isDirectory = fs.statSync(pkgFullPath).isDirectory();
+    if(isDirectory) {
+      const subPatchList = getPatchListRecursive(pkgFullPath);
+      patchList = [...patchList, ...subPatchList];
+    } else {
+      if(pkgFullPath.endsWith('.patch') == false) {
+        continue;
+      }
+
+      patchList.push(pkgFullPath);
+    }
+  }
+
+  return patchList;
+}
+
+function autoPatchPackages(options)
+{
+  Logger.Info('Stage 2: Auto patching packages:');
+
+  const patchCacheDir = path.resolve(options.cacheJsViewDir, 'patches');
+  fs.mkdirSync(patchCacheDir, { recursive: true, force: true });
+
+  const patchInfo = {};
+  const patchList = getPatchListRecursive(options.jsviewPatchModulesDir);
+  for (const patchFullPath of patchList) {
+    const patchRelativePath = path.relative(options.jsviewPatchModulesDir, patchFullPath);
+    const patchNameAndVersion = path.dirname(patchRelativePath);
+    const patchVersion = path.basename(patchNameAndVersion);
+    const patchName = path.dirname(patchNameAndVersion);
+
+    if(!patchInfo[patchName]) {
+      patchInfo[patchName] = [];
+    }
+    patchInfo[patchName].push(patchVersion);
+  }
+
+  for(const [patchName, patchVersions] of Object.entries(patchInfo)) {
+    const pkgFullDir = path.resolve(options.modulesDir, patchName);
+    const pkgJsonFullPath = path.resolve(pkgFullDir, 'package.json');
+    if(fs.existsSync(pkgJsonFullPath) == false) {
+      continue;
+    }
+
+    const pkgObj = loadPackageObject(pkgFullDir);
+    const pkgVersion = pkgObj.version;
+    if(patchVersions.includes(pkgVersion) == false) {
+      Logger.Warn('  Patch file for ' + patchName + '@' + pkgVersion + ' is not found.');
+      continue;
+    }
+
+    const patchFullDir = path.resolve(options.jsviewPatchModulesDir, patchName, pkgVersion);
+    const patchFiles = fs.readdirSync(patchFullDir);
+    for (const file of patchFiles) {
+      if(file.endsWith('.patch') == false) {
+        continue;
+      }
+
+      const copyFromPath = path.resolve(patchFullDir, file);
+      const copyToPath = path.resolve(patchCacheDir, file);
+      cpSync(options.projectDir, copyFromPath, copyToPath);
+    }
+  }
+
+  const hasPatches = fs.readdirSync(patchCacheDir);
+  if(hasPatches && hasPatches.length > 0) {
+    execCommand('npx patch-package --patch-dir ' + path.relative(options.projectDir, patchCacheDir));
+  } else {
+    Logger.Info('  No patch files found.');
+  }
+}
+
 async function printRevision(options)
 {
   const jsviewVersionURL = url.pathToFileURL(options.jsviewDomRevisionFile);
@@ -188,6 +268,8 @@ function doPostInstall(framework, pkgNeedPatch, skipCheckVersion)
 
   installPatches(options, pkgNeedPatch);
 
+  autoPatchPackages(options);
+
   printRevision(options);
 }
 

package/tools/jsview-run-tool.mjs

@@ -4,59 +4,67 @@
 import {
     askAndAnswer,
     checkNodeVersion,
+    getNetworkIpv4Addresses,
     getOptions,
     parseArguments,
     Logger,
     execCommand,
+    printArgumentsUsages,
 } from './jsview-common.mjs';
 
 async function getExtraOptions(argv)
 {
     const options = getOptions(argv.framework);
+    options.argumentsLine = argv.argumentsLine;
+    options.help = argv.help;
     options.jsviewCoreRevision = null;
     options.jsviewEngineUrl = null;
     options.entryUrl = argv.url;
 
     let commandCount = 0;
+    commandCount += (argv.configApp ? 1 : 0);
     commandCount += (argv.genKeypair ? 1 : 0);
     commandCount += (argv.runonAndroid ? 1 : 0);
     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);
+            process.exit(0);
+        }
+
         const commandPrompt = [
-            ' 1. runon-android',
-            ' 2. gen-keypair',
-            ' 3. build-minmap',
-            ' 4. build-offline',
+            'runonAndroid',
+            'configApp',
+            'genKeypair',
+            'buildMinmap',
+            'buildZip',
+            'vueDevtools',
+            'moduleFederation',
         ];
 
         Logger.Info();
         Logger.Info('Please choice a command:');
-        for(const key in 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.genKeypair = true; 
-            break;
-        case '3':
-            options.buildMinmap = true; 
-            break;
-        case '4':
-            options.buildZip = 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.");
     }
@@ -68,6 +76,17 @@ function doCommand(options) {
     let command;
     if(options.runonAndroid) {
         command = 'node node_modules/@shijiu/jsview/tools/jsview-run-android.mjs --framework=vue';
+    } else if(options.configApp) {
+        const defaultConfig = 'JsViewDemo:JsView示例';
+        const config = (typeof(options.configApp) === 'string' ? options.configApp : defaultConfig);
+        if(config !== options.configApp) {
+            Logger.Warn('App config is not set, use default value: ' + defaultConfig);
+        }
+
+        const configArray = config.split(':');
+        const appName = configArray[0];
+        const appTitle = configArray[1] ?? appName;
+        command = 'node node_modules/@shijiu/jsview/tools/jsview-config-app.mjs --app-name=' + appName + ' --app-title=' + appTitle;
     } else if(options.genKeypair) {
         command = 'node node_modules/@shijiu/jsview/tools/jsview-generate-keypair.mjs';
     } else if(options.buildMinmap) {
@@ -86,6 +105,19 @@ 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 ', ' ');
+
+        command = 'node node_modules/@shijiu/jsview/tools/jsview-module-federation.mjs' + argumentsLine;
     }
 
     execCommand(command);
@@ -105,9 +137,12 @@ const requiredUsages = {
 };
 const optionalUsages = {
   '-a | --runon-android': 'Run app on android devices.',
+  '-c | --config-app': 'Config app, like: -c or --config-app=[AppName:AppTitle].',
   '-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, false);
+const argv = parseArguments(requiredUsages, optionalUsages, true, true, true);
 main(argv)