@teambit/bundler 1.0.107 → 1.0.108

package/browser-runtime.ts

@@ -0,0 +1,5 @@
+import { ExecutionContext } from '@teambit/envs';
+
+export type BrowserRuntime = {
+  entry: (context: ExecutionContext) => Promise<string[]>;
+};

package/bundle.ts

@@ -0,0 +1,3 @@
+export class Bundle {
+  constructor(readonly errors: Error) {}
+}

package/bundler-context.ts

@@ -0,0 +1,242 @@
+import { Component } from '@teambit/component';
+import { BuildContext } from '@teambit/builder';
+
+export type LibraryOptions = {
+  /**
+   * Specify a name for the library
+   */
+  name: string;
+  // TODO: decide which exact types we want to support and their exact names
+  /**
+   * Configure how the library will be exposed
+   * could be values like: 'umd', 'umd2', 'amd', 'commonjs',
+   */
+  type?: string;
+};
+
+export type Entry = {
+  /**
+   * Specifies the name of each output file on disk
+   */
+  filename: string;
+  /**
+   * Module(s) that are loaded upon startup
+   */
+  import: string | string[];
+
+  /**
+   * Specify library options to bundle a library from current entry
+   */
+  library?: LibraryOptions;
+};
+
+export type EntryMap = {
+  [entryName: string]: Entry;
+};
+
+export type Target = {
+  /**
+   * entries of the target.
+   */
+  entries: string[] | EntryMap;
+
+  /**
+   * array of components included in the target.
+   */
+  components: Component[];
+
+  /**
+   * output path of the target
+   */
+  outputPath: string;
+
+  /**
+   * This option determines the name of each output bundle
+   */
+  filename?: string;
+
+  /**
+   * This option determines the name of non-initial chunk files
+   */
+  chunkFilename?: string;
+
+  /**
+   * Whether to run compression by the bundler
+   */
+  compress?: boolean;
+
+  /**
+   * List of peer dependencies
+   */
+  peers?: string[];
+
+  /**
+   * config for html generation
+   */
+  html?: HtmlConfig[];
+
+  /**
+   * module targets to expose.
+   */
+  modules?: ModuleTarget[];
+
+  /**
+   * Name for the runtime chunk
+   */
+  runtimeChunkName?: string;
+
+  /**
+   * Different configuration related to chunking
+   */
+  chunking?: Chunking;
+
+  /**
+   * A path for the host root dir
+   * Host root dir is usually the env root dir
+   * This can be used in different bundle options which run require.resolve
+   * for example when configuring webpack aliases or webpack expose loader on the peers deps
+   */
+  hostRootDir?: string;
+
+  /**
+   * Array of host dependencies, they are used later in case you use one of the following:
+   *
+   */
+  hostDependencies?: string[];
+
+  /**
+   * Make the hostDependencies externals. externals (from webpack docs):
+   * The externals configuration option provides a way of excluding dependencies from the output bundles.
+   * Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment.
+   */
+  externalizeHostDependencies?: boolean;
+
+  /**
+   * Make aliases for the hostDependencies.
+   * the path of each one will be resolved by [hostRootDir, process.cwd(), __dirname]
+   * this will usually replace the instance of import one of the host dependencies by the instance of the env provided it
+   */
+  aliasHostDependencies?: boolean;
+};
+
+export type ModuleTarget = {
+  /**
+   * name of the module.
+   */
+  name: string;
+
+  /**
+   * module exposes.
+   */
+  exposes: {
+    [internalPath: string]: string;
+  };
+
+  shared: {
+    [key: string]: any;
+  };
+};
+
+export type HtmlConfig = {
+  /**
+   * The title to use for the generated HTML document
+   */
+  title: string;
+  /**
+   * The file to write the HTML to. Defaults to index.html
+   */
+  filename?: string;
+  /**
+   * Allows you to add only some chunks (e.g only the unit-test chunk)
+   */
+  chunks?: string[];
+  /**
+   * Load chunks according to their order in the `chunks` array
+   * @default auto
+   */
+  chunkOrder?: 'auto' | 'manual';
+  /**
+   * provide an inline template
+   */
+  templateContent: string;
+  /**
+   * Controls if and in what ways the output should be minified
+   */
+  minify?: boolean;
+
+  /**
+   * The favicon for the html page
+   */
+  favicon?: string;
+
+  // TODO: consider add chunksSortMode if there are more needs
+};
+
+export type Chunking = {
+  /**
+   * include all types of chunks (async / non-async) in splitting
+   */
+  splitChunks: boolean;
+};
+
+export type MetaData = {
+  /**
+   * Who initiate the bundling process
+   */
+  initiator?: string;
+  /**
+   * Env id (used usually to calculate the config)
+   */
+  envId?: string;
+
+  /**
+   * Whether the config is for an env template bundling
+   */
+  isEnvTemplate?: boolean;
+};
+export interface BundlerContext extends BuildContext {
+  /**
+   * targets for bundling.
+   */
+  targets: Target[];
+
+  /**
+   * determines whether it is a production build, default is `true`.
+   * in development, expect the bundler to favour debugging on the expanse of optimization.
+   */
+  development?: boolean;
+
+  /**
+   * public path output of the bundle.
+   */
+  publicPath?: string;
+
+  /**
+   * root path
+   */
+  rootPath?: string;
+
+  /**
+   * Whether to run compression by the bundler
+   */
+  compress?: boolean;
+
+  /**
+   * config for html generation for all targets
+   */
+  html?: HtmlConfig[];
+
+  /**
+   * modules for bundle to expose. used by module federation at webpack, or with different methods applied by various bundlers.
+   */
+  modules?: {
+    name: string;
+    fileName: string;
+    exposes: { [key: string]: string };
+  };
+
+  /**
+   * Additional info that can be used by the bundler for different stuff like logging info
+   */
+  metaData?: MetaData;
+}

