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

package/src/executors/tailwind/executor.ts

@@ -0,0 +1,34 @@
+import { ExecutorContext } from '@nx/devkit';
+import { GetProjectRoot } from '@rxap/plugin-utilities';
+import { join } from 'path';
+// @ts-expect-error - Tailwindcss does not have types
+import { build } from 'tailwindcss/lib/cli/build';
+import { TailwindExecutorSchema } from './schema';
+
+export default async function runExecutor(options: TailwindExecutorSchema, context: ExecutorContext) {
+  console.log('Executor ran for Tailwind', options);
+
+  const projectRoot = GetProjectRoot(context);
+
+  const args: Record<string, string | boolean | number> = {
+    '--config': join(projectRoot, options.config),
+    '--input': join(projectRoot, options.input),
+    '--output': join(projectRoot, options.output),
+  };
+
+  if (options.minify) {
+    args['--minify'] = true;
+  }
+
+  console.log('Running Tailwind with args', JSON.stringify(args, undefined, 2));
+
+  await build(args);
+
+  return { success: true };
+
+  // return run({
+  //   cwd: projectRoot,
+  //   command,
+  //   __unparsed__: [],
+  // }, context);
+}

package/src/generators/convert-to-buildable-library/generator.ts

@@ -0,0 +1,110 @@
+import {
+  readProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import {
+  CoerceArrayItems,
+  equals,
+} from '@rxap/utilities';
+import {
+  AddPackageJsonDevDependency,
+  CoerceTarget,
+  GetProjectRoot,
+  HasProject,
+  UpdateJsonFile,
+  UpdateProjectPackageJson,
+  UpdateProjectTsConfigJson,
+} from '@rxap/workspace-utilities';
+import {
+  join,
+  relative,
+} from 'path';
+import initLibraryGenerator from '../init-library/generator';
+import { ConvertToBuildableLibraryGeneratorSchema } from './schema';
+
+export async function convertToBuildableLibraryGenerator(
+  tree: Tree,
+  options: ConvertToBuildableLibraryGeneratorSchema,
+) {
+  if (!HasProject(tree, options.project)) {
+    throw new Error(`Project ${ options.project } not found`);
+  }
+
+  await AddPackageJsonDevDependency(tree, 'postcss', '^8.3.6', { soft: true });
+  await AddPackageJsonDevDependency(tree, 'postcss-import', '~14.1.0', { soft: true });
+  await AddPackageJsonDevDependency(tree, 'postcss-preset-env', '~7.5.0', { soft: true });
+  await AddPackageJsonDevDependency(tree, 'postcss-url', '~10.1.3', { soft: true });
+
+  const projectRoot = GetProjectRoot(tree, options.project);
+  const toRoot = relative(projectRoot, '/');
+
+  const project = readProjectConfiguration(tree, options.project);
+
+  CoerceTarget(project, 'build', {
+    executor: '@nx/angular:ng-packagr-lite',
+    outputs: [
+      '{workspaceRoot}/dist/{projectRoot}',
+    ],
+    options: {
+      project: 'angular/components/ng-package.json',
+    },
+    configurations: {
+      production: {
+        tsConfig: 'angular/components/tsconfig.lib.prod.json',
+      },
+      development: {
+        tsConfig: 'angular/components/tsconfig.lib.json',
+      },
+    },
+    defaultConfiguration: 'production',
+  });
+
+  UpdateJsonFile(tree, ngPackage => {
+    ngPackage.$schema = join(toRoot, 'node_modules/ng-packagr/ng-package.schema.json');
+    ngPackage.lib ??= {};
+    ngPackage.lib.entryFile = 'src/index.ts';
+    ngPackage.dist ??= join(toRoot, 'dist', projectRoot);
+  }, join(projectRoot, 'ng-package.json'), { create: true });
+
+  UpdateProjectPackageJson(tree, (packageJson) => {
+    packageJson.name = options.project;
+    packageJson.private = true;
+    packageJson.peerDependencies ??= {};
+    packageJson.dependencies ??= {};
+    packageJson.dependencies['tslib'] = '^2.3.0';
+    packageJson.sideEffects = false;
+    packageJson.version = '0.0.0';
+  }, {
+    projectName: options.project,
+    create: true,
+  });
+
+  UpdateJsonFile(tree, eslintrc => {
+    CoerceArrayItems(eslintrc.overrides, [
+      {
+        files: [
+          '*.json',
+        ],
+        parser: 'jsonc-eslint-parser',
+        rules: {
+          '@nx/dependency-checks': 'error',
+        },
+      },
+    ], (a, b) => a.parser === b.parser && equals(a.files, b.files));
+  }, join(projectRoot, '.eslintrc.json'));
+
+  UpdateProjectTsConfigJson(tree, (tsConfig) => {
+    tsConfig.extends = './tsconfig.lib.json';
+    tsConfig.compilerOptions ??= {};
+    tsConfig.compilerOptions.declarationMap ??= false;
+    tsConfig.angularCompilerOptions ??= {};
+  }, {
+    project: options.project,
+    infix: 'lib.prod',
+  });
+
+  await initLibraryGenerator(tree, { project: options.project });
+
+}
+
+export default convertToBuildableLibraryGenerator;

package/src/generators/fix-schematic/generator.ts

@@ -0,0 +1,103 @@
+import { Tree } from '@nx/devkit';
+import {
+  CoerceFile,
+  GetProjectPackageJson,
+  GetProjectRoot,
+  GetProjectSourceRoot,
+  HasProjectPackageJson,
+  VisitTree,
+} from '@rxap/workspace-utilities';
+import {
+  dirname,
+  join,
+  relative,
+} from 'path';
+import { FixSchematicGeneratorSchema } from './schema';
+
+export async function fixSchematicGenerator(
+  tree: Tree,
+  options: FixSchematicGeneratorSchema,
+) {
+  const projectRoot = GetProjectRoot(tree, options.project);
+  const projectSourceRoot = GetProjectSourceRoot(tree, options.project);
+  if (!projectSourceRoot) {
+    throw new Error(`Project source root not found for project ${ options.project }`);
+  }
+  const schematicsSourceRoot = join(projectSourceRoot, 'schematics');
+
+  if (!tree.exists(schematicsSourceRoot)) {
+    console.warn(`The schematics source root ${ schematicsSourceRoot } does not exists!`);
+    return;
+  }
+
+  if (!HasProjectPackageJson(tree, options.project)) {
+    throw new Error(`The project ${ options.project } does not contains a package.json file!`);
+  }
+
+  const packageJson = GetProjectPackageJson(tree, options.project);
+
+  if (!packageJson.schematics) {
+    console.warn(`The package.json file does not contains schematics property!`);
+    return;
+  }
+
+  const collectionFile = join(projectRoot, packageJson.schematics);
+
+  if (!tree.exists(collectionFile)) {
+    console.warn(`The collection file ${ collectionFile } does not exists!`);
+    return;
+  }
+
+  const collection = JSON.parse(tree.read(collectionFile)!.toString('utf-8'));
+
+  collection.schematics ??= {};
+
+  const { schematics } = collection;
+
+  const detectedSchemaJsonFiles: string[] = [];
+
+  for (const {
+    path,
+    isFile
+  } of VisitTree(tree, schematicsSourceRoot)) {
+    if (isFile && path.endsWith('schema.json')) {
+      detectedSchemaJsonFiles.push('./' + relative(projectRoot, path));
+    }
+  }
+
+  const notDefinedSchematics: string[] = detectedSchemaJsonFiles
+    .filter(schemaJsonFile =>
+      !Object.values(schematics)
+             .some((schematic: any) => schematic.schema === schemaJsonFile),
+    );
+
+  console.log(`Not defined schematics: ${ notDefinedSchematics.length }`);
+  if (notDefinedSchematics.length) {
+    console.log(` - ${ notDefinedSchematics.join('\n - ') }`);
+  } else {
+    console.log('All schematics are defined');
+  }
+
+  for (const schemaJsonFile of notDefinedSchematics) {
+    const basePath = dirname(schemaJsonFile);
+    const schematicName = basePath.split('/').pop()!;
+    if (schematics[schematicName]) {
+      console.warn(`The schematic ${ schematicName } is already defined!`);
+      continue;
+    }
+    schematics[schematicName] = {
+      schema: schemaJsonFile,
+      factory: `${ basePath }/index`,
+    };
+  }
+
+  for (const [ name, schematic ] of Object.entries(schematics as Record<string, any>)) {
+    schematic['description'] ??= `The ${ name } schematic`;
+  }
+
+  console.log('Update collection file');
+  CoerceFile(tree, collectionFile, JSON.stringify(collection, null, 2), true);
+
+}
+
+export default fixSchematicGenerator;

package/src/generators/fix-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/generators/init/coerce-nx-json.ts

@@ -0,0 +1,72 @@
+import {
+  readNxJson,
+  Tree,
+  updateNxJson,
+} from '@nx/devkit';
+import { CoerceNxJsonGenerators } from '@rxap/workspace-utilities';
+import { InitGeneratorSchema } from './schema';
+
+export function coerceNxJson(tree: Tree, options: InitGeneratorSchema) {
+  const nxJson = readNxJson(tree)!;
+
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:application', {
+    'style': 'scss',
+    'linter': 'eslint',
+    'unitTestRunner': 'jest',
+    'e2eTestRunner': 'none',
+    'tags': 'angular,ngx',
+    'prefix': options.prefix ?? 'rxap',
+    'standalone': true,
+    'addTailwind': true,
+    'routing': true,
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:host', {
+    'style': 'scss',
+    'linter': 'eslint',
+    'unitTestRunner': 'jest',
+    'e2eTestRunner': 'none',
+    'tags': 'angular,ngx',
+    'prefix': options.prefix ?? 'rxap',
+    'standalone': true,
+    'addTailwind': true,
+    name: 'shell',
+    'directory': `user-interface/shell`,
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:remote', {
+    'style': 'scss',
+    'linter': 'eslint',
+    'unitTestRunner': 'jest',
+    'e2eTestRunner': 'none',
+    'tags': 'angular,ngx',
+    'prefix': options.prefix ?? 'rxap',
+    'standalone': true,
+    'addTailwind': true,
+    host: 'shell',
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:component', {
+    'style': 'scss',
+    'standalone': true,
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:library', {
+    'linter': 'eslint',
+    'unitTestRunner': 'jest',
+    'publishable': false,
+    'addTailwind': false,
+    'changeDetection': 'OnPush',
+    'standalone': true,
+    'style': 'scss',
+    'tags': 'angular,ngx',
+    'prefix': 'rxap',
+    'skipModule': true,
+    buildable: false,
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:directive', {
+    'standalone': true,
+    'skipTests': true,
+  });
+  CoerceNxJsonGenerators(nxJson, '@nx/angular:library-secondary-entry-point', {
+    'skipModule': true,
+  });
+
+  updateNxJson(tree, nxJson);
+}

