@shijiu/jsview 2.2.373 → 2.2.426-test.0

package/tools/jsview-post-build.mjs

@@ -7,6 +7,7 @@ import path from 'node:path';
 import url from 'node:url'
 import {
   checkNodeVersion,
+  getJsViewBurdenDefaultBaseUrl,
   getOptions,
   loadPackageObject,
   parseArguments,
@@ -253,6 +254,65 @@ async function signApp(options)
   }
 }
 
+function redirectBurdenResource(options)
+{
+  if(process.env['JSVIEW_BURDEN_LOCAL']) {
+    return;
+  }
+
+  let burdenBaseUrl = process.env['JSVIEW_BURDEN_BASEURL'];
+  if(!burdenBaseUrl) {
+    burdenBaseUrl = getJsViewBurdenDefaultBaseUrl();
+  }
+  if(!burdenBaseUrl.endsWith('/')) {
+    burdenBaseUrl += '/';
+  }
+
+  const burdenFilePathList = [];
+
+  const assetFileNames = fs.readdirSync(options.distAssetsDir);
+  for(const fileName of assetFileNames) {
+    if (!fileName.endsWith('.ttf')) {
+      continue;
+    }
+    burdenFilePathList.push(path.resolve(options.distAssetsDir, fileName));
+  }
+  const jsFileNames = fs.readdirSync(options.distJsDir);
+  for(const fileName of jsFileNames) {
+    if (!fileName.endsWith('.wasm')) {
+      continue;
+    }
+    burdenFilePathList.push(path.resolve(options.distJsDir, fileName));
+  }
+  for(const filePath of burdenFilePathList) {
+    fs.rmSync(filePath);
+    Logger.Info('Config burden file: ' + path.relative(options.projectDir, filePath));
+  }
+  
+  for(const fileName of jsFileNames) {
+    if (!fileName.endsWith('.js') && !fileName.endsWith('.js.map')) {
+      continue;
+    }
+
+    const filePath = path.resolve(options.distJsDir, fileName);
+    let sourceContent = fs.readFileSync(filePath, 'utf8');
+
+    for(const burdenFilePath of burdenFilePathList) {
+      const relativeBurdenFilePath = path.relative(options.distJsDir, burdenFilePath);
+      if(!sourceContent.includes(relativeBurdenFilePath)) {
+        continue;
+      }
+
+      const burdenFileUrl = burdenBaseUrl + path.basename(burdenFilePath);
+
+      sourceContent = sourceContent.replaceAll(relativeBurdenFilePath, burdenFileUrl);
+      Logger.Info('Burdenting ' + path.relative(options.projectDir, filePath) + ' for [' + relativeBurdenFilePath + ']');
+    }
+
+    fs.writeFileSync(filePath, sourceContent, 'utf8');
+  };
+}
+
 function redirectSourceMappingURL(options)
 {
   const jsFileNames = fs.readdirSync(options.distJsDir);
@@ -307,6 +367,28 @@ function makeMainJsvMjs(options, framework)
   fs.copyFileSync(newEntryFilePath, debugEntryFilePath);
 }
 
+function getWasmMapChunkName(options, wasmMapName)
+{
+  let chunkName = wasmMapName;
+
+  const regex = new RegExp(`sourceMappingURL.${wasmMapName}`);
+  const jsFileNames = fs.readdirSync(options.distJsDir);
+  for(const fileName of jsFileNames) {
+    if (!fileName.endsWith('.wasm')) {
+      continue;
+    }
+
+    const filePath = path.resolve(options.distJsDir, fileName);
+    const content = fs.readFileSync(filePath, 'utf-8');
+    if(regex.test(content)) {
+      chunkName = fileName + '.map';
+      break;
+    }
+  };
+
+  return chunkName;
+}
+
 function makeDebugMap(options, framework)
 {
   fs.mkdirSync(options.distDebugMapDir, { recursive: true });
@@ -323,6 +405,19 @@ function makeDebugMap(options, framework)
     fs.renameSync(from, to);
   };
 
