zmp-cli 3.15.5 → 3.15.6-beta.1

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

@@ -1,81 +1,23 @@
-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    ')}
+"use strict";const e=require("../utils/indent");module.exports=r=>{let{themes:t=[],rtl:o=!1,lightTheme:i=!0,darkTheme:m=!0,components:s=[]}=r.customBuildConfig||{},n=e=>e.filter(e=>"gauge"!==e&&"area-chart"!==e&&"pie-chart"!==e),{framework:u}=r,p=n(s).map(e=>{let r=e.split("-").map(e=>e[0].toUpperCase()+e.substring(1)).join("");return`import ${r} from 'zmp-framework/core/components/${e}';`}),l=n(s).map(e=>e.split("-").map(e=>e[0].toUpperCase()+e.substring(1)).join("")),a=e(0,`
+    import ZMP, { request, utils, getDevice, createStore } from '${"core"===u?"zmp-framework/core":"zmp-framework/core/lite"}';
+    ${p.join("\n    ")}
 
     ZMP.use([
-      ${componentsNamesJS.join(',\n      ')}
+      ${l.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,
-    `
+  `),c=s.map(e=>`@import url('../../node_modules/zmp/components/${e}/${e}.less');`);return{styles:e(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}
+      ${c.join("\n      ")}
+
+      @includeIosTheme: ${t.indexOf("ios")>=0};
+      @includeMdTheme: ${t.indexOf("md")>=0};
+      @includeAuroraTheme: ${t.indexOf("aurora")>=0};
+      @includeDarkTheme: ${m||!1};
+      @includeLightTheme: ${i||!1};
+      @rtl: ${o}
     }
-  `
-  );
-
-  return {
-    styles,
-    scripts,
-  };
-};
+  `),scripts:a}};

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

@@ -1,85 +1 @@
-const path = require('path');
-const generateHomePage = require('./generate-home-page');
-const generateRoot = require('./generate-root');
-const generateStore = require('../generate-store');
-const generateRecoil = require('../generate-recoil');
-const copyPages = require('./pages');
-
-module.exports = (options) => {
-  const cwd = options.cwd || process.cwd();
-  const { template, stateManagement } = options;
-  const toCopy = [];
-
-  // Copy Pages
-
-  let pages = [];
-  if (template !== 'blank')
-    pages.push(
-      ...[
-        { fileName: '404', content: 'copy404' },
-        { fileName: 'about', content: 'copyAbout' },
-        { fileName: 'dynamic-route', content: 'copyDynamicRoute' },
-        { fileName: 'user', content: 'copyUser' },
-        { fileName: 'form', content: 'copyForm' },
-      ]
-    );
-  if (template === 'tabs') {
-    pages.push(
-      ...[
-        { fileName: 'catalog', content: 'copyCatalog' },
-        { fileName: 'settings', content: 'copySettings' },
-      ]
-    );
-  }
-
-  pages.forEach(({ fileName, content }) => {
-    const dest = path.resolve(cwd, 'src', 'pages', `${fileName}.jsx`);
-    toCopy.push({
-      content: copyPages[content](options),
-      to: dest,
-    });
-  });
-
-
-  toCopy.push({
-    content: generateHomePage(options),
-    to: path.resolve(cwd, 'src', 'pages', 'index.jsx'),
-  });
-
-  // Copy compoents
-  const components = [
-    ...(template !== 'blank' ? ['app-items', 'navbar-back', 'user-card'] : []),
-  ];
-  components.forEach((name) => {
-    const src = path.resolve(__dirname, 'components', `${name}.jsx`);
-    const dest = path.resolve(cwd, 'src', 'components', `${name}.jsx`);
-    toCopy.push({
-      from: src,
-      to: dest,
-    });
-  });
-
-  toCopy.push({
-    content: generateRoot(options),
-    to: path.resolve(cwd, 'src', 'components', 'app.jsx'),
-  });
-
-  if (stateManagement === 'recoil') {
-    toCopy.push({
-      content: generateRecoil(options),
-      to: path.resolve(cwd, 'src', 'state.js'),
-    });
-  } else {
-    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;
-};
+"use strict";const e=require("path"),o=require("./generate-home-page"),t=require("./generate-root"),s=require("../generate-store"),r=require("../generate-recoil"),n=require("./pages");module.exports=c=>{let a=c.cwd||process.cwd(),{template:p,stateManagement:i}=c,l=[],u=[];return"blank"!==p&&u.push({fileName:"404",content:"copy404"},{fileName:"about",content:"copyAbout"},{fileName:"dynamic-route",content:"copyDynamicRoute"},{fileName:"user",content:"copyUser"},{fileName:"form",content:"copyForm"}),"tabs"===p&&u.push({fileName:"catalog",content:"copyCatalog"},{fileName:"settings",content:"copySettings"}),u.forEach(({fileName:o,content:t})=>{let s=e.resolve(a,"src","pages",`${o}.jsx`);l.push({content:n[t](c),to:s})}),l.push({content:o(c),to:e.resolve(a,"src","pages","index.jsx")}),[..."blank"!==p?["app-items","navbar-back","user-card"]:[]].forEach(o=>{let t=e.resolve(__dirname,"components",`${o}.jsx`),s=e.resolve(a,"src","components",`${o}.jsx`);l.push({from:t,to:s})}),l.push({content:t(c),to:e.resolve(a,"src","components","app.jsx")}),"recoil"===i?l.push({content:r(c),to:e.resolve(a,"src","state.js")}):l.push({content:s(c),to:e.resolve(a,"src","store.js")}),l.push({from:e.resolve(__dirname,"vite.config.js"),to:e.resolve(a,"vite.config.js")}),l};

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

@@ -1,44 +1,23 @@
-const indent = require('../../utils/indent');
-module.exports = (options) => {
-  const { name, template, theming, stateManagement } = options;
-  const { fillBars } = theming;
-
-  let description = '';
-  if (template === 'single-view' || template === 'blank') {
-    description = `
+"use strict";const t=require("../../utils/indent");module.exports=e=>{let{name:a,template:i,theming:r,stateManagement:o}=e,{fillBars:s}=r,n="";return("single-view"===i||"blank"===i)&&(n=`
           <p>Here is your blank ZMP app. Let's see what we have here.</p>
-    `;
-  }
-  if (template === 'split-view') {
-    description = `
+    `),"split-view"===i&&(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>
 
           <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"===i&&(n=`
           <p>Here is your blank ZMP app with tabs-layout. Let's see what we have here.</p>
-    `;
-  }
-
-  return indent(
-    0,
-    `
+    `),t(0,`
     import React from 'react';
-    ${
-      template === 'blank'
-        ? `
+    ${"blank"===i?`
     import {
       Page,
       Navbar,
       NavTitleLarge,
       Card
     } from 'zmp-framework/react';
-    `.trim()
-        : `
+    `.trim():`
     import {
       Page,
       Navbar,
@@ -46,32 +25,27 @@ module.exports = (options) => {
       List,
       ListItem,
       Card,
-      ${stateManagement === 'store' ? 'useStore,' : ''}
-    } from 'zmp-framework/react';${stateManagement === 'recoil' ? `
+      ${"store"===o?"useStore,":""}
+    } from 'zmp-framework/react';${"recoil"===o?`
     import { useRecoilValue } from 'recoil';
-    import { userState } from '../state';` : ''}
+    import { userState } from '../state';`:""}
     import AppItems from '../components/app-items';
     import UserCard from '../components/user-card';
-    `.trim()
-    }
+    `.trim()}
 
     const HomePage = () => {
-      ${template !== 'blank' ? (stateManagement === 'recoil' ? "const user = useRecoilValue(userState);" : "const user = useStore('user');") : ''}
+      ${"blank"!==i?"recoil"===o?"const user = useRecoilValue(userState);":"const user = useStore('user');":""}
       return (
-        <Page name="home" ${template === 'tabs' ? '' : 'navbarLarge'}>${template !== 'tabs' ? `
+        <Page name="home" ${"tabs"===i?"":"navbarLarge"}>${"tabs"!==i?`
           {/* Top Navbar */}
-          <Navbar ${fillBars ? 'fill' : ''}>
-            <NavTitleLarge>${name}</NavTitleLarge>
-          </Navbar>`
-              : ''
-          }
+          <Navbar ${s?"fill":""}>
+            <NavTitleLarge>${a}</NavTitleLarge>
+          </Navbar>`:""}
           {/* Page content */}
           <Card inset>
-            ${description.trim()}
+            ${n.trim()}
           </Card>
-          ${
-            template !== 'blank' && template !== 'tabs'
-              ? `
+          ${"blank"!==i&&"tabs"!==i?`
           {/* User info */}
           <List>
             <ListItem link="/user/">
@@ -88,9 +62,7 @@ module.exports = (options) => {
             <ListItem title="Default Route (404)" link="/something-that-doesnt-exist" />
             <ListItem title="About" link="/about/" />
           </List>
-          `.trim()
-              : ''
-          }${template === 'tabs' ? `
+          `.trim():""}${"tabs"===i?`
           {/* Grid apps */}
           <AppItems />
 
@@ -100,12 +72,10 @@ module.exports = (options) => {
             <ListItem title="Default Route (404)" link="/something-that-doesnt-exist" />
             <ListItem title="About" link="/about/" />
           </List>
-          `.trim() : ''}
+          `.trim():""}
         </Page>
       );
     }
     
     export default HomePage;
-  `
-  ).trim();
-};
+  `).trim()};

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

@@ -1,25 +1,7 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const appParameters = require('../app-parameters');
-
-module.exports = (options) => {
-  const { template, theming, stateManagement } = options;
-
-  // Views
-  let views = '';
-  if (template === 'single-view' || template === 'blank') {
-    views = indent(
-      0,
-      `
+"use strict";const e=require("../../utils/template-if"),i=require("../../utils/indent"),a=require("../app-parameters");module.exports=t=>{let{template:r,theming:o,stateManagement:m}=t,s="";return("single-view"===r||"blank"===r)&&(s=i(0,`
       {/* Your main view, should have "view-main" class */}
       <View main className="safe-areas" url="/" />
-    `
-    );
-  }
-  if (template === 'tabs') {
-    views = indent(
-      0,
-      `
+    `)),"tabs"===r&&(s=i(0,`
     {/* TabView container */}
     <TabView className="safe-areas">
       {/* Tabbar for switching Tab*/}
@@ -39,28 +21,19 @@ module.exports = (options) => {
       <View id="view-catalog" name="catalog" tab url="/catalog/" />
       <View id="view-settings" name="settings" tab url="/settings/" />
     </TabView>
-    `
-    );
-  }
-
-  return indent(
-    0,
-    `
+    `)),i(0,`
     import React, { useEffect } from 'react';
-    ${['blank', 'single-view'].indexOf(template) >= 0
-      ? `
+    ${["blank","single-view"].indexOf(r)>=0?`
     import { zmpready, App, View } from 'zmp-framework/react';
-    `.trim()
-      : `
+    `.trim():`
     import { zmpready, App, TabView, View, Tabbar, Link } from 'zmp-framework/react';
-    `.trim()
-    }
-    ${templateIf(stateManagement === 'recoil', () => `import { RecoilRoot } from 'recoil';`, () => `import store from '../store';`)}
+    `.trim()}
+    ${e("recoil"===m,()=>"import { RecoilRoot } from 'recoil';",()=>"import store from '../store';")}
 
     const MyApp = () => {
       // ZMP Parameters
       const zmpparams = {
-${indent(8, appParameters(options))}
+${i(8,a(t))}
       };
       useEffect(() => {
         zmpready(() => {
@@ -69,16 +42,14 @@ ${indent(8, appParameters(options))}
       }, [])
 
       ${`
-      return (${stateManagement === 'recoil' ? `
-        <RecoilRoot>` : ''}
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `<App {...zmpparams} ${theming.darkTheme ? 'themeDark' : ''}>`)}
-${indent(stateManagement === 'recoil' ? 12 : 10, views.trim())}
-        ${indent(stateManagement === 'recoil' ? 2 : 0, `</App>`)}${stateManagement === 'recoil' ? `
-        </RecoilRoot>` : ''}
+      return (${"recoil"===m?`
+        <RecoilRoot>`:""}
+        ${i("recoil"===m?2:0,`<App {...zmpparams} ${o.darkTheme?"themeDark":""}>`)}
+${i("recoil"===m?12:10,s.trim())}
+        ${i("recoil"===m?2:0,"</App>")}${"recoil"===m?`
+        </RecoilRoot>`:""}
       );
       `.trim()}
     }
     export default MyApp;
-  `
-  ).trim();
-};
+  `).trim()};

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

@@ -1,16 +1 @@
-module.exports = (options) => {
-  const { template } = options;
-
-  if (template === 'blank') {
-    return [];
-  }
-  // Webpack Routes
-  const routes = ['/user', '/form', '/dynamic-route', '/about', '/404'];
-  if (template === 'tabs') {
-    routes.push(...['/catalog', '/settings']);
-  } else if (template === 'split-view') {
-    routes.push(...['/left-page-1', '/left-page-2']);
-  }
-
-  return routes;
-};
+"use strict";module.exports=t=>{let{template:e}=t;if("blank"===e)return[];let s=["/user","/form","/dynamic-route","/about","/404"];return"tabs"===e?s.push("/catalog","/settings"):"split-view"===e&&s.push("/left-page-1","/left-page-2"),s};

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

@@ -1,51 +1,29 @@
-const templateIf = require('../../utils/template-if');
-const indent = require('../../utils/indent');
-const stylesExtension = require('../../utils/styles-extension');
-
-module.exports = (options) => {
-  const { cssPreProcessor, theming, customBuild, includeTailwind } = options;
-
-  let scripts = '';
-
-  scripts += indent(
-    0,
-    `
+"use strict";const t=require("../../utils/template-if"),o=require("../../utils/indent"),e=require("../../utils/styles-extension");module.exports=r=>{let{cssPreProcessor:p,theming:m,customBuild:s,includeTailwind:i}=r,n="";return(n+=o(0,`
     // Import React and ReactDOM
     import React from 'react';
     import { createRoot } from 'react-dom/client';
 
     // Import ZMP
-    import ZMP from '${
-      customBuild ? './zmp-custom.js' : 'zmp-framework/core/lite-bundle'
-    }';
+    import ZMP from '${s?"./zmp-custom.js":"zmp-framework/core/lite-bundle"}';
 
     // Import ZMP-React Plugin
-    import ZMPReact from 'zmp-framework/react';${includeTailwind ? `
+    import ZMPReact from 'zmp-framework/react';${i?`
 
     // Import tailwind styles
-    import './css/tailwind.css';` : ''}
+    import './css/tailwind.css';`:""}
 
     // Import ZMP Styles
-    ${templateIf(
-      customBuild,
-      () => `
+    ${t(s,()=>`
     import './css/zmp-custom.less';
-    `,
-      () => `
-    import 'zmp-framework/${
-      theming.useUiKits ? 'zmp-bundle.min.css' : 'zmp.min.css'
-    }';
-    `
-    )}
+    `,()=>`
+    import 'zmp-framework/${m.useUiKits?"zmp-bundle.min.css":"zmp.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.${e(p)}';
 
     // Import App Component
     import App from './components/app.jsx';
@@ -61,8 +39,4 @@ module.exports = (options) => {
     // Mount React App
     const root = createRoot(document.getElementById('app'));
     root.render(React.createElement(App));
-  `
-  );
-
-  return scripts.trim();
-};
+  `)).trim()};

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

@@ -1,10 +1,4 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  return indent(
-    0,
-    `
+"use strict";const t=require("../../../utils/indent");module.exports=e=>t(0,`
     import React from 'react';
     import { Page, Card, Title, Box } from 'zmp-framework/react';
     import NavbarBack from '../components/navbar-back';
@@ -22,6 +16,4 @@ module.exports = (options) => {
     );
     
     export default NotFoundPage;    
-  `
-  ).trim();
-};
+  `).trim();

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

@@ -1,10 +1,4 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  return indent(
-    0,
-    `
+"use strict";const t=require("../../../utils/indent");module.exports=o=>t(0,`
     import React from 'react'
     import { Actions, ActionsButton, ActionsGroup, ActionsLabel, Button, Card, Page, Box } from 'zmp-framework/react';
     import NavbarBack from '../components/navbar-back';
@@ -47,6 +41,4 @@ module.exports = (options) => {
     }
 
     export default AboutPage;
-  `
-  ).trim();
-};
+  `).trim();

package/create/templates/react/pages/catalog.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 t=require("../../../utils/indent");module.exports=e=>"recoil"===e.stateManagement?t(0,`
       import React from "react";
       import { useRecoilState } from 'recoil';
       import { Page, Title, List, ListItem, Box, Button } from 'zmp-framework/react';
@@ -51,12 +44,7 @@ module.exports = (options) => {
       };
   
       export default CatalogPage;
-    `
-    ).trim();
-  }
-  return indent(
-    0,
-    `
+    `).trim():t(0,`
     import React from "react";
     import {
       Page,
@@ -107,6 +95,4 @@ module.exports = (options) => {
     };
 
     export default CatalogPage;
-  `
-  ).trim();
-};
+  `).trim();

package/create/templates/react/pages/dynamic-route.js

@@ -1,10 +1,4 @@
-const indent = require('../../../utils/indent');
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (options) => {
-  return indent(
-    0,
-    `
+"use strict";const t=require("../../../utils/indent");module.exports=e=>t(0,`
     import React from 'react'
     import { Button, Box, List, ListItem, Page } from 'zmp-framework/react'
     import NavbarBack from '../components/navbar-back';
@@ -75,6 +69,4 @@ module.exports = (options) => {
     }
 
     export default DymanicRoutePage;
-  `
-  ).trim();
-};
+  `).trim();

package/create/templates/react/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/pages/index copy.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};