@common-stack/generate-plugin 7.0.4-alpha.0 → 7.0.4-alpha.10

package/src/generators/add-frontend/templates/tools/checkQueryUsage.mjs

@@ -0,0 +1,192 @@
+import fs from 'fs';
+import path from 'path';
+import glob from'glob';
+
+// Regex to find `use<QueryName>Query` calls, capturing query name and arguments
+const queryPattern = /use([A-Za-z0-9]+Query)\(([^)]*)\)/g;
+const fileExtensions = ['.js', '.ts', '.jsx', '.tsx'];
+const excludeFiles = ['react-hooks', 'generated'];
+const basePath = process.cwd();
+
+const findPackageJsonFiles = () => {
+  const monorepoRoot = path.join(basePath, '..', '..');
+  return new Promise((resolve, reject) => {
+    glob(
+      `${monorepoRoot}/+(servers|portable-devices|packages|packages-modules)/**/package.json`,
+      { nodir: true, ignore: '**/node_modules/**' },
+      (err, files) => {
+        if (err) reject(`Unable to scan directory: ${err}`);
+        resolve(files);
+      },
+    );
+  });
+};
+
+// Function to transform componentPath from `lib` to `src` path and handle package names
+const transformComponentPath = (componentPath, packageName) => {
+  return componentPath
+    .replace('/lib/', '/src/')
+    .replace(packageName + '/', '')
+    .replace('.js', '');
+};
+
+// Normalize file paths for consistent comparison (remove extensions and resolve absolute paths)
+const normalizePath = (filePath) => {
+  const resolvedPath = path.resolve(filePath).replace(/\.[jt]sx?$/, ''); // Remove .js, .ts, .jsx, .tsx extensions
+  return resolvedPath;
+};
+
+// Function to extract component paths and queries from routes.json
+async function extractComponentPathsAndQueries(routesFile, packageName) {
+  let componentQueries = {};
+
+  try {
+    const content = await fs.promises.readFile(routesFile, 'utf-8');
+    const routes = JSON.parse(content);
+
+    // Traverse routes to extract componentPath and queries
+    routes.forEach(routeObj => {
+      Object.keys(routeObj).forEach(routeKey => {
+        const route = routeObj[routeKey];
+        if (route.hasComponent && route.componentPath) {
+          const transformedPath = normalizePath(transformComponentPath(route.componentPath, packageName));
+          const queries = Object.keys(route.queries || {});
+          if (queries.length > 0) {
+            componentQueries[transformedPath] = queries;
+          }
+        }
+      });
+    });
+
+    console.log('Extracted components and queries from routes.json:', componentQueries);
+  } catch (err) {
+    console.error(`Error reading routes.json file: ${routesFile}`, err);
+  }
+
+  return componentQueries;
+}
+
+// Function to recursively search for useQuery in files and validate if the file is a data component
+async function checkFiles(dir, componentQueries) {
+  const files = await fs.promises.readdir(dir, { withFileTypes: true });
+
+  for (const file of files) {
+    const fullPath = path.join(dir, file.name);
+
+    if (file.isDirectory()) {
+      // Recurse into subdirectories
+      await checkFiles(fullPath, componentQueries);
+    } else if (fileExtensions.includes(path.extname(file.name)) && !excludeFiles.includes(path.parse(file.name).name)) {
+      await checkForInvalidQueryUsage(fullPath, componentQueries);
+    }
+  }
+}
+
+// Function to extract query details from a match
+const extractQueryDetails = (queryMatch) => {
+  const [fullMatch, queryName, queryArgs] = queryMatch;
+  return {
+    queryName,
+    fullMatch,
+    queryArgs: queryArgs.trim(),
+    isLazyQuery: queryName.endsWith('LazyQuery'),
+    hasCacheOnlyFetchPolicy: queryArgs.includes("fetchPolicy: 'cache-only'"),
+  };
+};
+
+// Function to check for query usage in a file and validate if it is allowed
+async function checkForInvalidQueryUsage(filePath, componentQueries) {
+  try {
+    const content = await fs.promises.readFile(filePath, 'utf-8');
+    let match;
+    const usedQueries = [];
+    const queriesMissingCacheOnly = [];
+    const queriesWithNoArguments = [];
+    const queryNames = [];
+
+    while ((match = queryPattern.exec(content)) !== null) {
+      const queryDetails = extractQueryDetails(match);
+      usedQueries.push(queryDetails);
+      queryNames.push(queryDetails.queryName);
+
+      // Ignore LazyQuery for fetchPolicy check
+      if (!queryDetails.isLazyQuery && !queryDetails.hasCacheOnlyFetchPolicy) {
+        queriesMissingCacheOnly.push(queryDetails.queryName);
+      }
+
+      // Check for queries without arguments
+      if (queryDetails.queryArgs === '') {
+        queriesWithNoArguments.push(queryDetails.queryName);
+      }
+    }
+
+    if (usedQueries.length > 0) {
+      const normalizedFilePath = normalizePath(filePath);
+      const isDataComponent = componentQueries[normalizedFilePath];
+
+      const warnings = [];
+
+      // Warning if a data component has more than 3 queries
+      if (isDataComponent && usedQueries.length > 3) {
+        warnings.push(`Warning: Data component "${filePath}" has more than 3 queries. Consider splitting into multiple data components with a layout component as the parent.`);
+      }
+
+      // Consolidate missing cache-only fetchPolicy warnings
+      if (queriesMissingCacheOnly.length > 0) {
+        warnings.push(`Warning: The following queries are missing fetchPolicy: "cache-only":\n    - ${queriesMissingCacheOnly.join('\n    - ')}`);
+      }
+
+      // Warn for queries without arguments (which could fetch all data)
+      if (queriesWithNoArguments.length > 0) {
+        warnings.push(`Warning: The following queries have no arguments and could fetch all data. Consider narrowing the search and using pagination:\n    - ${queriesWithNoArguments.join('\n    - ')}`);
+      }
+
+      // Warning for non-data components with queries
+      if (!isDataComponent) {
+        warnings.push(`Warning: File "${filePath}" is a non-data component (not listed in routes.json) but is using queries.`);
+      }
+
+      // Display queries first, then display all warnings together
+      if (warnings.length > 0) {
+        console.log('----------------------------------------------------');
+        console.log(`File: ${filePath}`);
+        console.log('Queries:');
+        usedQueries.forEach(query => console.log(`  - ${query.fullMatch}`)); // Display full query details
+        console.log('\nWarnings:');
+        warnings.forEach(warning => console.log(`  - ${warning}`));
+        console.log('----------------------------------------------------\n');
+      }
+    }
+  } catch (err) {
+    console.error(`Error reading file: ${filePath}`, err);
+  }
+}
+
+// Check in a single package
+async function checkPackage(packageDir, packageName) {
+  const routesFile = path.resolve(path.join(packageDir, './lib/routes.json'));
+  const sourceDir = path.resolve(path.join(packageDir, './src'));
+  let componentQueries = {};
+
+  if (fs.existsSync(routesFile)) {
+    console.log(`Extracting component paths and queries from ${routesFile}...`);
+    componentQueries = await extractComponentPathsAndQueries(routesFile, packageName);
+  }
+
+  console.log(`Searching for query usage in files under ${sourceDir}...`);
+  await checkFiles(sourceDir, componentQueries);
+}
+
+// Run the script
+(async () => {
+  console.log('Checking useQuery usage ...');
+
+  const packageJsonFiles = await findPackageJsonFiles();
+  for (const file of packageJsonFiles) {
+    const packageJson = JSON.parse(fs.readFileSync(file, 'utf8'));
+    const packageDir = path.dirname(file);
+    await checkPackage(packageDir, packageJson.name);
+  }
+
+  console.log('Completed checking useQuery usage.');
+})();

