create-jsview 2.0.1197-next-vue.0

package/common.mjs

@@ -0,0 +1,223 @@
+import fs from 'fs'
+import path from 'path'
+import url from 'url';
+import prompts from 'prompts'
+import {
+  bold, cyan, lightCyan, red
+} from 'kolorist';
+
+function copyDirOrFile(fromPath, toPath, ignoreFileList = []) {
+  const stat = fs.statSync(fromPath)
+  if (stat.isDirectory()) {
+    const fileList = fs.readdirSync(fromPath);
+    for (const file of fileList) {
+      const srcFile = path.resolve(fromPath, file);
+      const destFile = path.resolve(toPath, file);
+      copyDirOrFile(srcFile, destFile, ignoreFileList);
+    }
+  } else {
+    for (const ignoreFile of ignoreFileList) {
+      if (fromPath.endsWith(ignoreFile)
+      || fromPath.endsWith(ignoreFile.replaceAll('/', '\\'))) {
+        console.log('Ignore to copy ' + ignoreFile);
+        return;
+      }
+    }
+
+    const toParentPath = path.dirname(toPath);
+    fs.mkdirSync(toParentPath, { recursive: true })
+    fs.copyFileSync(fromPath, toPath);
+  }
+}
+
+function deepMergeObjects(mainObj, refObj) {
+  const mergedObj = {};
+
+  for (let key in mainObj) {
+    if (key in refObj) {
+      if (Array.isArray(mainObj[key]) && Array.isArray(refObj[key])) {
+        mergedObj[key] = mainObj[key].concat(refObj[key]);
+      } else if (typeof mainObj[key] === "object" && typeof refObj[key] === "object") {
+        mergedObj[key] = deepMergeObjects(mainObj[key], refObj[key]);
+      } else {
+        mergedObj[key] = refObj[key];
+      }
+    } else {
+      mergedObj[key] = mainObj[key];
+    }
+  }
+
+  for (let key in refObj) {
+    if (!(key in mainObj)) {
+      mergedObj[key] = refObj[key];
+    }
+  }
+
+  return mergedObj;
+}
+
+function deleteObjectKeys(obj, keys) {
+  if (!obj) {
+    return;
+  }
+
+  for (let key of keys) {
+    delete obj[key];
+  }
+}
+
+function dirNotEmpty(dirPath) {
+  if (fs.existsSync(dirPath) == false) {
+    return false;
+  }
+
+  const files = fs.readdirSync(dirPath)
+  if (files.length === 0) {
+    return false; 
+  }
+    
+  return true;
+}
+
+function errorAndExit(msg) {
+  console.error(red('✖ ') + msg);
+  process.exit(1);
+}
+
+function getFileFromScriptDir(fileName) {
+  const __filename = url.fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+
+  const filePath = path.resolve(__dirname, fileName);
+
+  return filePath;
+}
+
+function getFrameworkPrompt() {
+  return [
+    { title: 'vue + vite', value: 'vue-vite' },
+    { title: 'react + webpack', value: 'react-webpack' },
+  ];
+}
+
+async function getProjectConfigAsync(operator, defaultName) {
+  const config = {};
+  config.promptOptions = {
+    onCancel: () => {
+      errorAndExit('Operation cancelled');
+    }
+  };
+
+  const questions = [];
+
+  questions.push({
+    type: 'select',
+    name: 'framework',
+    message: `Select framework to ${operator}:`,
+    initial: 0,
+    choices: getFrameworkPrompt(),
+  });
+
+  questions.push({
+    type: 'text',
+    name: 'projectName',
+    message: 'Project name:',
+    initial: defaultName,
+    onState: (state) => {
+      config.targetDirName = state.value.trim() || defaultName;
+    }
+  });
+
+  const result = await prompts(questions, config.promptOptions);
+  Object.assign(config, result);
+  config.targetDirPath = path.resolve(process.cwd(), config.targetDirName)
+
+  return config;
+}
+
+async function generateProjectAsync(framework, targetDirPath, ignoreFileList) {
+  const templateDir = getFileFromScriptDir(`template-${framework}`);
+  // console.log(`\ntemplateDir=${templateDir}...`)
+
+  const renameFiles = {
+    'package-lock-json': 'package-lock.json',
+    _gitignore: '.gitignore'
+  };
+
+  const fileList = fs.readdirSync(templateDir);
+  for (const file of fileList) {
+    if (file === 'package.json') { // package.json 单独处理
+      continue;
+    }
+
+    const fromFilePath = path.resolve(templateDir, file);
+    const toFileName = renameFiles[file] ?? file;
+    const toFilePath = path.resolve(targetDirPath, toFileName);
+    copyDirOrFile(fromFilePath, toFilePath, ignoreFileList);
+  }
+
+  const pkgJsonFromFile = path.resolve(templateDir, 'package.json');
+  const pkgJsonObj = readJsonFile(pkgJsonFromFile);
+
+  const newPkgJsonObj = Object.assign({ "name": path.basename(targetDirPath) }, pkgJsonObj); // 保证name在前面
+
+  const pkgJsonToFile = path.resolve(targetDirPath, 'package.json');
+  fs.writeFileSync(pkgJsonToFile, JSON.stringify(newPkgJsonObj, null, 2), 'utf8');
+
+  return newPkgJsonObj;
+}
+
+function makeDirEmpty(dirPath) {
+  if (dirNotEmpty(dirPath)) {
+    const fileList = fs.readdirSync(dirPath);
+    for (const file of fileList) {
+      const filePath = path.resolve(dirPath, file);
+      fs.rmSync(filePath, { force: true, recursive: true });
+    }
+  }
+  fs.mkdirSync(dirPath, { recursive: true });
+}
+
+function readJsonFile(filePath) {
+  try {
+    const pkgJsonContent = fs.readFileSync(filePath, 'utf8');
+    const pkgJsonObj = JSON.parse(pkgJsonContent);
+
+    return pkgJsonObj;
+  } catch (ex) {
+  }
+
+  return null;
+}
+
+function showLogo() {
+  console.info('');
+  console.info('');
+  console.info(cyan('                        #'));
+  console.info(cyan('                   ##       ## '));
+  console.info(cyan('               ###             ###'));
+  console.info(cyan('               ###'));
+  console.info(cyan('               ############  #####'));
+  console.info(cyan('                               ###'));
+  console.info(cyan('               ###             ###'));
+  console.info(cyan('                   ##       ## '));
+  console.info(cyan('                        #'));
+  console.info('');
+  console.info(lightCyan(bold('               Welcome to JsView!')));
+  console.info('');
+}
+
+export {
+  copyDirOrFile,
+  deepMergeObjects,
+  deleteObjectKeys,
+  dirNotEmpty,
+  errorAndExit,
+  getFileFromScriptDir,
+  getFrameworkPrompt,
+  getProjectConfigAsync,
+  generateProjectAsync,
+  makeDirEmpty,
+  readJsonFile,
+  showLogo
+};

