@shijiu/jsview 2.1.435 → 2.1.448-test.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview",
-  "version": "2.1.435",
+  "version": "2.1.448-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

@@ -0,0 +1,70 @@
+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
+--- 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) {
+         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) => {
+-          const filename = getFilename(name);
+-          res.set(filename, bundle[name]);
++// JsView Removed >>>
++// JsView js代码中已内嵌css
++          //const filename = getFilename(name);
++          //res.set(filename, bundle[name]);
++// JsView Removed <<<                 
+           return res;
+         }, /* @__PURE__ */ new Map());
+         remoteEntryChunk.code = remoteEntryChunk.code.replace(
+@@ -1481,6 +1484,16 @@ function federation(options) {
+       }
+       builderInfo.builder = "vite";
+       builderInfo.assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) ?? "assets";
++// JsView Added >>>
++// 根据chunkFile路径设置assetsDir
++      let chunkFileNames = config.build.rollupOptions.output.chunkFileNames;
++      if (typeof (chunkFileNames) === 'function') {
++        chunkFileNames = chunkFileNames({name: 'test.js'})
++      }
++      const jsDir = path.dirname(chunkFileNames);
++      builderInfo.assetsDir = jsDir;
++      console.log("builderInfo",builderInfo);
++// JsView Added <<<
+     },
+     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
+--- 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) {
+         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) => {
+-          const filename = getFilename(name);
+-          res.set(filename, bundle[name]);
++// JsView Removed >>>
++// JsView js代码中已内嵌css
++          //const filename = getFilename(name);
++          //res.set(filename, bundle[name]);
++// JsView Removed <<<
+           return res;
+         }, /* @__PURE__ */ new Map());
+         remoteEntryChunk.code = remoteEntryChunk.code.replace(
+@@ -1464,6 +1467,16 @@ function federation(options) {
+       }
+       builderInfo.builder = "vite";
+       builderInfo.assetsDir = ((_b = config == null ? void 0 : config.build) == null ? void 0 : _b.assetsDir) ?? "assets";
++// JsView Added >>>
++// 根据chunkFile路径设置assetsDir
++      let chunkFileNames = config.build.rollupOptions.output.chunkFileNames;
++      if (typeof (chunkFileNames) === 'function') {
++        chunkFileNames = chunkFileNames({name: 'test.js'})
++      }
++      const jsDir = path.dirname(chunkFileNames);
++      builderInfo.assetsDir = jsDir;
++      console.log("builderInfo",builderInfo);
++// JsView Added <<<
+     },
+     configureServer(server) {
+       var _a;

package/tools/jsview-common.mjs

@@ -3,12 +3,19 @@
 
 import childProcess from 'node:child_process';
 import fs from 'node:fs';
+import https from 'node:https';
 import os from 'node:os';
 import path from 'node:path';
 import { Logger } from "./jsview-logger.js";
 
 function printArgumentsUsages(requiredUsages, optionalUsages, helpUsages)
 {
+  if(!helpUsages) {
+    helpUsages = {
+      '-h | --help': 'Print help usages.',
+    }
+  }
+
   let maxLength = 0;
   for (const usage in requiredUsages) {
     maxLength = (maxLength > usage.length ? maxLength : usage.length);
@@ -41,7 +48,9 @@ function printArgumentsUsages(requiredUsages, optionalUsages, helpUsages)
 
 function parseArguments(requiredUsages = {},
                         optionalUsages = {},
-                        withoutUnparsed = true)
+                        withoutUnparsed = true,
+                        ignoreUnknown = false,
+                        ignoreHelpUsage = false)
 {
   const keySeparator = '|';
   const formatKey = (key) => {
@@ -110,7 +119,8 @@ function parseArguments(requiredUsages = {},
   }
 
   let options = {
-    unparsed: []
+    unparsed: [],
+    argumentsLine: '',
   };
 
   // arg0: node
@@ -130,7 +140,8 @@ function parseArguments(requiredUsages = {},
       }
     }
 
-    if (hasKey(helpUsages, key) == false
+    if (ignoreUnknown == false
+    && hasKey(helpUsages, key) == false
     && hasKey(requiredUsages, key) == false
     && hasKey(optionalUsages, key) == false) {
         Logger.ErrorAndExitNoException('Failed to parse usage: ' + argu);
@@ -139,11 +150,13 @@ function parseArguments(requiredUsages = {},
     let formattedKey = formatKey(key);
     let formattedValue = formatValue(value);
     options[formattedKey] = formattedValue;
+
+    options.argumentsLine += ' ' + argu;
   }
 
   for (const checker in helpUsages) {
     const aliasedOptions = checkAliases(checker, options);
-    if (aliasedOptions) {
+    if (aliasedOptions && ignoreHelpUsage == false) {
       printArgumentsUsages(requiredUsages, optionalUsages, helpUsages);
       process.exit(0);
     }
@@ -208,6 +221,8 @@ function getOptions(framework)
   }
 
   options.appConfigDir = path.resolve(options.projectDir, 'src', 'appConfig');
+  options.appConfigFile = path.resolve(options.appConfigDir, 'app.config.mjs');
+  options.appJsviewConfigFile = path.resolve(options.appConfigDir, 'jsview.config.mjs');
   options.appPrivKeyFile = path.resolve(options.appConfigDir, 'app_sign_private_key.crt');
   options.appPubKeyFile = path.resolve(options.appConfigDir, 'app_sign_public_key.pem');
 
@@ -231,12 +246,13 @@ function getOptions(framework)
 
   const cacheName = (framework == 'vue' ? '.vite' : '.cache');
   options.cacheDir = path.resolve(options.modulesDir, cacheName);
-  options.baseUrlFile = path.resolve(options.cacheDir, 'jsview', 'network.mjs');
+  options.cacheJsViewDir = path.resolve(options.cacheDir, 'jsview');
+  options.baseUrlFile = path.resolve(options.cacheJsViewDir, 'network.mjs');
 
   return options;
 }
 
-function getPackageObject(modulePath)
+function loadPackageObject(modulePath)
 {
   const pkgFullFile = path.resolve(modulePath, 'package.json');
   if (!fs.existsSync(pkgFullFile)) {
@@ -248,6 +264,16 @@ function getPackageObject(modulePath)
   return pkgObj;
 }
 
+function savePackageObject(modulePath, pkgObj)
+{
+  const pkgFullFile = path.resolve(modulePath, 'package.json');
+  const pkgContent = JSON.stringify(pkgObj, null, 2);
+
+  fs.writeFileSync(pkgFullFile, pkgContent, 'utf8');
+
+  return pkgObj;
+}
+
 function cpSync(workDir, srcPath, destPath, ignore=[])
 {
   const exists = fs.existsSync(srcPath);
@@ -395,6 +421,46 @@ function convertHomeDirectory(filePath)
   return filePath.replace(/^~\//, homeDir + '/');
 }
 
+function downloadFileAsync(url, localPath, workDir)
+{
+  const relativePath = path.relative(workDir, localPath);
+  Logger.Info('Downloading ' + url + ' => ' + relativePath);
+
+  const file = fs.createWriteStream(localPath);
+
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, (response) => {
+      response.pipe(file);
+
+      file.on('finish', () => {
+        file.close(() => {
+          Logger.Info('Success to download file to ' + relativePath);
+          resolve();
+        });
+      });
+    });
+
+    request.on('error', (err) => {
+      fs.unlink(localPath, () => {
+        Logger.ErrorAndExit('Failed to download file from ' + url);
+        reject(err);
+      });
+    });
+  });
+}
+
+function unzipFile(zipFilePath, toDir, workDir)
+{
+  var relativePath = path.relative(workDir, toDir);
+  if(!relativePath) {
+    relativePath = './'
+  }
+  Logger.Info('Unzipping ' + zipFilePath + ' => ' + relativePath);
+
+  const cmdline = 'npx -y extract-zip ' + zipFilePath + ' ' + toDir;
+  execCommand(cmdline);
+}
+
 function getNpmRegistry()
 {
   return 'https://nexus.cluster.qcast.cn/repository/npm-public';
@@ -405,15 +471,19 @@ export {
   checkNodeVersion,
   convertHomeDirectory,
   cpSync,
+  downloadFileAsync,
   execCommand,
   getOptions,
-  getPackageObject,
   getNpmRegistry,
   isSymlinkSync,
+  loadPackageObject,
   makeZip,
   parseArguments,
+  printArgumentsUsages,
   readJsonFile,
   rmSync,
+  savePackageObject,
   symlinkSync,
+  unzipFile,
   Logger,
-}
+}

package/tools/jsview-config-app.mjs

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+  checkNodeVersion,
+  getOptions,
+  parseArguments,
+  Logger,
+} from './jsview-common.mjs';
+
+function setAppConfig(options)
+{
+  let appConfigContent = fs.readFileSync(options.appConfigFile, 'utf8');
+
+  appConfigContent = appConfigContent.replace(/AppName: .*,/, 'AppName: "' + options.appName + '",');
+  appConfigContent = appConfigContent.replace(/AppTitle: .*,/, 'AppTitle: "' + options.appTitle + '",');
+
+  console.log(appConfigContent)
+
+  fs.writeFileSync(options.appConfigFile, appConfigContent, 'utf8');
+}
+
+async function main(argv) {
+  checkNodeVersion();
+
+  const options = getOptions();
+
+  options.appName = argv.appName ?? 'JsViewDemo';
+  options.appTitle = argv.appTitle ?? 'JsView Demo';
+
+  Logger.Info();
+  Logger.Info('Setting config to app.config.mjs ...');
+  setAppConfig(options);
+  Logger.Info('Set config finish.');
+}
+
+
+const requiredUsages = {
+};
+const optionalUsages = {
+  '--app-name': 'App name. default is: "JsViewDemo".',
+  '--app-title': 'App title. default is: "JsView Demo".',
+};
+const argv = parseArguments(requiredUsages, optionalUsages, false);
+main(argv)

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);