@common-stack/generate-plugin 6.0.8-alpha.4 → 6.0.8-alpha.40

package/src/generators/add-frontend/frameworks/antui/entry.client.tsx.template

@@ -32,6 +32,7 @@ import clientModules from '@app/frontend-stack-react/modules.js';
 import createEmotionCache from '@app/frontend-stack-react/entries/common/createEmotionCache.js';
 // @ts-ignore
 import config from '@app/cde-webconfig.json';
+import { LocaleContext } from './context';
 
 const { apolloClient: client, container, serviceFunc } = createClientContainer();
 const { store } = createReduxStore(client, serviceFunc(), container);
@@ -42,6 +43,12 @@ const cache = createEmotionCache();
 (window as any).__remixStore = store;
 removeUniversalPortals((window as any).__SLOT_FILLS__ || []);
 
+function LocaleProvider({ children }: any) {
+    const locale = (window as any).__LOCALE__ || '';
+
+    return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+}
+
 async function hydrate() {
     if (!i18next.isInitialized && config.i18n.enabled) {
         await i18next
@@ -66,7 +73,7 @@ async function hydrate() {
             document,
             (
                 <I18nextProvider i18n={i18next}>
-                    <StrictMode>
+                    <LocaleProvider>
                         <CacheProvider value={cache}>
                             <StyleProvider cache={antCache}>
                                 <ReduxProvider store={store}>
@@ -84,7 +91,7 @@ async function hydrate() {
                                 </ReduxProvider>
                             </StyleProvider>
                         </CacheProvider>
-                    </StrictMode>
+                    </LocaleProvider>
                 </I18nextProvider>
             ) as any,
         );

package/src/generators/add-frontend/frameworks/antui/entry.server.tsx.template

@@ -31,6 +31,9 @@ import config from '@app/cde-webconfig.json';
 // @ts-ignore
 import createEmotionCache from '@app/frontend-stack-react/entries/common/createEmotionCache';
 import type { IAppLoadContext } from '@common-stack/client-core';
+// @ts-ignore
+import publicEnv from '@src/config/public-config';
+import { LocaleContext } from './context';
 
 const ABORT_DELAY = 5_000;
 const antdCache = createAntdCache();
@@ -41,18 +44,23 @@ class ConstantsTransform extends Transform {
     _apolloState: any;
     _reduxState: any;
     _styleSheet: string;
+    _lng: string;
 
-    constructor(fills: string[], apolloState: any, reduxState: any, styleSheet: any) {
+    constructor(fills: string[], apolloState: any, reduxState: any, styleSheet: any, lng: string) {
         super();
         this._fills = fills;
         this._apolloState = apolloState;
         this._reduxState = reduxState;
         this._styleSheet = styleSheet;
+        this._lng = lng;
     }
 
     _transform(chunk, encoding, callback) {
         let transformedChunk = chunk.toString();
 
+        if (transformedChunk.includes('[__ENV__]')) {
+            transformedChunk = transformedChunk.replace('[__ENV__]', JSON.stringify(publicEnv));
+        }
         if (transformedChunk.includes('[__APOLLO_STATE__]')) {
             transformedChunk = transformedChunk.replace(
                 '[__APOLLO_STATE__]',
@@ -71,6 +79,9 @@ class ConstantsTransform extends Transform {
         if (transformedChunk.includes('[__STYLESHEET__]')) {
             transformedChunk = transformedChunk.replace('[__STYLESHEET__]', this._styleSheet);
         }
+        if (transformedChunk.includes('[__LOCALE__]')) {
+            transformedChunk = transformedChunk.replace('[__LOCALE__]', `"${this._lng}"`);
+        }
 
         callback(null, transformedChunk);
     }
@@ -86,32 +97,9 @@ export default async function handleRequest(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     loadContext: IAppLoadContext,
 ) {
-    const instance = createInstance();
-    const lng = await i18next.getLocale(request);
-    const ns = i18next.getRouteNamespaces(remixContext);
-
-    // First, we create a new instance of i18next so every request will have a
-    // completely unique instance and not share any state.
-    if (config.i18n.enabled) {
-        await instance
-            .use(initReactI18next) // Tell our instance to use react-i18next
-            .use(Backend) // Setup our backend.init({
-            .init({
-                fallbackLng: config.i18n.fallbackLng,
-                defaultNS: config.i18n.defaultNS,
-                react: config.i18n.react,
-                supportedLngs: config.i18n.supportedLngs,
-                lng, // The locale we detected above
-                ns, // The namespaces the routes about to render want to use
-                backend: {
-                    loadPath: resolve(config.i18n.backend.loadServerPath),
-                },
-            });
-    }
-
     return isbot(request.headers.get('user-agent') || '')
-        ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext, instance)
-        : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext, instance);
+        ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext)
+        : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext);
 }
 
 function handleBotRequest(
@@ -120,14 +108,11 @@ function handleBotRequest(
     responseHeaders: Headers,
     remixContext: EntryContext,
     loadContext: IAppLoadContext,
-    i18nInstance: i18next,
 ) {
     return new Promise((resolve, reject) => {
         let shellRendered = false;
         const { pipe, abort } = renderToPipeableStream(
-            <I18nextProvider i18n={i18nInstance}>
-                <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />
-            </I18nextProvider>,
+            <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
             {
                 onAllReady() {
                     shellRendered = true;
@@ -164,14 +149,36 @@ function handleBotRequest(
     });
 }
 
-function handleBrowserRequest(
+async function handleBrowserRequest(
     request: Request,
     responseStatusCode: number,
     responseHeaders: Headers,
     remixContext: EntryContext,
     loadContext: IAppLoadContext,
-    i18nInstance: i18next,
 ) {
+    const instance = createInstance();
+    const lng = await i18next.getLocale(request);
+    const ns = i18next.getRouteNamespaces(remixContext);
+
+    // First, we create a new instance of i18next so every request will have a
+    // completely unique instance and not share any state.
+    if (config.i18n.enabled) {
+        await instance
+            .use(initReactI18next) // Tell our instance to use react-i18next
+            .use(Backend) // Setup our backend.init({
+            .init({
+                fallbackLng: config.i18n.fallbackLng,
+                defaultNS: config.i18n.defaultNS,
+                react: config.i18n.react,
+                supportedLngs: config.i18n.supportedLngs,
+                lng, // The locale we detected above
+                ns, // The namespaces the routes about to render want to use
+                backend: {
+                    loadPath: resolve(config.i18n.backend.loadServerPath),
+                },
+            });
+    }
+
     return new Promise((resolve, reject) => {
         let shellRendered = false;
         const slotFillContext = { fills: {} };
@@ -190,24 +197,26 @@ function handleBrowserRequest(
 
         const { pipe, abort } = renderToPipeableStream(
             (
-                <I18nextProvider i18n={i18nInstance}>
-                    <CacheProvider value={cache}>
-                        <StyleProvider cache={antdCache}>
-                            <ReduxProvider store={store}>
-                                <SlotFillProvider context={slotFillContext}>
-                                    <InversifyProvider container={container} modules={clientModules as any}>
-                                        <ApolloProvider client={client}>
-                                            <RemixServer
-                                                context={remixContext}
-                                                url={request.url}
-                                                abortDelay={ABORT_DELAY}
-                                            />
-                                        </ApolloProvider>
-                                    </InversifyProvider>
-                                </SlotFillProvider>
-                            </ReduxProvider>
-                        </StyleProvider>
-                    </CacheProvider>
+                <I18nextProvider i18n={instance}>
+                    <LocaleContext.Provider value={lng}>
+                        <CacheProvider value={cache}>
+                            <StyleProvider cache={antdCache}>
+                                <ReduxProvider store={store}>
+                                    <SlotFillProvider context={slotFillContext}>
+                                        <InversifyProvider container={container} modules={clientModules as any}>
+                                            <ApolloProvider client={client}>
+                                                <RemixServer
+                                                    context={remixContext}
+                                                    url={request.url}
+                                                    abortDelay={ABORT_DELAY}
+                                                />
+                                            </ApolloProvider>
+                                        </InversifyProvider>
+                                    </SlotFillProvider>
+                                </ReduxProvider>
+                            </StyleProvider>
+                        </CacheProvider>
+                    </LocaleContext.Provider>
                 </I18nextProvider>
             ) as any,
             {
@@ -220,7 +229,7 @@ function handleBrowserRequest(
                     const fills = Object.keys(slotFillContext.fills);
                     const styleSheet = extractStyle(antdCache);
 
-                    const transform = new ConstantsTransform(fills, apolloState, reduxState, styleSheet);
+                    const transform = new ConstantsTransform(fills, apolloState, reduxState, styleSheet, lng);
 
                     responseHeaders.set('Content-Type', 'text/html');
 

package/src/generators/add-frontend/frameworks/antui/root.tsx.template

@@ -1,8 +1,6 @@
 import 'reflect-metadata';
 import * as React from 'react';
 import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteLoaderData, useRouteError, json } from '@remix-run/react';
-// @ts-ignore
-import publicEnv from '@src/config/public-config';
 import { PluginArea } from '@common-stack/client-react';
 import { subscribeReduxRouter } from '@common-stack/remix-router-redux';
 import { ApplicationErrorHandler } from '@admin-layout/ant-ui';
@@ -16,7 +14,8 @@ import { useTranslation } from 'react-i18next';
 import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
 // @ts-ignore
 import { ErrorBoundary } from '@app/frontend-stack-react/entries/antui/components/ErrorBoundary';
-
+import { LocaleContext } from './context';
+/*
 export const loader = async ({ request }) => {
     const locale = await i18next.getLocale(request);
     return json({
@@ -24,7 +23,7 @@ export const loader = async ({ request }) => {
         locale,
     });
 };
-
+*/
 export const handle = {
     i18n: 'common',
 };
@@ -34,8 +33,8 @@ export function shouldRevalidate(params: any) {
 }
 
 export function Layout({ children }: { children: React.ReactNode }) {
-    const data = useRouteLoaderData<{ locale: any }>('root');
-    const locale = data?.locale;
+    // const data = useRouteLoaderData<{ locale: any }>('root');
+    const locale: any = React.useContext(LocaleContext);
 
     const { i18n } = useTranslation();
 
@@ -49,11 +48,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         if (typeof window === 'undefined') {
             return (
                 <>
-                    <script
-                        dangerouslySetInnerHTML={{
-                            __html: `window.__ENV__ = ${JSON.stringify((data as any)?.__ENV__)}`,
-                        }}
-                    />
+                    <script>window.__ENV__=[__ENV__]</script>
                     <script
                         src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.min.js"
                         integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ=="
@@ -68,6 +63,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
                             __html: `if (global === undefined) { var global = window; }`,
                         }}
                     />
+                    <script>window.__LOCALE__=[__LOCALE__]</script>
                 </>
             );
         }

package/src/generators/add-frontend/frameworks/chakraui/context.tsx.template

@@ -18,3 +18,9 @@ export interface ClientStyleContextData {
 export const ClientStyleContext = createContext<ClientStyleContextData | null>(
   null,
 );
+
+export interface LocaleContextData {
+    locale: string;
+}
+
+export const LocaleContext = createContext<LocaleContextData | null>(null);

package/src/generators/add-frontend/frameworks/chakraui/entry.client.tsx.template

@@ -27,8 +27,7 @@ import Backend from 'i18next-http-backend';
 import { getInitialNamespaces } from 'remix-i18next/client';
 import config from '@app/cde-webconfig.json';
 // @ts-ignore
-// import { ClientStyleContext } from '@app/frontend-stack-react/entries/chakraui/context.js';
-import { ClientStyleContext } from './context';
+import { ClientStyleContext, LocaleContext } from './context';
 
 const { apolloClient: client, container, serviceFunc } = createClientContainer();
 const { store } = createReduxStore(client, serviceFunc(), container);
@@ -60,6 +59,13 @@ function ClientCacheProvider({ children }: ClientCacheProviderProps) {
     );
 }
 
+function LocaleProvider({ children }: ClientCacheProviderProps) {
+    const el = (document as any).querySelector('html');
+    const locale = el?.getAttribute('lng') || '';
+
+    return <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>;
+}
+
 async function hydrate() {
     if (!i18next.isInitialized && config.i18n.enabled) {
         await i18next
@@ -83,19 +89,21 @@ async function hydrate() {
         document.getElementById('root')!,
         // <StrictMode>
         <I18nextProvider i18n={i18next}>
-            <ClientCacheProvider>
-                <ApolloProvider client={client}>
-                    <ReduxProvider store={store}>
-                        <SlotFillProvider>
-                            <InversifyProvider container={container} modules={clientModules}>
-                                <PersistGate loading={null} persistor={persistor}>
-                                    {() => <RemixBrowser />}
-                                </PersistGate>
-                            </InversifyProvider>
-                        </SlotFillProvider>
-                    </ReduxProvider>
-                </ApolloProvider>
-            </ClientCacheProvider>
+            <LocaleProvider>
+                <ClientCacheProvider>
+                    <ApolloProvider client={client}>
+                        <ReduxProvider store={store}>
+                            <SlotFillProvider>
+                                <InversifyProvider container={container} modules={clientModules}>
+                                    <PersistGate loading={null} persistor={persistor}>
+                                        {() => <RemixBrowser />}
+                                    </PersistGate>
+                                </InversifyProvider>
+                            </SlotFillProvider>
+                        </ReduxProvider>
+                    </ApolloProvider>
+                </ClientCacheProvider>
+            </LocaleProvider>
         </I18nextProvider>,
         // </StrictMode>,
     );

package/src/generators/add-frontend/frameworks/chakraui/entry.server.tsx.template

@@ -36,8 +36,7 @@ import config from '@app/cde-webconfig.json';
 
 import { Head } from './root';
 import type { IAppLoadContext } from '@common-stack/client-core';
-// import { ServerStyleContext } from '@app/frontend-stack-react/entries/chakraui/context.js';
-import { ServerStyleContext } from './context';
+import { ServerStyleContext, LocaleContext } from './context';
 import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
 
 const { extractCriticalToChunks } = createEmotionServer(defaultCache);
@@ -149,17 +148,19 @@ async function handleBrowserRequest(
 
     const html = renderToString(
         <I18nextProvider i18n={instance}>
-            <CacheProvider value={defaultCache}>
-                <ApolloProvider client={client}>
-                    <ReduxProvider store={store}>
-                        <SlotFillProvider context={slotFillContext}>
-                            <InversifyProvider container={container} modules={clientModules}>
-                                <RemixServer context={remixContext} url={request.url} />
-                            </InversifyProvider>
-                        </SlotFillProvider>
-                    </ReduxProvider>
-                </ApolloProvider>
-            </CacheProvider>
+            <LocaleContext.Provider value={lng}>
+                <CacheProvider value={defaultCache}>
+                    <ApolloProvider client={client}>
+                        <ReduxProvider store={store}>
+                            <SlotFillProvider context={slotFillContext}>
+                                <InversifyProvider container={container} modules={clientModules}>
+                                    <RemixServer context={remixContext} url={request.url} />
+                                </InversifyProvider>
+                            </SlotFillProvider>
+                        </ReduxProvider>
+                    </ApolloProvider>
+                </CacheProvider>
+            </LocaleContext.Provider>
         </I18nextProvider>,
     );
 
@@ -177,23 +178,25 @@ async function handleBrowserRequest(
         const { pipe, abort } = renderToPipeableStream(
             (
                 <I18nextProvider i18n={instance}>
-                    <ServerStyleContext.Provider value={chunks.styles}>
-                        <CacheProvider value={defaultCache}>
-                            <ApolloProvider client={client}>
-                                <ReduxProvider store={store}>
-                                    <SlotFillProvider context={slotFillContext}>
-                                        <InversifyProvider container={container} modules={clientModules}>
-                                            <RemixServer
-                                                context={remixContext}
-                                                url={request.url}
-                                                abortDelay={ABORT_DELAY}
-                                            />
-                                        </InversifyProvider>
-                                    </SlotFillProvider>
-                                </ReduxProvider>
-                            </ApolloProvider>
-                        </CacheProvider>
-                    </ServerStyleContext.Provider>
+                    <LocaleContext.Provider value={lng}>
+                        <ServerStyleContext.Provider value={chunks.styles}>
+                            <CacheProvider value={defaultCache}>
+                                <ApolloProvider client={client}>
+                                    <ReduxProvider store={store}>
+                                        <SlotFillProvider context={slotFillContext}>
+                                            <InversifyProvider container={container} modules={clientModules}>
+                                                <RemixServer
+                                                    context={remixContext}
+                                                    url={request.url}
+                                                    abortDelay={ABORT_DELAY}
+                                                />
+                                            </InversifyProvider>
+                                        </SlotFillProvider>
+                                    </ReduxProvider>
+                                </ApolloProvider>
+                            </CacheProvider>
+                        </ServerStyleContext.Provider>
+                    </LocaleContext.Provider>
                 </I18nextProvider>
             ) as any,
             {

package/src/generators/add-frontend/frameworks/chakraui/root.tsx.template

@@ -11,7 +11,7 @@ import { ApplicationErrorHandler } from '@admin-layout/chakra-ui';
 import clientModules, { plugins } from '@app/frontend-stack-react/modules.js';
 import { createHead } from 'remix-island';
 import { useContext } from 'react';
-import { ServerStyleContext, ClientStyleContext } from './context';
+import { ServerStyleContext, ClientStyleContext, LocaleContext } from './context';
 import { withEmotionCache } from '@emotion/react';
 import { useChangeLanguage } from 'remix-i18next/react';
 import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
@@ -31,6 +31,9 @@ export const Head = createHead(() => (
 export const Document = withEmotionCache(({ children }: DocumentProps, emotionCache) => {
     const serverStyleData = useContext(ServerStyleContext);
     const clientStyleData = useContext(ClientStyleContext);
+    const locale = useContext(LocaleContext);
+
+    useChangeLanguage(locale);
 
     React.useEffect(() => {
         // re-link sheet container
@@ -64,12 +67,12 @@ export const Document = withEmotionCache(({ children }: DocumentProps, emotionCa
         </>
     );
 });
-
+/*
 export let loader = async ({ request }) => {
     let locale = await i18next.getLocale(request);
     return json({ locale });
 };
-
+*/
 export let handle = {
     i18n: 'common',
 };
@@ -79,11 +82,12 @@ export function shouldRevalidate(params: any) {
 }
 
 export default function App() {
+    /*
     const data = useRouteLoaderData<{ locale: any }>('root');
     const locale = data?.locale;
     
     useChangeLanguage(locale);
-
+    */
     React.useEffect(() => {
         subscribeReduxRouter({ store: window.__remixStore, router: window.__remixRouter } as any);
     }, []);

package/src/generators/add-fullstack/files/cdecode-config.json

@@ -0,0 +1,109 @@
+{
+    "servers": ["servers/frontend-server/config.json", "servers/backend-server/config.json"],
+    "codegen": {
+        "outputFile": "codegen.ts",
+        "rootSchema": "servers/backend-server/src/api/root-schema.graphqls",
+        "fullConfig": {
+            "overwrite": true,
+            "schema": ["$PRIMARY_SCHEMA_PLACEHOLDER$"],
+            "generates": {
+                "packages/common/src/generated/generated-models.ts": {
+                    "schema": "%discoveredSchemas%",
+                    "documents": "%discoveredDocuments%",
+                    "config": {
+                        "scalars": {
+                            "URI": "URI",
+                            "URIInput": "URI | UriComponents"
+                        },
+                        "enumValues": {
+                            "ConfigurationScope": "@workbench-stack/core/lib/interfaces/configuration/configuration.js#ConfigurationScope",
+                            "ConfigurationTarget": "../configuration#ConfigurationTarget"
+                        },
+                        "constEnums": false,
+                        "contextType": "../apollo-context#MyContext",
+                        "withHooks": true,
+                        "typesPrefix": "I",
+                        "noNamespaces": true,
+                        "noGraphQLTag": true
+                    },
+                    "plugins": [
+                        {
+                            "add": {
+                                "content": [
+                                    "import { URI,  UriComponents } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri.js';"
+                                ]
+                            }
+                        },
+                        "typescript",
+                        "typescript-operations",
+                        "typescript-resolvers"
+                    ]
+                },
+                "packages/common/src/generated/generated.tsx": {
+                    "schema": "%discoveredSchemas%",
+                    "documents": "%discoveredDocuments%",
+                    "config": {
+                        "scalars": {
+                            "URI": "URI",
+                            "URIInput": "URI | UriComponents"
+                        },
+                        "withHooks": true,
+                        "typesPrefix": "I",
+                        "noNamespaces": true,
+                        "noGraphQLTag": true
+                    },
+                    "preset": "import-types-preset",
+                    "presetConfig": {
+                        "typesPath": "./generated-models",
+                        "importTypesNamespace": "SchemaTypes"
+                    },
+                    "plugins": [
+                        {
+                            "add": {
+                                "content": [
+                                    "import { URI,  UriComponents } from '@vscode-alt/monaco-editor/esm/vs/base/common/uri.js';"
+                                ]
+                            }
+                        },
+                        "typescript-react-apollo"
+                    ]
+                }
+            }
+        }
+    },
+    "updateDependencies": {
+        "packagesToCheck": [
+            "@common-stack/server-stack",
+            "@common-stack/frontend-stack-react",
+            "@common-stack/mobile-stack-react"
+        ],
+        "packagePaths": {
+            "backend": ["servers/backend-server/package.json"],
+            "frontend": ["servers/frontend-server/package.json"],
+            "mobile": ["portable-devices/mobile/package.json"]
+        }
+    },
+    "updateDependencyVersion": {
+        "roots": ["servers", "portable-devices", "packages", "packages-modules"],
+        "ignorePattern": "**/node_modules/**",
+        "jsonSpacing": 4,
+        "addEndNewLine": true,
+        "commitMessage": "Updated packages to use correct versions"
+    },
+    "sortPackageJson": {
+        "directories": [".", "packages", "packages-modules", "servers", "portable-devices"],
+        "skipNodeModules": true
+    },
+    "deployVersionUpdate": {
+        "lernaJsonPath": "lerna.json",
+        "jenkinsfilePath": "Jenkinsfile",
+        "valuesDevYamlPath": "values-dev.yaml",
+        "valuesProdYamlPath": "values-prod.yaml"
+    },
+    "projectPaths": {
+        "packages": "packages",
+        "packagesModules": "packages-modules",
+        "servers": "servers",
+        "portableDevices": "portable-devices"
+    }
+}