add sideEffects: false; adj. some type imports; change workspace config; cleanup deps;

Author: elbakerino

.github/workflows/blank.yml

@@ -19,29 +19,29 @@ jobs:
             matrix:
                 node-version: [ 18.x ]
         steps:
-            -   uses: actions/checkout@v3
+            -   uses: actions/checkout@v4
             -   name: Set Branch
                 id: short_ref
-                run: echo ::set-output name=short_ref::${GITHUB_REF#refs/*/}
+                run: echo "short_ref=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
             -   name: Set git_url_commit
                 id: git_url_commit
-                run: echo ::set-output name=git_url_commit::${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/commit/${GITHUB_SHA}
+                run: echo "git_url_commit=${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/commit/${GITHUB_SHA}" >> $GITHUB_OUTPUT
             -   name: Set git_url_ci_run
                 id: git_url_ci_run
-                run: echo ::set-output name=git_url_ci_run::${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}
+                run: echo "git_url_ci_run=${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}" >> $GITHUB_OUTPUT
             -   name: Set git_commit
                 id: git_commit
-                run: echo ::set-output name=git_commit::${GITHUB_REPOSITORY}/${GITHUB_SHA}
+                run: echo "git_commit=${GITHUB_REPOSITORY}/${GITHUB_SHA}" >> $GITHUB_OUTPUT
             -   name: Set git_ci_run
                 id: git_ci_run
-                run: echo ::set-output name=git_ci_run::${GITHUB_REPOSITORY}/${GITHUB_RUN_ID}
+                run: echo "git_ci_run=${GITHUB_REPOSITORY}/${GITHUB_RUN_ID}" >> $GITHUB_OUTPUT
             -   name: Use Node.js ${{ matrix.node-version }}
-                uses: actions/setup-node@v3
+                uses: actions/setup-node@v4
                 with:
                     node-version: ${{ matrix.node-version }}
 
             -   name: Cache CI node_modules
-                uses: actions/cache@v3
+                uses: actions/cache@v4
                 env:
                     cache-name: cache-node-modules
                 with:
@@ -52,8 +52,6 @@ jobs:
             -   name: Install Deps
                 run: |
                     npm ci
-                    cd server/feed
-                    npm ci
 
             -   name: Build
                 env:
@@ -89,7 +87,7 @@ jobs:
                     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
             -   name: Upload Artifact APP
-                uses: actions/upload-artifact@v3
+                uses: actions/upload-artifact@v4
                 with:
                     name: app-artifact
                     path: apps/demo/build

.gitignore

@@ -10,7 +10,7 @@
 # default upload dir
 /upload
 
-# NodeJS
+# Node.js
 node_modules
 
 # Logs

README.md

@@ -29,21 +29,18 @@ npm i -S @content-ui/md @content-ui/react @content-ui/struct @content-ui/md-mui
 npm i -S react-progress-state @ui-controls/progress @ui-schema/kit-codemirror @codemirror/state
 ```
 
-> all packages are ESM-only, those with the `ESM` flag support strict-ESM for browser + NodeJS
+> all packages are ESM-only, those with the `ESM` flag support strict-ESM for browser + Node.js
 
 See [CustomCodeMirror.tsx](./apps/demo/src/components/CustomCodeMirror.tsx) for an example CodeMirror component, for viewer and input, with nested syntax highlighting and quite some other things.
 
 See [WidgetMarkdownEditor.tsx](./apps/demo/src/components/CustomWidgets/WidgetMarkdownEditor.tsx) for an example [UI-Schema widget](https://ui-schema.bemit.codes) with Markdown editor, linting and preview.
 
 ## Development
 
-Clone repository, then install all NodeJS deps:
+Clone repository, then install all dependencies:
 
 ```shell
 npm i
-
-cd server/feed
-npm i
 ```
 
 Start development servers from root folder:

apps/demo/.gitignore

@@ -10,7 +10,7 @@
 # default upload dir
 /upload
 
-# NodeJS
+# Node.js
 node_modules
 
 # Logs

apps/demo/package.json

@@ -0,0 +1,100 @@
+{
+    "name": "@content-ui/dev-demo",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "start": "cross-env PORT=4221 npm run webpack-dev-server -- --config webpack.config.js",
+        "build": "npm run webpack -- --config webpack.config.js",
+        "webpack": "cross-env NODE_ENV=production webpack --mode=production",
+        "webpack-dev-server": "cross-env NODE_ENV=development webpack-dev-server --mode=development --hot"
+    },
+    "type": "module",
+    "license": "MIT",
+    "dependencies": {
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/lang-json": "^6.0.0",
+        "@codemirror/lang-lezer": "^6.0.0",
+        "@codemirror/lang-markdown": "^6.0.0",
+        "@codemirror/language": "^6.1.0",
+        "@codemirror/language-data": "^6.1.0",
+        "@codemirror/legacy-modes": "^6.1.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@content-ui/input": "*",
+        "@content-ui/md": "*",
+        "@content-ui/md-mui": "*",
+        "@content-ui/struct": "*",
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.10",
+        "@mui/lab": "^5.0.0-alpha.80",
+        "@mui/material": "^5.1",
+        "@mui/x-date-pickers": "^5.0.16",
+        "@ui-controls/progress": "~0.0.4",
+        "@ui-schema/dictionary": "~0.0.11",
+        "@ui-schema/ds-material": "~0.4.1",
+        "@ui-schema/kit-codemirror": "~0.1.1",
+        "@ui-schema/material-code": "~0.4.4",
+        "@ui-schema/material-pickers": "^0.4.0-alpha.4",
+        "@ui-schema/ui-schema": "~0.4.5",
+        "i18next": "^22.0.4",
+        "i18next-browser-languagedetector": "^7.0.1",
+        "i18next-chained-backend": "^4.0.0",
+        "i18next-http-backend": "^2.0.1",
+        "i18next-localstorage-backend": "^4.0.0",
+        "i18next-resources-to-backend": "^1.0.0",
+        "immutable": "^4.0.0",
+        "moment": "^2.29.4",
+        "nanoid": "^4.0.0",
+        "react": "^18.3.1",
+        "react-api-fetch": "~0.3.1",
+        "react-dom": "^18.3.1",
+        "react-helmet": "^6.1.0",
+        "react-i18next": "^11.18.6",
+        "react-progress-state": "~0.3.1",
+        "react-router": "^6.26.2",
+        "react-router-dom": "^6.26.2",
+        "react-use-immutable": "~0.2.1",
+        "react-use-snack": "~0.1.0",
+        "typescript": "~5.3.3"
+    },
+    "devDependencies": {
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+        "@types/react": "^18.3.8",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-helmet": "^6.1.11",
+        "babel-loader": "^9.2.1",
+        "concurrently": "^9.0.1",
+        "copy-webpack-plugin": "^12.0.2",
+        "cross-env": "^7.0.3",
+        "css-loader": "^7.1.2",
+        "dotenv": "^16.4.5",
+        "eslint-webpack-plugin": "^4.2.0",
+        "html-webpack-plugin": "^5.6.0",
+        "react-dev-utils": "^12.0.1",
+        "react-refresh": "^0.14.2",
+        "rimraf": "^5.0.10",
+        "style-loader": "^4.0.0",
+        "terser-webpack-plugin": "^5.3.10",
+        "ts-node": "^10.9.2",
+        "tsconfig-paths-webpack-plugin": "^4.1.0",
+        "webpack": "^5.94.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.2"
+    },
+    "workspaces": {
+        "packages": [
+            "./apps/sandbox",
+            "./server/feed",
+            "./packages/input",
+            "./packages/md",
+            "./packages/md-mui",
+            "./packages/react",
+            "./packages/struct"
+        ]
+    }
+}

apps/demo/src/App.tsx

@@ -1,8 +1,6 @@
 import { contentUIDecorators, ContentLeafsProvider } from '@content-ui/react/ContentLeafsContext'
 import React from 'react'
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
-import { DndProvider } from 'react-dnd'
-import { HTML5Backend } from 'react-dnd-html5-backend'
 import CssBaseline from '@mui/material/CssBaseline'
 import { customTheme } from './theme'
 import { Layout } from './components/Layout'
@@ -115,9 +113,7 @@ export const App: React.ComponentType<{}> = () => {
                             <LocalizationProvider dateAdapter={AdapterMoment}>
                                 <UIMetaProvider t={browserT} widgets={customWidgets}>
                                     <ContentLeafsProvider deco={contentUIDecorators} renderMap={contentUIMapping}>
-                                        <DndProvider backend={HTML5Backend}>
-                                            <Layout/>
-                                        </DndProvider>
+                                        <Layout/>
                                     </ContentLeafsProvider>
                                 </UIMetaProvider>
                             </LocalizationProvider>

apps/demo/src/lib/toHumanSize.ts

@@ -1,5 +1,3 @@
-// import { useAuthToken } from '@control-ui/auth'
-// import { IAuthTokenMsal } from '@control-ui/auth-msal'
 import { extractHeaders, headersJson, useApi } from 'react-api-fetch'
 import { FetcherFetchMethod } from 'react-api-fetch/fetcher'
 
@@ -16,7 +14,6 @@ export type ApiConnect<D = {}, HR = {}> =
     } & HR>
 
 export const useAppApi = (): ApiConnect => {
-    // const {appToken} = useAuthToken<IAuthTokenMsal>()
     return useApi({
         // bearer: appToken ? 'Bearer ' + appToken : undefined,
         extractHeaders: extractHeaders,

apps/demo/src/lib/urlHelper.ts

@@ -0,0 +1,3 @@
+{
+    "extends": "../../tsconfig.json"
+}

apps/demo/src/lib/useAppApi.ts

@@ -62,6 +62,7 @@ export default {
                         cacheDirectory: true,
                         cacheCompression: false,
                         compact: minimize,
+                        rootMode: 'upward',
                         plugins: isProd ? [] : [reactRefreshBabel],
                     },
                 }],
@@ -109,76 +110,6 @@ export default {
             providedExports: true,
             usedExports: true,
         } : {},
-        splitChunks: isProd ?
-            {
-                chunks: 'all',
-                usedExports: true,
-                maxAsyncRequests: 35,
-                maxInitialRequests: 35,
-                cacheGroups: {
-                    react: {
-                        test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-                        // reuseExistingChunk: true,
-                        usedExports: true,
-                        name: 'react',
-                        priority: 10,
-                        chunks: 'all',
-                        enforce: true,
-                    },
-                    uic: {
-                        test: /[\\/]node_modules[\\/](@mui|@emotion|@control-ui|@bemit)[\\/]/,
-                        usedExports: true,
-                        name: 'uic',
-                        priority: 9,
-                        chunks: 'all',
-                        minChunks: 1,
-                        minSize: 175000,
-                        maxSize: 475000,
-                        // enforce: true,
-                    },
-                    common: {
-                        test: /[\\/]node_modules[\\/](immutable|react-helmet|react-error-boundary|react-router|react-router-dom|i18next*|react-i18next)[\\/]/,
-                        usedExports: true,
-                        name: 'cmn',
-                        priority: 8,
-                        chunks: 'all',
-                        minChunks: 1,
-                        minSize: 275000,
-                        maxSize: 375000,
-                        // enforce: true,
-                    },
-                    vendor: {
-                        test: /[\\/]node_modules[\\/]/,
-                        reuseExistingChunk: true,
-                        usedExports: true,
-                        name: 'vendor',
-                        chunks: 'all',
-                        priority: -2,
-                        minChunks: 5,
-                        maxSize: 265000,
-                    },
-                    defaultVendors: {
-                        test: /[\\/]node_modules[\\/]/,
-                        priority: -10,
-                        reuseExistingChunk: true,
-                        minSize: 125000,
-                        maxSize: 420000,
-                    },
-                },
-            } :
-            {
-                chunks: 'all',
-                name: false,
-                cacheGroups: {
-                    default: false,
-                    vendors: {
-                        chunks: 'all',
-                        test: /[\\/]node_modules[\\/]/,
-                        reuseExistingChunk: true,
-                        priority: -15,
-                    },
-                },
-            },
     },
     devServer: {
         static: [