zmp-cli 3.12.0 → 3.13.0

package/.vscode/launch.json

@@ -1,21 +1,18 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-node",
-            "request": "launch",
-            "name": "Launch Program",
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "program": "${workspaceFolder}/index.js",
-            "args": [
-                "init"
-            ],
-            "console": "integratedTerminal"
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/index.js",
+      "args": ["sync-config", "--root-element", "#__next", "out/index.html"],
+      "cwd": "${workspaceFolder}/../next-mini-app/",
+      "console": "integratedTerminal"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "prettier.trailingComma": "none",
-  "workbench.colorTheme": "GitHub Dark Default"
-}
+  "workbench.colorTheme": "GitHub Dark Default",
+  "editor.formatOnSave": false
+}

package/config/index.js

@@ -20,7 +20,6 @@ module.exports = {
   env: {
     appId: 'APP_ID',
     token: 'ZMP_TOKEN',
-    accessToken: 'VITE_ACCESS_TOKEN',
   },
   error_code: {
     app_config_not_found: -1400,

package/create/templates/zaui/generate-scripts.js

@@ -2,7 +2,7 @@ const indent = require('../../utils/indent');
 const stylesExtension = require('../../utils/styles-extension');
 
 module.exports = (options) => {
-  const { cssPreProcessor,  includeTailwind } = options;
+  const { cssPreProcessor,  includeTailwind, framework } = options;
 
   let scripts = '';
 
@@ -30,7 +30,7 @@ module.exports = (options) => {
     }
 
     // Mount React App
-    const root = createRoot(document.getElementById('app'));
+    ${framework === 'react-typescript' ? "const root = createRoot(document.getElementById('app')!);" : "const root = createRoot(document.getElementById('app'));"}
     root.render(React.createElement(App));
   `
   );

package/create/utils/generate-app-config.js

@@ -1,17 +1,19 @@
-const generateRoutes = require('../templates/generate-routes');
-
 module.exports = function generateAppConfig(options) {
   const { name } = options;
 
   // Window config
   const appConfig = {
     title: name,
+    headerTitle: name,
     headerColor: '#1843EF',
     textColor: 'white',
     statusBarColor: '#1843EF',
     leftButton: 'back',
+    statusBar: 'normal',
+    actionBarHidden: false,
+    hideAndroidBottomNavigationBar: false,
+    hideIOSSafeAreaBottom: false,
   };
-  const routes = generateRoutes(options);
   // Content
   const content = JSON.stringify(
     {
@@ -20,7 +22,6 @@ module.exports = function generateAppConfig(options) {
       listCSS: [],
       listSyncJS: [],
       listAsyncJS: [],
-      pages: routes,
     },
     '',
     2

package/create/utils/generate-package-json.js

@@ -18,7 +18,6 @@ module.exports = function generatePackageJson(options) {
       : ['zmp-framework', 'zmp-sdk', 'swiper'];
   const dependenciesVue = ['vue@3', 'zmp-framework'];
   const dependenciesReact = ['react', 'react-dom', 'prop-types'];
-  const dependenciesReactTs = ['@types/react', '@types/react-dom'];
   const tailwindDependencies = [
     'autoprefixer',
     'tailwindcss',
@@ -36,17 +35,17 @@ module.exports = function generatePackageJson(options) {
     }
   }
 
-  if (framework === 'react-typescript') {
-    dependencies.push(...dependenciesReactTs);
-    if (package === 'zmp-ui') {
-      dependencies.push('@types/react-router-dom');
-    }
-  }
   const devDependencies = [
     'cross-env',
     'postcss-preset-env@6.7.0',
     'vite@2.6.14',
   ];
+  if (framework === 'react-typescript') {
+    devDependencies.push('@types/react', '@types/react-dom');
+    if (package === 'zmp-ui') {
+      devDependencies.push('@types/react-router-dom');
+    }
+  }
   // CSS PreProcessor
   if (cssPreProcessor === 'stylus') devDependencies.push(...['stylus']);
   else if (cssPreProcessor === 'less') devDependencies.push(...['less']);

package/index.js

@@ -19,12 +19,14 @@ const createApp = require('./create/index');
 const startApp = require('./start/index');
 const buildApp = require('./build/index');
 const deployApp = require('./deploy/index');
+const syncApp = require('./sync/index');
 const migrateApp = require('./migrate/index');
 const os = require('os');
 // const generateAssets = require('./assets/index');
 // const server = require('./ui/server');
 const pkg = require('./package.json');
 const config = require('./config');
+const { versionStatus } = require('./utils/constants');
 
 const cwd = process.cwd();
 
@@ -191,6 +193,11 @@ program
   .command('deploy')
   .option('-D, --dev', 'Deploy in Development server')
   .option('-M, --mode <m>', 'Env mode')
+  .option('-p, --passive', 'Passive mode (non-interactive)')
+  .option('-e, --existing', 'Deploy existing project')
+  .option('-t, --testing', 'Deploy testing version')
+  .option('-m, --desc <message>', 'Version description')
+  .option('-o, --outputDir <output>', 'Output folder. Default www')
   .option(
     '-P, --port <n>',
     'Specify UI server port. By default it is 3001',
@@ -199,7 +206,17 @@ program
   .description('Deploy a ZMP project')
   .action(async (options) => {
     const currentProject = getCurrentProject(cwd);
-    const opts = await getDeployOptions(currentProject);
+    let opts = options;
+    if (options.existing) {
+      opts.customProject = true;
+    } else {
+      if (!options.passive) {
+        opts = await getDeployOptions(currentProject);
+      }
+    }
+    if (options.testing) {
+      opts.versionStatus = versionStatus.TESTING;
+    }
     if (opts.quit) process.exit(1);
     await deployApp(
       {
@@ -213,6 +230,27 @@ program
     process.exit(0);
   });
 
+program
+  .usage('<command> [options]')
+  .command('sync-config <source>')
+  .option(
+    '-r, --root-element <selector>',
+    'Custom entry point, default is #app'
+  )
+  .description(
+    'Automatically update app-config.json resources list based on index.html'
+  )
+  .action(async (source, options) => {
+    await syncApp(
+      {
+        source,
+        ...options,
+      },
+      logger
+    );
+    process.exit(0);
+  });
+
 program
   .usage('<command> [options]')
   .command('migrate')

package/login/index.js

@@ -111,7 +111,6 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
                 clearInterval(intervalCheckLogin);
                 const token = resData.data && resData.data.jwt;
                 envUtils.setEnv(config.env.token, token);
-                envUtils.setEnv(config.env.accessToken, token);
                 logger.statusDone('Login Success!');
                 return resolve();
               }
@@ -146,7 +145,6 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
               const dataDecoded = jwt.decode(token);
               envUtils.setEnv(config.env.appId, dataDecoded.appId);
               envUtils.setEnv(config.env.token, token);
-              envUtils.setEnv(config.env.accessToken, options.token);
             } catch (error) {
               return reject(error);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -56,6 +56,7 @@
     "copy-webpack-plugin": "^7.0.0",
     "cpy": "^7.3.0",
     "css-minimizer-webpack-plugin": "^1.2.0",
+    "dom-parser": "^0.1.6",
     "envfile": "^6.14.0",
     "exec-sh": "^0.3.2",
     "express": "^4.17.1",

package/sync/index-to-app-config.js

@@ -0,0 +1,143 @@
+const DomParser = require('dom-parser');
+const fs = require('fs');
+const axios = require('axios');
+
+async function generateListResourcesFromIndex(html, { outputDir, rootElement }) {
+  const listCSS = [];
+  const listSyncJS = [];
+  const listAsyncJS = [];
+  let inlineJS = '';
+  try {
+    const parser = new DomParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    const headInlines = [];
+    const bodyInlines = [];
+
+    const scripts = doc.getElementsByTagName('script');
+    for (const script of scripts) {
+      const src = script.getAttribute('src');
+      const type = script.getAttribute('type');
+      const async = script.getAttribute('async');
+      const inline = script.innerHTML;
+      try {
+        if (inline) {
+          bodyInlines.push(script.outerHTML);
+        } else {
+          let scriptName = src;
+          if (src.includes('://')) {
+            let filename = src.substring(src.lastIndexOf('/') + 1);
+            filename = `cdn.` + filename;
+            const response = await axios({
+              method: 'get',
+              url: src,
+              responseType: 'stream',
+            });
+            const fileStream = fs.createWriteStream(`${outputDir}/${filename}`);
+            response.data.pipe(fileStream);
+
+            await new Promise((resolve, reject) => {
+              fileStream.on('finish', resolve);
+              fileStream.on('error', reject);
+            });
+            scriptName = filename;
+          }
+          if (type === 'module' && !scriptName.endsWith('module.js')) {
+            const newName = src.slice(0, -3).concat('.module.js');
+            fs.rename(scriptName, newName);
+            scriptName = newName;
+          }
+          (async ? listAsyncJS : listSyncJS).push(scriptName);
+        }
+      } catch (error) {
+        console.warn(
+          '\n⚠️ Unable to download resource from CDN. Please handle this file manually!',
+          src
+        );
+        console.error(error.message);
+      }
+    }
+
+    const styles = doc.getElementsByTagName('style');
+    styles.forEach((style) => {
+      const inline = style.innerHTML;
+      if (inline) {
+        headInlines.push(style.outerHTML);
+      }
+    });
+
+    const links = doc.getElementsByTagName('link');
+    for (const link of links) {
+      const rel = link.getAttribute('rel');
+      const href = link.getAttribute('href');
+      try {
+        if (rel === 'stylesheet') {
+          let filename = href;
+          if (href.includes('://')) {
+            filename = href.substring(href.lastIndexOf('/') + 1);
+            filename = `cdn.` + filename;
+            const response = await axios({
+              method: 'get',
+              url: href,
+              responseType: 'stream',
+            });
+            const fileStream = fs.createWriteStream(`${outputDir}/${filename}`);
+            response.data.pipe(fileStream);
+
+            await new Promise((resolve, reject) => {
+              fileStream.on('finish', resolve);
+              fileStream.on('error', reject);
+            });
+          }
+          listCSS.push(filename);
+        }
+      } catch (error) {
+        console.error(
+          '\n⚠️ Unable to download resource from CDN. Please handle this file manually!',
+          href
+        );
+        console.error(error.message);
+      }
+    }
+
+    const metas = doc.getElementsByTagName('meta');
+    metas.forEach((meta) => {
+      headInlines.push(meta.outerHTML);
+    });
+
+    if (rootElement && rootElement !== '#app') {
+      let html = `<${rootElement} />`;
+      if (rootElement.startsWith('#')) {
+        html = `<div id="${rootElement.substring(1)}" />`;
+      }
+      if (rootElement.startsWith('.')) {
+        html = `<div class="${rootElement.substring(1)}" />`;
+      }
+      if (rootElement.startsWith('<')) {
+        html = rootElement;
+      }
+      bodyInlines.unshift(html);
+    }
+
+    inlineJS += headInlines
+      .map(
+        (inline) =>
+          `document.head.innerHTML += \`${inline.replaceAll('`', '\\`')}\`;`
+      )
+      .join('\n');
+    inlineJS += '\n';
+    inlineJS += bodyInlines
+      .map(
+        (inline) =>
+          `document.body.innerHTML += \`${inline.replaceAll('`', '\\`')}\`;`
+      )
+      .join('\n');
+    listSyncJS.unshift('inline.js');
+  } catch (error) {
+    console.error(error.message);
+  }
+  return { listCSS, listSyncJS, listAsyncJS, inlineJS };
+}
+
+module.exports = {
+  generateListResourcesFromIndex,
+};

