@common-stack/generate-plugin 6.0.1-alpha.9 → 6.0.2-alpha.10

package/src/generators/add-browser-package/generator.ts

@@ -4,19 +4,20 @@ import { AddBrowserPackageGeneratorSchema } from './schema';
 import { isValid, getValid } from '../../utils';
 
 export async function addBrowserPackageGenerator(tree: Tree, options: AddBrowserPackageGeneratorSchema) {
+    const configs: any = {...options};
+    return await generateBrowserPackage(tree, configs);
+}
+
+export const generateBrowserPackage = async (tree: Tree, options: any) => {
     const projectName = getValid(options.name) ?? 'browser-package';
     const projectRoot = isValid(options.directory) ? `${getValid(options.directory)}/${projectName}` : projectName;
-    // addProjectConfiguration(tree, options.name, {
-    //     root: projectRoot,
-    //     projectType: 'library',
-    //     sourceRoot: `${projectRoot}/src`,
-    //     targets: {},
-    // });
+
     generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
     updateJson(tree, `${projectRoot}/package.json`, (packageJson) => {
         packageJson['name'] = projectName;
         return packageJson;
     });
+
     await formatFiles(tree);
 }
 

package/src/generators/add-client-package/generator.spec.ts

@@ -0,0 +1,20 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, readProjectConfiguration } from '@nx/devkit';
+
+import { addClientPackageGenerator } from './generator';
+import { AddClientPackageGeneratorSchema } from './schema';
+
+describe('add-client-package generator', () => {
+    let tree: Tree;
+    const options: AddClientPackageGeneratorSchema = { name: 'test', directory: 'lib' };
+
+    beforeEach(() => {
+        tree = createTreeWithEmptyWorkspace();
+    });
+
+    it('should run successfully', async () => {
+        await addClientPackageGenerator(tree, options);
+        const config = readProjectConfiguration(tree, 'test');
+        expect(config).toBeDefined();
+    });
+});

package/src/generators/add-client-package/generator.ts

@@ -0,0 +1,24 @@
+import { addProjectConfiguration, formatFiles, generateFiles, Tree, updateJson } from '@nx/devkit';
+import * as path from 'path';
+import { AddClientPackageGeneratorSchema } from './schema';
+import { isValid, getValid } from '../../utils';
+
+export async function addClientPackageGenerator(tree: Tree, options: AddClientPackageGeneratorSchema) {
+    const configs: any = {...options};
+    return await generateClientPackage(tree, configs);
+}
+
+export const generateClientPackage = async (tree: Tree, options: any) => {
+    const projectName = getValid(options.name) ?? 'client-package';
+    const projectRoot = isValid(options.directory) ? `${getValid(options.directory)}/${projectName}` : projectName;
+
+    generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
+    updateJson(tree, `${projectRoot}/package.json`, (packageJson) => {
+        packageJson['name'] = projectName;
+        return packageJson;
+    });
+
+    await formatFiles(tree);
+}
+
+export default addClientPackageGenerator;

package/src/generators/add-client-package/schema.d.ts

@@ -0,0 +1,4 @@
+export interface AddClientPackageGeneratorSchema {
+    name: string;
+    directory: string;
+}

package/src/generators/add-client-package/schema.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://json-schema.org/schema",
+    "$id": "AddClientPackage",
+    "title": "",
+    "type": "object",
+    "properties": {
+        "name": {
+            "type": "string",
+            "description": "",
+            "x-prompt": "What name would you like to use?"
+        },
+        "directory": {
+            "type": "string",
+            "description": "",
+            "x-prompt": "What directory would you like to create in?"
+        }
+    },
+    "required": ["name", "directory"]
+}

package/src/generators/add-core-package/generator.spec.ts

@@ -0,0 +1,20 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { Tree, readProjectConfiguration } from '@nx/devkit';
+
+import { addCorePackageGenerator } from './generator';
+import { AddCorePackageGeneratorSchema } from './schema';
+
+describe('add-core-package generator', () => {
+    let tree: Tree;
+    const options: AddCorePackageGeneratorSchema = { name: 'test', directory: 'lib' };
+
+    beforeEach(() => {
+        tree = createTreeWithEmptyWorkspace();
+    });
+
+    it('should run successfully', async () => {
+        await addCorePackageGenerator(tree, options);
+        const config = readProjectConfiguration(tree, 'test');
+        expect(config).toBeDefined();
+    });
+});

