zmp-cli 3.8.3 → 3.9.1

package/create/templates/core/dist/generate-routes.dev.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-module.exports = function (options) {
-  var bundler = options.bundler,
-      template = options.template;
-  var routes;
-
-  if (template === 'blank') {
-    if (bundler === 'webpack') {
-      routes = indent(0, "\n        import HomePage from './pages/home.zmp.html';\n\n        var routes = [\n          {\n            path: '/',\n            component: HomePage,\n          },\n        ];\n      ");
-    } else {
-      routes = indent(0, "\n        var routes = [\n          {\n            path: '/',\n            url: './index.html',\n          },\n        ];\n      ");
-    }
-  } else if (bundler === 'webpack') {
-    routes = indent(0, "\n      import HomePage from './pages/home.zmp.html';\n      import AboutPage from './pages/about.zmp.html';\n      import FormPage from './pages/form.zmp.html';\n      ".concat(templateIf(template === 'tabs', function () {
-      return "\n      import CatalogPage from './pages/catalog.zmp.html';\n      import ProductPage from './pages/product.zmp.html';\n      import SettingsPage from './pages/settings.zmp.html';\n      ";
-    }), "\n      ").concat(templateIf(template === 'split-view', function () {
-      return "\n      import LeftPage1 from './pages/left-page-1.zmp.html';\n      import LeftPage2 from './pages/left-page-2.zmp.html';\n      ";
-    }), "\n      ").concat(templateIf(template !== 'blank', function () {
-      return "\n      import DynamicRoutePage from './pages/dynamic-route.zmp.html';\n      import NotFoundPage from './pages/404.zmp.html';\n      ";
-    }), "\n\n      var routes = [\n        {\n          path: '/',\n          component: HomePage,\n        },\n        {\n          path: '/about/',\n          component: AboutPage,\n        },\n        {\n          path: '/form/',\n          component: FormPage,\n        },\n        ").concat(templateIf(template === 'tabs', function () {
-      return "\n        {\n          path: '/catalog/',\n          component: CatalogPage,\n        },\n        {\n          path: '/product/:id/',\n          component: ProductPage,\n        },\n        {\n          path: '/settings/',\n          component: SettingsPage,\n        },\n        ";
-    }), "\n        ").concat(templateIf(template === 'split-view', function () {
-      return "\n        {\n          path: '/left-page-1/',\n          component: LeftPage1,\n        },\n        {\n          path: '/left-page-2/',\n          component: LeftPage2,\n        },\n        ";
-    }), "\n        {\n          path: '/dynamic-route/blog/:blogId/post/:postId/',\n          component: DynamicRoutePage,\n        },\n        {\n          path: '(.*)',\n          component: NotFoundPage,\n        },\n      ];\n    "));
-  } else {
-    routes = indent(0, "\n      var routes = [\n        {\n          path: '/',\n          url: './index.html',\n        },\n        {\n          path: '/about/',\n          url: './pages/about.html',\n        },\n        {\n          path: '/form/',\n          url: './pages/form.html',\n        },\n        ".concat(templateIf(template === 'tabs', function () {
-      return "\n        {\n          path: '/catalog/',\n          componentUrl: './pages/catalog.html',\n        },\n        {\n          path: '/product/:id/',\n          componentUrl: './pages/product.html',\n        },\n        {\n          path: '/settings/',\n          url: './pages/settings.html',\n        },\n        ";
-    }), "\n        ").concat(templateIf(template === 'split-view', function () {
-      return "\n        {\n          path: '/left-page-1/',\n          url: './pages/left-page-1.html',\n        },\n        {\n          path: '/left-page-2/',\n          url: './pages/left-page-2.html',\n        },\n        ";
-    }), "\n        {\n          path: '/dynamic-route/blog/:blogId/post/:postId/',\n          componentUrl: './pages/dynamic-route.html',\n        },\n        // Default route (404 page). MUST BE THE LAST\n        {\n          path: '(.*)',\n          url: './pages/404.html',\n        },\n      ];\n    "));
-  }
-
-  if (bundler) {
-    routes += '\nexport default routes;';
-  }
-
-  return routes;
-};

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

