create-chayns-app 1.1.28 → 1.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-chayns-app",
-    "version": "1.1.28",
+    "version": "1.2.0-beta.0",
     "private": false,
     "description": "Create a new chayns® development project in one command.",
     "keywords": [
@@ -25,28 +25,36 @@
     },
     "main": "index.js",
     "bin": {
-        "create-chayns-app": "dist/index.js"
+        "create-chayns-app": "dist/index.cjs"
+    },
+    "type": "module",
+    "files": [
+        "dist",
+        "templates"
+    ],
+    "engines": {
+        "node": ">=18"
     },
     "scripts": {
-        "build": "ncc build src/index.js -o dist -m",
+        "build": "node ./scripts/build.js",
+        "watch": "node ./scripts/watch.js",
         "format": "prettier . --ignore-path .gitignore --write",
         "prepublishOnly": "npm run build",
         "start": "node src/index.js"
     },
     "devDependencies": {
-        "@vercel/ncc": "^0.38.2",
-        "chalk": "4.1.2",
-        "commander": "12.1.0",
+        "@eslint/js": "^9.19.0",
+        "chalk": "^5.4.1",
+        "commander": "^13.1.0",
         "enquirer": "^2.4.1",
-        "eslint": "^9.14.0",
-        "execa": "5.1.1",
-        "fast-glob": "^3.3.2",
-        "is-npm": "6.0.0",
-        "mkdirp": "1.0.4",
-        "ora": "5.4.1",
-        "prettier": "^3.3.3",
-        "prettier-plugin-packagejson": "^2.5.3",
-        "react-redux": "^9.1.2",
+        "esbuild": "^0.24.2",
+        "eslint": "^9.19.0",
+        "execa": "^8.0.1",
+        "fast-glob": "^3.3.3",
+        "is-npm": "^6.0.0",
+        "ora": "^8.1.1",
+        "prettier": "^3.4.2",
+        "prettier-plugin-packagejson": "^2.5.8",
         "validate-npm-package-name": "^6.0.0"
     },
     "publishConfig": {

package/templates/api-v5/page/src/components/AppWrapper.jsx

@@ -3,14 +3,12 @@ import { ChaynsProvider } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
-const AppWrapper = () => {
-    return (
-        <ChaynsProvider>
-            <PageProvider>
-                <App/>
-            </PageProvider>
-        </ChaynsProvider>
-    )
-}
+const AppWrapper = () => (
+    <ChaynsProvider>
+        <PageProvider>
+            <App />
+        </PageProvider>
+    </ChaynsProvider>
+);
 
 export default AppWrapper;

package/templates/api-v5/page/src/index.html

@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div id="root" {{ tapp-style }}></div>
+        <div id="root"{{ tapp-style }}></div>
     </body>
 </html>

package/templates/api-v5/page/src/index.jsx

@@ -4,7 +4,7 @@ import AppWrapper from './components/AppWrapper';
 
 try {
     const root = createRoot(document.querySelector('#root'));
-    root.render(<AppWrapper/>);
+    root.render(<AppWrapper />);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }

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

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

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

@@ -3,17 +3,15 @@ import { ChaynsProvider, withCompatMode } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
-const AppWrapper = ({ ...props }) => {
-    return (
-        <div className="tapp">
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <ChaynsProvider {...props}>
-                <PageProvider>
-                    <App/>
-                </PageProvider>
-            </ChaynsProvider>
-        </div>
-    )
-}
+const AppWrapper = (props) => (
+    <div className="{{ package-name-underscore }}">
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <ChaynsProvider {...props}>
+            <PageProvider>
+                <App />
+            </PageProvider>
+        </ChaynsProvider>
+    </div>
+);
 
 export default withCompatMode(AppWrapper);

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

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

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

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

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

@@ -5,16 +5,14 @@ import { PageProvider } from '@chayns-components/core';
 import store from '../redux-modules';
 import App from './App';
 
-const AppWrapper = () => {
-    return (
-        <ChaynsProvider>
-            <Provider store={store}>
-                <PageProvider>
-                    <App />
-                </PageProvider>
-            </Provider>
-        </ChaynsProvider>
-    )
-}
+const AppWrapper = () => (
+    <ChaynsProvider>
+        <Provider store={store}>
+            <PageProvider>
+                <App />
+            </PageProvider>
+        </Provider>
+    </ChaynsProvider>
+);
 
 export default AppWrapper;

package/templates/api-v5/page-redux/src/index.html

@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div id="root" {{ tapp-style }}></div>
+        <div id="root"{{ tapp-style }}></div>
     </body>
 </html>

package/templates/api-v5/page-redux/src/index.jsx

@@ -4,7 +4,7 @@ import AppWrapper from './components/AppWrapper';
 
 try {
     const root = createRoot(document.querySelector('#root'));
-    root.render(<AppWrapper/>);
+    root.render(<AppWrapper />);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }

package/templates/api-v5/page-ts/src/components/AppWrapper.tsx

@@ -3,14 +3,12 @@ import { ChaynsProvider } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
-const AppWrapper = () => {
-    return (
-        <ChaynsProvider>
-            <PageProvider>
-                <App/>
-            </PageProvider>
-        </ChaynsProvider>
-    );
-}
+const AppWrapper = () => (
+    <ChaynsProvider>
+        <PageProvider>
+            <App />
+        </PageProvider>
+    </ChaynsProvider>
+);
 
 export default AppWrapper;

package/templates/api-v5/page-ts/src/index.html

@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div id="root" {{ tapp-style }}></div>
+        <div id="root"{{ tapp-style }}></div>
     </body>
 </html>

package/templates/api-v5/page-ts/src/index.tsx

@@ -4,7 +4,7 @@ import AppWrapper from './components/AppWrapper';
 
 try {
     const root = createRoot(document.querySelector('#root') as Element);
-    root.render(<AppWrapper/>);
+    root.render(<AppWrapper />);
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }

package/templates/api-v5/page-ts-module/src/components/App.tsx

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

package/templates/api-v5/page-ts-module/src/components/AppWrapper.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { FC, ComponentProps } from 'react';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
 
-const AppWrapper = ({ ...props }) => {
-    return (
-        /* eslint-disable-next-line react/jsx-props-no-spreading */
+const AppWrapper: FC<ComponentProps<typeof ChaynsProvider>> = (props) => (
+    <div className="{{ package-name-underscore }}">
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <ChaynsProvider {...props}>
             <PageProvider>
-                <App/>
+                <App />
             </PageProvider>
         </ChaynsProvider>
-    )
-}
+    </div>
+);
 
 export default withCompatMode(AppWrapper);

package/templates/api-v5/page-ts-module-redux/src/components/App.tsx

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

package/templates/api-v5/page-ts-module-redux/src/components/AppWrapper.tsx

@@ -1,17 +1,21 @@
-import React from 'react';
+import React, { FC, ComponentProps } from 'react';
+import { Provider } from 'react-redux';
 import { ChaynsProvider, withCompatMode } from 'chayns-api';
 import { PageProvider } from '@chayns-components/core';
 import App from './App';
+import store from '../redux-modules';
 
-const AppWrapper = ({ ...props }) => {
-    return (
-        /* eslint-disable-next-line react/jsx-props-no-spreading */
+const AppWrapper: FC<ComponentProps<typeof ChaynsProvider>> = (props) => (
+    <div className="{{ package-name-underscore }}">
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <ChaynsProvider {...props}>
-            <PageProvider>
-                <App/>
-            </PageProvider>
+            <Provider store={store}>
+                <PageProvider>
+                    <App />
+                </PageProvider>
+            </Provider>
         </ChaynsProvider>
-    )
-}
+    </div>
+);
 
 export default withCompatMode(AppWrapper);

package/templates/api-v5/page-ts-redux/src/components/AppWrapper.tsx

@@ -5,16 +5,14 @@ import { PageProvider } from '@chayns-components/core';
 import App from './App';
 import store from '../redux-modules';
 
-const AppWrapper = () => {
-    return (
-        <ChaynsProvider>
-            <Provider store={store}>
-                <PageProvider>
-                    <App/>
-                </PageProvider>
-            </Provider>
-        </ChaynsProvider>
-    )
-}
+const AppWrapper = () => (
+    <ChaynsProvider>
+        <Provider store={store}>
+            <PageProvider>
+                <App />
+            </PageProvider>
+        </Provider>
+    </ChaynsProvider>
+);
 
 export default AppWrapper;

package/templates/api-v5/page-ts-redux/src/index.html

@@ -9,6 +9,6 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div id="root" {{ tapp-style }}></div>
+        <div id="root"{{ tapp-style }}></div>
     </body>
 </html>

package/templates/api-v5/page-ts-redux/src/index.tsx

@@ -8,4 +8,3 @@ try {
 } catch (e) {
     console.error('Encountered error at `ReactDOM.render`: ', e);
 }
-

package/templates/api-v5/shared/.env.development.local

@@ -1,5 +1,3 @@
-PUBLIC_BUILD_ENV=development
-
 # set your development port here
 PORT=8080
 

package/templates/api-v5/shared/js/src/constants/server-urls.js

@@ -1,2 +1 @@
-
 export const YOUR_WEBAPI_URL = process.env.PUBLIC_YOUR_WEBAPI_URL;

package/templates/api-v5/shared/js/src/redux-modules/index.js

@@ -2,7 +2,7 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { counterReducer } from './counter/slice';
 
 const rootReducer = combineReducers({
-    counter: counterReducer
+    counter: counterReducer,
 });
 
 const Store = configureStore({

package/templates/api-v5/shared/toolkit.config-module.js

@@ -7,7 +7,9 @@ module.exports = buildToolkitConfig({
     },
     output: {
         exposeModules: {
-            './AppWrapper': './src/components/AppWrapper'
+            './AppWrapper': './src/components/AppWrapper',
         },
+        cssVersion: '5.0',
+        prefixCss: true,
     },
-})
+});