package/src/generators/add-frontend/templates/tools/mergeConfig.js

@@ -0,0 +1,35 @@
+import fs from 'fs';
+import path from 'path';
+import { setupConfig } from '@common-stack/rollup-vite-utils/lib/utils/setupConfig.js';
+import { updateFromConfig } from '@common-stack/rollup-vite-utils/lib/rollup/rollupPluginUpdateFromConfig.js';
+const projectConfigPath = path.resolve('./config.json');
+const mergeConfigs = setupConfig(projectConfigPath);
+
+// Ensure the 'app' directory exists
+const appDir = path.resolve('app');
+if (!fs.existsSync(appDir)) {
+    fs.mkdirSync(appDir);
+    console.log(`Created directory: ${appDir}`);
+}
+
+// Write the merged configuration to 'app/finalConfig.json'
+const finalConfigPath = path.resolve(appDir, 'cde-webconfig.json');
+fs.writeFileSync(finalConfigPath, JSON.stringify(mergeConfigs, null, 2));
+console.log(`Merged configuration written to ${finalConfigPath}`);
+
+// Add 'app' to .gitignore if not already present
+const gitignorePath = path.resolve('.gitignore');
+let gitignoreContent = '';
+if (fs.existsSync(gitignorePath)) {
+    gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
+} else {
+    fs.writeFileSync(gitignorePath, '');
+    console.log('Created .gitignore file');
+}
+
+if (!gitignoreContent.includes('app')) {
+    fs.appendFileSync(gitignorePath, '\napp\n');
+    console.log('Added "app" to .gitignore');
+}
+
+updateFromConfig(finalConfigPath);

