zmp-cli 3.15.5 → 3.15.6-beta.1

package/create/templates/react-typescript/pages/form.js

@@ -1,19 +1,7 @@
-const indent = require('../../../utils/indent');
-
-module.exports = (options) => {
-  const { template } = options;
-  const hideNavBar =
-    template === 'tabs'
-      ? `onPageBeforeIn={()=>{
+"use strict";const e=require("../../../utils/indent");module.exports=t=>{let{template:a}=t,o="tabs"===a?`onPageBeforeIn={()=>{
       //hide navbar
       zmp.toolbar.hide('#app-tab-bar')
-    }}`
-      : '';
-
-  if (options.stateManagement === 'recoil') {
-    return indent(
-      0,
-      `
+    }}`:"";return"recoil"===t.stateManagement?e(0,`
       import React from 'react';
       import { Button, Card, Input, Page, Box, zmp } from 'zmp-framework/react';
       import { useRecoilState } from 'recoil';
@@ -45,7 +33,7 @@ module.exports = (options) => {
         return (
           <Page 
             name="user-form" 
-            ${hideNavBar}
+            ${o}
           >
             <NavbarBack title="Update user info" />
             <Box>
@@ -77,13 +65,7 @@ module.exports = (options) => {
       }
 
       export default FormPage;
-      `
-    ).trim();
-  }
-
-  return indent(
-    0,
-    `
+      `).trim():e(0,`
     import React from 'react';
     import { Button, Card, Input, Page, useStore, zmp, Box } from 'zmp-framework/react';
     import NavbarBack from '../components/navbar-back';
@@ -115,7 +97,7 @@ module.exports = (options) => {
       return (
         <Page 
           name="user-form" 
-          ${hideNavBar}
+          ${o}
         >
           <NavbarBack title="Update user info" />
           <Box>
@@ -147,6 +129,4 @@ module.exports = (options) => {
     }
 
     export default FormPage;
-  `
-  ).trim();
-};
+  `).trim()};

package/create/templates/react-typescript/pages/index.js

@@ -1,17 +1 @@
-const copyUser = require('./user');
-const copyForm = require('./form');
-const copyDynamicRoute = require('./dynamic-route');
-const copyAbout = require('./about');
-const copy404 = require('./404');
-const copySettings = require('./settings');
-const copyCatalog = require('./catalog');
-
-module.exports = {
-  copyUser,
-  copyForm,
-  copyDynamicRoute,
-  copyAbout,
-  copy404,
-  copySettings,
-  copyCatalog,
-};
+"use strict";const e=require("./user"),r=require("./form"),u=require("./dynamic-route"),i=require("./about"),t=require("./404"),o=require("./settings"),q=require("./catalog");module.exports={copyUser:e,copyForm:r,copyDynamicRoute:u,copyAbout:i,copy404:t,copySettings:o,copyCatalog:q};

package/create/templates/react-typescript/pages/settings.js

@@ -1,11 +1,4 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  if (options.stateManagement === 'recoil') {
-    return indent(
-      0,
-      `
+"use strict";const e=require("../../../utils/indent");module.exports=t=>"recoil"===t.stateManagement?e(0,`
       import React from "react";
       import { useRecoilValue } from 'recoil';
       import {
@@ -36,12 +29,7 @@ module.exports = (options) => {
       };
   
       export default SettingsPage;
-      `
-    ).trim();
-  }
-  return indent(
-    0,
-    `
+      `).trim():e(0,`
     import React from "react";
     import {
       Page,
@@ -71,6 +59,4 @@ module.exports = (options) => {
     };
 
     export default SettingsPage;
-  `
-  ).trim();
-};
+  `).trim();

package/create/templates/react-typescript/pages/user.js

@@ -1,37 +1,20 @@
-const indent = require('../../../utils/indent');
-
-module.exports = (options) => {
-  const { template, stateManagement } = options;
-  const hideNavBar =
-    template === 'tabs'
-      ? `
+"use strict";const e=require("../../../utils/indent");module.exports=t=>{let{template:r,stateManagement:a}=t,s="tabs"===r?`
           onPageBeforeIn={()=>{
             //hide navbar
             zmp.toolbar.hide('#app-tab-bar')
-          }}`
-      : '';
-  const modules = ['Avatar', 'List', 'ListItem', 'Page', 'Title'];
-  if (stateManagement === 'store') {
-    modules.push('useStore');
-  }
-  if (template === 'tabs') {
-    modules.push('zmp');
-  }
-  return indent(
-    0,
-    `
+          }}`:"",i=["Avatar","List","ListItem","Page","Title"];return"store"===a&&i.push("useStore"),"tabs"===r&&i.push("zmp"),e(0,`
     import React from 'react'
-    import { ${modules.join(', ')} } from 'zmp-framework/react'
-    import NavbarBack from '../components/navbar-back'${stateManagement === 'recoil' ? `
+    import { ${i.join(", ")} } from 'zmp-framework/react'
+    import NavbarBack from '../components/navbar-back'${"recoil"===a?`
     import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';` : ''}
+    import { userState } from '../state';`:""}
 
     const UserPage = () => {
-      ${stateManagement === 'recoil' ? 'const user = useRecoilValue(userState);' : `const user = useStore('user')`}
+      ${"recoil"===a?"const user = useRecoilValue(userState);":"const user = useStore('user')"}
 
       return (
         <Page 
-          name="user"${hideNavBar}
+          name="user"${s}
         >
           <NavbarBack
             title="User info"
@@ -51,6 +34,4 @@ module.exports = (options) => {
     }
 
     export default UserPage;
-  `
-  ).trim();
-};
+  `).trim()};

package/create/templates/svelte/copy-assets.js

@@ -1,47 +1 @@
-const path = require('path');
-const generateHomePage = require('./generate-home-page');
-const generateRoot = require('./generate-root');
-const generateStore = require('../generate-store');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { template, bundler } = options;
-  const toCopy = [];
-
-  // Copy Pages
-  const pages = [
-    ...(template !== 'blank' ? ['404', 'about', 'dynamic-route', 'form'] : []),
-    ...(template === 'tabs' ? ['catalog', 'product', 'settings'] : []),
-    ...(template === 'split-view' ? ['left-page-1', 'left-page-2'] : []),
-  ];
-
-  pages.forEach((p) => {
-    const src = path.resolve(__dirname, 'pages', `${p}.svelte`);
-    const dest = path.resolve(cwd, 'src', 'pages', `${p}.svelte`);
-    toCopy.push({
-      from: src,
-      to: dest,
-    });
-  });
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'home.svelte'),
-  });
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.svelte'),
-  });
-  toCopy.push({
-    content: generateStore(options),
-    to: path.resolve(cwd, 'src', 'store.js'),
-  });
-
-  if (bundler) {
-    toCopy.push({
-      from: path.resolve(__dirname, 'babel.config.js'),
-      to: path.resolve(cwd, 'babel.config.js'),
-    });
-  }
-
-  return toCopy;
-};
+"use strict";const e=require("path"),t=require("./generate-home-page"),s=require("./generate-root"),r=require("../generate-store");module.exports=o=>{let a=o.cwd||process.cwd(),{template:l,bundler:n}=o,c=[];return[..."blank"!==l?["404","about","dynamic-route","form"]:[],..."tabs"===l?["catalog","product","settings"]:[],..."split-view"===l?["left-page-1","left-page-2"]:[]].forEach(t=>{let s=e.resolve(__dirname,"pages",`${t}.svelte`),r=e.resolve(a,"src","pages",`${t}.svelte`);c.push({from:s,to:r})}),c.push({content:t(o),to:e.resolve(a,"src","pages","home.svelte")}),c.push({content:s(o),to:e.resolve(a,"src","components","app.svelte")}),c.push({content:r(o),to:e.resolve(a,"src","store.js")}),n&&c.push({from:e.resolve(__dirname,"babel.config.js"),to:e.resolve(a,"babel.config.js")}),c};

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

@@ -1,77 +1,49 @@
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const { name, template } = options;
-
-  let description;
-  if (template === 'single-view' || template === 'blank') {
-    description = `
+"use strict";const t=require("../../utils/indent");module.exports=e=>{let i;let{name:a,template:o}=e;return("single-view"===o||"blank"===o)&&(i=`
           <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
+    `),"split-view"===o&&(i=`
         <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"===o&&(i=`
         <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,
-    `
+    `),t(0,`
     <Page name="home">
       <!-- Top Navbar -->
-      ${
-        template === 'blank'
-          ? `
+      ${"blank"===o?`
       <Navbar large>
-        <NavTitle>${name}</NavTitle>
-        <NavTitleLarge>${name}</NavTitleLarge>
+        <NavTitle>${a}</NavTitle>
+        <NavTitleLarge>${a}</NavTitleLarge>
       </Navbar>
-      `.trim()
-          : `
+      `.trim():`
       <Navbar large sliding={false}>
         <NavLeft>
           <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="left" />
         </NavLeft>
-        <NavTitle sliding>${name}</NavTitle>
+        <NavTitle sliding>${a}</NavTitle>
         <NavRight>
           <Link iconIos="zmp:menu" iconAurora="zmp:menu" iconMd="material:menu" panelOpen="right" />
         </NavRight>
-        <NavTitleLarge>${name}</NavTitleLarge>
+        <NavTitleLarge>${a}</NavTitleLarge>
       </Navbar>
-      `.trim()
-      }
-      ${
-        template !== 'tabs'
-          ? `
+      `.trim()}
+      ${"tabs"!==o?`
       <!-- Toolbar -->
       <Toolbar bottom>
         <Link>Left Link</Link>
         <Link>Right Link</Link>
       </Toolbar>
 
-      `.trim()
-          : ''
-      }
+      `.trim():""}
       <!-- Page content -->
       <Block strong>
-        ${description.trim()}
+        ${i.trim()}
       </Block>
 
-      ${
-        template !== 'blank'
-          ? `
+      ${"blank"!==o?`
       <BlockTitle>Navigation</BlockTitle>
       <List>
         <ListItem link="/about/" title="About"/>
@@ -112,13 +84,9 @@ module.exports = (options) => {
           link="/load-something-that-doesnt-exist/"
         />
       </List>
-      `.trim()
-          : ''
-      }
+      `.trim():""}
     </Page>
-    ${
-      template === 'blank'
-        ? `
+    ${"blank"===o?`
     <script>
       import {
         Page,
@@ -130,8 +98,7 @@ module.exports = (options) => {
         Block,
       } from 'zmp-svelte';
     </script>
-    `.trim()
-        : `
+    `.trim():`
     <script>
       import {
         Page,
@@ -151,8 +118,5 @@ module.exports = (options) => {
         Button
       } from 'zmp-svelte';
     </script>
-    `.trim()
-    }
-  `
-  ).trim();
-};
+    `.trim()}
+  `).trim()};

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

@@ -1,14 +1,4 @@
-const indent = require('../../utils/indent');
-const templateIf = require('../../utils/template-if');
-const appParameters = require('../app-parameters');
-
-module.exports = (options) => {
-  const { template, theming } = options;
-
-  // Panels
-  const leftPanelPlain = indent(
-    6,
-    `
+"use strict";const e=require("../../utils/indent"),t=require("../../utils/template-if"),i=require("../app-parameters");module.exports=a=>{let{template:o,theming:l}=a,n=e(6,`
     <!-- Left panel with cover effect-->
     <Panel left cover themeDark>
       <View>
@@ -18,12 +8,7 @@ module.exports = (options) => {
         </Page>
       </View>
     </Panel>
-  `
-  );
-
-  const leftPanelWithView = indent(
-    6,
-    `
+  `),r=e(6,`
     <!-- Left panel with cover effect when hidden -->
     <Panel left cover themeDark visibleBreakpoint={960}>
       <View>
@@ -43,13 +28,7 @@ module.exports = (options) => {
         </Page>
       </View>
     </Panel>
-  `
-  );
-  const leftPanel =
-    template === 'split-view' ? leftPanelWithView : leftPanelPlain;
-  const rightPanel = indent(
-    6,
-    `
+  `),s=e(6,`
     <!-- Right panel with reveal effect-->
     <Panel right reveal themeDark>
       <View>
@@ -59,28 +38,10 @@ module.exports = (options) => {
         </Page>
       </View>
     </Panel>
-  `
-  );
-
-  // Views
-  let views = '';
-  if (
-    template === 'single-view' ||
-    template === 'split-view' ||
-    template === 'blank'
-  ) {
-    views = indent(
-      6,
-      `
+  `),p="";return("single-view"===o||"split-view"===o||"blank"===o)&&(p=e(6,`
       <!-- Your main view, should have "view-main" class -->
       <View main class="safe-areas" url="/" />
-    `
-    );
-  }
-  if (template === 'tabs') {
-    views = indent(
-      6,
-      `
+    `)),"tabs"===o&&(p=e(6,`
       <!-- Views/Tabs container -->
       <Views tabs class="safe-areas">
         <!-- Tabbar for switching views-tabs -->
@@ -100,25 +61,16 @@ module.exports = (options) => {
         <View id="view-settings" name="settings" tab url="/settings/" />
 
       </Views>
-    `
-    );
-  }
-
-  return indent(
-    0,
-    `
-    ${
-      template === 'blank'
-        ? `
-    <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-      ${views}
+    `)),e(0,`
+    ${"blank"===o?`
+    <App { ...zmpparams } ${l.darkTheme?"themeDark":""}>
+      ${p}
     </App>
-    `.trim()
-        : `
-    <App { ...zmpparams } ${theming.darkTheme ? 'themeDark' : ''}>
-      ${leftPanel}
-      ${rightPanel}
-      ${views}
+    `.trim():`
+    <App { ...zmpparams } ${l.darkTheme?"themeDark":""}>
+      ${"split-view"===o?r:n}
+      ${s}
+      ${p}
 
       <!-- Popup -->
       <Popup id="my-popup">
@@ -164,21 +116,17 @@ module.exports = (options) => {
         </View>
       </LoginScreen>
     </App>
-    `.trim()
-    }
+    `.trim()}
     <script>
       import { onMount } from 'svelte';
-      ${templateIf(
-        template === 'blank',
-        () => `
+      ${t("blank"===o,()=>`
       import {
         zmp,
         zmpready,
         App,
         View,
       } from 'zmp-svelte';
-      `,
-        () => `
+      `,()=>`
       import {
         zmp,
         zmpready,
@@ -202,17 +150,14 @@ module.exports = (options) => {
         ListButton,
         BlockFooter
       } from 'zmp-svelte';
-      `
-      )}
+      `)}
       import store from '../store';
 
       // ZMP Parameters
       let zmpparams = {
-        ${indent(8, appParameters(options)).trim()}
+        ${e(8,i(a)).trim()}
       };
-      ${templateIf(
-        template !== 'blank',
-        () => `
+      ${t("blank"!==o,()=>`
       // Login screen demo data
       let username = '';
       let password = '';
@@ -222,14 +167,11 @@ module.exports = (options) => {
           zmp.loginScreen.close();
         });
       }
-      `
-      )}
+      `)}
       onMount(() => {
         zmpready(() => {
           // Call ZMP APIs here
         });
       })
     </script>
-  `
-  ).trim();
-};
+  `).trim()};

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

@@ -1,13 +1,4 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-
-module.exports = (options) => {
-  const {
-    template,
-  } = options;
-
-  if (template === 'blank') {
-    return indent(0, `
+"use strict";const e=require("../../utils/template-if"),t=require("../../utils/indent");module.exports=o=>{let{template:a}=o;return"blank"===a?t(0,`
       import HomePage from './pages/home.svelte';
 
       var routes = [
@@ -18,19 +9,16 @@ module.exports = (options) => {
       ];
 
       export default routes;
-    `);
-  }
-  // Webpack Routes
-  const routes = indent(0, `
+    `):t(0,`
     import HomePage from './pages/home.svelte';
     import AboutPage from './pages/about.svelte';
     import FormPage from './pages/form.svelte';
-    ${templateIf(template === 'tabs', () => `
+    ${e("tabs"===a,()=>`
     import CatalogPage from './pages/catalog.svelte';
     import ProductPage from './pages/product.svelte';
     import SettingsPage from './pages/settings.svelte';
     `)}
-    ${templateIf(template === 'split-view', () => `
+    ${e("split-view"===a,()=>`
     import LeftPage1 from './pages/left-page-1.svelte';
     import LeftPage2 from './pages/left-page-2.svelte';
     `)}
@@ -50,7 +38,7 @@ module.exports = (options) => {
         path: '/form/',
         component: FormPage,
       },
-      ${templateIf(template === 'tabs', () => `
+      ${e("tabs"===a,()=>`
       {
         path: '/catalog/',
         component: CatalogPage,
@@ -64,7 +52,7 @@ module.exports = (options) => {
         component: SettingsPage,
       },
       `)}
-      ${templateIf(template === 'split-view', () => `
+      ${e("split-view"===a,()=>`
       {
         path: '/left-page-1/',
         component: LeftPage1,
@@ -85,7 +73,4 @@ module.exports = (options) => {
     ];
 
     export default routes;
-  `);
-
-  return routes;
-};
+  `)};

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

@@ -1,35 +1,22 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const {
-    cssPreProcessor,
-    theming,
-    customBuild,
-  } = options;
-
-  let scripts = '';
-
-  scripts += indent(0, `
+"use strict";const t=require("../../utils/template-if"),e=require("../../utils/indent"),p=require("../../utils/styles-extension");module.exports=o=>{let{cssPreProcessor:s,theming:m,customBuild:r}=o,n="";return(n+=e(0,`
     // Import ZMP
-    import ZMP from '${customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'}';
+    import ZMP from '${r?"./zmp-custom.js":"zmp-framework/core/lite-bundle"}';
 
     // Import ZMP-Svelte Plugin
     import ZMPSvelte from 'zmp-svelte';
 
     // Import ZMP Styles
-    ${templateIf(customBuild, () => `
+    ${t(r,()=>`
     import '../css/zmp-custom.less';
-    `, () => `
+    `,()=>`
     import 'zmp-framework/zmp-bundle.min.css';
     `)}
 
     // Import Icons and App Custom Styles
-    ${templateIf(theming.iconFonts, () => `
+    ${t(m.iconFonts,()=>`
     import '../css/icons.css';
     `)}
-    import '../css/app.${stylesExtension(cssPreProcessor)}';
+    import '../css/app.${p(s)}';
 
     // Import App Component
     import App from '../components/app.svelte';
@@ -41,7 +28,4 @@ module.exports = (options) => {
     const app = new App({
       target: document.getElementById('app'),
     });
-  `);
-
-  return scripts.trim();
-};
+  `)).trim()};