From 04aa5097a4c9ba013792db738c8462fcaaf983fe Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Mon, 25 Mar 2024 20:36:38 -0400
Subject: [PATCH 01/17] add rollup to generate json

---
 .../generate-json-from-object-plugin.mjs      | 54 +++++++++++++++++++
 packages-modules/counter/browser/package.json |  2 +-
 .../counter/browser/rollup.config.mjs         | 15 +++++-
 .../src/apollo-server-n-client/compute.tsx    |  8 ++-
 .../counter/browser/src/common/compute.tsx    |  7 +--
 .../counter/browser/src/compute-ref.ts        |  4 ++
 .../counter/browser/src/emotion/compute.tsx   |  7 +--
 .../src/redux-first-history/compute.tsx       | 14 +++--
 .../src/redux-first-history/module.tsx        |  6 +--
 .../counter/browser/src/utils/menu.ts         | 43 +++++++--------
 .../counter/browser/tsconfig.json             |  5 --
 11 files changed, 108 insertions(+), 57 deletions(-)
 create mode 100644 packages-modules/counter/browser/generate-json-from-object-plugin.mjs
 create mode 100644 packages-modules/counter/browser/src/compute-ref.ts

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
new file mode 100644
index 000000000..fdb495852
--- /dev/null
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -0,0 +1,54 @@
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import { promisify } from 'util';
+import glob from 'glob';
+import fs from 'fs';
+import path from 'path';
+
+const globPromise = promisify(glob.glob); // Make sure to call .glob here
+
+export default function generateJsonFromSpecificFiles(options = {}) {
+    const {
+        pattern = '**/**/compute.js', // Pattern to match files
+        dist = 'lib', // Default output directory
+        outputFile = 'routes.json', // Output filename
+    } = options;
+
+    return {
+        name: 'aggregate-compute-routes',
+        async writeBundle() { // Changed from generateBundle to writeBundle
+            console.log('Processing with pattern:', pattern, 'in directory:', dist);
+            const files = await globPromise(path.join(dist, pattern), { absolute: true }); // Ensure paths are absolute
+            const basePath = process.cwd();
+            const relativeFiles = files.map(file => path.relative(basePath, file));
+        
+            // const files = await globPromise('./lib/redux-first-history/compute.js'); // Ensure paths are absolute
+            console.log('files---', files)
+            let allFilteredRoutes = [];
+
+            for (const file of relativeFiles) {
+                const relativePath = file.startsWith('.') ? file : `./${file}`;
+
+                try {
+                    // Dynamically import the JS file assuming it exports filteredRoutes
+                    const module = await import(relativePath); // file is already absolute
+                    if (module.filteredRoutes) {
+                        allFilteredRoutes.push(...module.filteredRoutes);
+                    }
+                } catch (error) {
+                    this.warn(`Error importing ${file}: ${error}`);
+                }
+            }
+
+            // Ensure the dist directory exists
+            if (!fs.existsSync(dist)) {
+                fs.mkdirSync(dist, { recursive: true });
+            }
+
+            // Specify the output file path and write the aggregated filteredRoutes to a JSON file
+            const outputPath = path.join(dist, outputFile);
+            fs.writeFileSync(outputPath, JSON.stringify(allFilteredRoutes, null, 2), 'utf8');
+            console.log(`Aggregated filtered routes have been written to ${outputPath}`);
+        },
+    };
+}
diff --git a/packages-modules/counter/browser/package.json b/packages-modules/counter/browser/package.json
index 660cc2805..9d7e00a7a 100755
--- a/packages-modules/counter/browser/package.json
+++ b/packages-modules/counter/browser/package.json
@@ -6,6 +6,7 @@
   "author": "CDMBase LLC",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "yarn build:clean && yarn build:lib",
     "build:clean": "rimraf lib",
@@ -28,7 +29,6 @@
     "@rollup/plugin-image": "*",
     "@rollup/plugin-typescript": "*",
     "react": "*",
-    "react-native": "*",
     "react-redux": "*",
     "react-router": "*",
     "react-router-dom": "*",
diff --git a/packages-modules/counter/browser/rollup.config.mjs b/packages-modules/counter/browser/rollup.config.mjs
index 78e79fc1c..494a54296 100644
--- a/packages-modules/counter/browser/rollup.config.mjs
+++ b/packages-modules/counter/browser/rollup.config.mjs
@@ -2,10 +2,19 @@ import graphql from '@rollup/plugin-graphql';
 import image from '@rollup/plugin-image';
 import typescript from '@rollup/plugin-typescript';
 import { string } from 'rollup-plugin-string';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+import generateJsonFromObject from './generate-json-from-object-plugin.mjs';
 
 const bundle = (config) => ({
     ...config,
-    input: 'src/index.ts',
+    input: [
+        './src/index.ts',
+        './src/redux-first-history/compute.tsx',
+        './src/apollo-server-n-client/compute.tsx',
+        './src/common/compute.tsx',
+        './src/redux-first-history/compute.tsx',
+    ],
     // marking all node modules as external
     external: (id) => !/^[./]/.test(id),
 });
@@ -22,6 +31,10 @@ export default [
                 include: '**/*.graphql',
             }),
             typescript({ noEmitOnError: true }),