package/src/generators/add-frontend/templates/tsconfig.base.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2022",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "declaration": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "pretty": true,
+    "removeComments": false,
+    "lib": [
+      "ES2020",
+      "dom",
+      "esnext.asynciterable"
+    ],
+    "typeRoots": [
+      "./typings/*.d.ts",
+      "node_modules/@types"
+    ],
+    "types": [
+      "@types/node",
+      "@types/jest"
+    ]
+  },
+  "include": [
+    "./typings/*.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/src/generators/add-frontend/templates/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+
+    // Vite takes care of building everything, not tsc.
+    "noEmit": true
+  }
+}

package/src/generators/add-frontend/templates/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }

package/src/generators/add-frontend/templates/vite.config.ts.template

@@ -0,0 +1,115 @@
+import { defineConfig } from 'vite';
+import { vitePlugin as remix } from '@remix-run/dev';
+import { dirname, resolve } from 'path';
+import { installGlobals } from '@remix-run/node';
+import { fileURLToPath } from 'url';
+import { defineRoutesConfig } from '@common-stack/rollup-vite-utils/lib/vite-wrappers/json-wrappers.js';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { i18nInternationalizationPlugin } from '@common-stack/rollup-vite-utils/lib/vite-plugins/i18n-internationalization-plugin.js';
+import { performCopyOperations } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/configLoader.js';
+import { loadEnvConfig } from '@common-stack/rollup-vite-utils/lib/preStartup/configLoader/envLoader.js';
+import { cjsInterop } from 'vite-plugin-cjs-interop';
+import { mergeWith } from 'lodash-es';
+import config from './app/cde-webconfig.json' assert { type: 'json' };
+
+// This installs globals such as "fetch", "Response", "Request" and "Headers".
+installGlobals();
+
+const directoryName = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(async ({ isSsrBuild }) => {
+    console.log('--- IS SSR BUILD:', isSsrBuild);
+
+    // Load environment variables from dotenv or other config
+    const dotEnvResult = loadEnvConfig(directoryName);
+
+    // Define environment variables for Vite
+    const envVariables = {
+        __ENV__: JSON.stringify(dotEnvResult?.parsed),
+        __SERVER__: true,
+        __CLIENT__: false,
+        ...Object.fromEntries(
+            Object.entries(config.buildConfig).map(([key, value]) => [
+                key,
+                typeof value === 'string' ? `"${value.replace(/\\/g, '\\\\')}"` : value,
+            ])
+        ),
+    };
+
+    // Define routes configuration
+    const routesConfig = async (defineRoutes) => {
+        // In production, perform required file copy operations
+        if (process.env.NODE_ENV === 'production') {
+            await performCopyOperations(config);
+        }
+
+        // Load metadata for routes
+        let metaJson = null;
+        try {
+            metaJson = await import('./app/sync-meta.json');
+        } catch {
+            console.warn('No sync-meta.json found, continuing without metadata.');
+        }
+
+        // Return routes definition
+        return defineRoutes((routeFn) =>
+            defineRoutesConfig(
+                routeFn,
+                {
+                    routesFileName: 'routes.json',
+                    packages: config.modules,
+                    paths: config.paths,
+                    iconsRepository: config?.iconsRepository,
+                    rootPath: resolve(directoryName, '../..'),
+                    settings: {
+                        _useFutureCommonPackage: true,
+                    },
+                },
+                metaJson
+            )
+        );
+    };
+
+    // Vite configuration
+    const viteConfig = {
+        define: envVariables,
+        plugins: [
+            i18nInternationalizationPlugin({
+                folderName: 'cdm-locales',
+                packages: [...config.modules, ...config.i18n.packages],
+                namespaceResolution: 'basename',
+            }),
+            cjsInterop({
+                dependencies: ['@apollo/client'],
+            }),
+            remix({
+                appDirectory: 'src',
+                routes: routesConfig,
+            }),
+            tsconfigPaths({ ignoreConfigErrors: true }),
+        ],
+        optimizeDeps: {
+            esbuildOptions: {
+                target: 'esnext',
+            },
+        },
+        build: {
+            target: 'esnext',
+        },
+        resolve: {
+            alias: {
+                '@app': resolve(directoryName, 'app'),
+                '@src': resolve(directoryName, 'src'),
+            },
+        },
+    };
+
+    // Deep merge custom Vite config from config.json
+    // to merge Arrays properly need to concat. 
+    const result = mergeWith(config.viteConfig, viteConfig, (objValue, srcValue) => {
+        if (Array.isArray(objValue)) {
+            return objValue.concat(srcValue);
+        }
+    });
+    return result;
+});

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

