zmp-cli 3.9.0 → 3.10.0

package/build/index.js

@@ -14,7 +14,7 @@ const envUtils = require('../utils/env');
 const config = require('../config');
 const generatePagesMap = require('../utils/generate-pages-map');
 
-const env = process.env.NODE_ENV || 'production';
+const env = envUtils.getEnv('NODE_ENV') || 'production';
 
 const waitText = chalk.gray('Building... (Please wait, it can take a while)');
 const frameworkWarning = chalk.yellow(

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

@@ -2,7 +2,8 @@ const generateNpmScripts = require('./generate-npm-scripts');
 const { generateTailWindScripts } = require('./generate-npm-scripts');
 
 module.exports = function generatePackageJson(options) {
-  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } = options;
+  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } =
+    options;
 
   // Dependencies
   const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
@@ -29,7 +30,11 @@ module.exports = function generatePackageJson(options) {
   if (framework === 'react-typescript') {
     dependencies.push(...dependenciesReactTs);
   }
-  const devDependencies = ['cross-env', 'postcss-preset-env@6.7.0', 'vite'];
+  const devDependencies = [
+    'cross-env',
+    'postcss-preset-env@6.7.0',
+    'vite@2.6.14',
+  ];
   // CSS PreProcessor
   if (cssPreProcessor === 'stylus') devDependencies.push(...['stylus']);
   else if (cssPreProcessor === 'less') devDependencies.push(...['less']);
@@ -38,7 +43,7 @@ module.exports = function generatePackageJson(options) {
   // DevDependencies
   const devDependenciesCore = ['zmp-loader'];
   const devDependenciesReact = ['@vitejs/plugin-react-refresh'];
-  const devDependenciesVue = ['@vitejs/plugin-vue', '@vue/compiler-sfc'];
+  const devDependenciesVue = ['@vitejs/plugin-vue@2.3.3', '@vue/compiler-sfc'];
 
   if (framework === 'react' || framework === 'react-typescript')
     devDependencies.push(

package/index.js

@@ -26,8 +26,6 @@ const os = require('os');
 const pkg = require('./package.json');
 const config = require('./config');
 
-require('dotenv').config({ path: config.root_env() });
-
 const cwd = process.cwd();
 
 const logger = {
@@ -117,8 +115,9 @@ program
     'Specify server port. By default it is 3000',
     parseInt
   )
-  .option('-Z, --zalo-app', 'Preview on zalo')
+  .option('-Z, --zalo-app', 'Preview on Zalo')
   .option('-ios, --ios', 'Run on ios')
+  .option('-nF, --no-frame', 'Run without Zalo frame')
   .option('-D, --dev', 'Development environment')
   .description('Start a ZMP project')
   .action(async (options) => {
@@ -147,6 +146,7 @@ program
         showMobileUI: (options && options.showMobileUi) || false,
         previewOnZalo: (options && options.zaloApp) || false,
         ios: (options && options.ios) || false,
+        frame: (options && options.frame) ?? true,
       },
       logger
     );

package/login/index.js

@@ -11,16 +11,12 @@ const envUtils = require('../utils/env');
 const log = require('../utils/log');
 const zaloLogin = require('./utils/zalo-login');
 
-const env = process.env.NODE_ENV || 'production';
+const env = envUtils.getEnv('NODE_ENV') || 'production';
 
 const waitText = chalk.gray('Login...');
 const spinner = ora(waitText);
 
-module.exports = async (
-  options = {},
-  logger,
-  { exitOnError = true, iconFile = null } = {}
-) => {
+module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
   function errorExit(err) {
     log.error(err.stderr || err);
     if (exitOnError) process.exit(1);

package/login/utils/zalo-login.js

@@ -1,6 +1,8 @@
 const axios = require('axios');
+const envUtils = require('../../utils/env');
 const config = require('../../config');
-const env = process.env.NODE_ENV || 'production';
+
+const env = envUtils.getEnv('NODE_ENV') || 'production';
 
 module.exports = (function () {
   const apiRequestLogin =

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -55,7 +55,6 @@
     "copy-webpack-plugin": "^7.0.0",
     "cpy": "^7.3.0",
     "css-minimizer-webpack-plugin": "^1.2.0",
-    "dotenv": "^8.2.0",
     "envfile": "^6.14.0",
     "exec-sh": "^0.3.2",
     "express": "^4.17.1",
@@ -94,7 +93,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.4.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.18.2",
@@ -103,4 +102,4 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^5.0.0"
   }
-}
+}

package/start/index.js

@@ -3,7 +3,6 @@
 const chalk = require('chalk');
 const ora = require('ora');
 const path = require('path');
-const os = require('os');
 const qrcode = require('qrcode-terminal');
 const logSymbols = require('log-symbols');
 const { createServer } = require('vite');
@@ -36,6 +35,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
   const previewOnZalo = options.previewOnZalo;
   const isIOS = options.ios;
   const iosHostName = options.iosHostName;
+  const usingFrame = options.frame;
   const host = isIOS ? iosHostName : 'localhost';
   const port = options.port;
   try {
@@ -84,29 +84,36 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
         'process.env.previewOnZalo': previewOnZalo,
       },
       server: {
-        port: port - 1,
+        port: usingFrame ? port - 1 : port,
         ...(previewOnZalo ? publicServer : localServer),
       },
     });
     const app = await server.listen();
 
     if (!previewOnZalo) {
-      //run frame server
-      const serverFrame = await createServer({
-        // any valid user config options, plus `mode` and `configFile`
-        configFile: false,
-        root: __dirname + '/frame',
-        server: {
-          port: app.httpServer.address().port + 1,
-          strictPort: true,
-          open: true,
-        },
-      });
-      await serverFrame.listen();
-      spinner.stop();
-      const info = serverFrame.config.logger.info;
-      info(chalk.green(`Zalo Mini App dev server is running at:\n`));
-      serverFrame.printUrls();
+      if (usingFrame) {
+        //run frame server
+        const serverFrame = await createServer({
+          // any valid user config options, plus `mode` and `configFile`
+          configFile: false,
+          root: __dirname + '/frame',
+          server: {
+            port: app.httpServer.address().port + 1,
+            strictPort: true,
+            open: true,
+          },
+        });
+        spinner.stop();
+        await serverFrame.listen();
+        const info = serverFrame.config.logger.info;
+        info(chalk.green(`Zalo Mini App dev server is running at:\n`));
+        serverFrame.printUrls();
+      } else {
+        spinner.stop();
+        const info = server.config.logger.info;
+        info(chalk.green(`Zalo Mini App dev server is running at:\n`));
+        server.printUrls();
+      }
     }
 
     spinner.stop();

package/utils/env.js

@@ -9,7 +9,14 @@ const { parse, stringify } = require('envfile');
  *
  */
 function getEnv(key) {
-  return process.env[key];
+  const value = process.env[key];
+  if (value) return value;
+  const rootENV = config.root_env();
+  const exists = fse.existsSync(rootENV);
+  if (!exists) return undefined;
+  const data = fse.readFileSync(rootENV, 'utf8');
+  const result = parse(data);
+  return result[key];
 }
 
 /**

package/create/templates/dist/generate-styles.dev.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var indent = require('../utils/indent');
-
-var _require = require('../utils/colors'),
-    colorThemeCSSProperties = _require.colorThemeCSSProperties;
-
-module.exports = function (options) {
-  var template = options.template,
-      theming = options.theming;
-  var customColor = theming.customColor,
-      color = theming.color,
-      fillBars = theming.fillBars;
-  var styles = '';
-  var themeRgb = [0, 122, 255];
-
-  if (customColor && color) {
-    var customProps = colorThemeCSSProperties("".concat(color));
-    themeRgb = customProps['--zmp-theme-color-rgb'].split(',').map(function (n) {
-      return n.trim();
-    });
-    styles += indent(0, "\n      /* Custom color theme properties */\n      :root {\n        ".concat(Object.keys(customProps).filter(function (prop) {
-      return prop !== '--zmp-tabbar-fill-link-active-color' && prop !== '--zmp-tabbar-fill-link-active-border-color';
-    }).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n      :root.theme-dark,:root .theme-dark {\n        ").concat(Object.keys(customProps).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n    "));
-  }
-
-  if (fillBars) {
-    styles += indent(0, "\n      /* Invert navigation bars to fill style */\n    ");
-  }
-
-  if (includeTailwind) {
-    styles += indent(0, "\n      @import \"./tailwind.css\";\n      ");
-  }
-
-  if (template === 'split-view') {
-    styles += indent(0, "\n      /* Left Panel right border when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint:before {\n        position: absolute;\n        right: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n\n      /* Hide navbar link which opens left panel when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel=\"left\"] {\n        display: none;\n      }\n\n      /*\n        Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)\n      */\n      .ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,\n      .ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n    ");
-  } else {
-    styles += indent(0, "\n      /* Your app custom styles here */\n    ");
-  }
-
-  return styles.trim();
-};

