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

package/.eslintrc.json

@@ -0,0 +1,32 @@
+{
+    "extends": ["../../.eslintrc.js"],
+    "ignorePatterns": ["!**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": ["*.json"],
+            "parser": "jsonc-eslint-parser",
+            "rules": {
+                "@nx/dependency-checks": "error"
+            }
+        },
+        {
+            "files": ["./package.json", "./generators.json"],
+            "parser": "jsonc-eslint-parser",
+            "rules": {
+                "@nx/nx-plugin-checks": "error"
+            }
+        }
+    ]
+}

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [5.0.2-alpha.4](https://github.com/cdmbase/common-stack/compare/v5.0.2-alpha.3...v5.0.2-alpha.4) (2024-07-23)
+
+**Note:** Version bump only for package @common-stack/generate-plugin
+
+## [5.0.2-alpha.3](https://github.com/cdmbase/common-stack/compare/v5.0.2-alpha.2...v5.0.2-alpha.3) (2024-07-23)
+
+**Note:** Version bump only for package @common-stack/generate-plugin
+
+## [5.0.2-alpha.2](https://github.com/cdmbase/common-stack/compare/v5.0.2-alpha.1...v5.0.2-alpha.2) (2024-07-20)
+
+**Note:** Version bump only for package modal-ui

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2017 CDMBase LLC.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# generate-plugin
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build generate-plugin` to build the library.
+
+## Running unit tests
+
+Run `nx test generate-plugin` to execute the unit tests via [Jest](https://jestjs.io).

package/generators.json

@@ -0,0 +1,9 @@
+{
+    "generators": {
+        "add-entries": {
+            "factory": "./lib/generators/add-entries/generator.cjs",
+            "schema": "./lib/generators/add-entries/schema.json",
+            "description": "add-entries generator"
+        }
+    }
+}

package/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+    displayName: '@common-stack/generate-plugin',
+    preset: '../../jest.preset.js',
+    transform: {
+        '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+    },
+    moduleFileExtensions: ['ts', 'js', 'html'],
+    coverageDirectory: '../../coverage/@common-stack/generate-plugin',
+};

package/lib/generators/add-entries/entries/antui/entry.client.tsx.template

@@ -0,0 +1,100 @@
+/**
+ * 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 { createCache, StyleProvider } from '@ant-design/cssinjs';
+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 { CacheProvider } from '@emotion/react';
+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 createEmotionCache from '@app/frontend-stack-react/entries/common/createEmotionCache.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);
+const antCache = createCache();
+const cache = createEmotionCache();
+
+(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>
+                        <CacheProvider value={cache}>
+                            <StyleProvider cache={antCache}>
+                                <ReduxProvider store={store}>
+                                    <SlotFillProvider>
+                                        <InversifyProvider container={container} modules={clientModules}>
+                                            <PersistGate loading={null} persistor={persistor}>
+                                                {() => (
+                                                    <ApolloProvider client={client}>
+                                                        <RemixBrowser />
+                                                    </ApolloProvider>
+                                                )}
+                                            </PersistGate>
+                                        </InversifyProvider>
+                                    </SlotFillProvider>
+                                </ReduxProvider>
+                            </StyleProvider>
+                        </CacheProvider>
+                    </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/lib/generators/add-entries/entries/antui/entry.server.tsx.template

@@ -0,0 +1,254 @@
+/**
+ * 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 { createCache as createAntdCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { CacheProvider } from '@emotion/react';
+import { renderStylesToNodeStream } from '@emotion/server';
+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 createEmotionCache from '@app/frontend-stack-react/entries/common/createEmotionCache';
+import type { IAppLoadContext } from '@common-stack/client-core';
+
+const ABORT_DELAY = 5_000;
+const antdCache = createAntdCache();
+const cache = createEmotionCache();
+
+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}>
+                    <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>
+            ) 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 styleSheet = extractStyle(antdCache);
+
+                    const transform = new ConstantsTransform(fills, apolloState, reduxState, styleSheet);
+
+                    responseHeaders.set('Content-Type', 'text/html');
+
+                    resolve(
+                        new Response(stream, {
+                            headers: responseHeaders,
+                            status: responseStatusCode,
+                        }),
+                    );
+
+                    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/lib/generators/add-entries/entries/antui/root.tsx.template

@@ -0,0 +1,107 @@
+import 'reflect-metadata';
+import * as React from 'react';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, 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';
+import { ConfigProvider } from 'antd';
+// @ts-ignore
+import clientModules, { plugins } from '@app/frontend-stack-react/modules.js';
+// @ts-ignore
+import { useChangeLanguage } from 'remix-i18next/react';
+import { useTranslation } from 'react-i18next';
+// @ts-ignore
+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';
+
+export const loader = async ({ request }) => {
+    const locale = await i18next.getLocale(request);
+    return json({
+        __ENV__: publicEnv,
+        locale,
+    });
+};
+
+export const handle = {
+    i18n: 'common',
+};
+
+export function shouldRevalidate(params: any) {
+    return params.defaultShouldRevalidate && params.currentUrl.pathname !== params.nextUrl.pathname;
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+    const data = useLoaderData<{ locale: any}>();
+    const locale = data?.locale;
+
+    const { i18n } = useTranslation();
+
+    useChangeLanguage(locale);
+
+    React.useEffect(() => {
+        subscribeReduxRouter({ store: (window as any).__remixStore, router: window.__remixRouter } as any);
+    }, []);
+
+    const getConstants = () => {
+        if (typeof window === 'undefined') {
+            return (
+                <>
+                    <script
+                        dangerouslySetInnerHTML={{
+                            __html: `window.__ENV__ = ${JSON.stringify((data as any)?.__ENV__)}`,
+                        }}
+                    />
+                    <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>
+                    <script>window.__APOLLO_STATE__=[__APOLLO_STATE__]</script>
+                    <script>window.__PRELOADED_STATE__=[__PRELOADED_STATE__]</script>
+                    <script>window.__SLOT_FILLS__=[__SLOT_FILLS__]</script>
+                    <script
+                        dangerouslySetInnerHTML={{
+                            __html: `if (global === undefined) { var global = window; }`,
+                        }}
+                    />
+                </>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <html lang={locale} dir={i18n.dir()}>
+            <head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <Meta />
+                <Links />
+                {typeof window === 'undefined' ? `[__STYLESHEET__]` : ''}
+            </head>
+            <body>
+                <PluginArea />
+                {clientModules.getWrappedRoot(children)}
+                <ScrollRestoration />
+                <Scripts />
+                {getConstants()}
+            </body>
+        </html>
+    );
+}
+
+export default function App() {
+    return (
+        <ApplicationErrorHandler plugins={plugins}>
+            <ConfigProvider>
+                <Outlet />
+            </ConfigProvider>
+        </ApplicationErrorHandler>
+    );
+}
+
+export { ErrorBoundary };

package/lib/generators/add-entries/entries/chakraui/context.tsx.template

@@ -0,0 +1,20 @@
+// context.tsx
+import React, { createContext } from 'react';
+
+export interface ServerStyleContextData {
+  key: string;
+  ids: Array<string>;
+  css: string;
+}
+
+export const ServerStyleContext = createContext<
+  ServerStyleContextData[] | null
+>(null);
+
+export interface ClientStyleContextData {
+  reset: () => void;
+}
+
+export const ClientStyleContext = createContext<ClientStyleContextData | null>(
+  null,
+);