package/bundler.aspect.ts

@@ -0,0 +1,5 @@
+import { Aspect } from '@teambit/harmony';
+
+export const BundlerAspect = Aspect.create({
+  id: 'teambit.compilation/bundler',
+});

package/bundler.main.runtime.ts

@@ -0,0 +1,159 @@
+import PubsubAspect, { PubsubMain } from '@teambit/pubsub';
+import { MainRuntime } from '@teambit/cli';
+import { Component, ComponentAspect } from '@teambit/component';
+import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';
+import { EnvsAspect, EnvsMain } from '@teambit/envs';
+import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import { BrowserRuntime } from './browser-runtime';
+import { BundlerAspect } from './bundler.aspect';
+import { ComponentServer } from './component-server';
+import { BundlerContext } from './bundler-context';
+import { devServerSchema } from './dev-server.graphql';
+import { DevServerService } from './dev-server.service';
+import { BundlerService } from './bundler.service';
+import { DevServer } from './dev-server';
+
+export type DevServerTransformer = (devServer: DevServer, { envId }: { envId: string }) => DevServer;
+
+export type BrowserRuntimeSlot = SlotRegistry<BrowserRuntime>;
+export type DevServerTransformerSlot = SlotRegistry<DevServerTransformer>;
+
+export type BundlerConfig = {
+  dedicatedEnvDevServers: string[];
+};
+
+/**
+ * bundler extension.
+ */
+export class BundlerMain {
+  constructor(
+    readonly config: BundlerConfig,
+    /**
+     * Pubsub extension.
+     */
+    private pubsub: PubsubMain,
+
+    /**
+     * environments extension.
+     */
+    private envs: EnvsMain,
+
+    /**
+     * dev server service.
+     */
+    private devService: DevServerService,
+
+    /**
+     * browser runtime slot.
+     */
+    private runtimeSlot: BrowserRuntimeSlot,
+
+    /**
+     * dev server transformer slot.
+     */
+    private devServerTransformerSlot: DevServerTransformerSlot
+  ) {}
+
+  /**
+   * load all given components in corresponding dev servers.
+   * @param components defaults to all components in the workspace.
+   */
+  async devServer(components: Component[]): Promise<ComponentServer[]> {
+    const envRuntime = await this.envs.createEnvironment(components);
+    // TODO: this must be refactored away from here. this logic should be in the Preview.
+    // @ts-ignore
+    const servers: ComponentServer[] = await envRuntime.runOnce<ComponentServer[]>(this.devService, {
+      dedicatedEnvDevServers: this.config.dedicatedEnvDevServers,
+    });
+    this._componentServers = servers;
+
+    this.indexByComponent();
+
+    return this._componentServers;
+  }
+
+  /**
+   * get a dev server instance containing a component.
+   * @param component
+   */
+  getComponentServer(component: Component): undefined | ComponentServer {
+    if (!this._componentServers) return undefined;
+    const envId = this.envs.getEnvId(component);
+    const server = this._componentServers.find(
+      (componentServer) =>
+        componentServer.context.relatedContexts.includes(envId) || componentServer.context.id === envId
+    );
+
+    return server;
+  }
+
+  /**
+   * compute entry files for bundling components in a given execution context.
+   */
+  async computeEntries(context: BundlerContext) {
+    const slotEntries = await Promise.all(
+      this.runtimeSlot.values().map(async (browserRuntime) => browserRuntime.entry(context))
+    );
+
+    const slotPaths = slotEntries.reduce((acc, current) => {
+      acc = acc.concat(current);
+      return acc;
+    });
+
+    return slotPaths;
+  }
+
+  /**
+   * register a new browser runtime environment.
+   * @param browserRuntime
+   */
+  registerTarget(browserRuntime: BrowserRuntime[]) {
+    browserRuntime.map((runtime) => {
+      return this.runtimeSlot.register(runtime);
+    });
+
+    return this;
+  }
+
+  /**
+   * register a new dev server transformer.
+   * @param devServerTransformer
+   */
+  registerDevServerTransformer(devServerTransformer: DevServerTransformer) {
+    this.devServerTransformerSlot.register(devServerTransformer);
+    return this;
+  }
+
+  /**
+   * component servers.
+   */
+  private _componentServers: null | ComponentServer[];
+
+  private indexByComponent() {}
+
+  static slots = [Slot.withType<BrowserRuntime>(), Slot.withType<DevServerTransformerSlot>()];
+
+  static runtime = MainRuntime;
+  static dependencies = [PubsubAspect, EnvsAspect, GraphqlAspect, DependencyResolverAspect, ComponentAspect];
+
+  static defaultConfig = {
+    dedicatedEnvDevServers: [],
+  };
+
+  static async provider(
+    [pubsub, envs, graphql, dependencyResolver]: [PubsubMain, EnvsMain, GraphqlMain, DependencyResolverMain],
+    config,
+    [runtimeSlot, devServerTransformerSlot]: [BrowserRuntimeSlot, DevServerTransformerSlot]
+  ) {
+    const devServerService = new DevServerService(pubsub, dependencyResolver, runtimeSlot, devServerTransformerSlot);
+    const bundler = new BundlerMain(config, pubsub, envs, devServerService, runtimeSlot, devServerTransformerSlot);
+    envs.registerService(devServerService, new BundlerService());
+
+    graphql.register(devServerSchema(bundler));
+
+    return bundler;
+  }
+}
+
+BundlerAspect.addRuntime(BundlerMain);