@@ -1,40 +0,0 @@
-"use strict";
-
-var templateIf = require('../../utils/template-if');
-
-var indent = require('../../utils/indent');
-
-var appParameters = require('../app-parameters');
-
-var stylesExtension = require('../../utils/styles-extension');
-
-module.exports = function (options) {
-  var bundler = options.bundler,
-      type = options.type,
-      cssPreProcessor = options.cssPreProcessor,
-      theming = options.theming,
-      customBuild = options.customBuild,
-      template = options.template;
-  var scripts = '';
-
-  if (bundler) {
-    scripts += indent(0, "\n      import $ from 'zmp-dom';\n      ".concat(templateIf(customBuild, function () {
-      return "\n      import ZMP from './zmp-custom.js';\n      ";
-    }, function () {
-      return "\n      import ZMP from 'zmp-framework/core/bundle';\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/zmp-bundle.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      // Import Store\n      import store from '../store.js';\n\n      // Import main app component\n      import App from '../app.zmp.html';\n    "));
-  } else {
-    scripts += indent(0, "\n      var $ = Dom7;\n    ");
-  }
-
-  scripts += indent(0, "\n    var app = new ZMP({\n      ".concat(indent(6, appParameters(options)).trim(), "\n    });\n    ").concat(templateIf(!bundler && template !== 'blank', function () {
-    return "\n    // Login Screen Demo\n    $('#my-login-screen .login-button').on('click', function () {\n      var username = $('#my-login-screen [name=\"username\"]').val();\n      var password = $('#my-login-screen [name=\"password\"]').val();\n\n      // Close login screen\n      app.loginScreen.close('#my-login-screen');\n\n      // Alert username and password\n      app.dialog.alert('Username: ' + username + '<br/>Password: ' + password);\n    });\n    ";
-  }), "\n  "));
-  return scripts.trim();
-};

package/create/templates/dist/app-parameters.dev.js

@@ -1,21 +0,0 @@
-"use strict";
-
-var indent = require('../utils/indent');
-
-var templateIf = require('../utils/template-if');
-
-module.exports = function (options) {
-  var framework = options.framework,
-      pkg = options.pkg,
-      name = options.name,
-      bundler = options.bundler;
-  return indent(0, "\n    name: '".concat(name, "', // App name\n    theme: 'auto', // Automatic theme detection\n    ").concat(templateIf(framework === 'core', function () {
-    return "\n    el: '#app', // App root element\n    ";
-  }), "\n    ").concat(templateIf(framework === 'core' && bundler, function () {
-    return "\n    component: App, // App main component\n    ";
-  }), "\n    ").concat(templateIf(pkg, function () {
-    return "\n    id: '".concat(pkg, "', // App bundle ID\n    ");
-  }), "\n    // App store\n    store: store,\n    ").concat(templateIf(framework === 'core', function () {
-    return "\n    on: {\n      init: function () {\n        var zmp = this;\n      },\n    },\n    ";
-  }), "\n  ")).trim();
-};

package/create/templates/dist/copy-assets.dev.js

@@ -1,113 +0,0 @@
-"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 path = require('path');
-
-var fse = require('../../utils/fs-extra');
-
-var stylesExtension = require('../utils/styles-extension');
-
-var copyCoreAssets = require('./core/copy-assets');
-
-var copyVueAssets = require('./vue/copy-assets');
-
-var copyReactAssets = require('./react/copy-assets');
-
-var copySvelteAssets = require('./svelte/copy-assets');
-
-var generateIndex = require('./generate-index');
-
-var generateStyles = require('./generate-styles');
-
-var generateScripts = require('./generate-scripts');
-
-var generateRoutes = require('./generate-routes');
-
-var generateManifest = require('./generate-manifest');
-
-var generateServiceWorker = require('./generate-service-worker');
-
-var generateZMPCustom = require('./generate-zmp-custom');
-
-module.exports = function (options, iconFile) {
-  var cwd = options.cwd || process.cwd();
-  var framework = options.framework,
-      theming = options.theming,
-      cssPreProcessor = options.cssPreProcessor,
-      customBuild = options.customBuild;
-  var srcFolder = 'src';
-  var toCopy = [];
-  if (framework === 'core') toCopy.push.apply(toCopy, _toConsumableArray(copyCoreAssets(options)));
-  if (framework === 'vue') toCopy.push.apply(toCopy, _toConsumableArray(copyVueAssets(options)));
-  if (framework === 'react') toCopy.push.apply(toCopy, _toConsumableArray(copyReactAssets(options)));
-  if (framework === 'svelte') toCopy.push.apply(toCopy, _toConsumableArray(copySvelteAssets(options)));
-
-  if (theming.iconFonts) {
-    // Copy Icons CSS
-    toCopy.push({
-      from: path.resolve(__dirname, 'common', 'css', 'icons.css'),
-      to: path.resolve(cwd, srcFolder, 'css', 'icons.css')
-    });
-  } // Copy Main Assets
-
-
-  toCopy.push.apply(toCopy, [{
-    content: generateIndex(options),
-    to: path.resolve(cwd, 'index.html')
-  }, {
-    content: generateStyles(options),
-    to: path.resolve(cwd, srcFolder, 'css', "app.".concat(stylesExtension(cssPreProcessor)))
-  }, {
-    content: generateScripts(options),
-    to: path.resolve(cwd, srcFolder, 'app.js')
-  }]); // Copy Custom Build
-
-  if (customBuild) {
-    var customBuildAssets = generateZMPCustom(options);
-    toCopy.push.apply(toCopy, [{
-      content: customBuildAssets.styles,
-      to: path.resolve(cwd, srcFolder, 'css', 'zmp-custom.less')
-    }, {
-      content: customBuildAssets.scripts,
-      to: path.resolve(cwd, srcFolder, 'js', 'zmp-custom.js')
-    }]);
-  } // Copy PostCSS config
-
-
-  toCopy.push({
-    from: path.resolve(__dirname, 'common', 'postcss.config.js'),
-    to: path.resolve(cwd, 'postcss.config.js')
-  }); // Copy Web Images & Icons
-
-  var assetsFolder = 'static';
-  fse.readdirSync(path.resolve(__dirname, 'common', 'icons')).forEach(function (f) {
-    if (f.indexOf('.') === 0) return;
-    toCopy.push({
-      from: path.resolve(__dirname, 'common', 'icons', f),
-      to: path.resolve(cwd, srcFolder, assetsFolder, 'icons', f)
-    });
-  });
-
-  if (iconFile) {
-    fse.writeFileSync(path.resolve(cwd, 'assets-src', 'web-icon.png'), iconFile);
-    fse.writeFileSync(path.resolve(cwd, 'assets-src', 'apple-touch-icon.png'), iconFile);
-  } else {
-    toCopy.push({
-      from: path.resolve(__dirname, 'common', 'icons', '512x512.png'),
-      to: path.resolve(cwd, 'assets-src', 'web-icon.png')
-    });
-    toCopy.push({
-      from: path.resolve(__dirname, 'common', 'icons', 'apple-touch-icon.png'),
-      to: path.resolve(cwd, 'assets-src', 'apple-touch-icon.png')
-    });
-  }
-
-  return toCopy;
-};

package/create/templates/dist/create-folders.dev.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var path = require('path');
-
-var fse = require('../../utils/fs-extra');
-
-module.exports = function (options) {
-  var cwd = options.cwd || process.cwd();
-  var framework = options.framework;
-  var srcFolder = 'src';
-  var folders = ["./".concat(srcFolder), "./".concat(srcFolder, "/static"), "./".concat(srcFolder, "/css"), "./".concat(srcFolder, "/pages"), "./public", './assets-src'];
-
-  if (folders.indexOf('./www') < 0) {
-    folders.push('./www');
-  }
-
-  if (framework !== 'core') {
-    folders.push.apply(folders, ["./".concat(srcFolder, "/components")]);
-  }
-
-  folders.push("./".concat(srcFolder, "/static/icons"));
-  folders.forEach(function (f) {
-    fse.mkdirSync(path.resolve(cwd, f));
-  });
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-
-// const generateCoreRoutes = require('./core/generate-routes');
-// const generateVueRoutes = require('./vue/generate-routes');
-var generateReactRoutes = require('./react/generate-routes'); // const generateSvelteRoutes = require('./svelte/generate-routes');
-
-
-module.exports = function (options) {
-  var framework = options.framework; // if (framework === 'core') return generateCoreRoutes(options);
-  // if (framework === 'vue') return generateVueRoutes(options);
-
-  if (framework === 'react') return generateReactRoutes(options); // if (framework === 'svelte') return generateSvelteRoutes(options);
-
-  return [];
-};

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

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

package/create/templates/react/dist/copy-assets.dev.js

@@ -1,64 +0,0 @@
-"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 path = require('path');
-
-var generateHomePage = require('./generate-home-page');
-
-var generateRoot = require('./generate-root');
-
-var generateStore = require('../generate-store');
-
-module.exports = function (options) {
-  var cwd = options.cwd || process.cwd();
-  var template = options.template;
-  var toCopy = []; // Copy Pages
-
-  var pages = [];
-  if (template !== 'blank') pages.push.apply(pages, ['404', 'about', 'dynamic-route', 'user', 'form']);
-  if (template === 'tabs') pages.push.apply(pages, ['catalog', 'product', 'settings']);
-  if (template === 'split-view') pages.push.apply(pages, ['left-page-1', 'left-page-2']);
-  pages.forEach(function (p) {
-    var src = path.resolve(__dirname, 'pages', "".concat(p, ".jsx"));
-    var dest = path.resolve(cwd, 'src', 'pages', "".concat(p, ".jsx"));
-    toCopy.push({
-      from: src,
-      to: dest
-    });
-  });
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'index.jsx')
-  }); // Copy compoents
-
-  var components = _toConsumableArray(template !== 'blank' ? ['app-items', 'navbar-back', 'user-card'] : []);
-
-  components.forEach(function (name) {
-    var src = path.resolve(__dirname, 'components', "".concat(name, ".jsx"));
-    var dest = path.resolve(cwd, 'src', 'components', "".concat(name, ".jsx"));
-    toCopy.push({
-      from: src,
-      to: dest
-    });
-  });
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.jsx')
-  });
-  toCopy.push({
-    content: generateStore(options),
-    to: path.resolve(cwd, 'src', 'store.js')
-  });
-  toCopy.push({
-    from: path.resolve(__dirname, 'vite.config.js'),
-    to: path.resolve(cwd, 'vite.config.js')
-  });
-  return toCopy;
-};

