@angular-architects/native-federation 18.2.0 → 18.2.2

package/src/builders/build/builder.ts

@@ -1,370 +0,0 @@
-import * as path from 'path';
-import * as fs from 'fs';
-import * as mrmime from 'mrmime';
-
-import { buildApplication, ApplicationBuilderOptions } from '@angular/build';
-import {
-  serveWithVite,
-  buildApplicationInternal,
-} from '@angular/build/private';
-
-import {
-  BuilderContext,
-  BuilderOutput,
-  createBuilder,
-} from '@angular-devkit/architect';
-
-import { DevServerBuilderOptions } from '@angular-devkit/build-angular';
-import { normalizeOptions } from '@angular-devkit/build-angular/src/builders/dev-server/options';
-
-import { setLogLevel, logger } from '@softarc/native-federation/build';
-
-import { FederationOptions } from '@softarc/native-federation/build';
-import { setBuildAdapter } from '@softarc/native-federation/build';
-import {
-  createAngularBuildAdapter,
-  setMemResultHandler,
-} from '../../utils/angular-esbuild-adapter';
-import { getExternals } from '@softarc/native-federation/build';
-import { loadFederationConfig } from '@softarc/native-federation/build';
-import { buildForFederation } from '@softarc/native-federation/build';
-import { targetFromTargetString } from '@angular-devkit/architect';
-
-import { NfBuilderSchema } from './schema';
-import {
-  reloadBrowser,
-  reloadShell,
-  setError,
-  startServer,
-} from '../../utils/dev-server';
-import { RebuildHubs } from '../../utils/rebuild-events';
-import { updateIndexHtml, updateScriptTags } from '../../utils/updateIndexHtml';
-import { existsSync, mkdirSync, rmSync } from 'fs';
-import {
-  EsBuildResult,
-  MemResults,
-  NgCliAssetResult,
-} from '../../utils/mem-resuts';
-import { JsonObject } from '@angular-devkit/core';
-import { createSharedMappingsPlugin } from '../../utils/shared-mappings-plugin';
-// import { NextHandleFunction } from 'vite';
-import { PluginBuild } from 'esbuild';
-import { FederationInfo } from '@softarc/native-federation-runtime';
-
-function _buildApplication(options, context, pluginsOrExtensions) {
-  let extensions;
-  if (pluginsOrExtensions && Array.isArray(pluginsOrExtensions)) {
-    extensions = {
-      codePlugins: pluginsOrExtensions,
-    };
-  } else {
-    extensions = pluginsOrExtensions;
-  }
-  return buildApplicationInternal(
-    options,
-    context,
-    extensions
-  );
-}
-
-export async function* runBuilder(
-  nfOptions: NfBuilderSchema,
-  context: BuilderContext
-): AsyncIterable<BuilderOutput> {
-  let target = targetFromTargetString(nfOptions.target);
-
-  let _options = (await context.getTargetOptions(
-    target
-  )) as unknown as JsonObject & ApplicationBuilderOptions;
-
-  let builder = await context.getBuilderNameForTarget(target);
-
-  if (builder === '@angular-devkit/build-angular:browser-esbuild') {
-    logger.info('.: NATIVE FEDERATION - UPDATE NEEDED :.');
-    logger.info('');
-    logger.info("Since version 17.1, Native Federation uses Angular's");
-    logger.info('Application-Builder and its Dev-Server.');
-    logger.info('');
-    logger.info('If you are sill on Angular 17.0.x, please update to');
-    logger.info('Angular 17.1.x or downgrade to Native Federation 17.0.x.');
-    logger.info('');
-    logger.info('For working with Native Federation 17.1.x (recommented), ');
-    logger.info('please update your project config, e.g. in angular.json');
-    logger.info('');
-    logger.info('This command performs the needed update for default configs:');
-    logger.info('');
-    logger.info('\tng g @angular-architects/native-federation:appbuilder');
-    logger.info('');
-    logger.info('You need to run it once per application to migrate');
-    logger.info('Please find more information here: https://shorturl.at/gADJW');
-    return;
-  }
-
-  let options = (await context.validateOptions(
-    _options,
-    builder
-  )) as JsonObject & ApplicationBuilderOptions;
-
-  const outerOptions = options as DevServerBuilderOptions;
-  const normOuterOptions = nfOptions.dev
-    ? await normalizeOptions(context, context.target.project, outerOptions)
-    : null;
-
-  if (nfOptions.dev) {
-    target = targetFromTargetString(outerOptions.buildTarget);
-    _options = (await context.getTargetOptions(
-      target
-    )) as unknown as JsonObject & ApplicationBuilderOptions;
-
-    builder = await context.getBuilderNameForTarget(target);
-    options = (await context.validateOptions(_options, builder)) as JsonObject &
-      ApplicationBuilderOptions;
-  }
-
-  const runServer = !!nfOptions.port;
-  const write = !runServer;
-  const watch = !!runServer || nfOptions.watch;
-
-  options.watch = watch;
-
-  if (nfOptions.baseHref) {
-    options.baseHref = nfOptions.baseHref;
-  }
-
-  const rebuildEvents = new RebuildHubs();
-
-  const adapter = createAngularBuildAdapter(options, context, rebuildEvents);
-  setBuildAdapter(adapter);
-
-  setLogLevel(options.verbose ? 'verbose' : 'info');
-
-  const outputPath = options.outputPath;
-
-  const outputOptions: Required<
-    Exclude<ApplicationBuilderOptions['outputPath'], string>
-  > = {
-    browser: 'browser',
-    server: 'server',
-    media: 'media',
-    ...(typeof outputPath === 'string' ? undefined : outputPath),
-    base: typeof outputPath === 'string' ? outputPath : outputPath.base,
-  };
-
-  const browserOutputPath = path.join(
-    outputOptions.base,
-    outputOptions.browser
-  );
-
-  const fedOptions: FederationOptions = {
-    workspaceRoot: context.workspaceRoot,
-    outputPath: browserOutputPath,
-    federationConfig: infereConfigPath(options.tsConfig),
-    tsConfig: options.tsConfig,
-    verbose: options.verbose,
-    watch: false, // options.watch,
-    dev: !!nfOptions.dev,
-  };
-
-  const config = await loadFederationConfig(fedOptions);
-  const externals = getExternals(config);
-  const plugins = [
-    createSharedMappingsPlugin(config.sharedMappings),
-    {
-      name: 'externals',
-      setup(build: PluginBuild) {
-        if (build.initialOptions.platform !== 'node') {
-          build.initialOptions.external = externals.filter(
-            (e) => e !== 'tslib'
-          );
-        }
-      },
-    },
-  ];
-
-  const middleware = [
-    (req, res, next) => {
-      const url = removeBaseHref(req, options.baseHref);
-
-      const fileName = path.join(
-        fedOptions.workspaceRoot,
-        fedOptions.outputPath,
-        url
-      );
-
-      const exists = fs.existsSync(fileName);
-
-      if (url !== '/' && url !== '' && exists) {
-        const lookup = mrmime.lookup;
-        const mimeType = lookup(path.extname(fileName)) || 'text/javascript';
-        const rawBody = fs.readFileSync(fileName, 'utf-8');
-        const body = addDebugInformation(url, rawBody);
-        res.writeHead(200, {
-          'Content-Type': mimeType,
-          'Access-Control-Allow-Origin': '*',
-          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
-          'Access-Control-Allow-Headers': 'Content-Type',
-        });
-        res.end(body);
-      } else {
-        next();
-      }
-    },
-  ];
-
-  const memResults = new MemResults();
-
-  let first = true;
-  let lastResult: { success: boolean } | undefined;
-
-  if (existsSync(fedOptions.outputPath)) {
-    rmSync(fedOptions.outputPath, { recursive: true });
-  }
-
-  if (!existsSync(fedOptions.outputPath)) {
-    mkdirSync(fedOptions.outputPath, { recursive: true });
-  }
-
-  if (!write) {
-    setMemResultHandler((outFiles, outDir) => {
-      const fullOutDir = outDir
-        ? path.join(fedOptions.workspaceRoot, outDir)
-        : null;
-      memResults.add(outFiles.map((f) => new EsBuildResult(f, fullOutDir)));
-    });
-  }
-
-  try {
-    await buildForFederation(config, fedOptions, externals);
-  } catch (e) {
-    process.exit(1);
-  }
-
-  options.deleteOutputPath = false;
-
-  // TODO: Clarify how DevServer needs to be executed. Not sure if its right.
-  // TODO: Clarify if buildApplication is needed `executeDevServerBuilder` seems to choose the correct DevServer
-
-  const appBuilderName = '@angular-devkit/build-angular:application';
-
-  const builderRun = nfOptions.dev
-    ? serveWithVite(
-        normOuterOptions,
-        appBuilderName,
-        _buildApplication,
-        context,
-        nfOptions.skipHtmlTransform
-          ? {}
-          : { indexHtml: transformIndexHtml(nfOptions) },
-        {
-          buildPlugins: plugins,
-          middleware,
-        }
-      )
-    : buildApplication(options, context, plugins);
-
-  // builderRun.output.subscribe(async (output) => {
-  for await (const output of builderRun) {
-    lastResult = output;
-
-    if (!output.success) {
-      setError('Compilation Error');
-      reloadBrowser();
-      continue;
-    } else {
-      setError(null);
-    }
-
-    if (!write && output.outputFiles) {
-      memResults.add(output.outputFiles.map((file) => new EsBuildResult(file)));
-    }
-
-    if (!write && output.assetFiles) {
-      memResults.add(
-        output.assetFiles.map((file) => new NgCliAssetResult(file))
-      );
-    }
-
-    if (write && !nfOptions.dev && !nfOptions.skipHtmlTransform) {
-      updateIndexHtml(fedOptions, nfOptions);
-    }
-
-    // if (first && runServer) {
-    //   startServer(nfOptions, fedOptions.outputPath, memResults);
-    // }
-
-    // if (!first && runServer) {
-    //   reloadBrowser();
-    // }
-
-    if (!runServer) {
-      yield output;
-    }
-
-    if (!first && nfOptions.dev) {
-      setTimeout(async () => {
-        // logger.info('Rebuilding federation artefacts ...');
-        // await Promise.all([rebuildEvents.rebuild.emit()]);
-        await buildForFederation(config, fedOptions, externals);
-        logger.info('Done!');
-
-        if (runServer) {
-          setTimeout(() => reloadShell(nfOptions.shell), 0);
-        }
-      }, nfOptions.rebuildDelay);
-    }
-
-    first = false;
-  }
-
-  yield lastResult || { success: false };
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default createBuilder(runBuilder) as any;
-
-function removeBaseHref(req: any, baseHref?: string) {
-  let url = req.url;
-
-  if (baseHref && url.startsWith(baseHref)) {
-    url = url.substr(baseHref.length);
-  }
-  return url;
-}
-
-function infereConfigPath(tsConfig: string): string {
-  const relProjectPath = path.dirname(tsConfig);
-  const relConfigPath = path.join(relProjectPath, 'federation.config.js');
-
-  return relConfigPath;
-}
-
-function transformIndexHtml(
-  nfOptions: NfBuilderSchema
-): (content: string) => Promise<string> {
-  return (content: string): Promise<string> =>
-    Promise.resolve(
-      updateScriptTags(content, 'main.js', 'polyfills.js', nfOptions)
-    );
-}
-
-function addDebugInformation(fileName: string, rawBody: string): string {
-  if (fileName !== '/remoteEntry.json') {
-    return rawBody;
-  }
-
-  const remoteEntry = JSON.parse(rawBody) as FederationInfo;
-  const shared = remoteEntry.shared;
-
-  if (!shared) {
-    return rawBody;
-  }
-
-  const sharedForVite = shared.map((s) => ({
-    ...s,
-    packageName: `/@id/${s.packageName}`,
-  }));
-
-  remoteEntry.shared = [...shared, ...sharedForVite];
-
-  return JSON.stringify(remoteEntry, null, 2);
-}

package/src/config.ts

@@ -1,6 +0,0 @@
-export { withNativeFederation } from '@softarc/native-federation/build';
-export {
-  findRootTsConfigJson,
-  share,
-  shareAll,
-} from '@softarc/native-federation/build';

package/src/executors/build/executor.spec.ts

@@ -1,11 +0,0 @@
-import { BuildExecutorSchema } from './schema';
-import executor from './executor';
-
-const options: BuildExecutorSchema = {};
-
-describe('Build Executor', () => {
-  it('can run', async () => {
-    const output = await executor(options, {});
-    expect(output.success).toBe(true);
-  });
-});

package/src/executors/build/executor.ts

@@ -1,12 +0,0 @@
-import { BuildExecutorSchema } from './schema';
-
-export default async function runExecutor(
-  options: BuildExecutorSchema,
-  nowos: unknown
-) {
-  console.log('Executor ran for Build', options, nowos);
-
-  return {
-    success: true,
-  };
-}

package/src/generators/native-federation/generator.spec.ts

@@ -1,20 +0,0 @@
-import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { Tree, readProjectConfiguration } from '@nx/devkit';
-
-import generator from './generator';
-import { NativeFederationGeneratorSchema } from './schema';
-
-describe('native-federation generator', () => {
-  let appTree: Tree;
-  const options: NativeFederationGeneratorSchema = { name: 'test' };
-
-  beforeEach(() => {
-    appTree = createTreeWithEmptyWorkspace();
-  });
-
-  it('should run successfully', async () => {
-    await generator(appTree, options);
-    const config = readProjectConfiguration(appTree, 'test');
-    expect(config).toBeDefined();
-  });
-});

package/src/generators/native-federation/generator.ts

@@ -1,76 +0,0 @@
-import {
-  addProjectConfiguration,
-  formatFiles,
-  generateFiles,
-  getWorkspaceLayout,
-  names,
-  offsetFromRoot,
-  Tree,
-} from '@nx/devkit';
-import * as path from 'path';
-import { NativeFederationGeneratorSchema } from './schema';
-
-interface NormalizedSchema extends NativeFederationGeneratorSchema {
-  projectName: string;
-  projectRoot: string;
-  projectDirectory: string;
-  parsedTags: string[];
-}
-
-function normalizeOptions(
-  tree: Tree,
-  options: NativeFederationGeneratorSchema
-): NormalizedSchema {
-  const name = names(options.name).fileName;
-  const projectDirectory = options.directory
-    ? `${names(options.directory).fileName}/${name}`
-    : name;
-  const projectName = projectDirectory.replace(new RegExp('/', 'g'), '-');
-  const projectRoot = `${getWorkspaceLayout(tree).libsDir}/${projectDirectory}`;
-  const parsedTags = options.tags
-    ? options.tags.split(',').map((s) => s.trim())
-    : [];
-
-  return {
-    ...options,
-    projectName,
-    projectRoot,
-    projectDirectory,
-    parsedTags,
-  };
-}
-
-function addFiles(tree: Tree, options: NormalizedSchema) {
-  const templateOptions = {
-    ...options,
-    ...names(options.name),
-    offsetFromRoot: offsetFromRoot(options.projectRoot),
-    template: '',
-  };
-  generateFiles(
-    tree,
-    path.join(__dirname, 'files'),
-    options.projectRoot,
-    templateOptions
-  );
-}
-
-export default async function (
-  tree: Tree,
-  options: NativeFederationGeneratorSchema
-) {
-  const normalizedOptions = normalizeOptions(tree, options);
-  addProjectConfiguration(tree, normalizedOptions.projectName, {
-    root: normalizedOptions.projectRoot,
-    projectType: 'library',
-    sourceRoot: `${normalizedOptions.projectRoot}/src`,
-    targets: {
-      build: {
-        executor: '@angular-architects/native-federation:build',
-      },
-    },
-    tags: normalizedOptions.parsedTags,
-  });
-  addFiles(tree, normalizedOptions);
-  await formatFiles(tree);
-}

package/src/patch-angular-build.ts

@@ -1,8 +0,0 @@
-// import { patchAngularBuild } from './utils/patch-angular-build';
-
-// const workspaceRoot = process.cwd();
-// patchAngularBuild(workspaceRoot);
-
-console.log(
-  'Please remove the postbuild task calling patch-angular-build. This is not needed since Native Federation 18.1 anymore!'
-);

package/src/plugin/dev-externals-mixin.ts

@@ -1,34 +0,0 @@
-import { federationBuilder } from '@softarc/native-federation/build';
-import { filterExternals } from './externals-skip-list';
-
-// see: https://github.com/vitejs/vite/issues/6393#issuecomment-1006819717
-
-export const devExternalsMixin = {
-  enforce: 'pre',
-  config(config) {
-    config.optimizeDeps = {
-      ...(config.optimizeDeps ?? {}),
-      exclude: [
-        ...(config.optimizeDeps?.exclude ?? []),
-        ...filterExternals(federationBuilder.externals),
-      ],
-    };
-  },
-  configResolved(resolvedConfig) {
-    const VALID_ID_PREFIX = `/@id/`;
-    const reg = new RegExp(
-      `${VALID_ID_PREFIX}(${federationBuilder.externals.join('|')})`,
-      'g'
-    );
-    resolvedConfig.plugins.push({
-      name: 'vite-plugin-ignore-static-import-replace-idprefix',
-      transform: (code) =>
-        reg.test(code) ? code.replace(reg, (m, s1) => s1) : code,
-    });
-  },
-  resolveId: (id) => {
-    if (filterExternals(federationBuilder.externals).includes(id)) {
-      return { id, external: true };
-    }
-  },
-} as any;

package/src/plugin/externals-skip-list.ts

@@ -1,5 +0,0 @@
-export const externalsSkipList = new Set(['tslib']);
-
-export function filterExternals(deps: string[]): string[] {
-  return deps.filter((d) => !externalsSkipList.has(d));
-}

package/src/plugin/index.ts

@@ -1,123 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-
-import { lookup } from 'mrmime';
-import { devExternalsMixin } from './dev-externals-mixin';
-import { filterExternals } from './externals-skip-list';
-import {
-  BuildHelperParams,
-  federationBuilder,
-} from '@softarc/native-federation/build';
-import { FederationInfo } from '@softarc/native-federation-runtime';
-
-type FedInfoRef = { federationInfo: FederationInfo };
-
-export const federation = (params: BuildHelperParams) => {
-  return {
-    ...devExternalsMixin,
-    name: '@module-federation/vite', // required, will show up in warnings and errors
-    async config(...args) {
-      await federationBuilder.init(params);
-      devExternalsMixin.config(...args);
-    },
-    options(o: unknown) {
-      o!['external'] = filterExternals(federationBuilder.externals);
-    },
-    async closeBundle() {
-      await federationBuilder.build();
-    },
-    async configureServer(server) {
-      const fedInfoRef: FedInfoRef = {
-        federationInfo: federationBuilder.federationInfo,
-      };
-      await configureDevServer(server, params, fedInfoRef);
-    },
-    transformIndexHtml(html: string) {
-      const fragment = '<script src="polyfills.js" type="module-shim">';
-      const updated = `
-<script type="esms-options">
-{
-"shimMode": true
-}
-</script>
-<script src="polyfills.js" type="module">
-`;
-      html = html.replace(/type="module"/g, 'type="module-shim"');
-      return html.replace(fragment, updated);
-    },
-  };
-};
-
-const configureDevServer = async (
-  server: any,
-  params: BuildHelperParams,
-  fedInfo: FedInfoRef
-) => {
-  await federationBuilder.build();
-
-  const op = params.options;
-  const dist = path.join(op.workspaceRoot, op.outputPath);
-  server.middlewares.use(serveFromDist(dist, fedInfo));
-};
-
-const serveFromDist = (dist: string, fedInfoRef: FedInfoRef) => {
-  const fedFiles = new Set([
-    ...fedInfoRef.federationInfo.shared.map((s) =>
-      path.join('/', s.outFileName)
-    ),
-    ...fedInfoRef.federationInfo.exposes.map((e) =>
-      path.join('/', e.outFileName)
-    ),
-    '/remoteEntry.json',
-  ]);
-
-  return (req, res, next) => {
-    if (!req.url || req.url.endsWith('/index.html') || !fedFiles.has(req.url)) {
-      next();
-      return;
-    }
-
-    const file = path.join(dist, req.url);
-    if (fs.existsSync(file) && fs.lstatSync(file).isFile()) {
-      res.setHeader('Access-Control-Allow-Origin', '*');
-      const type = lookup(req.url) || '';
-      res.setHeader('Content-Type', type);
-
-      const content = fs.readFileSync(file, 'utf-8');
-      //   const modified = enhanceFile(file, content);
-      const modified = content;
-      res.write(modified);
-      res.end();
-      return;
-    }
-
-    next();
-  };
-};
-
-// TODO: Unused, to delete?
-// const enhanceFile = (fileName: string, src: string): string => {
-//   if (fileName.endsWith('remoteEntry.json')) {
-//     let remoteEntry = JSON.parse(fs.readFileSync(fileName, 'utf-8'));
-//     remoteEntry = {
-//       ...remoteEntry,
-//       shared: (remoteEntry.shared || []).map((el) => ({
-//         ...el,
-//         outFileName: el.dev?.entryPoint.includes('/node_modules/')
-//           ? el.outFileName
-//           : normalize(path.join('@fs', el.dev?.entryPoint || '')),
-//       })),
-//       exposes: (remoteEntry.exposes || []).map((el) => ({
-//         ...el,
-//         outFileName: normalize(path.join('@fs', el.dev?.entryPoint || '')),
-//       })),
-//     };
-//     return JSON.stringify(remoteEntry, null, 2);
-//   }
-//   return src;
-// };
-
-// TODO: Unused, to delete?
-// const normalize = (path: string): string => {
-//   return path.replace(/\\/g, '/');
-// };