package/bundler.ts

@@ -0,0 +1,92 @@
+import { Component } from '@teambit/component';
+
+export interface DevServer {
+  start(): void;
+}
+
+export type Asset = {
+  /**
+   * name of the asset.
+   */
+  name: string;
+
+  /**
+   * size of the asset in bytes.
+   */
+  size: number;
+
+  /**
+   * size of the compressed asset in bytes.
+   */
+  compressedSize?: number;
+};
+
+export type ChunksAssetsMap = {
+  [assetName: string]: string[];
+};
+
+export type EntryAssets = {
+  assets: Asset[];
+  auxiliaryAssets: Asset[];
+  assetsSize: number;
+  compressedAssetsSize?: number;
+  auxiliaryAssetsSize: number;
+  compressedAuxiliaryAssetsSize: number;
+};
+
+export type EntriesAssetsMap = {
+  [entryId: string]: EntryAssets;
+};
+
+export type BundlerResult = {
+  /**
+   * list of generated assets.
+   */
+  assets: Asset[];
+
+  /**
+   * A map of assets names for each chunk
+   */
+  assetsByChunkName?: ChunksAssetsMap;
+
+  /**
+   * A map of assets for each entry point
+   */
+  entriesAssetsMap?: EntriesAssetsMap;
+
+  /**
+   * errors thrown during the bundling process.
+   */
+  errors: Error[];
+
+  /**
+   * warnings thrown during the bundling process.
+   */
+  warnings: string[];
+
+  /**
+   * components included in the bundling process.
+   */
+  components: Component[];
+
+  /**
+   * timestamp in milliseconds when the task started
+   */
+  startTime?: number;
+
+  /**
+   * timestamp in milliseconds when the task ended
+   */
+  endTime?: number;
+
+  /**
+   * out put path of the Bundler Result
+   */
+  outputPath?: string;
+};
+
+export interface Bundler {
+  run(): Promise<BundlerResult[]>;
+}
+
+export type BundlerMode = 'dev' | 'prod';