+  const wasmFileNames = fs.readdirSync(options.jsviewDomBinDir);
+  for(const fileName of wasmFileNames) {
+    if (!fileName.endsWith('.wasm.map')) {
+      continue;
+    }
+
+    const chunkName = getWasmMapChunkName(options, fileName);
+    const from = path.resolve(options.jsviewDomBinDir, fileName);
+    const to = path.resolve(options.distDebugMapDir, chunkName);
+    Logger.Info(' -> ' + path.relative(options.projectDir, to));
+    fs.copyFileSync(from, to);
+  };
+
   const jsmapServeName = 'jsview-jsmap-serve.mjs';
   const jsmapServePath = path.resolve(options.jsviewToolsDir, jsmapServeName);
   if (!fs.existsSync(jsmapServePath)) {
@@ -407,6 +502,10 @@ async function main(argv)
   await checkDomDebugDisabled(options);
 
   Logger.Info();
+  Logger.Info('Redirecting JsView burden resource...');
+  redirectBurdenResource(options)
+  Logger.Info('Redirected JsView burden resource...');
+
   Logger.Info('Redirecting JsView source map...');
   redirectSourceMappingURL(options)
   Logger.Info('Redirected JsView source map...');

package/tools/jsview-post-install.mjs

@@ -245,7 +245,7 @@ async function printRevision(options)
   Logger.Info('**************************************************');
 }
 
-function doPostInstall(framework, pkgNeedPatch, skipCheckVersion)
+function doPostInstall(framework, pkgNeedPatch, skipCheckVersion, skipCheckNpmcmd)
 {
   const options = getOptions(framework);
   options.projectDir = process.cwd();
@@ -260,7 +260,9 @@ function doPostInstall(framework, pkgNeedPatch, skipCheckVersion)
     '@shijiu/jsview-react-extra-samples',
   ];
 
-  checkNpmCommand();
+  if(!skipCheckNpmcmd) {
+    checkNpmCommand();
+  }
 
   checkNpmLinkForDebug(options, linkablePkgNames);
 
@@ -304,14 +306,15 @@ function main(argv)
       Logger.ErrorAndExit('Failed to support framework: ' + framework);
   }
 
-  doPostInstall(argv.framework, pkgNeedPatch, argv.skipCheckVersion);
+  doPostInstall(argv.framework, pkgNeedPatch, argv.skipCheckVersion, argv.skipCheckNpmcmd);
 }
 
 const requiredUsages = {
   '--framework': 'Select from [vue|react]',
 };
 const optionalUsages = {
-  '--skip-check-version': 'Skip check patches version.'
+  '--skip-check-version': 'Skip check patches version.',
+  '--skip-check-npmcmd': 'Skip check npm command.'
 };
 const argv = parseArguments(requiredUsages, optionalUsages);
 main(argv);

package/tools/jsview-retrieve-sourcemap.mjs

