zmp-cli 3.15.6 → 3.15.8

package/create/templates/generate-store.js

@@ -1,88 +0,0 @@
-const indent = require('../utils/indent');
-const templateIf = require('../utils/template-if');
-
-
-module.exports = (options) => {
-  const { framework } = options;
-  if (framework === 'vue') {
-    return indent(0, `
-    import { createStore } from 'zmp-core/lite';
-    const store = createStore({
-      state: {
-        user: {
-          id: '',
-          name: '',
-          avatar: ''
-        },
-        darkMode: false,
-      },
-      getters: {
-        user({ state }) {
-          return state.user
-        },
-        darkMode({ state }) {
-          return state.darkMode
-        }
-      },
-      actions: {
-        setUser({ state }, data) {
-          state.user = { ...state.user, ...data }
-        },
-        setDarkMode({ state }, dark) {
-          state.darkMode = dark
-        }
-      },
-    })
-
-    export default store;
-  `);
-  }
-  return indent(0, `
-  import { createStore } from 'zmp-core${framework === 'core' ? '' : '/lite'}';
-  const store = createStore({
-    state: {
-      user: {
-        id: '12345678',
-        name: 'Zalo',
-        avatar: 'ZA',
-      },
-      products: [
-        {
-          id: '1',
-          title: 'Apple iPhone 8',
-          description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
-        },
-        {
-          id: '2',
-          title: 'Apple iPhone 8 Plus',
-          description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
-        },
-        {
-          id: '3',
-          title: 'Apple iPhone X',
-          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.'
-        },
-      ]
-    },
-    getters: {
-      user({ state }) {
-        return state.user
-      },
-      products({ state }) {
-        return state.products;
-      }
-    },
-    actions: {
-      setUser({ state }, data) {
-        state.user = { ...state.user, ...data }
-      },
-      addProduct({ state }, product) {
-        state.products = [...state.products, product];
-      },
-    },
-  })
-
-  export default store;
-  `
-  );
-};

package/create/templates/generate-styles.js