package/index.mjs

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+import { showLogo } from './common.mjs'
+import { createProjectAsync } from './project-creator.mjs'
+import { upgradeProjectAsync } from './project-upgrader.mjs'
+
+async function main() {
+  showLogo()
+
+  // arg0: node
+  // arg1: script.js
+  const arguList = process.argv.slice(2);
+
+  if (arguList.length == 0) {
+    await createProjectAsync();
+  } else if (arguList.length == 1 && arguList[0] === '--upgrade') {
+    await upgradeProjectAsync();
+  } else {
+    console.error('Unknown options: ', arguList);
+  }
+}
+
+main().catch((ex) => {
+  console.error(ex);
+})

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "create-jsview",
+  "version": "2.0.1197-next-vue.0",
+  "license": "MIT",
+  "bin": {
+    "create-jsview": "index.mjs",
+    "cjsv": "index.mjs"
+  },
+  "type": "module",
+  "files": [
+    "*.mjs",
+    "template-vue-vite/*",
+    "template-react-webpack/*"
+  ],
+  "main": "index.mjs",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "author": "mengxk",
+  "repository": {
+    "url": "https://github.com/shijiu-jsview/jsview-framework.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shijiu-jsview/jsview-framework/issues"
+  },
+  "homepage": "http://jsview-dev.shijiutv.com/",
+  "dependencies": {
+    "kolorist": "^1.6.0",
+    "prompts": "^2.4.2"
+  },
+  "template": {
+    "vue": "2.0.1197-next-vue.0",
+    "react": "2.0.1197-next-vue.0"
+  }
+}

