create-chayns-app 1.1.5 → 1.1.6

package/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"

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useSite } from "chayns-api";
+
+const App = () => {
+    const { title } = useSite();
+    return <h1>Hi! Welcome to your newly created chayns application! {title}</h1>;
+};
+
+export default App;

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, user-scalable=no"
+        />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+        <%= CHAYNS_TOOLKIT_CSS_TAG %>
+
+        <title>{{ readable-package-name }}</title>
+    </head>
+    <body>
+        <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/api-v5/page/src/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ChaynsProvider } from "chayns-api";
+
+import App from './components/App';
+
+chayns.ready
+    .then(() => {
+        try {
+            ReactDOM.render(<ChaynsProvider><App /></ChaynsProvider>, document.querySelector('#root'));
+        } catch (e) {
+            console.error('Encountered error at `ReactDOM.render`: ', e);
+        }
+    })
+    .catch((error) => {
+        console.warn('No chayns environment found.', error);
+    });

package/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;

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

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

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

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

package/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;

package/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);

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const App = () => {
+    return <h1>Hi! Welcome to your newly created chayns application!${counter}</h1>;
+};
+
+export default App;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from "react-redux";
+import { ChaynsProvider } from 'chayns-api';
+import store from '../redux-modules';
+import App from "./App";
+
+const AppWrapper = () => {
+    return (
+        <ChaynsProvider>
+            <Provider store={store}>
+                <App />
+            </Provider>
+        </ChaynsProvider>
+    )
+}
+
+export default AppWrapper;

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, user-scalable=no"
+        />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+        <%= CHAYNS_TOOLKIT_CSS_TAG %>
+
+        <title>{{ readable-package-name }}</title>
+    </head>
+    <body>
+        <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/api-v5/page-redux/src/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AppWrapper from "./components/AppWrapper";
+
+chayns.ready
+    .then(() => {
+        try {
+            ReactDOM.render(<AppWrapper/>, document.querySelector('#root'));
+        } catch (e) {
+            console.error('Encountered error at `ReactDOM.render`: ', e);
+        }
+    })
+    .catch((error) => {
+        console.warn('No chayns environment found.', error);
+    });

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const App = () => {
+    return <h1>Hello World! Welcome to your newly created chayns application!</h1>;
+};
+
+export default App;

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, user-scalable=no"
+        />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+        <%= CHAYNS_TOOLKIT_CSS_TAG %>
+
+        <title>{{ readable-package-name }}</title>
+    </head>
+    <body>
+        <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/api-v5/page-ts/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ChaynsProvider } from 'chayns-api';
+import App from './components/App';
+
+chayns.ready
+    .then(() => {
+        try {
+            ReactDOM.render(<ChaynsProvider><App /></ChaynsProvider>, document.querySelector('#root'));
+        } catch (e) {
+            console.error('Encountered error at `ReactDOM.render`: ', e);
+        }
+    })
+    .catch((error: Error) => {
+        console.warn('No chayns environment found.', error);
+    });

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

@@ -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 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!</h1>
+        </WaitUntil></div>);
+};
+
+export default App;

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

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

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { WaitUntil } from "chayns-api";
+import { SmallWaitCursor } from "chayns-components";
+
+import './app.scss';
+
+const App = () => {
+
+    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!</h1>
+        </WaitUntil></div>);
+};
+
+export default App;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const App = () => {
+    return <h1>Hi! Welcome to your newly created chayns application!</h1>;
+};
+
+export default App;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { ChaynsProvider } from "chayns-api";
+import App from "./App";
+import store from '../redux-modules';
+
+const AppWrapper = ({ ...props }) => {
+    return (
+        <ChaynsProvider {...props}>
+            <Provider store={store}>
+                <App/>
+            </Provider>
+        </ChaynsProvider>
+    )
+}
+
+export default AppWrapper;

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, user-scalable=no"
+        />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+        <%= CHAYNS_TOOLKIT_CSS_TAG %>
+
+        <title>{{ readable-package-name }}</title>
+    </head>
+    <body>
+        <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/api-v5/page-ts-redux/src/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AppWrapper from './components/AppWrapper';
+
+chayns.ready
+    .then(() => {
+        try {
+            ReactDOM.render(<AppWrapper />, document.querySelector('#root'));
+        } catch (e) {
+            console.error('Encountered error at `ReactDOM.render`: ', e);
+        }
+    })
+    .catch((error: Error) => {
+        console.warn('No chayns environment found.', error);
+    });

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