@@ -1,110 +0,0 @@
-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 `
-    .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,
-      `
-      /* 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        ')}
-      }
-      :root.theme-dark,:root .theme-dark {
-        ${Object.keys(customProps)
-          .map((prop) => `${prop}: ${customProps[prop]};`)
-          .join('\n        ')} 
-      }
-    `
-    );
-  }
-  if (fillBars) {
-    styles += indent(
-      0,
-      `
-      /* Invert navigation bars to fill style */
-    `
-    );
-  }
-
-  if (template === 'split-view') {
-    styles += indent(
-      0,
-      `
-      /* Left Panel right border when it is visible by breakpoint */
-      .panel-left.panel-in-breakpoint:before {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 100%;
-        width: 1px;
-        background: rgba(0,0,0,0.1);
-        content: '';
-        z-index: 6000;
-      }
-
-      /* Hide navbar link which opens left panel when it is visible by breakpoint */
-      .panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel="left"] {
-        display: none;
-      }
-
-      /*
-        Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
-      */
-      .ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,
-      .ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 1px;
-        background: rgba(0,0,0,0.1);
-        content: '';
-        z-index: 6000;
-      }
-    `
-    );
-  } else {
-    styles += indent(
-      0,
-      `
-      /* Your app custom styles here */
-    `
-    );
-  }
-
-  return styles.trim();
-};

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

@@ -1,335 +0,0 @@
-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,
-    `
-    const webpack = require('webpack');
-    const CopyWebpackPlugin = require('copy-webpack-plugin');
-    const HtmlWebpackPlugin = require('html-webpack-plugin');
-    ${templateIf(
-      framework === 'vue',
-      () => `
-    const { VueLoaderPlugin } = require('vue-loader');
-    `
-    )}
-    ${templateIf(
-      framework === 'react',
-      () => `
-    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,
-      () => `
-    const WorkboxPlugin = require('workbox-webpack-plugin');
-    `
-    )}
-    const path = require('path');
-
-    function resolvePath(dir) {
-      return path.join(__dirname, '..', dir);
-    }
-
-    const env = process.env.NODE_ENV || 'development';
-    const target = process.env.TARGET || 'web';
-
-    module.exports = {
-      mode: env,
-      target: env === "development" ? "web" : "browserslist",
-      entry: {
-        app: './src/js/app.js',
-      },
-      output: {
-        path: resolvePath('www'),
-        filename: 'js/[name]${hashName}.js',
-        chunkFilename: 'js/[name]${hashName}.js',
-        publicPath: '',
-        hotUpdateChunkFilename: 'hot/hot-update.js',
-        hotUpdateMainFilename: 'hot/hot-update.json',
-      },
-      resolve: {
-        extensions: ${resolveExtensions},
-        alias: {
-          '@': resolvePath('src'),
-        },
-        ${templateIf(
-          framework === 'svelte',
-          () => `
-        mainFields: ['svelte', 'browser', 'module', 'main']
-        `
-        )}
-      },
-      devtool: env === 'production' ? ${productionDevtool} : ${developmentDevtool},
-      devServer: {
-        hot: true,
-        open: true,
-        compress: true,
-        contentBase: '/www/',
-        disableHostCheck: true,
-        historyApiFallback: true,
-      },
-      optimization: {
-        concatenateModules: true,
-        minimizer: [new TerserPlugin()],
-      },
-      module: {
-        rules: [
-          {
-            test: /\\.(mjs|js|jsx)$/,
-            include: [
-              resolvePath('src'),
-              ${templateIf(
-                framework === 'svelte',
-                () => `
-              resolvePath('node_modules/svelte'),
-              `
-              )}
-            ],
-            use: [
-              {
-                loader: require.resolve('babel-loader'),
-                ${templateIf(
-                  framework === 'react',
-                  () => `
-                options: env === 'development' ? {
-                  plugins: [
-                    require.resolve('react-refresh/babel'),
-                  ]
-                } : {}
-                `
-                )}
-              },
-            ]
-          },
-          ${templateIf(
-            framework === 'core',
-            () => `
-          {
-            test: /\\.zmp.(html|js)$/,
-            use: [
-              'babel-loader',
-              'zmp-loader',
-            ],
-          },
-          `
-          )}
-          ${templateIf(
-            framework === 'svelte',
-            () => `
-          {
-            test: /\\.svelte$/,
-            use: {
-              loader: 'svelte-loader',
-              options: {
-                emitCss: true,
-              },
-            },
-          },
-          `
-          )}
-          ${templateIf(
-            framework === 'vue',
-            () => `
-          {
-            test: /\\.vue$/,
-            use: 'vue-loader',
-          },
-          `
-          )}
-          {
-            test: /\\.css$/,
-            use: [
-              (env === 'development' ? 'style-loader' : {
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                  publicPath: '../'
-                }
-              }),
-              'css-loader',
-              'postcss-loader',
-            ],
-          },
-          {
-            test: /\\.styl(us)?$/,
-            use: [
-              (env === 'development' ? 'style-loader' : {
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                  publicPath: '../'
-                }
-              }),
-              'css-loader',
-              'postcss-loader',
-              'stylus-loader',
-            ],
-          },
-          {
-            test: /\\.less$/,
-            use: [
-              (env === 'development' ? 'style-loader' : {
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                  publicPath: '../'
-                }
-              }),
-              'css-loader',
-              'postcss-loader',
-              'less-loader',
-            ],
-          },
-          {
-            test: /\\.(sa|sc)ss$/,
-            use: [
-              (env === 'development' ? 'style-loader' : {
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                  publicPath: '../'
-                }
-              }),
-              'css-loader',
-              'postcss-loader',
-              'sass-loader',
-            ],
-          },
-          {
-            test: /\\.(png|jpe?g|gif|svg)(\\?.*)?$/,
-            loader: '${assetsLoader}',
-            options: {
-              limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'images/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
-              context: path.resolve(__dirname, '../src'),
-              `
-              )}
-            },
-            type: 'javascript/auto'
-          },
-          {
-            test: /\\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\\?.*)?$/,
-            loader: '${assetsLoader}',
-            options: {
-              limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'media/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
-              context: path.resolve(__dirname, '../src'),
-              `
-              )}
-            },
-            type: 'javascript/auto'
-          },
-          {
-            test: /\\.(woff2?|eot|ttf|otf)(\\?.*)?$/,
-            loader: '${assetsLoader}',
-            options: {
-              limit: 10000,
-              name: '${
-                preserveAssetsPaths ? '[path]' : 'fonts/'
-              }[name]${hashName}.[ext]',
-              ${templateIf(
-                preserveAssetsPaths,
-                () => `
-              context: path.resolve(__dirname, '../src'),
-              `
-              )}
-            },
-            type: 'javascript/auto'
-          },
-        ],
-      },
-      plugins: [
-        new webpack.DefinePlugin({
-          'process.env.NODE_ENV': JSON.stringify(env),
-          'process.env.TARGET': JSON.stringify(target),
-        }),
-        ${templateIf(
-          framework === 'vue',
-          () => `
-        new VueLoaderPlugin(),
-        `
-        )}
-        ...(env === 'production' ? [
-          new CssMinimizerPlugin(),
-        ] : [
-          // Development only plugins
-          new webpack.HotModuleReplacementPlugin(),
-          ${templateIf(
-            framework === 'react',
-            () => 'new ReactRefreshWebpackPlugin(),'
-          )}
-        ]),
-        new HtmlWebpackPlugin({
-          filename: './index.html',
-          template: './src/index.html',
-          inject: true,
-          minify: env === 'production' ? {
-            collapseWhitespace: true,
-            removeComments: true,
-            removeRedundantAttributes: ${
-              framework === 'core' ? 'false' : 'true'
-            },
-            removeScriptTypeAttributes: true,
-            removeStyleLinkTypeAttributes: true,
-            useShortDoctype: true
-          } : false,
-        }),
-        new MiniCssExtractPlugin({
-          filename: 'css/[name]${hashName}.css',
-        }),
-        new CopyWebpackPlugin({
-          patterns: [
-            {
-              noErrorOnMissing: true,
-              from: resolvePath('src/static'),
-              to: resolvePath('www/static'),
-            },
-            ${templateIf(
-              type.indexOf('pwa') >= 0,
-              () => `
-            {
-              noErrorOnMissing: true,
-              from: resolvePath('src/manifest.json'),
-              to: resolvePath('www/manifest.json'),
-            },
-            `
-            )}
-          ],
-        }),
-      ],
-    };
-  `
-  ).trim();
-};

