zmp-cli 3.15.0 → 3.15.1

package/.vscode/launch.json

@@ -8,11 +8,16 @@
       "type": "pwa-node",
       "request": "launch",
       "name": "Launch Program",
-      "skipFiles": ["<node_internals>/**"],
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
       "program": "${workspaceFolder}/index.js",
-      "args": ["sync-config", "--root-element", "#__next", "out/index.html"],
-      "cwd": "${workspaceFolder}/../next-mini-app/",
+      "args": [
+        "start",
+        "--device"
+      ],
+      "cwd": "${workspaceFolder}/../zaui-coffee/",
       "console": "integratedTerminal"
     }
   ]
-}
+}

package/index.js

@@ -120,7 +120,7 @@ program
   .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')
+  .option('-D, --device', 'Device mode')
   .option('-M, --mode <m>', 'Env mode')
   .description('Start a ZMP project')
   .action(async (options) => {
@@ -161,6 +161,7 @@ program
           (typeof options.frame === 'undefined' || options.frame === null)
             ? true
             : options.frame,
+        deviceMode: (options && options.device) || false,
       },
       logger
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.15.0",
+  "version": "3.15.1",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -46,7 +46,7 @@
     "body-parser": "^1.19.0",
     "browser-sync": "^2.26.14",
     "chalk": "^4.1.2",
-    "chii": "^1.6.2",
+    "chii": "^1.9.0",
     "clear": "^0.1.0",
     "cli-progress": "^3.9.0",
     "clui": "^0.3.6",
@@ -65,8 +65,10 @@
     "form-data": "^4.0.0",
     "fs": "0.0.1-security",
     "html-webpack-plugin": "^5.1.0",
+    "human-readable-ids": "^1.0.4",
     "inquirer": "^7.3.3",
     "jsonwebtoken": "^8.5.1",
+    "localtunnel": "^2.0.2",
     "lodash": "^4.17.20",
     "log-symbols": "^3.0.0",
     "mime": "2.3.0",

package/start/generate-hr-config.js

@@ -0,0 +1,60 @@
+const { default: axios } = require('axios');
+const DomParser = require('dom-parser');
+
+async function generateHrFromIndex(url, bags = {}) {
+  const listCSS = [];
+  const listJS = [];
+  try {
+    const response = await axios({
+      url,
+      headers: {
+        Accept: 'text/html,application/xhtml+xml,application/xml',
+      },
+    });
+    const html = response.data;
+    const parser = new DomParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const scripts = doc.getElementsByTagName('script');
+    scripts.forEach((script) => {
+      const src = script.getAttribute('src');
+      const type = script.getAttribute('type');
+      const skip = script.getAttribute('data-skip-hr-config');
+      const inline = script.innerHTML;
+      if (skip === null) {
+        listJS.push({
+          src,
+          type,
+          innerHTML: inline
+            ? inline
+                .replaceAll('from "/', `from "${bags.exposedUrl}/`)
+                .replaceAll("from '/", `from '${bags.exposedUrl}/`)
+            : undefined,
+        });
+      }
+    });
+    // override Vite HMR "full-reload" behavior
+    listJS.push({
+      src: `/studio.module.js`,
+      type: 'module',
+    });
+    listJS.push({
+      id: 'remote-debug-script',
+      innerHTML: `(function () {
+        var script = document.createElement('script');
+        script.src='${bags.chiiUrl}/target.js';
+        document.head.appendChild(script);
+        window.BACKUP_URL = window.location.href;
+        window.history.pushState(null, null, '/' + window.location.search);
+      })()`,
+      type: 'text/javascript',
+    });
+  } catch (error) {
+    console.warn(error);
+  }
+  return { listCSS, listJS };
+}
+
+module.exports = {
+  generateHrFromIndex,
+};

package/start/index.js

@@ -7,11 +7,16 @@ const qrcode = require('qrcode-terminal');
 const logSymbols = require('log-symbols');
 const { createServer } = require('vite');
 const chii = require('chii');
+const { hri } = require('human-readable-ids');
 
 const config = require('../config');
 const envUtils = require('../utils/env');
 const fs = require('../utils/fs-extra');
 const fse = require('../utils/fs-extra');
+const findFreePort = require('../utils/find-free-port');
+const { openTunnel } = require('../utils/tunnel');
+const { deviceModeSetup } = require('../utils/constants');
+const { generateHrFromIndex } = require('./generate-hr-config');
 
 const spinner = ora('Starting mini app...');
 
@@ -41,6 +46,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
   const port = options.port;
   const remoteDebugPort = port - 2;
   const mode = options.mode || (previewOnZalo ? 'production' : 'development');
+  const deviceMode = options.deviceMode;
   try {
     if (previewOnZalo) {
       const hrConfigPath = path.join(cwd, 'hr.config.json');
@@ -102,44 +108,165 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
       viteConfig = 'vite.config.ts';
     }
 
-    const server = await createServer({
-      configFile: path.join(cwd, viteConfig),
-      root: cwd,
-      mode,
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(mode),
-        'process.env.previewOnZalo': previewOnZalo,
-      },
-      server: {
-        port: usingFrame ? port - 1 : port,
-        ...(previewOnZalo ? publicServer : localServer),
-      },
-    });
+    let server;
+    let subdomain;
+    let freePort;
+    if (deviceMode) {
+      // generate a subdomain for the tunnel
+      subdomain = hri.random();
+      // start the chii server
+      freePort = await findFreePort();
+      chii.start({
+        port: freePort,
+      });
+      // expose the chii server by using localtunnel
+      const chiiUrl = await openTunnel(freePort);
+      const remoteHost = `${subdomain}.${deviceModeSetup.TUNNEL_SERVER_HOST}`;
+
+      server = await createServer({
+        configFile: path.join(cwd, viteConfig),
+        root: cwd,
+        mode,
+        define: {
+          'process.env.NODE_ENV': JSON.stringify(mode),
+          'process.env.previewOnZalo': true,
+        },
+        server: {
+          port: port,
+          host: 'localhost',
+          origin: `https://${remoteHost}`,
+          base: `/zapps/${appId}/`,
+          hmr: {
+            host: remoteHost,
+            clientPort: 443,
+            protocol: 'wss',
+          },
+          https: false,
+        },
+        plugins: [
+          {
+            name: 'hr-config-plugin',
+            configureServer(server) {
+              const setupCors = (req, res) => {
+                if (
+                  ['https://h5.zdn.vn', 'zbrowser://h5.zdn.vn'].includes(
+                    req.headers.origin
+                  )
+                ) {
+                  res.setHeader(
+                    'Access-Control-Allow-Origin',
+                    req.headers.origin
+                  );
+                }
+              };
+              server.middlewares.use('/app-config.json', (req, res, next) => {
+                // there would be another originalUrl - app-config.json?module that would be dynamicly imported in js format
+                if (req.originalUrl === '/app-config.json') {
+                  res.setHeader('Content-Type', 'application/javascript');
+                  setupCors(req, res);
+                  return res.end(
+                    fs.readFileSync(path.join(cwd, 'app-config.json'))
+                  );
+                } else {
+                  return next();
+                }
+              });
+              server.middlewares.use('/hr.config.json', async (req, res) => {
+                res.setHeader('Content-Type', 'application/json');
+                setupCors(req, res);
+                const hrConfig = await generateHrFromIndex(
+                  `http://localhost:${app.httpServer.address().port}`,
+                  {
+                    chiiUrl,
+                    exposedUrl: `https://${subdomain}.${deviceModeSetup.TUNNEL_SERVER_HOST}`,
+                  }
+                );
+                res.end(JSON.stringify(hrConfig));
+              });
+              server.middlewares.use('/studio.module.js', async (req, res) => {
+                res.setHeader('Content-Type', 'text/javascript');
+                setupCors(req, res);
+                res.end(`
+                  import { createHotContext } from "/@vite/client";
+                  import.meta.hot = createHotContext("${subdomain}");
+                  if (import.meta.hot) {
+                    import.meta.hot.on("vite:beforeFullReload", () => {
+                      window.location.href = window.BACKUP_URL;
+                      ZJSBridge.callCustomAction("action.ma.menu.reload", {}, () => {});
+                      throw "(skipping full reload)";
+                    });
+                    import.meta.hot.on('zmp:close', (data) => {
+                      ZJSBridge.callCustomAction("action.window.close", {}, () => {});
+                    });
+                  }
+                  try {
+                    let shownTip = false;
+                    window.onerror = function (message, url, line, column, error) {
+                      if (!error) {
+                        console.error(
+                          "An uncaught error has occurred, but the detailed error message cannot be displayed due to the cross-origin policy."
+                        );
+                        if (!shownTip) {
+                          console.warn(
+                            "To view the detailed error message, you can try one of the following methods:\\n\\n1. Wrap your code in a try-catch block, use .catch with Promises, or use <ErrorBoundary> in React to catch the detailed error object.\\n2. Try to reproduce the issue using a simulator."
+                          );
+                          shownTip = true;
+                        }
+                      } else {
+                        console.error("[" + error.name + "] " + error.message);
+                      }
+                    };
+                  } catch (error) {
+                    console.error(error);
+                  }
+                  `);
+              });
+            },
+          },
+        ],
+      });
+    } else {
+      server = await createServer({
+        configFile: path.join(cwd, viteConfig),
+        root: cwd,
+        mode,
+        define: {
+          'process.env.NODE_ENV': JSON.stringify(mode),
+          'process.env.previewOnZalo': previewOnZalo,
+        },
+        server: {
+          port: usingFrame ? port - 1 : port,
+          ...(previewOnZalo ? publicServer : localServer),
+        },
+      });
+    }
     const app = await server.listen();
 
     if (!previewOnZalo) {
-      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();
+      if (!deviceMode) {
+        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();
+        }
       }
     } else {
       try {
@@ -171,10 +298,9 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
     }
 
     spinner.stop();
-    return await new Promise(() => {
-      const previewOnZaloURL = `https://zalo.me/app/link/zapps/${appId}/?env=TESTING_LOCAL&clientIp=http://${host}:${app.config.server.port}`;
-
+    return await new Promise(async () => {
       if (previewOnZalo) {
+        const previewOnZaloURL = `https://zalo.me/app/link/zapps/${appId}/?env=TESTING_LOCAL&clientIp=http://${host}:${app.config.server.port}`;
         qrcode.generate(previewOnZaloURL, { small: true }, function (qrcode) {
           logger.text(
             chalk.green(
@@ -227,6 +353,24 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
           }
         });
       }
+      if (deviceMode) {
+        const port = app.httpServer.address().port;
+        const remoteUrl = await openTunnel(port, subdomain);
+        const deviceModeUrl = `https://zalo.me/app/link/zapps/${appId}/?env=TESTING_LOCAL&clientIp=${remoteUrl}`;
+        qrcode.generate(deviceModeUrl, { small: true }, function (qrcode) {
+          const qrCode = `${logSymbols.info} ${chalk.bold(
+            `Scan the QR code with Zalo app:\n${qrcode}`
+          )}`;
+          logger.text(qrCode);
+          logger.text(
+            `${logSymbols.info} ${chalk.bold(
+              `To inspect your app, open: http://localhost:${freePort} in ${chalk.green(
+                `Google Chrome`
+              )} or a ${chalk.blue(`Chromium-based`)} browser.`
+            )}`
+          );
+        });
+      }
     });
   } catch (err) {
     logger.statusError('Error starting project');

package/utils/constants.js

@@ -9,7 +9,12 @@ const projectFramework = {
   VUE: 'vue',
 };
 
+const deviceModeSetup = {
+  TUNNEL_SERVER_HOST: 'mini.123c.vn',
+};
+
 module.exports = {
   versionStatus,
   projectFramework,
+  deviceModeSetup,
 };

package/utils/find-free-port.js

@@ -0,0 +1,11 @@
+const net = require('net');
+
+module.exports = async function findFreePort() {
+  return new Promise((res) => {
+    const srv = net.createServer();
+    srv.listen(0, () => {
+      const port = srv.address().port;
+      srv.close(() => res(port));
+    });
+  });
+};

package/utils/tunnel.js

@@ -0,0 +1,36 @@
+const localtunnel = require('localtunnel');
+const { deviceModeSetup } = require('./constants');
+
+const openedTunnels = {};
+
+async function openTunnel(port, subdomain) {
+  const tunnel = await localtunnel({
+    port,
+    host: `https://${deviceModeSetup.TUNNEL_SERVER_HOST}`,
+    subdomain,
+  });
+  openedTunnels[tunnel.url] = tunnel;
+  return tunnel.url;
+}
+
+async function closeTunnel(url) {
+  const tunnel = openedTunnels[url];
+  if (tunnel) {
+    tunnel.close();
+    return true;
+  }
+  return false;
+}
+
+async function closeAllTunnels() {
+  const res = await Promise.all(
+    Object.keys(openedTunnels).map((key) => closeTunnel(key))
+  );
+  return res.reduce((total, status) => total + (status ? 1 : 0), 0);
+}
+
+module.exports = {
+  openTunnel,
+  closeTunnel,
+  closeAllTunnels,
+};