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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-chayns-app",
-    "version": "1.1.28",
+    "version": "1.2.0-beta.1",
     "private": false,
     "description": "Create a new chayns® development project in one command.",
     "keywords": [
@@ -16,7 +16,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/TobitSoftware/create-chayns-app.git"
+        "url": "git+https://github.com/TobitSoftware/create-chayns-app.git"
     },
     "license": "MIT",
     "author": {
@@ -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/internal/js/src/redux-modules/index.js

@@ -0,0 +1,17 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { counterReducer } from './counter/slice';
+import { loggerMiddleware } from './loggerMiddleware';
+
+const rootReducer = combineReducers({
+    counter: counterReducer,
+});
+
+export const createStore = (preloadedState) => configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware),
+    preloadedState,
+});
+
+const store = createStore();
+
+export default store;

package/templates/api-v5/internal/js/src/redux-modules/loggerMiddleware.js

@@ -0,0 +1,31 @@
+import logger from "../utils/logger";
+
+export const loggerMiddleware = () => (next) => (action) => {
+    try {
+        const metaAction = action;
+        if (metaAction.meta.requestStatus === 'rejected') {
+            if (metaAction.meta.aborted || metaAction.meta.condition) {
+                return next(action);
+            }
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.log('redux action error', action);
+            }
+            logger.error({
+                message: 'redux action error',
+                customText: metaAction.type,
+                data: { arg: metaAction.meta.arg },
+                section: 'redux-modules/loggerMiddleware',
+            }, metaAction.error);
+        }
+        return next(action);
+    } catch (ex) {
+        logger.error({
+            message: 'error in store',
+            data: {
+                action,
+            }
+        }, ex);
+    }
+    return undefined;
+};

package/templates/api-v5/internal/js/src/utils/logger.js

@@ -0,0 +1,31 @@
+import { getCurrentPage, getSite, getUser } from 'chayns-api';
+import { ChaynsLogger } from 'chayns-logger';
+
+const logger = new ChaynsLogger({
+    // TODO: create and insert your applicationUid
+    applicationUid: '<applicationUid>',
+    overrideOnError: true,
+    overrideConsoleError: process.env.NODE_ENV !== 'development',
+    useDevServer: process.env.NODE_ENV === 'development' || ['qa', 'development'].includes(process.env.BUILD_ENV),
+    version: process.env.BUILD_VERSION,
+    throttleTime: 1000,
+    middleware: (payload) => {
+        try {
+            const currentPage = getCurrentPage();
+            // eslint-disable-next-line no-param-reassign
+            payload.siteId ??= currentPage.siteId;
+            // eslint-disable-next-line no-param-reassign
+            payload.customNumber ??= currentPage.id;
+            // eslint-disable-next-line no-param-reassign
+            payload.personId ??= getUser()?.personId;
+            // eslint-disable-next-line no-param-reassign
+            payload.locationId ??= getSite().locationId;
+        } catch {
+            //
+        }
+
+        return true;
+    },
+});
+
+export default logger;

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

@@ -0,0 +1,20 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { counterReducer } from './counter/slice';
+import { loggerMiddleware } from './loggerMiddleware';
+
+const rootReducer = combineReducers({
+    counter: counterReducer,
+});
+
+export const createStore = (preloadedState?: RootState) => configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(loggerMiddleware),
+    preloadedState,
+});
+
+const store = createStore();
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppDispatch = ReturnType<typeof createStore>["dispatch"];
+
+export default store;

package/templates/api-v5/internal/ts/src/redux-modules/loggerMiddleware.ts

@@ -0,0 +1,45 @@
+import { Middleware } from "@reduxjs/toolkit";
+import logger from "../utils/logger";
+
+type MetaAction = {
+    type: string;
+    payload: unknown;
+    meta: {
+        arg: unknown;
+        requestId: string;
+        requestStatus: 'pending' | 'rejected' | 'fulfilled';
+        aborted?: boolean;
+        condition?: boolean;
+    },
+    error?: Error;
+}
+
+export const loggerMiddleware: Middleware = () => (next) => (action) => {
+    try {
+        const metaAction = action as MetaAction;
+        if (metaAction.meta.requestStatus === 'rejected') {
+            if (metaAction.meta.aborted || metaAction.meta.condition) {
+                return next(action);
+            }
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.log('redux action error', action);
+            }
+            logger.error({
+                message: 'redux action error',
+                customText: metaAction.type,
+                data: { arg: metaAction.meta.arg },
+                section: 'redux-modules/loggerMiddleware',
+            }, metaAction.error);
+        }
+        return next(action);
+    } catch (ex) {
+        logger.error({
+            message: 'error in store',
+            data: {
+                action,
+            }
+        }, ex as Error);
+    }
+    return undefined;
+};

package/templates/api-v5/internal/ts/src/utils/logger.ts

@@ -0,0 +1,31 @@
+import { getCurrentPage, getSite, getUser } from 'chayns-api';
+import { ChaynsLogger } from 'chayns-logger';
+
+const logger = new ChaynsLogger({
+    // TODO: create and insert your applicationUid
+    applicationUid: '<applicationUid>',
+    overrideOnError: true,
+    overrideConsoleError: process.env.NODE_ENV !== 'development',
+    useDevServer: process.env.NODE_ENV === 'development' || ['qa', 'development'].includes(process.env.BUILD_ENV),
+    version: process.env.BUILD_VERSION,
+    throttleTime: 1000,
+    middleware: (payload) => {
+        try {
+            const currentPage = getCurrentPage();
+            // eslint-disable-next-line no-param-reassign
+            payload.siteId ??= currentPage.siteId;
+            // eslint-disable-next-line no-param-reassign
+            payload.customNumber ??= currentPage.id;
+            // eslint-disable-next-line no-param-reassign
+            payload.personId ??= getUser()?.personId;
+            // eslint-disable-next-line no-param-reassign
+            payload.locationId ??= getSite().locationId;
+        } catch {
+            //
+        }
+
+        return true;
+    },
+});
+
+export default logger;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 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 { selectCounterValue } from '../redux-modules/counter/slice';
+import './app.scss';
 
 const App = () => {
-    const counter = useSelector(selectCount);
+    const counter = useSelector(selectCounterValue);
 
-    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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import AppWrapper from './components/AppWrapper';
-
+{{ logger-import }}
 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, { ComponentPropsWithoutRef } 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 = (props: ComponentPropsWithoutRef<typeof ChaynsProvider>) => (
+    <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);