zmp-cli 3.15.5 → 3.15.6-beta.1

package/create/templates/generate-manifest.js

@@ -1,49 +1 @@
-module.exports = (options) => {
-  const { name, theming } = options;
-  const iconsFolder = 'static';
-  const manifest = {
-    name,
-    short_name: name,
-    description: name,
-    lang: 'en-US',
-    start_url: '/',
-    display: 'standalone',
-    background_color:
-      theming.customColor && theming.color ? `${theming.color}` : '#EE350F',
-    theme_color:
-      theming.customColor && theming.color ? `${theming.color}` : '#EE350F',
-    icons: [
-      {
-        src: `/${iconsFolder}/icons/128x128.png`,
-        sizes: '128x128',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/144x144.png`,
-        sizes: '144x144',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/152x152.png`,
-        sizes: '152x152',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/192x192.png`,
-        sizes: '192x192',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/256x256.png`,
-        sizes: '256x256',
-        type: 'image/png',
-      },
-      {
-        src: `/${iconsFolder}/icons/512x512.png`,
-        sizes: '512x512',
-        type: 'image/png',
-      },
-    ],
-  };
-  return JSON.stringify(manifest, null, 2);
-};
+"use strict";module.exports=s=>{let{name:o,theming:e}=s,n="static";return JSON.stringify({name:o,short_name:o,description:o,lang:"en-US",start_url:"/",display:"standalone",background_color:e.customColor&&e.color?`${e.color}`:"#EE350F",theme_color:e.customColor&&e.color?`${e.color}`:"#EE350F",icons:[{src:`/${n}/icons/128x128.png`,sizes:"128x128",type:"image/png"},{src:`/${n}/icons/144x144.png`,sizes:"144x144",type:"image/png"},{src:`/${n}/icons/152x152.png`,sizes:"152x152",type:"image/png"},{src:`/${n}/icons/192x192.png`,sizes:"192x192",type:"image/png"},{src:`/${n}/icons/256x256.png`,sizes:"256x256",type:"image/png"},{src:`/${n}/icons/512x512.png`,sizes:"512x512",type:"image/png"}]},null,2)};

package/create/templates/generate-recoil.js

@@ -1,10 +1,4 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-module.exports = (options) => {
-  const { framework, template } = options;
-
-  const productState = `
+"use strict";require("../utils/indent");const e=require("../utils/template-if");module.exports=i=>{let{framework:t,template:r}=i,a=`
 
 export const productsState = atom({
   key: "products",
@@ -25,10 +19,7 @@ export const productsState = atom({
       description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
     },
   ]
-});`;
-
-  if (framework === 'react-typescript') {
-    return `
+});`;return"react-typescript"===t?`
 import { atom } from "recoil";
 import { userInfo } from 'zmp-sdk';
 
@@ -40,9 +31,7 @@ export const userState = atom<userInfo>({
     avatar: 'ZA',
   }
 })
-${templateIf(template === 'tabs', () => productState)}`;
-  }
-  return `import { atom } from "recoil";
+${e("tabs"===r,()=>a)}`:`import { atom } from "recoil";
 
 export const userState = atom({
   key: "user",
@@ -52,5 +41,4 @@ export const userState = atom({
     avatar: 'ZA',
   }
 })
-${templateIf(template === 'tabs', () => productState)}`;
-};
+${e("tabs"===r,()=>a)}`};

package/create/templates/generate-routes.js

@@ -1,16 +1 @@
-// const generateCoreRoutes = require('./core/generate-routes');
-const generateVueRoutes = require('./vue/generate-routes');
-const generateReactRoutes = require('./react/generate-routes');
-const generateReactTsRoutes = require('./react-typescript/generate-routes');
-// const generateSvelteRoutes = require('./svelte/generate-routes');
-
-module.exports = (options) => {
-  const { framework } = options;
-  // if (framework === 'core') return generateCoreRoutes(options);
-  if (framework === 'vue') return generateVueRoutes(options);
-  if (framework === 'react') return generateReactRoutes(options);
-  if (framework === 'react-typescript') return generateReactTsRoutes(options);
-
-  // if (framework === 'svelte') return generateSvelteRoutes(options);
-  return [];
-};
+"use strict";const e=require("./vue/generate-routes"),r=require("./react/generate-routes"),t=require("./react-typescript/generate-routes");module.exports=u=>{let{framework:s}=u;return"vue"===s?e(u):"react"===s?r(u):"react-typescript"===s?t(u):[]};

