@shijiu/jsview 2.3.151-test.0 → 3.0.0-next-vue.0

package/thirdparty/vite/jsview-vite-extension.mjs

@@ -0,0 +1,336 @@
+import fs from 'fs'
+import path from 'path'
+// import fullReload from 'vite-plugin-full-reload';
+// import wasm from "vite-plugin-wasm";
+
+// https://vitejs.dev/config/
+const jsviewConfig = {
+  assetsInclude: ['**/*.bmp'],
+  base: './', // index.html 使用相对路径
+  build: {
+    assetsInlineLimit: 0,
+    //cssTarget: 'css/', // 未生效
+    commonjsOptions: getCommonjsOptions(),
+    emptyOutDir: true,
+    minify: useMinify(),
+    // jsvMinifyExclude: process.env['JSVIEW_MINIFY_EXCLUDE'],
+    modulePreload: {
+      polyfill: false
+    },
+    rolldownOptions: {
+      onwarn: onRolldownWarning,
+      output: {
+        assetFileNames: getAssetFileName,
+        chunkFileNames: getChunkFileName,
+        entryFileNames: 'js/main.jsv.[hash].js',
+        format: 'esm',
+        hashCharacters: 'hex',
+        manualChunks: getManualChunks,
+      },
+      plugins: [
+        rolldownRemoveBangsPlugin(),
+        rolldownMinifyExcludePlugin(),
+      ],
+    },
+    sourcemap: true,
+    target: 'es2022', // 不转译async/await
+  },
+  isCustomElement: isCustomElement,
+  optimizeDeps: getOptimizeDeps(),
+  plugins: [
+  //   fullReload('node_modules/@shijiu/**/*'),
+    // wasm(),
+  ],
+  resolve: {
+    alias: getResolveAlias(),
+    preserveSymlinks: true
+  },
+  server: {
+    headers: { // 启用浏览器SharedArrayBuffer，webassmbly的thread用
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+    host: true,
+    https: process.env['JSVIEW_ENABLE_HTTPS'] ? getHttpsConfig() : false,
+    open: !process.env['JSVIEW_DISABLE_OPEN_BROWSER'] && process.platform === "darwin",
+    watch: {
+      ignored: [
+        '!**/node_modules/@shijiu/**',
+      ],
+    }
+  },
+  worker: {
+    format: 'esm',
+    rolldownOptions: {
+      output: {
+        assetFileNames: getAssetFileName,
+        chunkFileNames: getChunkFileName,
+        entryFileNames: getChunkFileName,
+        format: 'esm',
+        hashCharacters: 'hex',
+      },
+    },
+  },
+};
+
+function ensureFramework(originConfig) {
+  const checkFramework = function (name) {
+    if (name.indexOf('vue') >= 0) {
+      return 'vue';
+    // } else if (name.indexOf('react') >= 0) {
+    //   return 'react';
+    }
+
+    return null;
+
+  };
+
+  let framework = 'unknown';
+  for (const plugins of originConfig.plugins) {
+    if (Array.isArray(plugins)) {
+      for (const plugin of plugins) {
+        framework = checkFramework(plugin.name);
+        if (framework) {
+          break;
+        }
+      }
+    } else {
+      const plugin = plugins;
+      framework = checkFramework(plugin.name);
+    }
+    if (framework) {
+      break;
+    }
+  }
+
+  return framework;
+}
+
+function getAssetFileName(chunkInfo) {
+  if(chunkInfo.name?.endsWith('.css')) {
+    return 'css/[name].[hash].css';
+  } else if(chunkInfo.name?.endsWith('.ttf')) {
+    return 'assets/[name].ttf';
+  } else if(chunkInfo.name?.endsWith('.wasm')) {
+    return 'js/[name].wasm';
+  }
+
+  // return 'assets/[name].[hash].[ext]'
+  return 'assets/[name].[hash][extname]'
+}
+
+function getChunkFileName(chunkInfo) {
+  return (process.env['JSVIEW_KEEP_CHUNKNAME'] ? 'js/[name].[hash].js' : 'js/chunk.jsv2.[hash].js');
+}
+
+function getCommonjsOptions() {
+  return {
+    'gifuct-js': true,
+    'js-binary-schema-parser': true,
+    'mockjs': true,
+    'qr.js': true,
+  };
+}
+
+function getHttpsConfig() {
+  const configDir = path.resolve(getModuleDir(), '@shijiu/jsview/tools/https-server-config');
+  const certFilePath = path.resolve(configDir, 'cert.pem');
+  const keyFilePath = path.resolve(configDir, 'key.pem');
+
+  return {
+    cert: fs.readFileSync(certFilePath),
+    key: fs.readFileSync(keyFilePath),
+    maxVersion: 'TLSv1.2',
+    minVersion: 'TLSv1',
+  }
+}
+
+function getManualChunks(moduleId) {
+  const manualChunks = {
+    'export-sfc': ['\0plugin-vue:export-helper', '@shijiu/jsview-vue/bin/export-sfc.mjs'], // 将_export_sfc独立出来，防止被集成在jsview-vue中导致import deadloop.
+    'vue': ['vue'], // 将vue独立出来，防止被集成在main.js中导致import deadloop.
+    // 将dom-entry和forge-define分割出来，防止被集成在main.js中导致import deadloop.
+    'jsview-forge-define': ['@shijiu/jsview/dom/jsv-forge-define.mjs'],
+    'jsview-dom-entry': ['@shijiu/jsview/dom/index.mjs'], 
+    'jsview-vue-entry': ['@shijiu/jsview-vue/index.js'], 
+    'jsview-vue-common': ['@shijiu/jsview-vue/bin/jsview-vue-common.mjs'], 
+    // 'jsview-vue-export-sfc': [],  // 将jsview-vue中的export-sfc，防止被集成在jsview-vue-entry中导致import deadloop.
+  };
+
+  for(const [key, valueList] of Object.entries(manualChunks)) {
+    for(const value of valueList) {
+      if(moduleId.endsWith(value)) {
+        return key;
+      }
+    }
+  }
+}
+
+function getModuleDir() {
+  const moduleDir = path.resolve(process.cwd(), 'node_modules');
+  return moduleDir;
+}
+
+function getOptimizeDeps() {
+  return {
+    include: [
+      'gifuct-js',
+      // 'mockjs',
+      'qr.js'
+    ],
+    exclude: [
+      '@shijiu/jsview/loader/jsview-main.mjs', // 解决windows上出现解析异常的问题。
+      '@shijiu/jsview',
+      '@shijiu/jsview-vue',
+      '@shijiu/jsview-vue-samples',
+      'jsview',
+      'jsview-vue',
+      'jsview-vue-samples',
+    ],
+  }
+}
+
+function getResolveAlias() {
+  return {
+      // 'jsview': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview'),
+      'jsview-vue': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview-vue'),
+      'jsview-vue-samples': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview-vue-samples'),
+      // 'jsview-react': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview-react'),
+      // 'jsview-react-samples': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview-react-samples'),
+      '/js/main.jsv.mjs': path.resolve(process.cwd(), 'node_modules/@shijiu/jsview/loader/jsview-main.mjs'),
+    }
+}
+
+function isCustomElement(tag) {
+  return tag == 'fdiv' || tag.startsWith('jsv-')
+}
+
+function onRolldownWarning(warning, defaultHandler) {
+  if (warning.message?.includes('externalized for browser compatibility')
+  && warning.message?.includes('jsview-dom-browser-forge')) {
+    // console.info('\nJsView Info: Ignore warning', warning.message)
+    return;
+  } else if (warning.code === 'FILE_NAME_CONFLICT') {
+    if(warning.message.includes('jsview-dom-browser-forge')
+    && warning.message.includes('.wasm')) {
+      console.info('\nJsView Info: Ignore warning', warning.message)
+      return;
+    }
+  } else if (warning.code === 'EVAL') {
+    if(warning.message.includes('mock.js')) {
+      console.info('\nJsView Info: Ignore warning', warning.message)
+      return;
+    }
+  }
+
+  defaultHandler(warning);
+}
+
+function rolldownMinifyExcludePlugin() {
+  const jsvMinifyExclude = process.env['JSVIEW_MINIFY_EXCLUDE'];
+  const minifyExcludeChunkCodes = new Map();
+  let minifyExcludeRegex = null;
+
+  minifyExcludeRegex = new RegExp(jsvMinifyExclude?.trim() ?? '');
+  function isExcludeChunk(chunk) {
+    const name = chunk.name ?? chunk.fileName;
+    return minifyExcludeRegex.test(name);
+  }
+
+  function minifyExcludeRenderChunk(code, chunk, _options) {
+    if(isExcludeChunk(chunk)) {
+      const name = chunk.name ?? chunk.fileName;
+      // renderChunk 发生在 minify 之前，先缓存原始代码，稍后在 generateBundle 覆盖回来
+      minifyExcludeChunkCodes.set(name, code);
+    }
+
+    // 统一交给 Rolldown 构建链路；命中项会在 generateBundle 阶段恢复原始代码
+    return null;
+  }
+
+  function minifyExcludeGenerateBundle(_options, bundle) {
+    for(const item of Object.values(bundle)) {
+      if(item.type !== 'chunk') {
+        continue;
+      }
+      if(!isExcludeChunk(item)) {
+        continue;
+      }
+
+      const originalCode = minifyExcludeChunkCodes.get(item.name || item.fileName);
+      if(typeof originalCode === 'string') {
+        item.code = originalCode;
+      }
+    }
+  }
+
+  return {
+    name: 'rolldown-plugin-minify-exclude',
+    renderChunk: jsvMinifyExclude ? minifyExcludeRenderChunk : null,
+    generateBundle: jsvMinifyExclude ? minifyExcludeGenerateBundle : null,
+  };
+}
+
+function rolldownRemoveBangsPlugin() {
+  return {
+    name: 'rolldown-plugin-remove-bangs',
+    renderChunk(code, _chunk, _options) {
+      return {
+        code: code.replace(/^\/\/!/g, '//').replace(/^\/\*!/g, '/*'),
+        map: null,
+      }
+    },
+  };
+}
+
+function useMinify() {
+  return process.env['JSVIEW_DISABLE_MINIFY'] ? false : true;
+}
+
+function jsvCreateJsViewViteConfig(originConfig) {
+  let aliasJsView;
+
+  const moduleDir = getModuleDir();
+  const framework = ensureFramework(originConfig);
+  switch (framework) {
+    case 'vue':
+      aliasJsView = path.resolve(moduleDir, '@shijiu/jsview-vue');
+      break;
+    // case 'react':
+    //   aliasJsView = path.resolve(moduleDir, '@shijiu/jsview-react');
+    //   break;
+    default:
+      throw new Error('JsView Error: Failed to support framework: ' + framework);
+  }
+  jsviewConfig.resolve.alias['jsview'] = aliasJsView;
+
+  if(process.env['JSVIEW_DISABLE_MANUALCHUNKS']) {
+    delete jsviewConfig.build.rolldownOptions.output.manualChunks 
+  }
+
+  // 解决templete工程中没有mockjs导致的报错。
+  const mockjs = path.resolve(moduleDir, 'mockjs');
+  if(fs.existsSync(mockjs)) {
+    jsviewConfig.optimizeDeps.include.push('mockjs');
+  }
+
+  return jsviewConfig;
+}
+
+function jsvSaveUrlToCache(urls) {
+  if ((urls?.network?.length ?? -1 )<= 0) {
+    console.error("JsView Error: Failed to find network info.");
+    return;
+  }
+
+  const moduleDir = getModuleDir();
+  const urlCacheDir = path.resolve(moduleDir, '.vite', 'jsview')
+  const urlCacheFilePath = path.resolve(urlCacheDir, 'network.mjs')
+  fs.mkdirSync(urlCacheDir, { recursive: true });
+  fs.writeFileSync(urlCacheFilePath, `export default "${urls.network[0]}"`)
+}
+
+export {
+  jsvCreateJsViewViteConfig,
+  jsvSaveUrlToCache,
+}

package/tools/jsview-build-zip.mjs

@@ -21,12 +21,16 @@ async function main(argv)
   const zipName = 'dist.dat';
   const zipPath = path.resolve(options.distDir, zipName);
 
-  const password = argv.password ?? 'jsview.shijiu.com';
+  let password = argv.password ?? 'jsview.shijiu.com';
+  if(argv.noPassword) {
+    password = null;
+  }
 
   execCommand('npm run build');
 
   let childFileNames = fs.readdirSync(options.distDir);
   childFileNames = childFileNames.filter(it => it !== zipName);
+  childFileNames = childFileNames.filter(it => it !== 'debug');
   childFileNames = childFileNames.map(it => path.resolve(options.distDir, it));
 
   makeZip(zipPath, password, ...childFileNames)
@@ -37,7 +41,8 @@ async function main(argv)
 const requiredUsages = {
 };
 const optionalUsages = {
-  '--password': 'Input passwork',
+  '--password': 'Input password',
+  '--no-password': 'Ignore password',
 };
 const argv = parseArguments(requiredUsages, optionalUsages);
 main(argv);

package/tools/jsview-common.mjs

@@ -6,7 +6,7 @@ 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";
+import { Logger } from "./jsview-logger.cjs";
 
 function printArgumentsUsages(requiredUsages, optionalUsages, helpUsages)
 {
@@ -180,6 +180,7 @@ function parseArguments(requiredUsages = {},
  * jsview-test-project
  * ├── dist
  * │   ├── assets
+ * │   ├── css
  * │   ├── debug
  * │   │   └── map
  * │   └── js
@@ -212,12 +213,11 @@ function getOptions(framework)
   options.jsviewDomDir = path.resolve(options.jsviewDir, 'dom');
   options.jsviewDomBinDir = path.resolve(options.jsviewDomDir, 'bin');
   options.jsviewPatchesDir = path.resolve(options.jsviewDir, 'patches');
-  options.jsviewPatchModulesDir = path.resolve(options.jsviewPatchesDir, 'node_modules');
   options.jsviewToolsDir = path.resolve(options.jsviewDir, 'tools');
   options.jsviewDomRevisionFile = path.resolve(options.jsviewDir, 'dom', 'target_core_revision.mjs');
 
   options.jsviewVueDir = path.resolve(options.modulesDir, '@shijiu', 'jsview-vue');
-  options.jsviewReactDir = path.resolve(options.modulesDir, '@shijiu', 'jsview-react');
+  // options.jsviewReactDir = path.resolve(options.modulesDir, '@shijiu', 'jsview-react');
   if (framework) {
     options.jsviewFrameworkDir = path.resolve(options.modulesDir, '@shijiu', 'jsview-' + framework);
   }
@@ -245,6 +245,7 @@ function getOptions(framework)
   options.distJsvInfoFile = path.resolve(options.distDir, 'jsv-info.json');
   options.distJsIndexFile = path.resolve(options.distDir, 'index.html');
   options.distAssetsDir = path.resolve(options.distDir, 'assets');
+  options.distCssDir = path.resolve(options.distDir, 'css');
   options.distJsDir = path.resolve(options.distDir, 'js');
   options.distDebugDir = path.resolve(options.distDir, 'debug');
   options.distDebugMapDir = path.resolve(options.distDebugDir, 'map');
@@ -427,7 +428,7 @@ function execCommandWithLiveLog(cmdline)
 }
 
 
-function checkNodeVersion(minMajorVersion = 16)
+function checkNodeVersion(minMajorVersion = 20)
 {
   const versions = process.version.replace('v', '').split('.');
   const [majorVersion, minorVersion, patchVersion] = versions;
@@ -438,6 +439,17 @@ function checkNodeVersion(minMajorVersion = 16)
   }
 }
 
+function getNodeVersion()
+{
+  const versions = process.version.replace('v', '').split('.');
+  const [major, minor, patch] = versions;
+  return {
+    major,
+    minor,
+    patch,
+  };
+}
+
 function askAndAnswer(question)
 {
   process.stdout.write(question)
@@ -588,6 +600,7 @@ export {
   getExportPrefix,
   getJsViewBurdenDefaultBaseUrl,
   getNetworkIpv4Addresses,
+  getNodeVersion,
   getNpmRegistry,
   getOptions,
   isCommandAvailable,

package/tools/{jsview-logger.js → jsview-logger.cjs}

@@ -58,7 +58,7 @@ class Logger {
     for(let idx = 0; idx < size; idx++) {
       args[idx] = Logger.Blue(Logger.Bold(args[idx]));
     }
-    console.info(...args);
+    console.info(Logger.Blue('JsView Tip:'), ...args);
   }
 
   static Info(...args) {

package/tools/jsview-post-build.mjs

@@ -192,6 +192,22 @@ async function prepareMainAppData(options)
     preloadBurdenResources.push(fileName);
   }
 
+  const aesKeyFilePath = path.resolve(options.appConfigDir, 'fingerprint_aes_key.mjs');
+  if (fs.existsSync(aesKeyFilePath)) {
+    const aesKeyFileUrl = url.pathToFileURL(aesKeyFilePath);
+    const { default: aesKeyConfig } = await import (aesKeyFileUrl);
+    const aesKey = aesKeyConfig.aes_key;
+    const aesIv = aesKeyConfig.iv;
+    
+    // 对appConfig.AppName进行aes加密并赋值给EncryptCode2
+    if (aesKey && aesIv) {
+      const cipher = crypto.createCipheriv('aes-128-cbc', Buffer.from(aesKey, 'utf8'), Buffer.from(aesIv, 'utf8'));
+      let encrypted = cipher.update(appConfig.AppName, 'utf8', 'base64');
+      encrypted += cipher.final('base64');
+      appConfig.EncryptCode2 = encrypted;
+    }
+  }
+
   // 组装AppData
   appConfig.PublicKeys = publicKeys; // 使用签名数组，支持后续追加签名
   appConfig.EncryptCodes = [encryptBase64]; // 同样使用数组，支持后续追加
@@ -200,10 +216,32 @@ async function prepareMainAppData(options)
     BaseUrl: bunderBaseUrl,
     Resources: preloadBurdenResources,
   };
+  if (appConfig.FingerPrint) {
+    // 删除FingerPrint的存储,节省信息字节数
+    delete appConfig.FingerPrint;
+  }
 
   return JSON.stringify(appConfig);
 }
 
+async function checkCssFileSize(options)
+{
+  if(fs.existsSync(options.distCssDir) == false) {
+    return;
+  }
+
+  const cssFileNames = fs.readdirSync(options.distCssDir);
+  for(const fileName of cssFileNames) {
+    const filePath = path.resolve(options.distCssDir, fileName)
+    const fileStats = await fs.statSync(filePath);
+    if (fileStats.size > 0) {
+      continue;
+    }
+
+    fs.writeFileSync(filePath, ' ', 'utf8'); // 防止空文件。
+  }
+}
+
 async function checkAppConfig(options)
 {
   const appConfigFilePath = path.resolve(options.appConfigDir, 'app.config.mjs');
@@ -488,12 +526,25 @@ async function makeJsvConfig(options)
   // appEntryFileName = appEntryFileName.replace(/\.js$/, '.mjs'); // deprecated
   appEntryFileName = appEntryFileName.replaceAll('\\', '/'); // windows平台适配
 
+  const appConfigFilePath = path.resolve(options.appConfigDir, 'app.config.mjs');
+  if (!fs.existsSync(appConfigFilePath)) {
+    Logger.ErrorAndExit('Failed to open app config file from ' + appConfigFilePath);
+  }
+  const appConfigFileUrl = url.pathToFileURL(appConfigFilePath);
+  const { default: appConfig } = await import(appConfigFileUrl);
+
   const jsvConfig = {
     "COREVERSIONRANGE":  jsviewTargetVersion.CoreRevisionAndBranch,
     "ENGINE":  jsviewTargetVersion.JseUrl,
     "URL": appEntryFileName,
+    "MINIAPPNAME": appConfig.AppName,
   };
 
+  // 启动图
+  if (appConfig.StartImageUrl && appConfig.StartImageUrl.length != 0) {
+    jsvConfig.STARTIMG = appConfig.StartImageUrl;
+  }
+
   const content = JSON.stringify(jsvConfig, null, 2);
   fs.writeFileSync(options.distJsvConfigFile, content, 'utf8');
 }
@@ -586,6 +637,10 @@ async function main(argv)
   // EntryMd5 要放在sourcemap更新之后
   updateOptions(options);
 
+  Logger.Info('Checking JsView css file size...');
+  await checkCssFileSize(options);
+  Logger.Info('Checked JsView css file size...');
+
   Logger.Info('Checking JsView app config...');
   await checkAppConfig(options);
   Logger.Info('Checked JsView app config...');