Merge branch 'feature/add-more-templates' into main

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+.idea/

package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-chayns-app",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "private": false,
     "description": "Create a new chayns® development project in one command.",
     "keywords": [
@@ -34,19 +34,21 @@
         "start": "node src/index.js"
     },
     "devDependencies": {
-        "@vercel/ncc": "^0.28.2",
-        "chalk": "^4.1.0",
-        "commander": "^7.2.0",
+        "@reduxjs/toolkit": "^1.9.0",
+        "@vercel/ncc": "^0.34.0",
+        "chalk": "4.1.2",
+        "commander": "^9.4.1",
         "enquirer": "^2.3.6",
-        "eslint": "^7.24.0",
-        "execa": "^5.0.0",
-        "fast-glob": "^3.2.5",
-        "is-npm": "^5.0.0",
+        "eslint": "^8.27.0",
+        "execa": "5.1.1",
+        "fast-glob": "^3.2.12",
+        "is-npm": "5.0.0",
         "mkdirp": "^1.0.4",
-        "ora": "^5.4.0",
-        "prettier": "^2.2.1",
-        "prettier-plugin-packagejson": "^2.2.10",
-        "validate-npm-package-name": "^3.0.0"
+        "ora": "5.4.1",
+        "prettier": "^2.7.1",
+        "prettier-plugin-packagejson": "^2.3.0",
+        "react-redux": "^8.0.5",
+        "validate-npm-package-name": "^5.0.0"
     },
     "publishConfig": {
         "access": "public"

src/copyTemplate.js

@@ -25,6 +25,7 @@ module.exports = async function copyTemplate({
 
         const realFileName = filename
             .replace('template-gitignore', '.gitignore')
+            .replace('template-package-redux.json', 'package.json')
             .replace('template-package.json', 'package.json');
 
         const fileDestination = path.join(destination, realFileName);

src/index.js

@@ -10,9 +10,13 @@ const mapReplace = require('./util/mapReplace');
 const execa = require('execa');
 const { Command } = require('commander');
 const pkg = require('../package.json');
-const ProjectTypes = require('./projectTypes');
+const {ProjectTypes, ProjectVersions, YesOrNo} = require('./projectTypes');
 const ora = require('ora');
 const toCapitalizedWords = require('./util/toCapitalizedWords');
+const {promisify} = require("util");
+const fs = require("fs");
+const writeFileAsync = promisify(fs.writeFile);
+const readFileAsync = promisify(fs.readFile);
 
 const { command } = execa;
 
@@ -23,6 +27,7 @@ program
     .option('-G, --no-git', 'initialize the project without a git repository')
     .option('-C, --no-initial-commit', "don't perform an initial commit")
     .option('-I, --no-install', "don't install packages after initialization")
+    .option('-M, --module-federation', "install to use as module (only internal)")
     .option(
         '-p, --package-manager <manager>',
         'specify the package manager to use (`npm` or `yarn`). Defaults to the one used to execute the command.'
@@ -35,13 +40,25 @@ async function createChaynsApp({
     initialCommit,
     install,
     packageManager,
+    moduleFederation
 }) {
-    const { projectType } = await prompt({
-        type: 'select',
-        name: 'projectType',
-        message: 'What type of project do you want to create?',
-        choices: Object.values(ProjectTypes),
-    });
+    let projectVersion;
+    let projectType;
+
+    if(!moduleFederation) {
+        ({ projectVersion } = await prompt({
+            type: 'select',
+            name: 'projectVersion',
+            message: 'What api version do you want to use?',
+            choices: Object.values(ProjectVersions),
+        }));
+        ({ projectType } = await prompt({
+            type: 'select',
+            name: 'projectType',
+            message: 'What type of project do you want to create?',
+            choices: Object.values(ProjectTypes),
+        }));
+    }
 
     let validPackageName = false;
     let projectName;
@@ -83,14 +100,6 @@ async function createChaynsApp({
         name: 'summary',
     });
 
-    console.log(
-        `\n${chalk.bold.magentaBright(
-            'Awesome!'
-        )} Please wait a quick second while we bootstrap your project...\n`
-    );
-
-    const usedPackageManager = packageManager || (isYarn ? 'yarn' : 'npm');
-
     function fillTemplates(content) {
         return mapReplace(content, {
             'package-name': projectName,
@@ -99,41 +108,131 @@ async function createChaynsApp({
             'install-command':
                 usedPackageManager === 'yarn' ? 'yarn' : 'npm install',
             'run-command': usedPackageManager === 'yarn' ? 'yarn' : 'npm run',
+            'package-name-underscore': projectName.replace('-', '_')
         });
     }
 
     const destination = path.resolve(projectName);
 
-    switch (projectType) {
-        case ProjectTypes.page:
-            await copyTemplate({
-                destination,
-                templateDir: path.join(
-                    /**
-                     * Do some nasty dynamic stuff to the __dirname so the
-                     * relocate loader doesn't copy the template folder.
-                     */
-                    ` ${__dirname} `.trim(),
-                    '../templates/page'
-                ),
-                adjustContent: (content) =>
-                    mapReplace(fillTemplates(content), { 'tapp-style': '' }),
+    const usedPackageManager = packageManager || (isYarn ? 'yarn' : 'npm');
+    if(projectVersion === ProjectVersions.v4) {
+        console.log(
+            `\n${chalk.bold.magentaBright(
+                'Awesome!'
+            )} Please wait a quick second while we bootstrap your project...\n`
+        );
+
+        switch (projectType) {
+            case ProjectTypes.page:
+                await copyTemplate({
+                    destination,
+                    templateDir: path.join(
+                        /**
+                         * Do some nasty dynamic stuff to the __dirname so the
+                         * relocate loader doesn't copy the template folder.
+                         */
+                        ` ${__dirname} `.trim(),
+                        '../templates/page'
+                    ),
+                    adjustContent: (content) =>
+                        mapReplace(fillTemplates(content), { 'tapp-style': '' }),
+                });
+                break;
+            case ProjectTypes.pagemakerPlugin:
+                await copyTemplate({
+                    destination,
+                    projectName,
+                    templateDir: path.join(
+                        ` ${__dirname} `.trim(),
+                        '../templates/page'
+                    ),
+                    adjustContent: (content) =>
+                        mapReplace(fillTemplates(content), {
+                            'tapp-style': ' style="padding: 0 0 16px !important"',
+                        }),
+                });
+                break;
+        }
+    } else {
+        const { chooseRedux } = await prompt({
+            type: 'select',
+            name: 'chooseRedux',
+            message: 'Do you want to add redux-toolkit?',
+            choices: Object.values(YesOrNo),
+        });
+
+        const { chooseTypescript } = await prompt({
+            type: 'select',
+            name: 'chooseTypescript',
+            message: 'Do you want to add typescript?',
+            choices: Object.values(YesOrNo),
+        });
+
+        const getTemplatePath = (temp) =>  path.join(` ${__dirname} `.trim(), temp)
+        const copyFile = async (from, to, map) => {
+            let content = await readFileAsync(from, { encoding: 'utf-8' });
+            if(map) {
+                content = mapReplace(content, {
+                    'package-name': projectName,
+                    'readable-package-name': toCapitalizedWords(projectName),
+                    description: summary,
+                    'install-command':
+                        usedPackageManager === 'yarn' ? 'yarn' : 'npm install',
+                    'run-command': usedPackageManager === 'yarn' ? 'yarn' : 'npm run'
+                })
+            }
+            await writeFileAsync(to, content);
+        }
+
+        const handleReplace = (content) => {
+           return mapReplace(fillTemplates(content), {
+                'tapp-style': projectType === ProjectTypes.pagemakerPlugin ? ' style="padding: 0 0 16px !important"' : '',
             });
-            break;
-        case ProjectTypes.pagemakerPlugin:
+        }
+
+        // redux modules
+        if(chooseRedux === YesOrNo.Yes) {
+            const templateSharedPath = `../templates/api-v5/shared/${chooseTypescript === YesOrNo.Yes ? 'ts' : 'js'}/src`;
             await copyTemplate({
-                destination,
+                destination: destination + "/src",
                 projectName,
                 templateDir: path.join(
                     ` ${__dirname} `.trim(),
-                    '../templates/page'
-                ),
-                adjustContent: (content) =>
-                    mapReplace(fillTemplates(content), {
-                        'tapp-style': ' style="padding: 0 0 16px !important"',
-                    }),
+                    templateSharedPath
+                )
             });
-            break;
+        }
+
+        // Main template
+        const templatePath = `../templates/api-v5/page${chooseTypescript === YesOrNo.Yes ? "-ts" : ""}${moduleFederation ? "-module":""}${chooseRedux === YesOrNo.Yes ? "-redux" : ""}`;
+        await copyTemplate({
+            destination,
+            projectName,
+            templateDir: getTemplatePath(templatePath),
+            adjustContent: handleReplace
+        });
+
+        // copy package json
+        const packageJsonDestination = path.join(destination, 'package.json');
+        await copyFile(getTemplatePath(`../templates/api-v5/shared/${chooseTypescript === YesOrNo.Yes ? "ts" : "js"}/template-package${chooseRedux === YesOrNo.Yes ? "-redux" : ""}.json`), packageJsonDestination, true);
+
+        // copy README
+        await copyFile(getTemplatePath(`../templates/shared/README.md`),  path.join(destination, 'README.md'), true);
+
+        // copy gitignore
+        await copyFile(getTemplatePath(`../templates/shared/template-gitignore`),  path.join(destination, '.gitignore'), true);
+
+        // copy tsconfig.json
+        if(chooseTypescript === YesOrNo.Yes) {
+            await copyFile(getTemplatePath(`../templates/api-v5/shared/ts/tsconfig.json`), path.join(destination, 'tsconfig.json'));
+        }
+
+        if(moduleFederation) {
+            const toolkitFileName = `toolkit.config-module.js`;
+            const fileDestination = path.join(destination, 'toolkit.config.js');
+
+            await copyFile(getTemplatePath(`../templates/api-v5/shared/${toolkitFileName}`), fileDestination);
+        }
     }
 
     if (git) {

src/projectTypes.js

@@ -3,4 +3,18 @@ const ProjectTypes = {
     pagemakerPlugin: 'A pagemaker plugin',
 };
 
-module.exports = ProjectTypes;
+const ProjectVersions = {
+    'v4': 'v4 (Javascript api)',
+    'v5': 'v5 (React api (new))'
+}
+
+const YesOrNo = {
+    'Yes': 'Yes',
+    'No': 'No'
+}
+
+module.exports = {
+    ProjectTypes,
+    ProjectVersions,
+    YesOrNo
+};

templates/api-v5/page-module-redux/src/components/App.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { WaitUntil } from "chayns-api";
+import { SmallWaitCursor } from "chayns-components";
+import { useSelector } from "react-redux";
+import { selectCount } from "../redux-modules/counter/counterSelectors";
+
+const App = () => {
+    const counter = useSelector(selectCount);
+
+    const taskList = [
+        // tasks on first level are executed parallel
+        () => chayns.ready,
+        () => new Promise((resolve) => {setTimeout(resolve, 1000)}), // Add your initial Requests, textstrings here
+        [
+            // tasks in second level are executed one after another
+        ]
+    ]
+
+    return (<div className="{{ package-name-underscore }}">
+        <WaitUntil
+            tasks={taskList}
+            loadingComponent={(
+                <div style={{ textAlign: 'center' }}>
+                    <SmallWaitCursor show/>
+                </div>
+            )}
+        >
+            <h1>Hi! Welcome to your newly created chayns application! {counter}</h1>
+        </WaitUntil></div>);
+};
+
+export default App;

templates/api-v5/page-module-redux/src/components/AppWrapper.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChaynsProvider, withCompatMode } from "chayns-api";
+import App from "./App";
+import store from '../redux-modules';
+import { Provider } from "react-redux";
+
+const AppWrapper = ({ ...props }) => {
+    return (
+        <div className="tapp">
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            <ChaynsProvider {...props}>
+                <Provider store={store}>
+                    <App/>
+                </Provider>
+            </ChaynsProvider>
+        </div>
+    )
+}
+
+export default withCompatMode(AppWrapper);

templates/api-v5/page-module-redux/src/components/app.scss

@@ -0,0 +1,3 @@
+h1 {
+    color: red;
+}

templates/api-v5/page-module/src/components/App.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { WaitUntil } from "chayns-api";
+import { SmallWaitCursor } from "chayns-components";
+import './app.scss';
+
+const App = () => {
+
+    const taskList = [
+        // tasks in first level are executed one after another
+        () => chayns.ready,
+        () => new Promise((resolve) => {setTimeout(resolve, 1000)}), // Add your initial Requests, textstrings here
+        [
+            // tasks on second level are executed parallel
+        ]
+    ]
+
+    return (<div className="{{ package-name-underscore }}">
+        <WaitUntil
+            tasks={taskList}
+            loadingComponent={(
+                <div style={{ textAlign: 'center' }}>
+                    <SmallWaitCursor show/>
+                </div>
+            )}
+    >
+        <h1>Hi! Welcome to your newly created chayns application!</h1>
+    </WaitUntil></div>);
+};
+
+export default App;