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

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

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

package/src/generators/schematic/generator.ts

@@ -0,0 +1,179 @@
+import {
+  formatFiles,
+  generateFiles,
+  GeneratorsJson,
+  joinPathFragments,
+  names,
+  readJson,
+  readProjectConfiguration,
+  Tree,
+  updateJson,
+  updateProjectConfiguration,
+  writeJson,
+} from '@nx/devkit';
+import {
+  CoerceAssets,
+  GetWorkspaceScope,
+  PackageJson,
+} from '@rxap/workspace-utilities';
+import * as path from 'path';
+import { SchematicGeneratorSchema } from './schema';
+
+type NormalizedSchema = SchematicGeneratorSchema & ReturnType<typeof names> & {
+  fileName: string;
+  className: string;
+  projectRoot: string;
+  projectSourceRoot: string;
+  npmScope: string;
+  npmPackageName: string;
+};
+
+function normalizeOptions(host: Tree, options: SchematicGeneratorSchema): NormalizedSchema {
+  const npmScope = GetWorkspaceScope(host);
+
+  const {
+    root: projectRoot,
+    sourceRoot: projectSourceRoot,
+  } = readProjectConfiguration(host, options.project);
+
+  const npmPackageName = readJson<{ name: string }>(host, path.join(projectRoot, 'package.json')).name;
+
+  let description: string;
+  if (options.description) {
+    description = options.description;
+  } else {
+    description = `${ options.name } schematic`;
+  }
+
+  if (!projectSourceRoot) {
+    throw new Error(`Project source root not found for project ${ options.project }`);
+  }
+
+  return {
+    ...options, ...names(options.name),
+    description,
+    projectRoot,
+    projectSourceRoot,
+    npmScope,
+    npmPackageName,
+  };
+}
+
+function addFiles(host: Tree, options: NormalizedSchema) {
+  generateFiles(host, path.join(__dirname, './files/schematic'), `${ options.projectSourceRoot }/schematics`, {
+    ...options,
+    schematicFnName: `${ options.propertyName }Schematic`,
+    schemaInterfaceName: `${ options.className }SchematicSchema`,
+  });
+}
+
+export async function createCollectionJson(host: Tree, projectRoot: string) {
+  updateJson<PackageJson>(host, joinPathFragments(projectRoot, 'package.json'), (json) => {
+    json.schematics ??= './collection.json';
+    return json;
+  });
+  writeJson<GeneratorsJson>(host, joinPathFragments(projectRoot, 'collection.json'), {
+    schematics: {},
+  });
+}
+
+async function updateCollectionJson(host: Tree, options: NormalizedSchema) {
+  const packageJson = readJson<PackageJson>(host, joinPathFragments(options.projectRoot, 'package.json'));
+  const packageJsonSchematics = packageJson.schematics;
+  let schematicsPath = packageJsonSchematics ? joinPathFragments(options.projectRoot, packageJsonSchematics) : null;
+
+  if (!schematicsPath) {
+    schematicsPath = joinPathFragments(options.projectRoot, 'collection.json');
+  }
+  if (!host.exists(schematicsPath)) {
+    await createCollectionJson(host, options.projectRoot);
+  }
+
+  updateJson<GeneratorsJson>(host, schematicsPath, (json) => {
+    let schematics = json.schematics;
+    schematics ??= {};
+    schematics[options.name] = {
+      factory: `./src/schematics/${ options.fileName }/index`,
+      schema: `./src/schematics/${ options.fileName }/schema.json`,
+      description: options.description,
+    };
+    json.schematics = schematics;
+    return json;
+  });
+}
+
+export function hasSchematic(tree: Tree, projectName: string, schematicName: string): boolean {
+  const project = readProjectConfiguration(tree, projectName);
+  const packageJson = readJson<PackageJson>(tree, joinPathFragments(project.root, 'package.json'));
+  if (!packageJson.schematics) {
+    return false;
+  }
+  const schematicsPath = joinPathFragments(project.root, packageJson.schematics);
+  const collectionJson = readJson<GeneratorsJson>(tree, schematicsPath);
+  return (
+    collectionJson.schematics?.[schematicName] !== undefined
+  );
+}
+
+function coerceBuildTarget(
+  tree: Tree,
+  {
+    projectRoot,
+    project,
+  }: NormalizedSchema,
+) {
+
+  const projectConfiguration = readProjectConfiguration(tree, project);
+
+  projectConfiguration.targets ??= {};
+  projectConfiguration.targets['build'] ??= {};
+  const buildTarget = projectConfiguration.targets['build'];
+
+  buildTarget.executor = '@nx/js:tsc';
+  buildTarget.outputs ??= [ '{options.outputPath}' ];
+  buildTarget.options ??= {};
+  buildTarget.options.outputPath = `dist/${ projectRoot }`;
+  buildTarget.options.main = `${ projectRoot }/src/index.ts`;
+  buildTarget.options.tsConfig = `${ projectRoot }/tsconfig.lib.json`;
+  buildTarget.options.assets ??= [];
+
+  const assets = [
+    `${ projectRoot }/*.md`, {
+      'input': `./${ projectRoot }/src`,
+      'glob': '**/!(*.ts)',
+      'output': './src',
+    }, {
+      'input': `./${ projectRoot }/src`,
+      'glob': '**/*.d.ts',
+      'output': './src',
+    }, {
+      'input': `./${ projectRoot }`,
+      'glob': 'collection.json',
+      'output': '.',
+    },
+  ];
+
+  CoerceAssets(buildTarget.options.assets, assets);
+
+  updateProjectConfiguration(tree, project, projectConfiguration);
+}
+
+export async function schematicGenerator(host: Tree, _options: SchematicGeneratorSchema) {
+  const options = normalizeOptions(host, _options);
+  if (hasSchematic(host, options.project, options.name)) {
+    throw new Error(`Generator ${ options.name } already exists.`);
+  }
+
+  addFiles(host, options);
+
+  await updateCollectionJson(host, options);
+
+  if (!options.skipFormat) {
+    await formatFiles(host);
+  }
+
+  coerceBuildTarget(host, options);
+
+}
+
+export default schematicGenerator;