package/create/templates/react/dist/generate-scripts.dev.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-var stylesExtension = require('../../utils/styles-extension');
-
-module.exports = function (options) {
-  var cssPreProcessor = options.cssPreProcessor,
-      theming = options.theming,
-      customBuild = options.customBuild,
-      includeTailwind = options.includeTailwind;
-  var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
-    return "\n    import './css/zmp-custom.less';\n    ";
-  }, function () {
-    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
-  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
-    return "\n    import './css/icons.css';\n    ";
-  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app.jsx';\n    import appConfig from '../app-config.json';\n\n    if (!window.APP_CONFIG) {\n      window.APP_CONFIG = appConfig;\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app'));\n    root.render(React.createElement(App));\n  "));
-  return scripts.trim();
-};

package/create/templates/react-typescript/dist/generate-scripts.dev.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-var stylesExtension = require('../../utils/styles-extension');
-
-module.exports = function (options) {
-  var cssPreProcessor = options.cssPreProcessor,
-      theming = options.theming,
-      customBuild = options.customBuild,
-      includeTailwind = options.includeTailwind;
-  var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
-    return "\n    import './css/zmp-custom.less';\n    ";
-  }, function () {
-    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
-  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
-    return "\n    import './css/icons.css';\n    ";
-  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app';\n    import appConfig from '../app-config.json';\n\n    if (!(window as any).APP_CONFIG) {\n      (window as any).APP_CONFIG = appConfig\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app')!);\n    root.render(React.createElement(App));\n  "));
-  return scripts.trim();
-};