@common-stack/generate-plugin 5.0.2-alpha.4

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

@@ -0,0 +1,105 @@
+import React, { useState, startTransition, StrictMode } from 'react';
+import 'reflect-metadata';
+import { RemixBrowser } from '@remix-run/react';
+import { hydrateRoot } from 'react-dom/client';
+import { ApolloProvider } from '@apollo/client/index.js';
+import { SlotFillProvider, removeUniversalPortals } from '@common-stack/components-pro';
+import { InversifyProvider, PluginArea } 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 { CacheProvider } from '@emotion/react';
+
+// @ts-ignore
+import createEmotionCache, { defaultCache } from '@app/frontend-stack-react/entries/common/createEmotionCache';
+// @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';
+
+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';
+import config from '@app/cde-webconfig.json';
+// @ts-ignore
+import { ClientStyleContext } from '@app/frontend-stack-react/entries/chakraui/context.js';
+
+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__ || []);
+
+interface ClientCacheProviderProps {
+    children: React.ReactNode;
+}
+
+function ClientCacheProvider({ children }: ClientCacheProviderProps) {
+    const [cache, setCache] = useState(defaultCache);
+
+    function reset() {
+        setCache(createEmotionCache());
+    }
+
+    return (
+        <ClientStyleContext.Provider value={{ reset }}>
+            <CacheProvider value={cache}>{children}</CacheProvider>
+        </ClientStyleContext.Provider>
+    );
+}
+
+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: [],
+                },
+            });
+    }
+    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>,
+    );
+    // });
+}
+
+if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(hydrate);
+} else {
+    // Safari doesn't support requestIdleCallback
+    // https://caniuse.com/requestidlecallback
+    setTimeout(hydrate, 1);
+}

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

@@ -0,0 +1,256 @@
+/**
+ * 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
+ */
+// @ts-nocheck
+global.__CLIENT__ = false;
+global.__SERVER__ = true;
+import React from 'react';
+import { PassThrough, Transform } from 'node:stream';
+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 { ApolloProvider } from '@apollo/client/index.js';
+import { SlotFillProvider } from '@common-stack/components-pro';
+import { InversifyProvider, PluginArea } from '@common-stack/client-react';
+import { renderToPipeableStream, renderToString } 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 { CacheProvider } from '@emotion/react';
+import createEmotionServer from '@emotion/server/create-instance';
+import Backend from 'i18next-fs-backend';
+import { renderToString } from 'react-dom/server';
+import { renderHeadToString } from 'remix-island';
+import publicEnv from '@src/config/public-config';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
+import { createInstance } from 'i18next';
+import { resolve } from 'node:path';
+// import { renderStylesToNodeStream } from '@emotion/server';
+// @ts-ignore
+import { defaultCache } from '@app/frontend-stack-react/entries/common/createEmotionCache.js';
+// @ts-ignore
+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 { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
+const { extractCriticalToChunks } = createEmotionServer(defaultCache);
+
+const ABORT_DELAY = 5000;
+const COMMON_HEAD = `
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+`;
+
+export default 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: AppLoadContext,
+) {
+    return isbot(request.headers.get('user-agent') || '')
+        ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext)
+        : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext, loadContext);
+}
+
+function handleBotRequest(
+    request: Request,
+    responseStatusCode: number,
+    responseHeaders: Headers,
+    remixContext: EntryContext,
+    loadContext: IAppLoadContext,
+) {
+    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 head = renderHeadToString({ request, remixContext, Head });
+                    const body = new PassThrough();
+
+                    responseHeaders.set('Content-Type', 'text/html');
+                    const stream = createReadableStreamFromReadable(body);
+                    resolve(
+                        new Response(stream, {
+                            headers: responseHeaders,
+                            status: responseStatusCode,
+                        }),
+                    );
+                    body.write(`<!DOCTYPE html><html><head>${COMMON_HEAD}${head}</head><body><div id="root">`);
+                    pipe(body);
+                    body.write(`</div></body></html>`);
+                },
+                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);
+    });
+}
+
+async function handleBrowserRequest(
+    request: Request,
+    responseStatusCode: number,
+    responseHeaders: Headers,
+    remixContext: EntryContext,
+    loadContext: IAppLoadContext,
+) {
+    const instance = createInstance();
+
+    // Then we could detect locale from the request
+    const lng = await i18next.getLocale(request);
+    // 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;
+
+    // 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),
+                },
+            });
+    }
+
+    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>
+        </I18nextProvider>,
+    );
+
+    const chunks = extractCriticalToChunks(html);
+
+    return new Promise((resolve, reject) => {
+        let shellRendered = false;
+
+        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={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>
+                </I18nextProvider>
+            ) as any,
+            {
+                onShellReady() {
+                    shellRendered = true;
+                    const head = renderHeadToString({ request, remixContext, Head });
+                    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);
+
+                    let customHead = `<script>window.__ENV__=${JSON.stringify(publicEnv)}</script>`;
+                    customHead += `<script>window.__APOLLO_STATE__=${serialize(apolloState, {
+                        isJSON: true,
+                    })}</script>`;
+                    customHead += `<script>window.__PRELOADED_STATE__=${serialize(reduxState, {
+                        isJSON: true,
+                    })}</script>`;
+                    customHead += `<script>window.__SLOT_FILLS__=${serialize(fills, { isJSON: true })}</script>`;
+                    customHead += `<script>if (global === undefined) { var global = window; }</script>`;
+
+                    responseHeaders.set('Content-Type', 'text/html');
+
+                    resolve(
+                        new Response(stream, {
+                            headers: responseHeaders,
+                            status: responseStatusCode,
+                        }),
+                    );
+                    body.write(
+                        `<!DOCTYPE html><html lng=${lng}><head>${COMMON_HEAD}${customHead}${head}</head><body><div id="root">`,
+                    );
+                    pipe(body);
+                    body.write(`</div></body></html>`);
+                    // pipe(transform).pipe(renderStylesToNodeStream()).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);
+    });
+}