package/src/generators/schematic/index.ts

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

package/src/i18n.ts

@@ -0,0 +1,130 @@
+import {
+  CreateNodesContextV2,
+  CreateNodesV2,
+  ProjectConfiguration,
+  TargetConfiguration,
+} from '@nx/devkit';
+import {
+  FindProjectByPath,
+  FsTree,
+} from '@rxap/workspace-utilities';
+import { Optional } from 'nx/src/project-graph/plugins';
+import { combineGlobPatterns } from 'nx/src/utils/globs';
+import { dirname } from 'path';
+import 'colors';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PluginOptions {}
+
+export function normalizeOptions(
+  options: PluginOptions | undefined,
+): PluginOptions {
+  return options ?? {};
+}
+
+export const createNodesV2: CreateNodesV2<PluginOptions> = [
+  combineGlobPatterns([
+    '**/tsconfig.app.json',
+    '**/src/main.ts',
+    '**/src/app/app.module.ts',
+    '**/src/app/app.component.ts',
+    '**/src/index.html',
+    '**/src/i18n.index.html.hbs'
+  ]),
+  async (configFilePaths, options, context) => {
+    const normalizedOptions = normalizeOptions(options);
+
+    const includedConfigFilePaths = await Promise.all(
+      configFilePaths.map(async (configFilePath) => {
+        if (
+          await shouldHaveProjectConfiguration(
+            configFilePath,
+            normalizedOptions,
+            context,
+          )
+        ) {
+          return configFilePath;
+        }
+        return undefined;
+      }),
+    ).then((configFilePathOrUndefinedList) =>
+      configFilePathOrUndefinedList.filter((value) => value !== undefined),
+    );
+
+    const results = await Promise.all(
+      includedConfigFilePaths.map(async (configFilePath) => {
+        const [ projectPath, projectConfiguration ] =
+          await createProjectConfiguration(
+            configFilePath,
+            normalizedOptions,
+            context,
+          );
+        return [ configFilePath, projectPath, projectConfiguration ] as [
+          string,
+          string,
+          Optional<ProjectConfiguration, 'root'>
+        ];
+      }),
+    );
+
+    return results.map(
+      ([ configFilePath, projectPath, projectConfiguration ]) => [
+        configFilePath,
+        {
+          projects: {
+            [projectPath]: projectConfiguration,
+          },
+        },
+      ],
+    );
+  },
+];
+
+async function shouldHaveProjectConfiguration(
+  configFilePath: string,
+  options: PluginOptions,
+  context: CreateNodesContextV2,
+): Promise<boolean> {
+  const projectPath = dirname(configFilePath);
+  const tree = new FsTree(context.workspaceRoot);
+  if (!FindProjectByPath(tree, projectPath)) {
+    // console.log(`The folder of the file '${ configFilePath }' is not the root of a project. Skipping`.yellow);
+    return false;
+  }
+  return true;
+}
+
+async function createProjectConfiguration(
+  configFilePath: string,
+  options: PluginOptions,
+  context: CreateNodesContextV2,
+): Promise<[ string, Optional<ProjectConfiguration, 'root'> ]> {
+  const projectPath = dirname(configFilePath);
+  const targets: Record<string, TargetConfiguration> = {};
+  const tree = new FsTree(context.workspaceRoot);
+  const projectConfiguration = FindProjectByPath(tree, projectPath);
+
+  if (!projectConfiguration) {
+    throw new Error(`Could not find project in '${ projectPath }'`);
+  }
+
+  targets['i18n-index-html'] = createI18nIndexHtmlTarget();
+
+  return [
+    projectPath, {
+      targets,
+    },
+  ];
+}
+
+function createI18nIndexHtmlTarget(): TargetConfiguration {
+  return {
+    dependsOn: [ "build"],
+    executor: "@rxap/plugin-application:i18n",
+    outputs: [ "{workspaceRoot}/dist/{projectRoot}/index.html"],
+    inputs: [
+      "{projectRoot}/i18n.index.html.hbs"
+    ],
+    cache: true
+  };
+}

