zmp-cli 3.15.5 → 3.15.6-beta.1

package/create/templates/core/generate-home-page.js

@@ -1,50 +1,29 @@
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    name,
-    template,
-  } = options;
-
-  const isBlank = template === 'blank';
-
-  let description;
-  if (template === 'single-view' || template === 'blank') {
-    description = `
+"use strict";const i=require("../../utils/indent");module.exports=a=>{let t;let{name:l,template:e}=a;return("single-view"===e||"blank"===e)&&(t=`
           <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
+    `),"split-view"===e&&(t=`
           <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>
 
           <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
 
           <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>
-    `;
-  }
-  if (template === 'tabs') {
-    description = `
+    `),"tabs"===e&&(t=`
           <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>
 
           <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
-    `;
-  }
-
-  return indent(0, `
+    `),i(0,`
     <div class="page" data-name="home">
       <!-- Top Navbar -->
-      ${template === 'blank' ? `
+      ${"blank"===e?`
       <div class="navbar navbar-large">
         <div class="navbar-bg"></div>
         <div class="navbar-inner sliding">
-          <div class="title">${name}</div>
+          <div class="title">${l}</div>
           <div class="title-large">
-            <div class="title-large-text">${name}</div>
+            <div class="title-large-text">${l}</div>
           </div>
         </div>
       </div>
-      `.trim() : `
+      `.trim():`
       <div class="navbar navbar-large">
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
@@ -54,7 +33,7 @@ module.exports = (options) => {
               <i class="icon material-icons if-md">menu</i>
             </a>
           </div>
-          <div class="title sliding">${name}</div>
+          <div class="title sliding">${l}</div>
           <div class="right">
             <a href="#" class="link icon-only panel-open" data-panel="right">
               <i class="icon zmp-icons if-not-md">menu</i>
@@ -62,12 +41,12 @@ module.exports = (options) => {
             </a>
           </div>
           <div class="title-large">
-            <div class="title-large-text">${name}</div>
+            <div class="title-large-text">${l}</div>
           </div>
         </div>
       </div>
       `.trim()}
-      ${template !== 'tabs' ? `
+      ${"tabs"!==e?`
       <!-- Toolbar-->
       <div class="toolbar toolbar-bottom">
         <div class="toolbar-inner">
@@ -75,13 +54,13 @@ module.exports = (options) => {
           <a href="#" class="link">Right Link</a>
         </div>
       </div>
-      `.trim() : ''}
+      `.trim():""}
       <!-- Scrollable page content-->
       <div class="page-content">
         <div class="block block-strong">
-          ${description.trim()}
+          ${t.trim()}
         </div>
-        ${!isBlank ? `
+        ${"blank"===e?"":`
         <div class="block-title">Navigation</div>
         <div class="list">
           <ul>
@@ -136,8 +115,7 @@ module.exports = (options) => {
             </li>
           </ul>
         </div>
-        `.trim() : ''}
+        `.trim()}
       </div>
     </div>
-  `).trim();
-};
+  `).trim()};

package/create/templates/core/generate-root.js

@@ -1,15 +1,4 @@
-const generateHomePage = require('./generate-home-page');
-const indent = require('../../utils/indent');
-const templateIf = require('../../utils/template-if');
-
-module.exports = (options) => {
-  const {
-    template,
-    bundler,
-  } = options;
-
-  // Panels
-  const leftPanelPlain = `
+"use strict";const i=require("./generate-home-page"),a=require("../../utils/indent"),e=require("../../utils/template-if");module.exports=s=>{let{template:l,bundler:t}=s,n=`
     <!-- Left panel with cover effect-->
     <div class="panel panel-left panel-cover theme-dark panel-init">
       <div class="view">
@@ -26,9 +15,7 @@ module.exports = (options) => {
         </div>
       </div>
     </div>
-  `.trim();
-
-  const leftPanelWithView = `
+  `.trim(),v=`
     <!-- Left panel with cover effect -->
     <div class="panel panel-left panel-cover theme-dark panel-init" data-visible-breakpoint="960">
       <div class="view view-init" data-name="left">
@@ -65,9 +52,7 @@ module.exports = (options) => {
         </div>
       </div>
     </div>
-  `;
-  const leftPanel = template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  const rightPanel = `
+  `,d=`
     <!-- Right panel with reveal effect-->
     <div class="panel panel-right panel-reveal theme-dark">
       <div class="view">
@@ -84,24 +69,16 @@ module.exports = (options) => {
         </div>
       </div>
     </div>
-  `.trim();
-
-  // Views
-  let views = '';
-  if (template === 'single-view' || template === 'split-view' || template === 'blank') {
-    views = indent(4, `
+  `.trim(),c="";("single-view"===l||"split-view"===l||"blank"===l)&&(c=a(4,`
       <!-- Your main view, should have "view-main" class -->
-      ${templateIf(bundler === 'webpack', () => `
+      ${e("webpack"===t,()=>`
       <div class="view view-main view-init safe-areas" data-url="/"></div>
-      `, () => `
+      `,()=>`
       <div class="view view-main view-init safe-areas">
-        ${indent(8, generateHomePage(options)).trim()}
+        ${a(8,i(s)).trim()}
       </div>
       `)}
-    `);
-  }
-  if (template === 'tabs') {
-    views = indent(4, `
+    `)),"tabs"===l&&(c=a(4,`
     <!-- Views/Tabs container -->
     <div class="views tabs safe-areas">
       <!-- Tabbar for switching views-tabs -->
@@ -126,13 +103,13 @@ module.exports = (options) => {
       </div>
 
       <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
-      ${templateIf(bundler === 'webpack', () => `
+      ${e("webpack"===t,()=>`
       <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
         <!-- Home page will be loaded here dynamically from / route -->
       </div>
-      `, () => `
+      `,()=>`
       <div id="view-home" class="view view-main view-init tab tab-active">
-        ${indent(8, generateHomePage(options)).trim()}
+        ${a(8,i(s)).trim()}
       </div>
       `)}
 
@@ -146,15 +123,12 @@ module.exports = (options) => {
         <!-- Settings page will be loaded here dynamically from /settings/ route -->
       </div>
     </div>
-    `);
-  }
-
-  const htmlTemplate = template === 'blank' ? `
-    ${views}
-  ` : `
-    ${leftPanel}
-    ${rightPanel}
-    ${views}
+    `));let r="blank"===l?`
+    ${c}
+  `:`
+    ${"split-view"===l?v:n}
+    ${d}
+    ${c}
 
     <!-- Popup -->
     <div class="popup" id="my-popup">
@@ -190,10 +164,10 @@ module.exports = (options) => {
                   <div class="item-inner">
                     <div class="item-title item-label">Username</div>
                     <div class="item-input-wrap">
-                      ${templateIf(bundler, () => `
+                      ${e(t,()=>`
                         <input type="text" name="username" placeholder="Your username" value="\${username}" @input="\${updateUsername}"/>
                       `)}
-                      ${templateIf(!bundler, () => `
+                      ${e(!t,()=>`
                         <input type="text" name="username" placeholder="Your username"/>
                       `)}
                     </div>
@@ -203,10 +177,10 @@ module.exports = (options) => {
                   <div class="item-inner">
                     <div class="item-title item-label">Password</div>
                     <div class="item-input-wrap">
-                      ${templateIf(bundler, () => `
+                      ${e(t,()=>`
                         <input type="password" name="password" placeholder="Your password" value="\${password}" @input="\${updatePassword}"/>
                       `)}
-                      ${templateIf(!bundler, () => `
+                      ${e(!t,()=>`
                         <input type="password" name="password" placeholder="Your password"/>
                       `)}
                     </div>
@@ -217,10 +191,10 @@ module.exports = (options) => {
             <div class="list">
               <ul>
                 <li>
-                  ${templateIf(bundler, () => `
+                  ${e(t,()=>`
                   <a href="#" class="item-link list-button login-button" @click="\${alertLoginData}">Sign In</a>
                   `)}
-                  ${templateIf(!bundler, () => `
+                  ${e(!t,()=>`
                   <a href="#" class="item-link list-button login-button">Sign In</a>
                   `)}
                 </li>
@@ -231,14 +205,10 @@ module.exports = (options) => {
         </div>
       </div>
     </div>
-  `;
-
-  if (bundler === 'webpack') {
-    if (template === 'blank') {
-      return indent(0, `
+  `;return"webpack"===t?"blank"===l?a(0,`
         <template>
           <div id="app">
-            ${indent(10, views)}
+            ${a(10,c)}
           </div>
         </template>
         <script>
@@ -246,12 +216,10 @@ module.exports = (options) => {
             return $render;
           }
         </script>
-      `);
-    }
-    return indent(0, `
+      `):a(0,`
       <template>
         <div id="app">
-          ${indent(10, htmlTemplate)}
+          ${a(10,r)}
         </div>
       </template>
       <script>
@@ -277,7 +245,4 @@ module.exports = (options) => {
           return $render;
         }
       </script>
-    `);
-  }
-  return htmlTemplate;
-};
+    `):r};

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

@@ -1,15 +1,4 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    bundler, template,
-  } = options;
-
-  let routes;
-  if (template === 'blank') {
-    if (bundler === 'webpack') {
-      routes = indent(0, `
+"use strict";const t=require("../../utils/template-if"),e=require("../../utils/indent");module.exports=a=>{let o;let{bundler:p,template:m}=a;return o="blank"===m?"webpack"===p?e(0,`
         import HomePage from './pages/home.zmp.html';
 
         var routes = [
@@ -18,32 +7,27 @@ module.exports = (options) => {
             component: HomePage,
           },
         ];
-      `);
-    } else {
-      routes = indent(0, `
+      `):e(0,`
         var routes = [
           {
             path: '/',
             url: './index.html',
           },
         ];
-      `);
-    }
-  } else if (bundler === 'webpack') {
-    routes = indent(0, `
+      `):"webpack"===p?e(0,`
       import HomePage from './pages/home.zmp.html';
       import AboutPage from './pages/about.zmp.html';
       import FormPage from './pages/form.zmp.html';
-      ${templateIf(template === 'tabs', () => `
+      ${t("tabs"===m,()=>`
       import CatalogPage from './pages/catalog.zmp.html';
       import ProductPage from './pages/product.zmp.html';
       import SettingsPage from './pages/settings.zmp.html';
       `)}
-      ${templateIf(template === 'split-view', () => `
+      ${t("split-view"===m,()=>`
       import LeftPage1 from './pages/left-page-1.zmp.html';
       import LeftPage2 from './pages/left-page-2.zmp.html';
       `)}
-      ${templateIf(template !== 'blank', () => `
+      ${t("blank"!==m,()=>`
       import DynamicRoutePage from './pages/dynamic-route.zmp.html';
       import NotFoundPage from './pages/404.zmp.html';
       `)}
@@ -61,7 +45,7 @@ module.exports = (options) => {
           path: '/form/',
           component: FormPage,
         },
-        ${templateIf(template === 'tabs', () => `
+        ${t("tabs"===m,()=>`
         {
           path: '/catalog/',
           component: CatalogPage,
@@ -75,7 +59,7 @@ module.exports = (options) => {
           component: SettingsPage,
         },
         `)}
-        ${templateIf(template === 'split-view', () => `
+        ${t("split-view"===m,()=>`
         {
           path: '/left-page-1/',
           component: LeftPage1,
@@ -94,9 +78,7 @@ module.exports = (options) => {
           component: NotFoundPage,
         },
       ];
-    `);
-  } else {
-    routes = indent(0, `
+    `):e(0,`
       var routes = [
         {
           path: '/',
@@ -110,7 +92,7 @@ module.exports = (options) => {
           path: '/form/',
           url: './pages/form.html',
         },
-        ${templateIf(template === 'tabs', () => `
+        ${t("tabs"===m,()=>`
         {
           path: '/catalog/',
           componentUrl: './pages/catalog.html',
@@ -124,7 +106,7 @@ module.exports = (options) => {
           url: './pages/settings.html',
         },
         `)}
-        ${templateIf(template === 'split-view', () => `
+        ${t("split-view"===m,()=>`
         {
           path: '/left-page-1/',
           url: './pages/left-page-1.html',
@@ -144,12 +126,4 @@ module.exports = (options) => {
           url: './pages/404.html',
         },
       ];
-    `);
-  }
-
-  if (bundler) {
-    routes += '\nexport default routes;';
-  }
-
-  return routes;
-};
+    `),p&&(o+="\nexport default routes;"),o};

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

@@ -1,79 +1,35 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const appParameters = require('../app-parameters');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const {
-    bundler,
-    type,
-    cssPreProcessor,
-    theming,
-    customBuild,
-    template,
-  } = options;
-
-  let scripts = '';
-
-  if (bundler) {
-    scripts += indent(
-      0,
-      `
+"use strict";const r=require("../../utils/template-if"),e=require("../../utils/indent"),o=require("../app-parameters"),s=require("../../utils/styles-extension");module.exports=m=>{let{bundler:n,type:p,cssPreProcessor:t,theming:i,customBuild:a,template:l}=m,c="";return n?c+=e(0,`
       import $ from 'zmp-dom';
-      ${templateIf(
-        customBuild,
-        () => `
+      ${r(a,()=>`
       import ZMP from './zmp-custom.js';
-      `,
-        () => `
+      `,()=>`
       import ZMP from 'zmp-framework/core/bundle';
-      `
-      )}
+      `)}
 
       // Import ZMP Styles
-      ${templateIf(
-        customBuild,
-        () => `
+      ${r(a,()=>`
       import '../css/zmp-custom.less';
-      `,
-        () => `
+      `,()=>`
       import 'zmp-framework/zmp-bundle.min.css';
-      `
-      )}
+      `)}
 
       // Import Icons and App Custom Styles
-      ${templateIf(
-        theming.iconFonts,
-        () => `
+      ${r(i.iconFonts,()=>`
       import '../css/icons.css';
-      `
-      )}
-      import '../css/app.${stylesExtension(cssPreProcessor)}';
+      `)}
+      import '../css/app.${s(t)}';
       // Import Store
       import store from '../store.js';
 
       // Import main app component
       import App from '../app.zmp.html';
-    `
-    );
-  } else {
-    scripts += indent(
-      0,
-      `
+    `):c+=e(0,`
       var $ = Dom7;
-    `
-    );
-  }
-
-  scripts += indent(
-    0,
-    `
+    `),(c+=e(0,`
     var app = new ZMP({
-      ${indent(6, appParameters(options)).trim()}
+      ${e(6,o(m)).trim()}
     });
-    ${templateIf(
-      !bundler && template !== 'blank',
-      () => `
+    ${r(!n&&"blank"!==l,()=>`
     // Login Screen Demo
     $('#my-login-screen .login-button').on('click', function () {
       var username = $('#my-login-screen [name="username"]').val();
@@ -85,10 +41,5 @@ module.exports = (options) => {
       // Alert username and password
       app.dialog.alert('Username: ' + username + '<br/>Password: ' + password);
     });
-    `
-    )}
-  `
-  );
-
-  return scripts.trim();
-};
+    `)}
+  `)).trim()};

package/create/templates/create-folders.js

@@ -1,30 +1 @@
-const path = require('path');
-const fse = require('../../utils/fs-extra');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { framework } = options;
-
-  const srcFolder = 'src';
-
-  const folders = [
-    `./${srcFolder}`,
-    `./${srcFolder}/static`,
-    `./${srcFolder}/css`,
-    `./${srcFolder}/pages`,
-    `./public`,
-    './assets-src',
-  ];
-  if (folders.indexOf('./www') < 0) {
-    folders.push('./www');
-  }
-  if (framework !== 'core') {
-    folders.push(...[`./${srcFolder}/components`]);
-  }
-
-  folders.push(`./${srcFolder}/static/icons`);
-
-  folders.forEach((f) => {
-    fse.mkdirSync(path.resolve(cwd, f));
-  });
-};
+"use strict";const s=require("path"),c=require("../../utils/fs-extra");module.exports=r=>{let e=r.cwd||process.cwd(),{framework:t}=r,i=["./src","./src/static","./src/css","./src/pages","./public","./assets-src"];0>i.indexOf("./www")&&i.push("./www"),"core"!==t&&i.push("./src/components"),i.push("./src/static/icons"),i.forEach(r=>{c.mkdirSync(s.resolve(e,r))})};

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

@@ -1,9 +1,4 @@
-const indent = require('../utils/indent');
-
-module.exports = () => {
-  return indent(
-    4,
-    `
+"use strict";const e=require("../utils/indent");module.exports=()=>e(4,`
     <allow-navigation href="*" />
     <preference name="DisallowOverscroll" value="true" />
     <preference name="BackupWebStorage" value="local" />
@@ -13,6 +8,4 @@ module.exports = () => {
     <preference name="Suppresses3DTouchGesture" value="true" />
     <preference name="Allow3DTouchLinkPreview" value="false" />
     <preference name="AllowInlineMediaPlayback" value="true" />
-  `
-  );
-};
+  `);

package/create/templates/generate-index.js

@@ -1,28 +1,8 @@
-/* eslint curly: off */
-const { projectFramework } = require('../../utils/constants');
-const generateCoreRoot = require('./core/generate-root.js');
-
-module.exports = (options) => {
-  const { name, framework, theming } = options;
-  const srcFolder = '/src/';
-  const iconsAssetsFolder = 'static';
-
-  const rootContent = framework === 'core' ? generateCoreRoot(options) : '';
-  const scripts = `
+"use strict";const{projectFramework:e}=require("../../utils/constants"),t=require("./core/generate-root.js");module.exports=i=>{let{name:o,framework:a,theming:c}=i,n="/src/",r="core"===a?t(i):"",l=`
   <!-- built script files will be auto injected -->
-  ${
-    framework === projectFramework.REACT || framework === projectFramework.VUE
-      ? `<script type="module" src="${srcFolder}app.js"></script>`
-      : ''
-  }
-  ${
-    framework === projectFramework.REACT_TYPESCRIPT
-      ? `<script type="module" src="${srcFolder}app.ts"></script>`
-      : ''
-  }
-  `.trim();
-
-  return `
+  ${a===e.REACT||a===e.VUE?`<script type="module" src="${n}app.js"></script>`:""}
+  ${a===e.REACT_TYPESCRIPT?`<script type="module" src="${n}app.ts"></script>`:""}
+  `.trim();return`
 <!DOCTYPE html>
 <html>
 <head>
@@ -30,20 +10,15 @@ module.exports = (options) => {
   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
 
-  <meta name="theme-color" content="${
-    theming.customColor && theming.color ? `${theming.color}` : '#007aff'
-  }">
+  <meta name="theme-color" content="${c.customColor&&c.color?`${c.color}`:"#007aff"}">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
-  <link rel="icon" href="${srcFolder}${iconsAssetsFolder}/icons/favicon.png">
-  <title>${name}</title>
+  <link rel="icon" href="${n}static/icons/favicon.png">
+  <title>${o}</title>
 </head>
 <body>
-  <div id="app"${
-    framework === 'core' && theming.darkTheme ? 'class="theme-dark"' : ''
-  }>${rootContent}</div>
-  ${scripts}
+  <div id="app"${"core"===a&&c.darkTheme?'class="theme-dark"':""}>${r}</div>
+  ${l}
 </body>
 </html>
-  `.trim();
-};
+  `.trim()};