zmp-cli 3.5.4 → 3.6.0

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

@@ -6,7 +6,7 @@ module.exports = function generatePackageJson(options) {
 
   // Dependencies
   const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
-  const dependenciesVue = ['vue@3'];
+  const dependenciesVue = ['vue@3', 'zmp-framework@next'];
   const dependenciesReact = ['react', 'react-dom', 'prop-types'];
   const dependenciesReactTs = ['@types/react', '@types/react-dom'];
   const tailwindDependencies = [
@@ -41,8 +41,16 @@ module.exports = function generatePackageJson(options) {
       ...[devDependenciesReact],
       ...(includeTailwind ? tailwindDependencies : [])
     );
-  else if (framework === 'vue') devDependencies.push(...[devDependenciesVue]);
-  else if (framework === 'core') devDependencies.push(...[devDependenciesCore]);
+  else if (framework === 'vue')
+    devDependencies.push(
+      ...devDependenciesVue,
+      ...(includeTailwind ? tailwindDependencies : [])
+    );
+  else if (framework === 'core')
+    devDependencies.push(
+      ...devDependenciesCore,
+      ...(includeTailwind ? tailwindDependencies : [])
+    );
 
   // Scripts
   const scripts = {};
@@ -64,9 +72,9 @@ module.exports = function generatePackageJson(options) {
   const content = `
 {
   "name": "${name
-    .toLowerCase()
-    .replace(/[ ]{2,}/, ' ')
-    .replace(/ /g, '-')}",
+      .toLowerCase()
+      .replace(/[ ]{2,}/, ' ')
+      .replace(/ /g, '-')}",
   "private": true,
   "version": "1.0.0",
   "description": "${name}",

package/create/utils/get-options.js

@@ -40,14 +40,13 @@ const questions = [
         name: 'ZMP with React (TypeScript)',
         value: 'react-typescript',
       },
-      {
-        name: 'ZMP Core',
-        value: 'core',
-        disabled: true,
-      },
       {
         name: 'ZMP with Vue.js',
         value: 'vue',
+      },
+      {
+        name: 'ZMP Core',
+        value: 'core',
         disabled: true,
       },
     ],
@@ -55,7 +54,7 @@ const questions = [
   {
     type: 'list',
     name: 'useUIKits',
-    when: (opts) => opts.newProject,
+    when: (opts) => opts.newProject && opts.framework !== 'vue',
     message: 'Do you want to use Zalo UI kits style?',
     default: true,
     choices: [
@@ -74,7 +73,7 @@ const questions = [
   {
     type: 'list',
     name: 'template',
-    when: (opts) => opts.newProject && opts.useUIKits,
+    when: (opts) => opts.newProject && opts.useUIKits && opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {
@@ -101,7 +100,7 @@ const questions = [
   {
     type: 'list',
     name: 'template',
-    when: (opts) => opts.newProject && !opts.useUIKits,
+    when: (opts) => opts.newProject && !opts.useUIKits && opts.framework !== 'vue',
     message: 'Choose starter template:',
     choices: [
       {

package/index.js

@@ -28,6 +28,7 @@ const config = require('./config');
 require('dotenv').config({ path: config.root_env() });
 
 const cwd = process.cwd();
+
 const logger = {
   statusStart: (text) => spinner.start(text),
   statusDone: (text) => spinner.done(text),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.5.4",
+  "version": "3.6.0",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {

package/start/dist/index.dev.js

@@ -15,21 +15,20 @@ var ora = require('ora');
 
 var path = require('path');
 
-var config = require('../config');
+var qrcode = require('qrcode-terminal');
 
-var envUtils = require('../utils/env');
+var logSymbols = require('log-symbols');
 
 var _require = require('vite'),
     createServer = _require.createServer;
 
-var fs = require('../utils/fs-extra');
+var config = require('../config');
 
-var qrcode = require('qrcode-terminal');
+var envUtils = require('../utils/env');
 
-var logSymbols = require('log-symbols');
+var fs = require('../utils/fs-extra');
 
-var _require2 = require('path'),
-    resolve = _require2.resolve;
+var fse = require('../utils/fs-extra');
 
 var spinner = ora('Starting mini app...');
 
@@ -50,9 +49,12 @@ module.exports = function _callee() {
       hrConfig,
       localServer,
       publicServer,
+      viteConfig,
+      isTypeScriptProject,
       server,
       app,
       serverFrame,
+      info,
       _args = arguments;
 
   return regeneratorRuntime.async(function _callee$(_context) {
@@ -112,50 +114,65 @@ module.exports = function _callee() {
               host: host
             }
           };
-          _context.next = 18;
+          viteConfig = 'vite.config.js';
+          isTypeScriptProject = fse.existsSync(path.join(cwd, 'vite.config.ts'));
+
+          if (isTypeScriptProject) {
+            viteConfig = 'vite.config.ts';
+          }
+
+          _context.next = 21;
           return regeneratorRuntime.awrap(createServer({
-            configFile: path.join(cwd, 'vite.config.js'),
+            configFile: path.join(cwd, viteConfig),
             root: cwd,
             mode: previewOnZalo ? 'production' : 'development',
             define: {
               'process.env.NODE_ENV': JSON.stringify(previewOnZalo ? 'production' : 'development')
             },
             server: _objectSpread({
-              port: port,
-              strictPort: true
+              port: port - 1
             }, previewOnZalo ? publicServer : localServer)
           }));
 
-        case 18:
+        case 21:
           server = _context.sent;
-          _context.next = 21;
+          _context.next = 24;
           return regeneratorRuntime.awrap(server.listen());
 
-        case 21:
+        case 24:
           app = _context.sent;
 
           if (previewOnZalo) {
-            _context.next = 27;
+            _context.next = 35;
             break;
           }
 
-          _context.next = 25;
+          _context.next = 28;
           return regeneratorRuntime.awrap(createServer({
             // any valid user config options, plus `mode` and `configFile`
             configFile: false,
             root: __dirname + '/frame',
             server: {
-              port: port + 1
+              port: app.httpServer.address().port + 1,
+              strictPort: true,
+              open: true
             }
           }));
 
-        case 25:
+        case 28:
           serverFrame = _context.sent;
-          serverFrame.listen();
+          _context.next = 31;
+          return regeneratorRuntime.awrap(serverFrame.listen());
+
+        case 31:
+          spinner.stop();
+          info = serverFrame.config.logger.info;
+          info(chalk.green("Zalo Mini App dev server is running at:\n"));
+          serverFrame.printUrls();
 
-        case 27:
+        case 35:
           spinner.stop();
-          _context.next = 30;
+          _context.next = 38;
           return regeneratorRuntime.awrap(new Promise(function () {
             var previewOnZaloURL = "https://zalo.me/app/link/zapps/".concat(appId, "/?env=TESTING_LOCAL&clientIp=https://").concat(host, ":").concat(app.config.server.port);
 
@@ -167,17 +184,37 @@ module.exports = function _callee() {
               qrcode.generate(previewOnZaloURL, {
                 small: true
               }, function (qrcode) {
-                var qrCode = "".concat(logSymbols.info, " ").concat(chalk.bold("Scan the QR code with Zalo app:\n".concat(qrcode)));
-                logger.text(qrCode);
+                logger.text(chalk.green("".concat(logSymbols.info, " ").concat(chalk.bold("Zalo Mini App dev server is running at: ".concat(host, ":").concat(app.config.server.port)))));
+                logger.text(chalk.green("".concat(logSymbols.info, " ").concat(chalk.bold("Trying reverse socket connection"))));
+
+                var processAdbReverse = require('child_process').spawn("adb", ['reverse', "tcp:".concat(app.config.server.port), "tcp:".concat(app.config.server.port)]);
+
+                processAdbReverse.stderr.on('data', function (data) {
+                  logger.error(data.toString());
+                });
+                processAdbReverse.on('exit', function (code) {
+                  if (code !== 0) {
+                    throw new Error("adb reverse error: ".concat(code));
+                  } else {
+                    var qrCode = "".concat(logSymbols.info, " ").concat(chalk.bold("Scan the QR code with Zalo app:\n".concat(qrcode)));
+                    logger.text(qrCode);
+
+                    var processAdbDevices = require('child_process').spawn("adb", ['devices']);
+
+                    processAdbDevices.stdout.on('data', function (data) {
+                      logger.text("".concat(chalk.yellow(data.toString())));
+                    });
+                  }
+                });
               });
             }
           }));
 
-        case 30:
+        case 38:
           return _context.abrupt("return", _context.sent);
 
-        case 33:
-          _context.prev = 33;
+        case 41:
+          _context.prev = 41;
           _context.t0 = _context["catch"](12);
           logger.statusError('Error starting project'); // if (err) logger.error(err.stderr || err);
 
@@ -185,10 +222,10 @@ module.exports = function _callee() {
           errorExit(_context.t0);
           return _context.abrupt("return");
 
-        case 39:
+        case 47:
         case "end":
           return _context.stop();
       }
     }
-  }, null, null, [[12, 33]]);
+  }, null, null, [[12, 41]]);
 };

package/start/index.js

@@ -121,10 +121,47 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
           .unref();
       } else if (previewOnZalo) {
         qrcode.generate(previewOnZaloURL, { small: true }, function (qrcode) {
-          const qrCode = `${logSymbols.info} ${chalk.bold(
-            `Scan the QR code with Zalo app:\n${qrcode}`
-          )}`;
-          logger.text(qrCode);
+          logger.text(
+            chalk.green(
+              `${logSymbols.info} ${chalk.bold(
+                `Zalo Mini App dev server is running at: ${host}:${app.config.server.port}`
+              )}`
+            )
+          );
+          logger.text(
+            chalk.green(
+              `${logSymbols.info} ${chalk.bold(
+                `Trying reverse socket connection`
+              )}`
+            )
+          );
+          const processAdbReverse = require('child_process').spawn(`adb`, [
+            'reverse',
+            `tcp:${app.config.server.port}`,
+            `tcp:${app.config.server.port}`,
+          ]);
+
+          processAdbReverse.stderr.on('data', function (data) {
+            logger.error(data.toString());
+          });
+
+          processAdbReverse.on('exit', function (code) {
+            if (code !== 0) {
+              throw new Error(`adb reverse error: ${code}`);
+            } else {
+              const qrCode = `${logSymbols.info} ${chalk.bold(
+                `Scan the QR code with Zalo app:\n${qrcode}`
+              )}`;
+              logger.text(qrCode);
+              const processAdbDevices = require('child_process').spawn(`adb`, [
+                'devices',
+              ]);
+
+              processAdbDevices.stdout.on('data', function (data) {
+                logger.text(`${chalk.yellow(data.toString())}`);
+              });
+            }
+          });
         });
       }
     });

package/utils/find-files-by-ext.js

@@ -3,7 +3,7 @@ const path = require('path');
 
 module.exports = function findFilesByExt(
   folderPath,
-  extension = ['jsx', 'tsx']
+  extension = ['jsx', 'tsx', 'vue']
 ) {
   var files = fs.readdirSync(folderPath);
   var result = [];