package/src/lib/angular-version.ts

@@ -0,0 +1 @@
+export const ANGULAR_VERSION = '~19.1.0';

package/src/lib/coerce-cypress-component-testing.ts

@@ -0,0 +1,113 @@
+import { cypressComponentConfiguration } from '@nx/angular/generators';
+import {
+  getProjects,
+  ProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+  updateProjectConfiguration,
+} from '@nx/devkit';
+import {
+  CoerceFile,
+  IsAngularProject,
+  IsApplicationProject,
+  IsRxapRepository,
+} from '@rxap/workspace-utilities';
+import { join } from 'path';
+
+function determineCypressBuildTargetProject(tree: Tree, project: ProjectConfiguration, projectName: string): string {
+
+  if (IsApplicationProject(project)) {
+    return projectName;
+  }
+
+  const projects = getProjects(tree);
+
+  const angularApplicationProjects = Array.from(projects.entries())
+    .filter(([ , project ]) => IsApplicationProject(project) && IsAngularProject(project));
+
+  const cypressProject = angularApplicationProjects.find(([ projectName ]) => projectName.endsWith('cypress'));
+
+  if (cypressProject) {
+    return cypressProject[0];
+  }
+
+  if (angularApplicationProjects.length) {
+    return angularApplicationProjects[0][0];
+  } else {
+    throw new Error('No angular application project found. Can not determine the cypress build target project.');
+  }
+
+}
+
+export async function CoerceCypressComponentTesting(tree: Tree, project: ProjectConfiguration, projectName: string) {
+
+  project.targets ??= {};
+
+  if (!project.targets['component-test']) {
+    const buildTargetProjectName = determineCypressBuildTargetProject(tree, project, projectName);
+    await cypressComponentConfiguration(tree, {
+      project: projectName,
+      generateTests: true,
+      skipFormat: false,
+      buildTarget: `${ buildTargetProjectName }:build:development`,
+    });
+    if (buildTargetProjectName !== projectName) {
+      const buildTargetProject = readProjectConfiguration(tree, buildTargetProjectName);
+      buildTargetProject.implicitDependencies ??= [];
+      if (!buildTargetProject.implicitDependencies.includes(projectName)) {
+        buildTargetProject.implicitDependencies.push(projectName);
+        updateProjectConfiguration(
+          tree,
+          buildTargetProjectName,
+          buildTargetProject,
+        );
+      }
+    }
+    const _project = readProjectConfiguration(tree, projectName);
+    _project.targets ??= {};
+    _project.targets['component-test'].configurations ??= {};
+    _project.targets['component-test'].configurations['open'] ??= {};
+    _project.targets['component-test'].configurations['open'].watch = true;
+    updateProjectConfiguration(
+      tree,
+      projectName,
+      _project,
+    );
+    if (IsRxapRepository(tree)) {
+      CoerceFile(tree, join(
+          project.root,
+          'cypress.config.ts',
+        ),
+        `import { componentTestingPreset } from 'workspace';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: componentTestingPreset(__filename),
+});`, true);
+    }
+  }
+
+  const _project = readProjectConfiguration(
+    tree,
+    projectName,
+  );
+  _project.targets ??= {};
+  if (_project.targets['component-test'].options.devServerTarget) {
+    const cypressProjectName = _project.targets['component-test'].options.devServerTarget.split(':').shift();
+    if (cypressProjectName !== projectName) {
+      const cypressProject = readProjectConfiguration(
+        tree,
+        cypressProjectName,
+      );
+      cypressProject.implicitDependencies ??= [];
+      if (!cypressProject.implicitDependencies.includes(projectName)) {
+        cypressProject.implicitDependencies.push(projectName);
+        updateProjectConfiguration(
+          tree,
+          cypressProjectName,
+          cypressProject,
+        );
+      }
+    }
+  }
+}