package/src/generators/init/generator.ts

@@ -0,0 +1,28 @@
+import {
+  formatFiles,
+  Tree,
+} from '@nx/devkit';
+import { GenerateSerializedSchematicFile } from '@rxap/workspace-utilities';
+import { initWorkspace } from './init-workspace';
+import { InitGeneratorSchema } from './schema';
+
+export async function initGenerator(tree: Tree, options: InitGeneratorSchema) {
+  console.log('angular init generator:', options);
+
+  await initWorkspace(tree, options);
+
+  GenerateSerializedSchematicFile(
+    tree,
+    '/',
+    '@rxap/plugin-angular',
+    'init',
+    options,
+  );
+
+  if (!options.skipFormat) {
+    await formatFiles(tree);
+  }
+
+}
+
+export default initGenerator;

package/src/generators/init/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/init-workspace.ts

@@ -0,0 +1,84 @@
+import {
+  readNxJson,
+  Tree,
+  updateNxJson,
+} from '@nx/devkit';
+import {
+  AddPackageJsonDevDependency,
+  CoerceNxPlugin,
+  GetNxVersion,
+  IsRxapRepository,
+} from '@rxap/workspace-utilities';
+import { join } from 'path';
+import initLibraryGenerator from '../init-library/generator';
+import { coerceNxJson } from './coerce-nx-json';
+import { InitGeneratorSchema } from './schema';
+
+export async function initWorkspace(tree: Tree, options: InitGeneratorSchema) {
+  console.log('init angular workspace');
+
+  const nxJson = readNxJson(tree)!;
+
+  if (IsRxapRepository(tree)) {
+    CoerceNxPlugin(nxJson, './packages/plugin/angular/src/library.ts');
+    CoerceNxPlugin(nxJson, './packages/plugin/angular/src/application.ts');
+  } else {
+    CoerceNxPlugin(nxJson, '@rxap/plugin-angular/library');
+    CoerceNxPlugin(nxJson, '@rxap/plugin-angular/application');
+  }
+
+  updateNxJson(tree, nxJson);
+
+  await AddPackageJsonDevDependency(tree, '@nx/angular', GetNxVersion(tree), { soft: true });
+
+  coerceNxJson(tree, options);
+
+  if (options.withSharedLibraries) {
+    for (const projectName of [
+      'components',
+      'forms',
+      'controls',
+      'tables'
+    ]) {
+      await initLibraryGenerator(tree, {
+        project: 'angular-' + projectName,
+        targets: {
+          indexExport: true,
+        },
+        coerce: {
+          directory: join('angular', projectName),
+          addTailwind: true,
+          buildable: true,
+        }
+      });
+    }
+
+    for (const projectName of [
+      'methods',
+      'data-sources',
+      'pipes',
+      'directives',
+      'guards',
+      'services',
+      'application-providers',
+      'utilities',
+      'shared',
+      'testing',
+      'resolvers',
+      'http-interceptors',
+      'bootstrap-hooks'
+    ]) {
+      await initLibraryGenerator(tree, {
+        project: 'angular-' + projectName,
+        targets: {
+          indexExport: true,
+        },
+        coerce: {
+          directory: join('angular', projectName),
+          buildable: true,
+        }
+      });
+    }
+  }
+
+}