package/create/templates/generate-zmp-custom.js

@@ -1,81 +0,0 @@
-const indent = require('../utils/indent');
-
-module.exports = (options) => {
-  const {
-    themes = [],
-    rtl = false,
-    lightTheme = true,
-    darkTheme = true,
-    components = [],
-  } = options.customBuildConfig || {};
-
-  const filterCharts = (comps) => {
-    return comps.filter((c) => {
-      if (c === 'gauge' || c === 'area-chart' || c === 'pie-chart')
-        return false;
-      return true;
-    });
-  };
-
-  const { framework } = options;
-
-  const componentsImportsJS = filterCharts(components).map((c) => {
-    const name = c
-      .split('-')
-      .map((word) => {
-        return word[0].toUpperCase() + word.substring(1);
-      })
-      .join('');
-    return `import ${name} from 'zmp-framework/core/components/${c}';`;
-  });
-  const componentsNamesJS = filterCharts(components).map((c) => {
-    return c
-      .split('-')
-      .map((word) => {
-        return word[0].toUpperCase() + word.substring(1);
-      })
-      .join('');
-  });
-
-  const scripts = indent(
-    0,
-    `
-    import ZMP, { request, utils, getDevice, createStore } from '${
-      framework === 'core' ? 'zmp-framework/core' : 'zmp-framework/core/lite'
-    }';
-    ${componentsImportsJS.join('\n    ')}
-
-    ZMP.use([
-      ${componentsNamesJS.join(',\n      ')}
-    ]);
-
-    export default ZMP;
-    export { request, utils, getDevice, createStore };
-  `
-  );
-
-  const componentsImportsLESS = components.map((c) => {
-    return `@import url('../../node_modules/zmp/components/${c}/${c}.less');`;
-  });
-  const styles = indent(
-    0,
-    `
-    & {
-      @import url('../../node_modules/zmp/zmp.less');
-      ${componentsImportsLESS.join('\n      ')}
-
-      @includeIosTheme: ${themes.indexOf('ios') >= 0};
-      @includeMdTheme: ${themes.indexOf('md') >= 0};
-      @includeAuroraTheme: ${themes.indexOf('aurora') >= 0};
-      @includeDarkTheme: ${darkTheme || false};
-      @includeLightTheme: ${lightTheme || false};
-      @rtl: ${rtl}
-    }
-  `
-  );
-
-  return {
-    styles,
-    scripts,
-  };
-};