package/src/lib/coerce-test-setup.ts

@@ -0,0 +1,60 @@
+import { Tree } from '@nx/devkit';
+import { CoerceImports } from '@rxap/ts-morph';
+import { TsMorphAngularProjectTransform } from '@rxap/workspace-ts-morph';
+import {
+  CoerceFile,
+  GetProjectSourceRoot,
+} from '@rxap/workspace-utilities';
+
+export function coerceTestSetup(tree: Tree, projectName: string) {
+  const projectSourceRoot = GetProjectSourceRoot(tree, projectName);
+
+  const testSetupPath = `${projectSourceRoot}/test-setup.ts`;
+  CoerceFile(tree, testSetupPath, `// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';
+`);
+
+  TsMorphAngularProjectTransform(tree, { project: projectName, basePath: projectSourceRoot }, (_, [ sourceFile ]) => {
+
+    CoerceImports(sourceFile, [
+      {
+        moduleSpecifier: 'util',
+        namedImports: [ 'TextDecoder', 'TextEncoder' ],
+      },
+      {
+        moduleSpecifier: '@angular/localize/init',
+      },
+    ]);
+
+    const hasTextEncoderStatement = !!sourceFile.getStatement(
+      statement => statement.getText().includes('global.TextEncoder ??= TextEncoder as any;'));
+    const hasTextDecoderStatement = !!sourceFile.getStatement(
+      statement => statement.getText().includes('global.TextDecoder ??= TextDecoder as any;'));
+    const hasLocalizeInitStatement = !!sourceFile.getStatement(
+      statement => statement.getText().includes('jest.spyOn(global as any, \'$localize\')'));
+
+    if (!hasTextEncoderStatement) {
+      sourceFile.addStatements(`global.TextEncoder ??= TextEncoder as any;`);
+    }
+
+    if (!hasTextDecoderStatement) {
+      sourceFile.addStatements(`global.TextDecoder ??= TextDecoder as any;`);
+    }
+
+    if (!hasLocalizeInitStatement) {
+      sourceFile.addStatements(`jest.spyOn(global as any, '$localize').mockImplementation((...args: any[]) => {
+  // This template tag function just returns the first argument with no transformations.
+  // Change this to fit your unit test needs.
+  return args[0];
+});`);
+    }
+
+  }, [ 'test-setup.ts' ]);
+
+}

package/src/library.ts