@@ -8,6 +8,7 @@ import {
     checkNodeVersion,
     convertHomeDirectory,
     execCommand,
+    execCommandPromise,
     getOptions,
     parseArguments,
     Logger,
@@ -24,13 +25,14 @@ function getExtraOptions(argv)
   options.inputFile = convertHomeDirectory(argv.inputFile);
   options.outputFile = convertHomeDirectory(argv.outputFile);
   options.sourcemapDir = convertHomeDirectory(argv.sourcemapDir) ?? getDefaultSourceMapDir();
+  options.debugWasmFile = argv.debugWasmFile;
   options.sourceMapMoudulePath = path.resolve(options.modulesDir, 'source-map', 'source-map.js');
 
   if(!argv.sourcemapDir) {
     Logger.Warn('Use default source map dir: ' + options.sourcemapDir);
   }
   if(fs.existsSync(options.sourcemapDir) == false) {
-    Logger.ErrorAndExit('Source map dir is not exists. Please check dir: ' + options.sourcemapDir);
+    Logger.Warn('Source map dir is not exists. Please check dir: ' + options.sourcemapDir);
   }
 
   return options;
@@ -63,17 +65,17 @@ async function parseConsoleLog(options)
   const content = fs.readFileSync(options.inputFile, 'utf-8');
   const contentLines = content.split('\n');
 
-  const regexCharAt = /^\s+at\s+(\S+)?\s?\(?(.*):(\d+):(\d+)\)?$/;
-  const regexSymbolAt = /^(\S+) @ (.*?):(\d+)(?::(\d+))?$/;
+  const regexWasm = / at .* \(.*\.wasm.*:0x[0-9a-f]*\)/;
+  const regexJs = / at .* \((.*):(\d+):(\d+)\)/;
 
-  var resultLines = [];
+  let resultLines = [];
   for(const line of contentLines) {
-    var recovered = line.replace(/.*?:\d+ /, '');
+    let recovered = line.replace(/.*?:\d+ /, '');
 
-    if(regexCharAt.test(recovered)) {
-      recovered = await recoverCharAt(options, recovered, regexCharAt);
-    } else if(regexSymbolAt.test(recovered)) {
-      recovered = await recoverSymbolAt(options, recovered, regexSymbolAt);
+    if(regexWasm.test(recovered)) {
+      recovered = await recoverWasmLine(options, recovered);
+    } else if(regexJs.test(recovered)) {
+      recovered = await recoverJsLine(options, recovered);
     }
 
     if(!options.outputFile) {
@@ -89,57 +91,65 @@ async function parseConsoleLog(options)
   }
 }
 
-async function recoverCharAt(options, content, regex)
+async function recoverWasmLine(options, content)
 {
-  const matchResult = regex.exec(content);
-  var funcName = matchResult?.[1];
-  var fileName = matchResult?.[2];
-  var fileRow = matchResult?.[3];
-  var fileColumn = matchResult?.[4];
-
-  // at file.js:row:column
-  if(!fileName) {
-    fileName = funcName;
-    funcName = "";
-  } else { // at func (file.js:row:column)
-    // do nothing
+  if(!options.debugWasmFile) {
+    Logger.Warn('Debug wasm file is not exists. Please set by argument: --debug-wasm-file');
+    return content;
   }
 
-  const origPos = await getOriginalPosition(options, fileName, fileRow, fileColumn);
-  if(!origPos) {
+  const prefixIdx = content.lastIndexOf('(');
+  const suffixIdx = content.indexOf(')', prefixIdx);
+  if(prefixIdx < 0 || suffixIdx < 0) {
     return content;
   }
 
-  funcName = (origPos.name ?? funcName);
-  content  = '    at ';
-  content += funcName
-  content += (funcName ? ' (' : '');
-  content += (origPos.source + ':' + origPos.line + ':' + origPos.column);
-  content += (funcName ? ') ' : '');
+  const fileInfo = content.slice(prefixIdx + 1).slice(0, suffixIdx - prefixIdx - 1);
+  const colonIdx = fileInfo.lastIndexOf(':');
+  const address = fileInfo.slice(colonIdx + 1);
+
+  const cmdline = `emsymbolizer ${options.debugWasmFile} ${address}`;
+  const origPos = await execCommandPromise(cmdline);
 
-  return content;
+  let result = content.slice(0, prefixIdx + 1);
+  result += origPos;
+  result += content.slice(suffixIdx);
+
+  return result;
 }
 
-async function recoverSymbolAt(options, content, regex)
+async function recoverJsLine(options, content)
 {
-  // 忽略，拿不到column，不能解析出结果
-  // const matchResult = regex.exec(content);
-  // var funcName = matchResult?.[1];
-  // var fileName = matchResult?.[2];
-  // var fileRow = matchResult?.[3];
-  // var fileColumn = matchResult?.[4];
-
-  // const origPos = await getOriginalPosition(options, fileName, fileRow, fileColumn);
-  // if(!origPos) {
-  //   return content;
+  const prefixIdx = content.lastIndexOf('(');
+  const suffixIdx = content.indexOf(')', prefixIdx);
+  if(prefixIdx < 0 || suffixIdx < 0) {
+    return content;
+  }
+
+  const fileInfo = content.slice(prefixIdx + 1).slice(0, suffixIdx - prefixIdx - 1);
+  const fileInfoArray = fileInfo.split(':');
+  let fileName = fileInfoArray[0];
+  let fileRow = fileInfoArray[1];
+  let fileColumn = fileInfoArray[2];
+
+  // // at file.js:row:column
+  // if(!fileName) {
+  //   fileName = funcName;
+  //   funcName = "";
+  // } else { // at func (file.js:row:column)
+  //   // do nothing
   // }
 
-  // funcName = (origPos.name ?? funcName);
-  // content = funcName
-  // content += ' @ '
-  // content += (origPos.source + ':' + origPos.line + ':' + origPos.column);
+  const origPos = await getOriginalPosition(options, fileName, fileRow, fileColumn);
+  if(!origPos) {
+    return content;
+  }
 
-  return content;
+  let result = content.slice(0, prefixIdx + 1);
+  result += (origPos.source + ':' + origPos.line + ':' + origPos.column);
+  result += content.slice(suffixIdx);
+
+  return result;
 }
 
 async function getOriginalPosition(options, fileName, fileRow, fileColumn)
@@ -148,13 +158,17 @@ async function getOriginalPosition(options, fileName, fileRow, fileColumn)
     return null;
   }
 
-  const sourceMapFilePath = path.resolve(options.sourcemapDir, fileName + '.map');
+  if(fileName.endsWith('.map') == false) {
+    fileName = fileName + '.map';
+  }
+
+  const sourceMapFilePath = path.resolve(options.sourcemapDir, fileName);
   if(fs.existsSync(sourceMapFilePath) == false) {
     Logger.Warn('Source map file is not found: ' + sourceMapFilePath)
     return null;
   }
 
-  var sourceMapConsumer = options.sourceMapConsumerMap[sourceMapFilePath];
+  let sourceMapConsumer = options.sourceMapConsumerMap[sourceMapFilePath];
   if(!sourceMapConsumer) {
     const sourceMapContent = fs.readFileSync(sourceMapFilePath, 'utf-8');
     sourceMapConsumer = new options.sourceMapModule.SourceMapConsumer(sourceMapContent);
@@ -188,6 +202,7 @@ const requiredUsages = {
 };
 const optionalUsages = {
   '-d | --sourcemap-dir': 'Source map dir. Default dir is: ' + getDefaultSourceMapDir(),
+  '-w | --debug-wasm-file': 'Debug wasm file path.',
   '-o | --output-file': 'Recovered console log file path.',
 };
 const argv = parseArguments(requiredUsages, optionalUsages, false);

package/tools/jsview-run-tool.mjs

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
 'use strict';
 
+import path from 'node:path';
 import {
     askAndAnswer,
     checkNodeVersion,
-    getNetworkIpv4Addresses,
+    execCommand,
+    getExportPrefix,
     getOptions,
+    isCommandAvailable,
     parseArguments,
-    Logger,
-    execCommand,
     printArgumentsUsages,
+    Logger,
 } from './jsview-common.mjs';
 
 async function getExtraOptions(argv)
@@ -22,11 +24,16 @@ async function getExtraOptions(argv)
     options.entryUrl = argv.url;
 
     let commandCount = 0;
+    commandCount += (argv.httpServer ? 1 : 0);
+    commandCount += (argv.httpsServer ? 1 : 0);
+    commandCount += (argv.httpVite ? 1 : 0);
+    commandCount += (argv.httpsVite ? 1 : 0);
     commandCount += (argv.configApp ? 1 : 0);
     commandCount += (argv.genKeypair ? 1 : 0);
     commandCount += (argv.runonAndroid ? 1 : 0);
     commandCount += (argv.buildMinifyExclude ? 1 : 0);
     commandCount += (argv.buildZip ? 1 : 0);
+    commandCount += (argv.buildBurdenLocal ? 1 : 0);
     commandCount += (argv.moduleFederation ? 1 : 0);
     commandCount += (argv.vueDevtools ? 1 : 0);
     if(commandCount == 0) {
@@ -36,11 +43,16 @@ async function getExtraOptions(argv)
         }
 
         const commandPrompt = [
+            'httpServer',
+            'httpsServer',
+            'httpVite',
+            'httpsVite',
             'runonAndroid',
             'configApp',
             'genKeypair',
             'buildMinifyExclude',
             'buildZip',
+            'buildBurdenLocal',
             'vueDevtools',
             'moduleFederation',
         ];
@@ -58,11 +70,16 @@ async function getExtraOptions(argv)
         Logger.Info('command:', command);
         options[command] = true
     } else if(commandCount == 1) {
+        options.httpServer = argv.httpServer; 
+        options.httpsServer = argv.httpsServer; 
+        options.httpsVite = argv.httpsVite; 
+        options.httpVite = argv.httpVite; 
         options.runonAndroid = argv.runonAndroid; 
         options.configApp = argv.configApp; 
         options.genKeypair = argv.genKeypair; 
         options.buildMinifyExclude = argv.buildMinifyExclude;
         options.buildZip = argv.buildZip; 
+        options.buildBurdenLocal = argv.buildBurdenLocal; 
         options.vueDevtools = argv.vueDevtools; 
         options.moduleFederation = argv.moduleFederation; 
     } else if(commandCount > 1) {
@@ -111,6 +128,8 @@ function doCommand(options, argv) {
         }
 
         command = 'node node_modules/@shijiu/jsview/tools/jsview-build-zip.mjs --password=' + password;
+    } else if(options.buildBurdenLocal) {
+        command = 'JSVIEW_BURDEN_LOCAL=true npm run build';
     } else if(options.vueDevtools) {
         var defaultPort = 8098;
         const port = (typeof(options.vueDevtools) === 'string' ? options.vueDevtools : defaultPort);
@@ -124,6 +143,32 @@ function doCommand(options, argv) {
         argumentsLine = argumentsLine.replace(' -f ', ' ').replace(' --module-federation ', ' ');
 
         command = 'node node_modules/@shijiu/jsview/tools/jsview-module-federation.mjs' + argumentsLine;
+    } else if(options.httpServer) {
+        if(isCommandAvailable('serve') == false) {
+            Logger.ErrorAndExitNoException("Command `serve` is not found, please install it first by `npm install -g serve`.");
+        }
+        if(typeof options.httpServer !== 'string') {
+            Logger.ErrorAndExitNoException("Dir path is not found, please set dir by [-t|--http-server]=[DirPath].");
+        }
+        command = `serve -p 8080 --cors ${options.httpServer}`;
+    } else if(options.httpsServer) {
+        if(isCommandAvailable('serve') == false) {
+            Logger.ErrorAndExitNoException("Command `serve` is not found, please install it first by `npm install -g serve`.");
+        }
+        if(typeof options.httpsServer !== 'string') {
+            Logger.ErrorAndExitNoException("Dir path is not found, please set dir by [-s|--https-server]=[DirPath].");
+        }
+        const exportPrefix = getExportPrefix();
+        const certPath = path.resolve(options.jsviewToolsDir, 'https-server-config/cert.pem');
+        const keyPath = path.resolve(options.jsviewToolsDir, 'https-server-config/key.pem');
+        const configPath = path.resolve(options.jsviewToolsDir, 'https-server-config/serve.config.json');
+        command = `${exportPrefix} NODE_OPTIONS='--tls-min-v1.0 --tls-max-v1.2'`;
+        command += ` && serve -p 8080 --cors --ssl-cert ${certPath} --ssl-key ${keyPath} --config ${configPath} ${options.httpsServer}`;
+    } else if(options.httpVite) {
+        command = `npm start`;
+    } else if(options.httpsVite) {
+        const exportPrefix = getExportPrefix();
+        command = `${exportPrefix} JSVIEW_ENABLE_HTTPS=true && npm start`;
     }
 
     execCommand(command);
@@ -142,11 +187,16 @@ const requiredUsages = {
   '--framework': 'Select from [vue|react]',
 };
 const optionalUsages = {
+  '-t | --http-server': '=[DirPath]. Start http server for debug, port is 8080.',
+  '-s | --https-server': '=[DirPath]. Start https server for debug, port is 8080.',
+  '-v | --http-vite': 'Start vite https server for debug, same as `npm start`',
+  '-i | --https-vite': 'Start vite https server for debug.',
   '-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-minify-exclude': 'Build target with minify-exclude filter, like: -m or --build-minify-exclude=[filter], additional options: -s or --script=build:dev.',
   '-z | --build-zip': 'Build target to offline zip package, like: -z or --build-zip=[password].',
+  '-b | --build-burden-local': 'Build target with local burden files.',
   '-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.',
 };