@rxap/plugin-angular 20.0.1-dev.1 → 20.0.1-dev.11

package/src/generators/init-application/update-project-targets.ts

@@ -0,0 +1,229 @@
+import {
+  ProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import {
+  DeleteEmptyProperties,
+  unique,
+} from '@rxap/utilities';
+import {
+  CoerceAssets,
+  CoerceTarget,
+  GetProjectSourceRoot,
+  Strategy,
+} from '@rxap/workspace-utilities';
+import { join } from 'path';
+import { ProjectI18nConfiguration } from './project-i18n-configuration';
+import { InitApplicationGeneratorSchema } from './schema';
+
+/**
+ * Compare two budget strings
+ *
+ * @param a
+ * @param b
+ * @returns -1 if a < b, 0 if a === b, 1 if a > b
+ */
+function compareBudget(a: string, b: string): -1 | 0 | 1 {
+  const aUnit = a.slice(-2);
+  const bUnit = b.slice(-2);
+  const aNumber = Number(a.slice(0, -2));
+  const bNumber = Number(b.slice(0, -2));
+  if (aUnit === bUnit) {
+    return aNumber < bNumber ? -1 : aNumber > bNumber ? 1 : 0;
+  }
+  if (aUnit === 'kb') {
+    return bUnit === 'mb' ? -1 : 1;
+  }
+  if (aUnit === 'mb') {
+    return bUnit === 'kb' ? 1 : -1;
+  }
+  return 0;
+}
+
+export function updateProjectTargets(
+  tree: Tree,
+  projectName: string,
+  project: ProjectConfiguration & { i18n?: ProjectI18nConfiguration },
+  options: InitApplicationGeneratorSchema,
+) {
+  const projectSourceRoot = GetProjectSourceRoot(tree, projectName);
+
+  project.targets ??= {};
+
+  if (!project.targets['build']) {
+    throw new Error(`The project '${ project.name }' has no build target`);
+  }
+
+  if (!options.skipDocker) {
+    if (project.targets['docker']) {
+      project.targets['docker'].options ??= {};
+      project.targets['docker'].options.dockerfile ??= options.moduleFederation === 'remote' ?
+                                                       join(project.sourceRoot!, 'Dockerfile') :
+                                                       'shared/angular/Dockerfile';
+    }
+  }
+
+  CoerceTarget(project, 'serve', {
+    options: {
+      proxyConfig: 'shared/angular/proxy.conf.json',
+    },
+  }, Strategy.OVERWRITE);
+
+  if (project.targets['extract-i18n']) {
+    if (options.i18n) {
+      options.languages ??= [];
+      if (options.languages.length === 0) {
+        options.languages.push('en');
+      }
+      project.targets['build'].configurations ??= {};
+      if (options.overwrite) {
+        project.targets['build'].configurations.production.localize = options.languages;
+      } else {
+        if (typeof project.targets['build'].configurations.production.localize === 'boolean') {
+          project.targets['build'].configurations.production.localize = options.languages;
+        }
+        project.targets['build'].configurations.production.localize ??= [];
+        project.targets['build'].configurations.production.localize.push(...options.languages);
+        project.targets['build'].configurations.production.localize
+          = project.targets['build'].configurations.production.localize.filter(unique());
+      }
+      project.i18n ??= {};
+      project.i18n.sourceLocale ??= 'en-US';
+      project.i18n.locales ??= {};
+      for (const language of options.languages) {
+        project.i18n.locales[language] ??= {
+          translation: `${ project.sourceRoot }/i18n/${ language }.xlf`,
+          baseHref: `${ language }/`,
+        };
+      }
+    }
+    if (!project.sourceRoot) {
+      throw new Error(`The project ${ project.name } has no source root`);
+    }
+    project.targets['extract-i18n'].options ??= {};
+    project.targets['extract-i18n'].options.format = 'xliff2';
+    project.targets['extract-i18n'].options.outputPath = join(project.sourceRoot, 'i18n');
+    if (options.localazy && options.localazyReadKey) {
+      project.targets['localazy-download'] ??= {
+        options: DeleteEmptyProperties({
+          readKey: options.localazyReadKey,
+        }),
+      };
+    }
+  }
+  CoerceTarget(project, 'build', {
+    options: {
+      sourceMap: true,
+    },
+    configurations: {
+      production: {
+        fileReplacements: [
+          {
+            replace: `${ project.sourceRoot }/environments/environment.ts`,
+            with: `${ project.sourceRoot }/environments/environment.prod.ts`,
+          },
+        ],
+      },
+    },
+  }, Strategy.OVERWRITE);
+  project.targets['build'].options ??= {};
+  project.targets['build'].options.sourceMap = true;
+  project.targets['build'].options.assets ??= [];
+  project.targets['build'].options.scripts ??= [];
+  if (options.moduleFederation !== 'remote') {
+    if (!project.targets['build'].options.scripts.includes('node_modules/marked/marked.min.js')) {
+      project.targets['build'].options.scripts.push('node_modules/marked/marked.min.js');
+    }
+  }
+  CoerceAssets(project.targets['build'].options.assets, [
+    `${projectSourceRoot}/assets`,
+    {
+      glob: '*',
+      input: 'shared/angular/assets/',
+      output: '.',
+    },
+    {
+      glob: 'mdi.svg',
+      input: './node_modules/@mdi/angular-material',
+      output: '.',
+    },
+  ]);
+  // ensure the property polyfills are defined
+  project.targets['build'].options.polyfills ??= [];
+  if (!Array.isArray(project.targets['build'].options.polyfills)) {
+    // ensure the property is an array
+    project.targets['build'].options.polyfills = [ 'zone.js' ];
+  }
+  // always add the localize init polyfill as some rxap components use the i18n directive
+  CoerceAssets(project.targets['build'].options.polyfills, [ '@angular/localize/init' ]);
+  if (options.serviceWorker) {
+    if (!project.sourceRoot) {
+      throw new Error(`The project ${ project.name } has no source root`);
+    }
+    CoerceAssets(project.targets['build'].options.assets, [
+      join(project.sourceRoot, 'manifest.webmanifest'),
+    ]);
+    project.targets['build'].configurations ??= {};
+    project.targets['build'].configurations.production ??= {};
+    project.targets['build'].configurations.production.serviceWorker = true;
+    project.targets['build'].configurations.production.ngswConfigPath ??= 'shared/angular/ngsw-config.json';
+  }
+  project.targets['build'].configurations ??= {};
+  project.targets['build'].configurations.production ??= {};
+  project.targets['build'].configurations.production.budgets ??= [];
+  const budget = project.targets['build'].configurations.production.budgets.find((b: any) => b.type === 'initial');
+  const defaultWarning = '2mb';
+  const defaultError = '5mb';
+  if (!budget) {
+    project.targets['build'].configurations.production.budgets.push({
+      type: 'initial',
+      maximumWarning: defaultWarning,
+      maximumError: defaultError,
+    });
+  } else {
+    if (options.overwrite) {
+      budget.maximumWarning = defaultWarning;
+      budget.maximumError = defaultError;
+    } else {
+      if (compareBudget(budget.maximumWarning, defaultWarning) === -1) {
+        budget.maximumWarning = defaultWarning;
+      }
+      if (compareBudget(budget.maximumError, defaultError) === -1) {
+        budget.maximumError = defaultError;
+      }
+    }
+  }
+
+  if (options.incrementalBuild) {
+    project.targets['build'].executor = '@nx/angular:webpack-browser';
+    project.targets['build'].options.buildLibsFromSource = false;
+    CoerceTarget(project, 'serve-static', {
+      executor: '@nx/web:file-server',
+      options: {
+        proxyUrl: 'https://127-0-0-1.nip.io:8443',
+      },
+      configurations: {
+        production: {
+          buildTarget: `${ projectName }:build:production`,
+        },
+        development: {
+          buildTarget: `${ projectName }:build:development`,
+        },
+      },
+    });
+  }
+
+  if (options.deploy) {
+    switch (options.deploy) {
+      case 'web3-storage':
+        if (options.i18n) {
+          CoerceTarget(project, 'i18n-index-html', {});
+        }
+        CoerceTarget(project, 'deploy', {
+          executor: '@rxap/plugin-web3-storage:deploy',
+          outputs: [ 'dist/{projectRoot}/ipfs-cid.txt' ],
+        }, Strategy.OVERWRITE);
+        break;
+    }
+  }
+}

package/src/generators/init-application/update-tags.ts

@@ -0,0 +1,30 @@
+import { ProjectConfiguration } from '@nx/devkit';
+import { CoerceProjectTags } from '@rxap/workspace-utilities';
+import { InitApplicationGeneratorSchema } from './schema';
+
+export function updateTags(project: ProjectConfiguration, options: InitApplicationGeneratorSchema) {
+  const tags = [ 'frontend', 'user-interface' ];
+
+  if (options.i18n) {
+    tags.push('i18n');
+  }
+
+  if (options.localazy) {
+    tags.push('localazy');
+  }
+
+  if (options.serviceWorker) {
+    tags.push('service-worker');
+  }
+
+  if (options.sentry) {
+    tags.push('sentry');
+  }
+
+  if (options.moduleFederation) {
+    tags.push('module-federation');
+    tags.push(`mfe:${ options.moduleFederation }`);
+  }
+
+  CoerceProjectTags(project, tags);
+}

package/src/generators/init-application/update-target-defaults.ts

@@ -0,0 +1,43 @@
+import {
+  readNxJson,
+  Tree,
+  updateNxJson,
+} from '@nx/devkit';
+import {
+  CoerceTarget,
+  CoerceTargetDefaults,
+  CoerceTargetDefaultsDependency,
+  CoerceTargetDefaultsInput,
+  Strategy,
+} from '@rxap/workspace-utilities';
+import { InitApplicationGeneratorSchema } from './schema';
+
+export function updateTargetDefaults(tree: Tree, options: InitApplicationGeneratorSchema) {
+  const nxJson = readNxJson(tree);
+
+  if (!nxJson) {
+    throw new Error('NxJson not found');
+  }
+
+  CoerceTargetDefaults(nxJson, '@angular-devkit/build-angular:browser', {
+    cache: true,
+    dependsOn: [ '^index-export', 'index-export', '^build', 'localazy-download' ],
+    inputs: [ 'production', '^production' ],
+  }, Strategy.OVERWRITE);
+
+  CoerceTargetDefaults(nxJson, '@nx/angular:webpack-browser', {
+    cache: true,
+    dependsOn: [ '^index-export', 'index-export', '^build', 'localazy-download' ],
+    inputs: [
+      'production',
+      '^production',
+      {
+        'env': 'NX_MF_DEV_SERVER_STATIC_REMOTES',
+      },
+    ],
+  }, Strategy.OVERWRITE);
+
+  CoerceTargetDefaultsDependency(nxJson, 'deploy', 'i18n-index-html');
+
+  updateNxJson(tree, nxJson);
+}

package/src/generators/init-application/update-ts-config.ts

@@ -0,0 +1,31 @@
+import { Tree } from '@nx/devkit';
+import { CoerceArrayItems } from '@rxap/utilities';
+import {
+  GetProjectRoot,
+  UpdateTsConfigJson,
+} from '@rxap/workspace-utilities';
+
+export function updateTsConfig(tree: Tree, projectName: string) {
+
+  const projectRoot = GetProjectRoot(tree, projectName);
+  for (const tsConfigName of [ 'app', 'editor', 'spec' ]) {
+    UpdateTsConfigJson(tree, tsConfig => {
+      tsConfig.compilerOptions ??= {};
+      tsConfig.compilerOptions.types ??= [];
+      if (!tsConfig.compilerOptions.types.includes('@angular/localize')) {
+        tsConfig.compilerOptions.types.push('@angular/localize');
+      }
+      if ([ 'app', 'spec' ].includes(tsConfigName)) {
+        tsConfig.exclude ??= [];
+        CoerceArrayItems(tsConfig.exclude, [
+          'src/**/*.stories.ts',
+          'src/**/*.cy.ts',
+        ]);
+      }
+    }, {
+      infix: tsConfigName,
+      basePath: projectRoot,
+    });
+  }
+
+}

package/src/generators/init-component/generator.ts

@@ -0,0 +1,147 @@
+import {
+  cypressComponentConfiguration,
+  componentGenerator,
+  componentStoryGenerator,
+  componentTestGenerator,
+} from '@nx/angular/generators';
+import { Tree } from '@nx/devkit';
+import { CoerceDefaultClassExport } from '@rxap/ts-morph';
+import {
+  classify,
+  dasherize,
+} from '@rxap/utilities';
+import { TsMorphAngularProjectTransform } from '@rxap/workspace-ts-morph';
+import {
+  GenerateSerializedSchematicFile,
+  GetDefaultGeneratorOptions,
+  GetProject,
+  GetProjectRoot,
+  GetProjectSourceRoot,
+  HasTarget,
+  IsLibraryProject,
+} from '@rxap/workspace-utilities';
+import {
+  join,
+  relative,
+} from 'path';
+import { InitComponentGeneratorSchema } from './schema';
+import 'colors';
+
+function buildComponentDirectory(tree: Tree, options: InitComponentGeneratorSchema) {
+  let directory = GetProjectSourceRoot(tree, options.project);
+  if (IsLibraryProject(GetProject(tree, options.project))) {
+    directory = join(directory, 'lib');
+  } else if (options.feature) {
+    directory = join(directory, 'feature', dasherize(options.feature));
+  } else {
+    directory = join(directory, 'app');
+  }
+  if (!options.flat) {
+    directory = join(directory, dasherize(options.name));
+  }
+  return directory;
+}
+
+function buildRelativePath(tree: Tree, options: InitComponentGeneratorSchema, directory: string) {
+  const projectSourceRoot = GetProjectSourceRoot(tree, options.project);
+  let relativePath = relative(projectSourceRoot, directory);
+  if (IsLibraryProject(GetProject(tree, options.project))) {
+    relativePath = relative('lib', relativePath);
+  } else if (options.feature) {
+    relativePath = relative(join('feature', dasherize(options.feature)), relativePath);
+  } else {
+    relativePath = relative('app', relativePath);
+  }
+  return relativePath;
+}
+
+export async function initComponentGenerator(
+  tree: Tree,
+  options: InitComponentGeneratorSchema
+) {
+
+  const projectRoot = GetProjectRoot(tree, options.project);
+
+  const directory = options.directory ?? buildComponentDirectory(tree, options);
+  const componentPath = relative(projectRoot, directory);
+
+  GenerateSerializedSchematicFile(
+    tree,
+    directory,
+    '@rxap/plugin-angular',
+    'init-component',
+    options,
+  );
+
+  const defaultOptions = GetDefaultGeneratorOptions(tree, '@nx/angular: component');
+  const componentOptions = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  componentOptions.displayBlock ??= false;
+  componentOptions.inlineStyle ??= false;
+  componentOptions.standalone ??= true;
+  componentOptions.changeDetection ??= 'OnPush';
+  componentOptions.skipTests ??= false;
+  componentOptions.flat ??= false;
+  componentOptions.skipImport ??= false;
+  componentOptions.skipSelector ??= false;
+  componentOptions.type ??= 'component';
+  componentOptions.export ??= false;
+  componentOptions.skipFormat ??= false;
+  componentOptions.style ??= 'scss';
+
+  const componentName = classify(componentOptions.name) + 'Component';
+  const componentFileName = dasherize(componentOptions.name) + '.component';
+
+  console.log('Generate component'.cyan);
+  console.log('componentName: ' + componentName.magenta);
+  console.log('componentFileName: ' + componentFileName.magenta);
+  console.log('componentPath: ' + componentPath.magenta);
+  console.log('directory: ' + directory.magenta);
+
+  if (!tree.exists(join(directory, componentFileName + '.ts'))) {
+    await componentGenerator(tree, {
+      ...componentOptions,
+      path: directory,
+    });
+  }
+
+  if (!tree.exists(join(directory, componentFileName + '.stories.ts')) && HasTarget(tree, options.project, 'storybook')) {
+    console.log('Generate component story'.blue);
+    await componentStoryGenerator(tree, {
+      projectPath: projectRoot,
+      interactionTests: componentOptions.interactionTests,
+      componentName,
+      componentPath,
+      componentFileName,
+      skipFormat: componentOptions.skipFormat,
+    });
+
+  }
+
+  if (!tree.exists(join(directory, componentFileName + '.cy.ts')) && HasTarget(tree, options.project, 'component-test')) {
+    console.log('Generate component test'.blue);
+    await componentTestGenerator(tree, {
+      project: options.project,
+      componentName,
+      componentDir: componentPath,
+      componentFileName,
+      skipFormat: componentOptions.skipFormat
+    });
+  }
+
+  if (options.defaultExport) {
+    TsMorphAngularProjectTransform(tree, {
+      project: options.project,
+      feature: options.feature,
+      directory: buildRelativePath(tree, options, directory),
+    }, (_, [sourceFile]) => {
+      CoerceDefaultClassExport(sourceFile);
+    }, [`${dasherize(options.name)}.component.ts`]);
+  }
+
+}
+
+export default initComponentGenerator;

package/src/generators/init-component/index.ts

@@ -0,0 +1,5 @@
+import { convertNxGenerator } from '@nx/devkit';
+import generator from './generator';
+
+const schematic = convertNxGenerator(generator);
+export default schematic;

package/src/generators/init-feature/generator.ts

@@ -0,0 +1,77 @@
+import {
+  formatFiles,
+  Tree,
+} from '@nx/devkit';
+import {
+  CoerceAppNavigation,
+  CoerceLayoutRoutes,
+  CoerceRoutes,
+} from '@rxap/ts-morph';
+import {
+  dasherize,
+  DeleteProperties,
+} from '@rxap/utilities';
+import { TsMorphAngularProjectTransform } from '@rxap/workspace-ts-morph';
+import {
+  GenerateSerializedSchematicFile,
+  GetProjectRoot,
+  GetProjectSourceRoot,
+} from '@rxap/workspace-utilities';
+import { join } from 'path';
+import { InitFeatureGeneratorSchema } from './schema';
+
+export async function initFeatureGenerator(
+  tree: Tree,
+  options: InitFeatureGeneratorSchema,
+) {
+  options.name = dasherize(options.name);
+  console.log('angular init feature generator:', options);
+  const projectSourceRoot = GetProjectSourceRoot(tree, options.project);
+
+  if (!projectSourceRoot) {
+    throw new Error(`Project source root not found for project ${ options.project }`);
+  }
+
+  GenerateSerializedSchematicFile(
+    tree,
+    join(GetProjectRoot(tree, options.project), 'feature', options.name),
+    '@rxap/plugin-angular',
+    'init-feature',
+    DeleteProperties(options, [ 'project', 'overwrite' ]),
+  );
+
+  TsMorphAngularProjectTransform(tree, {
+    project: options.project,
+  }, (_, [ layoutSourceFile, featureSourceFile, navigationSourceFile ]) => {
+    CoerceRoutes(featureSourceFile);
+    CoerceLayoutRoutes(layoutSourceFile, {
+      itemList: [
+        {
+          route: {
+            path: options.name,
+            loadChildren: '../feature/' + options.name + '/routes',
+          },
+          component: 'LayoutComponent'
+        }
+      ],
+      withStatusCheckGuard: options.apiStatusCheck,
+    });
+    if (options.navigation) {
+      CoerceAppNavigation(navigationSourceFile, {
+        itemList: [{
+          routerLink: [ '/', options.name ],
+          label: options.navigation.label,
+          icon: options.navigation.icon
+        }],
+        overwrite: options.overwrite,
+      });
+    }
+  }, [ 'app/layout.routes.ts?', `feature/${dasherize(options.name)}/routes.ts?`, 'app/app.navigation.ts?' ]);
+
+  if (!options.skipFormat) {
+    await formatFiles(tree);
+  }
+
+}
+
+export default initFeatureGenerator;

package/src/generators/init-feature/index.ts

@@ -0,0 +1,5 @@
+import { convertNxGenerator } from '@nx/devkit';
+import generator from './generator';
+
+const schematic = convertNxGenerator(generator);
+export default schematic;

package/src/generators/init-feature-library/generator.ts

@@ -0,0 +1,82 @@
+import {
+  formatFiles,
+  getProjects,
+  ProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import { CoerceArrayItems } from '@rxap/utilities';
+import {
+  GenerateSerializedSchematicFile,
+  GetProjectRoot,
+  SkipNonAngularProject,
+  SkipNonLibraryProject,
+} from '@rxap/workspace-utilities';
+import { initProject } from './init-project';
+import { initWorkspace } from './init-workspace';
+import { InitFeatureLibraryGeneratorSchema } from './schema';
+
+function skipProject(tree: Tree, options: InitFeatureLibraryGeneratorSchema, project: ProjectConfiguration, projectName: string) {
+
+  if (options.project === projectName) {
+    return false;
+  }
+
+  if (SkipNonAngularProject(tree, options, project, projectName)) {
+    return true;
+  }
+
+  if (SkipNonLibraryProject(tree, options, project, projectName)) {
+    return true;
+  }
+
+  if (!project.tags?.includes('feature')) {
+    return true;
+  }
+
+  return false;
+
+}
+
+export async function initFeatureLibraryGenerator(
+  tree: Tree,
+  options: InitFeatureLibraryGeneratorSchema
+) {options.project ??= undefined;
+  options.projects ??= [];
+  if (options.project) {
+    CoerceArrayItems(options.projects, [options.project]);
+  }
+  console.log('angular feature library init generator:', options);
+
+  await initWorkspace(tree, options);
+
+  if (!options.skipProjects) {
+
+    for (const [ projectName, project ] of getProjects(tree).entries()) {
+
+      if (skipProject(tree, options, project, projectName)) {
+        continue;
+      }
+
+      GenerateSerializedSchematicFile(
+        tree,
+        GetProjectRoot(tree, projectName),
+        '@rxap/plugin-angular',
+        'init-feature-library',
+        options,
+      );
+
+      await initProject(tree, projectName, project, options);
+
+    }
+
+
+
+  }
+
+  if (!options.skipFormat) {
+    await formatFiles(tree);
+  }
+
+}
+
+export default initFeatureLibraryGenerator;

package/src/generators/init-feature-library/index.ts

@@ -0,0 +1,5 @@
+import { convertNxGenerator } from '@nx/devkit';
+import generator from './generator';
+
+const schematic = convertNxGenerator(generator);
+export default schematic;