Add i18n-named routes package

It is a small wrapper around tg-named-routes which allows one to have language specific routes. Also: - Updated rollup and plugins to resolve issue with React named imports - see rollup/plugins#423 (comment) - Updated react used in development - Updated react-router/react-router-dom
Jyrno42 · Mar 6, 2021 · 3651ebd · 3651ebd
1 parent 71fbcef
commit 3651ebd
Show file tree

Hide file tree

Showing 32 changed files with 1,474 additions and 328 deletions.
diff --git a/examples/example-app/package.json b/examples/example-app/package.json
@@ -29,15 +29,15 @@
     "razzle-plugin-long-term-caching": "1.0.0-beta.0",
     "razzle-plugin-modify-eslint-loader-config": "1.0.0-beta.1",
     "razzle-plugin-scss": "^3.3.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-helmet": "^5.2.0",
     "react-redux": "^7.1.0",
-    "react-router": "^5.1.0",
-    "react-router-config": "^5.1.0",
-    "react-router-dom": "^5.1.0",
+    "react-router": "^5.2.0",
+    "react-router-config": "^5.1.1",
+    "react-router-dom": "^5.2.0",
     "serialize-javascript": "^3.1.0",
-    "tg-named-routes": "1.0.0-beta.0",
+    "tg-named-routes": "1.0.0-beta.1",
     "tg-saga-manager": "1.0.0-beta.0"
   },
   "jest": {

diff --git a/examples/example-app/src/server.js b/examples/example-app/src/server.js
@@ -1,4 +1,7 @@
-import { createLocationAction, ServerViewManagerWorker } from '@thorgate/spa-view-manager';
+import {
+    createLocationAction,
+    ServerViewManagerWorker,
+} from '@thorgate/spa-view-manager';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router-dom';
@@ -11,72 +14,76 @@ import { RenderChildren } from 'tg-named-routes';
 import { configureStore } from './store';
 import routes from './views';
 
-
 const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
 
 const mainEntryPoints = ['runtime', 'vendors', 'client'];
 
-const sortedAssets = Object.entries(assets).sort(
-    (([firstKey], [secondKey]) => {
-        const [firstPart] = firstKey.split('.');
-        const [secondPart] = secondKey.split('.');
-        return mainEntryPoints.indexOf(firstPart) - mainEntryPoints.indexOf(secondPart);
-    })
-);
-
-const scripts = sortedAssets.filter(
-    ([key, asset]) => !!asset.js
-).reduce((scripts, [key, asset]) => (
-    `${scripts}<script src="${asset.js}" defer crossorigin></script>`
-), '');
-
-const styles = sortedAssets.filter(
-    ([key, asset]) => !!asset.css
-).reduce((styles, [key, asset]) => (
-    `${styles}<link rel="stylesheet" href="${asset.css}" crossorigin />`
-), '');
-
-
-const asyncWrapper = (fn) => (req, res, next) => (
-    Promise.resolve(fn(req, res, next)).catch(next)
-);
-
-
-const server = express();
-server
-    .disable('x-powered-by')
-    .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
-    .get('/*', asyncWrapper(async (req, res) => {
-        console.log(`GET: ${req.originalUrl}`);
-
-        const { store } = configureStore({}, {
+const sortedAssets = Object.entries(assets).sort(([firstKey], [secondKey]) => {
+    const [firstPart] = firstKey.split('.');
+    const [secondPart] = secondKey.split('.');
+    return (
+        mainEntryPoints.indexOf(firstPart) - mainEntryPoints.indexOf(secondPart)
+    );
+});
+
+const scripts = sortedAssets
+    .filter(([key, asset]) => !!asset.js)
+    .reduce(
+        (scripts, [key, asset]) =>
+            `${scripts}<script src="${asset.js}" defer crossorigin></script>`,
+        ''
+    );
+
+const styles = sortedAssets
+    .filter(([key, asset]) => !!asset.css)
+    .reduce(
+        (styles, [key, asset]) =>
+            `${styles}<link rel="stylesheet" href="${asset.css}" crossorigin />`,
+        ''
+    );
+
+const asyncWrapper = fn => (req, res, next) =>
+    Promise.resolve(fn(req, res, next)).catch(next);
+
+const routeHandler = asyncWrapper(async (req, res) => {
+    console.log(`GET: ${req.originalUrl}`);
+
+    const { store } = configureStore(
+        {},
+        {
             location: req.originalUrl,
-        });
-
-        const task = store.runSaga(ServerViewManagerWorker, routes, createLocationAction(store.getState().router), { allowLogger: true });
-
-        store.close();
-
-        await task.toPromise();
-
-        const context = {};
-        const markup = renderToString(
-            <Provider store={store}>
-                <StaticRouter context={context} location={req.url}>
-                    <RenderChildren routes={routes} />
-                </StaticRouter>
-            </Provider>,
-        );
-
-        if (context.url) {
-            console.log(`Redirecting to: ${context.url}`);
-            res.redirect(context.url);
-        } else {
-            const header = Helmet.renderStatic();
-            const state = serialize(store.getState());
-
-            res.status(context.statusCode || 200).send(
-                `<!doctype html>
+        }
+    );
+
+    const task = store.runSaga(
+        ServerViewManagerWorker,
+        routes,
+        createLocationAction(store.getState().router),
+        { allowLogger: true }
+    );
+
+    store.close();
+
+    await task.toPromise();
+
+    const context = {};
+    const markup = renderToString(
+        <Provider store={store}>
+            <StaticRouter context={context} location={req.url}>
+                <RenderChildren routes={routes} />
+            </StaticRouter>
+        </Provider>
+    );
+
+    if (context.url) {
+        console.log(`Redirecting to: ${context.url}`);
+        res.redirect(context.url);
+    } else {
+        const header = Helmet.renderStatic();
+        const state = serialize(store.getState());
+
+        res.status(context.statusCode || 200).send(
+            `<!doctype html>
 <html ${header.htmlAttributes.toString()}>
     <head>
         ${header.title.toString()}
@@ -93,9 +100,15 @@ server
         window.__initial_state__ = ${state};
     </script>
 </html>
-`,
-            );
-        }
-    }));
+`
+        );
+    }
+});
+
+const server = express();
+server
+    .disable('x-powered-by')
+    .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+    .get('*', routeHandler);
 
 export default server;
diff --git a/examples/example-app/src/views/index.js b/examples/example-app/src/views/index.js
@@ -1,6 +1,11 @@
-import { buildUrlCache } from 'tg-named-routes';
+import { buildUrlCache, getUrlMapCache } from 'tg-named-routes';
 
-import { simulateApiError, simulateLoading, simulateLogin, simulateLogout } from '../sagas/auth';
+import {
+    simulateApiError,
+    simulateLoading,
+    simulateLogin,
+    simulateLogout,
+} from '../sagas/auth';
 import simulateWatcher from '../sagas/simulateWatcher';
 
 import App from './App';
@@ -12,56 +17,64 @@ import Restricted from './Restricted';
 import RestrictedRedirect from './RestrictedRedirect';
 import SimulatedError from './SimulateError';
 
-
 const routes = [
     {
         component: App,
         watcher: simulateWatcher,
-        routes: [{
-            path: '/',
-            exact: true,
-            component: Home,
-            name: 'home',
-        }, {
-            path: '/long',
-            exact: true,
-            component: HomeLoading,
-            initial: simulateLoading,
-            name: 'home-long',
-        }, {
-            path: '/home',
-            exact: true,
-            component: Restricted,
-            name: 'restricted',
-            initial: simulateApiError,
-        }, {
-            path: '/home-redirect',
-            exact: true,
-            component: RestrictedRedirect,
-            name: 'restricted-redirect',
-            initial: simulateApiError,
-        }, {
-            path: '/login',
-            exact: true,
-            component: RedirectHome,
-            name: 'login',
-            initial: simulateLogin,
-        }, {
-            path: '/logout',
-            exact: true,
-            component: RedirectHome,
-            name: 'logout',
-            initial: simulateLogout,
-        }, {
-            path: '/error',
-            exact: true,
-            component: SimulatedError,
-            name: 'error-test',
-        }, {
-            path: '*',
-            component: PageNotFound,
-            name: '404',
-        }],
+        routes: [
+            {
+                path: '/',
+                exact: true,
+                component: Home,
+                name: 'home',
+            },
+            {
+                path: '/long',
+                exact: true,
+                component: HomeLoading,
+                initial: simulateLoading,
+                name: 'home-long',
+            },
+            {
+                path: '/home',
+                exact: true,
+                component: Restricted,
+                name: 'restricted',
+                initial: simulateApiError,
+            },
+            {
+                path: '/home-redirect',
+                exact: true,
+                component: RestrictedRedirect,
+                name: 'restricted-redirect',
+                initial: simulateApiError,
+            },
+            {
+                path: '/login',
+                exact: true,
+                component: RedirectHome,
+                name: 'login',
+                initial: simulateLogin,
+            },
+            {
+                path: '/logout',
+                exact: true,
+                component: RedirectHome,
+                name: 'logout',
+                initial: simulateLogout,
+            },
+            {
+                path: '/error',
+                exact: true,
+                component: SimulatedError,
+                name: 'error-test',
+            },
+            {
+                path: '*',
+                component: PageNotFound,
+                name: '404',
+            },
+        ],
     },
 ];
 

diff --git a/package.json b/package.json
@@ -6,10 +6,10 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-json": "^4.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-replace": "^2.3.1",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.4.1",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
@@ -24,15 +24,15 @@
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/react-redux": "^7.1.7",
-    "@types/react-router": "^5.1.4",
-    "@types/react-router-config": "^5.0.1",
-    "@types/react-router-dom": "^5.1.3",
+    "@types/react-router": "^5.1.12",
+    "@types/react-router-config": "^5.0.2",
+    "@types/react-router-dom": "^5.1.7",
     "@types/uuid": "^3.4.7",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.19.0",
     "@typescript-eslint/parser": "^2.19.0",
     "check-engines": "^1.5.0",
-    "connected-react-router": "^6.7.0",
+    "connected-react-router": "^6.9.1",
     "coveralls": "*",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
@@ -41,6 +41,7 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "formik": "^2.1.4",
     "history": "^4.10.1",
+    "i18next": "^19.9.1",
     "jest": "^25.1.0",
     "jest-cli": "^25.1.0",
     "lerna": "^3.20.2",
@@ -53,18 +54,19 @@
     "razzle": "^3.3.0",
     "razzle-plugin-eslint": "^3.3.0",
     "razzle-plugin-scss": "^3.3.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-i18next": "^11.8.8",
     "react-redux": "^7.1.3",
-    "react-router": "^5.1.2",
+    "react-router": "^5.2.0",
     "react-router-config": "^5.1.1",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "react-test-renderer": "^16.12.0",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
     "rimraf": "^3.0.2",
-    "rollup": "^1.31.0",
-    "rollup-plugin-typescript2": "0.25.3",
+    "rollup": "^2.40.0",
+    "rollup-plugin-typescript2": "^0.30.0",
     "tg-resources": "^3.1.3",
     "ts-jest": "^25.2.0",
     "tslib": "^1.10.0",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -35,7 +35,7 @@
     "react-router": "^4.3.0 || ^5.0.0"
   },
   "dependencies": {
-    "tg-named-routes": "1.0.0-beta.0",
+    "tg-named-routes": "1.0.0-beta.1",
     "warning": "^4.0.2"
   },
   "scripts": {