zmp-cli 3.4.0-2 → 3.4.3

package/create/templates/common/tailwind/tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   purge: {
     enabled: true,
-    content: ['./src/**/*.{js,jsx}'],
+    content: ['./src/**/*.{js,jsx,ts,tsx}'],
   },
   theme: {
     extend: {},

package/create/templates/react-typescript/_tsconfig.json

@@ -10,7 +10,8 @@
     "lib": ["dom", "es5", "es6", "es7", "es2017"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
-    "allowJs": true, 
+    "allowJs": true,
+    "skipLibCheck": true, 
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

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-2",
+  "version": "3.4.3",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -39,6 +39,7 @@
     "@octokit/rest": "^18.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@rollup/plugin-dynamic-import-vars": "^1.1.1",
+    "@rollup/plugin-replace": "^3.0.0",
     "ansi-escapes": "^4.3.2",
     "axios": "^0.21.1",
     "babel-loader": "^8.2.2",
@@ -71,7 +72,7 @@
     "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",
     "prettier": "^2.2.1",
@@ -86,11 +87,10 @@
     "toastr": "^2.1.4",
     "touch": "^3.1.0",
     "vite": "^2.1.5",
+    "vite-plugin-replace": "^0.1.1",
     "xhr2": "^0.2.1",
     "xmlhttprequest": "^1.8.0",
-    "zip-local": "^0.3.4",
-    "@rollup/plugin-replace": "^3.0.0",
-    "vite-plugin-replace": "^0.1.1"
+    "zip-local": "^0.3.4"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",

package/start/frame/index.html

@@ -17,7 +17,7 @@
     <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')
+      fetch('http://localhost:2999/app-config.json')
         .then(response => response.json())
         .then(data => {
           if (data.app.title) {
@@ -137,7 +137,7 @@
         </div>
         <span id="title"></span>
       </div>
-      <iframe id="zalo-frame" src="http://localhost:3000"></iframe>
+      <iframe id="zalo-frame" src="http://localhost:2999"></iframe>
     </div>
   </body>
 </html>

package/start/index.js

@@ -24,11 +24,11 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
   if (!logger) {
     // eslint-disable-next-line
     logger = {
-      statusStart() {},
-      statusDone() {},
-      statusError() {},
-      text() {},
-      error() {},
+      statusStart() { },
+      statusDone() { },
+      statusError() { },
+      text() { },
+      error() { },
     };
   }
   spinner.start();
@@ -96,7 +96,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
         }),
       ],
       server: {
-        port: port,
+        port: 2999,
         strictPort: true,
         ...(previewOnZalo ? publicServer : localServer),
       },
@@ -110,10 +110,15 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
         configFile: false,
         root: __dirname + '/frame',
         server: {
-          port: port + 1,
+          port: port,
+          open: true
         },
       });
-      serverFrame.listen();
+      await serverFrame.listen();
+      spinner.stop();
+      const info = server.config.logger.info
+      info(chalk.green(`Zalo Mini App dev server is running at:\n`))
+      serverFrame.printUrls()
     }
 
     spinner.stop();

package/utils/generate-pages-map.js

@@ -1,15 +1,17 @@
 const path = require('path');
+const normalizePath = require('normalize-path');
 const findFilesByExt = require('./find-files-by-ext');
 
 module.exports = (cwd) => {
-  const pagesDir = path.resolve(cwd, 'src/pages');
+  const pagesDir = path.resolve(cwd, `src${path.sep}pages`);
   const files = findFilesByExt(pagesDir);
   const objectEntries = files.map(({ fileName, folderPath, ext }) => {
-    const fileDir = path.join(folderPath, fileName).replace(`${pagesDir}/`, '');
-    return `"${fileDir}" : () => import("${path.join(
-      folderPath,
-      `${fileName}.${ext}`
-    )}")`;
+    const fileDir = path
+      .join(folderPath, fileName)
+      .replace(`${pagesDir}${path.sep}`, '');
+    const fileDirNormalized = normalizePath(fileDir);
+    const filePath = normalizePath(path.join(folderPath, `${fileName}.${ext}`));
+    return `"${fileDirNormalized}" : () => import("${filePath}")`;
   });
   return `{${objectEntries.join(',')}}`;
 };

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;