package/create/templates/generate-scripts.js

@@ -1,16 +1 @@
-const generateCoreScripts = require('./core/generate-scripts');
-const generateVueScripts = require('./vue/generate-scripts');
-const generateReactScripts = require('./react/generate-scripts');
-const generateSvelteScripts = require('./svelte/generate-scripts');
-const generateReactTsScripts = require('./react-typescript/generate-scripts');
-const generateZauiScripts = require('./zaui/generate-scripts');
-module.exports = (options) => {
-  const { framework, package } = options;
-  if (package === 'zmp-ui') return generateZauiScripts(options);
-  if (framework === 'core') return generateCoreScripts(options);
-  if (framework === 'vue') return generateVueScripts(options);
-  if (framework === 'react') return generateReactScripts(options);
-  if (framework === 'svelte') return generateSvelteScripts(options);
-  if (framework === 'react-typescript') return generateReactTsScripts(options);
-  return '';
-};
+"use strict";const e=require("./core/generate-scripts"),r=require("./vue/generate-scripts"),t=require("./react/generate-scripts"),s=require("./svelte/generate-scripts"),c=require("./react-typescript/generate-scripts"),i=require("./zaui/generate-scripts");module.exports=a=>{let{framework:p}=a;return"zmp-ui"===a.package?i(a):"core"===p?e(a):"vue"===p?r(a):"react"===p?t(a):"svelte"===p?s(a):"react-typescript"===p?c(a):""};

package/create/templates/generate-service-worker.js