package/src/generators/add-entries/entries/chakraui/root.tsx.template

@@ -0,0 +1,97 @@
+// @ts-nocheck
+import * as React from 'react';
+
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
+import { json } from '@remix-run/node';
+import { PluginArea } from '@common-stack/client-react';
+import { subscribeReduxRouter } from '@common-stack/remix-router-redux';
+
+import { ApplicationErrorHandler } from '@admin-layout/chakra-ui';
+// @ts-ignore
+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 { withEmotionCache } from '@emotion/react';
+import { useChangeLanguage } from 'remix-i18next/react';
+import { i18nextInstance as i18next } from '@app/frontend-stack-react/i18n-localization/i18next.server.js';
+import { ErrorBoundary } from '@app/frontend-stack-react/entries/chakraui/components/ErrorBoundary.js';
+
+interface DocumentProps {
+    children: React.ReactNode;
+}
+
+export const Head = createHead(() => (
+    <>
+        <Meta />
+        <Links />
+    </>
+));
+
+export const Document = withEmotionCache(({ children }: DocumentProps, emotionCache) => {
+    const serverStyleData = useContext(ServerStyleContext);
+    const clientStyleData = useContext(ClientStyleContext);
+
+    React.useEffect(() => {
+        // re-link sheet container
+        emotionCache.sheet.container = document.head;
+        // re-inject tags
+        const tags = emotionCache.sheet.tags;
+        emotionCache.sheet.flush();
+        tags.forEach((tag) => {
+            (emotionCache.sheet as any)._insertTag(tag);
+        });
+        // reset cache to reapply global styles
+        clientStyleData?.reset();
+    }, []);
+
+    return (
+        <>
+            <Head />
+            {serverStyleData?.map(({ key, ids, css }) => (
+                <style key={key} data-emotion={`${key} ${ids.join(' ')}`} dangerouslySetInnerHTML={{ __html: css }} />
+            ))}
+            <script
+                src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.min.js"
+                integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ=="
+                crossOrigin="anonymous"
+                referrerPolicy="no-referrer"
+            ></script>
+            <PluginArea />
+            {children}
+            <ScrollRestoration />
+            <Scripts />
+        </>
+    );
+});
+
+export let loader = async ({ request }) => {
+    let locale = await i18next.getLocale(request);
+    return json({ locale });
+};
+
+export let handle = {
+    i18n: 'common',
+};
+
+export function shouldRevalidate(params: any) {
+    return params.defaultShouldRevalidate && params.currentUrl.pathname !== params.nextUrl.pathname;
+}
+
+export default function App() {
+    let { locale } = useLoaderData();
+
+    useChangeLanguage(locale);
+
+    React.useEffect(() => {
+        subscribeReduxRouter({ store: window.__remixStore, router: window.__remixRouter } as any);
+    }, []);
+
+    return (
+        <ApplicationErrorHandler plugins={plugins}>
+            <Document>{clientModules.getWrappedRoot(<Outlet />)}</Document>
+        </ApplicationErrorHandler>
+    );
+}
+
+export { ErrorBoundary };

