zmp-cli 3.4.0 → 3.5.1

package/build/index.js

@@ -91,7 +91,9 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
                 ZMP_IMPORT_PAGES: () => generatePagesMap(cwd),
               },
             }),
-            dynamicImportVars(),
+            dynamicImportVars({
+              warnOnError: true,
+            }),
           ],
           output: {
             entryFileNames: 'assets/[name].[hash].module.js',

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

@@ -1,29 +1,60 @@
 "use strict";
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 var generateNpmScripts = require('./generate-npm-scripts');
 
+var _require = require('./generate-npm-scripts'),
+    generateTailWindScripts = _require.generateTailWindScripts;
+
 module.exports = function generatePackageJson(options) {
   var name = options.name,
       framework = options.framework,
-      cssPreProcessor = options.cssPreProcessor; // Dependencies
+      cssPreProcessor = options.cssPreProcessor,
+      includeTailwind = options.includeTailwind; // Dependencies
 
   var dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
   var dependenciesVue = ['vue@3'];
   var dependenciesReact = ['react', 'react-dom', 'prop-types'];
-  if (framework === 'vue') dependencies.push.apply(dependencies, dependenciesVue);else if (framework === 'react') dependencies.push.apply(dependencies, dependenciesReact);
-  var devDependencies = ['cross-env', 'postcss-preset-env', 'vite']; // CSS PreProcessor
+  var dependenciesReactTs = ['@types/react', '@types/react-dom'];
+  var tailwindDependencies = ['autoprefixer', 'tailwindcss', 'postcss@^8', 'postcss-cli@^8'];
+
+  if (framework === 'vue') {
+    dependencies.push.apply(dependencies, dependenciesVue);
+  } else if (framework === 'react' || framework === 'react-typescript') {
+    dependencies.push.apply(dependencies, dependenciesReact);
+  }
+
+  if (framework === 'react-typescript') {
+    dependencies.push.apply(dependencies, dependenciesReactTs);
+  }
+
+  var devDependencies = ['cross-env', 'postcss-preset-env@6.7.0', 'vite']; // CSS PreProcessor
 
   if (cssPreProcessor === 'stylus') devDependencies.push.apply(devDependencies, ['stylus']);else if (cssPreProcessor === 'less') devDependencies.push.apply(devDependencies, ['less']);else if (cssPreProcessor === 'scss') devDependencies.push.apply(devDependencies, ['sass']); // DevDependencies
 
   var devDependenciesCore = ['zmp-loader'];
   var devDependenciesReact = ['@vitejs/plugin-react-refresh'];
   var devDependenciesVue = ['@vitejs/plugin-vue', '@vue/compiler-sfc'];
-  if (framework === 'react') devDependencies.push.apply(devDependencies, [devDependenciesReact]);else if (framework === 'vue') devDependencies.push.apply(devDependencies, [devDependenciesVue]);else if (framework === 'core') devDependencies.push.apply(devDependencies, [devDependenciesCore]); // Scripts
+  if (framework === 'react' || framework === 'react-typescript') devDependencies.push.apply(devDependencies, [devDependenciesReact].concat(_toConsumableArray(includeTailwind ? tailwindDependencies : [])));else if (framework === 'vue') devDependencies.push.apply(devDependencies, [devDependenciesVue]);else if (framework === 'core') devDependencies.push.apply(devDependencies, [devDependenciesCore]); // Scripts
 
   var scripts = {};
   generateNpmScripts().forEach(function (s) {
     scripts[s.name] = s.script;
   });
+
+  if (includeTailwind) {
+    generateTailWindScripts().forEach(function (s) {
+      scripts[s.name] = s.script;
+    });
+  }
+
   var postInstall = [];
 
   if (postInstall.length) {

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

@@ -25,7 +25,7 @@ module.exports = function generatePackageJson(options) {
   if (framework === 'react-typescript') {
     dependencies.push(...dependenciesReactTs);
   }
-  const devDependencies = ['cross-env', 'postcss-preset-env', 'vite'];
+  const devDependencies = ['cross-env', 'postcss-preset-env@6.7.0', 'vite'];
   // CSS PreProcessor
   if (cssPreProcessor === 'stylus') devDependencies.push(...['stylus']);
   else if (cssPreProcessor === 'less') devDependencies.push(...['less']);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmp-cli",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -72,7 +72,6 @@
     "mini-css-extract-plugin": "^1.3.7",
     "minimist": "^1.2.5",
     "multer": "^1.4.2",
-    "node-blob": "^0.0.2",
     "normalize-path": "^3.0.0",
     "opn": "^6.0.0",
     "ora": "^3.4.0",
@@ -87,7 +86,7 @@
     "terser-webpack-plugin": "^5.1.1",
     "toastr": "^2.1.4",
     "touch": "^3.1.0",
-    "vite": "^2.1.5",
+    "vite": "^2.6.14",
     "vite-plugin-replace": "^0.1.1",
     "xhr2": "^0.2.1",
     "xmlhttprequest": "^1.8.0",

package/start/frame/index.html

@@ -1,143 +1,156 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, viewport-fit=cover"
-    />
-
-    <meta name="theme-color" content="#007aff" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="msapplication-tap-highlight" content="no" />
-    <link rel="icon" href="/src/static/icons/favicon.png" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <script>
-      fetch('http://localhost:3000/app-config.json')
-        .then(response => response.json())
-        .then(data => {
-          if (data.app.title) {
-            document.getElementById('title').innerHTML = data.app.title;
-            document.title = data.app.title;
-          }
-          if (data.app.headerColor) {
-            document.getElementById('header').style.backgroundColor = data.app.headerColor;
-          }
-          if (data.app.statusBarColor) {
-            document.getElementById('statusbar').style.backgroundColor = data.app.statusBarColor;
-          }
-          if (data.app.textColor) {
-            document.getElementById('statusbar').style.color = data.app.textColor;
-            document.getElementById('header').style.color = data.app.textColor;
-          }
-        });
-   </script>
-
-    <title>Water Reminder1</title>
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-        margin: 0px;
-      }
-      #zalo-frame {
-        width: 100%;
-        height: calc(100vh - 74px);
-        border: none;
-        overflow: auto;
-        cursor: grab;
-      }
-      .wrapper-frame {
-        width: 100%;
-        height: 100vh;
-        background-color: black;
-        margin: auto;
-      }
-      .status-bar {
-        height: 30px;
-        background-color: #0068FF;
-        color: white;
-        font-size: 13px;
-      }
-      .status-bar .right {
-        float: right;
-        padding: 6px;
-      }
-      .status-bar .left {
-        float: left;
-        padding: 6px;
-        margin-left: 5px;
-      }
-      .status-bar .right i {
-        margin-right: 5px;
-      }
-      .header {
-        position: relative;
-        height: 32px;
-        background-color: #0068FF;
-        text-align: center;
-        color: #fff;
-        padding-top: 12px;
-      }
-      .header .home {
-        font-size: 14px;
-        position: absolute;
-        left: 6px;
-        top: 6px;
-        padding-top: 6px;
-        height: 24px;
-        width: 30px;
-        background-color: rgba(0, 0, 0, 0.15);
-        border-radius: 100%;
-        border: 1px solid rgba(255, 255, 255, 0.25);
-      }
 
-      .header .setting {
-        font-size: 14px;
-        position: absolute;
-        right: 6px;
-        top: 6px;
-        padding-top: 6px;
-        height: 24px;
-        width: 85px;
-        background-color: rgba(0, 0, 0, 0.15);
-        border-radius: 16px;
-        border: 1px solid rgba(255, 255, 255, 0.25);
-      }
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 
-      .header .setting i:first-child {
-        border-right: 1px solid rgba(255, 255, 255, 0.25);
-        padding-right: 12px;
-        margin-right: 12px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="wrapper-frame">
-      <div id="statusbar" class="status-bar">
-        <div class="right">
-          <i class="fas fa-wifi"></i>
-          <i class="fas fa-battery-full"></i>
-        </div>
-        <div class="left">
-          12:00
-        </div>
+  <meta name="theme-color" content="#007aff" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
+  <link rel="icon" href="/src/static/icons/favicon.png" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+    integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <title>Water Reminder1</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      margin: 0px;
+    }
+
+    #zalo-frame {
+      width: 100%;
+      height: calc(100vh - 74px);
+      border: none;
+      overflow: auto;
+      cursor: grab;
+    }
+
+    .wrapper-frame {
+      width: 100%;
+      height: 100vh;
+      background-color: black;
+      margin: auto;
+      overflow: hidden;
+    }
+
+    .status-bar {
+      height: 30px;
+      background-color: #0068FF;
+      color: white;
+      font-size: 13px;
+    }
+
+    .status-bar .right {
+      float: right;
+      padding: 6px;
+    }
+
+    .status-bar .left {
+      float: left;
+      padding: 6px;
+      margin-left: 5px;
+    }
+
+    .status-bar .right i {
+      margin-right: 5px;
+    }
+
+    .header {
+      position: relative;
+      height: 32px;
+      background-color: #0068FF;
+      text-align: center;
+      color: #fff;
+      padding-top: 12px;
+    }
+
+    .header .home {
+      font-size: 14px;
+      position: absolute;
+      left: 6px;
+      top: 6px;
+      padding-top: 6px;
+      height: 24px;
+      width: 30px;
+      background-color: rgba(0, 0, 0, 0.15);
+      border-radius: 100%;
+      border: 1px solid rgba(255, 255, 255, 0.25);
+    }
+
+    .header .setting {
+      font-size: 14px;
+      position: absolute;
+      right: 6px;
+      top: 6px;
+      padding-top: 6px;
+      height: 24px;
+      width: 85px;
+      background-color: rgba(0, 0, 0, 0.15);
+      border-radius: 16px;
+      border: 1px solid rgba(255, 255, 255, 0.25);
+    }
+
+    .header .setting i:first-child {
+      border-right: 1px solid rgba(255, 255, 255, 0.25);
+      padding-right: 12px;
+      margin-right: 12px;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wrapper-frame">
+    <div id="statusbar" class="status-bar">
+      <div class="right">
+        <i class="fas fa-wifi"></i>
+        <i class="fas fa-battery-full"></i>
+      </div>
+      <div class="left">
+        12:00
       </div>
+    </div>
 
-      <div id="header" class="header">
-        <div class="home">
-          <i class="fas fa-home"></i>
-        </div>
-        <div class="setting">
-          <i class="fas fa-ellipsis-h"></i>
-          <i class="fas fa-power-off"></i>
-        </div>
-        <span id="title"></span>
+    <div id="header" class="header">
+      <div class="home">
+        <i class="fas fa-home"></i>
+      </div>
+      <div class="setting">
+        <i class="fas fa-ellipsis-h"></i>
+        <i class="fas fa-power-off"></i>
       </div>
-      <iframe id="zalo-frame" src="http://localhost:3000"></iframe>
+      <span id="title"></span>
     </div>
-  </body>
+  </div>
+</body>
+
+<script>
+  fetch(`http://localhost:${window.location.port - 1}/app-config.json`)
+    .then(response => response.json())
+    .then(data => {
+      if (data.app.title) {
+        document.getElementById('title').innerHTML = data.app.title;
+        document.title = data.app.title;
+      }
+      if (data.app.headerColor) {
+        document.getElementById('header').style.backgroundColor = data.app.headerColor;
+      }
+      if (data.app.statusBarColor) {
+        document.getElementById('statusbar').style.backgroundColor = data.app.statusBarColor;
+      }
+      if (data.app.textColor) {
+        document.getElementById('statusbar').style.color = data.app.textColor;
+        document.getElementById('header').style.color = data.app.textColor;
+      }
+    });
+  const iframe = document.createElement('iframe');
+  iframe.id = 'zalo-frame'
+  iframe.src = `http://localhost:${window.location.port - 1}`
+  document.body.firstElementChild.appendChild(iframe);
+</script>
+
 </html>

package/start/index.js

@@ -6,13 +6,11 @@ const path = require('path');
 const qrcode = require('qrcode-terminal');
 const logSymbols = require('log-symbols');
 const { createServer } = require('vite');
-const { replaceCodePlugin } = require('vite-plugin-replace');
 
 const config = require('../config');
 const envUtils = require('../utils/env');
 const fs = require('../utils/fs-extra');
 const fse = require('../utils/fs-extra');
-const generatePagesMap = require('../utils/generate-pages-map');
 
 const spinner = ora('Starting mini app...');
 
@@ -82,22 +80,8 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
           previewOnZalo ? 'production' : 'development'
         ),
       },