@@ -1,9 +1,4 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-module.exports = (options) => {
-  const { bundler, theming } = options;
-  return indent(0, `
+"use strict";const s=require("../utils/indent"),o=require("../utils/template-if");module.exports=e=>{let{bundler:n,theming:r}=e;return s(0,`
     // Import Workbox (https://developers.google.com/web/tools/workbox/)
     importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
 
@@ -24,7 +19,7 @@ module.exports = (options) => {
         revision: '1',
         url: 'css/app.css'
       },
-      ${templateIf(theming.iconFonts, () => `
+      ${o(r.iconFonts,()=>`
       {
         revision: '1',
         url: 'css/icons.css'
@@ -42,7 +37,7 @@ module.exports = (options) => {
         revision: '1',
         url: 'app.js'
       },
-      ${templateIf(theming.iconFonts, () => `
+      ${o(r.iconFonts,()=>`
       // Fonts
       {
         revision: '1',
@@ -122,5 +117,4 @@ module.exports = (options) => {
       It is better to comment next line during development
     */
     workbox.precaching.precacheAndRoute(self.__WB_MANIFEST || []);
-  `).trim();
-};
+  `).trim()};

package/create/templates/generate-store.js

@@ -1,11 +1,4 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-
-module.exports = (options) => {
-  const { framework } = options;
-  if (framework === 'vue') {
-    return indent(0, `
+"use strict";const e=require("../utils/indent");require("../utils/template-if"),module.exports=t=>{let{framework:r}=t;return"vue"===r?e(0,`
     import { createStore } from 'zmp-core/lite';
     const store = createStore({
       state: {
@@ -35,10 +28,8 @@ module.exports = (options) => {
     })
 
     export default store;
-  `);
-  }
-  return indent(0, `
-  import { createStore } from 'zmp-core${framework === 'core' ? '' : '/lite'}';
+  `):e(0,`
+  import { createStore } from 'zmp-core${"core"===r?"":"/lite"}';
   const store = createStore({
     state: {
       user: {
@@ -83,6 +74,4 @@ module.exports = (options) => {
   })
 
   export default store;
-  `
-  );
-};
+  `)};

package/create/templates/generate-styles.js

@@ -1,69 +1,25 @@
-const indent = require('../utils/indent');
-const { colorThemeCSSProperties } = require('../utils/colors');
-
-module.exports = (options) => {
-  const { template, theming, package } = options;
-  const { customColor, color, fillBars } = theming;
-
-  let styles = '';
-
-  if (package === 'zmp-ui') {
-    return `
+"use strict";const e=require("../utils/indent"),{colorThemeCSSProperties:i}=require("../utils/colors");module.exports=t=>{let{template:n,theming:o}=t,{customColor:a,color:r,fillBars:p}=o,l="";if("zmp-ui"===t.package)return`
     .page {
       padding: 16px 16px 96px 16px;
     }
-    
+
     .section-container {
       padding: 16px;
       background: #ffffff;
       border-radius: 8px;
       margin-bottom: 24px;
-    }    
-    `;
-  }
-
-  let themeRgb = [0, 122, 255];
-
-  if (customColor && color) {
-    const customProps = colorThemeCSSProperties(`${color}`);
-    themeRgb = customProps['--zmp-theme-color-rgb']
-      .split(',')
-      .map((n) => n.trim());
-    styles += indent(
-      0,
-      `
+    }
+    `;if(a&&r){let t=i(`${r}`);t["--zmp-theme-color-rgb"].split(",").map(e=>e.trim()),l+=e(0,`
       /* Custom color theme properties */
       :root {
-        ${Object.keys(customProps)
-          .filter(
-            (prop) =>
-              prop !== '--zmp-tabbar-fill-link-active-color' &&
-              prop !== '--zmp-tabbar-fill-link-active-border-color'
-          )
-          .map((prop) => `${prop}: ${customProps[prop]};`)
-          .join('\n        ')}
+        ${Object.keys(t).filter(e=>"--zmp-tabbar-fill-link-active-color"!==e&&"--zmp-tabbar-fill-link-active-border-color"!==e).map(e=>`${e}: ${t[e]};`).join("\n        ")}
       }
       :root.theme-dark,:root .theme-dark {
-        ${Object.keys(customProps)
-          .map((prop) => `${prop}: ${customProps[prop]};`)
-          .join('\n        ')} 
+        ${Object.keys(t).map(e=>`${e}: ${t[e]};`).join("\n        ")}
       }
-    `
-    );
-  }
-  if (fillBars) {
-    styles += indent(
-      0,
-      `
+    `)}return p&&(l+=e(0,`
       /* Invert navigation bars to fill style */
-    `
-    );
-  }
-
-  if (template === 'split-view') {
-    styles += indent(
-      0,
-      `
+    `)),"split-view"===n?l+=e(0,`
       /* Left Panel right border when it is visible by breakpoint */
       .panel-left.panel-in-breakpoint:before {
         position: absolute;
@@ -95,16 +51,6 @@ module.exports = (options) => {
         content: '';
         z-index: 6000;
       }
-    `
-    );
-  } else {
-    styles += indent(
-      0,
-      `
+    `):l+=e(0,`
       /* Your app custom styles here */
-    `
-    );
-  }
-
-  return styles.trim();
-};
+    `),l.trim()};

package/create/templates/generate-webpack-config.js

@@ -1,55 +1,19 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-module.exports = (options) => {
-  const { framework, type, webpack } = options;
-
-  let resolveExtensions = "['.js', '.json']";
-  if (framework === 'vue') {
-    resolveExtensions = "['.js', '.vue', '.json']";
-  }
-  if (framework === 'react') {
-    resolveExtensions = "['.js', '.jsx', '.json']";
-  }
-  if (framework === 'svelte') {
-    resolveExtensions = "['.mjs', '.js', '.svelte', '.json']";
-  }
-
-  const productionDevtool = webpack.productionSourceMap
-    ? "'source-map'"
-    : false;
-  const developmentDevtool = webpack.developmentSourceMap ? "'eval'" : false;
-  const hashName = webpack.hashAssets ? '.[hash:6]' : '';
-  const assetsLoader = webpack.inlineAssets ? 'url-loader' : 'file-loader';
-  const preserveAssetsPaths = webpack.preserveAssetsPaths; // eslint-disable-line
-
-  return indent(
-    0,
-    `
+"use strict";const e=require("../utils/indent"),t=require("../utils/template-if");module.exports=s=>{let{framework:r,type:o,webpack:n}=s,a="['.js', '.json']";"vue"===r&&(a="['.js', '.vue', '.json']"),"react"===r&&(a="['.js', '.jsx', '.json']"),"svelte"===r&&(a="['.mjs', '.js', '.svelte', '.json']");let i=!!n.productionSourceMap&&"'source-map'",l=!!n.developmentSourceMap&&"'eval'",u=n.hashAssets?".[hash:6]":"",p=n.inlineAssets?"url-loader":"file-loader",c=n.preserveAssetsPaths;return e(0,`
     const webpack = require('webpack');
     const CopyWebpackPlugin = require('copy-webpack-plugin');
     const HtmlWebpackPlugin = require('html-webpack-plugin');
-    ${templateIf(
-      framework === 'vue',
-      () => `
+    ${t("vue"===r,()=>`
     const { VueLoaderPlugin } = require('vue-loader');
-    `
-    )}
-    ${templateIf(
-      framework === 'react',
-      () => `
+    `)}
+    ${t("react"===r,()=>`
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-    `
-    )}
+    `)}
     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
     const TerserPlugin = require('terser-webpack-plugin');
-    ${templateIf(
-      type.indexOf('pwa') >= 0,
-      () => `
+    ${t(o.indexOf("pwa")>=0,()=>`
     const WorkboxPlugin = require('workbox-webpack-plugin');
-    `
-    )}
+    `)}
     const path = require('path');
 
     function resolvePath(dir) {
@@ -67,25 +31,22 @@ module.exports = (options) => {
       },
       output: {
         path: resolvePath('www'),
-        filename: 'js/[name]${hashName}.js',
-        chunkFilename: 'js/[name]${hashName}.js',
+        filename: 'js/[name]${u}.js',
+        chunkFilename: 'js/[name]${u}.js',
         publicPath: '',
         hotUpdateChunkFilename: 'hot/hot-update.js',
         hotUpdateMainFilename: 'hot/hot-update.json',
       },
       resolve: {
-        extensions: ${resolveExtensions},
+        extensions: ${a},
         alias: {
           '@': resolvePath('src'),
         },
-        ${templateIf(
-          framework === 'svelte',
-          () => `
+        ${t("svelte"===r,()=>`
         mainFields: ['svelte', 'browser', 'module', 'main']
-        `
-        )}
+        `)}
       },
-      devtool: env === 'production' ? ${productionDevtool} : ${developmentDevtool},
+      devtool: env === 'production' ? ${i} : ${l},
       devServer: {
         hot: true,
         open: true,
@@ -104,32 +65,24 @@ module.exports = (options) => {
             test: /\\.(mjs|js|jsx)$/,
             include: [
               resolvePath('src'),
-              ${templateIf(
-                framework === 'svelte',
-                () => `
+              ${t("svelte"===r,()=>`
               resolvePath('node_modules/svelte'),
-              `
-              )}
+              `)}
             ],
             use: [
               {
                 loader: require.resolve('babel-loader'),
-                ${templateIf(
-                  framework === 'react',
-                  () => `
+                ${t("react"===r,()=>`
                 options: env === 'development' ? {
                   plugins: [
                     require.resolve('react-refresh/babel'),
                   ]
                 } : {}
-                `
-                )}
+                `)}
               },
             ]
           },
-          ${templateIf(
-            framework === 'core',
-            () => `
+          ${t("core"===r,()=>`
           {
             test: /\\.zmp.(html|js)$/,
             use: [
@@ -137,11 +90,8 @@ module.exports = (options) => {
               'zmp-loader',
             ],
           },
-          `
-          )}
-          ${templateIf(
-            framework === 'svelte',
-            () => `
+          `)}
+          ${t("svelte"===r,()=>`
           {
             test: /\\.svelte$/,
             use: {
@@ -151,17 +101,13 @@ module.exports = (options) => {
               },
             },
           },
-          `
-          )}
-          ${templateIf(
-            framework === 'vue',
-            () => `
+          `)}
+          ${t("vue"===r,()=>`
           {
             test: /\\.vue$/,
             use: 'vue-loader',
           },
-          `
-          )}
+          `)}
           {
             test: /\\.css$/,
             use: [
@@ -219,52 +165,37 @@ module.exports = (options) => {
           },
           {
             test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
-            loader: '${assetsLoader}',
+            loader: '${p}',
             options: {
               limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'images/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
+              name: '${c?"[path]":"images/"}[name]${u}.[ext]',
+              ${t(c,()=>`
               context: path.resolve(__dirname, '../src'),
-              `
-              )}
+              `)}
             },
             type: 'javascript/auto'
           },
           {
             test: /\\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\\?.*)?$/,
-            loader: '${assetsLoader}',
+            loader: '${p}',
             options: {
               limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'media/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
+              name: '${c?"[path]":"media/"}[name]${u}.[ext]',
+              ${t(c,()=>`
               context: path.resolve(__dirname, '../src'),
-              `
-              )}
+              `)}
             },
             type: 'javascript/auto'
           },
           {
             test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,
-            loader: '${assetsLoader}',
+            loader: '${p}',
             options: {
               limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'fonts/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
+              name: '${c?"[path]":"fonts/"}[name]${u}.[ext]',
+              ${t(c,()=>`
               context: path.resolve(__dirname, '../src'),
-              `
-              )}
+              `)}
             },
             type: 'javascript/auto'
           },
@@ -275,21 +206,15 @@ module.exports = (options) => {
           'process.env.NODE_ENV': JSON.stringify(env),
           'process.env.TARGET': JSON.stringify(target),
         }),
-        ${templateIf(
-          framework === 'vue',
-          () => `
+        ${t("vue"===r,()=>`
         new VueLoaderPlugin(),
-        `
-        )}
+        `)}
         ...(env === 'production' ? [
           new CssMinimizerPlugin(),
         ] : [
           // Development only plugins
           new webpack.HotModuleReplacementPlugin(),
-          ${templateIf(
-            framework === 'react',
-            () => 'new ReactRefreshWebpackPlugin(),'
-          )}
+          ${t("react"===r,()=>"new ReactRefreshWebpackPlugin(),")}
         ]),
         new HtmlWebpackPlugin({
           filename: './index.html',
@@ -298,16 +223,14 @@ module.exports = (options) => {
           minify: env === 'production' ? {
             collapseWhitespace: true,
             removeComments: true,
-            removeRedundantAttributes: ${
-              framework === 'core' ? 'false' : 'true'
-            },
+            removeRedundantAttributes: ${"core"===r?"false":"true"},
             removeScriptTypeAttributes: true,
             removeStyleLinkTypeAttributes: true,
             useShortDoctype: true
           } : false,
         }),
         new MiniCssExtractPlugin({
-          filename: 'css/[name]${hashName}.css',
+          filename: 'css/[name]${u}.css',
         }),
         new CopyWebpackPlugin({
           patterns: [
@@ -316,20 +239,15 @@ module.exports = (options) => {
               from: resolvePath('src/static'),
               to: resolvePath('www/static'),
             },
-            ${templateIf(
-              type.indexOf('pwa') >= 0,
-              () => `
+            ${t(o.indexOf("pwa")>=0,()=>`
             {
               noErrorOnMissing: true,
               from: resolvePath('src/manifest.json'),
               to: resolvePath('www/manifest.json'),
             },
-            `
-            )}
+            `)}
           ],
         }),
       ],
     };
-  `
-  ).trim();
-};
+  `).trim()};