zmp-cli 3.9.0-rc.0 → 3.10.0-rc.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/templates/generate-styles.js

@@ -2,7 +2,7 @@ const indent = require('../utils/indent');
 const { colorThemeCSSProperties } = require('../utils/colors');
 
 module.exports = (options) => {
-  const { template, theming, includeTailwind } = options;
+  const { template, theming } = options;
   const { customColor, color, fillBars } = theming;
 
   let styles = '';
@@ -44,15 +44,6 @@ module.exports = (options) => {
     );
   }
 
-  if (includeTailwind) {
-    styles += indent(
-      0,
-      `
-      @import "./tailwind.css";
-      `
-    );
-  }
-
   if (template === 'split-view') {
     styles += indent(
       0,

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

@@ -23,8 +23,7 @@ module.exports = (options) => {
     import ZMPReact from 'zmp-framework/react';${includeTailwind ? `
 
     // Import tailwind styles
-    import './css/tailwind.css';
-    ` : ''}
+    import './css/tailwind.css';` : ''}
 
     // Import ZMP Styles
     ${templateIf(

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

@@ -22,8 +22,7 @@ module.exports = (options) => {
     import ZMPReact from 'zmp-framework/react';${includeTailwind ? `
 
     // Import tailwind styles
-    import './css/tailwind.css';
-    ` : ''}
+    import './css/tailwind.css';` : ''}
 
     // Import ZMP Styles
     ${templateIf(

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

@@ -7,6 +7,7 @@ module.exports = (options) => {
     cssPreProcessor,
     theming,
     customBuild,
+    includeTailwind
   } = options;
 
   let scripts = '';
@@ -19,7 +20,10 @@ module.exports = (options) => {
     import ZMP from '${customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'}';
 
     // Import ZMP-Vue Plugin
-    import ZMPVue, { registerComponents } from 'zmp-vue/bundle';
+    import ZMPVue, { registerComponents } from 'zmp-vue/bundle';${includeTailwind ? `
+
+    // Import tailwind styles
+    import './css/tailwind.css';` : ''}
 
     // Import ZMP Styles
     ${templateIf(customBuild, () => `

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']);

package/create/utils/get-options.js

@@ -2,7 +2,7 @@
 const inquirer = require('inquirer');
 var chalk = require('chalk');
 
-const moreOptionsText = chalk.italic(`\t- Including Tailwind CSS`);
+const moreOptionsText = chalk.italic(`\t- Including Tailwind CSS\n\t- Including Recoil (React only)`);
 const questions = [
   {
     type: 'list',

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-rc.0",
+  "version": "3.10.0-rc.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];
 }
 
 /**