update templates

AlexSergey · Oct 24, 2024 · c34503f · c34503f
1 parent b825093
commit c34503f
Show file tree

Hide file tree

Showing 40 changed files with 292 additions and 325 deletions.
diff --git a/packages/starter/lib/packageJSONPreparing.js b/packages/starter/lib/packageJSONPreparing.js
@@ -10,24 +10,19 @@ export const packageJSONPreparing = async (packageJSON, { appType, tester, nogit
         dependencies: [
           { name: 'react', version: '18' },
           { name: 'redux-thunk', version: '3' },
-          { name: 'history', version: '5' },
           { name: 'react-dom', version: '18' },
           { name: 'react-redux', version: '9' },
           { name: 'react-router', version: '6' },
           { name: 'react-router-dom', version: '6' },
-          { name: 'history', version: '5' },
           { name: 'react-helmet', version: '6' },
           { name: 'redux', version: '5' },
           { name: '@reduxjs/toolkit', version: '2' },
-          { name: '@loadable/component', version: '5' },
         ],
         devDependencies: [
           { name: '@rockpack/compiler', version: packageJson.version },
           { name: '@types/react', version: '18' },
           { name: '@types/react-dom', version: '18' },
           { name: '@types/react-helmet', version: '6' },
-          { name: '@types/loadable__component', version: '5' },
-          { name: '@types/webpack-env', version: '1' },
         ],
       });
       break;
@@ -38,20 +33,18 @@ export const packageJSONPreparing = async (packageJSON, { appType, tester, nogit
           { name: 'koa', version: '2' },
           { name: 'koa-compress', version: '5' },
           { name: 'redux-thunk', version: '3' },
-          { name: 'history', version: '5' },
           { name: 'koa-static', version: '5' },
           { name: 'react', version: '18' },
           { name: 'react-dom', version: '18' },
           { name: 'react-redux', version: '9' },
           { name: 'react-router', version: '6' },
           { name: 'react-router-dom', version: '6' },
+          { name: 'entities', version: '3' },
           { name: 'redux', version: '5' },
           { name: 'react-helmet-async', version: '1' },
           { name: '@issr/core', version: '2.2.0' },
-          { name: 'node-fetch', version: '3' },
           { name: '@reduxjs/toolkit', version: '2' },
           { name: 'serialize-javascript', version: '5' },
-          { name: 'entities', version: '2' },
           { name: 'pretty-error', version: '4' },
           { name: '@koa/router', version: '12' },
           { name: '@loadable/component', version: '5' },
@@ -69,7 +62,6 @@ export const packageJSONPreparing = async (packageJSON, { appType, tester, nogit
           { name: '@types/koa-static', version: '4' },
           { name: '@types/loadable__server', version: '5' },
           { name: '@types/node', version: '20' },
-          { name: '@types/webpack-env', version: '1' },
           { name: '@types/serialize-javascript', version: '5' },
         ],
       });
@@ -85,7 +77,6 @@ export const packageJSONPreparing = async (packageJSON, { appType, tester, nogit
           { name: '@rockpack/compiler', version: packageJson.version },
           { name: '@types/react', version: '18' },
           { name: '@types/react-dom', version: '18' },
-          { name: '@types/webpack-env', version: '1' },
         ],
       });
       break;

diff --git a/packages/starter/templates/addons/tester/csr/src/tests/create-app-wrapper.tsx b/packages/starter/templates/addons/tester/csr/src/tests/create-app-wrapper.tsx
@@ -1,8 +1,8 @@
-import { createMemoryHistory } from 'history';
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
+import { createMemoryRouter } from 'react-router';
+import { RouterProvider } from 'react-router-dom';
 
-import { Router } from '../components/router';
 import { createStore } from '../store';
 import { createMockServices } from './mock-services';
 
@@ -12,21 +12,25 @@ export const createAppWrapper = ({
 }: {
   initialState?: Record<string, unknown>;
   url?: string;
-} = {}): (({ children }: { children: ReactNode }) => JSX.Element) => {
-  const history = createMemoryHistory({
-    initialEntries: [url],
-  });
-
+} = {}): (({ children }: { children: ReactNode }) => ReactNode) => {
   const store = createStore({
-    history,
     initialState,
     services: createMockServices(),
   });
 
   // eslint-disable-next-line react/display-name
-  return ({ children }): JSX.Element => (
-    <Provider store={store}>
-      <Router history={history}>{children}</Router>
-    </Provider>
-  );
+  return ({ children }): ReactNode => {
+    const router = createMemoryRouter([
+      {
+        element: children,
+        path: url,
+      },
+    ]);
+
+    return (
+      <Provider store={store}>
+        <RouterProvider router={router} />
+      </Provider>
+    );
+  };
 };