package/project-creator.mjs

@@ -0,0 +1,54 @@
+import path from 'path'
+import prompts from 'prompts'
+import { red } from 'kolorist'
+import {
+  dirNotEmpty,
+  getProjectConfigAsync,
+  generateProjectAsync,
+  makeDirEmpty,
+} from './common.mjs'
+
+async function createProjectAsync() {
+  const config = await configProjectAsync();
+
+  makeDirEmpty(config.targetDirPath);
+
+  console.log(`\nInitializing project in ${config.targetDirPath}...`);
+  await generateProjectAsync(config.framework, config.targetDirPath);
+
+  completedPrompt(config);
+}
+
+async function configProjectAsync() {
+  const config = await getProjectConfigAsync('create', 'jsview-project');
+
+  const questions = {
+    type: () => dirNotEmpty(config.targetDirPath) ? 'confirm': null,
+    name: 'overwrite',
+    message: () =>
+      (config.targetDirName === '.' ? 'Current directory' : `Target directory "${config.targetDirName}"`)
+      + ' is not empty. Overwrite existing files?'
+  };
+  const result = await prompts(questions, config.promptOptions);
+  if (result.overwrite === false) {
+    errorAndExit('User cancelled')
+  }
+
+  return config;
+}
+
+function completedPrompt(config) {
+  const cwd = process.cwd();
+
+  console.log(`\nDone. Now run:\n`);
+  if (config.targetDirPath !== cwd) {
+    console.log(`  cd ${path.relative(cwd, config.targetDirPath)}`);
+  }
+  console.log('  npm ci');
+  console.log('  npm start');
+  console.log();
+}
+
+export {
+  createProjectAsync
+}

package/project-upgrader.mjs