package/create/templates/react/dist/generate-home-page.dev.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var indent = require('../../utils/indent');
-
-module.exports = function (options) {
-  var name = options.name,
-      template = options.template;
-  var description = '';
-
-  if (template === 'single-view' || template === 'blank') {
-    description = "\n          <p>Here is your blank ZMP app. Let's see what we have here.</p>\n    ";
-  }
-
-  if (template === 'split-view') {
-    description = "\n          <p>This is an example of split view application layout, commonly used on tablets. The main approach of such kind of layout is that you can see different views at the same time.</p>\n\n          <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>\n\n          <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using \"data-view\" attribute on links.</p>\n    ";
-  }
-
-  if (template === 'tabs') {
-    description = "\n          <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>\n\n          <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>\n    ";
-  }
-
-  return indent(0, "\n    import React from 'react';\n    ".concat(template === 'blank' ? "\n    import {\n      Page,\n      Navbar,\n      NavTitleLarge,\n      Card\n    } from 'zmp-framework/react';\n    ".trim() : "\n    import {\n      Page,\n      Navbar,\n      NavTitleLarge,\n      List,\n      ListItem,\n      useStore,\n      Card,\n    } from 'zmp-framework/react';\n    import AppItems from '../components/app-items';\n    import UserCard from '../components/user-card';\n    ".trim(), "\n\n    const HomePage = () => {\n      ").concat(template !== 'blank' ? "const user = useStore('user');" : '', "\n      return (\n        <Page name=\"home\" navbarLarge>\n          {/* Top Navbar */}\n          <Navbar transparent>\n            <NavTitleLarge>").concat(name, "</NavTitleLarge>\n          </Navbar>\n          {/* Page content */}\n          <Card inset>\n            ").concat(description.trim(), "\n          </Card>\n          ").concat(template !== 'blank' ? "\n          {/* User info */}\n          <List>\n            <ListItem link=\"/user/\">\n              <UserCard user={user} />\n            </ListItem>\n          </List>\n\n          {/* Grid apps */}\n          <AppItems />\n\n          {/* Route */}\n          <List>\n            <ListItem title=\"Dynamic (Component) Route\" link=\"/dynamic-route/?blog=45&post=125&foo=bar\" />\n            <ListItem title=\"Default Route (404)\" link=\"/something-that-doesnt-exist\" />\n            <ListItem title=\"About\" link=\"/about/\" />\n          </List>\n          ".trim() : '', "\n        </Page>\n      );\n    }\n    export default HomePage;\n  ")).trim();
-};

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