diff --git a/packages/starter/templates/addons/tester/ssr/src/tests/create-app-wrapper.tsx b/packages/starter/templates/addons/tester/ssr/src/tests/create-app-wrapper.tsx
@@ -1,9 +1,9 @@
 import { createSsr } from '@issr/core';
-import { createMemoryHistory } from 'history';
 import { ReactNode } from 'react';
 import { Provider } from 'react-redux';
+import { createMemoryRouter } from 'react-router';
+import { RouterProvider } from 'react-router-dom';
 
-import { Router } from '../components/router';
 import { createStore } from '../store';
 import { createMockServices } from './mock-services';
 
@@ -13,11 +13,7 @@ export const createAppWrapper = ({
 }: {
   initialState?: Record<string, unknown>;
   url?: string;
-} = {}): (({ children }: { children: ReactNode }) => JSX.Element) => {
-  const history = createMemoryHistory({
-    initialEntries: [url],
-  });
-
+} = {}): (({ children }: { children: ReactNode }) => ReactNode) => {
   const SSR = createSsr(
     {},
     {
@@ -26,17 +22,25 @@ export const createAppWrapper = ({
   );
 
   const store = createStore({
-    history,
     initialState,
     services: createMockServices(),
   });
 
   // eslint-disable-next-line react/display-name
-  return ({ children }): JSX.Element => (
-    <SSR>
-      <Provider store={store}>
-        <Router history={history}>{children}</Router>
-      </Provider>
-    </SSR>
-  );
+  return ({ children }): ReactNode => {
+    const router = createMemoryRouter([
+      {
+        element: children,
+        path: url,
+      },
+    ]);
+
+    return (
+      <SSR>
+        <Provider store={store}>
+          <RouterProvider router={router} />
+        </Provider>
+      </SSR>
+    );
+  };
 };
diff --git a/packages/starter/templates/backbone/csr/src/app.tsx b/packages/starter/templates/backbone/csr/src/app.tsx
diff --git a/packages/starter/templates/backbone/csr/src/components/image/styles.module.scss.d.ts b/packages/starter/templates/backbone/csr/src/components/image/styles.module.scss.d.ts
@@ -1,12 +1,12 @@
-declare namespace StyleModulesScssNamespace {
-  export interface IStyleModulesScss {
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
     img: string;
   }
 }
 
-declare const StyleModulesScssModule: StyleModulesScssNamespace.IStyleModulesScss & {
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModulesScssNamespace.IStyleModulesScss;
+  locals: StylesModuleScssNamespace.IStylesModuleScss;
 };
 
-export = StyleModulesScssModule;
+export = StylesModuleScssModule;
diff --git a/packages/starter/templates/backbone/csr/src/components/router/index.tsx b/packages/starter/templates/backbone/csr/src/components/router/index.tsx
diff --git a/...r/templates/backbone/csr/src/features/image/components/image-area/styles.module.scss.d.ts b/...r/templates/backbone/csr/src/features/image/components/image-area/styles.module.scss.d.ts
@@ -1,12 +1,12 @@
-declare namespace StyleModulesScssNamespace {
-  export interface IStyleModulesScss {
-    'image-holder': string;
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    "image-holder": string;
   }
 }
 
-declare const StyleModulesScssModule: StyleModulesScssNamespace.IStyleModulesScss & {
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModulesScssNamespace.IStyleModulesScss;
+  locals: StylesModuleScssNamespace.IStylesModuleScss;
 };
 
-export = StyleModulesScssModule;
+export = StylesModuleScssModule;
diff --git a/packages/starter/templates/backbone/csr/src/index.tsx b/packages/starter/templates/backbone/csr/src/index.tsx
@@ -1,17 +1,15 @@
-import { createBrowserHistory } from 'history';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import { App } from './app';
-import { Router } from './components/router';
+import { routes } from './routes';
 import { createServices } from './services';
 import { createStore } from './store';
 import './types/global.declaration';
 
-const history = createBrowserHistory();
+const router = createBrowserRouter(routes);
 
 const store = createStore({
-  history,
   services: createServices(fetch),
 });
 
@@ -21,9 +19,7 @@ const root = createRoot(container as HTMLElement);
 
 root.render(
   <Provider store={store}>
-    <Router history={history}>
-      <App />
-    </Router>
+    <RouterProvider router={router} />
   </Provider>,
 );
 

diff --git a/...bone/csr/src/pages/home/home.loadable.tsx → ...backbone/csr/src/pages/home/home.lazy.tsx b/...bone/csr/src/pages/home/home.loadable.tsx → ...backbone/csr/src/pages/home/home.lazy.tsx
diff --git a/...ne/csr/src/pages/image/image.loadable.tsx → ...ckbone/csr/src/pages/image/image.lazy.tsx b/...ne/csr/src/pages/image/image.loadable.tsx → ...ckbone/csr/src/pages/image/image.lazy.tsx
diff --git a/.../templates/backbone/csr/src/pages/main-page/components/navigation/styles.module.scss.d.ts b/.../templates/backbone/csr/src/pages/main-page/components/navigation/styles.module.scss.d.ts
@@ -1,12 +1,12 @@
-declare namespace StyleModulesScssNamespace {
-  export interface IStyleModulesScss {
-    'nav-holder': string;
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
+    "nav-holder": string;
   }
 }
 
-declare const StyleModulesScssModule: StyleModulesScssNamespace.IStyleModulesScss & {
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModulesScssNamespace.IStyleModulesScss;
+  locals: StylesModuleScssNamespace.IStylesModuleScss;
 };
 
-export = StyleModulesScssModule;
+export = StylesModuleScssModule;
diff --git a/packages/starter/templates/backbone/csr/src/pages/main-page/index.tsx b/packages/starter/templates/backbone/csr/src/pages/main-page/index.tsx
@@ -1,11 +1,14 @@
 import { ReactElement } from 'react';
+import { Outlet } from 'react-router';
 
 import { Navigation } from './components/navigation';
 import styles from './styles.module.scss';
 
-export const MainPage = ({ children }: { children: ReactElement }): ReactElement => (
+export const MainPage = (): ReactElement => (
   <div>
     <Navigation />
-    <div className={styles.wrapper}>{children}</div>
+    <div className={styles.wrapper}>
+      <Outlet />
+    </div>
   </div>
 );
diff --git a/packages/starter/templates/backbone/csr/src/pages/main-page/styles.module.scss.d.ts b/packages/starter/templates/backbone/csr/src/pages/main-page/styles.module.scss.d.ts
@@ -1,12 +1,12 @@
-declare namespace StyleModulesScssNamespace {
-  export interface IStyleModulesScss {
+declare namespace StylesModuleScssNamespace {
+  export interface IStylesModuleScss {
     wrapper: string;
   }
 }
 
-declare const StyleModulesScssModule: StyleModulesScssNamespace.IStyleModulesScss & {
+declare const StylesModuleScssModule: StylesModuleScssNamespace.IStylesModuleScss & {
   /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
-  locals: StyleModulesScssNamespace.IStyleModulesScss;
+  locals: StylesModuleScssNamespace.IStylesModuleScss;
 };
 
-export = StyleModulesScssModule;
+export = StylesModuleScssModule;
diff --git a/packages/starter/templates/backbone/csr/src/routes.tsx b/packages/starter/templates/backbone/csr/src/routes.tsx
@@ -0,0 +1,37 @@
+import { lazy, Suspense } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import './assets/styles/global.scss';
+import { MainPage } from './pages/main-page';
+
+const Home = lazy(() => import('./pages/home/home.lazy'));
+const Image = lazy(() => import('./pages/image/image.lazy'));
+
+export const routes = [
+  {
+    children: [
+      {
+        element: (
+          <Suspense fallback={<div>Loading</div>}>
+            <Home />
+          </Suspense>
+        ),
+        path: '/',
+      },
+      {
+        element: (
+          <Suspense fallback={<div>Loading</div>}>
+            <Image />
+          </Suspense>
+        ),
+        path: '/image',
+      },
+      {
+        element: <Navigate to="/" />,
+        path: '*',
+      },
+    ],
+    element: <MainPage />,
+    path: '/',
+  },
+];
diff --git a/packages/starter/templates/backbone/csr/src/store.ts b/packages/starter/templates/backbone/csr/src/store.ts
@@ -8,7 +8,7 @@ const rootReducer = combineReducers({
   image: imageReducer,
 });
 
-export const createStore = ({ history, initialState, services }: IStoreProps): Store<IRootState> =>
+export const createStore = ({ initialState, services }: IStoreProps): Store<IRootState> =>
   configureStore({
     devTools: isDevelopment(),
     middleware: (getDefaultMiddleware) =>
@@ -17,7 +17,6 @@ export const createStore = ({ history, initialState, services }: IStoreProps): S
         serializableCheck: false,
         thunk: {
           extraArgument: {
-            history,
             services,
           },
         },