+            generateJsonFromObject({
+                // include: ['src/**/*.tsx'], // Adjust this pattern to match your files
+                // You can also exclude files if necessary
+              }),
         ],
         output: [
             {
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
index e5718abfd..0dcf1c474 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { IMenuPosition } from '@common-stack/client-react';
-import loadable from '@loadable/component'
 import { getFilteredMenus, getFilteredRoutes } from '../utils';
 
-const Dashboard = loadable(() => import('../common/components/Dashboard'));
-const Counter = loadable(() => import('./containers/Counter'));
-
 export const counterPageStore: any[] = [
     {
         exact: false,
@@ -16,14 +12,16 @@ export const counterPageStore: any[] = [
         position: IMenuPosition.MIDDLE,
         name: 'Apollo Server',
         path: '/apollo-server-n-client',
+        file: import('../common/components/Dashboard'),
     },
     {
         key: 'counter',
         name: 'Counter',
         icon: 'appstore-o',
-        component: Counter,
+        // component: Counter,
         position: IMenuPosition.MIDDLE,
         path: '/apollo-server-n-client/counter',
+        // file: import('./containers/Counter'),
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/common/compute.tsx b/packages-modules/counter/browser/src/common/compute.tsx
index 6dd70c972..5447ce467 100755
--- a/packages-modules/counter/browser/src/common/compute.tsx
+++ b/packages-modules/counter/browser/src/common/compute.tsx
@@ -1,19 +1,16 @@
-import * as React from 'react';
 import { IMenuPosition } from '@common-stack/client-react';
-import loadable from '@loadable/component'
 
 import { getFilteredMenus, getFilteredRoutes } from '../utils';
 
-const Home = loadable(() => import('../common/components/Home'));
-
 export const commonPageStore: any[] = [
     {
         path: '/',
         key: 'home',
         exact: true,
         name: 'Home',
-        component: Home,
+        // component: Home,
         position: IMenuPosition.MIDDLE,
+        file: import('../common/components/Home'),
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/compute-ref.ts b/packages-modules/counter/browser/src/compute-ref.ts
new file mode 100644
index 000000000..4c32275d3
--- /dev/null
+++ b/packages-modules/counter/browser/src/compute-ref.ts
@@ -0,0 +1,4 @@
+// import './apollo-server-n-client/compute';
+// import './common/compute';
+import './redux-first-history/compute';
+// import './emotion/compute';
diff --git a/packages-modules/counter/browser/src/emotion/compute.tsx b/packages-modules/counter/browser/src/emotion/compute.tsx
index 5c1f12d73..717f27b86 100755
--- a/packages-modules/counter/browser/src/emotion/compute.tsx
+++ b/packages-modules/counter/browser/src/emotion/compute.tsx
@@ -1,20 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react';
 import { IMenuPosition } from '@common-stack/client-react';
-import loadable from '@loadable/component'
 
 import { getFilteredMenus, getFilteredRoutes } from '../utils';
 
-const ComplexWithTheme = loadable(() => import('./components/CompledWithTheme'));
-
 export const emotionPageStore: any[] = [
     {
-        component: ComplexWithTheme,
+        // component: ComplexWithTheme,
         tab: 'Emotion Styling',
         key: 'emotion',
         position: IMenuPosition.MIDDLE,
         name: 'Emotion Styling',
         path: '/emotion',
+        file: import('./components/CompledWithTheme')
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/redux-first-history/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
index f9b2aa924..90f683b54 100755
--- a/packages-modules/counter/browser/src/redux-first-history/compute.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
@@ -1,14 +1,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import * as React from 'react';
 import { IMenuPosition, IRoute } from '@common-stack/client-react';
-import loadable  from '@loadable/component'
 
-import { getFilteredMenus, getFilteredRoutes } from '../utils';
+import { getFilteredMenus, getFilteredRoutes } from '../utils/menu';
 import { CONNECTED_REACT_ROUTER_ROUTES_TYPES } from './constants';
 
-const Dashboard = loadable(() => import('../common/components/Dashboard'));
-const Counter = loadable(() => import('./components/Counter'));
-const Hello = loadable(() => import('./components/Hello'));
 
 export const counterPageStore: IRoute[] = [
     {
@@ -19,24 +14,27 @@ export const counterPageStore: IRoute[] = [
         name: 'Redux First History',
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
+        file: import('../common/components/Dashboard'),
     },
     {
         exact: true,
         icon: 'export',
         name: 'Hello',
-        component: Hello,
+        // component: Hello,
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
+        file: import('./components/Hello'),
     },
     {
         exact: true,
         icon: 'export',
         name: 'Counter',
-        component: Counter,
+        // component: Counter,
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
+        file: import('./components/Counter'),
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/redux-first-history/module.tsx b/packages-modules/counter/browser/src/redux-first-history/module.tsx
index d51765bc4..c99ca6b3c 100755
--- a/packages-modules/counter/browser/src/redux-first-history/module.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/module.tsx
@@ -4,11 +4,11 @@ import { Feature } from '@common-stack/client-react';
 import Counter from './components/Counter';
 import NavBar from './components/NavBar';
 import connectedReactRouterCounter from './redux';
-import { filteredRoutes, filteredMenus } from './compute';
+// import { filteredRoutes, filteredMenus } from './compute';
 
 export default new Feature({
     navItem: <Counter />, // used in electron
-    menuConfig: filteredMenus,
-    routeConfig: filteredRoutes,
+    // menuConfig: filteredMenus,
+    // routeConfig: filteredRoutes,
     reducer: { connectedReactRouterCounter },
 });
diff --git a/packages-modules/counter/browser/src/utils/menu.ts b/packages-modules/counter/browser/src/utils/menu.ts
index 74c7de95c..67ecc596e 100755
--- a/packages-modules/counter/browser/src/utils/menu.ts
+++ b/packages-modules/counter/browser/src/utils/menu.ts
@@ -9,32 +9,27 @@ const filterStore = (store, selected) => {
         }
     });
 
-    return cloned.filter((item) => (
-        Array.isArray(item.routes) || selected.indexOf(item.key) !== -1)
-    );
-}
+    return cloned.filter((item) => Array.isArray(item.routes) || selected.indexOf(item.key) !== -1);
+};
 
 export const getFilteredMenus = (accountPageStore, selectedMenu) =>
-    filterStore(accountPageStore, selectedMenu)
-        .map((item) => {
-            const { path, component, ...rest } = item;
-            return {
-                [path]: { name: rest.tab, ...rest },
-            };
-        });
+    filterStore(accountPageStore, selectedMenu).map((item) => {
+        const { path, component, ...rest } = item;
+        return {
+            [path]: { name: rest.tab, ...rest },
+        };
+    });
 
-export const getFilteredRoutes = (accountPageStore, selectedRoutes) => 
-    filterStore(accountPageStore, selectedRoutes)
-        .map((item) => {
-            const { path } = item;
-            return {
-                [path]: item,
-            };
-        });
+export const getFilteredRoutes = (accountPageStore, selectedRoutes) =>
+    filterStore(accountPageStore, selectedRoutes).map((item) => {
+        const { path } = item;
+        return {
+            [path]: item,
+        };
+    });
 
 export const getFilteredTabs = (accountPageStore, selectedTabs) =>
-    filterStore(accountPageStore, selectedTabs)
-        .map((item) => {
-            const { component, ...rest } = item;
-            return rest;
-        });
+    filterStore(accountPageStore, selectedTabs).map((item) => {
+        const { component, ...rest } = item;
+        return rest;
+    });
diff --git a/packages-modules/counter/browser/tsconfig.json b/packages-modules/counter/browser/tsconfig.json
index 88468a68b..c3f23862e 100755
--- a/packages-modules/counter/browser/tsconfig.json
+++ b/packages-modules/counter/browser/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
     "rootDir": "./src",
     "outDir": "lib",
     "declarationDir": "lib",
@@ -27,6 +23,5 @@
   ],
   "include": [
     "src",
-    "./typings/*.d.ts"
   ]
 }
\ No newline at end of file

From e0412cfec356be820eb755b75478f2d9d6cdee21 Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Mon, 25 Mar 2024 20:37:25 -0400
Subject: [PATCH 02/17] update

---
 package.json | 13 +++++---
 yarn.lock    | 86 ++++++++++++++++++++++++++++++++--------------------
 2 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 449037da6..f9062fd1b 100755
--- a/package.json
+++ b/package.json
@@ -147,7 +147,7 @@
         "@babel/plugin-transform-modules-commonjs": "^7.19.6",
         "@babel/plugin-transform-regenerator": "^7.18.6",
         "@babel/plugin-transform-runtime": "^7.19.6",
-        "@babel/polyfill": "7.12.1",
+        "@babel/polyfill": "^7.12.1",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-flow": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
@@ -173,10 +173,13 @@
         "@redux-devtools/core": "^3.13.1",
         "@redux-devtools/dock-monitor": "^3.0.1",
         "@redux-devtools/log-monitor": "^4.0.1",
+        "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-graphql": "2.0.2",
         "@rollup/plugin-image": "^3.0.1",
-        "@rollup/plugin-json": "^5.0.2",
-        "@rollup/plugin-typescript": "^9.0.2",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-typescript": "^11.1.6",
+        "@rollup/pluginutils": "^5.1.0",
         "@shelf/jest-mongodb": "^4.1.3",
         "@svgr/webpack": "^6.5.1",
         "@testing-library/react": "^13.4.0",
@@ -316,8 +319,8 @@
         "remap-istanbul": "^0.13.0",
         "resolve-url-loader": "^5.0.0",
         "rimraf": "^3.0.2",
-        "rollup": "^3.2.5",
-        "rollup-plugin-esbuild": "^5.0.0",
+        "rollup": "^4.13.0",
+        "rollup-plugin-esbuild": "^6.1.1",
         "rollup-plugin-string": "^3.0.0",
         "sass-loader": "^13.1.0",
         "shelljs": "^0.8.5",
diff --git a/yarn.lock b/yarn.lock
index 150753979..d569ac274 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7368,6 +7368,13 @@
   resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca"
   integrity sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==
 
+"@rollup/plugin-alias@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
+  integrity sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==
+  dependencies:
+    slash "^4.0.0"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -7400,12 +7407,12 @@
     "@rollup/pluginutils" "^5.0.1"
     mini-svg-data-uri "^1.4.4"
 
-"@rollup/plugin-json@^5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-5.0.2.tgz#d7dbbac62ff74064876b3e5d0d863cb3ad1e7cdb"
-  integrity sha512-D1CoOT2wPvadWLhVcmpkDnesTzjhNIQRWLsc3fA49IFOP2Y84cFOOJ+nKGYedvXHKUsPeq07HR4hXpBBr+CHlA==
+"@rollup/plugin-json@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-6.1.0.tgz#fbe784e29682e9bb6dee28ea75a1a83702e7b805"
+  integrity sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==
   dependencies:
-    "@rollup/pluginutils" "^5.0.1"
+    "@rollup/pluginutils" "^5.1.0"
 
 "@rollup/plugin-node-resolve@^11.0.1", "@rollup/plugin-node-resolve@^11.2.1":
   version "11.2.1"
@@ -7431,6 +7438,18 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-node-resolve@^15.2.3":
+  version "15.2.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz#e5e0b059bd85ca57489492f295ce88c2d4b0daf9"
+  integrity sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.1"
+    "@types/resolve" "1.20.2"
+    deepmerge "^4.2.2"
+    is-builtin-module "^3.2.1"
+    is-module "^1.0.0"
+    resolve "^1.22.1"
+
 "@rollup/plugin-replace@^2.4.1":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
@@ -7447,12 +7466,12 @@
     "@rollup/pluginutils" "^5.0.1"
     magic-string "^0.30.3"
 
-"@rollup/plugin-typescript@^9.0.2":
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-9.0.2.tgz#c0cdfa39e267f306ff7316405a35406d5821eaa7"
-  integrity sha512-/sS93vmHUMjzDUsl5scNQr1mUlNE1QjBBvOhmRwJCH8k2RRhDIm3c977B3wdu3t3Ap17W6dDeXP3hj1P1Un1bA==
+"@rollup/plugin-typescript@^11.1.6":
+  version "11.1.6"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz#724237d5ec12609ec01429f619d2a3e7d4d1b22b"
+  integrity sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==
   dependencies:
-    "@rollup/pluginutils" "^5.0.1"
+    "@rollup/pluginutils" "^5.1.0"
     resolve "^1.22.1"
 
 "@rollup/pluginutils@^3.1.0":
@@ -7473,6 +7492,15 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/pluginutils@^5.0.5", "@rollup/pluginutils@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@rollup/rollup-android-arm-eabi@4.13.0":
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz#b98786c1304b4ff8db3a873180b778649b5dff2b"
@@ -9190,6 +9218,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/resolve@1.20.2":
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
+  integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
+
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
@@ -16151,7 +16184,7 @@ es-iterator-helpers@^1.0.17:
     iterator.prototype "^1.1.2"
     safe-array-concat "^1.1.2"
 
-es-module-lexer@^1.0.5, es-module-lexer@^1.2.1:
+es-module-lexer@^1.2.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1"
   integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==
@@ -20736,7 +20769,7 @@ is-buffer@^2.0.0, is-buffer@^2.0.2, is-buffer@~2.0.3:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
-is-builtin-module@^3.0.0, is-builtin-module@^3.1.0:
+is-builtin-module@^3.0.0, is-builtin-module@^3.1.0, is-builtin-module@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-3.2.1.tgz#f03271717d8654cfcaf07ab0463faa3571581169"
   integrity sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==
@@ -22452,11 +22485,6 @@ jose@^5.0.0:
   resolved "https://registry.yarnpkg.com/jose/-/jose-5.2.3.tgz#071c87f9fe720cff741a403c8080b69bfe13164a"
   integrity sha512-KUXdbctm1uHVL8BYhnyHkgp3zDX5KW8ZhAKVFEfUbU2P8Alpzjb+48hHvjOdQIyPshoblhzsuqOwEEAbtHVirA==
 
-joycon@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
-  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
-
 js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -30919,16 +30947,15 @@ rollup-plugin-codegen@^1.0.0:
   resolved "https://registry.yarnpkg.com/rollup-plugin-codegen/-/rollup-plugin-codegen-1.0.0.tgz#6d74b5ec308bc45a74e6a256ba8ac78e4efb7df2"
   integrity sha512-dDGSP/I/y6BemGaOZoeUZVfjFi6Ky9uMGuFurJVZV08s0Q11qXLPTsMqvy1zmxPJptH2yV9PV7ruBwxQc03TmA==
 
-rollup-plugin-esbuild@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-5.0.0.tgz#6cce358f4abe164d65a0028e900b8501a15f72ef"
-  integrity sha512-1cRIOHAPh8WQgdQQyyvFdeOdxuiyk+zB5zJ5+YOwrZP4cJ0MT3Fs48pQxrZeyZHcn+klFherytILVfE4aYrneg==
+rollup-plugin-esbuild@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-esbuild/-/rollup-plugin-esbuild-6.1.1.tgz#ec1dba647dbe1974f76192c75e907aa6eb636399"
+  integrity sha512-CehMY9FAqJD5OUaE/Mi1r5z0kNeYxItmRO2zG4Qnv2qWKF09J2lTy5GUzjJR354ZPrLkCj4fiBN41lo8PzBUhw==
   dependencies:
-    "@rollup/pluginutils" "^5.0.1"
+    "@rollup/pluginutils" "^5.0.5"
     debug "^4.3.4"
-    es-module-lexer "^1.0.5"
-    joycon "^3.1.1"
-    jsonc-parser "^3.2.0"
+    es-module-lexer "^1.3.1"
+    get-tsconfig "^4.7.2"
 
 rollup-plugin-string@^3.0.0:
   version "3.0.0"
@@ -30972,14 +30999,7 @@ rollup@^2.43.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^3.2.5:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
-  optionalDependencies:
-    fsevents "~2.3.2"
-
-rollup@^4.2.0:
+rollup@^4.13.0, rollup@^4.2.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
   integrity sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==

From 7f9b73e99796a5a6a11535b58821e751a33dcad4 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Tue, 26 Mar 2024 00:42:25 -0700
Subject: [PATCH 03/17] Add file property

---
 .../generate-json-from-object-plugin.mjs      | 18 ++++++++-
 .../src/apollo-server-n-client/compute.tsx    | 40 +++++++++----------
 .../generated-model.tsx                       |  4 +-
 .../counter/browser/src/common/compute.tsx    |  2 +-
 .../counter/browser/src/emotion/compute.tsx   |  2 +-
 .../src/redux-first-history/compute.tsx       |  6 +--
 yarn.lock                                     |  2 +-
 7 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
index fdb495852..872842299 100644
--- a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -5,6 +5,7 @@ import glob from 'glob';
 import fs from 'fs';
 import path from 'path';
 
+const pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
 const globPromise = promisify(glob.glob); // Make sure to call .glob here
 
 export default function generateJsonFromSpecificFiles(options = {}) {
@@ -28,12 +29,25 @@ export default function generateJsonFromSpecificFiles(options = {}) {
 
             for (const file of relativeFiles) {
                 const relativePath = file.startsWith('.') ? file : `./${file}`;
-
+                const baseRoutePath = path.dirname(pkg.name + relativePath.substring(1));
+                
                 try {
                     // Dynamically import the JS file assuming it exports filteredRoutes
                     const module = await import(relativePath); // file is already absolute
                     if (module.filteredRoutes) {
-                        allFilteredRoutes.push(...module.filteredRoutes);
+                        const newRoutes = module.filteredRoutes.map((filteredRoute) => {
+                            let routConfig = Object.values(filteredRoute)[0];
+                            if (routConfig.file) {
+                                routConfig = {
+                                    ...routConfig,
+                                    file: routConfig.file.startsWith('./') 
+                                        ? baseRoutePath + '/' + routConfig.file.substring(2) 
+                                        : baseRoutePath + '/' + routConfig.file,
+                                }
+                            }
+                            return { [routConfig.path]: routConfig };
+                        });
+                        allFilteredRoutes.push(...newRoutes);
                     }
                 } catch (error) {
                     this.warn(`Error importing ${file}: ${error}`);
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
index 0dcf1c474..35ba0c457 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
@@ -3,26 +3,26 @@ import { IMenuPosition } from '@common-stack/client-react';
 import { getFilteredMenus, getFilteredRoutes } from '../utils';
 
 export const counterPageStore: any[] = [
-    {
-        exact: false,
-        icon: 'export',
-        key: 'dashboard',
-        // component: Dashboard,
-        tab: 'Apollo Server',
-        position: IMenuPosition.MIDDLE,
-        name: 'Apollo Server',
-        path: '/apollo-server-n-client',
-        file: import('../common/components/Dashboard'),
-    },
-    {
-        key: 'counter',
-        name: 'Counter',
-        icon: 'appstore-o',
-        // component: Counter,
-        position: IMenuPosition.MIDDLE,
-        path: '/apollo-server-n-client/counter',
-        // file: import('./containers/Counter'),
-    },
+  {
+    exact: false,
+    icon: 'export',
+    key: 'dashboard',
+    // component: Dashboard,
+    tab: 'Apollo Server',
+    position: IMenuPosition.MIDDLE,
+    name: 'Apollo Server',
+    path: '/apollo-server-n-client',
+    file: '../common/components/Dashboard',
+  },
+  {
+    key: 'counter',
+    name: 'Counter',
+    icon: 'appstore-o',
+    // component: Counter,
+    position: IMenuPosition.MIDDLE,
+    path: '/apollo-server-n-client/counter',
+    file: './containers/Counter',
+  },
 ];
 
 const selectedRoutesAndMenus = ['dashboard', 'counter'];
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
index c27ba4f05..032e0059f 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
@@ -1,10 +1,10 @@
 /* tslint:disable */
 import * as SchemaTypes from '../generated-models';
 
-import { gql } from '@apollo/client';
+import { gql } from '@apollo/client/index.js';
 import * as Apollo from '@apollo/client';
 import * as React from 'react';
-import * as ApolloReactComponents from '@apollo/client/react/components';
+import * as ApolloReactComponents from '@apollo/client/react/components/index.js';
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 const defaultOptions =  {}
 
diff --git a/packages-modules/counter/browser/src/common/compute.tsx b/packages-modules/counter/browser/src/common/compute.tsx
index 5447ce467..d6ff7be3c 100755
--- a/packages-modules/counter/browser/src/common/compute.tsx
+++ b/packages-modules/counter/browser/src/common/compute.tsx
@@ -10,7 +10,7 @@ export const commonPageStore: any[] = [
         name: 'Home',
         // component: Home,
         position: IMenuPosition.MIDDLE,
-        file: import('../common/components/Home'),
+        file: '../common/components/Home',
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/emotion/compute.tsx b/packages-modules/counter/browser/src/emotion/compute.tsx
index 717f27b86..210515b02 100755
--- a/packages-modules/counter/browser/src/emotion/compute.tsx
+++ b/packages-modules/counter/browser/src/emotion/compute.tsx
@@ -11,7 +11,7 @@ export const emotionPageStore: any[] = [
         position: IMenuPosition.MIDDLE,
         name: 'Emotion Styling',
         path: '/emotion',
-        file: import('./components/CompledWithTheme')
+        file: './components/CompledWithTheme'
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/redux-first-history/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
index 90f683b54..3465efe35 100755
--- a/packages-modules/counter/browser/src/redux-first-history/compute.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
@@ -14,7 +14,7 @@ export const counterPageStore: IRoute[] = [
         name: 'Redux First History',
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
-        file: import('../common/components/Dashboard'),
+        file: '../common/components/Dashboard',
     },
     {
         exact: true,
@@ -24,7 +24,7 @@ export const counterPageStore: IRoute[] = [
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
-        file: import('./components/Hello'),
+        file: './components/Hello',
     },
     {
         exact: true,
@@ -34,7 +34,7 @@ export const counterPageStore: IRoute[] = [
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
-        file: import('./components/Counter'),
+        file: './components/Counter',
     },
 ];
 
diff --git a/yarn.lock b/yarn.lock
index d569ac274..6460fbf1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2045,7 +2045,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/polyfill@7.12.1":
+"@babel/polyfill@7.12.1", "@babel/polyfill@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
   integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==

From 0203f3dc6ff5d07a6bbf9451e003dab1d2707db2 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Tue, 26 Mar 2024 02:41:45 -0700
Subject: [PATCH 04/17] Define routes

---
 .../generate-json-from-object-plugin.mjs      |  7 ++--
 .../src/apollo-server-n-client/compute.tsx    |  4 +--
 .../src/common/components/Dashboard.tsx       |  4 +--
 .../counter/browser/src/common/compute.tsx    |  2 +-
 .../counter/browser/src/emotion/compute.tsx   |  2 +-
 .../src/redux-first-history/compute.tsx       |  8 ++---
 servers/frontend-server/rollup.config.mjs     | 33 -------------------
 servers/frontend-server/src/exp/index.tsx     |  5 ---
 servers/frontend-server/src/routes/index.tsx  | 28 ++++++++++++++--
 .../frontend-server/src/routes/outer.codegen  |  7 ----
 .../src/routes/outer.codegen.d.ts             |  1 -
 servers/frontend-server/vite.config.ts        |  6 ++--
 12 files changed, 42 insertions(+), 65 deletions(-)
 delete mode 100644 servers/frontend-server/rollup.config.mjs
 delete mode 100644 servers/frontend-server/src/routes/outer.codegen
 delete mode 100644 servers/frontend-server/src/routes/outer.codegen.d.ts

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
index 872842299..5c90858d7 100644
--- a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -38,11 +38,12 @@ export default function generateJsonFromSpecificFiles(options = {}) {
                         const newRoutes = module.filteredRoutes.map((filteredRoute) => {
                             let routConfig = Object.values(filteredRoute)[0];
                             if (routConfig.file) {
+                                let filePath = routConfig.file.startsWith('./') ?
+                                    baseRoutePath + '/' + routConfig.file.substring(2) : baseRoutePath + '/' + routConfig.file;
+                                filePath = filePath.endsWith('.js') ? filePath : filePath + '.js';
                                 routConfig = {
                                     ...routConfig,
-                                    file: routConfig.file.startsWith('./') 
-                                        ? baseRoutePath + '/' + routConfig.file.substring(2) 
-                                        : baseRoutePath + '/' + routConfig.file,
+                                    file: filePath,
                                 }
                             }
                             return { [routConfig.path]: routConfig };
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
index 35ba0c457..16fce7aa4 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
@@ -7,7 +7,7 @@ export const counterPageStore: any[] = [
     exact: false,
     icon: 'export',
     key: 'dashboard',
-    // component: Dashboard,
+    component: () => import('../common/components/Dashboard'),
     tab: 'Apollo Server',
     position: IMenuPosition.MIDDLE,
     name: 'Apollo Server',
@@ -18,7 +18,7 @@ export const counterPageStore: any[] = [
     key: 'counter',
     name: 'Counter',
     icon: 'appstore-o',
-    // component: Counter,
+    component: () => import('./containers/Counter'),
     position: IMenuPosition.MIDDLE,
     path: '/apollo-server-n-client/counter',
     file: './containers/Counter',
diff --git a/packages-modules/counter/browser/src/common/components/Dashboard.tsx b/packages-modules/counter/browser/src/common/components/Dashboard.tsx
index 57287bd01..0402a3dfe 100755
--- a/packages-modules/counter/browser/src/common/components/Dashboard.tsx
+++ b/packages-modules/counter/browser/src/common/components/Dashboard.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { renderRoutes2 as renderRoutes } from '@common-stack/client-react';
+// import { renderRoutes2 as renderRoutes } from '@common-stack/client-react';
 
-export default (props) =>  <>{renderRoutes(props.route.routes)}</>;
+export default (props) => <><h1>Dashboard</h1><code>{JSON.stringify(props)}</code></>;
diff --git a/packages-modules/counter/browser/src/common/compute.tsx b/packages-modules/counter/browser/src/common/compute.tsx
index d6ff7be3c..3af646805 100755
--- a/packages-modules/counter/browser/src/common/compute.tsx
+++ b/packages-modules/counter/browser/src/common/compute.tsx
@@ -8,7 +8,7 @@ export const commonPageStore: any[] = [
         key: 'home',
         exact: true,
         name: 'Home',
-        // component: Home,
+        component: () => import('../common/components/Home'),
         position: IMenuPosition.MIDDLE,
         file: '../common/components/Home',
     },
diff --git a/packages-modules/counter/browser/src/emotion/compute.tsx b/packages-modules/counter/browser/src/emotion/compute.tsx
index 210515b02..7e6a68e54 100755
--- a/packages-modules/counter/browser/src/emotion/compute.tsx
+++ b/packages-modules/counter/browser/src/emotion/compute.tsx
@@ -5,11 +5,11 @@ import { getFilteredMenus, getFilteredRoutes } from '../utils';
 
 export const emotionPageStore: any[] = [
     {
-        // component: ComplexWithTheme,
         tab: 'Emotion Styling',
         key: 'emotion',
         position: IMenuPosition.MIDDLE,
         name: 'Emotion Styling',
+        component: () => import('./components/CompledWithTheme'),
         path: '/emotion',
         file: './components/CompledWithTheme'
     },
diff --git a/packages-modules/counter/browser/src/redux-first-history/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
index 3465efe35..6662ee4b5 100755
--- a/packages-modules/counter/browser/src/redux-first-history/compute.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
@@ -5,11 +5,11 @@ import { getFilteredMenus, getFilteredRoutes } from '../utils/menu';
 import { CONNECTED_REACT_ROUTER_ROUTES_TYPES } from './constants';
 
 
-export const counterPageStore: IRoute[] = [
+export const counterPageStore = [
     {
         exact: false,
         icon: 'export',
-        // component: Dashboard,
+        component: () => import('../common/components/Dashboard'),
         position: IMenuPosition.MIDDLE,
         name: 'Redux First History',
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
@@ -20,7 +20,7 @@ export const counterPageStore: IRoute[] = [
         exact: true,
         icon: 'export',
         name: 'Hello',
-        // component: Hello,
+        component: () => import('./components/Hello'),
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
@@ -30,7 +30,7 @@ export const counterPageStore: IRoute[] = [
         exact: true,
         icon: 'export',
         name: 'Counter',
-        // component: Counter,
+        component: () => import('./components/Counter'),
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
diff --git a/servers/frontend-server/rollup.config.mjs b/servers/frontend-server/rollup.config.mjs
deleted file mode 100644
index 62feca632..000000000
--- a/servers/frontend-server/rollup.config.mjs
+++ /dev/null
@@ -1,33 +0,0 @@
-import graphql from '@rollup/plugin-graphql';
-import image from '@rollup/plugin-image';
-import typescript from '@rollup/plugin-typescript';
-import { string } from 'rollup-plugin-string';
-import codegen from 'rollup-plugin-codegen';
-
-const bundle = (config) => ({
-    ...config,
-    input: 'src/routes/.codegen',
-});
-const globals = { react: 'React' };
-
-export default [
-    bundle({
-        plugins: [
-            codegen.default(),
-            // typescript({ noEmitOnError: true }),
-        ],
-        output: [
-            {
-                dir: 'lib',
-                format: 'es',
-                name: 'Routes',
-                // compact: true,
-                // exports: 'named',
-                // sourcemap: true,
-                // preserveModules: true,
-                // chunkFileNames: '[name]-[hash].[format].js',
-                // globals,
-            },
-        ],
-    }),
-];
diff --git a/servers/frontend-server/src/exp/index.tsx b/servers/frontend-server/src/exp/index.tsx
index 834b07954..a5c92543f 100644
--- a/servers/frontend-server/src/exp/index.tsx
+++ b/servers/frontend-server/src/exp/index.tsx
@@ -1,8 +1,6 @@
 import { Link, Outlet } from '@remix-run/react';
 import type { MetaFunction } from "@remix-run/node";
 
-import OuterModule from '../routes/outer.codegen';
-
 export const meta: MetaFunction = () => {
   return [
     { title: "Fullstack Pro" },
@@ -30,9 +28,6 @@ export default function Index() {
       <section style={{ flexGrow: 2 }}>
         <h1>Welcome to Remix</h1>
         <Outlet />
-        <div id="outer">
-          {OuterModule()}
-        </div>
       </section>
     </div>
   );
diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/src/routes/index.tsx
index 49a973fb3..9973a23d9 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/src/routes/index.tsx
@@ -1,13 +1,35 @@
-// import React from "react";
-import outerModule from './outer.codegen';
+import pkg from '../../package.json' assert { type: "json" };
+import counterRoutes from '@sample-stack/counter-module-browser/lib/routes.json' assert { type: "json" };
+
+const dependencies: any = pkg.dependencies;
+
+const getFilePath = (file: string, module: string) => {
+  let link = dependencies[module];
+  let filePath = file;
+  
+  if (link && link.startsWith('link:')) {
+    link = link.replace('link:', '');
+    filePath = filePath.replace(module, link);
+    filePath = '../' + filePath; // escape from src/
+  } else {
+    filePath = '../node_modules/' + filePath; // escape from src/, enter node_modules/
+  }
+  return filePath;
+};
 
 export const generateRemixRoutes = async (route) => {
   
   route("/", "exp/index.tsx", () => {
-    route("codegen", outerModule);
     route("demo", "exp/demo/index.tsx", () => {
       route("counter", "exp/demo/counter.tsx", { id: 'counter0' });
       route("counter/:num", "exp/demo/counter.tsx", { id: 'counter1' });
     });
+
+    counterRoutes.forEach((routeConfig: any) => {
+      const { path, file, ...routeParams }: any = Object.values(routeConfig)[0];
+      const filePath = getFilePath(file, '@sample-stack/counter-module-browser');
+      route(path, filePath, routeParams);
+    });
   });
+
 }
diff --git a/servers/frontend-server/src/routes/outer.codegen b/servers/frontend-server/src/routes/outer.codegen
deleted file mode 100644
index 649893f5b..000000000
--- a/servers/frontend-server/src/routes/outer.codegen
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = function() {
-  return `
-import React from "react";
-import jsx from "@emotion/react/jsx-runtime";
-export default function Outer() {return "Hello World";};
-  `;
-};
\ No newline at end of file
diff --git a/servers/frontend-server/src/routes/outer.codegen.d.ts b/servers/frontend-server/src/routes/outer.codegen.d.ts
deleted file mode 100644
index c94b95e9e..000000000
--- a/servers/frontend-server/src/routes/outer.codegen.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function Outer(): import("@emotion/react/jsx-runtime").JSX.Element;
\ No newline at end of file
diff --git a/servers/frontend-server/vite.config.ts b/servers/frontend-server/vite.config.ts
index fb130dff7..fec2cdfd6 100644
--- a/servers/frontend-server/vite.config.ts
+++ b/servers/frontend-server/vite.config.ts
@@ -1,7 +1,7 @@
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
-import codegen from 'vite-plugin-codegen';
+// import codegen from 'vite-plugin-codegen';
 // import babel from 'vite-plugin-babel';
 import { generateRemixRoutes } from "./src/routes";
 
@@ -9,8 +9,7 @@ export default defineConfig({
   // assetsInclude: ['**/*.codegen'],
   plugins: [
     // babel(),
-    tsconfigPaths({ ignoreConfigErrors: true }),
-    (codegen as any).default(),
+    // (codegen as any).default(),
     remix({
       appDirectory: "src",
       routes: async (defineRoutes) => 
@@ -18,5 +17,6 @@ export default defineConfig({
           generateRemixRoutes(route);
         }),
     }),
+    tsconfigPaths({ ignoreConfigErrors: true }),
   ],
 });

From 61986c04a0a62513820b180e461ca66f5def19d3 Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Tue, 26 Mar 2024 09:45:09 -0400
Subject: [PATCH 05/17] update apollo client verison and import path of it

---
 codegen.yml                                   |   4 +-
 package.json                                  |   2 +-
 .../generated-model.tsx                       | 138 ++---------
 .../__tests__/apollo-client-test-helper.ts    |   2 +-
 .../browser/src/common/interfaces/context.ts  |   2 +-
 .../counter/browser/src/generated-models.ts   | 227 ++++++------------
 .../mobile/src/common/interfaces/context.ts   |   2 +-
 .../sample-platform/browser/src/module.ts     |   2 +-
 .../browser-extension/package.json            |   2 +-
 .../src/config/base-apollo-client.ts          |   2 +-
 .../src/config/newtab/client.service.ts       |   2 +-
 .../src/config/options/client.service.ts      |   2 +-
 .../src/config/panel/client.service.ts        |   2 +-
 .../src/config/popup/client.service.ts        |   2 +-
 portable-devices/desktop/package.json         |   2 +-
 .../src/common/config/base-apollo-client.ts   |   2 +-
 .../desktop/src/main/config/client.service.ts |   2 +-
 .../desktop/src/renderer/app/Main.tsx         |   2 +-
 .../desktop/src/renderer/app/Tray.tsx         |   2 +-
 .../renderer/config/main/client.service.ts    |   2 +-
 .../renderer/config/tray/client.service.ts    |   2 +-
 portable-devices/mobile/package.json          |   2 +-
 portable-devices/mobile/src/App.tsx           |   2 +-
 .../mobile/src/config/base-apollo-client.ts   |   2 +-
 .../mobile/src/config/client.service.ts       |   2 +-
 servers/backend-server/package.json           |   2 +-
 servers/frontend-server/package.json          |   2 +-
 servers/frontend-server/src/app/MainAnt.tsx   |   2 +-
 .../apollo-client-subscribe-to-more.ts        |   2 +-
 .../src/config/base-apollo-client.ts          |   2 +-
 .../src/config/client.service.ts              |   2 +-
 yarn.lock                                     |  64 +++--
 32 files changed, 171 insertions(+), 318 deletions(-)

diff --git a/codegen.yml b/codegen.yml
index b41f7b577..e90837c72 100755
--- a/codegen.yml
+++ b/codegen.yml
@@ -18,6 +18,7 @@ generates:
         withMutationFn: false
         withHOC: false
         withComponent: false
+        noGraphQLTag: true
     plugins:
       - add:
           content: /* tslint:disable */
@@ -33,8 +34,9 @@ generates:
     config:
       withMutationFn: false
       withHOC: false
-      withComponent: true
+      withComponent: false 
       withHooks: true
+      noGraphQLTag: true
     preset: import-types-preset
     presetConfig:
       typesPath: "../generated-models"
diff --git a/package.json b/package.json
index f9062fd1b..1f968d16c 100755
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
         ]
     },
     "resolutions": {
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.8",
         "chokidar": "^3.5.3",
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
index 032e0059f..8464d989b 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/generated-model.tsx
@@ -1,27 +1,11 @@
 /* tslint:disable */
 import * as SchemaTypes from '../generated-models';
 
-import { gql } from '@apollo/client/index.js';
-import * as Apollo from '@apollo/client';
-import * as React from 'react';
-import * as ApolloReactComponents from '@apollo/client/react/components/index.js';
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-const defaultOptions =  {}
+import { DocumentNode } from 'graphql';
+import * as Apollo from '@apollo/client/index.js';
+const defaultOptions = {} as const;
 
-export const AddCounterStateDocument = gql`
-    mutation addCounterState($amount: Int!) {
-  addCounterState(amount: $amount) @client {
-    counter
-  }
-}
-    `;
-export type AddCounterStateMutationFn = Apollo.MutationFunction<SchemaTypes.AddCounterStateMutation, SchemaTypes.AddCounterStateMutationVariables>;
-export type AddCounterStateComponentProps = Omit<ApolloReactComponents.MutationComponentOptions<SchemaTypes.AddCounterStateMutation, SchemaTypes.AddCounterStateMutationVariables>, 'mutation'>;
-
-    export const AddCounterStateComponent = (props: AddCounterStateComponentProps) => (
-      <ApolloReactComponents.Mutation<SchemaTypes.AddCounterStateMutation, SchemaTypes.AddCounterStateMutationVariables> mutation={AddCounterStateDocument} {...props} />
-    );
-    
+export const AddCounterStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"addCounterState"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounterState"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounterStateMutation__
@@ -47,20 +31,7 @@ export function useAddCounterStateMutation(baseOptions?: Apollo.MutationHookOpti
 export type AddCounterStateMutationHookResult = ReturnType<typeof useAddCounterStateMutation>;
 export type AddCounterStateMutationResult = Apollo.MutationResult<SchemaTypes.AddCounterStateMutation>;
 export type AddCounterStateMutationOptions = Apollo.BaseMutationOptions<SchemaTypes.AddCounterStateMutation, SchemaTypes.AddCounterStateMutationVariables>;
-export const AddCounterDocument = gql`
-    mutation addCounter($amount: Int!) {
-  addCounter(amount: $amount) {
-    amount
-  }
-}
-    `;
-export type AddCounterMutationFn = Apollo.MutationFunction<SchemaTypes.AddCounterMutation, SchemaTypes.AddCounterMutationVariables>;
-export type AddCounterComponentProps = Omit<ApolloReactComponents.MutationComponentOptions<SchemaTypes.AddCounterMutation, SchemaTypes.AddCounterMutationVariables>, 'mutation'>;
-
-    export const AddCounterComponent = (props: AddCounterComponentProps) => (
-      <ApolloReactComponents.Mutation<SchemaTypes.AddCounterMutation, SchemaTypes.AddCounterMutationVariables> mutation={AddCounterDocument} {...props} />
-    );
-    
+export const AddCounterDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"addCounter"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounterMutation__
@@ -86,20 +57,7 @@ export function useAddCounterMutation(baseOptions?: Apollo.MutationHookOptions<S
 export type AddCounterMutationHookResult = ReturnType<typeof useAddCounterMutation>;
 export type AddCounterMutationResult = Apollo.MutationResult<SchemaTypes.AddCounterMutation>;
 export type AddCounterMutationOptions = Apollo.BaseMutationOptions<SchemaTypes.AddCounterMutation, SchemaTypes.AddCounterMutationVariables>;
-export const AddCounter_WsDocument = gql`
-    mutation AddCounter_WS($amount: Int!) {
-  addCounter(amount: $amount) {
-    amount
-  }
-}
-    `;
-export type AddCounter_WsMutationFn = Apollo.MutationFunction<SchemaTypes.AddCounter_WsMutation, SchemaTypes.AddCounter_WsMutationVariables>;
-export type AddCounter_WsComponentProps = Omit<ApolloReactComponents.MutationComponentOptions<SchemaTypes.AddCounter_WsMutation, SchemaTypes.AddCounter_WsMutationVariables>, 'mutation'>;
-
-    export const AddCounter_WsComponent = (props: AddCounter_WsComponentProps) => (
-      <ApolloReactComponents.Mutation<SchemaTypes.AddCounter_WsMutation, SchemaTypes.AddCounter_WsMutationVariables> mutation={AddCounter_WsDocument} {...props} />
-    );
-    
+export const AddCounter_WsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddCounter_WS"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounter_WsMutation__
@@ -125,18 +83,7 @@ export function useAddCounter_WsMutation(baseOptions?: Apollo.MutationHookOption
 export type AddCounter_WsMutationHookResult = ReturnType<typeof useAddCounter_WsMutation>;
 export type AddCounter_WsMutationResult = Apollo.MutationResult<SchemaTypes.AddCounter_WsMutation>;
 export type AddCounter_WsMutationOptions = Apollo.BaseMutationOptions<SchemaTypes.AddCounter_WsMutation, SchemaTypes.AddCounter_WsMutationVariables>;
-export const SyncCachedCounterDocument = gql`
-    mutation SyncCachedCounter {
-  syncCachedCounter
-}
-    `;
-export type SyncCachedCounterMutationFn = Apollo.MutationFunction<SchemaTypes.SyncCachedCounterMutation, SchemaTypes.SyncCachedCounterMutationVariables>;
-export type SyncCachedCounterComponentProps = Omit<ApolloReactComponents.MutationComponentOptions<SchemaTypes.SyncCachedCounterMutation, SchemaTypes.SyncCachedCounterMutationVariables>, 'mutation'>;
-
-    export const SyncCachedCounterComponent = (props: SyncCachedCounterComponentProps) => (
-      <ApolloReactComponents.Mutation<SchemaTypes.SyncCachedCounterMutation, SchemaTypes.SyncCachedCounterMutationVariables> mutation={SyncCachedCounterDocument} {...props} />
-    );
-    
+export const SyncCachedCounterDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SyncCachedCounter"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncCachedCounter"}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useSyncCachedCounterMutation__
@@ -161,19 +108,7 @@ export function useSyncCachedCounterMutation(baseOptions?: Apollo.MutationHookOp
 export type SyncCachedCounterMutationHookResult = ReturnType<typeof useSyncCachedCounterMutation>;
 export type SyncCachedCounterMutationResult = Apollo.MutationResult<SchemaTypes.SyncCachedCounterMutation>;
 export type SyncCachedCounterMutationOptions = Apollo.BaseMutationOptions<SchemaTypes.SyncCachedCounterMutation, SchemaTypes.SyncCachedCounterMutationVariables>;
-export const CounterCacheQueryDocument = gql`
-    query counterCacheQuery {
-  counterCache {
-    amount
-  }
-}
-    `;
-export type CounterCacheQueryComponentProps = Omit<ApolloReactComponents.QueryComponentOptions<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables>, 'query'>;
-
-    export const CounterCacheQueryComponent = (props: CounterCacheQueryComponentProps) => (
-      <ApolloReactComponents.Query<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables> query={CounterCacheQueryDocument} {...props} />
-    );
-    
+export const CounterCacheQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"counterCacheQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterCache"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterCacheQueryQuery__
@@ -198,22 +133,15 @@ export function useCounterCacheQueryLazyQuery(baseOptions?: Apollo.LazyQueryHook
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables>(CounterCacheQueryDocument, options);
         }
+export function useCounterCacheQuerySuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables>(CounterCacheQueryDocument, options);
+        }
 export type CounterCacheQueryQueryHookResult = ReturnType<typeof useCounterCacheQueryQuery>;
 export type CounterCacheQueryLazyQueryHookResult = ReturnType<typeof useCounterCacheQueryLazyQuery>;
+export type CounterCacheQuerySuspenseQueryHookResult = ReturnType<typeof useCounterCacheQuerySuspenseQuery>;
 export type CounterCacheQueryQueryResult = Apollo.QueryResult<SchemaTypes.CounterCacheQueryQuery, SchemaTypes.CounterCacheQueryQueryVariables>;
-export const CounterStateDocument = gql`
-    query CounterState {
-  counterState @client {
-    counter
-  }
-}
-    `;
-export type CounterStateComponentProps = Omit<ApolloReactComponents.QueryComponentOptions<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables>, 'query'>;
-
-    export const CounterStateComponent = (props: CounterStateComponentProps) => (
-      <ApolloReactComponents.Query<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables> query={CounterStateDocument} {...props} />
-    );
-    
+export const CounterStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CounterState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterState"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterStateQuery__
@@ -238,22 +166,15 @@ export function useCounterStateLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables>(CounterStateDocument, options);
         }
+export function useCounterStateSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables>(CounterStateDocument, options);
+        }
 export type CounterStateQueryHookResult = ReturnType<typeof useCounterStateQuery>;
 export type CounterStateLazyQueryHookResult = ReturnType<typeof useCounterStateLazyQuery>;
+export type CounterStateSuspenseQueryHookResult = ReturnType<typeof useCounterStateSuspenseQuery>;
 export type CounterStateQueryResult = Apollo.QueryResult<SchemaTypes.CounterStateQuery, SchemaTypes.CounterStateQueryVariables>;
-export const CounterQueryDocument = gql`
-    query counterQuery {
-  counter {
-    amount
-  }
-}
-    `;
-export type CounterQueryComponentProps = Omit<ApolloReactComponents.QueryComponentOptions<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables>, 'query'>;
-
-    export const CounterQueryComponent = (props: CounterQueryComponentProps) => (
-      <ApolloReactComponents.Query<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables> query={CounterQueryDocument} {...props} />
-    );
-    
+export const CounterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"counterQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterQueryQuery__
@@ -278,22 +199,15 @@ export function useCounterQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables>(CounterQueryDocument, options);
         }
+export function useCounterQuerySuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables>(CounterQueryDocument, options);
+        }
 export type CounterQueryQueryHookResult = ReturnType<typeof useCounterQueryQuery>;
 export type CounterQueryLazyQueryHookResult = ReturnType<typeof useCounterQueryLazyQuery>;
+export type CounterQuerySuspenseQueryHookResult = ReturnType<typeof useCounterQuerySuspenseQuery>;
 export type CounterQueryQueryResult = Apollo.QueryResult<SchemaTypes.CounterQueryQuery, SchemaTypes.CounterQueryQueryVariables>;
-export const OnCounterUpdatedDocument = gql`
-    subscription onCounterUpdated {
-  counterUpdated {
-    amount
-  }
-}
-    `;
-export type OnCounterUpdatedComponentProps = Omit<ApolloReactComponents.SubscriptionComponentOptions<SchemaTypes.OnCounterUpdatedSubscription, SchemaTypes.OnCounterUpdatedSubscriptionVariables>, 'subscription'>;
-
-    export const OnCounterUpdatedComponent = (props: OnCounterUpdatedComponentProps) => (
-      <ApolloReactComponents.Subscription<SchemaTypes.OnCounterUpdatedSubscription, SchemaTypes.OnCounterUpdatedSubscriptionVariables> subscription={OnCounterUpdatedDocument} {...props} />
-    );
-    
+export const OnCounterUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"onCounterUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useOnCounterUpdatedSubscription__
diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/graphql/__tests__/apollo-client-test-helper.ts b/packages-modules/counter/browser/src/apollo-server-n-client/graphql/__tests__/apollo-client-test-helper.ts
index 151bb08a3..90c6cc7ef 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/graphql/__tests__/apollo-client-test-helper.ts
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/graphql/__tests__/apollo-client-test-helper.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 /* eslint-disable import/no-extraneous-dependencies */
-import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 // import * as schema from '../schema/schema.graphql';
 import { resolvers } from '../resolvers';
diff --git a/packages-modules/counter/browser/src/common/interfaces/context.ts b/packages-modules/counter/browser/src/common/interfaces/context.ts
index acb8051de..85f0ff167 100755
--- a/packages-modules/counter/browser/src/common/interfaces/context.ts
+++ b/packages-modules/counter/browser/src/common/interfaces/context.ts
@@ -1,5 +1,5 @@
 import { DataProxy } from '@apollo/client/cache';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 
 export interface MyContext {
     cache: DataProxy;
diff --git a/packages-modules/counter/browser/src/generated-models.ts b/packages-modules/counter/browser/src/generated-models.ts
index 838d24835..f9a8dcc2c 100755
--- a/packages-modules/counter/browser/src/generated-models.ts
+++ b/packages-modules/counter/browser/src/generated-models.ts
@@ -1,32 +1,35 @@
 /* tslint:disable */
 import { GraphQLResolveInfo } from 'graphql';
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
+import { DocumentNode } from 'graphql';
+import * as Apollo from '@apollo/client/index.js';
 export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-export type RequireFields<T, K extends keyof T> = { [X in Exclude<keyof T, K>]?: T[X] } & { [P in K]-?: NonNullable<T[P]> };
-const defaultOptions =  {}
+export type MakeEmpty<T extends { [key: string]: unknown }, K extends keyof T> = { [_ in K]?: never };
+export type Incremental<T> = T | { [P in keyof T]?: P extends ' $fragmentName' | '__typename' ? T[P] : never };
+export type RequireFields<T, K extends keyof T> = Omit<T, K> & { [P in K]-?: NonNullable<T[P]> };
+const defaultOptions = {} as const;
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
-  ID: string;
-  String: string;
-  Boolean: boolean;
-  Int: number;
-  Float: number;
+  ID: { input: string; output: string; }
+  String: { input: string; output: string; }
+  Boolean: { input: boolean; output: boolean; }
+  Int: { input: number; output: number; }
+  Float: { input: number; output: number; }
 };
 
 export type ClientCounter = {
   __typename?: 'ClientCounter';
-  counter?: Maybe<Scalars['Int']>;
+  counter?: Maybe<Scalars['Int']['output']>;
 };
 
 /**  Database counter  */
 export type Counter = {
   __typename?: 'Counter';
   /**  Current amount  */
-  amount: Scalars['Int'];
+  amount: Scalars['Int']['output'];
 };
 
 export type Mutation = {
@@ -37,22 +40,22 @@ export type Mutation = {
   /**  add Counter  */
   addMoleculerCounter?: Maybe<Counter>;
   /**  sync cached counter with current value  */
-  syncCachedCounter?: Maybe<Scalars['Boolean']>;
+  syncCachedCounter?: Maybe<Scalars['Boolean']['output']>;
 };
 
 
 export type MutationAddCounterArgs = {
-  amount?: Maybe<Scalars['Int']>;
+  amount?: InputMaybe<Scalars['Int']['input']>;
 };
 
 
 export type MutationAddCounterStateArgs = {
-  amount: Scalars['Int'];
+  amount: Scalars['Int']['input'];
 };
 
 
 export type MutationAddMoleculerCounterArgs = {
-  amount?: Maybe<Scalars['Int']>;
+  amount?: InputMaybe<Scalars['Int']['input']>;
 };
 
 export type Query = {
@@ -74,95 +77,50 @@ export type Subscription = {
 };
 
 export type AddCounterStateMutationVariables = Exact<{
-  amount: Scalars['Int'];
+  amount: Scalars['Int']['input'];
 }>;
 
 
-export type AddCounterStateMutation = (
-  { __typename?: 'Mutation' }
-  & { addCounterState?: Maybe<(
-    { __typename?: 'ClientCounter' }
-    & Pick<ClientCounter, 'counter'>
-  )> }
-);
+export type AddCounterStateMutation = { __typename?: 'Mutation', addCounterState?: { __typename?: 'ClientCounter', counter?: number | null } | null };
 
 export type AddCounterMutationVariables = Exact<{
-  amount: Scalars['Int'];
+  amount: Scalars['Int']['input'];
 }>;
 
 
-export type AddCounterMutation = (
-  { __typename?: 'Mutation' }
-  & { addCounter?: Maybe<(
-    { __typename?: 'Counter' }
-    & Pick<Counter, 'amount'>
-  )> }
-);
+export type AddCounterMutation = { __typename?: 'Mutation', addCounter?: { __typename?: 'Counter', amount: number } | null };
 
 export type AddCounter_WsMutationVariables = Exact<{
-  amount: Scalars['Int'];
+  amount: Scalars['Int']['input'];
 }>;
 
 
-export type AddCounter_WsMutation = (
-  { __typename?: 'Mutation' }
-  & { addCounter?: Maybe<(
-    { __typename?: 'Counter' }
-    & Pick<Counter, 'amount'>
-  )> }
-);
+export type AddCounter_WsMutation = { __typename?: 'Mutation', addCounter?: { __typename?: 'Counter', amount: number } | null };
 
 export type SyncCachedCounterMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type SyncCachedCounterMutation = (
-  { __typename?: 'Mutation' }
-  & Pick<Mutation, 'syncCachedCounter'>
-);
+export type SyncCachedCounterMutation = { __typename?: 'Mutation', syncCachedCounter?: boolean | null };
 
 export type CounterCacheQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CounterCacheQueryQuery = (
-  { __typename?: 'Query' }
-  & { counterCache?: Maybe<(
-    { __typename?: 'Counter' }
-    & Pick<Counter, 'amount'>
-  )> }
-);
+export type CounterCacheQueryQuery = { __typename?: 'Query', counterCache?: { __typename?: 'Counter', amount: number } | null };
 
 export type CounterStateQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CounterStateQuery = (
-  { __typename?: 'Query' }
-  & { counterState?: Maybe<(
-    { __typename?: 'ClientCounter' }
-    & Pick<ClientCounter, 'counter'>
-  )> }
-);
+export type CounterStateQuery = { __typename?: 'Query', counterState?: { __typename?: 'ClientCounter', counter?: number | null } | null };
 
 export type CounterQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CounterQueryQuery = (
-  { __typename?: 'Query' }
-  & { counter?: Maybe<(
-    { __typename?: 'Counter' }
-    & Pick<Counter, 'amount'>
-  )> }
-);
+export type CounterQueryQuery = { __typename?: 'Query', counter?: { __typename?: 'Counter', amount: number } | null };
 
 export type OnCounterUpdatedSubscriptionVariables = Exact<{ [key: string]: never; }>;
 
 
-export type OnCounterUpdatedSubscription = (
-  { __typename?: 'Subscription' }
-  & { counterUpdated?: Maybe<(
-    { __typename?: 'Counter' }
-    & Pick<Counter, 'amount'>
-  )> }
-);
+export type OnCounterUpdatedSubscription = { __typename?: 'Subscription', counterUpdated?: { __typename?: 'Counter', amount: number } | null };
 
 
 
@@ -172,21 +130,7 @@ export type ResolverTypeWrapper<T> = Promise<T> | T;
 export type ResolverWithResolve<TResult, TParent, TContext, TArgs> = {
   resolve: ResolverFn<TResult, TParent, TContext, TArgs>;
 };
-
-export type LegacyStitchingResolver<TResult, TParent, TContext, TArgs> = {
-  fragment: string;
-  resolve: ResolverFn<TResult, TParent, TContext, TArgs>;
-};
-
-export type NewStitchingResolver<TResult, TParent, TContext, TArgs> = {
-  selectionSet: string;
-  resolve: ResolverFn<TResult, TParent, TContext, TArgs>;
-};
-export type StitchingResolver<TResult, TParent, TContext, TArgs> = LegacyStitchingResolver<TResult, TParent, TContext, TArgs> | NewStitchingResolver<TResult, TParent, TContext, TArgs>;
-export type Resolver<TResult, TParent = {}, TContext = {}, TArgs = {}> =
-  | ResolverFn<TResult, TParent, TContext, TArgs>
-  | ResolverWithResolve<TResult, TParent, TContext, TArgs>
-  | StitchingResolver<TResult, TParent, TContext, TArgs>;
+export type Resolver<TResult, TParent = {}, TContext = {}, TArgs = {}> = ResolverFn<TResult, TParent, TContext, TArgs> | ResolverWithResolve<TResult, TParent, TContext, TArgs>;
 
 export type ResolverFn<TResult, TParent, TContext, TArgs> = (
   parent: TParent,
@@ -200,7 +144,7 @@ export type SubscriptionSubscribeFn<TResult, TParent, TContext, TArgs> = (
   args: TArgs,
   context: TContext,
   info: GraphQLResolveInfo
-) => AsyncIterator<TResult> | Promise<AsyncIterator<TResult>>;
+) => AsyncIterable<TResult> | Promise<AsyncIterable<TResult>>;
 
 export type SubscriptionResolveFn<TResult, TParent, TContext, TArgs> = (
   parent: TParent,
@@ -245,28 +189,30 @@ export type DirectiveResolverFn<TResult = {}, TParent = {}, TContext = {}, TArgs
   info: GraphQLResolveInfo
 ) => TResult | Promise<TResult>;
 
+
+
 /** Mapping between all available schema types and the resolvers types */
 export type ResolversTypes = {
-  Query: ResolverTypeWrapper<{}>;
-  Counter: ResolverTypeWrapper<Counter>;
-  Int: ResolverTypeWrapper<Scalars['Int']>;
+  Boolean: ResolverTypeWrapper<Scalars['Boolean']['output']>;
   ClientCounter: ResolverTypeWrapper<ClientCounter>;
+  Counter: ResolverTypeWrapper<Counter>;
+  Int: ResolverTypeWrapper<Scalars['Int']['output']>;
   Mutation: ResolverTypeWrapper<{}>;
-  Boolean: ResolverTypeWrapper<Scalars['Boolean']>;
+  Query: ResolverTypeWrapper<{}>;
+  String: ResolverTypeWrapper<Scalars['String']['output']>;
   Subscription: ResolverTypeWrapper<{}>;
-  String: ResolverTypeWrapper<Scalars['String']>;
 };
 
 /** Mapping between all available schema types and the resolvers parents */
 export type ResolversParentTypes = {
-  Query: {};
-  Counter: Counter;
-  Int: Scalars['Int'];
+  Boolean: Scalars['Boolean']['output'];
   ClientCounter: ClientCounter;
+  Counter: Counter;
+  Int: Scalars['Int']['output'];
   Mutation: {};
-  Boolean: Scalars['Boolean'];
+  Query: {};
+  String: Scalars['String']['output'];
   Subscription: {};
-  String: Scalars['String'];
 };
 
 export type ClientCounterResolvers<ContextType = any, ParentType extends ResolversParentTypes['ClientCounter'] = ResolversParentTypes['ClientCounter']> = {
@@ -280,9 +226,9 @@ export type CounterResolvers<ContextType = any, ParentType extends ResolversPare
 };
 
 export type MutationResolvers<ContextType = any, ParentType extends ResolversParentTypes['Mutation'] = ResolversParentTypes['Mutation']> = {
-  addCounter?: Resolver<Maybe<ResolversTypes['Counter']>, ParentType, ContextType, RequireFields<MutationAddCounterArgs, never>>;
+  addCounter?: Resolver<Maybe<ResolversTypes['Counter']>, ParentType, ContextType, Partial<MutationAddCounterArgs>>;
   addCounterState?: Resolver<Maybe<ResolversTypes['ClientCounter']>, ParentType, ContextType, RequireFields<MutationAddCounterStateArgs, 'amount'>>;
-  addMoleculerCounter?: Resolver<Maybe<ResolversTypes['Counter']>, ParentType, ContextType, RequireFields<MutationAddMoleculerCounterArgs, never>>;
+  addMoleculerCounter?: Resolver<Maybe<ResolversTypes['Counter']>, ParentType, ContextType, Partial<MutationAddMoleculerCounterArgs>>;
   syncCachedCounter?: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
 };
 
@@ -307,20 +253,8 @@ export type Resolvers<ContextType = any> = {
 };
 
 
-/**
- * @deprecated
- * Use "Resolvers" root object instead. If you wish to get "IResolvers", add "typesPrefix: I" to your config.
- */
-export type IResolvers<ContextType = any> = Resolvers<ContextType>;
-
 
-export const AddCounterStateDocument = gql`
-    mutation addCounterState($amount: Int!) {
-  addCounterState(amount: $amount) @client {
-    counter
-  }
-}
-    `;
+export const AddCounterStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"addCounterState"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounterState"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounterStateMutation__
@@ -346,13 +280,7 @@ export function useAddCounterStateMutation(baseOptions?: Apollo.MutationHookOpti
 export type AddCounterStateMutationHookResult = ReturnType<typeof useAddCounterStateMutation>;
 export type AddCounterStateMutationResult = Apollo.MutationResult<AddCounterStateMutation>;
 export type AddCounterStateMutationOptions = Apollo.BaseMutationOptions<AddCounterStateMutation, AddCounterStateMutationVariables>;
-export const AddCounterDocument = gql`
-    mutation addCounter($amount: Int!) {
-  addCounter(amount: $amount) {
-    amount
-  }
-}
-    `;
+export const AddCounterDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"addCounter"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounterMutation__
@@ -378,13 +306,7 @@ export function useAddCounterMutation(baseOptions?: Apollo.MutationHookOptions<A
 export type AddCounterMutationHookResult = ReturnType<typeof useAddCounterMutation>;
 export type AddCounterMutationResult = Apollo.MutationResult<AddCounterMutation>;
 export type AddCounterMutationOptions = Apollo.BaseMutationOptions<AddCounterMutation, AddCounterMutationVariables>;
-export const AddCounter_WsDocument = gql`
-    mutation AddCounter_WS($amount: Int!) {
-  addCounter(amount: $amount) {
-    amount
-  }
-}
-    `;
+export const AddCounter_WsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"AddCounter_WS"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"amount"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addCounter"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"amount"},"value":{"kind":"Variable","name":{"kind":"Name","value":"amount"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useAddCounter_WsMutation__
@@ -410,11 +332,7 @@ export function useAddCounter_WsMutation(baseOptions?: Apollo.MutationHookOption
 export type AddCounter_WsMutationHookResult = ReturnType<typeof useAddCounter_WsMutation>;
 export type AddCounter_WsMutationResult = Apollo.MutationResult<AddCounter_WsMutation>;
 export type AddCounter_WsMutationOptions = Apollo.BaseMutationOptions<AddCounter_WsMutation, AddCounter_WsMutationVariables>;
-export const SyncCachedCounterDocument = gql`
-    mutation SyncCachedCounter {
-  syncCachedCounter
-}
-    `;
+export const SyncCachedCounterDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SyncCachedCounter"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"syncCachedCounter"}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useSyncCachedCounterMutation__
@@ -439,13 +357,7 @@ export function useSyncCachedCounterMutation(baseOptions?: Apollo.MutationHookOp
 export type SyncCachedCounterMutationHookResult = ReturnType<typeof useSyncCachedCounterMutation>;
 export type SyncCachedCounterMutationResult = Apollo.MutationResult<SyncCachedCounterMutation>;
 export type SyncCachedCounterMutationOptions = Apollo.BaseMutationOptions<SyncCachedCounterMutation, SyncCachedCounterMutationVariables>;
-export const CounterCacheQueryDocument = gql`
-    query counterCacheQuery {
-  counterCache {
-    amount
-  }
-}
-    `;
+export const CounterCacheQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"counterCacheQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterCache"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterCacheQueryQuery__
@@ -470,16 +382,15 @@ export function useCounterCacheQueryLazyQuery(baseOptions?: Apollo.LazyQueryHook
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<CounterCacheQueryQuery, CounterCacheQueryQueryVariables>(CounterCacheQueryDocument, options);
         }
+export function useCounterCacheQuerySuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<CounterCacheQueryQuery, CounterCacheQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<CounterCacheQueryQuery, CounterCacheQueryQueryVariables>(CounterCacheQueryDocument, options);
+        }
 export type CounterCacheQueryQueryHookResult = ReturnType<typeof useCounterCacheQueryQuery>;
 export type CounterCacheQueryLazyQueryHookResult = ReturnType<typeof useCounterCacheQueryLazyQuery>;
+export type CounterCacheQuerySuspenseQueryHookResult = ReturnType<typeof useCounterCacheQuerySuspenseQuery>;
 export type CounterCacheQueryQueryResult = Apollo.QueryResult<CounterCacheQueryQuery, CounterCacheQueryQueryVariables>;
-export const CounterStateDocument = gql`
-    query CounterState {
-  counterState @client {
-    counter
-  }
-}
-    `;
+export const CounterStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CounterState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterState"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"client"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterStateQuery__
@@ -504,16 +415,15 @@ export function useCounterStateLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<CounterStateQuery, CounterStateQueryVariables>(CounterStateDocument, options);
         }
+export function useCounterStateSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<CounterStateQuery, CounterStateQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<CounterStateQuery, CounterStateQueryVariables>(CounterStateDocument, options);
+        }
 export type CounterStateQueryHookResult = ReturnType<typeof useCounterStateQuery>;
 export type CounterStateLazyQueryHookResult = ReturnType<typeof useCounterStateLazyQuery>;
+export type CounterStateSuspenseQueryHookResult = ReturnType<typeof useCounterStateSuspenseQuery>;
 export type CounterStateQueryResult = Apollo.QueryResult<CounterStateQuery, CounterStateQueryVariables>;
-export const CounterQueryDocument = gql`
-    query counterQuery {
-  counter {
-    amount
-  }
-}
-    `;
+export const CounterQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"counterQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counter"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useCounterQueryQuery__
@@ -538,16 +448,15 @@ export function useCounterQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
           const options = {...defaultOptions, ...baseOptions}
           return Apollo.useLazyQuery<CounterQueryQuery, CounterQueryQueryVariables>(CounterQueryDocument, options);
         }
+export function useCounterQuerySuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<CounterQueryQuery, CounterQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<CounterQueryQuery, CounterQueryQueryVariables>(CounterQueryDocument, options);
+        }
 export type CounterQueryQueryHookResult = ReturnType<typeof useCounterQueryQuery>;
 export type CounterQueryLazyQueryHookResult = ReturnType<typeof useCounterQueryLazyQuery>;
+export type CounterQuerySuspenseQueryHookResult = ReturnType<typeof useCounterQuerySuspenseQuery>;
 export type CounterQueryQueryResult = Apollo.QueryResult<CounterQueryQuery, CounterQueryQueryVariables>;
-export const OnCounterUpdatedDocument = gql`
-    subscription onCounterUpdated {
-  counterUpdated {
-    amount
-  }
-}
-    `;
+export const OnCounterUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"onCounterUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"counterUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount"}}]}}]}}]} as unknown as DocumentNode;
 
 /**
  * __useOnCounterUpdatedSubscription__
diff --git a/packages-modules/counter/mobile/src/common/interfaces/context.ts b/packages-modules/counter/mobile/src/common/interfaces/context.ts
index acb8051de..85f0ff167 100755
--- a/packages-modules/counter/mobile/src/common/interfaces/context.ts
+++ b/packages-modules/counter/mobile/src/common/interfaces/context.ts
@@ -1,5 +1,5 @@
 import { DataProxy } from '@apollo/client/cache';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 
 export interface MyContext {
     cache: DataProxy;
diff --git a/packages/sample-platform/browser/src/module.ts b/packages/sample-platform/browser/src/module.ts
index 546693a14..7d8bdf592 100644
--- a/packages/sample-platform/browser/src/module.ts
+++ b/packages/sample-platform/browser/src/module.ts
@@ -1,7 +1,7 @@
 import { Feature } from '@common-stack/client-react';
 
 import { interfaces } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import { ClientTypes as BrowserTypes } from '@common-stack/client-core';
 import { platformModule } from './inversify-containers';
 
diff --git a/portable-devices/browser-extension/package.json b/portable-devices/browser-extension/package.json
index d3d35c235..dc22d4c2c 100644
--- a/portable-devices/browser-extension/package.json
+++ b/portable-devices/browser-extension/package.json
@@ -34,7 +34,7 @@
     },
     "dependencies": {
         "@ant-design/icons": "^4.2.2",
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@apollo/react-common": "^3.1.4",
         "@cdm-logger/client": "^7.0.14",
         "@common-stack/client-core": "3.0.3-alpha.2",
diff --git a/portable-devices/browser-extension/src/config/base-apollo-client.ts b/portable-devices/browser-extension/src/config/base-apollo-client.ts
index 054226674..365898ef2 100755
--- a/portable-devices/browser-extension/src/config/base-apollo-client.ts
+++ b/portable-devices/browser-extension/src/config/base-apollo-client.ts
@@ -5,7 +5,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ApolloClient, ApolloClientOptions, ApolloLink, gql } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink, gql } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 import { HttpLink, createHttpLink } from '@apollo/client/link/http';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
diff --git a/portable-devices/browser-extension/src/config/newtab/client.service.ts b/portable-devices/browser-extension/src/config/newtab/client.service.ts
index fbfac81d0..302b0161b 100644
--- a/portable-devices/browser-extension/src/config/newtab/client.service.ts
+++ b/portable-devices/browser-extension/src/config/newtab/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import modules, { container } from '../../modules/popup';
 import { createApolloClient } from '../base-apollo-client';
 import { PUBLIC_SETTINGS } from '../public-config';
diff --git a/portable-devices/browser-extension/src/config/options/client.service.ts b/portable-devices/browser-extension/src/config/options/client.service.ts
index b85eaef62..b4dfede2c 100644
--- a/portable-devices/browser-extension/src/config/options/client.service.ts
+++ b/portable-devices/browser-extension/src/config/options/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import modules, { container, logger } from '../../modules/popup';
 import { createApolloClient } from '../base-apollo-client';
diff --git a/portable-devices/browser-extension/src/config/panel/client.service.ts b/portable-devices/browser-extension/src/config/panel/client.service.ts
index bb7d1a918..12bd75983 100644
--- a/portable-devices/browser-extension/src/config/panel/client.service.ts
+++ b/portable-devices/browser-extension/src/config/panel/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import modules, { container } from '../../modules/popup';
 import { createApolloClient } from '../base-apollo-client';
 import { PUBLIC_SETTINGS } from '../public-config';
diff --git a/portable-devices/browser-extension/src/config/popup/client.service.ts b/portable-devices/browser-extension/src/config/popup/client.service.ts
index bb7d1a918..12bd75983 100644
--- a/portable-devices/browser-extension/src/config/popup/client.service.ts
+++ b/portable-devices/browser-extension/src/config/popup/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import modules, { container } from '../../modules/popup';
 import { createApolloClient } from '../base-apollo-client';
 import { PUBLIC_SETTINGS } from '../public-config';
diff --git a/portable-devices/desktop/package.json b/portable-devices/desktop/package.json
index e3cb1cfce..8a7bc071b 100644
--- a/portable-devices/desktop/package.json
+++ b/portable-devices/desktop/package.json
@@ -40,7 +40,7 @@
     "dependencies": {
         "@ant-design/compatible": "^1.0.5",
         "@ant-design/icons": "^4.2.2",
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@cdm-logger/client": "^7.0.14",
         "@cdm-logger/electron": "^7.0.14",
         "@cdm-logger/server": "^7.0.14",
diff --git a/portable-devices/desktop/src/common/config/base-apollo-client.ts b/portable-devices/desktop/src/common/config/base-apollo-client.ts
index 7f6c9b5f6..58b7ff641 100755
--- a/portable-devices/desktop/src/common/config/base-apollo-client.ts
+++ b/portable-devices/desktop/src/common/config/base-apollo-client.ts
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 import { HttpLink, createHttpLink } from '@apollo/client/link/http';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
diff --git a/portable-devices/desktop/src/main/config/client.service.ts b/portable-devices/desktop/src/main/config/client.service.ts
index a31e3dfb4..a80e70e53 100644
--- a/portable-devices/desktop/src/main/config/client.service.ts
+++ b/portable-devices/desktop/src/main/config/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { interfaces } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import modules, { container, logger } from '../modules';
 import { createApolloClient } from '../../common/config/base-apollo-client';
diff --git a/portable-devices/desktop/src/renderer/app/Main.tsx b/portable-devices/desktop/src/renderer/app/Main.tsx
index 44bd58512..3ad7f01b6 100755
--- a/portable-devices/desktop/src/renderer/app/Main.tsx
+++ b/portable-devices/desktop/src/renderer/app/Main.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/index.js';
 import { Provider } from 'react-redux';
 import { PluginArea } from '@common-stack/client-react';
 import { ConnectedRouter } from 'connected-react-router';
diff --git a/portable-devices/desktop/src/renderer/app/Tray.tsx b/portable-devices/desktop/src/renderer/app/Tray.tsx
index cbc4eb566..e1c0ed9f8 100644
--- a/portable-devices/desktop/src/renderer/app/Tray.tsx
+++ b/portable-devices/desktop/src/renderer/app/Tray.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/index.js';
 import { Provider } from 'react-redux';
 import { createClientContainer } from '../config/main/client.service';
 import { epic$ } from '../config/tray/epic-config';
diff --git a/portable-devices/desktop/src/renderer/config/main/client.service.ts b/portable-devices/desktop/src/renderer/config/main/client.service.ts
index 4ce7fc36d..1cddb396c 100644
--- a/portable-devices/desktop/src/renderer/config/main/client.service.ts
+++ b/portable-devices/desktop/src/renderer/config/main/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import { logger } from '@cdm-logger/client';
 import modules, { container } from '../../modules/main';
diff --git a/portable-devices/desktop/src/renderer/config/tray/client.service.ts b/portable-devices/desktop/src/renderer/config/tray/client.service.ts
index 103330773..bff0de449 100644
--- a/portable-devices/desktop/src/renderer/config/tray/client.service.ts
+++ b/portable-devices/desktop/src/renderer/config/tray/client.service.ts
@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container } from 'inversify';
-import { ApolloClient } from '@apollo/client';
+import { ApolloClient } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import { logger } from '@cdm-logger/client';
 import modules, { container } from '../../modules/tray';
diff --git a/portable-devices/mobile/package.json b/portable-devices/mobile/package.json
index 33c141d1e..4e2306489 100644
--- a/portable-devices/mobile/package.json
+++ b/portable-devices/mobile/package.json
@@ -61,7 +61,7 @@
         "expo-modules-autolinking": "~1.1.0"
     },
     "dependencies": {
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@cdm-logger/client": "^7.0.14",
         "@common-stack/client-core": "^3.0.3-alpha.2",
         "@common-stack/client-react": "^3.0.3-alpha.2",
diff --git a/portable-devices/mobile/src/App.tsx b/portable-devices/mobile/src/App.tsx
index e33562d99..03ba54884 100644
--- a/portable-devices/mobile/src/App.tsx
+++ b/portable-devices/mobile/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/index.js';
 import { Provider } from 'react-redux';
 import { SlotFillProvider } from '@common-stack/components-pro';
 import { NativeBaseProvider } from 'native-base';
diff --git a/portable-devices/mobile/src/config/base-apollo-client.ts b/portable-devices/mobile/src/config/base-apollo-client.ts
index 49a397f05..6b31074d0 100755
--- a/portable-devices/mobile/src/config/base-apollo-client.ts
+++ b/portable-devices/mobile/src/config/base-apollo-client.ts
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 import { HttpLink, createHttpLink } from '@apollo/client/link/http';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
diff --git a/portable-devices/mobile/src/config/client.service.ts b/portable-devices/mobile/src/config/client.service.ts
index 10d48bac0..05adff39c 100644
--- a/portable-devices/mobile/src/config/client.service.ts
+++ b/portable-devices/mobile/src/config/client.service.ts
@@ -4,7 +4,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container, interfaces } from 'inversify';
-import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import { merge } from 'lodash';
 import modules, { UtilityClass, logger } from '../modules';
diff --git a/servers/backend-server/package.json b/servers/backend-server/package.json
index c13cebeb4..def978392 100755
--- a/servers/backend-server/package.json
+++ b/servers/backend-server/package.json
@@ -61,7 +61,7 @@
         "html-to-text": "^8.0.0"
     },
     "dependencies": {
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@babel/runtime": "^7.20.1",
         "@cdm-logger/server": "^7.0.14",
         "@common-stack/core": "3.0.3-alpha.0",
diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json
index 3d6c7bb42..bc203e572 100755
--- a/servers/frontend-server/package.json
+++ b/servers/frontend-server/package.json
@@ -34,7 +34,7 @@
     },
     "dependencies": {
         "@ant-design/static-style-extract": "^1.0.2",
-        "@apollo/client": "~3.6.10",
+        "@apollo/client": "^3.9.0",
         "@apollo/react-hoc": "^4.0.0",
         "@cdm-logger/client": "^7.0.14",
         "@cdm-logger/server": "^7.0.14",
diff --git a/servers/frontend-server/src/app/MainAnt.tsx b/servers/frontend-server/src/app/MainAnt.tsx
index 3dd2b3b3b..b2314f896 100755
--- a/servers/frontend-server/src/app/MainAnt.tsx
+++ b/servers/frontend-server/src/app/MainAnt.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/index.js';
 import { SlotFillProvider } from '@common-stack/components-pro';
 import { InversifyProvider, PluginArea } from '@common-stack/client-react';
 import { Provider as ReduxProvider } from 'react-redux';
diff --git a/servers/frontend-server/src/config/__tests__/apollo-client-subscribe-to-more.ts b/servers/frontend-server/src/config/__tests__/apollo-client-subscribe-to-more.ts
index d402090c7..30748ca80 100755
--- a/servers/frontend-server/src/config/__tests__/apollo-client-subscribe-to-more.ts
+++ b/servers/frontend-server/src/config/__tests__/apollo-client-subscribe-to-more.ts
@@ -1,5 +1,5 @@
 import gql from 'graphql-tag';
-import { Operation } from '@apollo/client';
+import { Operation } from '@apollo/client/index.js';
 import { InMemoryCache } from 'apollo-cache-inmemory';
 import { DocumentNode, OperationDefinitionNode } from 'graphql';
 import { mockSingleLink, mockObservableLink } from '@apollo/client/testing';
diff --git a/servers/frontend-server/src/config/base-apollo-client.ts b/servers/frontend-server/src/config/base-apollo-client.ts
index b0142415d..cdea5519c 100755
--- a/servers/frontend-server/src/config/base-apollo-client.ts
+++ b/servers/frontend-server/src/config/base-apollo-client.ts
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ApolloClient, ApolloClientOptions, ApolloLink, gql } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 import { HttpLink, createHttpLink } from '@apollo/client/link/http';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
diff --git a/servers/frontend-server/src/config/client.service.ts b/servers/frontend-server/src/config/client.service.ts
index 10d48bac0..05adff39c 100644
--- a/servers/frontend-server/src/config/client.service.ts
+++ b/servers/frontend-server/src/config/client.service.ts
@@ -4,7 +4,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container, interfaces } from 'inversify';
-import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
 import { merge } from 'lodash';
 import modules, { UtilityClass, logger } from '../modules';
diff --git a/yarn.lock b/yarn.lock
index 6460fbf1e..04edd51c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -134,19 +134,21 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@apollo/client@latest", "@apollo/client@~3.2.5 || ~3.3.0 || ~3.4.0 || ~3.5.0 || ~3.6.0 || ~3.7.0", "@apollo/client@~3.6.10":
-  version "3.6.10"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.6.10.tgz#f12d1f0cc4811d6bfe68b3f48a18e08a757ee301"
-  integrity sha512-zow8+Z7Wz8OeH+8bhIxqPtqqXY87APoUbXlaXD/rgs3O9ijSyHSbUt3E4DnkLNP9q3+/OsRWY+Mx+WxkQQ4oig==
+"@apollo/client@^3.9.0", "@apollo/client@latest", "@apollo/client@~3.2.5 || ~3.3.0 || ~3.4.0 || ~3.5.0 || ~3.6.0 || ~3.7.0":
+  version "3.9.9"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.9.9.tgz#38f983a1ad24e2687abfced0a9c1c3bef8d32616"
+  integrity sha512-/sMecU/M0WK9knrguts1lSLV8xFKzIgOMVb4mi6MOxgJXjliDB8PvOtmXhTqh2cVMMR4TzXgOnb+af/690zlQw==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
-    "@wry/context" "^0.7.0"
-    "@wry/equality" "^0.5.0"
-    "@wry/trie" "^0.3.0"
+    "@wry/caches" "^1.0.0"
+    "@wry/equality" "^0.5.6"
+    "@wry/trie" "^0.5.0"
     graphql-tag "^2.12.6"
     hoist-non-react-statics "^3.3.2"
-    optimism "^0.16.1"
+    optimism "^0.18.0"
     prop-types "^15.7.2"
+    rehackt "0.0.6"
+    response-iterator "^0.2.6"
     symbol-observable "^4.0.0"
     ts-invariant "^0.10.3"
     tslib "^2.3.0"
@@ -10126,6 +10128,13 @@
   resolved "https://registry.yarnpkg.com/@workbench-stack/core/-/core-2.1.1-alpha.3.tgz#e343d827751055889b7c16cfea3cf5917ae49864"
   integrity sha512-WD4V51fZhkE0ivKL4s1tt5yagwGmWjxDTC4moaGv6FqhJPXtvTlaKwDyFy6JBT7JPQVYp8OiBrnJcnx4JCh7YA==
 
+"@wry/caches@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
+  integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==
+  dependencies:
+    tslib "^2.3.0"
+
 "@wry/context@^0.7.0":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.4.tgz#e32d750fa075955c4ab2cfb8c48095e1d42d5990"
@@ -10140,17 +10149,24 @@
   dependencies:
     tslib "^1.9.3"
 
-"@wry/equality@^0.5.0":
+"@wry/equality@^0.5.6":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb"
   integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==
   dependencies:
     tslib "^2.3.0"
 
-"@wry/trie@^0.3.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.2.tgz#a06f235dc184bd26396ba456711f69f8c35097e6"
-  integrity sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==
+"@wry/trie@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.4.3.tgz#077d52c22365871bf3ffcbab8e95cb8bc5689af4"
+  integrity sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94"
+  integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==
   dependencies:
     tslib "^2.3.0"
 
@@ -26862,13 +26878,15 @@ opn@^5.4.0, opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimism@^0.16.1:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.2.tgz#519b0c78b3b30954baed0defe5143de7776bf081"
-  integrity sha512-zWNbgWj+3vLEjZNIh/okkY2EUfX+vB9TJopzIZwT1xxaMqC5hRLLraePod4c5n4He08xuXNH+zhKFFCu390wiQ==
+optimism@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
+  integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
   dependencies:
+    "@wry/caches" "^1.0.0"
     "@wry/context" "^0.7.0"
-    "@wry/trie" "^0.3.0"
+    "@wry/trie" "^0.4.3"
+    tslib "^2.3.0"
 
 optionator@^0.8.1:
   version "0.8.3"
@@ -30463,6 +30481,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+rehackt@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.0.6.tgz#7a0a2247f2295e7548915417e44fbbf03bf004f4"
+  integrity sha512-l3WEzkt4ntlEc/IB3/mF6SRgNHA6zfQR7BlGOgBTOmx7IJJXojDASav+NsgXHFjHn+6RmwqsGPFgZpabWpeOdw==
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -30814,6 +30837,11 @@ resolve@~1.7.1:
   dependencies:
     path-parse "^1.0.5"
 
+response-iterator@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
+  integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"

From 2401570046aa8d21dbc48b7ce16101819fd1824d Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Tue, 26 Mar 2024 11:41:34 -0700
Subject: [PATCH 06/17] Add Main, module

---
 build.config.js                               |   3 +-
 buildconfig.mjs                               |   1 -
 .../counter/browser/src/generated-models.ts   |   4 +-
 servers/frontend-server/build.config.mjs      |  11 +-
 servers/frontend-server/package.json          |   4 +-
 servers/frontend-server/remix.env.d.ts        |   6 +
 servers/frontend-server/server.js             |   6 +
 .../src/backend/middlewares/container.ts      |   7 +-
 .../src/config/base-apollo-client.ts          |   4 +-
 .../src/config/client.service.ts              |   8 +-
 .../src/config/public-config.ts               |   6 +-
 .../src/config/redux-config.ts                |  10 +-
 servers/frontend-server/src/entry.client.tsx  |  55 +++++-
 servers/frontend-server/src/entry.server.tsx  | 160 +++++++++++++-----
 .../frontend-server/src/exp/demo/counter.tsx  |  10 --
 .../frontend-server/src/exp/demo/index.tsx    |  10 --
 servers/frontend-server/src/exp/index.tsx     |  34 ----
 .../modules/layout/components/SideMenu.tsx    |   2 +-
 .../frontend-server/src/modules/module.tsx    |  35 +---
 servers/frontend-server/src/root.tsx          |  31 ++--
 servers/frontend-server/src/routes/index.tsx  |  16 +-
 servers/frontend-server/vite.config.ts        |   2 +-
 22 files changed, 231 insertions(+), 194 deletions(-)
 create mode 100644 servers/frontend-server/remix.env.d.ts
 delete mode 100644 servers/frontend-server/src/exp/demo/counter.tsx
 delete mode 100644 servers/frontend-server/src/exp/demo/index.tsx
 delete mode 100644 servers/frontend-server/src/exp/index.tsx

diff --git a/build.config.js b/build.config.js
index d8fc5fecd..7362c5863 100644
--- a/build.config.js
+++ b/build.config.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-underscore-dangle */
-process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
+// process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
 
 const __API_SERVER_PORT__ = process.env.GRAPHQL_URL ? new URL(process.env.GRAPHQL_URL).port : 8080;
 const __WEB_SERVER_PORT__ = process.env.LOCAL_BACKEND_URL ? new URL(process.env.LOCAL_BACKEND_URL).port : 3000;
@@ -29,5 +29,4 @@ const config = {
         process.env.LOCAL_BACKEND_URL || `${__SERVER_PROTOCOL__}://${__LOCAL_SERVER_HOST__}:${__WEB_SERVER_PORT__}`,
 };
 
-console.log('---CONFIG', config);
 module.exports = config;
diff --git a/buildconfig.mjs b/buildconfig.mjs
index 7c25231bb..cc4dc4a2c 100644
--- a/buildconfig.mjs
+++ b/buildconfig.mjs
@@ -34,5 +34,4 @@ const config = {
         process.env.LOCAL_BACKEND_URL || `${__SERVER_PROTOCOL__}://${__LOCAL_SERVER_HOST__}:${__WEB_SERVER_PORT__}`,
 };
 
-console.log('---CONFIG', config);
 export default config;
diff --git a/packages-modules/counter/browser/src/generated-models.ts b/packages-modules/counter/browser/src/generated-models.ts
index 838d24835..49a6e686b 100755
--- a/packages-modules/counter/browser/src/generated-models.ts
+++ b/packages-modules/counter/browser/src/generated-models.ts
@@ -1,7 +1,7 @@
 /* tslint:disable */
 import { GraphQLResolveInfo } from 'graphql';
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
+import { gql } from '@apollo/client/index.js';
+import * as Apollo from '@apollo/client/index.js';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
diff --git a/servers/frontend-server/build.config.mjs b/servers/frontend-server/build.config.mjs
index 41e513476..3f9e81ff2 100644
--- a/servers/frontend-server/build.config.mjs
+++ b/servers/frontend-server/build.config.mjs
@@ -1,15 +1,17 @@
 import { config as dotenvConfig } from 'dotenv';
 
+let dotEnvResult;
 if (process.env.ENV_FILE !== null) {
-    dotenvConfig({ path: process.env.ENV_FILE });
+    dotEnvResult = dotenvConfig({ path: process.env.ENV_FILE });
 }
 
-import buildConfig from '../../build.config';
+import buildConfig from '../../buildconfig.mjs';
 
 const config = {
     ...buildConfig,
-    __CLIENT__: true,
-    __SERVER__: false,
+    __ENV__: dotEnvResult ? dotEnvResult.parsed : null,
+    __CLIENT__: typeof window !== 'undefined',
+    __SERVER__: typeof window === 'undefined',
     __DEV__: process.env.NODE_ENV !== 'production',
     __TEST__: false,
     __CDN_URL__: process.env.CDN_URL || '',
@@ -18,4 +20,5 @@ const config = {
     __FRONTEND_BUILD_DIR__: process.env.FRONTEND_BUILD_DIR || './dist/web',
 };
 
+console.log('---CONFIG', config);
 export default config;
diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json
index 3d6c7bb42..1e2dbb88c 100755
--- a/servers/frontend-server/package.json
+++ b/servers/frontend-server/package.json
@@ -17,8 +17,8 @@
     "type": "module",
     "scripts": {
         "prebuild": "yarn build:clean",
-        "build": "remix vite:build",
-        "dev": "node ./server.js",
+        "build": "ENV_FILE=../../config/production/prod.env remix vite:build",
+        "dev": "ENV_FILE=../../config/development/dev.env node ./server.js",
         "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
         "start": "cross-env NODE_ENV=production node ./server.js",
         "typecheck": "tsc",
diff --git a/servers/frontend-server/remix.env.d.ts b/servers/frontend-server/remix.env.d.ts
new file mode 100644
index 000000000..fbfaacbd7
--- /dev/null
+++ b/servers/frontend-server/remix.env.d.ts
@@ -0,0 +1,6 @@
+interface Window {
+  __ENV__: any,
+  __APOLLO_STATE__: any,
+  __PRELOADED_STATE__: any,
+  __SLOT_FILLS__: any,
+}
\ No newline at end of file
diff --git a/servers/frontend-server/server.js b/servers/frontend-server/server.js
index 749c97d7d..4f4bc059d 100644
--- a/servers/frontend-server/server.js
+++ b/servers/frontend-server/server.js
@@ -5,6 +5,12 @@ import express from "express";
 
 installGlobals();
 
+import buildConfig from './build.config.mjs';
+
+Object.entries(buildConfig).forEach(([k, v]) => {
+  global[k] = typeof v !== 'string' ? v : `"${v.replace(/\\/g, '\\\\')}"`;
+});
+
 const viteDevServer =
   process.env.NODE_ENV === "production"
     ? undefined
diff --git a/servers/frontend-server/src/backend/middlewares/container.ts b/servers/frontend-server/src/backend/middlewares/container.ts
index 94d657802..6611ccb89 100644
--- a/servers/frontend-server/src/backend/middlewares/container.ts
+++ b/servers/frontend-server/src/backend/middlewares/container.ts
@@ -1,15 +1,14 @@
 import { ClientTypes } from '@common-stack/core';
-import { createMemoryRouter } from 'react-router-dom';
-import { createMainRoute } from '../../modules/module';
+// import { createMemoryRouter } from 'react-router-dom';
 import { createReduxStore } from '../../config/redux-config';
 import { createClientContainer } from '../../config/client.service';
 
 // Middleware to attach child container to the request and clean up after response
 export const containerMiddleware = (req, res, next) => {
     const { container, serviceFunc, logger, apolloClient } = createClientContainer(req, res);
-    const router = createMemoryRouter(createMainRoute(apolloClient));
+    // const router = createMemoryRouter(createMainRoute(apolloClient));
     const services = serviceFunc();
-    const { store } = createReduxStore(apolloClient, services, container, router);
+    const { store } = createReduxStore(apolloClient, services, container);
     req.container = container;
     req.apolloClient = apolloClient;
     req.logger = logger;
diff --git a/servers/frontend-server/src/config/base-apollo-client.ts b/servers/frontend-server/src/config/base-apollo-client.ts
index b0142415d..827bca3f8 100755
--- a/servers/frontend-server/src/config/base-apollo-client.ts
+++ b/servers/frontend-server/src/config/base-apollo-client.ts
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ApolloClient, ApolloClientOptions, ApolloLink, gql } from '@apollo/client';
+import { ApolloClient, ApolloClientOptions, ApolloLink, gql } from '@apollo/client/index.js';
 import { InMemoryCache } from '@apollo/client/cache';
 import { HttpLink, createHttpLink } from '@apollo/client/link/http';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
@@ -12,7 +12,7 @@ import { getOperationAST } from 'graphql';
 import { invariant } from 'ts-invariant';
 import { IClientState } from '@common-stack/client-core';
 import fetch from 'node-fetch';
-import { isBoolean, merge } from 'lodash';
+import { isBoolean, merge } from 'lodash-es';
 import { CdmLogger } from '@cdm-logger/core';
 import { RetryLink } from '@apollo/client/link/retry';
 import { createClient } from 'graphql-ws';
diff --git a/servers/frontend-server/src/config/client.service.ts b/servers/frontend-server/src/config/client.service.ts
index 10d48bac0..996b9befe 100644
--- a/servers/frontend-server/src/config/client.service.ts
+++ b/servers/frontend-server/src/config/client.service.ts
@@ -4,9 +4,9 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { ClientTypes } from '@common-stack/client-core';
 import { Container, interfaces } from 'inversify';
-import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/index.js';
 import { CdmLogger } from '@cdm-logger/core';
-import { merge } from 'lodash';
+import { merge } from 'lodash-es';
 import modules, { UtilityClass, logger } from '../modules';
 import { createApolloClient } from './base-apollo-client';
 import { PUBLIC_SETTINGS } from './public-config';
@@ -82,8 +82,8 @@ export const createClientContainer = (req?: any, res?: any) => {
         serviceFunc,
         logger,
     };
-    if ((module as any).hot) {
-        (module as any).hot.dispose(() => {
+    if (import.meta.hot) {
+        import.meta.hot.dispose(() => {
             // Force Apollo to fetch the latest data from the server
             delete window.__APOLLO_STATE__;
         });
diff --git a/servers/frontend-server/src/config/public-config.ts b/servers/frontend-server/src/config/public-config.ts
index 5f3a157b8..41978f1ee 100755
--- a/servers/frontend-server/src/config/public-config.ts
+++ b/servers/frontend-server/src/config/public-config.ts
@@ -1,7 +1,7 @@
 /// <reference path='../../../../typings/index.d.ts' />
 import { logger } from '@cdm-logger/client';
 import { lowerCase } from 'lodash-es';
-
+import dotenv from 'dotenv';
 /**
  * This file opens up in public site, so make sure it is
  * not dependent on any other file that compromises the security.
@@ -11,7 +11,9 @@ const publicEnv = ['NODE_ENV', 'GRAPHQL_URL', 'FACEBOOK_APP_ID', 'LOCAL_GRAPHQL_
 const isBrowser = typeof window !== 'undefined';
 
 if (!isBrowser) {
-    process.env.ENV_FILE !== null && require('dotenv').config({ path: process.env.ENV_FILE });
+    if (process.env.ENV_FILE !== null) {
+        // dotenv.config({ path: process.env.ENV_FILE });
+    }
 }
 const base = (isBrowser ? window.__ENV__ || (typeof __ENV__ !== 'undefined' && __ENV__) : process.env) || {};
 const env: any = {};
diff --git a/servers/frontend-server/src/config/redux-config.ts b/servers/frontend-server/src/config/redux-config.ts
index c8d0549dd..be53583f7 100644
--- a/servers/frontend-server/src/config/redux-config.ts
+++ b/servers/frontend-server/src/config/redux-config.ts
@@ -36,16 +36,16 @@ export const persistConfig = {
  * Add any reducers required for this app dirctly in to
  * `combineReducers`
  */
-export const createReduxStore = (apolloClient, services, container, router) => {
+export const createReduxStore = (apolloClient, services, container) => {
     const reducers = {
         router: createRouterReducer({}),
         ...modules.reducers,
     };
 
     let store;
-    if ((module as any).hot && (module as any).hot.data && (module as any).hot.data.store) {
-        // console.log('Restoring Redux store:', JSON.stringify((module as any).hot.data.store.getState()));
-        store = (module as any).hot.data.store;
+    if (import.meta.hot && import.meta.hot.data && import.meta.hot.data.store) {
+        // console.log('Restoring Redux store:', JSON.stringify(import.meta.hot.data.store.getState()));
+        store = import.meta.hot.data.store;
         // replace the reducers always as we don't have ablity to find
         // new reducer added through our `modules`
         store.replaceReducer(persistReducer(persistConfig, combineReducers(reducers)));
@@ -64,7 +64,7 @@ export const createReduxStore = (apolloClient, services, container, router) => {
             isDev: process.env.NODE_ENV === 'development',
             initialState,
             persistConfig,
-            middleware: [createRouterMiddleware({ router } as any)],
+            middleware: [], //createRouterMiddleware({ router } as any)
             epicMiddleware: epicMiddlewareFunc(apolloClient, services, container),
             rootEpic: rootEpic as any,
             reducers,
diff --git a/servers/frontend-server/src/entry.client.tsx b/servers/frontend-server/src/entry.client.tsx
index 94d5dc0de..b0aabdf73 100644
--- a/servers/frontend-server/src/entry.client.tsx
+++ b/servers/frontend-server/src/entry.client.tsx
@@ -1,18 +1,59 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
+import * as React from 'react';
 import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { ApolloProvider } from '@apollo/client/index.js';
+import { SlotFillProvider } from '@common-stack/components-pro';
+import { InversifyProvider, PluginArea } from '@common-stack/client-react';
+import { Provider as ReduxProvider } from 'react-redux';
+import { createReduxRouter } from '@common-stack/remix-router-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { persistStore } from 'redux-persist';
+import { HelmetProvider } from 'react-helmet-async';
+import { CacheProvider } from '@emotion/react';
+import { createBrowserHistory } from 'history';
+
+import { createReduxStore } from './config/redux-config';
+import createEmotionCache from './common/createEmotionCache';
+import { createClientContainer } from './config/client.service';
+import modules from './modules/module';
+import GA4Provider from './components/GaProvider';
+
+const { apolloClient: client, container, serviceFunc } = createClientContainer();
+
+// const mainRoute = createMainRoute({ client });
+// const router = createBrowserRouter(mainRoute);
+// const browserHistory = createBrowserHistory();
+const { store } = createReduxStore(client, serviceFunc(), container);
+// createReduxRouter({store, history: browserHistory});
+const cache = createEmotionCache();
+let persistor = persistStore(store);
 
 startTransition(() => {
+  modules.hydrate(container, window.__APOLLO_STATE__);
+
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+      {/* <HelmetProvider> */}
+        <CacheProvider value={cache}>
+          <SlotFillProvider>
+            <ReduxProvider store={store}>
+              <InversifyProvider container={container} modules={modules}>
+                <PersistGate loading={null} persistor={persistor}>
+                  {() => (
+                    <ApolloProvider client={client}>
+                      <PluginArea />
+                      {modules.getWrappedRoot(<RemixBrowser />)}
+                    </ApolloProvider>
+                  )}
+                </PersistGate>
+              </InversifyProvider>
+            </ReduxProvider>
+          </SlotFillProvider>
+        </CacheProvider>
+      {/* </HelmetProvider> */}
     </StrictMode>
   );
 });
diff --git a/servers/frontend-server/src/entry.server.tsx b/servers/frontend-server/src/entry.server.tsx
index 45db3229c..4c6d9e2ef 100644
--- a/servers/frontend-server/src/entry.server.tsx
+++ b/servers/frontend-server/src/entry.server.tsx
@@ -1,16 +1,33 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
+import 'reflect-metadata';
 
 import { PassThrough } from "node:stream";
-
+import * as React from 'react';
+import * as ReactDOMServer from 'react-dom/server';
+import serialize from 'serialize-javascript';
 import type { AppLoadContext, EntryContext } from "@remix-run/node";
 import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
+import { getDataFromTree } from "@apollo/client/react/ssr";
+import { ApolloProvider } from '@apollo/client/index.js';
+import { SlotFillProvider, replaceServerFills } from '@common-stack/components-pro';
+import { CacheProvider } from '@emotion/react';
+import createEmotionServer from '@emotion/server/create-instance';
+import { Provider as ReduxProvider } from 'react-redux';
+import { logger } from '@cdm-logger/server';
+import { FilledContext, HelmetProvider } from 'react-helmet-async';
+import publicEnv from './config/public-config';
+import { InversifyProvider, PluginArea } from '@common-stack/client-react';
+import clientModules from './modules/module';
+import { containerMiddleware } from './backend/middlewares/container';
+import { cacheMiddleware } from './backend/middlewares/cache';
+import createEmotionCache from './common/createEmotionCache';
+import { createReduxStore } from './config/redux-config';
+import { createClientContainer } from './config/client.service';
+
+const cache = createEmotionCache();
+const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
 
 const ABORT_DELAY = 5_000;
 
@@ -39,57 +56,106 @@ export default function handleRequest(
       );
 }
 
-function handleBotRequest(
+function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext
 ) {
-  return new Promise((resolve, reject) => {
-    let shellRendered = false;
-    const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
-      {
-        onAllReady() {
-          shellRendered = true;
-          const body = new PassThrough();
-          const stream = createReadableStreamFromReadable(body);
-
-          responseHeaders.set("Content-Type", "text/html");
+  return new Promise(async (resolve, reject) => {
+    let content = '';
+    try {
+      const { container, serviceFunc, logger, apolloClient: client } = createClientContainer(request);
+      const services = serviceFunc();
+      const { store } = createReduxStore(client, services, container);
+      
+      try {
+        await clientModules.beforeSSR({
+          request,
+          module: clientModules,
+        })
+      } catch (e: any) {
+        console.log('Before SSR Error!');
+        console.log(e);
+      }
+  
+      // const extractor = new ChunkExtractor({
+      //   statsFile: path.resolve(__FRONTEND_BUILD_DIR__, 'loadable-stats.json'),
+      //   entrypoints: ['index'],
+      //   publicPath: !__DEV__ && __CDN_URL__ ? __CDN_URL__ : '/',
+      // });
+      // const helmetContext = {} as FilledContext;
+      let slotFillContext = { fills: {} };
+      const Root = (
+        // <ChunkExtractorManager extractor={extractor}>
+          // <HelmetProvider context={helmetContext}>
+            <CacheProvider value={cache}>
+              <SlotFillProvider context={slotFillContext}>
+                <ReduxProvider store={store}>
+                  <InversifyProvider container={container} modules={clientModules}>
+                    {clientModules.getWrappedRoot(
+                      <ApolloProvider client={client}>
+                        <PluginArea />
+                          <RemixServer
+                            context={remixContext}
+                            url={request.url}
+                            abortDelay={ABORT_DELAY}
+                          />
+                      </ApolloProvider>,
+                      request,
+                    )}
+                  </InversifyProvider>
+                </ReduxProvider>
+              </SlotFillProvider>
+            </CacheProvider>
+          // </HelmetProvider>
+        // </ChunkExtractorManager>
+      );
+      
+      try {
+        content = await getDataFromTree(Root);
+      } catch (e: any) {
+        console.log('Apollo Error! Rendering result anyways');
+        console.log(e);
+      }
+      if (!content) {
+        content = ReactDOMServer.renderToString(Root);
+      }
+      logger.info('Content---', content.length);
+  
+      // fills
+      const fills = Object.keys(slotFillContext.fills);
+      content = replaceServerFills(content, fills);
+  
+      const apolloState = {...client.extract()};
+      const reduxState = {...store.getState()};
+      const env = {...publicEnv};
+      const emotionStyles = extractCriticalToChunks(content);
+      const styleSheet = constructStyleTagsFromChunks(emotionStyles);
 
-          resolve(
-            new Response(stream, {
-              headers: responseHeaders,
-              status: responseStatusCode,
-            })
-          );
+      content = content.replace('[__ENV__]', serialize(env, { isJSON: true }));
+      content = content.replace('[__APOLLO_STATE__]', serialize(apolloState, { isJSON: true }));
+      content = content.replace('[__PRELOADED_STATE__]', serialize(reduxState, { isJSON: true }));
+      content = content.replace('[__SLOT_FILLS__]', serialize(fills, { isJSON: true }));
+      content = content.replace('__STYLESHEET__', styleSheet);
 
-          pipe(body);
-        },
-        onShellError(error: unknown) {
-          reject(error);
-        },
-        onError(error: unknown) {
-          responseStatusCode = 500;
-          // Log streaming rendering errors from inside the shell.  Don't log
-          // errors encountered during initial shell rendering since they'll
-          // reject and get logged in handleDocumentRequest.
-          if (shellRendered) {
-            console.error(error);
-          }
-        },
-      }
-    );
+      responseHeaders.set("Content-Type", "text/html");
 
-    setTimeout(abort, ABORT_DELAY);
+      resolve(
+        new Response(content, {
+          headers: responseHeaders,
+          status: responseStatusCode,
+        })
+      );
+    } catch (err: any) {
+      logger.error(err, 'SERVER SIDE RENDER failed due to (%j) ', err.message);
+      logger.info(err);
+      reject(err);
+    }
   });
 }
 
-function handleBrowserRequest(
+function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
@@ -104,7 +170,7 @@ function handleBrowserRequest(
         abortDelay={ABORT_DELAY}
       />,
       {
-        onShellReady() {
+        onAllReady() {
           shellRendered = true;
           const body = new PassThrough();
           const stream = createReadableStreamFromReadable(body);
diff --git a/servers/frontend-server/src/exp/demo/counter.tsx b/servers/frontend-server/src/exp/demo/counter.tsx
deleted file mode 100644
index 2caacdfa0..000000000
--- a/servers/frontend-server/src/exp/demo/counter.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useParams } from '@remix-run/react';
-
-export default function Counter() {
-  const params = useParams();
-  return (
-    <div>
-      <p>Count: {params?.num ?? 0}</p>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/servers/frontend-server/src/exp/demo/index.tsx b/servers/frontend-server/src/exp/demo/index.tsx
deleted file mode 100644
index 12a7bc474..000000000
--- a/servers/frontend-server/src/exp/demo/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Outlet } from '@remix-run/react';
-
-export default function Demo() {
-  return (
-    <div>
-      <h2>Vite + Remix Demo</h2>
-      <Outlet />
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/servers/frontend-server/src/exp/index.tsx b/servers/frontend-server/src/exp/index.tsx
deleted file mode 100644
index a5c92543f..000000000
--- a/servers/frontend-server/src/exp/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Link, Outlet } from '@remix-run/react';
-import type { MetaFunction } from "@remix-run/node";
-
-export const meta: MetaFunction = () => {
-  return [
-    { title: "Fullstack Pro" },
-    { name: "description", content: "Welcome to Fullstack Pro!" },
-  ];
-};
-
-export default function Index() {
-  // return OuterModule();
-  return (
-    <div style={{ 
-      fontFamily: "system-ui, sans-serif", 
-      lineHeight: "1.8",
-      display: "flex", 
-    }}>
-      <aside style={{ flexGrow: 1 }}>
-        <ul>
-          <li><Link to={'/'}>Home</Link></li>
-          <li><Link to={'/demo'}>Demo</Link></li>
-          <li><Link to={'/demo/counter'}>Demo/Counter</Link></li>
-          <li><Link to={'/demo/counter/10'}>Demo/Counter with param 10</Link></li>
-          <li><Link to={'/codegen'}>Outer modules with codegen</Link></li>
-        </ul>
-      </aside>
-      <section style={{ flexGrow: 2 }}>
-        <h1>Welcome to Remix</h1>
-        <Outlet />
-      </section>
-    </div>
-  );
-}
diff --git a/servers/frontend-server/src/modules/layout/components/SideMenu.tsx b/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
index 5e0cccdfa..288b97740 100644
--- a/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
+++ b/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
@@ -1,6 +1,6 @@
 import * as H from 'history';
 import React, {useState, useEffect} from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from '@remix-run/react';
 import * as PropTypes from 'prop-types';
 import pathToRegexp from 'path-to-regexp';
 import { Layout, Menu, Avatar } from 'antd';
diff --git a/servers/frontend-server/src/modules/module.tsx b/servers/frontend-server/src/modules/module.tsx
index 157cb245d..79e5c8ad5 100755
--- a/servers/frontend-server/src/modules/module.tsx
+++ b/servers/frontend-server/src/modules/module.tsx
@@ -4,20 +4,19 @@ import counterModules from '@sample-stack/counter-module-browser';
 import { Feature, FeatureWithRouterFactory, renderRoutes2 } from '@common-stack/client-react';
 import { SiderMenu } from './layout';
 import '@sample-stack/assets';
-import { ErrorBoundary } from '../app/ErrorBoundary';
+// import { ErrorBoundary } from '../app/ErrorBoundary';
 
 const features = new Feature(FeatureWithRouterFactory, counterModules);
-const configuredRoutes = features.getConfiguredRoutes2();
-const routes = renderRoutes2({
-    routes: configuredRoutes,
-    withRoutesElement: true,
-    isServer: __SERVER__,
-})
+// const configuredRoutes = features.getConfiguredRoutes2();
+// const routes = renderRoutes2({
+//     routes: configuredRoutes,
+//     withRoutesElement: true,
+//     isServer: __SERVER__,
+// })
 // console.log(configuredRoutes);
-export const MainRoute = (props) => {
+export const MainRoute = ({children}: any) => {
     return (
         <ConfigProvider theme={{ hashed: false }}>
-            <ErrorBoundary>
                 <Layout hasSider={true} style={{ minHeight: '100vh', display: 'flex' }}>
                     <SiderMenu
                         collapsed={false}
@@ -28,29 +27,13 @@ export const MainRoute = (props) => {
                     <Layout>
                         <Layout.Content style={{ height: '100%' }}>
                             <section className="flex-grow" style={{ height: '100%' }}>
-                                {routes}
+                                {children}
                             </section>
                         </Layout.Content>
                     </Layout>
                 </Layout>
-            </ErrorBoundary>
         </ConfigProvider>
     );
 }
 
-export const createMainRoute = (args: any) => {
-    const routes = renderRoutes2({ 
-        routes: configuredRoutes, 
-        isServer: __SERVER__, 
-        // withRoutesElement: !__SERVER__,
-        loaderArgs: args,
-    });
-    // console.log('------routes', routes);
-    return [{
-        path: '/',
-        element: <MainRoute />,
-        children: routes,
-    }];
-};
-
 export default features;
diff --git a/servers/frontend-server/src/root.tsx b/servers/frontend-server/src/root.tsx
index e223d157c..f980a0517 100644
--- a/servers/frontend-server/src/root.tsx
+++ b/servers/frontend-server/src/root.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Links,
   Meta,
@@ -5,21 +6,8 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
-// import { Layout, ConfigProvider } from 'antd';
-// import counterModules from '@sample-stack/counter-module-browser';
-// import { Feature, FeatureWithRouterFactory, renderRoutes2 } from '@common-stack/client-react';
-// import { SiderMenu } from './modules/layout';
-export { ErrorBoundary } from './app/ErrorBoundary';
-// import '@sample-stack/assets';
-
-// const features = new Feature(FeatureWithRouterFactory, counterModules);
-// const configuredRoutes = features.getConfiguredRoutes2();
-// export const routes = renderRoutes2({
-//   routes: configuredRoutes,
-//   withRoutesElement: true,
-//   isServer: __SERVER__,
-// });
-// console.log(routes);
+import { ErrorBoundary } from './app/ErrorBoundary';
+import { MainRoute } from './modules';
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -29,11 +17,16 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
+        __STYLESHEET__
       </head>
       <body>
         {children}
         <ScrollRestoration />
         <Scripts />
+        <script>window.__ENV__=[__ENV__]</script>
+        <script>window.__APOLLO_STATE__=[__APOLLO_STATE__]</script>
+        <script>window.__PRELOADED_STATE__=[__PRELOADED_STATE__]</script>
+        <script>window.__SLOT_FILLS__=[__SLOT_FILLS__]</script>
       </body>
     </html>
   );
@@ -41,8 +34,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   return (
-    
-    <Outlet />
-           
+    <MainRoute>
+      <Outlet />
+    </MainRoute>
   );
 }
+
+export { ErrorBoundary }
diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/src/routes/index.tsx
index 9973a23d9..1a13c1962 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/src/routes/index.tsx
@@ -19,17 +19,9 @@ const getFilePath = (file: string, module: string) => {
 
 export const generateRemixRoutes = async (route) => {
   
-  route("/", "exp/index.tsx", () => {
-    route("demo", "exp/demo/index.tsx", () => {
-      route("counter", "exp/demo/counter.tsx", { id: 'counter0' });
-      route("counter/:num", "exp/demo/counter.tsx", { id: 'counter1' });
-    });
-
-    counterRoutes.forEach((routeConfig: any) => {
-      const { path, file, ...routeParams }: any = Object.values(routeConfig)[0];
-      const filePath = getFilePath(file, '@sample-stack/counter-module-browser');
-      route(path, filePath, routeParams);
-    });
+  counterRoutes.forEach((routeConfig: any) => {
+    const { path, file, ...routeParams }: any = Object.values(routeConfig)[0];
+    const filePath = getFilePath(file, '@sample-stack/counter-module-browser');
+    route(path, filePath, routeParams);
   });
-
 }
diff --git a/servers/frontend-server/vite.config.ts b/servers/frontend-server/vite.config.ts
index fec2cdfd6..cb007b2a6 100644
--- a/servers/frontend-server/vite.config.ts
+++ b/servers/frontend-server/vite.config.ts
@@ -3,10 +3,10 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 // import codegen from 'vite-plugin-codegen';
 // import babel from 'vite-plugin-babel';
+
 import { generateRemixRoutes } from "./src/routes";
 
 export default defineConfig({
-  // assetsInclude: ['**/*.codegen'],
   plugins: [
     // babel(),
     // (codegen as any).default(),

From 0f2c56e7463f56b19009c7ddd4d22e0c335789c7 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Wed, 27 Mar 2024 00:37:03 -0700
Subject: [PATCH 07/17] create routes

---
 .../generate-json-from-object-plugin.mjs      |  3 +-
 .../counter/browser/src/epics/locationEpic.ts |  2 +-
 .../frontend-server/src/modules/module.tsx    | 43 ++++++++-----------
 servers/frontend-server/src/routes/index.tsx  | 37 +++++++++++++---
 4 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
index 5c90858d7..840f4f583 100644
--- a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -44,9 +44,10 @@ export default function generateJsonFromSpecificFiles(options = {}) {
                                 routConfig = {
                                     ...routConfig,
                                     file: filePath,
+                                    module: pkg.name,
                                 }
                             }
-                            return { [routConfig.path]: routConfig };
+                            return { [routConfig.key]: routConfig };
                         });
                         allFilteredRoutes.push(...newRoutes);
                     }
diff --git a/packages-modules/counter/browser/src/epics/locationEpic.ts b/packages-modules/counter/browser/src/epics/locationEpic.ts
index 37955711c..5ddf6ebd5 100644
--- a/packages-modules/counter/browser/src/epics/locationEpic.ts
+++ b/packages-modules/counter/browser/src/epics/locationEpic.ts
@@ -1,5 +1,5 @@
 import { ofType } from 'redux-observable';
-import { map, tap } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators/index.js';
 import { LOCATION_CHANGE } from '@common-stack/remix-router-redux';
 
 // Assuming LOCATION_CHANGE action type and a dummy action creator for demonstration
diff --git a/servers/frontend-server/src/modules/module.tsx b/servers/frontend-server/src/modules/module.tsx
index 79e5c8ad5..ece56e552 100755
--- a/servers/frontend-server/src/modules/module.tsx
+++ b/servers/frontend-server/src/modules/module.tsx
@@ -8,32 +8,27 @@ import '@sample-stack/assets';
 
 const features = new Feature(FeatureWithRouterFactory, counterModules);
 // const configuredRoutes = features.getConfiguredRoutes2();
-// const routes = renderRoutes2({
-//     routes: configuredRoutes,
-//     withRoutesElement: true,
-//     isServer: __SERVER__,
-// })
 // console.log(configuredRoutes);
 export const MainRoute = ({children}: any) => {
-    return (
-        <ConfigProvider theme={{ hashed: false }}>
-                <Layout hasSider={true} style={{ minHeight: '100vh', display: 'flex' }}>
-                    <SiderMenu
-                        collapsed={false}
-                        menuData={features.getMenus()}
-                        location={{ pathname: '/' } as any}
-                        segments={features.sidebarSegments}
-                    />
-                    <Layout>
-                        <Layout.Content style={{ height: '100%' }}>
-                            <section className="flex-grow" style={{ height: '100%' }}>
-                                {children}
-                            </section>
-                        </Layout.Content>
-                    </Layout>
-                </Layout>
-        </ConfigProvider>
-    );
+  return (
+    <ConfigProvider theme={{ hashed: false }}>
+      <Layout hasSider={true} style={{ minHeight: '100vh', display: 'flex' }}>
+        <SiderMenu
+          collapsed={false}
+          menuData={features.getMenus()}
+          location={{ pathname: '/' } as any}
+          segments={features.sidebarSegments}
+        />
+        <Layout>
+          <Layout.Content style={{ height: '100%' }}>
+            <section className="flex-grow" style={{ height: '100%' }}>
+              {children}
+            </section>
+          </Layout.Content>
+        </Layout>
+      </Layout>
+    </ConfigProvider>
+  );
 }
 
 export default features;
diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/src/routes/index.tsx
index 1a13c1962..15bd8118e 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/src/routes/index.tsx
@@ -1,9 +1,20 @@
 import pkg from '../../package.json' assert { type: "json" };
+import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react';
+import { DefineRouteFunction } from '@remix-run/dev/dist/config/routes';
+import counterModules from '@sample-stack/counter-module-browser';
 import counterRoutes from '@sample-stack/counter-module-browser/lib/routes.json' assert { type: "json" };
 
+const features = new Feature(FeatureWithRouterFactory, counterModules);
+const configuredRoutes = features.getConfiguredRoutes2();
+const allRoutes = [...counterRoutes];
 const dependencies: any = pkg.dependencies;
 
-const getFilePath = (file: string, module: string) => {
+const findRoute = (key: string) => {
+  const found = allRoutes.find((r) => key === Object.keys(r)[0]);
+  return found ? Object.values(found)[0] : null;
+}
+
+const genFilePath = (file: string, module: string) => {
   let link = dependencies[module];
   let filePath = file;
   
@@ -17,11 +28,23 @@ const getFilePath = (file: string, module: string) => {
   return filePath;
 };
 
-export const generateRemixRoutes = async (route) => {
-  
-  counterRoutes.forEach((routeConfig: any) => {
-    const { path, file, ...routeParams }: any = Object.values(routeConfig)[0];
-    const filePath = getFilePath(file, '@sample-stack/counter-module-browser');
-    route(path, filePath, routeParams);
+const createRecursiveRoutes = (routes: [], route: DefineRouteFunction) => {
+  routes.forEach((filteredRoute: any) => {
+    const routeConfig = findRoute(filteredRoute['key']);
+    
+    if (routeConfig) {
+      const { path, file, module, ...routeParams }: any = routeConfig;
+      const filePath = genFilePath(file, module);
+
+      route(path, filePath, routeParams, () => {
+        if (Array.isArray(filteredRoute.routes) && filteredRoute.routes.length > 0) {
+          createRecursiveRoutes(filteredRoute.routes, route);
+        }
+      });
+    }
   });
 }
+
+export const generateRemixRoutes = async (route: DefineRouteFunction) => {
+  createRecursiveRoutes(configuredRoutes, route);
+}

From e0915bd86141c1fb3c9140f0f7df42181c9e3d00 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Wed, 27 Mar 2024 00:52:10 -0700
Subject: [PATCH 08/17] Add counter page

---
 packages-modules/counter/browser/package.json                 | 1 +
 .../counter/browser/src/common/components/Dashboard.tsx       | 4 ++--
 servers/frontend-server/src/root.tsx                          | 1 -
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages-modules/counter/browser/package.json b/packages-modules/counter/browser/package.json
index 9d7e00a7a..c4e251091 100755
--- a/packages-modules/counter/browser/package.json
+++ b/packages-modules/counter/browser/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@sample-stack/platform-browser": "link:../../../packages/sample-platform/browser",
+    "@remix-run/react": "^2.8.1",
     "antd": "~5.1.7"
   },
   "peerDependencies": {
diff --git a/packages-modules/counter/browser/src/common/components/Dashboard.tsx b/packages-modules/counter/browser/src/common/components/Dashboard.tsx
index 0402a3dfe..930cc5f64 100755
--- a/packages-modules/counter/browser/src/common/components/Dashboard.tsx
+++ b/packages-modules/counter/browser/src/common/components/Dashboard.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Outlet } from "@remix-run/react";
 // import { renderRoutes2 as renderRoutes } from '@common-stack/client-react';
 
-export default (props) => <><h1>Dashboard</h1><code>{JSON.stringify(props)}</code></>;
+export default (props) => <><h1>Dashboard</h1><Outlet /></>;
diff --git a/servers/frontend-server/src/root.tsx b/servers/frontend-server/src/root.tsx
index f980a0517..110433271 100644
--- a/servers/frontend-server/src/root.tsx
+++ b/servers/frontend-server/src/root.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   Links,
   Meta,

From 8cf647d671ae1ab2b6af902d7a83ee3d823e2391 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Wed, 27 Mar 2024 06:40:45 -0700
Subject: [PATCH 09/17] Sidemenu

---
 servers/frontend-server/src/entry.client.tsx  |   1 -
 servers/frontend-server/src/entry.server.tsx  |  11 +-
 .../modules/layout/components/SideMenu.tsx    | 345 ++----------------
 .../modules/layout/components/SideMenu2.tsx   | 323 ++++++++++++++++
 servers/frontend-server/src/root.tsx          |   4 +-
 5 files changed, 360 insertions(+), 324 deletions(-)
 create mode 100644 servers/frontend-server/src/modules/layout/components/SideMenu2.tsx

diff --git a/servers/frontend-server/src/entry.client.tsx b/servers/frontend-server/src/entry.client.tsx
index b0aabdf73..221a51ad9 100644
--- a/servers/frontend-server/src/entry.client.tsx
+++ b/servers/frontend-server/src/entry.client.tsx
@@ -44,7 +44,6 @@ startTransition(() => {
                 <PersistGate loading={null} persistor={persistor}>
                   {() => (
                     <ApolloProvider client={client}>
-                      <PluginArea />
                       {modules.getWrappedRoot(<RemixBrowser />)}
                     </ApolloProvider>
                   )}
diff --git a/servers/frontend-server/src/entry.server.tsx b/servers/frontend-server/src/entry.server.tsx
index 4c6d9e2ef..4898d5a2d 100644
--- a/servers/frontend-server/src/entry.server.tsx
+++ b/servers/frontend-server/src/entry.server.tsx
@@ -95,12 +95,11 @@ function handleBrowserRequest(
                   <InversifyProvider container={container} modules={clientModules}>
                     {clientModules.getWrappedRoot(
                       <ApolloProvider client={client}>
-                        <PluginArea />
-                          <RemixServer
-                            context={remixContext}
-                            url={request.url}
-                            abortDelay={ABORT_DELAY}
-                          />
+                        <RemixServer
+                          context={remixContext}
+                          url={request.url}
+                          abortDelay={ABORT_DELAY}
+                        />
                       </ApolloProvider>,
                       request,
                     )}
diff --git a/servers/frontend-server/src/modules/layout/components/SideMenu.tsx b/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
index 288b97740..fc3f7cbc5 100644
--- a/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
+++ b/servers/frontend-server/src/modules/layout/components/SideMenu.tsx
@@ -1,321 +1,34 @@
-import * as H from 'history';
-import React, {useState, useEffect} from 'react';
+import React from 'react';
 import { Link } from '@remix-run/react';
-import * as PropTypes from 'prop-types';
-import pathToRegexp from 'path-to-regexp';
-import { Layout, Menu, Avatar } from 'antd';
-import { IMenuPosition } from '@common-stack/client-react';
-
+import { Layout } from 'antd';
 const { Sider } = Layout;
-const { SubMenu } = Menu;
 
-export function urlToList(url) {
-    const urllist = url.split('/').filter(i => i);
-    return urllist.map((urlItem, index) => {
-        return `/${urllist.slice(0, index + 1).join('/')}`;
+export const SiderMenu: React.FC = (props) => {
+  const getItems = (menus) => {
+    return menus.map((menu, k) => {
+      if (menu.children && menu.children.length > 0) {
+        return <li key={k} style={{padding: '10px 0'}}>
+          <Link to={menu.path}>{menu.name}</Link>
+          <ul style={{listStyle: 'none'}}>{getItems(menu.children)}</ul>
+        </li>
+      } else {
+        return <li key={k} style={{padding: '10px 0'}}>
+          <Link to={menu.path}>{menu.name}</Link>
+        </li>
+      }
     });
-}
-
-const getImageUrl = (picture) => {
-    return picture || "data:image/png;base64,${new Identicon(Base64.encode('myawsomestringbebe'), 420).toString()}";
+  }
+
+  return (
+    <Sider
+      trigger={null}
+      collapsible={false}
+      breakpoint="lg"
+      width={256}
+    >
+      <ul style={{listStyle: 'none'}}>
+        {getItems(props.menuData)}
+      </ul>
+    </Sider>
+  );
 };
-
-/**
- * Recursively flatten  the data
- * [{path: string}, {path: string}] => {path, path2}
- * @param menu
- */
-export const getFlatMenuKeys = menu =>
-    menu.reduce((keys, item) => {
-        keys.push(item.path);
-        if (item.children) {
-            return keys.concat(getFlatMenuKeys(item.children));
-        }
-        return keys;
-    }, []);
-
-
-/**
- * Find all matched menu keys based on paths
- * @param flatMenuKeys: [/abc, /abc/:id, /abc/:id/info]
- * @param paths: [/abc/ /abc/11, /abc/11/info]
- */
-export const getMenuMatchKeys = (flatMenuKeys, paths) =>
-    paths.reduce((matchKeys, path) => (
-        matchKeys.concat(
-            flatMenuKeys.filter(item => pathToRegexp(item).test(path)),
-        )), []);
-
-export namespace ISiderMenu {
-    export interface CompProps {
-        menuData: any;
-        segments: any;
-        onCollapse?: any;
-        state?: boolean;
-        isMobile?: boolean;
-        // renderer?: any;
-        Authorized?: any;
-        collapsed?: boolean;
-        logo?: any;
-        user?: any;
-        styles?: {
-            grow?: any;
-            logo?: any;
-            sider?: any;
-            icon?: any;
-        };
-    }
-
-    export interface StateProps {
-        location: H.Location;
-    }
-
-    export interface CompState {
-        openKeys?: any;
-    }
-
-    export type Props = CompProps & StateProps;
-    export type State = CompState;
-}
-
-export const SiderMenu = (props: ISiderMenu.Props) => {
-    const [privateValues] = useState({
-        menus: props.menuData,
-        flatMenuKeys: getFlatMenuKeys(props.menuData)
-    });
-
-    // public static contextTypes = {
-    //     renderer: PropTypes.any.isRequired,
-    // };
-
-    const defaultProps = ()=> {
-        return {
-            user: {},
-            isMobile: false,
-        };
-    }
-
-    useEffect(() => {
-        setState({
-            openKeys: getDefaultCollapsedSubMenus(props)
-        })
-    }, [props.location.pathname])
-
-    /**
-     * Convert pathname to openKeys
-     * /list/search/articles => ['list', '/list/search']
-     * @param props
-     */
-    const getDefaultCollapsedSubMenus = (props) => {
-        const { location: { pathname } } = props;
-        return getMenuMatchKeys(privateValues.flatMenuKeys, urlToList(pathname));
-    }
-
-    const [state, setState] = useState({
-        openKeys: getDefaultCollapsedSubMenus(props)
-    })
-
-    /**
-     * Allow menu.js config icon as string or ReactNode
-     * icon: 'setting',
-     * icon: 'http://demo.com/icon.png',
-     * icon: <Icon type="setting" />,
-     * @param icon
-     */
-    const getIcon = (icon) => {
-        const { styles = {} } = props;
-        if (typeof icon === 'string' && icon.indexOf('http') === 0) {
-            return <img src={icon} alt="icon" className={styles.icon} />;
-        } if (typeof icon === 'string') {
-            return <div data-type={icon} style={styles.icon} />;
-        }
-        return icon;
-    }
-
-    const getAvatar = (menu) => {
-        const { styles = {}, user } = props;
-        return (
-            <span data-user={user.nickname} id={!user || user.isTest ? `cde-user-placeholder` : 'cde-user'}>
-                <div style={{ marginRight: '7px' }} data-src={getImageUrl(user.picture)}>
-                    {user.nickname || 'Guest'}
-                </div>
-                {' '}
-                <span> {user.nickname || 'Guest'}</span>
-            </span>
-        );
-    }
-
-    /**
-     * Judge whether it is http link.return or a Link
-     * @memberOf SiderMenu
-     */
-    const getMenuItemPath = item => {
-        const { styles = {} } = props;
-        const itemPath = conversionPath(item.path);
-        const icon = getIcon(item.icon);
-        const { target, name } = item;
-        // Is it a http link
-        if (/^https?:\/\//.test(itemPath)) {
-            return (
-                <a href={itemPath} target={target}>
-                    {icon}
-                    <span>{name}</span>
-                </a>
-            );
-        }
-        return (
-            <Link
-                to={itemPath}
-                target={target}
-                replace={itemPath === props.location.pathname}
-                onClick={
-                    props.isMobile
-                        ? () => {
-                            props.onCollapse(true);
-                        }
-                        : undefined
-                }
-            >
-                {icon}
-                <span>{name}</span>
-            </Link>
-        );
-    }
-    /**
-     * get SubMenu or Item
-     */
-    const getSubMenuOrItem = (item, key) => {
-        const { styles = {} } = props;
-        if (item.children && item.children.some(child => child.name)) {
-            const childrenItems = getNavMenuItems(item.children);
-            if (childrenItems && childrenItems.length > 0) {
-                return (
-                    <SubMenu title={item.name} key={`${item.path}-${key}`}>
-                        {childrenItems}
-                    </SubMenu>
-                );
-            }
-            return null;
-        } else {
-            return <Menu.Item key={`${item.path}-${key}`}>{getMenuItemPath(item)}</Menu.Item>;
-        }
-    }
-    /**
-     * @memberof SiderMenu
-     */
-    const getNavMenuItems = menusData => {
-        if (!menusData) {
-            return [];
-        }
-        return menusData.filter(item => item.name && !item.hideInMenu)
-            .map((item, key) => {
-                // make dom
-                const ItemDom = getSubMenuOrItem(item, key);
-                return checkPermissionItem(item.authority, ItemDom);
-            })
-            .filter(item => item);
-    }
-
-    /**
-     * Generates LOGO
-     * @memberof SiderMenu
-     */
-    const getLogo = (logo) => {
-        const { styles = {} } = props;
-        return logo && (
-            <div className={styles.logo} key="logo">
-                <Link to="/">
-                    <img src={logo.icon} alt="logo" />
-                    <h1>{logo.name}</h1>
-                </Link>
-            </div>
-        );
-    }
-
-    // Get the currently selected menu
-    const getSelectedMenuKeys = () => {
-        const { location: { pathname } } = props;
-        return getMenuMatchKeys(privateValues.flatMenuKeys, urlToList(pathname));
-    }
-    // conversion Path
-    const conversionPath = path => {
-        if (path && path.indexOf('http') === 0) {
-            return path;
-        } else {
-            return `/${path || ''}`.replace(/\/+/g, '/');
-        }
-    }
-    // permission to check
-    const checkPermissionItem = (authority, ItemDom) => {
-        if (props.Authorized && props.Authorized.check) {
-            const { check } = props.Authorized;
-            return check(authority, ItemDom);
-        }
-        return ItemDom;
-    }
-    const isMainMenu = key => {
-        return privateValues.menus.some(item => key && (item.key === key || item.path === key));
-    }
-    const handleOpenChange = openKeys => {
-        const lastOpenKey = openKeys[openKeys.length - 1];
-        const moreThanOne = openKeys.filter(openKey => isMainMenu(openKey)).length > 1;
-        setState({
-            openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
-        });
-    }
-
-    // const { renderer } = this.context;
-    const { logo, collapsed, segments = [], onCollapse, styles = {} } = props;
-    const { openKeys } = state;
-    // Don't show popup menu when it is been collapsed
-    const menuProps = collapsed ? {} : { openKeys };
-    // If pathname can't match, use the nearest parent's key
-    let selectedKeys = getSelectedMenuKeys();
-    if (!selectedKeys.length) {
-        selectedKeys = [openKeys[openKeys.length - 1]];
-    }
-
-    return (
-        <Sider
-            trigger={null}
-            collapsible={true}
-            collapsed={collapsed}
-            breakpoint="lg"
-            onCollapse={onCollapse}
-            width={256}
-            className={styles.sider}
-        >
-            {getLogo((privateValues.menus.filter(menu => menu.position === IMenuPosition.LOGO) || [])[0])}
-            <div className={styles.grow}>
-                <Menu
-                    key="Menu-Middle"
-                    theme="dark"
-                    mode="inline"
-                    {...menuProps}
-                    className={styles.grow}
-                    onOpenChange={handleOpenChange}
-                    selectedKeys={selectedKeys}
-                    style={{ padding: '16px 0', width: '100%' }}
-                >
-                    {getNavMenuItems(privateValues.menus.filter(menu => menu.position === IMenuPosition.MIDDLE))}
-                </Menu>
-                {segments.map((segment, segmentIndex) => (
-                    <div key={segmentIndex}>
-                        {React.cloneElement(segment, { collapsed })}
-                    </div>
-                ))}
-            </div>
-            <Menu
-                key="Menu-Bottom"
-                theme="dark"
-                mode="inline"
-                {...menuProps}
-                onOpenChange={handleOpenChange}
-                selectedKeys={selectedKeys}
-                style={{ padding: '16px 0', width: '100%' }}
-            >
-                {getNavMenuItems(privateValues.menus.filter(menu => menu.position === IMenuPosition.BOTTOM))}
-            </Menu>
-        </Sider>
-    )
-}
\ No newline at end of file
diff --git a/servers/frontend-server/src/modules/layout/components/SideMenu2.tsx b/servers/frontend-server/src/modules/layout/components/SideMenu2.tsx
new file mode 100644
index 000000000..853adb61a
--- /dev/null
+++ b/servers/frontend-server/src/modules/layout/components/SideMenu2.tsx
@@ -0,0 +1,323 @@
+import * as H from 'history';
+import React, {useState, useEffect} from 'react';
+import { Link } from '@remix-run/react';
+import * as PropTypes from 'prop-types';
+import pathToRegexp from 'path-to-regexp';
+import { Layout, Menu, Avatar } from 'antd';
+import { IMenuPosition } from '@common-stack/client-react';
+
+const { Sider } = Layout;
+const { SubMenu } = Menu;
+
+export function urlToList(url) {
+    const urllist = url.split('/').filter(i => i);
+    return urllist.map((urlItem, index) => {
+        return `/${urllist.slice(0, index + 1).join('/')}`;
+    });
+}
+
+const getImageUrl = (picture) => {
+    return picture || "data:image/png;base64,${new Identicon(Base64.encode('myawsomestringbebe'), 420).toString()}";
+};
+
+/**
+ * Recursively flatten  the data
+ * [{path: string}, {path: string}] => {path, path2}
+ * @param menu
+ */
+export const getFlatMenuKeys = menu =>
+    menu.reduce((keys, item) => {
+        keys.push(item.path);
+        if (item.children) {
+            return keys.concat(getFlatMenuKeys(item.children));
+        }
+        return keys;
+    }, []);
+
+
+/**
+ * Find all matched menu keys based on paths
+ * @param flatMenuKeys: [/abc, /abc/:id, /abc/:id/info]
+ * @param paths: [/abc/ /abc/11, /abc/11/info]
+ */
+export const getMenuMatchKeys = (flatMenuKeys, paths) =>
+    paths.reduce((matchKeys, path) => (
+        matchKeys.concat(
+            flatMenuKeys.filter(item => pathToRegexp(item).test(path)),
+        )), []);
+
+export namespace ISiderMenu {
+    export interface CompProps {
+        menuData: any;
+        segments: any;
+        onCollapse?: any;
+        state?: boolean;
+        isMobile?: boolean;
+        // renderer?: any;
+        Authorized?: any;
+        collapsed?: boolean;
+        logo?: any;
+        user?: any;
+        styles?: {
+            grow?: any;
+            logo?: any;
+            sider?: any;
+            icon?: any;
+        };
+    }
+
+    export interface StateProps {
+        location: H.Location;
+    }
+
+    export interface CompState {
+        openKeys?: any;
+    }
+
+    export type Props = CompProps & StateProps;
+    export type State = CompState;
+}
+
+export const SiderMenu = (props: ISiderMenu.Props) => {
+    const [privateValues] = useState({
+        menus: props.menuData,
+        flatMenuKeys: getFlatMenuKeys(props.menuData)
+    });
+
+    // public static contextTypes = {
+    //     renderer: PropTypes.any.isRequired,
+    // };
+
+    const defaultProps = ()=> {
+        return {
+            user: {},
+            isMobile: false,
+        };
+    }
+
+    useEffect(() => {
+        setState({
+            openKeys: getDefaultCollapsedSubMenus(props)
+        })
+    }, [props.location.pathname])
+
+    /**
+     * Convert pathname to openKeys
+     * /list/search/articles => ['list', '/list/search']
+     * @param props
+     */
+    const getDefaultCollapsedSubMenus = (props) => {
+        const { location: { pathname } } = props;
+        return getMenuMatchKeys(privateValues.flatMenuKeys, urlToList(pathname));
+    }
+
+    const [state, setState] = useState({
+        openKeys: getDefaultCollapsedSubMenus(props)
+    })
+
+    /**
+     * Allow menu.js config icon as string or ReactNode
+     * icon: 'setting',
+     * icon: 'http://demo.com/icon.png',
+     * icon: <Icon type="setting" />,
+     * @param icon
+     */
+    const getIcon = (icon) => {
+        const { styles = {} } = props;
+        if (typeof icon === 'string' && icon.indexOf('http') === 0) {
+            return <img src={icon} alt="icon" className={styles.icon} />;
+        } if (typeof icon === 'string') {
+            return <div data-type={icon} style={styles.icon} />;
+        }
+        return icon;
+    }
+
+    const getAvatar = (menu) => {
+        const { styles = {}, user } = props;
+        return (
+            <span data-user={user.nickname} id={!user || user.isTest ? `cde-user-placeholder` : 'cde-user'}>
+                <div style={{ marginRight: '7px' }} data-src={getImageUrl(user.picture)}>
+                    {user.nickname || 'Guest'}
+                </div>
+                {' '}
+                <span> {user.nickname || 'Guest'}</span>
+            </span>
+        );
+    }
+
+    /**
+     * Judge whether it is http link.return or a Link
+     * @memberOf SiderMenu
+     */
+    const getMenuItemPath = item => {
+        const { styles = {} } = props;
+        const itemPath = conversionPath(item.path);
+        const icon = getIcon(item.icon);
+        const { target, name } = item;
+        // Is it a http link
+        if (/^https?:\/\//.test(itemPath)) {
+            return (
+                <a href={itemPath} target={target}>
+                    {icon}
+                    <span>{name}</span>
+                </a>
+            );
+        }
+        return (
+            <Link
+                to={itemPath}
+                target={target}
+                replace={itemPath === props.location.pathname}
+                onClick={
+                    props.isMobile
+                        ? () => {
+                            props.onCollapse(true);
+                        }
+                        : undefined
+                }
+            >
+                {icon}
+                <span>{name}</span>
+            </Link>
+        );
+    }
+    /**
+     * get SubMenu or Item
+     */
+    const getSubMenuOrItem = (item, key) => {
+        const { styles = {} } = props;
+        console.log(item.children);
+        if (item.children && item.children.some(child => child.name)) {
+            const childrenItems = getNavMenuItems(item.children);
+            console.log(childrenItems);
+            if (childrenItems && childrenItems.length > 0) {
+                return (
+                    <SubMenu title={item.name} key={`${item.path}-${key}`}>
+                        {childrenItems}
+                    </SubMenu>
+                );
+            }
+            return null;
+        } else {
+            return <Menu.Item key={`${item.path}-${key}`}>{getMenuItemPath(item)}</Menu.Item>;
+        }
+    }
+    /**
+     * @memberof SiderMenu
+     */
+    const getNavMenuItems = menusData => {
+        if (!menusData) {
+            return [];
+        }
+        return menusData.filter(item => item.name && !item.hideInMenu)
+            .map((item, key) => {
+                // make dom
+                const ItemDom = getSubMenuOrItem(item, key);
+                return  checkPermissionItem(item.authority, ItemDom);
+            })
+            .filter(item => item);
+    }
+
+    /**
+     * Generates LOGO
+     * @memberof SiderMenu
+     */
+    const getLogo = (logo) => {
+        const { styles = {} } = props;
+        return logo && (
+            <div className={styles.logo} key="logo">
+                <Link to="/">
+                    <img src={logo.icon} alt="logo" />
+                    <h1>{logo.name}</h1>
+                </Link>
+            </div>
+        );
+    }
+
+    // Get the currently selected menu
+    const getSelectedMenuKeys = () => {
+        const { location: { pathname } } = props;
+        return getMenuMatchKeys(privateValues.flatMenuKeys, urlToList(pathname));
+    }
+    // conversion Path
+    const conversionPath = path => {
+        if (path && path.indexOf('http') === 0) {
+            return path;
+        } else {
+            return `/${path || ''}`.replace(/\/+/g, '/');
+        }
+    }
+    // permission to check
+    const checkPermissionItem = (authority, ItemDom) => {
+        if (props.Authorized && props.Authorized.check) {
+            const { check } = props.Authorized;
+            return check(authority, ItemDom);
+        }
+        return ItemDom;
+    }
+    const isMainMenu = key => {
+        return privateValues.menus.some(item => key && (item.key === key || item.path === key));
+    }
+    const handleOpenChange = openKeys => {
+        const lastOpenKey = openKeys[openKeys.length - 1];
+        const moreThanOne = openKeys.filter(openKey => isMainMenu(openKey)).length > 1;
+        setState({
+            openKeys: moreThanOne ? [lastOpenKey] : [...openKeys],
+        });
+    }
+
+    // const { renderer } = this.context;
+    const { logo, collapsed, segments = [], onCollapse, styles = {} } = props;
+    const { openKeys } = state;
+    // Don't show popup menu when it is been collapsed
+    const menuProps = collapsed ? {} : { openKeys };
+    // If pathname can't match, use the nearest parent's key
+    let selectedKeys = getSelectedMenuKeys();
+    if (!selectedKeys.length) {
+        selectedKeys = [openKeys[openKeys.length - 1]];
+    }
+
+    return (
+        <Sider
+            trigger={null}
+            collapsible={true}
+            collapsed={collapsed}
+            breakpoint="lg"
+            onCollapse={onCollapse}
+            width={256}
+            className={styles.sider}
+        >
+            {getLogo((privateValues.menus.filter(menu => menu.position === IMenuPosition.LOGO) || [])[0])}
+            <div className={styles.grow}>
+                <Menu
+                    key="Menu-Middle"
+                    theme="dark"
+                    mode="inline"
+                    {...menuProps}
+                    className={styles.grow}
+                    onOpenChange={handleOpenChange}
+                    selectedKeys={selectedKeys}
+                    style={{ padding: '16px 0', width: '100%' }}
+                >
+                    {getNavMenuItems(privateValues.menus.filter(menu => menu.position === IMenuPosition.MIDDLE))}
+                </Menu>
+                {segments.map((segment, segmentIndex) => (
+                    <div key={segmentIndex}>
+                        {React.cloneElement(segment, { collapsed })}
+                    </div>
+                ))}
+            </div>
+            <Menu
+                key="Menu-Bottom"
+                theme="dark"
+                mode="inline"
+                {...menuProps}
+                onOpenChange={handleOpenChange}
+                selectedKeys={selectedKeys}
+                style={{ padding: '16px 0', width: '100%' }}
+            >
+                {getNavMenuItems(privateValues.menus.filter(menu => menu.position === IMenuPosition.BOTTOM))}
+            </Menu>
+        </Sider>
+    )
+}
\ No newline at end of file
diff --git a/servers/frontend-server/src/root.tsx b/servers/frontend-server/src/root.tsx
index 110433271..74ebc1f04 100644
--- a/servers/frontend-server/src/root.tsx
+++ b/servers/frontend-server/src/root.tsx
@@ -7,6 +7,7 @@ import {
 } from "@remix-run/react";
 import { ErrorBoundary } from './app/ErrorBoundary';
 import { MainRoute } from './modules';
+import { PluginArea } from '@common-stack/client-react';
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -19,6 +20,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         __STYLESHEET__
       </head>
       <body>
+        <PluginArea />
         {children}
         <ScrollRestoration />
         <Scripts />
@@ -39,4 +41,4 @@ export default function App() {
   );
 }
 
-export { ErrorBoundary }
+// export { ErrorBoundary }

From 2e91d6b65c4c26b99ba033d0b594247d0c18a30c Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Wed, 27 Mar 2024 15:54:11 -0700
Subject: [PATCH 10/17] Add wrapper

---
 .../generate-json-from-object-plugin.mjs      |  2 +-
 .../browser/src/common/components/Wrapper.tsx |  1 +
 .../counter/browser/src/common/compute.tsx    |  1 +
 servers/frontend-server/package.json          |  2 -
 servers/frontend-server/src/root.tsx          |  2 +-
 servers/frontend-server/src/routes/index.tsx  | 33 +++++++-----
 .../frontend-server/src/routes/wrapRoutes.tsx | 40 +++++++++++++++
 servers/frontend-server/vite.config.ts        |  4 --
 yarn.lock                                     | 51 ++++++++++++++++++-
 9 files changed, 115 insertions(+), 21 deletions(-)
 create mode 100644 packages-modules/counter/browser/src/common/components/Wrapper.tsx
 create mode 100644 servers/frontend-server/src/routes/wrapRoutes.tsx

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
index 840f4f583..9ece0e1a9 100644
--- a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -29,7 +29,7 @@ export default function generateJsonFromSpecificFiles(options = {}) {
 
             for (const file of relativeFiles) {
                 const relativePath = file.startsWith('.') ? file : `./${file}`;
-                const baseRoutePath = path.dirname(pkg.name + relativePath.substring(1));
+                const baseRoutePath = path.dirname(relativePath.substring(1));
                 
                 try {
                     // Dynamically import the JS file assuming it exports filteredRoutes
diff --git a/packages-modules/counter/browser/src/common/components/Wrapper.tsx b/packages-modules/counter/browser/src/common/components/Wrapper.tsx
new file mode 100644
index 000000000..32a30028a
--- /dev/null
+++ b/packages-modules/counter/browser/src/common/components/Wrapper.tsx
@@ -0,0 +1 @@
+export default ({children}) => <><h5> -- Wrapped component -- </h5>{children}</>;
diff --git a/packages-modules/counter/browser/src/common/compute.tsx b/packages-modules/counter/browser/src/common/compute.tsx
index 3af646805..69672f032 100755
--- a/packages-modules/counter/browser/src/common/compute.tsx
+++ b/packages-modules/counter/browser/src/common/compute.tsx
@@ -9,6 +9,7 @@ export const commonPageStore: any[] = [
         exact: true,
         name: 'Home',
         component: () => import('../common/components/Home'),
+        wrapper: () => import('../common/components/Wrapper'),
         position: IMenuPosition.MIDDLE,
         file: '../common/components/Home',
     },
diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json
index dc6055953..af08517a3 100755
--- a/servers/frontend-server/package.json
+++ b/servers/frontend-server/package.json
@@ -135,8 +135,6 @@
         "tsx": "^4.7.0",
         "typescript": "^5.1.6",
         "vite": "^5.1.0",
-        "vite-plugin-babel": "^1.2.0",
-        "vite-plugin-codegen": "^1.1.1",
         "vite-tsconfig-paths": "^4.2.1"
     },
     "peerDependencies": {
diff --git a/servers/frontend-server/src/root.tsx b/servers/frontend-server/src/root.tsx
index 74ebc1f04..5058cbf00 100644
--- a/servers/frontend-server/src/root.tsx
+++ b/servers/frontend-server/src/root.tsx
@@ -41,4 +41,4 @@ export default function App() {
   );
 }
 
-// export { ErrorBoundary }
+export { ErrorBoundary }
diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/src/routes/index.tsx
index 15bd8118e..1dbad4c02 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/src/routes/index.tsx
@@ -3,6 +3,7 @@ import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react';
 import { DefineRouteFunction } from '@remix-run/dev/dist/config/routes';
 import counterModules from '@sample-stack/counter-module-browser';
 import counterRoutes from '@sample-stack/counter-module-browser/lib/routes.json' assert { type: "json" };
+import { wrapRouteComponent } from './wrapRoutes';
 
 const features = new Feature(FeatureWithRouterFactory, counterModules);
 const configuredRoutes = features.getConfiguredRoutes2();
@@ -15,17 +16,20 @@ const findRoute = (key: string) => {
 }
 
 const genFilePath = (file: string, module: string) => {
-  let link = dependencies[module];
-  let filePath = file;
-  
-  if (link && link.startsWith('link:')) {
-    link = link.replace('link:', '');
-    filePath = filePath.replace(module, link);
-    filePath = '../' + filePath; // escape from src/
-  } else {
-    filePath = '../node_modules/' + filePath; // escape from src/, enter node_modules/
-  }
-  return filePath;
+  // if (process.env.NODE_ENV === 'development') {
+  //   let link = dependencies[module];
+  //   let filePath = file;
+    
+  //   if (link && link.startsWith('link:')) {
+  //     link = link.replace('link:', '');
+  //     filePath = filePath.replace(module, link);
+  //     filePath = '../' + filePath; // escape from src/
+  //   } else {
+  //     filePath = '../node_modules/' + filePath; // escape from src/, enter node_modules/
+  //   }
+  //   return filePath;
+  // }
+  return `../../../node_modules/${file}`; // servers/frontend-server/src
 };
 
 const createRecursiveRoutes = (routes: [], route: DefineRouteFunction) => {
@@ -34,7 +38,12 @@ const createRecursiveRoutes = (routes: [], route: DefineRouteFunction) => {
     
     if (routeConfig) {
       const { path, file, module, ...routeParams }: any = routeConfig;
-      const filePath = genFilePath(file, module);
+      
+      let filePath = `${module}${file}`;
+      if (routeParams.exact === true) {
+        filePath = wrapRouteComponent(filePath);
+      }
+      filePath = genFilePath(filePath, module);
 
       route(path, filePath, routeParams, () => {
         if (Array.isArray(filteredRoute.routes) && filteredRoute.routes.length > 0) {
diff --git a/servers/frontend-server/src/routes/wrapRoutes.tsx b/servers/frontend-server/src/routes/wrapRoutes.tsx
new file mode 100644
index 000000000..420258aa7
--- /dev/null
+++ b/servers/frontend-server/src/routes/wrapRoutes.tsx
@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+
+const wrapperComponentImportPath = '../components/Wrapper'; // Adjust the path as necessary
+
+export function getRootPath() {
+  const directoryName = path.dirname(process.cwd());
+  const rootPath = directoryName.split(path.sep);
+  rootPath.splice(rootPath.length - 1, 1);
+  
+  return rootPath.join(path.sep);
+}
+
+export function wrapRouteComponent(file: string) {
+  const basePath = getRootPath() + '/node_modules/';
+  const filePath = `${basePath}${file}`;
+  let fileName = path.basename(file);
+
+  try {
+    const wrappedContent = `
+import * as React from 'react';
+import Wrapper from '${wrapperComponentImportPath}';
+import Component from './${fileName}';
+var WrappedComponent = (props) => {
+  return (React.createElement(Wrapper, null,
+    React.createElement(Component, props)));
+};export{WrappedComponent as default};
+`;
+    fileName = `_authenticate${fileName}`;
+    const newPath = path.resolve(path.dirname(filePath), fileName);
+    fs.writeFileSync(newPath, wrappedContent, 'utf8');
+    console.log(`Wrapped ${newPath}`);
+
+    return newPath.replace(basePath, '');
+  } catch (e) {
+    console.log('Error', e);
+  }
+
+  return file;
+}
diff --git a/servers/frontend-server/vite.config.ts b/servers/frontend-server/vite.config.ts
index cb007b2a6..e89212efd 100644
--- a/servers/frontend-server/vite.config.ts
+++ b/servers/frontend-server/vite.config.ts
@@ -1,15 +1,11 @@
 import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
-// import codegen from 'vite-plugin-codegen';
-// import babel from 'vite-plugin-babel';
 
 import { generateRemixRoutes } from "./src/routes";
 
 export default defineConfig({
   plugins: [
-    // babel(),
-    // (codegen as any).default(),
     remix({
       appDirectory: "src",
       routes: async (defineRoutes) => 
diff --git a/yarn.lock b/yarn.lock
index 04edd51c0..59d322280 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2427,6 +2427,13 @@
   dependencies:
     "@common-stack/core" "3.0.3-alpha.0"
 
+"@common-stack/client-core@3.0.3-alpha.8":
+  version "3.0.3-alpha.8"
+  resolved "https://registry.yarnpkg.com/@common-stack/client-core/-/client-core-3.0.3-alpha.8.tgz#86fead3521c05f791533d2d4cfdf4591519e04d9"
+  integrity sha512-LP0hOOSzNKwDsh+j5uPZNbve4ZUbae/Jg71YQYKmDKxxgxlUH5cX7voQtvQNDxDTdOUgdB7SDFhuixVdyV1lxQ==
+  dependencies:
+    "@common-stack/core" "3.0.3-alpha.8"
+
 "@common-stack/client-react@3.0.3-alpha.2", "@common-stack/client-react@^3.0.3-alpha.2":
   version "3.0.3-alpha.2"
   resolved "https://registry.yarnpkg.com/@common-stack/client-react/-/client-react-3.0.3-alpha.2.tgz#3785d156ce9c5d3b0fb19e182e2a8cb393a433a3"
@@ -2439,6 +2446,18 @@
     history-with-query "^4.10.4"
     sort-keys "^4.1.0"
 
+"@common-stack/client-react@3.0.3-alpha.8":
+  version "3.0.3-alpha.8"
+  resolved "https://registry.yarnpkg.com/@common-stack/client-react/-/client-react-3.0.3-alpha.8.tgz#9c1b086aebc92cd7efc1c04af4a86f78111ec688"
+  integrity sha512-7fV8XRuBh/XrHp//ERYWc063YRAVEs1jrvFu4cF2ANHjBp4lKJVnqbss3p1qLbzHDuFL6pirJkeLg+5C6hGBWg==
+  dependencies:
+    "@common-stack/client-core" "3.0.3-alpha.8"
+    "@common-stack/core" "3.0.3-alpha.8"
+    "@wordpress/hooks" "^3.53.0"
+    browser-bunyan "^1.6.3"
+    history-with-query "^4.10.4"
+    sort-keys "^4.1.0"
+
 "@common-stack/components-pro@3.0.3-alpha.2", "@common-stack/components-pro@^3.0.3-alpha.2":
   version "3.0.3-alpha.2"
   resolved "https://registry.yarnpkg.com/@common-stack/components-pro/-/components-pro-3.0.3-alpha.2.tgz#4778acb692efdf6defd98aa67e1947b425f7668c"
@@ -2459,6 +2478,11 @@
   resolved "https://registry.yarnpkg.com/@common-stack/core/-/core-3.0.3-alpha.0.tgz#5710849e1e184da024fbd337b40a33aebee7cc05"
   integrity sha512-vil3sGPtDQ96Mllyk4mT6rCoQvCsaNWfSDDVetnE6Bz5lpymenJQ7PuxdfaepcT9dKa3OAHcw78MMz5aYgz6jw==
 
+"@common-stack/core@3.0.3-alpha.8":
+  version "3.0.3-alpha.8"
+  resolved "https://registry.yarnpkg.com/@common-stack/core/-/core-3.0.3-alpha.8.tgz#e48a1efb07cc12b54216fb5fc3785ea1b307429f"
+  integrity sha512-uUaYZB+GPP9OGBfwV8jC9oIkVUMizDpLNmxkEQfwosHw/KjZFaJJly+wYBpd5gEDf+XFzasKnjF2uIa1Xj3TCA==
+
 "@common-stack/env-list-loader@0.5.8":
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/@common-stack/env-list-loader/-/env-list-loader-0.5.8.tgz#88355d0b9ea4e98f11e5dcc1d5fa9b2d9b11c061"
@@ -2492,6 +2516,15 @@
   dependencies:
     "@common-stack/core" "3.0.3-alpha.0"
 
+"@common-stack/vite-routes-plugin@3.0.3-alpha.9":
+  version "3.0.3-alpha.9"
+  resolved "https://registry.yarnpkg.com/@common-stack/vite-routes-plugin/-/vite-routes-plugin-3.0.3-alpha.9.tgz#c9e5b9c92c4a1f6a5eeb297ed2b6789977e3597c"
+  integrity sha512-8VfJGk6Iu6xV34+ospvHdeppLiSQBeBWCM/6IToDSHP/Sdjft4UGP2XGWBlZiui3ZaL0COFexqCbSKqNNh9YlQ==
+  dependencies:
+    "@common-stack/client-react" "3.0.3-alpha.8"
+    "@common-stack/core" "3.0.3-alpha.8"
+    glob-all "^3.3.1"
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
@@ -7582,6 +7615,7 @@
 "@sample-stack/counter-module-browser@link:packages-modules/counter/browser":
   version "0.0.1"
   dependencies:
+    "@remix-run/react" "^2.8.1"
     "@sample-stack/platform-browser" "link:packages/sample-platform/browser"
     antd "~5.1.7"
 
@@ -16386,6 +16420,13 @@ esbuild-plugins-node-modules-polyfill@^1.6.0:
     local-pkg "^0.5.0"
     resolve.exports "^2.0.2"
 
+esbuild-register@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.5.0.tgz#449613fb29ab94325c722f560f800dd946dc8ea8"
+  integrity sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==
+  dependencies:
+    debug "^4.3.4"
+
 esbuild-sunos-64@0.15.18:
   version "0.15.18"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz#fd528aa5da5374b7e1e93d36ef9b07c3dfed2971"
@@ -18916,6 +18957,14 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
+glob-all@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.3.1.tgz#6be2d5d8276902319f640fbf839fbe15b35e7667"
+  integrity sha512-Y+ESjdI7ZgMwfzanHZYQ87C59jOO0i+Hd+QYtVt9PhLi6d8wlOpzQnfBxWUlaTuAoR3TkybLqqbIoWveU4Ji7Q==
+  dependencies:
+    glob "^7.2.3"
+    yargs "^15.3.1"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -19008,7 +19057,7 @@ glob@7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.2.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+glob@7.2.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0, glob@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==

From 113e07a4febf1a394c256085f9804388cc22264a Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Wed, 27 Mar 2024 16:28:39 -0700
Subject: [PATCH 11/17] update with authwrapper

---
 .../counter/browser/src/common/components/Wrapper.tsx     | 4 +++-
 servers/frontend-server/src/routes/index.tsx              | 2 +-
 servers/frontend-server/src/routes/wrapRoutes.tsx         | 8 ++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages-modules/counter/browser/src/common/components/Wrapper.tsx b/packages-modules/counter/browser/src/common/components/Wrapper.tsx
index 32a30028a..c1c2d4e0c 100644
--- a/packages-modules/counter/browser/src/common/components/Wrapper.tsx
+++ b/packages-modules/counter/browser/src/common/components/Wrapper.tsx
@@ -1 +1,3 @@
-export default ({children}) => <><h5> -- Wrapped component -- </h5>{children}</>;
+export const authWrapper = (Component: React.ReactElement, props: Record<string, any>) => {
+  return <><h5>-- auth wrapped --</h5>{Component}</>;
+}
diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/src/routes/index.tsx
index 1dbad4c02..268dc415b 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/src/routes/index.tsx
@@ -40,7 +40,7 @@ const createRecursiveRoutes = (routes: [], route: DefineRouteFunction) => {
       const { path, file, module, ...routeParams }: any = routeConfig;
       
       let filePath = `${module}${file}`;
-      if (routeParams.exact === true) {
+      if (routeParams.auth === true) {
         filePath = wrapRouteComponent(filePath);
       }
       filePath = genFilePath(filePath, module);
diff --git a/servers/frontend-server/src/routes/wrapRoutes.tsx b/servers/frontend-server/src/routes/wrapRoutes.tsx
index 420258aa7..486e49f14 100644
--- a/servers/frontend-server/src/routes/wrapRoutes.tsx
+++ b/servers/frontend-server/src/routes/wrapRoutes.tsx
@@ -1,7 +1,8 @@
 import fs from 'fs';
 import path from 'path';
 
-const wrapperComponentImportPath = '../components/Wrapper'; // Adjust the path as necessary
+// const authWrapperImportPath = '../components/Wrapper'; // Adjust the path as necessary
+const authWrapperImportPath = '@adminide-stack/user-auth0-browser-ant';
 
 export function getRootPath() {
   const directoryName = path.dirname(process.cwd());
@@ -19,11 +20,10 @@ export function wrapRouteComponent(file: string) {
   try {
     const wrappedContent = `
 import * as React from 'react';
-import Wrapper from '${wrapperComponentImportPath}';
+import { authWrapper } from '${authWrapperImportPath}';
 import Component from './${fileName}';
 var WrappedComponent = (props) => {
-  return (React.createElement(Wrapper, null,
-    React.createElement(Component, props)));
+  return (authWrapper(React.createElement(Component, props), props));
 };export{WrappedComponent as default};
 `;
     fileName = `_authenticate${fileName}`;

From d4e5c30e68a747744fccd46b0ecdfb1552532ea6 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Thu, 28 Mar 2024 01:07:49 -0700
Subject: [PATCH 12/17] move routes

---
 .../{src/routes/index.tsx => tools/generateRoutes.tsx}          | 2 +-
 servers/frontend-server/{src/routes => tools}/wrapRoutes.tsx    | 0
 servers/frontend-server/vite.config.ts                          | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename servers/frontend-server/{src/routes/index.tsx => tools/generateRoutes.tsx} (97%)
 rename servers/frontend-server/{src/routes => tools}/wrapRoutes.tsx (100%)

diff --git a/servers/frontend-server/src/routes/index.tsx b/servers/frontend-server/tools/generateRoutes.tsx
similarity index 97%
rename from servers/frontend-server/src/routes/index.tsx
rename to servers/frontend-server/tools/generateRoutes.tsx
index 268dc415b..3d832bd29 100644
--- a/servers/frontend-server/src/routes/index.tsx
+++ b/servers/frontend-server/tools/generateRoutes.tsx
@@ -1,4 +1,4 @@
-import pkg from '../../package.json' assert { type: "json" };
+import pkg from '../package.json' assert { type: "json" };
 import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react';
 import { DefineRouteFunction } from '@remix-run/dev/dist/config/routes';
 import counterModules from '@sample-stack/counter-module-browser';
diff --git a/servers/frontend-server/src/routes/wrapRoutes.tsx b/servers/frontend-server/tools/wrapRoutes.tsx
similarity index 100%
rename from servers/frontend-server/src/routes/wrapRoutes.tsx
rename to servers/frontend-server/tools/wrapRoutes.tsx
diff --git a/servers/frontend-server/vite.config.ts b/servers/frontend-server/vite.config.ts
index e89212efd..34978b067 100644
--- a/servers/frontend-server/vite.config.ts
+++ b/servers/frontend-server/vite.config.ts
@@ -2,7 +2,7 @@ import { vitePlugin as remix } from "@remix-run/dev";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-import { generateRemixRoutes } from "./src/routes";
+import { generateRemixRoutes } from "./tools/generateRoutes";
 
 export default defineConfig({
   plugins: [

From 7eebf2049531612e00700e69f5c2e434b9cc8ca5 Mon Sep 17 00:00:00 2001
From: Devmax <maxsamuel214@protonmail.com>
Date: Thu, 28 Mar 2024 04:28:56 -0700
Subject: [PATCH 13/17] updates

---
 package.json                                  |  1 +
 .../{remix.env.d.ts => env.d.ts}              |  5 +-
 servers/frontend-server/package.json          |  1 -
 servers/frontend-server/tsconfig.json         |  7 ++-
 yarn.lock                                     | 60 +------------------
 5 files changed, 10 insertions(+), 64 deletions(-)
 rename servers/frontend-server/{remix.env.d.ts => env.d.ts} (57%)

diff --git a/package.json b/package.json
index 1f968d16c..e85a67f20 100755
--- a/package.json
+++ b/package.json
@@ -173,6 +173,7 @@
         "@redux-devtools/core": "^3.13.1",
         "@redux-devtools/dock-monitor": "^3.0.1",
         "@redux-devtools/log-monitor": "^4.0.1",
+        "@remix-run/dev": "^2.8.1",
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-graphql": "2.0.2",
         "@rollup/plugin-image": "^3.0.1",
diff --git a/servers/frontend-server/remix.env.d.ts b/servers/frontend-server/env.d.ts
similarity index 57%
rename from servers/frontend-server/remix.env.d.ts
rename to servers/frontend-server/env.d.ts
index fbfaacbd7..b7f873847 100644
--- a/servers/frontend-server/remix.env.d.ts
+++ b/servers/frontend-server/env.d.ts
@@ -1,6 +1,9 @@
+/// <reference types="vite/client" />
+/// <reference types="@remix-run/node" />
+
 interface Window {
   __ENV__: any,
   __APOLLO_STATE__: any,
   __PRELOADED_STATE__: any,
   __SLOT_FILLS__: any,
-}
\ No newline at end of file
+}
diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json
index af08517a3..4840ee334 100755
--- a/servers/frontend-server/package.json
+++ b/servers/frontend-server/package.json
@@ -110,7 +110,6 @@
     "devDependencies": {
         "@babel/polyfill": "7.12.1",
         "@loadable/babel-plugin": "^5.16.1",
-        "@remix-run/dev": "^2.8.1",
         "@types/compression": "^1.7.5",
         "@types/express": "^4.17.20",
         "@types/morgan": "^1.9.9",
diff --git a/servers/frontend-server/tsconfig.json b/servers/frontend-server/tsconfig.json
index 1406f9bca..fd2e097d2 100755
--- a/servers/frontend-server/tsconfig.json
+++ b/servers/frontend-server/tsconfig.json
@@ -7,14 +7,14 @@
     "rollup.config.js",
   ],
   "include": [
+    "env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.codegen",
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx",
-    "src/routes/*.codegen.d.ts"
+    "**/.client/**/*.tsx"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
@@ -37,5 +37,6 @@
 
     // Vite takes care of building everything, not tsc.
     "noEmit": true
-  }
+  },
+  "skipLibCheck": true
 }
diff --git a/yarn.lock b/yarn.lock
index 59d322280..6a867e3e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2427,13 +2427,6 @@
   dependencies:
     "@common-stack/core" "3.0.3-alpha.0"
 
-"@common-stack/client-core@3.0.3-alpha.8":
-  version "3.0.3-alpha.8"
-  resolved "https://registry.yarnpkg.com/@common-stack/client-core/-/client-core-3.0.3-alpha.8.tgz#86fead3521c05f791533d2d4cfdf4591519e04d9"
-  integrity sha512-LP0hOOSzNKwDsh+j5uPZNbve4ZUbae/Jg71YQYKmDKxxgxlUH5cX7voQtvQNDxDTdOUgdB7SDFhuixVdyV1lxQ==
-  dependencies:
-    "@common-stack/core" "3.0.3-alpha.8"
-
 "@common-stack/client-react@3.0.3-alpha.2", "@common-stack/client-react@^3.0.3-alpha.2":
   version "3.0.3-alpha.2"
   resolved "https://registry.yarnpkg.com/@common-stack/client-react/-/client-react-3.0.3-alpha.2.tgz#3785d156ce9c5d3b0fb19e182e2a8cb393a433a3"
@@ -2446,18 +2439,6 @@
     history-with-query "^4.10.4"
     sort-keys "^4.1.0"
 
-"@common-stack/client-react@3.0.3-alpha.8":
-  version "3.0.3-alpha.8"
-  resolved "https://registry.yarnpkg.com/@common-stack/client-react/-/client-react-3.0.3-alpha.8.tgz#9c1b086aebc92cd7efc1c04af4a86f78111ec688"
-  integrity sha512-7fV8XRuBh/XrHp//ERYWc063YRAVEs1jrvFu4cF2ANHjBp4lKJVnqbss3p1qLbzHDuFL6pirJkeLg+5C6hGBWg==
-  dependencies:
-    "@common-stack/client-core" "3.0.3-alpha.8"
-    "@common-stack/core" "3.0.3-alpha.8"
-    "@wordpress/hooks" "^3.53.0"
-    browser-bunyan "^1.6.3"
-    history-with-query "^4.10.4"
-    sort-keys "^4.1.0"
-
 "@common-stack/components-pro@3.0.3-alpha.2", "@common-stack/components-pro@^3.0.3-alpha.2":
   version "3.0.3-alpha.2"
   resolved "https://registry.yarnpkg.com/@common-stack/components-pro/-/components-pro-3.0.3-alpha.2.tgz#4778acb692efdf6defd98aa67e1947b425f7668c"
@@ -2478,11 +2459,6 @@
   resolved "https://registry.yarnpkg.com/@common-stack/core/-/core-3.0.3-alpha.0.tgz#5710849e1e184da024fbd337b40a33aebee7cc05"
   integrity sha512-vil3sGPtDQ96Mllyk4mT6rCoQvCsaNWfSDDVetnE6Bz5lpymenJQ7PuxdfaepcT9dKa3OAHcw78MMz5aYgz6jw==
 
-"@common-stack/core@3.0.3-alpha.8":
-  version "3.0.3-alpha.8"
-  resolved "https://registry.yarnpkg.com/@common-stack/core/-/core-3.0.3-alpha.8.tgz#e48a1efb07cc12b54216fb5fc3785ea1b307429f"
-  integrity sha512-uUaYZB+GPP9OGBfwV8jC9oIkVUMizDpLNmxkEQfwosHw/KjZFaJJly+wYBpd5gEDf+XFzasKnjF2uIa1Xj3TCA==
-
 "@common-stack/env-list-loader@0.5.8":
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/@common-stack/env-list-loader/-/env-list-loader-0.5.8.tgz#88355d0b9ea4e98f11e5dcc1d5fa9b2d9b11c061"
@@ -2516,15 +2492,6 @@
   dependencies:
     "@common-stack/core" "3.0.3-alpha.0"
 
-"@common-stack/vite-routes-plugin@3.0.3-alpha.9":
-  version "3.0.3-alpha.9"
-  resolved "https://registry.yarnpkg.com/@common-stack/vite-routes-plugin/-/vite-routes-plugin-3.0.3-alpha.9.tgz#c9e5b9c92c4a1f6a5eeb297ed2b6789977e3597c"
-  integrity sha512-8VfJGk6Iu6xV34+ospvHdeppLiSQBeBWCM/6IToDSHP/Sdjft4UGP2XGWBlZiui3ZaL0COFexqCbSKqNNh9YlQ==
-  dependencies:
-    "@common-stack/client-react" "3.0.3-alpha.8"
-    "@common-stack/core" "3.0.3-alpha.8"
-    glob-all "^3.3.1"
-
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
@@ -16420,13 +16387,6 @@ esbuild-plugins-node-modules-polyfill@^1.6.0:
     local-pkg "^0.5.0"
     resolve.exports "^2.0.2"
 
-esbuild-register@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.5.0.tgz#449613fb29ab94325c722f560f800dd946dc8ea8"
-  integrity sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==
-  dependencies:
-    debug "^4.3.4"
-
 esbuild-sunos-64@0.15.18:
   version "0.15.18"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.18.tgz#fd528aa5da5374b7e1e93d36ef9b07c3dfed2971"
@@ -18957,14 +18917,6 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
-glob-all@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.3.1.tgz#6be2d5d8276902319f640fbf839fbe15b35e7667"
-  integrity sha512-Y+ESjdI7ZgMwfzanHZYQ87C59jOO0i+Hd+QYtVt9PhLi6d8wlOpzQnfBxWUlaTuAoR3TkybLqqbIoWveU4Ji7Q==
-  dependencies:
-    glob "^7.2.3"
-    yargs "^15.3.1"
-
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -19057,7 +19009,7 @@ glob@7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@7.2.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0, glob@^7.2.3:
+glob@7.2.3, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -34839,16 +34791,6 @@ vite-node@^1.2.0:
     picocolors "^1.0.0"
     vite "^5.0.0"
 
-vite-plugin-babel@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-babel/-/vite-plugin-babel-1.2.0.tgz#0d803d489c2a7e63ceb93e37533de298e1537c71"
-  integrity sha512-ltAnq535Ubf9sDbVCkztAdkwx5aQbNrwPFs+iZTJ5FaAhTdxjqmLGpxsAaRfJWEKBJ/kFf9KwMoTdArm0IRUUw==
-
-vite-plugin-codegen@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vite-plugin-codegen/-/vite-plugin-codegen-1.1.1.tgz#a7ee1e48414fc2a6c18e86da26c542561dbf3cb6"
-  integrity sha512-wX3ZGmVM75VQuiQwuGR/sQq3CAPsE96yGb/cNyooKNHFGp82Vyzi522Z9fpNdKXeST71RJvRfdOqKXUtuGDBUA==
-
 vite-tsconfig-paths@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"

From e91558606a51021ab951d3e5428c15a7f66d3780 Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Fri, 29 Mar 2024 11:25:05 -0400
Subject: [PATCH 14/17] update json modifyLib

---
 .../generate-json-from-object-plugin.mjs      |  28 +----
 .../counter/browser/modifyLibFilesPlugin.mjs  | 110 ++++++++++++++++++
 .../counter/browser/rollup.config.mjs         |   9 +-
 3 files changed, 119 insertions(+), 28 deletions(-)
 create mode 100644 packages-modules/counter/browser/modifyLibFilesPlugin.mjs

diff --git a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
index 9ece0e1a9..062d9c5bc 100644
--- a/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
+++ b/packages-modules/counter/browser/generate-json-from-object-plugin.mjs
@@ -1,11 +1,8 @@
-import * as parser from '@babel/parser';
-import traverse from '@babel/traverse';
 import { promisify } from 'util';
 import glob from 'glob';
 import fs from 'fs';
 import path from 'path';
 
-const pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8'));
 const globPromise = promisify(glob.glob); // Make sure to call .glob here
 
 export default function generateJsonFromSpecificFiles(options = {}) {
@@ -18,36 +15,17 @@ export default function generateJsonFromSpecificFiles(options = {}) {
     return {
         name: 'aggregate-compute-routes',
         async writeBundle() { // Changed from generateBundle to writeBundle
-            console.log('Processing with pattern:', pattern, 'in directory:', dist);
             const files = await globPromise(path.join(dist, pattern), { absolute: true }); // Ensure paths are absolute
-            const basePath = process.cwd();
-            const relativeFiles = files.map(file => path.relative(basePath, file));
-        
-            // const files = await globPromise('./lib/redux-first-history/compute.js'); // Ensure paths are absolute
-            console.log('files---', files)
             let allFilteredRoutes = [];
 
-            for (const file of relativeFiles) {
-                const relativePath = file.startsWith('.') ? file : `./${file}`;
-                const baseRoutePath = path.dirname(relativePath.substring(1));
-                
+            for (const file of files) {
                 try {
                     // Dynamically import the JS file assuming it exports filteredRoutes
-                    const module = await import(relativePath); // file is already absolute
+                    const module = await import(file); // file is already absolute
                     if (module.filteredRoutes) {
                         const newRoutes = module.filteredRoutes.map((filteredRoute) => {
                             let routConfig = Object.values(filteredRoute)[0];
-                            if (routConfig.file) {
-                                let filePath = routConfig.file.startsWith('./') ?
-                                    baseRoutePath + '/' + routConfig.file.substring(2) : baseRoutePath + '/' + routConfig.file;
-                                filePath = filePath.endsWith('.js') ? filePath : filePath + '.js';
-                                routConfig = {
-                                    ...routConfig,
-                                    file: filePath,
-                                    module: pkg.name,
-                                }
-                            }
-                            return { [routConfig.key]: routConfig };
+                            return { [routConfig.path]: routConfig };
                         });
                         allFilteredRoutes.push(...newRoutes);
                     }
diff --git a/packages-modules/counter/browser/modifyLibFilesPlugin.mjs b/packages-modules/counter/browser/modifyLibFilesPlugin.mjs
new file mode 100644
index 000000000..c06a6e7ee
--- /dev/null
+++ b/packages-modules/counter/browser/modifyLibFilesPlugin.mjs
@@ -0,0 +1,110 @@
+import fs from 'fs';
+import path from 'path';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+import { promisify } from 'util';
+import glob from 'glob';
+import { createFilter } from '@rollup/pluginutils';
+const globPromise = promisify(glob.glob); // Make sure to call .glob here
+
+function findPackageJson(directory) {
+    let currentDir = directory;
+    while (currentDir !== path.parse(currentDir).root) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            return packageJsonPath;
+        }
+        console.log();
+        currentDir = path.dirname(currentDir);
+    }
+    throw new Error(`No package.json found in path ${directory}`);
+}
+
+export default function modifyLibFilesPlugin(options = {}) {
+    // Create a filter to only include the desired files
+    const filter = createFilter(options.include, options.exclude);
+    const dist = options.outputDir || './lib'; // Default output directory
+    const pattern = '**/**/compute.js'; // Pattern to match files
+    return {
+        name: 'modify-lib-files',
+
+        async writeBundle() {
+            // Assuming you want to modify specific files, list them here
+            const filesToModify = await globPromise(path.join(dist, pattern), { absolute: true }); // Ensure paths are absolute
+            filesToModify.forEach((filePath) => {
+                if (!filter(filePath)) return; // Skip files that do not match the filter
+
+                // Read the file content
+                const code = fs.readFileSync(filePath, 'utf8');
+                // Parse the code to an AST
+                const ast = parse(code, {
+                    sourceType: 'module',
+                    plugins: ['js', 'dynamicImport'], // Adjust plugins as necessary
+                });
+
+                // Traverse and modify the AST as needed
+                let modified = false;
+                traverse.default(ast, {
+                    enter(astroPath) {
+                        // Adjust this part to target the specific objects and properties in your AST
+                        if (astroPath.isObjectProperty() && astroPath.node.key.name === 'component') {
+                            const componentValue = astroPath.node.value;
+
+                            if (
+                                componentValue.type === 'ArrowFunctionExpression' &&
+                                componentValue.body.type === 'CallExpression' &&
+                                componentValue.body.callee.type === 'Import'
+                            ) {
+                                const importArg = componentValue.body.arguments[0];
+
+                                // Ensure we're dealing with a string literal import path
+                                if (importArg.type === 'StringLiteral') {
+                                    let importPath = importArg.value;
+
+                                    const fullPath = path.resolve(path.dirname(filePath), importPath);
+
+                                    const packageJsonPath = findPackageJson(
+                                        path.dirname(path.resolve(dist, importPath)),
+                                    );
+                                    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+                                    const relativePath = path.relative(path.dirname(packageJsonPath), fullPath);
+                                    importPath = relativePath.replace(/\\/g, '/'); // Normalize path for Windows
+
+                                    const newImportPath = `${packageJson.name}/${importPath}`;
+
+                                    // Create a new `file` property
+                                    const fileProperty = t.objectProperty(
+                                        t.identifier('file'),
+                                        t.stringLiteral(newImportPath),
+                                    );
+
+                                    // Get the parent object expression to add the new property
+                                    const parentObject = astroPath.findParent((p) => p.isObjectExpression());
+                                    if (parentObject) {
+                                        parentObject.node.properties.push(fileProperty);
+                                        modified = true; // Mark as modified
+                                    }
+                                }
+                            }
+                        }
+                    },
+                });
+                // If AST was modified, regenerate code
+                if (modified) {
+                    const output = generate.default(
+                        ast,
+                        {
+                            /* options */
+                        },
+                        code,
+                    );
+                    fs.writeFileSync(filePath, output.code); // This line actually writes the changes
+                }
+                // This plugin doesn't modify the code, so return null
+                return null;
+            });
+        },
+    };
+}
diff --git a/packages-modules/counter/browser/rollup.config.mjs b/packages-modules/counter/browser/rollup.config.mjs
index 494a54296..236d6daf3 100644
--- a/packages-modules/counter/browser/rollup.config.mjs
+++ b/packages-modules/counter/browser/rollup.config.mjs
@@ -5,6 +5,7 @@ import { string } from 'rollup-plugin-string';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 import generateJsonFromObject from './generate-json-from-object-plugin.mjs';
+import modifyLibFilesPlugin from './modifyLibFilesPlugin.mjs';
 
 const bundle = (config) => ({
     ...config,
@@ -31,10 +32,12 @@ export default [
                 include: '**/*.graphql',
             }),
             typescript({ noEmitOnError: true }),
+            modifyLibFilesPlugin({
+                include: ['**/**/compute.js'], // Adjust to target specific files or patterns
+                outputDir: 'lib', // Ensure this matches your actual output directory
+            }),
             generateJsonFromObject({
-                // include: ['src/**/*.tsx'], // Adjust this pattern to match your files
-                // You can also exclude files if necessary
-              }),
+            }),
         ],
         output: [
             {

From e64087e0790a163f323076baa383f4b2ef5e3c44 Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Fri, 29 Mar 2024 11:26:01 -0400
Subject: [PATCH 15/17] update compute.tsx

---
 .../counter/browser/src/apollo-server-n-client/compute.tsx     | 2 --
 packages-modules/counter/browser/src/common/compute.tsx        | 1 -
 packages-modules/counter/browser/src/emotion/compute.tsx       | 1 -
 .../counter/browser/src/redux-first-history/compute.tsx        | 3 ---
 4 files changed, 7 deletions(-)

diff --git a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
index 16fce7aa4..993860f3f 100755
--- a/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
+++ b/packages-modules/counter/browser/src/apollo-server-n-client/compute.tsx
@@ -12,7 +12,6 @@ export const counterPageStore: any[] = [
     position: IMenuPosition.MIDDLE,
     name: 'Apollo Server',
     path: '/apollo-server-n-client',
-    file: '../common/components/Dashboard',
   },
   {
     key: 'counter',
@@ -21,7 +20,6 @@ export const counterPageStore: any[] = [
     component: () => import('./containers/Counter'),
     position: IMenuPosition.MIDDLE,
     path: '/apollo-server-n-client/counter',
-    file: './containers/Counter',
   },
 ];
 
diff --git a/packages-modules/counter/browser/src/common/compute.tsx b/packages-modules/counter/browser/src/common/compute.tsx
index 69672f032..9182a3c0d 100755
--- a/packages-modules/counter/browser/src/common/compute.tsx
+++ b/packages-modules/counter/browser/src/common/compute.tsx
@@ -11,7 +11,6 @@ export const commonPageStore: any[] = [
         component: () => import('../common/components/Home'),
         wrapper: () => import('../common/components/Wrapper'),
         position: IMenuPosition.MIDDLE,
-        file: '../common/components/Home',
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/emotion/compute.tsx b/packages-modules/counter/browser/src/emotion/compute.tsx
index 7e6a68e54..ac6acba45 100755
--- a/packages-modules/counter/browser/src/emotion/compute.tsx
+++ b/packages-modules/counter/browser/src/emotion/compute.tsx
@@ -11,7 +11,6 @@ export const emotionPageStore: any[] = [
         name: 'Emotion Styling',
         component: () => import('./components/CompledWithTheme'),
         path: '/emotion',
-        file: './components/CompledWithTheme'
     },
 ];
 
diff --git a/packages-modules/counter/browser/src/redux-first-history/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
index 6662ee4b5..7a217ee08 100755
--- a/packages-modules/counter/browser/src/redux-first-history/compute.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
@@ -14,7 +14,6 @@ export const counterPageStore = [
         name: 'Redux First History',
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
-        file: '../common/components/Dashboard',
     },
     {
         exact: true,
@@ -24,7 +23,6 @@ export const counterPageStore = [
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO,
-        file: './components/Hello',
     },
     {
         exact: true,
@@ -34,7 +32,6 @@ export const counterPageStore = [
         position: IMenuPosition.MIDDLE,
         key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
         path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.COUNTER,
-        file: './components/Counter',
     },
 ];
 

From 9616db519cec1aaa15f9e2ab50f71609f8eb1b6e Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Fri, 29 Mar 2024 12:03:56 -0400
Subject: [PATCH 16/17] update changes

---
 package.json                                  |   4 +
 .../browser/extract-dynamic-import.mjs        | 110 ++++++++++++++++++
 .../counter/browser/processComputeFile.js     |  60 ++++++++++
 .../src/redux-first-history/compute.tsx       |  18 +--
 .../src/redux-first-history/module.tsx        |   6 +-
 .../frontend-server/tools/generateRoutes.tsx  |  40 +++----
 servers/frontend-server/vite.config.ts        |  10 +-
 yarn.lock                                     |   6 +-
 8 files changed, 207 insertions(+), 47 deletions(-)
 create mode 100644 packages-modules/counter/browser/extract-dynamic-import.mjs
 create mode 100644 packages-modules/counter/browser/processComputeFile.js

diff --git a/package.json b/package.json
index e85a67f20..8fff2e3ee 100755
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
     "devDependencies": {
         "@babel/cli": "^7.19.3",
         "@babel/core": "^7.20.2",
+        "@babel/parser": "^7.20.1",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-decorators": "^7.20.2",
         "@babel/plugin-proposal-export-default-from": "^7.18.10",
@@ -137,6 +138,7 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
         "@babel/plugin-proposal-optional-chaining": "^7.18.9",
         "@babel/plugin-proposal-pipeline-operator": "^7.18.9",
+        "@babel/generator": "^7.20.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-default-from": "^7.18.6",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
@@ -147,6 +149,7 @@
         "@babel/plugin-transform-modules-commonjs": "^7.19.6",
         "@babel/plugin-transform-regenerator": "^7.18.6",
         "@babel/plugin-transform-runtime": "^7.19.6",
+        "@babel/types": "^7.20.0",
         "@babel/polyfill": "^7.12.1",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-flow": "^7.18.6",
@@ -154,6 +157,7 @@
         "@babel/preset-typescript": "^7.18.6",
         "@babel/register": "^7.18.9",
         "@babel/runtime": "^7.20.1",
+        "@babel/traverse": "^7.20.1",
         "@common-stack/env-list-loader": "0.5.8",
         "@emotion/babel-plugin": "^11.11.0",
         "@graphql-codegen/add": "^5.0.2",
diff --git a/packages-modules/counter/browser/extract-dynamic-import.mjs b/packages-modules/counter/browser/extract-dynamic-import.mjs
new file mode 100644
index 000000000..8335e0d3d
--- /dev/null
+++ b/packages-modules/counter/browser/extract-dynamic-import.mjs
@@ -0,0 +1,110 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { createFilter } from '@rollup/pluginutils';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+
+function findPackageJson(directory) {
+    let currentDir = directory;
+    while (currentDir !== path.parse(currentDir).root) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            return packageJsonPath;
+        }
+        console.log()
+        currentDir = path.dirname(currentDir);
+    }
+    throw new Error(`No package.json found in path ${directory}`);
+}
+
+export default function extractImportsPlugin(options = {}) {
+    // Create a filter to only include the desired files
+    const filter = createFilter(options.include, options.exclude);
+    const outputDir = options.outputDir || './lib'; // Default output directory
+
+    return {
+        name: 'extract-imports',
+
+        transform(code, id) {
+            // Skip files that do not match the filter
+            if (!filter(id)) return null;
+            console.log('---ID', id);
+
+            let modified = false; // Flag to check if AST was modified
+
+            console.log('--ID--', id);
+            console.log('--COde', code);
+
+            // Parse the code to an AST
+            const ast = parse(code, {
+                sourceType: 'module',
+                plugins: ['tsx', 'dynamicImport'], // Ensure dynamicImport plugin is enabled
+            });
+
+            // Traverse the AST to find dynamic imports
+            traverse.default(ast, {
+                enter(astroPath) {
+                    // Adjust this part to target the specific objects and properties in your AST
+                    if (astroPath.isObjectProperty() && astroPath.node.key.name === 'component') {
+                        const componentValue = astroPath.node.value;
+
+                        if (
+                            componentValue.type === 'ArrowFunctionExpression' &&
+                            componentValue.body.type === 'CallExpression' &&
+                            componentValue.body.callee.type === 'Import'
+                        ) {
+                            const importArg = componentValue.body.arguments[0];
+
+                            // Ensure we're dealing with a string literal import path
+                            if (importArg.type === 'StringLiteral') {
+                                let importPath = importArg.value;
+
+                                const fullPath = path.resolve(path.dirname(id), importPath);
+
+                                const packageJsonPath = findPackageJson(path.dirname(path.resolve(outputDir, importPath)));
+                                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+                                const relativePath = path.relative(path.dirname(packageJsonPath), fullPath);
+                                const relativePathToOutputDir = path.relative(outputDir, path.resolve(path.dirname(id), importPath));
+                                importPath = `${relativePathToOutputDir}.js`.replace(/\\/g, '/'); // Normalize path for Windows
+
+                                const newImportPath = `${packageJson.name}/${importPath}`;
+                
+                                // Create a new `file` property
+                                const fileProperty = t.objectProperty(
+                                    t.identifier('file'),
+                                    t.stringLiteral(newImportPath),
+                                );
+
+                                // Get the parent object expression to add the new property
+                                const parentObject = astroPath.findParent((p) => p.isObjectExpression());
+                                if (parentObject) {
+                                    parentObject.node.properties.push(fileProperty);
+                                    modified = true; // Mark as modified
+                                }
+                            }
+                        }
+                    }
+                },
+            });
+
+            // If AST was modified, regenerate code
+            if (modified) {
+                const output = generate.default(
+                    ast,
+                    {
+                        /* options */
+                    },
+                    code,
+                );
+                return {
+                    code: output.code,
+                    map: output.map, // Ensure source maps are handled correctly
+                };
+            }
+            // This plugin doesn't modify the code, so return null
+            return null;
+        },
+    };
+}
diff --git a/packages-modules/counter/browser/processComputeFile.js b/packages-modules/counter/browser/processComputeFile.js
new file mode 100644
index 000000000..f1aeda132
--- /dev/null
+++ b/packages-modules/counter/browser/processComputeFile.js
@@ -0,0 +1,60 @@
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { parse } from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+import path from 'path';
+import { dirname, join, resolve } from 'path';
+
+// Utility to find the nearest package.json
+function findNearestPackageJson(directory) {
+  let currentDirectory = directory;
+  while (!existsSync(join(currentDirectory, 'package.json'))) {
+    const parentDirectory = dirname(currentDirectory);
+    if (parentDirectory === currentDirectory) {
+      throw new Error('No package.json found');
+    }
+    currentDirectory = parentDirectory;
+  }
+  return join(currentDirectory, 'package.json');
+}
+
+
+export default function processComputeFile(opts) {
+    const { basePath = process.cwd() } = opts; // Base path to resolve imports
+
+    return {
+        name: 'process-compute-file',
+        generateBundle(opts) {
+            const computeFilePath = path.join(opts.dir, 'compute.js');
+            const code = readFileSync(computeFilePath, 'utf8');
+            const ast = parse(code, {
+                sourceType: 'module',
+                plugins: ['jsx'],
+            });
+
+            traverse(ast, {
+                enter(path) {
+                    if (path.isVariableDeclarator() && path.node.id.name === 'counterPageStore') {
+                        path.node.init.elements.forEach((element) => {
+                            const componentProp = element.properties.find((prop) => prop.key.name === 'component');
+                            if (componentProp && componentProp.value.body.type === 'CallExpression') {
+                                const importPath = componentProp.value.body.arguments[0].value;
+                                const moduleProp = t.objectProperty(
+                                    t.identifier('module'),
+                                    t.stringLiteral('<package_name>'),
+                                );
+                                const fileProp = t.objectProperty(t.identifier('file'), t.stringLiteral(importPath));
+                                element.properties.push(moduleProp, fileProp);
+                            }
+                        });
+                    }
+                },
+            });
+
+            const output = generate(ast, {}, code);
+            writeFileSync(computeFilePath, output.code);
+            console.log(`Updated ${computeFilePath}`);
+        },
+    };
+}
diff --git a/packages-modules/counter/browser/src/redux-first-history/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
index 7a217ee08..81c59e29e 100755
--- a/packages-modules/counter/browser/src/redux-first-history/compute.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/compute.tsx
@@ -6,15 +6,15 @@ import { CONNECTED_REACT_ROUTER_ROUTES_TYPES } from './constants';
 
 
 export const counterPageStore = [
-    {
-        exact: false,
-        icon: 'export',
-        component: () => import('../common/components/Dashboard'),
-        position: IMenuPosition.MIDDLE,
-        name: 'Redux First History',
-        key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
-        path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
-    },
+    // {
+    //     exact: false,
+    //     icon: 'export',
+    //     component: () => import('../common/components/Dashboard'),
+    //     position: IMenuPosition.MIDDLE,
+    //     name: 'Redux First History',
+    //     key: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
+    //     path: CONNECTED_REACT_ROUTER_ROUTES_TYPES.HOME,
+    // },
     {
         exact: true,
         icon: 'export',
diff --git a/packages-modules/counter/browser/src/redux-first-history/module.tsx b/packages-modules/counter/browser/src/redux-first-history/module.tsx
index c99ca6b3c..d51765bc4 100755
--- a/packages-modules/counter/browser/src/redux-first-history/module.tsx
+++ b/packages-modules/counter/browser/src/redux-first-history/module.tsx
@@ -4,11 +4,11 @@ import { Feature } from '@common-stack/client-react';
 import Counter from './components/Counter';
 import NavBar from './components/NavBar';
 import connectedReactRouterCounter from './redux';
-// import { filteredRoutes, filteredMenus } from './compute';
+import { filteredRoutes, filteredMenus } from './compute';
 
 export default new Feature({
     navItem: <Counter />, // used in electron
-    // menuConfig: filteredMenus,
-    // routeConfig: filteredRoutes,
+    menuConfig: filteredMenus,
+    routeConfig: filteredRoutes,
     reducer: { connectedReactRouterCounter },
 });
diff --git a/servers/frontend-server/tools/generateRoutes.tsx b/servers/frontend-server/tools/generateRoutes.tsx
index 3d832bd29..518ece2fc 100644
--- a/servers/frontend-server/tools/generateRoutes.tsx
+++ b/servers/frontend-server/tools/generateRoutes.tsx
@@ -1,49 +1,35 @@
-import pkg from '../package.json' assert { type: "json" };
 import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react';
 import { DefineRouteFunction } from '@remix-run/dev/dist/config/routes';
 import counterModules from '@sample-stack/counter-module-browser';
-import counterRoutes from '@sample-stack/counter-module-browser/lib/routes.json' assert { type: "json" };
+// import counterRoutes from '@sample-stack/counter-module-browser/lib/routes.json' assert { type: "json" };
 import { wrapRouteComponent } from './wrapRoutes';
 
 const features = new Feature(FeatureWithRouterFactory, counterModules);
 const configuredRoutes = features.getConfiguredRoutes2();
-const allRoutes = [...counterRoutes];
-const dependencies: any = pkg.dependencies;
+// const allRoutes = [...counterRoutes];
+// const dependencies: any = pkg.dependencies;
 
-const findRoute = (key: string) => {
-  const found = allRoutes.find((r) => key === Object.keys(r)[0]);
-  return found ? Object.values(found)[0] : null;
-}
+// const findRoute = (key: string) => {
+//   const found = allRoutes.find((r) => key === Object.keys(r)[0]);
+//   return found ? Object.values(found)[0] : null;
+// }
 
-const genFilePath = (file: string, module: string) => {
-  // if (process.env.NODE_ENV === 'development') {
-  //   let link = dependencies[module];
-  //   let filePath = file;
-    
-  //   if (link && link.startsWith('link:')) {
-  //     link = link.replace('link:', '');
-  //     filePath = filePath.replace(module, link);
-  //     filePath = '../' + filePath; // escape from src/
-  //   } else {
-  //     filePath = '../node_modules/' + filePath; // escape from src/, enter node_modules/
-  //   }
-  //   return filePath;
-  // }
+const genFilePath = (file: string) => {
   return `../../../node_modules/${file}`; // servers/frontend-server/src
 };
 
 const createRecursiveRoutes = (routes: [], route: DefineRouteFunction) => {
   routes.forEach((filteredRoute: any) => {
-    const routeConfig = findRoute(filteredRoute['key']);
+    console.log('--- FILDTER ---', filteredRoute);
+    const routeConfig = filteredRoute;
     
     if (routeConfig) {
-      const { path, file, module, ...routeParams }: any = routeConfig;
-      
-      let filePath = `${module}${file}`;
+      const { path, file, ...routeParams } = routeConfig;
+      let filePath = file;
       if (routeParams.auth === true) {
         filePath = wrapRouteComponent(filePath);
       }
-      filePath = genFilePath(filePath, module);
+      filePath = genFilePath(filePath);
 
       route(path, filePath, routeParams, () => {
         if (Array.isArray(filteredRoute.routes) && filteredRoute.routes.length > 0) {
diff --git a/servers/frontend-server/vite.config.ts b/servers/frontend-server/vite.config.ts
index 34978b067..abe969c30 100644
--- a/servers/frontend-server/vite.config.ts
+++ b/servers/frontend-server/vite.config.ts
@@ -1,13 +1,13 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
-import { generateRemixRoutes } from "./tools/generateRoutes";
+import { generateRemixRoutes } from './tools/generateRoutes';
 
 export default defineConfig({
   plugins: [
     remix({
-      appDirectory: "src",
+      appDirectory: 'src',
       routes: async (defineRoutes) => 
         defineRoutes((route) => {
           generateRemixRoutes(route);
diff --git a/yarn.lock b/yarn.lock
index 6a867e3e1..e547cf27d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -912,7 +912,7 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.18.13", "@babel/generator@^7.21.5", "@babel/generator@^7.24.1":
+"@babel/generator@^7.18.13", "@babel/generator@^7.20.1", "@babel/generator@^7.21.5", "@babel/generator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.1.tgz#e67e06f68568a4ebf194d1c6014235344f0476d0"
   integrity sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==
@@ -1213,7 +1213,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
   integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
-"@babel/parser@^7.16.8", "@babel/parser@^7.21.8", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1":
+"@babel/parser@^7.16.8", "@babel/parser@^7.20.1", "@babel/parser@^7.21.8", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
   integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
@@ -2257,7 +2257,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.16.8", "@babel/traverse@^7.24.1":
+"@babel/traverse@^7.16.8", "@babel/traverse@^7.20.1", "@babel/traverse@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
   integrity sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==

From 18edea71397649f6ae471b47545c00ebf47f3fbb Mon Sep 17 00:00:00 2001
From: veera <marni.srikanth@gmail.com>
Date: Fri, 29 Mar 2024 16:13:40 -0400
Subject: [PATCH 17/17] update

---
 packages-modules/counter/browser/rollup.config.mjs | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages-modules/counter/browser/rollup.config.mjs b/packages-modules/counter/browser/rollup.config.mjs
index 236d6daf3..85901a66d 100644
--- a/packages-modules/counter/browser/rollup.config.mjs
+++ b/packages-modules/counter/browser/rollup.config.mjs
@@ -9,13 +9,7 @@ import modifyLibFilesPlugin from './modifyLibFilesPlugin.mjs';
 
 const bundle = (config) => ({
     ...config,
-    input: [
-        './src/index.ts',
-        './src/redux-first-history/compute.tsx',
-        './src/apollo-server-n-client/compute.tsx',
-        './src/common/compute.tsx',
-        './src/redux-first-history/compute.tsx',
-    ],
+    input: ['./src/index.ts'],
     // marking all node modules as external
     external: (id) => !/^[./]/.test(id),
 });