package/templates/api-v5/shared/toolkit.config.js

@@ -7,12 +7,12 @@ module.exports = buildToolkitConfig({
     },
     output: {
         entryPoints: {
-            'index': {
+            index: {
                 pathIndex: './src/index',
                 pathHtml: './src/index.html',
             },
             // Add more entrypoints here
         },
-        cssVersion: '5.0'
+        cssVersion: '5.0',
     },
-})
+});

package/templates/api-v5/shared/ts/src/constants/server-urls.ts

@@ -1,2 +1 @@
-
 export const YOUR_WEBAPI_URL = process.env.PUBLIC_YOUR_WEBAPI_URL;

package/templates/api-v5/shared/ts/src/redux-modules/index.ts

@@ -2,7 +2,7 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { counterReducer } from './counter/slice';
 
 const rootReducer = combineReducers({
-    counter: counterReducer
+    counter: counterReducer,
 });
 
 const Store = configureStore({

package/templates/api-v5/shared/ts/src/types/environment.d.ts

@@ -1,7 +1,7 @@
 declare namespace NodeJS {
     interface ProcessEnv {
-        PUBLIC_BUILD_ENV: string;
-        PUBLIC_BUILD_VERSION: string;
+        BUILD_ENV: string;
+        BUILD_VERSION: string;
 
         /* add custom env variables here */
         PUBLIC_YOUR_WEBAPI_URL: string;

package/templates/api-v5/shared/ts/src/types/global.d.ts

@@ -12,3 +12,8 @@ declare module '*.svg?url' {
     const value: string;
     export = value;
 }
+
+declare module '*.json' {
+    const value: any;
+    export default value;
+}