@@ -0,0 +1,193 @@
+import fs from 'fs'
+import path from 'path'
+import prompts from 'prompts'
+import { bold } from 'kolorist'
+import {
+  deepMergeObjects,
+  deleteObjectKeys,
+  dirNotEmpty,
+  errorAndExit,
+  getFileFromScriptDir,
+  getProjectConfigAsync,
+  generateProjectAsync,
+  readJsonFile,
+} from './common.mjs'
+
+async function upgradeProjectAsync() {
+  const config = await configProjectAsync();
+
+  console.log(`\nUpgrading project in ${config.targetDirPath}...`);
+
+  const currPkgJsonObj = checkProject(config);
+  const ignoreFileList = [
+    'src/App.vue',
+    'src/appConfig/app.config.mjs',
+    'src/appConfig/jsview.config.mjs',
+    'src/components/HelloWorld.vue',
+  ];
+  const newPkgJsonObj = await generateProjectAsync(config.framework, config.targetDirPath, ignoreFileList);
+
+  updatePackageJsonFile(config, currPkgJsonObj, newPkgJsonObj);
+
+  await removeUnusedFiles(config);
+
+  completedPrompt(config);
+}
+
+async function configProjectAsync() {
+  const config = await getProjectConfigAsync('upgrade', '.');
+
+  const templateDir = getFileFromScriptDir(`template-${config.framework}`);
+  const pkgJsonPath = path.resolve(templateDir, 'package.json');
+  const pkgJsonObj = readJsonFile(pkgJsonPath);
+  const frameworkVersion = pkgJsonObj.dependencies['@shijiu/jsview-vue'];
+
+  const questions = {
+    type: 'confirm',
+    name: 'upgrade',
+    initial: true,
+    message: `Are you sure upgrade JSView to ${frameworkVersion} ?`
+  };
+  const result = await prompts(questions, config.promptOptions);
+  if (result.upgrade !== true) {
+    errorAndExit('User cancelled');
+  }
+
+  return config;
+}
+
+function checkProject(config) {
+  if (dirNotEmpty(config.targetDirPath) == false) {
+    errorAndExit(`${config.targetDirPath} is not exists`);
+  }
+
+  const currPkgJsonPath = path.resolve(config.targetDirPath, 'package.json');
+  const currPkgJsonObj = readJsonFile(currPkgJsonPath);
+  if (!currPkgJsonObj) {
+    errorAndExit(`Failed to find valid package.json from ${config.targetDirPath}`);
+  }
+
+  const currFrameworkVersion = currPkgJsonObj.dependencies?.['@shijiu/jsview-vue'];
+  if (!currFrameworkVersion) {
+    errorAndExit(`Failed to find jsview-vue from ${config.targetDirPath}`);
+  }
+
+  return currPkgJsonObj;
+}
+
+function updatePackageJsonFile(config, currPkgJsonObj, newPkgJsonObj) {
+  deleteObjectKeys(currPkgJsonObj, [
+    'main',
+    'eslintConfig',
+    'browserslist',
+  ]);
+  deleteObjectKeys(currPkgJsonObj.scripts, [
+    'android',
+    'build',
+    'dev',
+    'lint',
+    'postinstall',
+    'serve',
+    'start',
+  ]);
+  deleteObjectKeys(currPkgJsonObj.dependencies, [
+    '@shijiu/jsview',
+    '@shijiu/jsview-vue',
+    'core-js',
+    'deepmerge',
+    'fork-ts-checker-webpack-plugin',
+    'gifuct-js',
+    'qr.js',
+    'vue',
+    'vue-router',
+  ]);
+  deleteObjectKeys(currPkgJsonObj.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 mergedPkgJsonObj = deepMergeObjects(newPkgJsonObj, currPkgJsonObj);
+
+  const pkgJsonFile = path.resolve(config.targetDirPath, 'package.json');
+  fs.writeFileSync(pkgJsonFile, JSON.stringify(mergedPkgJsonObj, null, 2), 'utf8');
+}
+
+async function removeUnusedFiles(config) {
+  const filesToRemove = [
+    'babel.config.js',
+    'dist',
+    'node_modules',
+    'public',
+    'src/main.ts',
+    'src/shims-vue.d.ts',
+    'vue.config.js',
+  ];
+
+  console.log();
+  console.log('There are unused source files in ' + config.targetDirPath + ',');
+  console.log('If you have made any modifications to these files,');
+  console.log('then you will need to ' + bold('manually') + ' update the changes in these files to the new project.');
+  for (const file of filesToRemove) {
+    if (fs.existsSync(file) == false) {
+      continue;
+    }
+    console.log(' - ' + file);
+  }
+
+  const questions = {
+    type: 'confirm',
+    name: 'remove',
+    initial: true,
+    message: 'Would you like to delete them?'
+  };
+  const result = await prompts(questions, config.promptOptions);
+  if (result.remove !== true) {
+    return;
+  }
+
+  for (const file of filesToRemove) {
+    console.log('Removing ' + file);
+    const filePath = path.resolve(config.targetDirPath, file);
+    fs.rmSync(filePath, { force: true, recursive: true });
+  }
+}
+
+function completedPrompt(config) {
+  const cwd = process.cwd();
+
+  console.log(`\nDone. Now run:\n`);
+  if (config.targetDirPath !== cwd) {
+    console.log(`  cd ${path.relative(cwd, config.targetDirPath)}`);
+  }
+  console.log('  npm install');
+  console.log('  npm start');
+  console.log();
+
+  console.log(bold('Notice:') + ' If you encounter any other compatibility issues during the runtime,');
+  console.log('        you can refer to the issue list on the official website');
+  console.log(bold('        http://jsview-dev.shijiutv.com/guide/2.environments/2.7.upgrade-project.html.'));
+}
+
+export {
+  upgradeProjectAsync
+}

package/template-react-webpack/README.md

@@ -0,0 +1,16 @@
+# JsView + React + Webpack
+
+## Project setup
+```
+npm ci
+```
+
+### Compiles and hot-reloads for development
+```
+npm start
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```

package/template-react-webpack/_gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*