zmp-cli 3.9.0 → 3.9.1

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

@@ -2,7 +2,8 @@ const generateNpmScripts = require('./generate-npm-scripts');
 const { generateTailWindScripts } = require('./generate-npm-scripts');
 
 module.exports = function generatePackageJson(options) {
-  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } = options;
+  const { name, framework, cssPreProcessor, includeTailwind, stateManagement } =
+    options;
 
   // Dependencies
   const dependencies = ['zmp-framework', 'zmp-sdk', 'swiper'];
@@ -29,7 +30,11 @@ module.exports = function generatePackageJson(options) {
   if (framework === 'react-typescript') {
     dependencies.push(...dependenciesReactTs);
   }
-  const devDependencies = ['cross-env', 'postcss-preset-env@6.7.0', 'vite'];
+  const devDependencies = [
+    'cross-env',
+    'postcss-preset-env@6.7.0',
+    'vite@2.6.14',
+  ];
   // 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.9.0",
+  "version": "3.9.1",
   "description": "ZMP command line utility (CLI)",
   "main": "index.js",
   "bin": {
@@ -103,4 +103,4 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^5.0.0"
   }
-}
+}

package/create/templates/dist/generate-styles.dev.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var indent = require('../utils/indent');
-
-var _require = require('../utils/colors'),
-    colorThemeCSSProperties = _require.colorThemeCSSProperties;
-
-module.exports = function (options) {
-  var template = options.template,
-      theming = options.theming;
-  var customColor = theming.customColor,
-      color = theming.color,
-      fillBars = theming.fillBars;
-  var styles = '';
-  var themeRgb = [0, 122, 255];
-
-  if (customColor && color) {
-    var customProps = colorThemeCSSProperties("".concat(color));
-    themeRgb = customProps['--zmp-theme-color-rgb'].split(',').map(function (n) {
-      return n.trim();
-    });
-    styles += indent(0, "\n      /* Custom color theme properties */\n      :root {\n        ".concat(Object.keys(customProps).filter(function (prop) {
-      return prop !== '--zmp-tabbar-fill-link-active-color' && prop !== '--zmp-tabbar-fill-link-active-border-color';
-    }).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n      :root.theme-dark,:root .theme-dark {\n        ").concat(Object.keys(customProps).map(function (prop) {
-      return "".concat(prop, ": ").concat(customProps[prop], ";");
-    }).join('\n        '), "\n      }\n    "));
-  }
-
-  if (fillBars) {
-    styles += indent(0, "\n      /* Invert navigation bars to fill style */\n    ");
-  }
-
-  if (includeTailwind) {
-    styles += indent(0, "\n      @import \"./tailwind.css\";\n      ");
-  }
-
-  if (template === 'split-view') {
-    styles += indent(0, "\n      /* Left Panel right border when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint:before {\n        position: absolute;\n        right: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n\n      /* Hide navbar link which opens left panel when it is visible by breakpoint */\n      .panel-left.panel-in-breakpoint ~ .view .navbar .panel-open[data-panel=\"left\"] {\n        display: none;\n      }\n\n      /*\n        Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)\n      */\n      .ios .panel-left:not(.panel-in-breakpoint).panel-in ~ .view-main:before,\n      .ios .panel-left:not(.panel-in-breakpoint).panel-closing ~ .view-main:before {\n        position: absolute;\n        left: 0;\n        top: 0;\n        height: 100%;\n        width: 1px;\n        background: rgba(0,0,0,0.1);\n        content: '';\n        z-index: 6000;\n      }\n    ");
-  } else {
-    styles += indent(0, "\n      /* Your app custom styles here */\n    ");
-  }
-
-  return styles.trim();
-};

package/create/templates/react/dist/generate-scripts.dev.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-var stylesExtension = require('../../utils/styles-extension');
-
-module.exports = function (options) {
-  var cssPreProcessor = options.cssPreProcessor,
-      theming = options.theming,
-      customBuild = options.customBuild,
-      includeTailwind = options.includeTailwind;
-  var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
-    return "\n    import './css/zmp-custom.less';\n    ";
-  }, function () {
-    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
-  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
-    return "\n    import './css/icons.css';\n    ";
-  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app.jsx';\n    import appConfig from '../app-config.json';\n\n    if (!window.APP_CONFIG) {\n      window.APP_CONFIG = appConfig;\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app'));\n    root.render(React.createElement(App));\n  "));
-  return scripts.trim();
-};

package/create/templates/react-typescript/dist/generate-scripts.dev.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-var stylesExtension = require('../../utils/styles-extension');
-
-module.exports = function (options) {
-  var cssPreProcessor = options.cssPreProcessor,
-      theming = options.theming,
-      customBuild = options.customBuild,
-      includeTailwind = options.includeTailwind;
-  var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import { createRoot } from 'react-dom/client';\n\n    // Import ZMP\n    import ZMP from '".concat(customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle', "';\n\n    // Import ZMP-React Plugin\n    import ZMPReact from 'zmp-framework/react';").concat(includeTailwind ? "\n\n    // Import tailwind styles\n    import './css/tailwind.css';\n    " : '', "\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
-    return "\n    import './css/zmp-custom.less';\n    ";
-  }, function () {
-    return "\n    import 'zmp-framework/".concat(theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css', "';\n    ");
-  }), "\n\n    // Import Icons and App Custom Styles\n    ").concat(templateIf(theming.iconFonts, function () {
-    return "\n    import './css/icons.css';\n    ";
-  }), "\n    import './css/app.").concat(stylesExtension(cssPreProcessor), "';\n\n    // Import App Component\n    import App from './components/app';\n    import appConfig from '../app-config.json';\n\n    if (!(window as any).APP_CONFIG) {\n      (window as any).APP_CONFIG = appConfig\n    }\n\n    // Init ZMP React Plugin\n    ZMP.use(ZMPReact)\n\n    // Mount React App\n    const root = createRoot(document.getElementById('app')!);\n    root.render(React.createElement(App));\n  "));
-  return scripts.trim();
-};