@@ -0,0 +1,3 @@
+import { counterSliceName } from "./counterSlice";
+
+export const selectCount = (state) => state[counterSliceName].value;

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

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { value: 0 };
+
+const counterSlice = createSlice({
+    name: 'counter',
+    initialState,
+    reducers: {
+        increment(state) {
+            state.value++;
+        },
+        decrement(state) {
+            state.value--;
+        },
+        incrementByAmount(state, { payload }) {
+            state.value += payload;
+        },
+    },
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export const counterReducer = counterSlice.reducer;
+export const counterSliceName = counterSlice.name;

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

@@ -0,0 +1,11 @@
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { counterReducer } from "./counter/counterSlice";
+
+const rootReducer = combineReducers({
+    counter: counterReducer
+});
+
+const Store = configureStore({
+    reducer: rootReducer,
+});
+export default Store;

package/templates/api-v5/shared/js/template-package-redux.json

@@ -0,0 +1,36 @@
+{
+  "name": "{{ package-name }}",
+  "version": "1.0.0",
+  "private": true,
+  "description": "{{ description }}",
+  "keywords": ["chayns", "chayns-toolkit", "react"],
+  "scripts": {
+    "build": "chayns-toolkit build",
+    "dev": "chayns-toolkit dev",
+    "start": "chayns-toolkit dev",
+    "format": "prettier . --write",
+    "lint": "chayns-toolkit lint"
+  },
+  "prettier": {
+    "proseWrap": "always",
+    "singleQuote": true,
+    "tabWidth": 4
+  },
+  "eslintConfig": {
+    "extends": "@chayns-toolkit"
+  },
+  "dependencies": {
+    "chayns-components": "^4.24.25",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "chayns-api": "^1.0.0",
+    "react-redux": "^8.0.4",
+    "@reduxjs/toolkit": "^1.8.6"
+  },
+  "devDependencies": {
+    "chayns-toolkit": "^2.0.0-beta.26",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.3.0"
+  }
+}

package/templates/api-v5/shared/js/template-package.json

@@ -0,0 +1,34 @@
+{
+    "name": "{{ package-name }}",
+    "version": "1.0.0",
+    "private": true,
+    "description": "{{ description }}",
+    "keywords": ["chayns", "chayns-toolkit", "react"],
+    "scripts": {
+        "build": "chayns-toolkit build",
+        "dev": "chayns-toolkit dev",
+        "start": "chayns-toolkit dev",
+        "format": "prettier . --write",
+        "lint": "chayns-toolkit lint"
+    },
+    "prettier": {
+        "proseWrap": "always",
+        "singleQuote": true,
+        "tabWidth": 4
+    },
+    "eslintConfig": {
+        "extends": "@chayns-toolkit"
+    },
+    "dependencies": {
+        "chayns-components": "^4.24.25",
+        "prop-types": "^15.8.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "chayns-api": "^1.0.0"
+    },
+    "devDependencies": {
+        "chayns-toolkit": "^2.0.0-beta.26",
+        "prettier": "^2.7.1",
+        "prettier-plugin-packagejson": "^2.3.0"
+    }
+}

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

@@ -0,0 +1,9 @@
+module.exports = {
+    output: {
+        exposeModules: {
+            './AppWrapper': './src/components/AppWrapper'
+        },
+        apiVersion: 5,
+        prefixCss: true
+    },
+}

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

@@ -0,0 +1,5 @@
+module.exports = {
+    output: {
+        apiVersion: 5,
+    },
+}

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

@@ -0,0 +1,4 @@
+import { counterSliceName } from "./counterSlice";
+import { RootState } from "../index";
+
+export const selectCount = (state: RootState) => state[counterSliceName].value;

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

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { value: 0 };
+
+const counterSlice = createSlice({
+    name: 'counter',
+    initialState,
+    reducers: {
+        increment(state) {
+            state.value++;
+        },
+        decrement(state) {
+            state.value--;
+        },
+        incrementByAmount(state, { payload }) {
+            state.value += payload;
+        },
+    },
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export const counterReducer = counterSlice.reducer;
+export const counterSliceName = counterSlice.name;