package/src/generators/add-core-package/generator.ts

@@ -0,0 +1,24 @@
+import { addProjectConfiguration, formatFiles, generateFiles, Tree, updateJson } from '@nx/devkit';
+import * as path from 'path';
+import { AddCorePackageGeneratorSchema } from './schema';
+import { isValid, getValid } from '../../utils';
+
+export async function addCorePackageGenerator(tree: Tree, options: AddCorePackageGeneratorSchema) {
+    const configs: any = {...options};
+    return await generateCorePackage(tree, configs);
+}
+
+export const generateCorePackage = async (tree: Tree, options: any) => {
+    const projectName = getValid(options.name) ?? 'core-package';
+    const projectRoot = isValid(options.directory) ? `${getValid(options.directory)}/${projectName}` : projectName;
+    
+    generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
+    updateJson(tree, `${projectRoot}/package.json`, (packageJson) => {
+        packageJson['name'] = projectName;
+        return packageJson;
+    });
+    
+    await formatFiles(tree);
+}
+
+export default addCorePackageGenerator;

package/src/generators/add-core-package/schema.d.ts

@@ -0,0 +1,4 @@
+export interface AddCorePackageGeneratorSchema {
+    name: string;
+    directory: string;
+}

package/src/generators/add-core-package/schema.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://json-schema.org/schema",
+    "$id": "AddCorePackage",
+    "title": "",
+    "type": "object",
+    "properties": {
+        "name": {
+            "type": "string",
+            "description": "",
+            "x-prompt": "What name would you like to use?"
+        },
+        "directory": {
+            "type": "string",
+            "description": "",
+            "x-prompt": "What directory would you like to create in?"
+        }
+    },
+    "required": ["name", "directory"]
+}

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

@@ -1,4 +1,4 @@
-import React, { useState, startTransition, StrictMode } from 'react';
+import React, { useState, startTransition, StrictMode, useMemo, createContext, useContext } from 'react';
 import 'reflect-metadata';
 import { RemixBrowser } from '@remix-run/react';
 import { hydrateRoot } from 'react-dom/client';
@@ -27,7 +27,8 @@ 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 '@app/frontend-stack-react/entries/chakraui/context.js';
+import { ClientStyleContext } from './context';
 
 const { apolloClient: client, container, serviceFunc } = createClientContainer();
 const { store } = createReduxStore(client, serviceFunc(), container);
@@ -40,16 +41,21 @@ interface ClientCacheProviderProps {
     children: React.ReactNode;
 }
 
+export function useClientStyleContext() {
+    return useContext(ClientStyleContext);
+}
+
 function ClientCacheProvider({ children }: ClientCacheProviderProps) {
-    const [cache, setCache] = useState(defaultCache);
+    const [count, setCount] = useState(0);
+    const defaultCache = useMemo(() => createEmotionCache(), [count]);
 
-    function reset() {
-        setCache(createEmotionCache());
-    }
+    const reset = () => {
+        setCount((prev) => prev + 1);
+    };
 
     return (
         <ClientStyleContext.Provider value={{ reset }}>
-            <CacheProvider value={cache}>{children}</CacheProvider>
+            <CacheProvider value={defaultCache}>{children}</CacheProvider>
         </ClientStyleContext.Provider>
     );
 }
@@ -75,23 +81,23 @@ async function hydrate() {
     }
     hydrateRoot(
         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>
-            </I18nextProvider>
-        </StrictMode>,
+        // <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>
+        </I18nextProvider>,
+        // </StrictMode>,
     );
     // });
 }

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

@@ -36,8 +36,10 @@ 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 '@app/frontend-stack-react/entries/chakraui/context.js';
+import { ServerStyleContext } from './context';
 import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
+
 const { extractCriticalToChunks } = createEmotionServer(defaultCache);
 
 const ABORT_DELAY = 5000;
@@ -124,12 +126,7 @@ async function handleBrowserRequest(
     // And here we detect what namespaces the routes about to render want to use
     const ns = i18next.getRouteNamespaces(remixContext);
     const slotFillContext = { fills: {} };
-    const {
-        modules: clientModules,
-        container,
-        apolloClient: client,
-        store,
-    }: IAppLoadContext = loadContext;
+    const { modules: clientModules, container, apolloClient: client, store }: IAppLoadContext = loadContext;
 
     // First, we create a new instance of i18next so every request will have a
     // completely unique instance and not share any state.
@@ -145,7 +142,7 @@ async function handleBrowserRequest(
                 lng, // The locale we detected above
                 ns, // The namespaces the routes about to render want to use
                 backend: {
-                    loadPath: resolve(config.i18n.backend.loadServerPath),
+                    loadPath: config.i18n.backend.loadServerPath,
                 },
             });
     }

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