@@ -1,33 +0,0 @@
-"use strict";
-
-var indent = require('../../utils/indent');
-
-var templateIf = require('../../utils/template-if');
-
-var appParameters = require('../app-parameters');
-
-module.exports = function (options) {
-  var template = options.template,
-      theming = options.theming; // Panels
-
-  var leftPanelPlain = indent(12, "\n    {/* Left panel with cover effect*/}\n    <Panel left cover themeDark>\n      <View>\n        <Page>\n          <Navbar title=\"Left Panel\"/>\n          <Block>Left panel content goes here</Block>\n        </Page>\n      </View>\n    </Panel>\n  ");
-  var leftPanelWithView = indent(12, "\n    {/* Left panel with cover effect when hidden */}\n    <Panel left cover themeDark visibleBreakpoint={960}>\n      <View>\n        <Page>\n          <Navbar title=\"Left Panel\"/>\n          <BlockTitle>Left View Navigation</BlockTitle>\n          <List>\n            <ListItem link=\"/left-page-1/\" title=\"Left Page 1\"/>\n            <ListItem link=\"/left-page-2/\" title=\"Left Page 2\"/>\n          </List>\n          <BlockTitle>Control Main View</BlockTitle>\n          <List>\n            <ListItem link=\"/about/\" view=\".view-main\" panelClose title=\"About\"/>\n            <ListItem link=\"/form/\" view=\".view-main\" panelClose title=\"Form\"/>\n            <ListItem link=\"#\" view=\".view-main\" back panelClose title=\"Back in history\"/>\n          </List>\n        </Page>\n      </View>\n    </Panel>\n  ");
-  var leftPanel = template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  var rightPanel = indent(12, "\n    {/* Right panel with reveal effect*/}\n    <Panel right reveal themeDark>\n      <View>\n        <Page>\n          <Navbar title=\"Right Panel\"/>\n          <Block>Right panel content goes here</Block>\n        </Page>\n      </View>\n    </Panel>\n  "); // Views
-
-  var views = '';
-
-  if (template === 'single-view' || template === 'split-view' || template === 'blank') {
-    views = indent(12, "\n      {/* Your main view, should have \"view-main\" class */}\n      <View main className=\"safe-areas\" url=\"/\" />\n    ");
-  }
-
-  if (template === 'tabs') {
-    views = indent(12, "\n      {/* Views/Tabs container */}\n      <Views tabs className=\"safe-areas\">\n        {/* Tabbar for switching views-tabs */}\n        <Toolbar tabbar labels bottom>\n          <Link tabLink=\"#view-home\" tabLinkActive iconIos=\"zmp:house_fill\" iconAurora=\"zmp:house_fill\" iconMd=\"material:home\" text=\"Home\" />\n          <Link tabLink=\"#view-catalog\" iconIos=\"zmp:square_list_fill\" iconAurora=\"zmp:square_list_fill\" iconMd=\"material:view_list\" text=\"Catalog\" />\n          <Link tabLink=\"#view-settings\" iconIos=\"zmp:gear\" iconAurora=\"zmp:gear\" iconMd=\"material:settings\" text=\"Settings\" />\n        </Toolbar>\n\n        {/* Your main view/tab, should have \"view-main\" class. It also has \"tabActive\" prop */}\n        <View id=\"view-home\" main tab tabActive url=\"/\" />\n\n        {/* Catalog View */}\n        <View id=\"view-catalog\" name=\"catalog\" tab url=\"/catalog/\" />\n\n        {/* Settings View */}\n        <View id=\"view-settings\" name=\"settings\" tab url=\"/settings/\" />\n\n      </Views>\n    ");
-  }
-
-  return indent(0, "\n    import React, { useState, useEffect } from 'react';\n    ".concat(['blank', 'single-view'].indexOf(template) >= 0 ? "\n    import {\n      zmp,\n      zmpready,\n      App,\n      View,\n    } from 'zmp-framework/react';\n    ".trim() : "\n    import {\n      zmp,\n      zmpready,\n      App,\n      Panel,\n      Views,\n      View,\n      Popup,\n      Page,\n      Navbar,\n      Toolbar,\n      NavRight,\n      Link,\n      Block,\n      BlockTitle,\n      LoginScreen,\n      LoginScreenTitle,\n      List,\n      ListItem,\n      ListInput,\n      ListButton,\n      BlockFooter\n    } from 'zmp-framework/react';\n    ".trim(), "\n    import store from '../store';\n\n    const MyApp = () => {\n      ").concat(templateIf(['blank', 'single-view'].indexOf(template) === -1, function () {
-    return "\n      // Login screen demo data\n      const [username, setUsername] = useState('');\n      const [password, setPassword] = useState('');\n      ";
-  }), "\n      // ZMP Parameters\n      const zmpparams = {\n        ").concat(indent(10, appParameters(options)).trim(), "\n      };\n      ").concat(templateIf(['blank', 'single-view'].indexOf(template) === -1, function () {
-    return "\n      const alertLoginData = () => {\n        zmp.dialog.alert('Username: ' + username + '<br>Password: ' + password, () => {\n          zmp.loginScreen.close();\n        });\n      }\n      ";
-  }), "\n      zmpready(() => {\n        // Call ZMP APIs here\n      });\n\n      ").concat(['blank', 'single-view'].indexOf(template) !== -1 ? "\n      return (\n        <App { ...zmpparams } ".concat(theming.darkTheme ? 'themeDark' : '', ">\n          ").concat(views, "\n        </App>\n      );\n      ").trim() : "\n      return (\n        <App { ...zmpparams } ".concat(theming.darkTheme ? 'themeDark' : '', ">\n          ").concat(leftPanel, "\n          ").concat(rightPanel, "\n          ").concat(views, "\n          {/* Popup */}\n          <Popup id=\"my-popup\">\n            <View>\n              <Page>\n                <Navbar title=\"Popup\">\n                  <NavRight>\n                    <Link popupClose>Close</Link>\n                  </NavRight>\n                </Navbar>\n                <Block>\n                  <p>Popup content goes here.</p>\n                </Block>\n              </Page>\n            </View>\n          </Popup>\n\n          <LoginScreen id=\"my-login-screen\">\n            <View>\n              <Page loginScreen>\n                <LoginScreenTitle>Login</LoginScreenTitle>\n                <List form>\n                  <ListInput\n                    type=\"text\"\n                    name=\"username\"\n                    placeholder=\"Your username\"\n                    value={username}\n                    onInput={(e) => setUsername(e.target.value)}\n                  ></ListInput>\n                  <ListInput\n                    type=\"password\"\n                    name=\"password\"\n                    placeholder=\"Your password\"\n                    value={password}\n                    onInput={(e) => setPassword(e.target.value)}\n                  ></ListInput>\n                </List>\n                <List>\n                  <ListButton title=\"Sign In\" onClick={() => alertLoginData()} />\n                  <BlockFooter>\n                    Some text about login information.<br />Click \"Sign In\" to close Login Screen\n                  </BlockFooter>\n                </List>\n              </Page>\n            </View>\n          </LoginScreen>\n        </App>\n      )\n      ").trim(), "\n    }\n    export default MyApp;\n  ")).trim();
-};

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

