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

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 { selectCounterValue } from '../redux-modules/counter/slice';
 import './app.scss';
 
 const App = () => {
+    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!</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, { ComponentPropsWithoutRef } 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 = (props: ComponentPropsWithoutRef<typeof ChaynsProvider>) => (
+    <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

@@ -1,11 +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 />);
 } 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/{ts/src/constants/server-urls.ts → js/src/constants/serverUrls.js}

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

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

@@ -16,8 +16,13 @@ const slice = createSlice({
             state.value += payload;
         },
     },
+    selectors: {
+        selectCounterState: (state) => state,
+        selectCounterValue: (state) => state.value,
+    },
 });
 
 export const { increment, decrement, incrementByAmount } = slice.actions;
+export const { selectCounterState, selectCounterValue } = slice.selectors;
 export const counterReducer = slice.reducer;
 export const counterSliceName = slice.name;

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

@@ -2,10 +2,14 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { counterReducer } from './counter/slice';
 
 const rootReducer = combineReducers({
-    counter: counterReducer
+    counter: counterReducer,
 });
 
-const Store = configureStore({
+export const createStore = (preloadedState) => configureStore({
     reducer: rootReducer,
+    preloadedState,
 });
-export default Store;
+
+const store = createStore();
+
+export default store;

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/{js/src/constants/server-urls.js → ts/src/constants/serverUrls.ts}

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

package/templates/api-v5/shared/ts/src/hooks/redux.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from '../redux-modules';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

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

@@ -16,8 +16,13 @@ const counterSlice = createSlice({
             state.value += payload;
         },
     },
+    selectors: {
+        selectCounterState: (state) => state,
+        selectCounterValue: (state) => state.value,
+    },
 });
 
 export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export const { selectCounterState, selectCounterValue } = counterSlice.selectors;
 export const counterReducer = counterSlice.reducer;
 export const counterSliceName = counterSlice.name;

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

@@ -2,13 +2,17 @@ import { configureStore, combineReducers } from '@reduxjs/toolkit';
 import { counterReducer } from './counter/slice';
 
 const rootReducer = combineReducers({
-    counter: counterReducer
+    counter: counterReducer,
 });
 
-const Store = configureStore({
+export const createStore = (preloadedState?: RootState) => configureStore({
     reducer: rootReducer,
+    preloadedState,
 });
 
+const store = createStore();
+
 export type RootState = ReturnType<typeof rootReducer>;
-export type AppDispatch = typeof Store.dispatch;
-export default Store;
+export type AppDispatch = ReturnType<typeof createStore>["dispatch"];
+
+export default store;

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;
+}

package/templates/api-v5/shared/ts/tsconfig.json

@@ -1,21 +1,19 @@
 {
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": "src",
-    "checkJs": false,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "isolatedModules": true,
-    "jsx": "react",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
-    "moduleResolution": "Node",
-    "target": "ES2020",
-    "noEmit": true,
-    "skipLibCheck": true,
-    "strict": true
-  }
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true,
+        "baseUrl": "src",
+        "checkJs": false,
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "isolatedModules": true,
+        "jsx": "react",
+        "lib": ["DOM", "ESNext"],
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "noEmit": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true
+    }
 }

package/templates/page/README.md

@@ -13,8 +13,7 @@
 
 ## Get Started
 
-To get started with working on the project first you have to install its
-dependencies:
+To get started with working on the project first you have to install its dependencies:
 
 ```bash
 {{ install-command }}
@@ -24,16 +23,15 @@ Then you will have the following commands available:
 
 ### `{{ run-command }} dev`
 
-This starts the project with a local server for development. Typically this will
-be on [`http://localhost:1234/`](http://localhost:1234/), but this
+This starts the project with a local server for development. Typically this will be on
+[`http://localhost:1234/`](http://localhost:1234/), but this
 [can be adjusted](https://github.com/TobitSoftware/chayns-toolkit#development-options).
 
 ### `{{ run-command }} build`
 
 This builds your project for production.
 
-> If you want to analyze your bundle size you can do so by passing the `-a` flag
-> to this command.
+> If you want to analyze your bundle size you can do so by passing the `-a` flag to this command.
 
 ### `{{ run-command }} lint`
 
@@ -45,7 +43,6 @@ Automatically formats all of the source code in your project.
 
 ---
 
-This project is based on
-[`chayns-toolkit`](https://github.com/TobitSoftware/chayns-toolkit). If you
+This project is based on [`chayns-toolkit`](https://github.com/TobitSoftware/chayns-toolkit). If you
 encounter any issues with the toolchain and the commands, please
 [open an issue](https://github.com/TobitSoftware/chayns-toolkit/issues/new).

package/templates/page/src/index.html

@@ -9,7 +9,7 @@
         <title>{{ readable-package-name }}</title>
     </head>
     <body>
-        <div class="tapp" id="root" {{ tapp-style }}></div>
+        <div class="tapp" id="root"{{ tapp-style }}></div>
         <script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>
     </body>
 </html>

package/templates/shared/README.md

@@ -13,8 +13,7 @@
 
 ## Get Started
 
-To get started with working on the project first you have to install its
-dependencies:
+To get started with working on the project first you have to install its dependencies:
 
 ```bash
 {{ install-command }}
@@ -24,16 +23,15 @@ Then you will have the following commands available:
 
 ### `{{ run-command }} dev`
 
-This starts the project with a local server for development. Typically this will
-be on [`http://localhost:1234/`](http://localhost:1234/), but this
+This starts the project with a local server for development. Typically this will be on
+[`http://localhost:1234/`](http://localhost:1234/), but this
 [can be adjusted](https://github.com/TobitSoftware/chayns-toolkit#development-options).
 
 ### `{{ run-command }} build`
 
 This builds your project for production.
 
-> If you want to analyze your bundle size you can do so by passing the `-a` flag
-> to this command.
+> If you want to analyze your bundle size you can do so by passing the `-a` flag to this command.
 
 ### `{{ run-command }} lint`
 
@@ -45,7 +43,6 @@ Automatically formats all of the source code in your project.
 
 ---
 
-This project is based on
-[`chayns-toolkit`](https://github.com/TobitSoftware/chayns-toolkit). If you
+This project is based on [`chayns-toolkit`](https://github.com/TobitSoftware/chayns-toolkit). If you
 encounter any issues with the toolchain and the commands, please
 [open an issue](https://github.com/TobitSoftware/chayns-toolkit/issues/new).

package/templates/shared/tests/setup.js

@@ -0,0 +1,9 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+
+expect.extend(matchers);
+
+afterEach(() => {
+    cleanup();
+});

package/templates/shared/vitest.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: './tests/setup.js',
+        coverage: {
+            enabled: true,
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+            include: ['src/**'],
+            all: true,
+        },
+    },
+});

package/.github/workflows/publish.yml

@@ -1,21 +0,0 @@
-name: Publish to NPM
-
-on:
-    workflow_dispatch:
-    push:
-        tags:
-            - 'v*'
-
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v1
-              with:
-                  node-version: '20'
-                  registry-url: https://registry.npmjs.org/
-            - run: npm ci
-            - run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}