@@ -0,0 +1,153 @@
+import {
+  CreateNodesContextV2,
+  CreateNodesV2,
+  ProjectConfiguration,
+  TargetConfiguration,
+} from '@nx/devkit';
+import {
+  FindProjectByPath,
+  FsTree,
+  IsRxapRepository,
+} from '@rxap/workspace-utilities';
+import { existsSync } from 'fs';
+import { Optional } from 'nx/src/project-graph/plugins';
+import {
+  dirname,
+  join,
+} from 'path';
+import 'colors';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface PluginOptions {}
+
+export function normalizeOptions(
+  options: PluginOptions | undefined,
+): PluginOptions {
+  return options ?? {};
+}
+
+export const createNodesV2: CreateNodesV2<PluginOptions> = [
+  '**/ng-package.json',
+  async (configFilePaths, options, context) => {
+    const normalizedOptions = normalizeOptions(options);
+
+    const includedConfigFilePaths = await Promise.all(
+      configFilePaths.map(async (configFilePath) => {
+        if (
+          await shouldHaveProjectConfiguration(
+            configFilePath,
+            normalizedOptions,
+            context,
+          )
+        ) {
+          return configFilePath;
+        }
+        return undefined;
+      }),
+    ).then((configFilePathOrUndefinedList) =>
+      configFilePathOrUndefinedList.filter((value) => value !== undefined),
+    );
+
+    const results = await Promise.all(
+      includedConfigFilePaths.map(async (configFilePath) => {
+        const [ projectPath, projectConfiguration ] =
+          await createProjectConfiguration(
+            configFilePath,
+            normalizedOptions,
+            context,
+          );
+        return [ configFilePath, projectPath, projectConfiguration ] as [
+          string,
+          string,
+          Optional<ProjectConfiguration, 'root'>
+        ];
+      }),
+    );
+
+    return results.map(
+      ([ configFilePath, projectPath, projectConfiguration ]) => [
+        configFilePath,
+        {
+          projects: {
+            [projectPath]: projectConfiguration,
+          },
+        },
+      ],
+    );
+  },
+];
+
+async function shouldHaveProjectConfiguration(
+  configFilePath: string,
+  options: PluginOptions,
+  context: CreateNodesContextV2,
+): Promise<boolean> {
+  const projectPath = dirname(configFilePath);
+  const tree = new FsTree(context.workspaceRoot);
+  if (!FindProjectByPath(tree, projectPath)) {
+    // console.log(`The folder of the file '${ configFilePath }' is not the root of a project. Skipping`.yellow);
+    return false;
+  }
+  return true;
+}
+
+async function createProjectConfiguration(
+  configFilePath: string,
+  options: PluginOptions,
+  context: CreateNodesContextV2,
+): Promise<[ string, Optional<ProjectConfiguration, 'root'> ]> {
+  const projectPath = dirname(configFilePath);
+  const targets: Record<string, TargetConfiguration> = {};
+  const tree = new FsTree(context.workspaceRoot);
+  const projectConfiguration = FindProjectByPath(tree, projectPath);
+
+  if (!projectConfiguration) {
+    throw new Error(`Could not find project in '${ projectPath }'`);
+  }
+
+  targets['check-ng-package'] = createCheckNgPackageTarget();
+
+  if (existsSync(join(projectPath, 'tailwind.config.js'))) {
+    targets['build-tailwind'] = createBuildTailwindTarget(IsRxapRepository(context.workspaceRoot));
+  }
+
+  return [
+    projectPath, {
+      targets,
+    },
+  ];
+}
+
+function createBuildTailwindTarget(isRxapRepository: boolean): TargetConfiguration {
+  const dependsOn: TargetConfiguration['dependsOn'] = [];
+  if (isRxapRepository) {
+    dependsOn.push({
+      target: 'build',
+      projects: [ 'browser-tailwind' ],
+    });
+  }
+  return {
+    executor: '@rxap/plugin-angular:tailwind',
+    configurations: {
+      production: {
+        minify: true,
+      },
+    },
+    dependsOn,
+    inputs: [
+      '{projectRoot}/**/*.html',
+      '{projectRoot}/**/*.scss',
+      '{projectRoot}/**/*.css',
+    ],
+    outputs: [ '{projectRoot}/theme.css' ],
+    cache: true,
+  };
+}
+
+function createCheckNgPackageTarget(): TargetConfiguration {
+  return {
+    executor: '@rxap/plugin-angular:check-ng-package',
+    inputs: [ '{projectRoot}/ng-package.json', '{projectRoot}/package.json' ],
+    cache: true,
+  };
+}

package/src/migrations/update-19-0-0/add-m2-prefix-to-material-scss-functions.ts

@@ -0,0 +1,32 @@
+import { Tree } from '@nx/devkit';
+import { VisitTree } from '@rxap/workspace-utilities';
+import { migrateM2ThemingApiUsages } from './migration';
+
+export default async function (tree: Tree) {
+
+  const potentialThemes: Array<{ path: string, content: string }> = [];
+
+  for (const {
+    path,
+    isFile
+  } of VisitTree(tree, '/')) {
+    if (isFile && path.endsWith('.scss')) {
+      const content = tree.read(path)!.toString('utf-8');
+      if (content.includes('@angular/material')) {
+        potentialThemes.push({
+          path,
+          content,
+        });
+      }
+    }
+  }
+
+  for (const theme of potentialThemes) {
+    const migrated = migrateM2ThemingApiUsages(theme.content);
+
+    if (migrated !== theme.content) {
+      tree.write(theme.path, migrated);
+    }
+  }
+
+}