@shijiu/jsview 1.9.888 → 1.9.909

package/tools/{jsview-common.js → jsview-common.mjs}

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 'use strict';
 
-const childProcess = require('child_process');
-const fs = require('fs');
-const path = require('path');
+import childProcess from 'child_process';
+import fs from 'fs';
+import path from 'path';
 
 function printArgumentsUsages(requiredUsages, optionalUsages, helpUsages)
 {
@@ -41,6 +41,7 @@ function parseArguments(requiredUsages = {},
                         optionalUsages = {},
                         withoutUnparsed = true)
 {
+  const keySeparator = '|';
   const formatKey = (key) => {
     let formattedKey = key.trim().replace(/^-*/, '');
     formattedKey = formattedKey.replace(/-(.)/g, (x) => x[1].toUpperCase())
@@ -57,9 +58,25 @@ function parseArguments(requiredUsages = {},
     }
     return formattedValue;
   }
-  const checkAliases = (aliases, options) => {
+  const hasKey = (usages, key) => {
+    const fmtKey = formatKey(key);
+    for (const checker in usages) {
+      const checkerList = checker.split(keySeparator);
+      for (const alias of checkerList) {
+        const fmtAlias = formatKey(alias);
+        if (fmtAlias === fmtKey) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+  const checkAliases = (checker, options) => {
+    const checkerList = checker.split(keySeparator);
+
     const formattedAliases = [];
-    for (const alias of aliases) {
+    for (const alias of checkerList) {
       const fmtAlias = formatKey(alias);
       formattedAliases.push(fmtAlias);
     }
@@ -112,31 +129,35 @@ function parseArguments(requiredUsages = {},
       }
     }
 
+    if (hasKey(helpUsages, key) == false
+    && hasKey(requiredUsages, key) == false
+    && hasKey(optionalUsages, key) == false) {
+        console.error('JsView Error: Failed to parse usage: ' + argu);
+        process.exit(1);
+    }
+
     let formattedKey = formatKey(key);
     let formattedValue = formatValue(value);
     options[formattedKey] = formattedValue;
   }
 
   for (const checker in helpUsages) {
-    const checkerList = checker.split('|');
-    const aliasedOptions = checkAliases(checkerList, options);
+    const aliasedOptions = checkAliases(checker, options);
     if (aliasedOptions) {
       printArgumentsUsages(requiredUsages, optionalUsages, helpUsages);
       process.exit(0);
     }
   }
   for (const checker in requiredUsages) {
-    const checkerList = checker.split('|');
-    const aliasedOptions = checkAliases(checkerList, options);
+    const aliasedOptions = checkAliases(checker, options);
     if (!aliasedOptions) {
-      console.log('JsView Error: Failed to find required option: ' + checkerList);
+      console.log('JsView Error: Failed to find required option: ' + checker);
       process.exit(-1);
     }
     options = { ...options, ...aliasedOptions };
   }
   for (const checker in optionalUsages) {
-    const checkerList = checker.split('|');
-    const aliasedOptions = checkAliases(checkerList, options);
+    const aliasedOptions = checkAliases(checker, options);
     options = { ...options, ...aliasedOptions };
   }
 
@@ -208,7 +229,8 @@ function getPackageObject(modulePath)
     console.error('JsView Error: Failed to get ' + modulePath + ', file is not exists.');
     process.exit(1);
   }
-  const pkgObj = require(pkgFullFile);
+  let pkgContent = fs.readFileSync(pkgFullFile, 'utf8');
+  const pkgObj = JSON.parse(pkgContent);
 
   return pkgObj;
 }
@@ -298,7 +320,7 @@ function checkNodeVersion(minMajorVersion = 16)
   }
 }
 
-module.exports = {
+export {
   checkNodeVersion,
   cpSync,
   execCommand,

package/tools/{jsview-post-build.js → jsview-post-build.mjs}

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 'use strict';
 
-const crypto = require('crypto');
-const fs = require('fs');
-const path = require('path');
-const url = require('url')
-const {
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import url from 'url'
+import {
   checkNodeVersion,
   getOptions,
   parseArguments,
-} = require('./jsview-common');
+} from './jsview-common.mjs';
 
 // npm run build 时检查jsview-dom是否处于Debug模式。
 async function checkDomDebugDisabled(options) {
@@ -227,7 +227,8 @@ async function main(argv)
 
   const vueConfigFile = path.resolve(options.projectDir, 'vue.config.js');
   if (fs.existsSync(vueConfigFile)) {
-    vueCfgObj = require(vueConfigFile);
+    let vueCfgContent = fs.readFileSync(vueConfigFile, 'utf8');
+    const vueCfgObj = JSON.parse(vueCfgContent);
     if(vueCfgObj.outputDir) {
         options.distDir = path.resolve(options.projectDir, vueCfgObj.outputDir);
     }

package/tools/{jsview-post-install.js → jsview-post-install.mjs}

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 'use strict';
 
-const fs = require('fs');
-const path = require('path');
-const url = require('url');
-const {
+import fs from 'fs';
+import path from 'path';
+import url from 'url';
+import {
   checkNodeVersion,
   cpSync,
   execCommand,
@@ -14,7 +14,7 @@ const {
   parseArguments,
   symlinkSync,
   rmSync
-} = require('./jsview-common');
+} from './jsview-common.mjs';
 
 function checkNpmCommand()
 {

package/tools/{jsview-run-android.js → jsview-run-android.mjs}

@@ -1,14 +1,13 @@
 #!/usr/bin/env node
 'use strict';
 
-const childProcess = require('child_process');
-const path = require('path');
-const url = require('url');
-const {
+import childProcess from 'child_process';
+import url from 'url';
+import {
     checkNodeVersion,
     getOptions,
     parseArguments
-} = require('./jsview-common');
+} from './jsview-common.mjs';
 
 async function getExtraOptions(argv)
 {

package/tools/jsview-upgrade.mjs

@@ -0,0 +1,353 @@
+#!/usr/bin/env node
+'use strict';
+
+import fs from 'fs';
+import path from 'path';
+import url from 'url';
+import {
+  checkNodeVersion,
+  execCommand,
+  parseArguments
+} from './jsview-common.mjs';
+
+function askAndAnswer(question)
+{
+  process.stdout.write(question)
+  let buffer = Buffer.alloc(100)
+  fs.readSync(0, buffer, 0, 100)
+  let answer = buffer.toString().toLowerCase().replace('\n', '');
+  answer = answer.substring(0, answer.indexOf('\0'));
+  return answer;
+}
+
+function getArgument(argument, usage)
+{
+  if (!argument) {
+    return argument;
+  }
+
+  if (typeof (argument) != 'string') {
+    console.error('JsView Error: ' + usage + ' is not a valid path.');
+    process.exit(1);
+  }
+  const argumentPath = path.resolve(process.cwd(), argument);
+  if (fs.existsSync(argumentPath) == false) {
+    console.error('JsView Error: ' + argument + ' is not exists.');
+    process.exit(1);
+  }
+
+  return argumentPath;
+}
+
+function getOptions(argv)
+{
+  const options = {};
+
+  const scriptPath = path.resolve(process.cwd(), process.argv[1]);
+  options.rootDir = scriptPath.replaceAll(/node_modules\/@shijiu\/jsview.*/g, '');
+
+  options.jsviewVersion = argv.jsviewVersion;
+
+  options.stagePixel = getArgument(argv.stagePixel, '--stage-pixel');
+  options.stageAnimation = getArgument(argv.stageAnimation, '--stage-animation');
+  options.stagePkgJson = getArgument(argv.stagePkgJson, '--stage-pkg-json');
+
+  console.info();
+  console.info('Upgrade to JsView version: ' + options.jsviewVersion);
+  console.info('  Project folder:    ' + options.rootDir);
+  console.info('=====================================');
+  console.info('  Stage pixel:        ' + (options.stagePixel ?? false));
+  console.info('  Stage animation:    ' + (options.stageAnimation ?? false));
+  console.info('  Stage package.json: ' + (options.stagePkgJson ?? false));
+  console.info('=====================================');
+
+  console.info();
+  console.info('Are you sure to upgrade it?');
+  const answer = askAndAnswer('(y/N) ');
+  if (answer.substring(0, 1) != 'y' && answer.substring(0, 3) != 'yes') {
+    console.error('JsView Info: User cancelled.')
+    process.exit(1);
+  }
+
+  return options;
+}
+
+function getFilesRecursive(dirPath) {
+  const ignoreFileList = [
+    '.git',
+    '.gitignore',
+    'node_modules',
+    'package.json',
+    'package-lock.json'
+  ];
+  const fileExtList = [
+    '!.min.js',
+    '.css',
+    '.js',
+    '.json',
+    '.mjs',
+    '.vue',
+  ];
+
+  let filePathList = [];
+
+  const fileNameList = fs.readdirSync(dirPath);
+  for (const fileName of fileNameList) {
+    if (ignoreFileList.includes(fileName)) {
+      continue;
+    }
+
+    const filePath = path.join(dirPath, fileName);
+    if (fs.statSync(filePath).isDirectory()) {
+      const subFilePathList = getFilesRecursive(filePath);
+      filePathList = [...filePathList, ...subFilePathList];
+    } else {
+      let needUpgrade = false;
+      for (let fileExtName of fileExtList) {
+        if (fileExtName.startsWith('!')) { // 强制忽略该文件
+          fileExtName = fileExtName.substring(1);
+          if (filePath.endsWith(fileExtName)) {
+            break;
+          }
+        } else {
+          if (filePath.endsWith(fileExtName)) {
+            needUpgrade = true;
+            break;
+          }
+        }
+      }
+      if (needUpgrade == false) {
+        continue;
+      }
+
+      const fileExtName = path.extname(filePath);
+      if (fileExtList.includes(fileExtName) == false) {
+        continue;
+      } else if (fileExtList.includes('!' + fileExtName)) {
+        continue;
+      }
+      filePathList.push(filePath);
+    }
+  }
+
+  return filePathList;
+}
+
+function upgradeStagePixel(options) {
+  console.info('Upgrading stage pixel...');
+
+  const filePathList = getFilesRecursive(options.stagePixel);
+
+  for (const filePath of filePathList) {
+    try {
+      let content = fs.readFileSync(filePath, 'utf8');
+
+      content = content.replaceAll(/([0-9])px/g, '$1');
+
+      fs.writeFileSync(filePath, content, 'utf8');
+    } catch (ex) {
+      console.error('JsView Error: Failed to update pixel for file: ' + filePath);
+      console.error(ex);
+      process.exit(1);
+    }
+  }
+
+  console.info('Upgraded stage pixel...');
+
+  return 0;
+}
+
+function upgradeStageAnimation(options)
+{
+  console.info('Upgrading stage animation...');
+
+  if (typeof (options.stageAnimation) != 'string'
+    || fs.existsSync(options.stageAnimation) == false) {
+    console.error('JsView Error: --stage-animation is not a valid path.');
+    process.exit(1);
+  }
+
+  const filePathList = getFilesRecursive(options.stageAnimation);
+
+  for (const filePath of filePathList) {
+    try {
+      let content = fs.readFileSync(filePath, 'utf8');
+
+      content = content.replaceAll(':onAnimationEnd', '@animationend');
+
+      fs.writeFileSync(filePath, content, 'utf8');
+    } catch (ex) {
+      console.error('JsView Error: Failed to update animation for file: ' + filePath);
+      console.error(ex);
+      process.exit(1);
+    }
+  }
+
+  console.info('Upgraded stage animation...');
+
+  return 0;
+}
+
+function getFramework(pkgJsonFilePath)
+{
+  if (fs.existsSync(pkgJsonFilePath) == false) {
+    console.error('JsView Error: Failed to find package.json: ' + pkgJsonFilePath);
+    process.exit(1);
+  }
+
+  let framework = 'unknown';
+
+  const content = fs.readFileSync(pkgJsonFilePath, 'utf8');
+  const pkgObj = JSON.parse(content);
+  if (pkgObj.dependencies?.vue) {
+    framework = 'vue';
+  } else if (pkgObj.dependencies?.react) {
+    framework = 'react';
+  } else {
+    console.error('JsView Error: Failed to recognize framework.');
+    process.exit(1);
+  }
+
+  return framework;
+}
+
+function upgradeVueStagePackageJson(options)
+{
+  console.info('Upgrading stage package.json...');
+
+  const needRemovePkgs = [
+    // dependencies
+    '@shijiu/jsview-vue',
+    'core-js',
+    'deepmerge',
+    'fork-ts-checker-webpack-plugin',
+    'gifuct-js',
+    'qr.js',
+    'vue',
+    'vue-router',
+
+    // devDependencies
+    '@typescript-eslint/eslint-plugin',
+    '@typescript-eslint/parser',
+    '@vue/cli-plugin-babel',
+    '@vue/cli-plugin-eslint',
+    '@vue/cli-plugin-typescript',
+    '@vue/cli-service',
+    '@vue/compiler-sfc',
+    '@vue/eslint-config-typescript',
+    'babel-eslint',
+    'cache-loader',
+    'cosmiconfig',
+    'eslint',
+    'eslint-plugin-node',
+    'eslint-plugin-promise',
+    'eslint-plugin-standard',
+    'eslint-plugin-vue',
+    'fork-ts-checker-webpack-plugin-v5',
+    'postcss-import-sync',
+    'postcss-js',
+    'typescript',
+    'vue-class-component',
+    'webpack',
+  ];
+
+  const needAppendPkgs = {
+    '@shijiu/jsview': '1.9.888',
+    '@shijiu/jsview-vue': '1.9.888',
+    'vue': '3.2.45',
+    'vue-router': '4.1.6',
+  };
+  const needAppendDevPkgs = {
+    '@vitejs/plugin-vue': '4.0.0',
+    'typescript': '4.9.3',
+    'vite': '4.0.0',
+    'vue-tsc': '1.0.11',
+  };
+
+  if (typeof (options.stagePkgJson) != 'string'
+  || fs.existsSync(options.stagePkgJson) == false) {
+    console.error('JsView Error: --stage-pkg-json is not a valid path.');
+    process.exit(1);
+  }
+
+  try {
+    let content = fs.readFileSync(options.stagePkgJson, 'utf8');
+    const pkgObj = JSON.parse(content);
+
+    // 删除旧内容
+    delete pkgObj.main;
+    delete pkgObj.eslintConfig;
+    delete pkgObj.scripts.lint;
+    delete pkgObj.scripts.serve;
+    for (const removePkg of needRemovePkgs) {
+      delete pkgObj.dependencies[removePkg];
+      delete pkgObj.devDependencies[removePkg];
+    }
+
+    // 添加新内容
+    pkgObj.type = 'module';
+    pkgObj.scripts.android = 'node node_modules/@shijiu/jsview/tools/jsview-run-android.mjs --framework=vue';
+    pkgObj.scripts.build = 'vue-tsc && vite build && node node_modules/@shijiu/jsview/tools/jsview-post-build.mjs --framework=vue';
+    pkgObj.scripts.dev = 'vite';
+    pkgObj.scripts.postinstall = 'node node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue';
+    pkgObj.scripts.preview = 'vite preview';
+    pkgObj.scripts.start = 'vite';
+    pkgObj.browserslist = ['chrome 102', 'not dead'];
+
+    for (const [key, value] of Object.entries(needAppendPkgs)) {
+      pkgObj.dependencies[key] = value;
+    }
+    for (const [key, value] of Object.entries(needAppendDevPkgs)) {
+      pkgObj.devDependencies[key] = value;
+    }
+
+    content = JSON.stringify(pkgObj, null, 2);
+    fs.writeFileSync(options.stagePkgJson, content, 'utf8');
+  } catch (ex) {
+    console.error('JsView Error: Failed to update package.json: ' + options.stagePkgJson);
+    console.error(ex);
+    process.exit(1);
+  }
+
+  execCommand('npm install');
+
+  console.info('Upgraded stage package.json...');
+
+  return 0;
+}
+
+function main(argv)
+{
+  checkNodeVersion();
+
+  const options = getOptions(argv);
+
+  if (options.stagePixel) {
+    upgradeStagePixel(options);
+  }
+  if (options.stageAnimation) {
+    upgradeStageAnimation(options);
+  }
+  if (options.stagePkgJson) {
+    const framework = getFramework(options.stagePkgJson);
+    if (framework == 'vue') {
+      upgradeVueStagePackageJson(options);
+    } else {
+      console.error('JsView Error: Upgrade ' + framework + ' package.json is not implementation.');
+      process.exit(1);
+    }
+  }
+}
+
+const requiredUsages = {
+  '--jsv | --jsview-version': 'The version of jsview that is expected to be upgraded.',
+};
+const optionalUsages = {
+  '--stage-animation': 'Fix animations, value is a directory.',
+  '--stage-app-config': 'Upgrade appConfig to new version.',
+  '--stage-main-js': 'Upgrade main.js to new version.',
+  '--stage-pixel': 'Fix pixels, value is a directory.',
+  '--stage-pkg-json': 'Upgrade package.json to new version.',
+};
+const argv = parseArguments(requiredUsages, optionalUsages, false);
+main(argv)