@shijiu/jsview 2.1.341-test.0 → 2.1.362-test.0

package/tools/jsview-module-federation.mjs

@@ -0,0 +1,365 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+  checkNodeVersion,
+  downloadFileAsync,
+  execCommand,
+  getOptions,
+  loadPackageObject,
+  parseArguments,
+  savePackageObject,
+  Logger,
+  unzipFile,
+} from './jsview-common.mjs';
+import { assert } from 'node:console';
+
+async function updateToFederationBase(options)
+{
+  Logger.Info('Updating package.json...');
+  const pkgObj = loadPackageObject(options.projectDir);
+  if(!pkgObj.scripts) {
+    pkgObj.scripts = {};
+  }
+
+  var postInstall = pkgObj.scripts.postinstall ?? '';
+  if(postInstall.includes('npx patch-package') == false) {
+    if(postInstall) {
+      postInstall += ' && '
+    }
+
+    postInstall += 'npx patch-package'
+  }
+
+  pkgObj.scripts.postinstall = postInstall;
+
+  savePackageObject(options.projectDir, pkgObj);
+
+  Logger.Info('Downloading patches ...');
+  const url = 'https://gitlab.cluster.qcast.cn/mirror/jsview-module-federation-demo/-/raw/main/patches.zip';
+  const filePath = path.resolve(options.projectDir, 'patches.zip');
+  await downloadFileAsync(url, filePath, options.projectDir)
+
+  unzipFile(filePath, options.projectDir, options.projectDir);
+
+  const devDeps = '@originjs/vite-plugin-federation@1.3.4'
+  Logger.Info('Installing ' + devDeps + ' ...');
+  execCommand('npm install --save-dev ' + devDeps);
+  execCommand('npm ci');
+}
+
+function getRemoteEntryUrl(options)
+{
+}
+
+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 += `
+      // 自定义模块，根据需要自行配置
+      // './HelloWorld.vue': './src/components/HelloWorld.vue',
+    },`;
+  } else  if(options.mode == 'host') {
+    content = `
+function getHostConfig()
+{
+  const config = {
+    name: 'host-app',
+    remotes: {
+      'RemoteEntry': remoteEntryUrl,
+    },`;
+  }
+
+  content += `
+    shared: [`;
+  if(options.jsviewMode == 'share') {
+    content += `
+      'jsview',`;
+  }
+  content += `
+      'vue',
+    ]
+  }
+
+  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 'js/chunk.jsv.[hash].js'
+}`;
+    }
+  }
+
+  return content;
+}
+
+function genFederationConfigFunction(options)
+{
+  var content = '';
+  if(options.mode == 'remote') {
+    content += `
+function setFederationRemoteConfig(config) {`;
+  } else  if(options.mode == 'host') {
+    content += `
+function setFederationHostConfig(config) {`;
+  }
+
+  if(options.mode == 'remote') {
+    if(options.jsviewMode == 'expose') {
+      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.chunkFileNames = getChunkFileName
+  config.build.rollupOptions.output.manualChunks["__federation_fn_import"] = ["__federation_fn_import"]`;
+    }
+  }
+
+  content += '\n'
+  if(options.mode == 'remote') {
+    content += `
+  const config = getRemoteConfig()`;
+  } else  if(options.mode == 'host') {
+    content += `
+  const config = getHostConfig()`;
+  }
+
+  content += `
+  config.plugins.push(federation(config))
+
+}`;
+
+  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 {
+  setFederationHostConfig,
+}`;
+  
+  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 = `
+import federation from '@originjs/vite-plugin-federation'`;
+
+  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 = ');
+
+    // 开头添加
+    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)\n';
+    } else if(options.mode == 'host') {
+      viteConfigContent += 'setFederationHostConfig(viteConfig)\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 updateToFederationRemote(options)
+{
+  createFederationRemoteConfigFile(options);
+
+  updateViteConfigFile(options);
+}
+
+function updateToFederationHost(options)
+{
+  createFederationHostConfigFile(options);
+
+  updateViteConfigFile(options);
+
+  updateJsviewConfigFile(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 != 'share' && argv.jsview != 'expose') {
+    Logger.ErrorAndExit('Invalid --jsview, its value can only be "share" 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 "share" 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';
@@ -241,7 +241,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);
@@ -70,7 +70,7 @@ function checkNpmLinkForDebug(options, linkablePkgNames)
   }
   if (missingDepPkgs !== '') {
     Logger.Info('Install missing dependencies')
-    execCommand('npm install --no-save ' + missingDepPkgs);
+    execCommand('npm install --force --no-save ' + missingDepPkgs);
   }
 
   // node 18 不会将本地依赖安装成链接，需要手动改成链接。
@@ -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);
       }

package/tools/jsview-run-tool.mjs

@@ -8,31 +8,43 @@ import {
     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);
     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',
+            ' 2. config-app',
+            ' 3. gen-keypair',
+            ' 4. build-minmap',
+            ' 5. build-offline',
+            ' 6. module-federation',
         ];
 
         Logger.Info();
         Logger.Info('Please choice a command:');
-        for(const key in commandPrompt) {
+        for(const key of commandPrompt) {
             Logger.Info(key);
         }
         const answer = askAndAnswer('Command Index: ');
@@ -41,22 +53,30 @@ async function getExtraOptions(argv)
             options.runonAndroid = true; 
             break;
         case '2':
-            options.genKeypair = true; 
+            options.configApp = true; 
             break;
         case '3':
-            options.buildMinmap = true; 
+            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);
         }
     } 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.moduleFederation = argv.moduleFederation; 
     } else if(commandCount > 1) {
         Logger.ErrorAndExitNoException("Only one command can be executed.");
     }
@@ -68,6 +88,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 +117,11 @@ function doCommand(options) {
         }
 
         command = 'node node_modules/@shijiu/jsview/tools/jsview-build-zip.mjs --password=' + password;
+    } 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 +141,11 @@ 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].',
+  '-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)