@@ -79,8 +79,8 @@ export function shouldRevalidate(params: any) {
 }
 
 export default function App() {
-    let { locale } = useLoaderData();
-
+    // const { locale } = useLoaderData();
+    const locale = 'en';
     useChangeLanguage(locale);
 
     React.useEffect(() => {
@@ -94,4 +94,4 @@ export default function App() {
     );
 }
 
-export { ErrorBoundary };
+export { ErrorBoundary };

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

@@ -0,0 +1,90 @@
+/**
+ * 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 'reflect-metadata';
+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, removeUniversalPortals } from '@common-stack/components-pro';
+import { InversifyProvider } from '@common-stack/client-react';
+import { Provider as ReduxProvider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistStore } from 'redux-persist';
+import i18next from 'i18next';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+// @ts-ignore
+import { getInitialNamespaces } from 'remix-i18next/client';
+// @ts-ignore
+import { createReduxStore } from '@app/frontend-stack-react/config/redux-config.js';
+// @ts-ignore
+import { createClientContainer } from '@app/frontend-stack-react/config/client.service';
+// @ts-ignore
+import clientModules from '@app/frontend-stack-react/modules.js';
+// @ts-ignore
+import config from '@app/cde-webconfig.json';
+
+const { apolloClient: client, container, serviceFunc } = createClientContainer();
+const { store } = createReduxStore(client, serviceFunc(), container);
+const persistor = persistStore(store);
+
+(window as any).__remixStore = store;
+removeUniversalPortals((window as any).__SLOT_FILLS__ || []);
+
+async function hydrate() {
+    if (!i18next.isInitialized && config.i18n.enabled) {
+        await i18next
+            .use(initReactI18next)
+            .use(LanguageDetector)
+            .use(Backend)
+            .init({
+                fallbackLng: config.i18n.fallbackLng,
+                defaultNS: config.i18n.defaultNS,
+                react: config.i18n.react,
+                supportedLngs: config.i18n.supportedLngs,
+                backend: config.i18n.backend,
+                ns: getInitialNamespaces(),
+                detection: {
+                    order: ['htmlTag'],
+                    caches: [],
+                },
+            });
+    }
+    startTransition(() => {
+        hydrateRoot(
+            document,
+            (
+                <I18nextProvider i18n={i18next}>
+                    <StrictMode>
+                        <ReduxProvider store={store}>
+                            <SlotFillProvider>
+                                <InversifyProvider container={container} modules={clientModules}>
+                                    <PersistGate loading={null} persistor={persistor}>
+                                        {() => (
+                                            <ApolloProvider client={client}>
+                                                <RemixBrowser />
+                                            </ApolloProvider>
+                                        )}
+                                    </PersistGate>
+                                </InversifyProvider>
+                            </SlotFillProvider>
+                        </ReduxProvider>
+                    </StrictMode>
+                </I18nextProvider>
+            ) as any,
+        );
+    });
+}
+
+if (window.requestIdleCallback) {
+    window.requestIdleCallback(hydrate);
+} else {
+    // Safari doesn't support requestIdleCallback
+    // https://caniuse.com/requestidlecallback
+    window.setTimeout(hydrate, 1);
+}

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

@@ -0,0 +1,238 @@
+/**
+ * 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 * as React from 'react';
+(global as any).__CLIENT__ = false;
+(global as any).__SERVER__ = true;
+import { PassThrough, Transform } from 'node:stream';
+import type { EntryContext } from '@remix-run/node';
+import { createReadableStreamFromReadable } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import { isbot } from 'isbot';
+import { ApolloProvider } from '@apollo/client/index.js';
+import { SlotFillProvider } from '@common-stack/components-pro';
+import { InversifyProvider } from '@common-stack/client-react';
+import { renderToPipeableStream } from 'react-dom/server';
+import { Provider as ReduxProvider } from 'react-redux';
+import { LOCATION_CHANGE } from '@common-stack/remix-router-redux';
+import serialize from 'serialize-javascript';
+import { createInstance } from 'i18next';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import Backend from 'i18next-fs-backend';
+import { resolve } from 'node:path';
+// @ts-ignore
+import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
+import config from '@app/cde-webconfig.json';
+// @ts-ignore
+import type { IAppLoadContext } from '@common-stack/client-core';
+
+const ABORT_DELAY = 5_000;
+
+class ConstantsTransform extends Transform {
+    _fills: string[];
+    _apolloState: any;
+    _reduxState: any;
+    _styleSheet: string;
+
+    constructor(fills: string[], apolloState: any, reduxState: any, styleSheet: any) {
+        super();
+        this._fills = fills;
+        this._apolloState = apolloState;
+        this._reduxState = reduxState;
+        this._styleSheet = styleSheet;
+    }
+
+    _transform(chunk, encoding, callback) {
+        let transformedChunk = chunk.toString();
+
+        if (transformedChunk.includes('[__APOLLO_STATE__]')) {
+            transformedChunk = transformedChunk.replace(
+                '[__APOLLO_STATE__]',
+                serialize(this._apolloState, { isJSON: true }),
+            );
+        }
+        if (transformedChunk.includes('[__PRELOADED_STATE__]')) {
+            transformedChunk = transformedChunk.replace(
+                '[__PRELOADED_STATE__]',
+                serialize(this._reduxState, { isJSON: true }),
+            );
+        }
+        if (transformedChunk.includes('[__SLOT_FILLS__]')) {
+            transformedChunk = transformedChunk.replace('[__SLOT_FILLS__]', serialize(this._fills, { isJSON: true }));
+        }
+        if (transformedChunk.includes('[__STYLESHEET__]')) {
+            transformedChunk = transformedChunk.replace('[__STYLESHEET__]', this._styleSheet);
+        }
+
+        callback(null, transformedChunk);
+    }
+}
+
+export default async function handleRequest(
+    request: Request,
+    responseStatusCode: number,
+    responseHeaders: Headers,
+    remixContext: EntryContext,
+    // This is ignored so we can keep it in the template for visibility.  Feel
+    // free to delete this parameter in your app if you're not using it!
+    // 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);
+}
+
+function handleBotRequest(
+    request: Request,
+    responseStatusCode: number,
+    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>,
+            {
+                onAllReady() {
+                    shellRendered = true;
+                    const body = new PassThrough();
+                    const stream = createReadableStreamFromReadable(body);
+
+                    responseHeaders.set('Content-Type', 'text/html');
+
+                    resolve(
+                        new Response(stream, {
+                            headers: responseHeaders,
+                            status: responseStatusCode,
+                        }),
+                    );
+
+                    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);
+                    }
+                },
+            },
+        );
+
+        setTimeout(abort, ABORT_DELAY);
+    });
+}
+
+function handleBrowserRequest(
+    request: Request,
+    responseStatusCode: number,
+    responseHeaders: Headers,
+    remixContext: EntryContext,
+    loadContext: IAppLoadContext,
+    i18nInstance: i18next,
+) {
+    return new Promise((resolve, reject) => {
+        let shellRendered = false;
+        const slotFillContext = { fills: {} };
+        const { modules: clientModules, container, apolloClient: client, store } = loadContext;
+
+        const { pathname, search, hash } = new URL(request.url);
+        store.dispatch({
+            type: LOCATION_CHANGE,
+            payload: { location: { pathname, search, hash }, action: 'POP' },
+        });
+
+        const { pipe, abort } = renderToPipeableStream(
+            (
+                <I18nextProvider i18n={i18nInstance}>
+                    <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>
+                </I18nextProvider>
+            ) as any,
+            {
+                onShellReady() {
+                    shellRendered = true;
+                    const body = new PassThrough();
+                    const stream = createReadableStreamFromReadable(body);
+                    const apolloState = { ...client.extract() };
+                    const reduxState = { ...store.getState() };
+                    const fills = Object.keys(slotFillContext.fills);
+
+                    const transform = new ConstantsTransform(fills, apolloState, reduxState, []);
+
+                    responseHeaders.set('Content-Type', 'text/html');
+
+                    resolve(
+                        new Response(stream, {
+                            headers: responseHeaders,
+                            status: responseStatusCode,
+                        }),
+                    );
+
+                    pipe(transform).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);
+                    }
+                    reject(error);
+                },
+            },
+        );
+
+        setTimeout(abort, ABORT_DELAY);
+    });
+}