package/create/templates/react/babel.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-react',
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-      },
-    ],
-  ],
-  plugins: ['@babel/plugin-transform-runtime'],
-};

package/create/templates/react/components/app-items.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Icon, Grid, GridItem, ToastPreloader } from 'zmp-framework/react';
-
-const AppItems = () => {
-  const [toastLoading, setToastLoading] = React.useState(false);
-  const items = [
-    { icon: 'zi-chat-solid', label: 'Chat' },
-    { icon: 'zi-photo-solid', label: 'Photo' },
-    { icon: 'zi-star-solid', label: 'Star' },
-    { icon: 'zi-more-diamond-solid', label: 'Apps' },
-    { icon: 'zi-video-solid', label: 'Video' },
-    { icon: 'zi-shield-solid', label: 'Shield' },
-    { icon: 'zi-heart-solid', label: 'Heart' },
-    { icon: 'zi-calendar-solid', label: 'Calendar' },
-  ]
-
-  const openToastLoading = () => {
-    setToastLoading(true);
-    setTimeout(() => {
-      setToastLoading(false);
-    }, 2000);
-  };
-
-  return (
-    <div>
-      <ToastPreloader visible={toastLoading} text="Loading..." />
-      <Grid columns={4}>
-        {items.map(item => (
-          <GridItem
-            label={item.label}
-            style={{ backgroundColor: 'var(--zmp-color-w300)' }}
-            key={item.icon}
-            icon={<Icon zmp={item.icon} />}
-            onClick={openToastLoading}
-          />
-        ))}
-      </Grid>
-    </div>
-  )
-}
-
-AppItems.displayName = 'zmp-app-items'
-
-export default AppItems

package/create/templates/react/components/navbar-back.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link, Navbar, NavLeft, Icon, NavTitle, NavRight } from 'zmp-framework/react';
-
-const NavbarBack = ({ title, linkRight, labelRight }) => {
-  return (
-    <Navbar>
-      <NavLeft displayName="zmp-navleft">
-        <Link className="no-ripple" noLinkClass back>
-          <Icon zmp="zi-arrow-left" />
-        </Link>
-      </NavLeft>
-      <NavTitle>{title}</NavTitle>
-      {linkRight && labelRight && (
-        <NavRight>
-          <Link href={linkRight} className="no-ripple" noLinkClass>{labelRight}</Link>
-        </NavRight>
-      )}
-    </Navbar>
-  )
-}
-
-NavbarBack.displayName = 'zmp-navbar';
-
-
-export default NavbarBack;