@@ -0,0 +1,3 @@
+defaults
+not IE 11
+not IE_Mob 11

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

@@ -0,0 +1,3 @@
+node_modules
+dist
+lib

package/src/generators/add-fullstack/files/_eslintrc.js

@@ -0,0 +1,89 @@
+const common = {
+    env: {
+        node: true,
+        es6: true,
+        'jest/globals': true,
+    },
+    plugins: ['prettier', 'jest', 'markdown'],
+    extends: ['airbnb-base', 'prettier', 'plugin:jest/all', 'plugin:json/recommended'],
+    rules: {
+        'jest/unbound-method': 'off',
+        'prettier/prettier': 'error',
+        'jest/no-disabled-tests': 'warn',
+        'jest/no-focused-tests': 'error',
+        'jest/no-identical-title': 'error',
+        'jest/prefer-to-have-length': 'warn',
+        'jest/valid-expect': 'error',
+        'jest/expect-expect': 'off',
+        'jest/prefer-expect-assertions': 'off',
+        'jest/no-test-return-statement': 'off',
+        'import/prefer-default-export': 'off',
+        'import/extensions': 'off',
+        'no-console': 'off',
+        'no-iterator': 'off',
+        'no-restricted-syntax': 'off',
+        'no-await-in-loop': 'off',
+        'consistent-return': 'off',
+        'no-shadow': 'off',
+        'no-unused-vars': 'off',
+        'jsonc/indent': ['error', 2, {}],
+    },
+    globals: {
+        fetch: true,
+        window: true,
+        document: true,
+        __CDN_URL__: true,
+        __DEV__: true,
+        __TEST__: true,
+        __CLIENT__: true,
+        __SERVER__: true,
+        __GRAPHQL_ENDPOINT__: true,
+        __SSR__: true,
+        __PERSIST_GQL__: true,
+        __API_URL__: true,
+        __WEBSITE_URL__: true,
+        __FRONTEND_BUILD_DIR__: true,
+    },
+};
+
+module.exports = {
+    root: true,
+    overrides: [
+        {
+            /*
+        eslint-plugin-markdown only finds javascript code block snippet.
+        For specific spec, refer to https://github.com/eslint/eslint-plugin-markdown
+        */
+            files: ['**/*.js', '**/*.md'],
+            ...common,
+        },
+        {
+            files: ['**/*.ts'],
+            parser: '@typescript-eslint/parser',
+            env: common.env,
+            plugins: [...common.plugins, '@typescript-eslint'],
+            extends: [
+                ...common.extends,
+                'plugin:@typescript-eslint/recommended',
+                'plugin:import/errors',
+                'plugin:import/warnings',
+                'plugin:import/typescript',
+            ],
+            rules: {
+                ...common.rules,
+                '@typescript-eslint/explicit-function-return-type': 'off',
+            },
+            settings: {
+                'import/resolver': {
+                    node: {
+                        extensions: ['.js', '.jsx', '.ts', '.d.ts', '.tsx', '.graphql', '.gql'],
+                    },
+                    typescript: {
+                        // alwaysTryTypes: true,
+                        // paths: './tsconfig.json',
+                    },
+                },
+            },
+        },
+    ],
+};