-      optimizeDeps: {
-        exclude: ['zmp-import-pages'],
-      },
-      plugins: [
-        replaceCodePlugin({
-          replacements: [
-            {
-              from: 'ZMP_IMPORT_PAGES',
-              to: () => generatePagesMap(cwd),
-            },
-          ],
-        }),
-      ],
       server: {
-        port: port,
-        strictPort: true,
+        port: port - 1,
         ...(previewOnZalo ? publicServer : localServer),
       },
     });
@@ -110,10 +94,16 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
         configFile: false,
         root: __dirname + '/frame',
         server: {
-          port: port + 1,
+          port: app.httpServer.address().port + 1,
+          strictPort: true,
+          open: true,
         },
       });
-      serverFrame.listen();
+      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();
     }
 
     spinner.stop();

package/utils/node-blob.js

@@ -0,0 +1,106 @@
+// Based on https://github.com/tmpvar/jsdom/blob/aa85b2abf07766ff7bf5c1f6daafb3726f2f2db5/lib/jsdom/living/blob.js
+// (MIT licensed)
+// Also based on https://github.com/modulesio/window-fetch/blob/master/src/blob.js
+
+const TYPE = Symbol('type');
+const CLOSED = Symbol('closed');
+
+class Blob {
+    constructor() {
+        Object.defineProperty(this, Symbol.toStringTag, {
+            value: 'Blob',
+            writable: false,
+            enumerable: false,
+            configurable: true
+        });
+
+        this[CLOSED] = false;
+        this[TYPE] = '';
+
+        const blobParts = arguments[0];
+        const options = arguments[1];
+
+        const buffers = [];
+
+        if (blobParts) {
+            const a = blobParts;
+            const length = Number(a.length);
+            for (let i = 0; i < length; i++) {
+                const element = a[i];
+                let buffer;
+                if (element instanceof Buffer) {
+                    buffer = element;
+                } else if (ArrayBuffer.isView(element)) {
+                    buffer = Buffer.from(element.buffer, element.byteOffset, element.byteLength);
+                } else if (element instanceof ArrayBuffer) {
+                    buffer = Buffer.from(element);
+                } else if (element instanceof Blob) {
+                    buffer = element.buffer;
+                } else {
+                    buffer = Buffer.from(typeof element === 'string' ? element : String(element));
+                }
+                buffers.push(buffer);
+            }
+        }
+
+        this.buffer = Buffer.concat(buffers);
+
+        let type = options && options.type !== undefined && String(options.type).toLowerCase();
+        if (type && !/[^\u0020-\u007E]/.test(type)) {
+            this[TYPE] = type;
+        }
+    }
+    get size() {
+        return this[CLOSED] ? 0 : this.buffer.length;
+    }
+    get type() {
+        return this[TYPE];
+    }
+    get isClosed() {
+        return this[CLOSED];
+    }
+    slice() {
+        const size = this.size;
+
+        const start = arguments[0];
+        const end = arguments[1];
+        let relativeStart, relativeEnd;
+        if (start === undefined) {
+            relativeStart = 0;
+        } else if (start < 0) {
+            relativeStart = Math.max(size + start, 0);
+        } else {
+            relativeStart = Math.min(start, size);
+        }
+        if (end === undefined) {
+            relativeEnd = size;
+        } else if (end < 0) {
+            relativeEnd = Math.max(size + end, 0);
+        } else {
+            relativeEnd = Math.min(end, size);
+        }
+        const span = Math.max(relativeEnd - relativeStart, 0);
+
+        const buffer = this.buffer;
+        const slicedBuffer = buffer.slice(
+            relativeStart,
+            relativeStart + span
+        );
+        const blob = new Blob([], { type: arguments[2] });
+        blob.buffer = slicedBuffer;
+        blob[CLOSED] = this[CLOSED];
+        return blob;
+    }
+    close() {
+        this[CLOSED] = true;
+    }
+};
+
+Object.defineProperty(Blob.prototype, Symbol.toStringTag, {
+    value: 'BlobPrototype',
+    writable: false,
+    enumerable: false,
+    configurable: true
+});
+
+module.exports = Blob;

package/utils/resumable.js

@@ -1,5 +1,5 @@
 const FileAPI = require('file-api');
-const Blob = require('node-blob');
+const Blob = require('./node-blob');
 const XMLHttpRequest = require('xhr2');
 
 const File = FileAPI.File;