package/component-server.ts

@@ -0,0 +1,94 @@
+import { Component } from '@teambit/component';
+import { ExecutionContext } from '@teambit/envs';
+import { PubsubMain } from '@teambit/pubsub';
+
+import { AddressInfo } from 'net';
+
+import { DevServer } from './dev-server';
+import { BindError } from './exceptions';
+import { ComponentsServerStartedEvent } from './events';
+import { BundlerAspect } from './bundler.aspect';
+import { selectPort } from './select-port';
+
+export class ComponentServer {
+  // why is this here
+  errors?: Error[];
+  constructor(
+    /**
+     * browser runtime slot
+     */
+    private pubsub: PubsubMain,
+
+    /**
+     * components contained in the existing component server.
+     */
+    readonly context: ExecutionContext,
+
+    /**
+     * port range of the component server.
+     */
+    readonly portRange: number[],
+
+    /**
+     * env dev server.
+     */
+    readonly devServer: DevServer
+  ) {}
+
+  hostname: string | undefined;
+
+  /**
+   * determine whether component server contains a component.
+   */
+  hasComponent(component: Component) {
+    return this.context.components.find((contextComponent) => contextComponent.equals(component));
+  }
+
+  get port() {
+    return this._port;
+  }
+
+  _port: number;
+  async listen() {
+    const port = await selectPort(this.portRange);
+    this._port = port;
+    const server = await this.devServer.listen(port);
+    const address = server.address();
+    const hostname = this.getHostname(address);
+    if (!address) throw new BindError();
+    this.hostname = hostname;
+
+    this.pubsub.pub(BundlerAspect.id, this.createComponentsServerStartedEvent(server, this.context, hostname, port));
+  }
+
+  private getHostname(address: string | AddressInfo | null) {
+    if (address === null) throw new BindError();
+    if (typeof address === 'string') return address;
+
+    let hostname = address.address;
+    if (hostname === '::') {
+      hostname = 'localhost';
+    }
+
+    return hostname;
+  }
+
+  private onChange() {}
+
+  private createComponentsServerStartedEvent: (
+    DevServer,
+    ExecutionContext,
+    string,
+    number
+  ) => ComponentsServerStartedEvent = (componentsServer, context, hostname, port) => {
+    return new ComponentsServerStartedEvent(Date.now(), componentsServer, context, hostname, port);
+  };
+
+  /**
+   * get the url of the component server.
+   */
+  get url() {
+    // tailing `/` is required!
+    return `/preview/${this.context.envRuntime.id}/`;
+  }
+}