package/src/generators/init-application/assert-main-statements.ts

@@ -0,0 +1,74 @@
+import { CoerceImports } from '@rxap/ts-morph';
+import { SourceFile } from 'ts-morph';
+import { InitApplicationGeneratorSchema } from './schema';
+
+export const MAIN_BOOTSTRAP_STATEMENT = `application.bootstrap().catch((err) => console.error(err));`;
+const MAIN_LOGGER_STATEMENT = `application.importProvidersFrom(LoggerModule.forRoot({
+  serverLoggingUrl: '/api/logs',
+  level: NgxLoggerLevel.DEBUG,
+  serverLogLevel: NgxLoggerLevel.ERROR,
+}));`;
+const MAIN_APP_CREATION_STATEMENT = `const application = new StandaloneApplication(
+  environment,
+  AppComponent,
+  appConfig,
+);`;
+const REMOTE_MAIN_APP_CREATION_STATEMENT = `const application = new StandaloneApplication(
+  environment,
+  RemoteEntryComponent,
+  appConfig,
+);`;
+
+export function assertMainStatements(sourceFile: SourceFile, options: InitApplicationGeneratorSchema) {
+  const statements: string[] = [];
+
+  statements.push('const application = new StandaloneApplication(');
+  statements.push('application.importProvidersFrom(LoggerModule.forRoot({');
+  const existingStatements = sourceFile.getStatements().map(s => s.getText()) ?? [];
+  for (const statement of statements) {
+    if (!existingStatements.includes(statement)) {
+      console.error(`Missing statement from angular main.ts:  ${ statement }`);
+      sourceFile.set({
+        statements: [
+          options.moduleFederation === 'remote' ? REMOTE_MAIN_APP_CREATION_STATEMENT : MAIN_APP_CREATION_STATEMENT,
+          MAIN_LOGGER_STATEMENT,
+          MAIN_BOOTSTRAP_STATEMENT,
+        ],
+      });
+      CoerceImports(sourceFile, [
+        {
+          moduleSpecifier: './app/app.config',
+          namedImports: [ 'appConfig' ],
+        },
+        {
+          moduleSpecifier: './environments/environment',
+          namedImports: [ 'environment' ],
+        },
+        {
+          moduleSpecifier: 'ngx-logger',
+          namedImports: [ 'LoggerModule', 'NgxLoggerLevel' ],
+        },
+        {
+          moduleSpecifier: '@rxap/ngx-bootstrap',
+          namedImports: [ 'StandaloneApplication' ],
+        },
+      ]);
+      if (options.moduleFederation === 'remote') {
+        CoerceImports(sourceFile, [
+          {
+            moduleSpecifier: './app/remote-entry/entry.component',
+            namedImports: [ 'RemoteEntryComponent' ],
+          },
+        ]);
+      } else {
+        CoerceImports(sourceFile, [
+          {
+            moduleSpecifier: './app/app.component',
+            namedImports: [ 'AppComponent' ],
+          },
+        ]);
+      }
+      return;
+    }
+  }
+}