package/src/generators/add-fullstack/files/_git-crypt/.gitattributes

@@ -0,0 +1,4 @@
+# Do not edit this file.  To specify the files to encrypt, create your own
+# .gitattributes file in the directory where your files are.
+* !filter !diff
+*.gpg binary

package/src/generators/add-fullstack/files/_git-crypt/keys/default/0/49AB3942E38DB928ACF3905EC2DB4383B4A6E5EA.gpg

@@ -0,0 +1 @@
+�
n�'���
�s�U�����5�‰��dyO"�fn�p��S���͢U

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

@@ -0,0 +1,5 @@
+values.secret.json filter=git-crypt diff=git-crypt
+.npmrc filter=git-crypt diff=git-crypt
+values-dev.yaml filter=git-crypt diff=git-crypt
+values-stage.yaml filter=git-crypt diff=git-crypt
+values-prod.yaml filter=git-crypt diff=git-crypt

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

@@ -0,0 +1,65 @@
+dist
+lib
+.nx
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# remove unwanted
+.expo 
+.drawio-chrome
+
+# Spinjs cache
+.cache
+.awcache
+.nx
+
+# env
+*.env
+
+# Jest Env
+globalConfig.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.sqlite3
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+.build
+build
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+.dist
+
+# ignore temp created for pushing prod changes to devleop
+lerna-temp.json
+# IDE 
+.idea
+*.DS_Store
+.DS_Store
+dump.rdb
+v8-compile-cache-0

package/src/generators/add-fullstack/files/_husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged 

package/src/generators/add-fullstack/files/_husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx commitizen --hook || true 

package/src/generators/add-fullstack/files/_markdownlint.json

@@ -0,0 +1,6 @@
+{
+    "default": true,
+    "MD013": false,
+    "MD042": false,
+    "MD033": false
+}

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

@@ -0,0 +1,5 @@
+node_modules
+dist
+lib
+.git
+CHANGELOG.md

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

@@ -0,0 +1,2 @@
+email=none@cdmbase.com
+//registry.npmjs.org/:_authToken=

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

@@ -0,0 +1,8 @@
+**/fixtures/**
+**/test/**
+**/__tests__/**
+**/__mocks__/**
+**/__integration__/**
+**/__fixtures__/**
+**/*.spec.ts
+**/*.test.ts

package/src/generators/add-fullstack/files/lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    '*.{js,jsx,ts,tsx,json,md}': ['prettier --write', 'git add'],
-    // '*.{ts,tsx}': ['eslint --fix'], // this can be tested
+    '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
+    '*.{json,md}': ['prettier --write'],
     'package.json': ['sort-package-json', 'prettier --write'],
 };