package/dedup-envs.ts

@@ -0,0 +1,84 @@
+import { DependencyResolverMain } from '@teambit/dependency-resolver';
+import type { ExecutionContext } from '@teambit/envs';
+
+type GroupIdContextMap = Record<string, ExecutionContext[]>;
+
+/**
+ * de-duping dev servers by the amount of type the dev server configuration was overridden by envs.
+ * This will split the dev server to groups of dev server that share the same webpack config, and same peer dependencies
+ * @param contexts
+ * @param dependencyResolver
+ * @param dedicatedEnvDevServers
+ */
+export async function dedupEnvs(
+  contexts: ExecutionContext[],
+  dependencyResolver: DependencyResolverMain,
+  dedicatedEnvDevServers?: string[]
+) {
+  const idsGroups = groupByEnvId(contexts, dedicatedEnvDevServers);
+  const hasRootComponents = dependencyResolver.hasRootComponents();
+  // Do not split envs by peers if root components is enabled as it should be already handled by the package manager
+  // this will improve the performance of the dev server when root components is enabled
+  const finalGroups = hasRootComponents ? idsGroups : await splitByPeers(idsGroups, dependencyResolver);
+  return finalGroups;
+}
+
+function groupByEnvId(contexts: ExecutionContext[], dedicatedEnvDevServers?: string[]) {
+  const groupedEnvs: GroupIdContextMap = {};
+
+  contexts.forEach((context) => {
+    const envId = getEnvId(context, dedicatedEnvDevServers);
+    if (!envId) return;
+    if (!(envId in groupedEnvs)) groupedEnvs[envId] = [];
+
+    groupedEnvs[envId].push(context);
+  });
+
+  return groupedEnvs;
+}
+
+async function splitByPeers(idsGroups: GroupIdContextMap, dependencyResolver: DependencyResolverMain) {
+  const newGroupedEnvs: GroupIdContextMap = {};
+  const promises = Object.values(idsGroups).map(async (contexts) => {
+    const peersGroups = await groupByPeersHash(contexts, dependencyResolver);
+    Object.assign(newGroupedEnvs, peersGroups);
+  });
+  await Promise.all(promises);
+  return newGroupedEnvs;
+}
+
+function getEnvId(context: ExecutionContext, dedicatedServers?: string[]): string | undefined {
+  const id = context.id.split('@')[0];
+
+  if (dedicatedServers?.includes(id)) {
+    return context.id;
+  }
+
+  return context.env?.getDevEnvId(context);
+}
+
+async function groupByPeersHash(contexts: ExecutionContext[], dependencyResolver: DependencyResolverMain) {
+  const peerGroups: GroupIdContextMap = {};
+
+  await Promise.all(
+    contexts.map(async (context) => {
+      const env = context.env;
+      const policy = await dependencyResolver.getComponentEnvPolicyFromEnv(env, { envId: context.id });
+      const peersHash = policy.byLifecycleType('peer').hashNameVersion();
+      if (!peerGroups[peersHash]) {
+        peerGroups[peersHash] = [];
+      }
+      peerGroups[peersHash].push(context);
+    })
+  );
+  return indexPeerGroupsById(peerGroups);
+}
+
+function indexPeerGroupsById(peerGroups: GroupIdContextMap) {
+  const result: GroupIdContextMap = Object.values(peerGroups).reduce((acc, contexts) => {
+    const firstId = contexts[0].id;
+    acc[firstId] = contexts;
+    return acc;
+  }, {});
+  return result;
+}