@@ -1,20 +0,0 @@
-"use strict";
-
-module.exports = function (options) {
-  var template = options.template;
-
-  if (template === 'blank') {
-    return [];
-  } // Webpack Routes
-
-
-  var routes = ['/user', '/form', '/dynamic-route', '/about', '/404'];
-
-  if (template === 'tabs') {
-    routes.push.apply(routes, ['/catalog', '/product', '/settings']);
-  } else if (template === 'split-view') {
-    routes.push.apply(routes, ['/left-page-1', '/left-page-2']);
-  }
-
-  return routes;
-};

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

@@ -1,22 +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;
-  var scripts = '';
-  scripts += indent(0, "\n    // Import React and ReactDOM\n    import React from 'react';\n    import ReactDOM from 'react-dom';\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';\n\n    // Import ZMP Styles\n    ").concat(templateIf(customBuild, function () {
-    return "\n    import './css/zmp-custom.less';\n    ";
-  }, function () {
-    return "\n    import 'zmp-framework/zmp-bundle.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    ReactDOM.render(\n      React.createElement(App),\n      document.getElementById('app'),\n    );\n  "));
-  return scripts.trim();
-};

package/create/templates/react/pages/404.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { Page, Card, Title, Box } from 'zmp-framework/react';
-import NavbarBack from '../components/navbar-back';
-
-const NotFoundPage = () => (
-  <Page>
-    <NavbarBack title="Not found" />
-    <Box mt={2}>
-      <Card inset>
-        <Title>Sorry</Title>
-        <p>Requested content not found.</p>
-      </Card>
-    </Box>
-  </Page>
-);
-
-export default NotFoundPage;