package/src/generators/init-application/cleanup.ts

@@ -0,0 +1,127 @@
+import { Tree } from '@nx/devkit';
+import {
+  CoerceComponentImport,
+  CoerceDefaultExport,
+  GetComponentDecoratorObject,
+  RemoveComponentImport,
+  RemoveRoute,
+} from '@rxap/ts-morph';
+import { TsMorphAngularProjectTransform } from '@rxap/workspace-ts-morph';
+import {
+  CoerceFile,
+  GetProjectRoot,
+  GetProjectSourceRoot,
+  UpdateTsConfigJson,
+} from '@rxap/workspace-utilities';
+import { join } from 'path';
+import { SyntaxKind } from 'ts-morph';
+import { InitApplicationGeneratorSchema } from './schema';
+
+export function cleanup(tree: Tree, projectName: string, options: InitApplicationGeneratorSchema) {
+
+  const sourceRoot = GetProjectSourceRoot(tree, projectName);
+
+  const deleteFiles = [
+    'app/app.component.spec.ts',
+    'app/nx-welcome.component.ts',
+    'app/remote-entry/nx-welcome.component.ts',
+    'app/nx-welcome.component.cy.ts',
+  ];
+
+  for (const file of deleteFiles) {
+    if (tree.exists(join(sourceRoot, file))) {
+      tree.delete(join(sourceRoot, file));
+    }
+  }
+
+  if (tree.exists(join(sourceRoot, 'app/app.component.html'))) {
+    const content = tree.read(join(sourceRoot, 'app/app.component.html'), 'utf-8')!
+      .replace(/<.+-nx-welcome><\/.+-nx-welcome> /, '')
+      .replace(/<ul class="remote-menu">[\s\S]*<\/ul>/, '');
+    CoerceFile(tree, join(sourceRoot, 'app/app.component.html'), content, true);
+  }
+
+  if (options.moduleFederation !== 'remote') {
+
+    TsMorphAngularProjectTransform(tree, {
+      project: projectName,
+    }, (_, [ appRoutes, appComponent ]) => {
+      RemoveRoute(appRoutes, {
+        component: 'NxWelcomeComponent',
+        name: 'appRoutes',
+      });
+      appRoutes.getImportDeclaration('./nx-welcome.component')?.remove();
+      appComponent.getClass('AppComponent')?.getProperty('title')?.remove();
+      RemoveComponentImport(appComponent, 'NxWelcomeComponent');
+    }, [ 'app/app.routes.ts', 'app/app.component.ts' ]);
+
+  }
+
+  if (options.moduleFederation === 'remote') {
+
+    // region module-federation config
+    const projectRoot = GetProjectRoot(tree, projectName);
+    let content = tree.read(join(projectRoot, 'module-federation.config.ts'), 'utf-8')!;
+    content = content.replace('./Routes', './routes');
+    CoerceFile(tree, join(projectRoot, 'module-federation.config.ts'), content, true);
+    // endregion
+
+    // region tsconfig.base.json
+    UpdateTsConfigJson(tree, tsConfig => {
+      tsConfig.compilerOptions ??= {};
+      tsConfig.compilerOptions.paths ??= {};
+      if (tsConfig.compilerOptions.paths[`${ projectName }/Routes`]) {
+        delete tsConfig.compilerOptions.paths[`${ projectName }/Routes`];
+      }
+    }, { infix: 'base' });
+    // endregion
+
+    TsMorphAngularProjectTransform(tree, {
+      project: projectName,
+    }, (_, [ entryRoutes ]) => {
+      CoerceDefaultExport(entryRoutes.getVariableStatement('remoteRoutes')!.getDeclarations()[0]);
+    }, [
+      'app/remote-entry/entry.routes.ts',
+    ]);
+    if (tree.exists(join(sourceRoot, 'app/remote-entry/entry.component.ts'))) {
+      TsMorphAngularProjectTransform(tree, {
+        project: projectName,
+      }, (_, [ entryComponent ]) => {
+        entryComponent.getImportDeclaration('./nx-welcome.component')?.remove();
+        RemoveComponentImport(entryComponent, 'NxWelcomeComponent');
+        RemoveComponentImport(entryComponent, 'CommonModule');
+        const componentOptions = GetComponentDecoratorObject(entryComponent);
+        const templateProp = componentOptions.getProperty('template');
+        if (templateProp && templateProp.asKindOrThrow(SyntaxKind.PropertyAssignment).getInitializer()?.getText().match(
+          /<.+nx-welcome><\/.+nx-welcome>/)) {
+          templateProp.remove();
+          componentOptions.addPropertyAssignment({
+            name: 'template',
+            initializer: w => w.quote('<router-outlet></router-outlet>'),
+          });
+          CoerceComponentImport(entryComponent, {
+            name: 'RouterModule',
+            moduleSpecifier: '@angular/router',
+          });
+        }
+      }, [
+        'app/remote-entry/entry.component.ts',
+      ]);
+    }
+    if (options.host) {
+      TsMorphAngularProjectTransform(tree, {
+        project: options.host,
+      }, (_, [ appRoutes ]) => {
+        RemoveRoute(appRoutes, {
+          loadRemoteModule: {
+            name: projectName,
+            entry: './Routes',
+          },
+          name: 'appRoutes',
+        });
+        appRoutes.organizeImports();
+      }, [ 'app/app.routes.ts' ]);
+    }
+  }
+
+}