@common-stack/generate-plugin 6.0.8-alpha.5 → 6.0.8-alpha.50

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

@@ -6,8 +6,6 @@ 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
@@ -27,12 +25,10 @@ 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);
-const persistor = persistStore(store);
 
 (window as any).__remixStore = store;
 removeUniversalPortals((window as any).__SLOT_FILLS__ || []);
@@ -60,6 +56,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 +86,19 @@ 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}>
+                                    <RemixBrowser />
+                                </InversifyProvider>
+                            </SlotFillProvider>
+                        </ReduxProvider>
+                    </ApolloProvider>
+                </ClientCacheProvider>
+            </LocaleProvider>
         </I18nextProvider>,
         // </StrictMode>,
     );

package/{lib/generators/add-frontend/frameworks/chakraui → src/generators/add-frontend/frameworks/chakraui/src}/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 → src/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-frontend/frameworks/tailwindui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/{lib/generators/add-frontend/frameworks/tailwindui → src/generators/add-frontend/frameworks/tailwindui/src}/entry.client.tsx.template

@@ -12,8 +12,6 @@ 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';
@@ -31,7 +29,6 @@ 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__ || []);
@@ -64,13 +61,9 @@ async function hydrate() {
                         <ReduxProvider store={store}>
                             <SlotFillProvider>
                                 <InversifyProvider container={container} modules={clientModules}>
-                                    <PersistGate loading={null} persistor={persistor}>
-                                        {() => (
-                                            <ApolloProvider client={client}>
-                                                <RemixBrowser />
-                                            </ApolloProvider>
-                                        )}
-                                    </PersistGate>
+                                    <ApolloProvider client={client}>
+                                        <RemixBrowser />
+                                    </ApolloProvider>
                                 </InversifyProvider>
                             </SlotFillProvider>
                         </ReduxProvider>

package/src/generators/add-frontend/frameworks/tailwindui/tailwind.config.ts.template

@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    "./src/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+

package/src/generators/add-frontend/generator.test.ts

@@ -0,0 +1,79 @@
+/* eslint-disable jest/no-hooks */
+/* eslint-disable import/no-extraneous-dependencies */
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { readJson, Tree, writeJson } from '@nx/devkit';
+import * as devkit from '@nx/devkit';
+import { addFrontendGenerator } from './generator';
+import { FRAMEWORK_ANTUI } from '../../common/constants';
+
+describe('addFrontendGenerator', () => {
+    let tree: Tree;
+    const options = { name: 'demo', framework: FRAMEWORK_ANTUI, ns: '', directory: '' };
+
+    const projectRoot = 'frontend-demo-server';
+
+    beforeEach(() => {
+        // Create an in-memory workspace
+        tree = createTreeWithEmptyWorkspace();
+
+        // Stub out generateFiles so we don't trigger file reading from the real templates folders.
+        jest.spyOn(devkit, 'generateFiles').mockImplementation(() => {});
+    });
+
+    it('should add missing dependencies and update config.json for antui', async () => {
+        // Simulate an existing package.json with no dependencies.
+        writeJson(tree, `${projectRoot}/package.json`, {
+            name: 'demo',
+            dependencies: {},
+        });
+        // Simulate an existing config.json with an empty modules array.
+        writeJson(tree, `${projectRoot}/config.json`, {
+            modules: [],
+        });
+
+        await addFrontendGenerator(tree, options);
+
+        // Read and verify package.json updates.
+        const pkg = readJson(tree, `${projectRoot}/package.json`);
+
+        expect(pkg.name).toBe('frontend-demo-server');
+        // Check that the key dependency is added.
+        expect(pkg.dependencies['@admin-layout/ant-design-pro']).toBeDefined();
+        expect(pkg.dependencies['@ant-design/static-style-extract']).toBeDefined();
+        expect(pkg.dependencies['@emotion/react']).toBeDefined();
+        expect(pkg.dependencies['antd']).toBeDefined();
+        expect(pkg).toMatchSnapshot();
+
+        // Read and verify config.json updates.
+        const config = readJson(tree, `${projectRoot}/config.json`);
+
+        expect(config.uiFramework).toBe(FRAMEWORK_ANTUI);
+        // Ensure that the module is added only once.
+        expect(config.modules.includes('@admin-layout/ant-design-pro')).toBeTruthy();
+    });
+
+    it('should not override an already existing dependency version', async () => {
+        // Create an initial package.json that already defines a version for a dependency.
+        writeJson(tree, `${projectRoot}/package.json`, {
+            name: 'demo',
+            dependencies: {
+                antd: '1.0.0', // Already defined version
+            },
+        });
+        // Create a minimal config.json.
+        writeJson(tree, `${projectRoot}/config.json`, {
+            modules: [],
+        });
+
+        await addFrontendGenerator(tree, options);
+
+        const pkg = readJson(tree, `${projectRoot}/package.json`);
+
+        // Make sure the dependency already there was not overridden.
+        expect(pkg.dependencies.antd).toEqual('1.0.0');
+        // Ensure other expected dependencies have been added.
+        expect(pkg.dependencies['@admin-layout/ant-design-pro']).toBeDefined();
+        expect(pkg).toMatchSnapshot();
+    });
+});

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

@@ -1,18 +1,88 @@
-import { addProjectConfiguration, formatFiles, generateFiles, Tree, updateJson } from '@nx/devkit';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-use-before-define */
+import { formatFiles, generateFiles, Tree, updateJson } from '@nx/devkit';
 import * as path from 'path';
 import * as fs from 'node:fs';
 import { deepMerge } from '@common-stack/rollup-vite-utils/lib/utils/setupConfig.cjs';
 import { AddFrontendGeneratorSchema } from './schema';
 import { isValid, getValid } from '../../utils';
 import { FRAMEWORK_ANTUI, FRAMEWORK_CHAKRAUI, FRAMEWORK_TAILWINDUI } from '../../common/constants';
+import pluginPkg from '../../common/package-releases/package.json' assert { type: 'json' };
 
 const DEFAULT_FRAMEWORK = FRAMEWORK_ANTUI;
 const DEFAULT_SERVER_NAME = 'frontend-server';
 
+/**
+ * Helper to retrieve a package version from pluginPkg.
+ * Throws an error if a version for packageName is not defined.
+ */
+function getPackageVersion(packageName: string): string {
+    // Read the generator's package.json. This file is updated using ncu,
+    // so the generator always picks up the latest dependency versions.
+    // const pluginPkgPath = path.resolve(__dirname, '../../common/package-releases/package.json');
+    // const pluginPkg = JSON.parse(fs.readFileSync(pluginPkgPath, 'utf-8'));
+
+    const version =
+        (pluginPkg.dependencies && pluginPkg.dependencies[packageName]) ||
+        (pluginPkg.devDependencies && pluginPkg.devDependencies[packageName]);
+
+    if (!version) {
+        throw new Error(`Version for package "${packageName}" not found in plugin package.json.`);
+    }
+    return version;
+}
+
+/**
+ * Helper to map an array of dependency names to an object where each key is a dependency
+ * and its value is obtained via getPackageVersion().
+ */
+function mapDependencies(depNames: string[]): Record<string, string> {
+    return depNames.reduce(
+        (acc, name) => {
+            acc[name] = getPackageVersion(name);
+            return acc;
+        },
+        {} as Record<string, string>,
+    );
+}
+
+/**
+ * A mapping of frameworks to dependency definitions.
+ * Each dependency's version is obtained dynamically from pluginPkg using a helper.
+ */
+const frameworkDependencyMap: {
+    [key: string]: { dependencies?: Record<string, string>; devDependencies?: Record<string, string> };
+} = {
+    [FRAMEWORK_ANTUI]: {
+        dependencies: mapDependencies([
+            '@admin-layout/ant-design-pro',
+            '@ant-design/static-style-extract',
+            '@emotion/react',
+            '@emotion/server',
+            '@emotion/css',
+            '@emotion/styled',
+            'antd',
+        ]),
+    },
+    [FRAMEWORK_CHAKRAUI]: {
+        dependencies: mapDependencies([
+            '@chakra-ui/react',
+            'framer-motion',
+            '@emotion/react',
+            '@emotion/server',
+            '@emotion/css',
+            '@emotion/styled',
+        ]),
+    },
+    [FRAMEWORK_TAILWINDUI]: {
+        devDependencies: mapDependencies(['tailwindcss', 'postcss', 'autoprefixer']),
+    },
+};
+
 export async function addFrontendGenerator(tree: Tree, options: AddFrontendGeneratorSchema) {
     const projectName = isValid(options.name) ? `frontend-${getValid(options.name)}-server` : DEFAULT_SERVER_NAME;
-    const configs: any = {...options, name: projectName};
-
+    const configs: any = { ...options, name: projectName };
     return await generateFrontend(tree, configs);
 }
 
@@ -20,65 +90,60 @@ export const generateFrontend = async (tree: Tree, options: any) => {
     let projectName = getValid(options.name) ?? DEFAULT_SERVER_NAME;
     const projectRoot = isValid(options.directory) ? `${getValid(options.directory)}/${projectName}` : projectName;
     projectName = isValid(options.ns) ? `${getValid(options.ns)}-${projectName}` : projectName;
-    const projectSrc = `${projectRoot}/src`;
-    
+
     const framework = getValid(options.framework) ?? DEFAULT_FRAMEWORK;
     console.log('UI framework specified: ', framework);
-    
-    // resetProject(`${basePath}/${projectRoot}`);
-    
-    // addProjectConfiguration(tree, framework, {
-    //     root: projectRoot,
-    //     projectType: 'library',
-    //     sourceRoot: projectSrc,
-    //     targets: {},
-    // });
-    
+
     generateFiles(tree, path.join(__dirname, 'templates'), projectRoot, {});
-    generateFiles(tree, path.join(__dirname, 'frameworks', framework), projectSrc, options);
+    generateFiles(tree, path.join(__dirname, 'frameworks', framework), projectRoot, options);
+
     updateJson(tree, `${projectRoot}/package.json`, (packageJson) => {
-        packageJson['name'] = projectName;
-        if (framework === FRAMEWORK_ANTUI) {
-            packageJson['dependencies']["@admin-layout/ant-design-pro"] = "latest";
-            packageJson['dependencies']["@ant-design/static-style-extract"] = "^1.0.2";
-            packageJson['dependencies']["@emotion/react"] = "^11.10.0";
-            packageJson['dependencies']["@emotion/server"] = "^11.10.0"; 
-            packageJson['dependencies']["@emotion/css"] = "^11.10.0";
-            packageJson['dependencies']["@emotion/styled"] = "^11.10.4";
-            packageJson['dependencies']["antd"] = "^5.14.0";
-        } else if (framework === FRAMEWORK_CHAKRAUI) {
-            packageJson['dependencies']["@chakra-ui/react"] = "^2.8.2";
-            packageJson['dependencies']["framer-motion"] = "^11.5.4"; 
-            packageJson['dependencies']["@emotion/react"] = "^11.10.0";
-            packageJson['dependencies']["@emotion/server"] = "^11.10.0"; 
-            packageJson['dependencies']["@emotion/css"] = "^11.10.0";
-            packageJson['dependencies']["@emotion/styled"] = "^11.10.4";
-
-        } else if (framework === FRAMEWORK_TAILWINDUI) {
-            packageJson['devDependencies']["tailwindcss"] = "^3.4.10";
-            packageJson['devDependencies']["postcss"] = "^8.4.41";
-            packageJson['devDependencies']["autoprefixer"] = "^10.4.20";
+        packageJson.name = projectName;
+        packageJson.dependencies = packageJson.dependencies || {};
+        packageJson.devDependencies = packageJson.devDependencies || {};
+
+        const dependencyOverrides = frameworkDependencyMap[framework] || {};
+
+        if (dependencyOverrides.dependencies) {
+            Object.entries(dependencyOverrides.dependencies).forEach(([pkg, version]) => {
+                if (!packageJson.dependencies[pkg]) {
+                    packageJson.dependencies[pkg] = version;
+                }
+            });
         }
-        
+
+        if (dependencyOverrides.devDependencies) {
+            Object.entries(dependencyOverrides.devDependencies).forEach(([pkg, version]) => {
+                if (!packageJson.devDependencies[pkg]) {
+                    packageJson.devDependencies[pkg] = version;
+                }
+            });
+        }
+
         return packageJson;
     });
+
     updateJson(tree, `${projectRoot}/config.json`, (configJson) => {
-        configJson['uiFramework'] = framework;
+        configJson.uiFramework = framework;
         if (framework === FRAMEWORK_ANTUI) {
-            configJson['modules'].push("@admin-layout/ant-design-pro");
+            if (!configJson.modules.includes('@admin-layout/ant-design-pro')) {
+                configJson.modules.push('@admin-layout/ant-design-pro');
+            }
         } else if (framework === FRAMEWORK_CHAKRAUI) {
-            configJson['modules'].push("@admin-layout/chakra-design-pro");
+            if (!configJson.modules.includes('@admin-layout/chakra-design-pro')) {
+                configJson.modules.push('@admin-layout/chakra-design-pro');
+            }
         }
 
         if (options['config.json']) {
-            const addtionalConfigs = options['config.json'];
-            configJson = deepMerge(configJson, addtionalConfigs);
+            const additionalConfigs = options['config.json'];
+            configJson = deepMerge(configJson, additionalConfigs);
         }
 
         return configJson;
     });
 
     await formatFiles(tree);
-}
+};
 
 export default addFrontendGenerator;

package/src/generators/add-fullstack/files/Jenkinsfile

@@ -29,7 +29,7 @@ pipeline {
     // by default first value of the choice will be choosen
     choice choices: ['auto', 'force'], description: 'Choose merge strategy', name: 'NPM_PUBLISH_STRATEGY'
     choice choices: ['yarn', 'npm'], description: 'Choose build strategy', name: 'BUILD_STRATEGY'
-    choice choices: ['0.7.11','0.7.9', '0.6.0'], description: 'Choose Idestack chart version', name: 'IDESTACK_CHART_VERSION'
+    choice choices: ['0.7.12','0.7.11', '0.6.0'], description: 'Choose Idestack chart version', name: 'IDESTACK_CHART_VERSION'
     choice choices: ['nodejs20', 'nodejs18', 'nodejs22'], description: 'Choose NodeJS version', name: 'NODEJS_TOOL_VERSION'    
     choice choices: ['buildOnly', 'buildAndTest', 'buildAndPublish',  'mobileBuild', 'mobilePreview', 'mobilePreviewLocal', 'mobilePreviewSubmit', 'mobileProd', 'mobileProdSubmit', 'devDeployOnly', 'stageDeploy', 'stageDeployOnly', 'prodDeploy', 'prodDeployOnly', 'allenv'], description: 'Where to deploy micro services?', name: 'ENV_CHOICE'
     choice choices: ['all', 'ios', 'android' ], description: 'Mobile type if it is mobile build?', name: 'MOBILE_CHOICE'
@@ -646,7 +646,7 @@ def buildAndPushDockerImage(server, name, version) {
   } else {
     sh """
       npx lerna exec --scope=*${server} ${params.BUILD_STRATEGY} run ${env.BUILD_COMMAND};
-
+      npx lerna exec --scope=*${server} ${params.BUILD_STRATEGY} copycommon
       docker buildx create --name ${server} --driver docker-container --use
       docker buildx inspect ${server} --bootstrap