package/sync/index.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const chalk = require('chalk');
+const fse = require('../utils/fs-extra');
+const config = require('../config');
+const { generateListResourcesFromIndex } = require('./index-to-app-config');
+
+const waitText = chalk.gray('(Please wait, it can take a while)');
+const defaultLogger = {
+  statusStart() {},
+  statusDone() {},
+  statusText() {},
+  statusError() {},
+  text() {},
+  error() {},
+  showOnUI() {},
+};
+
+module.exports = async (options = {}, logger = defaultLogger) => {
+  logger.statusStart(`Synchronization configuration ${waitText}`);
+  const cwd = process.cwd();
+  const { source, rootElement } = options;
+  const appConfigFilename = config.filename.appConfig;
+  const resolvePath = (dir) => {
+    return path.join(cwd, dir);
+  };
+  function errorExit(err) {
+    logger.error(err.stderr || err);
+    process.exit(1);
+  }
+  let appConfigJson;
+  try {
+    appConfigJson = require(resolvePath(appConfigFilename));
+  } catch (err) {
+    errorExit(new Error(config.error_msg.app_config_not_found));
+  }
+
+  const html = fse.readFileSync(source).toString();
+  const outputDir = path.dirname(source);
+  const { listCSS, listSyncJS, listAsyncJS, inlineJS } =
+    await generateListResourcesFromIndex(html, { outputDir, rootElement });
+  Object.assign(appConfigJson, {
+    listCSS,
+    listSyncJS,
+    listAsyncJS,
+  });
+  if (inlineJS) {
+    fse.writeFileSync(resolvePath(`${outputDir}/inline.js`), inlineJS);
+  }
+  const output = JSON.stringify(appConfigJson, null, 2);
+  fse.writeFileSync(resolvePath(appConfigFilename), output);
+  logger.statusDone(
+    `${chalk.bold.green('Configuration synchronization completed!')} 💪`
+  );
+  logger.text({ listCSS, listSyncJS, listAsyncJS });
+};