package/create/templates/react/pages/about.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Actions, ActionsButton, ActionsGroup, ActionsLabel, Button, Card, Page, Box } from 'zmp-framework/react';
-import NavbarBack from '../components/navbar-back';
-
-const AboutPage = (props) => {
-  const [actionSheetOpened, setActionSheetOpened] = React.useState(false);
-
-  return (
-    <Page name="about">
-      <NavbarBack title="About" />
-      <Box mt={2}>
-        <Card inset title="About My App">
-          <p>This is a demo ZMP App!</p>
-        </Card>
-      </Box>
-      <Box mb={4}>
-        <Button
-          typeName="primary"
-          responsive
-          onClick={() => setActionSheetOpened(true)}
-        >
-          Back
-        </Button>
-      </Box>
-      <Actions
-        opened={actionSheetOpened}
-        onActionsClosed={() => setActionSheetOpened(false)}
-        id="actions-two-groups"
-      >
-        <ActionsGroup>
-          <ActionsLabel>Are you sure?</ActionsLabel>
-          <ActionsButton color="blue" onClick={() => props.zmprouter.back()}>Navigate back</ActionsButton>
-        </ActionsGroup>
-        <ActionsGroup>
-          <ActionsButton>Cancel</ActionsButton>
-        </ActionsGroup>
-      </Actions>
-    </Page>
-  )
-}
-
-export default AboutPage;

package/create/templates/react/pages/catalog.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Page, Title, List, ListItem, Box, Button, useStore } from 'zmp-framework/react';
-import store from '../store'
-
-const CatalogPage = () => {
-  const products = useStore('products');
-
-  const addProduct = () => {
-    store.dispatch('addProduct', {
-      id: '4',
-      title: 'Apple iPhone 12',
-      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.'
-    });
-  }
-
-  return (
-    <Page name="catalog">
-      <Box m={0} p={4}>
-        <Title>Catalog</Title>
-        <List>
-          {products.map((product) => (
-            <ListItem
-              key={product.id}
-              title={product.title}
-              link={`/product/${product.id}/`}
-            />
-          ))}
-        </List>
-        {products.length === 3 && (
-          <Box>
-            <Button responsive typeName='secondary' onClick={addProduct}>Add Product</Button>
-          </Box>
-        )}
-      </Box>
-    </Page>
-  );
-}
-
-export default CatalogPage;