package/src/generators/add-entries/files/common/AntStyles.tsx.template

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { createCache as createAntdCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+
+const antdCache = createAntdCache();
+export const styleSheet = extractStyle(antdCache);
+export const AntSytles = ({ children }: { children: React.ReactNode }) => (
+    <StyleProvider cache={antdCache}>{children}</StyleProvider>
+);

package/src/generators/add-entries/files/common/createEmotionCache.ts.template

@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache';
+
+export const defaultCache = createEmotionCache();
+
+export default function createEmotionCache() {
+    return createCache({ key: 'css', prepend: true });
+}

package/src/generators/add-entries/files/common/index.ts.template

@@ -0,0 +1,3 @@
+export * from './AntStyles';
+export * from './createEmotionCache';
+export * from './utils';

package/src/generators/add-entries/files/common/utils.ts.template

@@ -0,0 +1,16 @@
+import { isEmpty } from 'lodash-es';
+
+export function jsonToString(json) {
+    if (isEmpty(json)) {
+        return '';
+    }
+
+    if (Array.isArray(json)) {
+        let arr = json.map((a) => jsonToString(a));
+        return arr.join(' ');
+    }
+
+    const str = JSON.stringify(json);
+    const arr = str.split(',');
+    return Array.isArray(arr) ? arr.join(' ') : str;
+}

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

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

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

@@ -0,0 +1,66 @@
+import { addProjectConfiguration, formatFiles, generateFiles, Tree } from '@nx/devkit';
+import * as path from 'path';
+import { AddEntriesGeneratorSchema } from './schema';
+import * as fs from 'node:fs';
+
+const loadJSON = (path) => {
+    const content = fs.readFileSync(path);
+    return JSON.parse(content as any);
+}
+
+const getFramework = async (projectRoot) => {
+    // const mergeConfigPath = path.join(projectRoot, 'tools', 'mergeConfig.js');
+    // const webConfigPath = path.join(projectRoot, 'app', 'cde-webconfig.json');
+    const configPath = `${projectRoot}/config.json`;
+    
+    try {
+        const json = loadJSON(configPath);
+        return json?.uiFramework;
+    } catch(err) {
+        console.warn('Error while getting UI framework', err.message);
+        return null;
+    }
+}
+
+const resetProject = (rootDir: string) => {
+    if (fs.existsSync(`${rootDir}/project.json`)) {
+        fs.unlinkSync(`${rootDir}/project.json`);
+    }
+    if (fs.existsSync(`${rootDir}/src`)) {
+        fs.rmSync(`${rootDir}/src`, { recursive: true, force: true });
+    }
+}
+
+export async function addEntriesGenerator(tree: Tree, options: AddEntriesGeneratorSchema) {
+    const basePath = process.cwd();
+    const projectRoot = `${basePath}/${options.projectPath}`;
+    const projectSrc = `${options.projectPath}/src`;
+    // const sourcePath = path.join(__dirname, 'entries');
+    try {
+        let framework = await getFramework(projectRoot);
+        if (!framework) {
+            framework = 'antui';
+        }
+        console.log('UI framework specified: ', framework);
+        
+        resetProject(projectRoot);
+        
+        // addProjectConfiguration(tree, framework, {
+        //     root: projectRoot,
+        //     projectType: 'library',
+        //     sourceRoot: projectSrc,
+        //     targets: {},
+        // });
+        
+        generateFiles(tree, path.join(__dirname, 'files'), projectSrc, {});
+        generateFiles(tree, path.join(__dirname, 'entries', framework), projectSrc, options);
+        // await fs.cpSync(path.join(__dirname, 'files'), projectSrc, {recursive: true});
+        // await fs.cpSync(path.join(__dirname, 'entries', framework), projectSrc, {recursive: true});
+        await formatFiles(tree);
+        
+    } catch (err) {
+        console.error('Error while generating entries: ', err);
+    }
+}
+
+export default addEntriesGenerator;

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

@@ -0,0 +1,3 @@
+export interface AddEntriesGeneratorSchema {
+    projectPath: string;
+}

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

@@ -0,0 +1,13 @@
+{
+    "$schema": "https://json-schema.org/schema",
+    "$id": "AddEntries",
+    "title": "",
+    "type": "object",
+    "properties": {
+        "projectPath": {
+            "type": "string",
+            "description": "The project relative path (ex: servers/frontend-server)"
+        }
+    },
+    "required": ["projectPath"]
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './generators/add-entries/generator';
+// export const schema = import('./generators/add-entries/schema.json');

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react",
+        "module": "ESNext",
+        "resolveJsonModule": true,
+        "target": "ES6",
+        "lib": ["es5","es6"],
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true,
+        "rootDir": "src",
+        "outDir": "lib",
+        "declaration": true,
+        "preserveConstEnums": true,
+        "declarationDir": "lib",
+        "skipLibCheck": true
+    },
+    "include": ["src"],
+    "exclude": [
+        "node_modules",
+        "lib",
+        "dist",
+        "rollup.config.mjs"
+    ]
+}