@teambit/preview 0.0.566 → 0.0.570

package/events/click-inside-an-iframe.ts

@@ -0,0 +1,14 @@
+/* eslint-disable max-classes-per-file */
+import { BitBaseEvent } from '@teambit/pubsub';
+
+class ClickInsideAnIframeEventData {
+  constructor(private clickEvent: any) {}
+}
+
+export class ClickInsideAnIframeEvent extends BitBaseEvent<ClickInsideAnIframeEventData> {
+  static readonly TYPE = 'click-inside-an-iframe';
+
+  constructor(readonly timestamp = Date.now(), readonly clickEvent) {
+    super(ClickInsideAnIframeEvent.TYPE, '0.0.1', timestamp, new ClickInsideAnIframeEventData(clickEvent));
+  }
+}

package/events/index.ts

@@ -0,0 +1 @@
+export * from './click-inside-an-iframe';

package/exceptions/bundling-strategy-not-found.ts

@@ -0,0 +1,5 @@
+export class BundlingStrategyNotFound extends Error {
+  constructor(private strategyName: string) {
+    super(`bundling strategy with name ${strategyName} was not found`);
+  }
+}

package/exceptions/index.ts

@@ -0,0 +1,3 @@
+export { PreviewNotFound } from './preview-not-found';
+export { PreviewArtifactNotFound } from './preview-artifact-not-found';
+export { BundlingStrategyNotFound } from './bundling-strategy-not-found';

package/exceptions/preview-artifact-not-found.ts

@@ -0,0 +1,8 @@
+import { BitError } from '@teambit/bit-error';
+import { ComponentID } from '@teambit/component';
+
+export class PreviewArtifactNotFound extends BitError {
+  constructor(componentId: ComponentID) {
+    super(`preview for component ${componentId.toString()} was not found`);
+  }
+}

package/exceptions/preview-not-found.ts

@@ -0,0 +1,5 @@
+export class PreviewNotFound extends Error {
+  constructor(name: string | null) {
+    super(`Preview for name: ${name} was not found`);
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "0.0.566",
+  "version": "0.0.570",
   "homepage": "https://bit.dev/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "0.0.566"
+    "version": "0.0.570"
   },
   "dependencies": {
     "fs-extra": "10.0.0",
@@ -17,26 +17,26 @@
     "mime": "2.5.2",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/builder": "0.0.566",
-    "@teambit/bundler": "0.0.566",
-    "@teambit/component": "0.0.566",
-    "@teambit/envs": "0.0.566",
-    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.467",
-    "@teambit/aspect-loader": "0.0.566",
-    "@teambit/cli": "0.0.393",
-    "@teambit/logger": "0.0.478",
-    "@teambit/pkg": "0.0.566",
-    "@teambit/pubsub": "0.0.566",
-    "@teambit/ui": "0.0.566",
-    "@teambit/workspace": "0.0.566",
-    "@teambit/component-id": "0.0.383",
-    "@teambit/express": "0.0.482",
-    "@teambit/ui-foundation.ui.pages.static-error": "0.0.54",
-    "@teambit/compiler": "0.0.566",
-    "@teambit/preview.cli.preview-server-status": "0.0.473",
-    "@teambit/preview.cli.webpack-events-listener": "0.0.143",
-    "@teambit/isolator": "0.0.566",
-    "@teambit/bit-error": "0.0.379"
+    "@teambit/builder": "0.0.570",
+    "@teambit/bundler": "0.0.570",
+    "@teambit/component": "0.0.570",
+    "@teambit/envs": "0.0.570",
+    "@teambit/toolbox.path.to-windows-compatible-path": "0.0.469",
+    "@teambit/aspect-loader": "0.0.570",
+    "@teambit/cli": "0.0.395",
+    "@teambit/logger": "0.0.482",
+    "@teambit/pkg": "0.0.570",
+    "@teambit/pubsub": "0.0.570",
+    "@teambit/ui": "0.0.570",
+    "@teambit/workspace": "0.0.570",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/express": "0.0.486",
+    "@teambit/ui-foundation.ui.pages.static-error": "0.0.56",
+    "@teambit/compiler": "0.0.570",
+    "@teambit/preview.cli.preview-server-status": "0.0.475",
+    "@teambit/preview.cli.webpack-events-listener": "0.0.145",
+    "@teambit/isolator": "0.0.570",
+    "@teambit/bit-error": "0.0.381"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.7",
@@ -49,10 +49,10 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/preview.aspect-docs.preview": "0.0.112"
+    "@teambit/preview.aspect-docs.preview": "0.0.116"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.179",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -80,27 +80,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.179",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/preview.main.runtime.tsx

@@ -0,0 +1,346 @@
+import { BuilderAspect, BuilderMain } from '@teambit/builder';
+import { BundlerAspect, BundlerMain } from '@teambit/bundler';
+import { PubsubAspect, PubsubMain } from '@teambit/pubsub';
+import { MainRuntime } from '@teambit/cli';
+import { Component, ComponentAspect, ComponentMain, ComponentMap, ComponentID } from '@teambit/component';
+import { EnvsAspect, EnvsMain, ExecutionContext } from '@teambit/envs';
+import { Slot, SlotRegistry, Harmony } from '@teambit/harmony';
+import { UIAspect, UiMain } from '@teambit/ui';
+import { CACHE_ROOT } from '@teambit/legacy/dist/constants';
+import objectHash from 'object-hash';
+import { uniq } from 'lodash';
+import { writeFileSync, existsSync, mkdirSync } from 'fs-extra';
+import { join } from 'path';
+import { PkgAspect, PkgMain } from '@teambit/pkg';
+import { AspectDefinition, AspectLoaderMain, AspectLoaderAspect } from '@teambit/aspect-loader';
+import WorkspaceAspect, { Workspace } from '@teambit/workspace';
+import { LoggerAspect, LoggerMain, Logger } from '@teambit/logger';
+import { BundlingStrategyNotFound } from './exceptions';
+import { generateLink } from './generate-link';
+import { PreviewArtifact } from './preview-artifact';
+import { PreviewDefinition } from './preview-definition';
+import { PreviewAspect, PreviewRuntime } from './preview.aspect';
+import { PreviewRoute } from './preview.route';
+import { PreviewTask } from './preview.task';
+import { BundlingStrategy } from './bundling-strategy';
+import { EnvBundlingStrategy, ComponentBundlingStrategy } from './strategies';
+import { ExecutionRef } from './execution-ref';
+import { PreviewStartPlugin } from './preview.start-plugin';
+
+const noopResult = {
+  results: [],
+  toString: () => `updating link file`,
+};
+
+const DEFAULT_TEMP_DIR = join(CACHE_ROOT, PreviewAspect.id);
+
+export type PreviewDefinitionRegistry = SlotRegistry<PreviewDefinition>;
+
+export type PreviewConfig = {
+  bundlingStrategy: string;
+  disabled: boolean;
+};
+
+export type BundlingStrategySlot = SlotRegistry<BundlingStrategy>;
+
+export class PreviewMain {
+  constructor(
+    /**
+     * harmony context.
+     */
+    private harmony: Harmony,
+
+    /**
+     * slot for preview definitions.
+     */
+    private previewSlot: PreviewDefinitionRegistry,
+
+    private ui: UiMain,
+
+    private envs: EnvsMain,
+
+    private pkg: PkgMain,
+
+    private aspectLoader: AspectLoaderMain,
+
+    readonly config: PreviewConfig,
+
+    private bundlingStrategySlot: BundlingStrategySlot,
+
+    private builder: BuilderMain,
+
+    private workspace: Workspace | undefined,
+
+    private logger: Logger
+  ) {}
+
+  get tempFolder(): string {
+    return this.workspace?.getTempDir(PreviewAspect.id) || DEFAULT_TEMP_DIR;
+  }
+
+  async getPreview(component: Component): Promise<PreviewArtifact | undefined> {
+    const artifacts = await this.builder.getArtifactsVinylByExtension(component, PreviewAspect.id);
+    if (!artifacts.length) return undefined;
+
+    return new PreviewArtifact(artifacts);
+  }
+
+  getDefs(): PreviewDefinition[] {
+    return this.previewSlot.values();
+  }
+
+  private writeHash = new Map<string, string>();
+  private timestamp = Date.now();
+
+  /**
+   * write a link to load custom modules dynamically.
+   * @param prefix write
+   * @param moduleMap map of components to module paths to require.
+   * @param defaultModule
+   * @param dirName
+   */
+  writeLink(prefix: string, moduleMap: ComponentMap<string[]>, defaultModule: string | undefined, dirName: string) {
+    const contents = generateLink(prefix, moduleMap, defaultModule);
+    const hash = objectHash(contents);
+    const targetPath = join(dirName, `__${prefix}-${this.timestamp}.js`);
+
+    // write only if link has changed (prevents triggering fs watches)
+    if (this.writeHash.get(targetPath) !== hash) {
+      writeFileSync(targetPath, contents);
+      this.writeHash.set(targetPath, hash);
+    }
+
+    return targetPath;
+  }
+
+  private executionRefs = new Map<string, ExecutionRef>();
+
+  private async getPreviewTarget(
+    /** execution context (of the specific env) */
+    context: ExecutionContext
+  ): Promise<string[]> {
+    // store context for later link-file updates
+    // also register related envs that this context is acting on their behalf
+    [context.id, ...context.relatedContexts].forEach((ctxId) => {
+      this.executionRefs.set(ctxId, new ExecutionRef(context));
+    });
+
+    const previewRuntime = await this.writePreviewRuntime(context);
+    const linkFiles = await this.updateLinkFiles(context.components, context);
+
+    return [...linkFiles, previewRuntime];
+  }
+
+  private updateLinkFiles(components: Component[] = [], context: ExecutionContext) {
+    const previews = this.previewSlot.values();
+    const paths = previews.map(async (previewDef) => {
+      const templatePath = await previewDef.renderTemplatePath?.(context);
+
+      const map = await previewDef.getModuleMap(components);
+      const environment = context.envRuntime.env;
+      const compilerInstance = environment.getCompiler?.();
+      const withPaths = map.map<string[]>((files, component) => {
+        const modulePath =
+          compilerInstance?.getPreviewComponentRootPath?.(component) || this.pkg.getModulePath(component);
+        return files.map((file) => {
+          if (!this.workspace || !compilerInstance) {
+            return file.path;
+          }
+          const distRelativePath = compilerInstance.getDistPathBySrcPath(file.relative);
+          return join(this.workspace.path, modulePath, distRelativePath);
+        });
+        // return files.map((file) => file.path);
+      });
+
+      const dirPath = join(this.tempFolder, context.id);
+      if (!existsSync(dirPath)) mkdirSync(dirPath, { recursive: true });
+
+      const link = this.writeLink(previewDef.prefix, withPaths, templatePath, dirPath);
+      return link;
+    });
+
+    return Promise.all(paths);
+  }
+
+  async writePreviewRuntime(context: { components: Component[] }) {
+    const ui = this.ui.getUi();
+    if (!ui) throw new Error('ui not found');
+    const [name, uiRoot] = ui;
+    const resolvedAspects = await uiRoot.resolveAspects(PreviewRuntime.name);
+    const filteredAspects = this.filterAspectsByExecutionContext(resolvedAspects, context);
+    const filePath = await this.ui.generateRoot(filteredAspects, name, 'preview', PreviewAspect.id);
+    return filePath;
+  }
+
+  /**
+   * Filter the aspects to have only aspects that are:
+   * 1. core aspects
+   * 2. configured on the host (workspace/scope)
+   * 3. used by at least one component from the context
+   * @param aspects
+   * @param context
+   */
+  private filterAspectsByExecutionContext(aspects: AspectDefinition[], context: { components: Component[] }) {
+    let allComponentContextAspects: string[] = [];
+    allComponentContextAspects = context.components.reduce((acc, curr) => {
+      return acc.concat(curr.state.aspects.ids);
+    }, allComponentContextAspects);
+    const hostAspects = Object.keys(this.harmony.config.toObject());
+    const allAspectsToInclude = uniq(hostAspects.concat(allComponentContextAspects));
+    const filtered = aspects.filter((aspect) => {
+      if (!aspect.getId) {
+        return false;
+      }
+      return this.aspectLoader.isCoreAspect(aspect.getId) || allAspectsToInclude.includes(aspect.getId);
+    });
+    return filtered;
+  }
+
+  private getDefaultStrategies() {
+    return [new EnvBundlingStrategy(this), new ComponentBundlingStrategy()];
+  }
+
+  // TODO - executionContext should be responsible for updating components list, and emit 'update' events
+  // instead we keep track of changes
+  private handleComponentChange = async (c: Component, updater: (currentComponents: ExecutionRef) => void) => {
+    const env = this.envs.getEnv(c);
+    const envId = env.id.toString();
+
+    const executionRef = this.executionRefs.get(envId);
+    if (!executionRef) {
+      this.logger.warn(
+        `failed to update link file for component "${c.id.toString()}" - could not find execution context for ${envId}`
+      );
+      return noopResult;
+    }
+
+    // add / remove / etc
+    updater(executionRef);
+
+    await this.updateLinkFiles(executionRef.currentComponents, executionRef.executionCtx);
+
+    return noopResult;
+  };
+
+  private handleComponentRemoval = (cId: ComponentID) => {
+    let component: Component | undefined;
+    this.executionRefs.forEach((components) => {
+      const found = components.get(cId);
+      if (found) component = found;
+    });
+    if (!component) return Promise.resolve(noopResult);
+
+    return this.handleComponentChange(component, (currentComponents) => currentComponents.remove(cId));
+  };
+
+  /**
+   * return the configured bundling strategy.
+   */
+  getBundlingStrategy(): BundlingStrategy {
+    const defaultStrategies = this.getDefaultStrategies();
+    const strategyName = this.config.bundlingStrategy;
+    const strategies = this.bundlingStrategySlot.values().concat(defaultStrategies);
+    const selected = strategies.find((strategy) => {
+      return strategy.name === strategyName;
+    });
+
+    if (!selected) throw new BundlingStrategyNotFound(strategyName);
+
+    return selected;
+  }
+
+  /**
+   * register a new bundling strategy. default available strategies are `env` and ``
+   */
+  registerBundlingStrategy(bundlingStrategy: BundlingStrategy) {
+    this.bundlingStrategySlot.register(bundlingStrategy);
+    return this;
+  }
+
+  /**
+   * register a new preview definition.
+   */
+  registerDefinition(previewDef: PreviewDefinition) {
+    this.previewSlot.register(previewDef);
+  }
+
+  static slots = [Slot.withType<PreviewDefinition>(), Slot.withType<BundlingStrategy>()];
+
+  static runtime = MainRuntime;
+  static dependencies = [
+    BundlerAspect,
+    BuilderAspect,
+    ComponentAspect,
+    UIAspect,
+    EnvsAspect,
+    WorkspaceAspect,
+    PkgAspect,
+    PubsubAspect,
+    AspectLoaderAspect,
+    LoggerAspect,
+  ];
+
+  static defaultConfig = {
+    bundlingStrategy: 'env',
+    disabled: false,
+  };
+
+  static async provider(
+    [bundler, builder, componentExtension, uiMain, envs, workspace, pkg, pubsub, aspectLoader, loggerMain]: [
+      BundlerMain,
+      BuilderMain,
+      ComponentMain,
+      UiMain,
+      EnvsMain,
+      Workspace | undefined,
+      PkgMain,
+      PubsubMain,
+      AspectLoaderMain,
+      LoggerMain
+    ],
+    config: PreviewConfig,
+    [previewSlot, bundlingStrategySlot]: [PreviewDefinitionRegistry, BundlingStrategySlot],
+    harmony: Harmony
+  ) {
+    const logger = loggerMain.createLogger(PreviewAspect.id);
+
+    const preview = new PreviewMain(
+      harmony,
+      previewSlot,
+      uiMain,
+      envs,
+      pkg,
+      aspectLoader,
+      config,
+      bundlingStrategySlot,
+      builder,
+      workspace,
+      logger
+    );
+
+    if (workspace) uiMain.registerStartPlugin(new PreviewStartPlugin(workspace, bundler, uiMain, pubsub, logger));
+
+    componentExtension.registerRoute([new PreviewRoute(preview, logger)]);
+    bundler.registerTarget([
+      {
+        entry: preview.getPreviewTarget.bind(preview),
+      },
+    ]);
+
+    if (!config.disabled) builder.registerBuildTasks([new PreviewTask(bundler, preview)]);
+
+    if (workspace) {
+      workspace.registerOnComponentAdd((c) =>
+        preview.handleComponentChange(c, (currentComponents) => currentComponents.add(c))
+      );
+      workspace.registerOnComponentChange((c) =>
+        preview.handleComponentChange(c, (currentComponents) => currentComponents.update(c))
+      );
+      workspace.registerOnComponentRemove((cId) => preview.handleComponentRemoval(cId));
+    }
+
+    return preview;
+  }
+}
+
+PreviewAspect.addRuntime(PreviewMain);

package/preview.preview.runtime.tsx

@@ -0,0 +1,148 @@
+import PubsubAspect, { PubsubPreview } from '@teambit/pubsub';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import { ComponentID } from '@teambit/component-id';
+
+import { PreviewNotFound } from './exceptions';
+import { PreviewType } from './preview-type';
+import { PreviewAspect, PreviewRuntime } from './preview.aspect';
+import { ClickInsideAnIframeEvent } from './events';
+import { PreviewModule } from './types/preview-module';
+import { RenderingContext } from './rendering-context';
+
+export type PreviewSlot = SlotRegistry<PreviewType>;
+
+const PREVIEW_MODULES: Record<string, PreviewModule> = {};
+
+export type RenderingContextProvider = () => { [key: string]: any };
+export type RenderingContextSlot = SlotRegistry<RenderingContextProvider>;
+
+export class PreviewPreview {
+  constructor(
+    /**
+     * register to pubsub
+     */
+    private pubsub: PubsubPreview,
+
+    /**
+     * preview slot.
+     */
+    private previewSlot: PreviewSlot,
+
+    private renderingContextSlot: RenderingContextSlot
+  ) {
+    this.registerClickPubSub();
+  }
+
+  private registerClickPubSub() {
+    window.addEventListener('click', (e) => {
+      const timestamp = Date.now();
+      const clickEvent = Object.assign({}, e);
+      this.pubsub.pub(PreviewAspect.id, new ClickInsideAnIframeEvent(timestamp, clickEvent));
+    });
+  }
+
+  /**
+   * render the preview.
+   */
+  render = () => {
+    const { previewName, componentId } = this.getLocation();
+    const name = previewName || this.getDefault();
+
+    const preview = this.getPreview(name);
+    if (!preview || !componentId) {
+      throw new PreviewNotFound(previewName);
+    }
+    const includes = (preview.include || [])
+      .map((prevName) => {
+        const includedPreview = this.getPreview(prevName);
+        if (!includedPreview) return undefined;
+
+        return includedPreview.selectPreviewModel?.(componentId.fullName, PREVIEW_MODULES[prevName]);
+      })
+      .filter((module) => !!module);
+
+    return preview.render(componentId.fullName, PREVIEW_MODULES[name], includes, this.getRenderingContext());
+  };
+
+  /**
+   * register a new preview.
+   */
+  registerPreview(preview: PreviewType) {
+    this.previewSlot.register(preview);
+    return this;
+  }
+
+  /**
+   * get the preview rendering context.
+   */
+  getRenderingContext() {
+    return new RenderingContext(this.renderingContextSlot);
+  }
+
+  /**
+   * allows aspects to add rendering contexts.
+   * render context is available through all preview definitions.
+   */
+  registerRenderContext(renderContext: RenderingContextProvider) {
+    this.renderingContextSlot.register(renderContext);
+    return this;
+  }
+
+  getDefault() {
+    const previews = this.previewSlot.values();
+    const defaultOne = previews.find((previewCandidate) => previewCandidate.default);
+
+    return defaultOne?.name || previews[0].name;
+  }
+
+  private getPreview(previewName: string): undefined | PreviewType {
+    const previews = this.previewSlot.values();
+    const preview = previews.find((previewCandidate) => previewCandidate.name === previewName);
+
+    return preview;
+  }
+
+  private getParam(query: string, param: string) {
+    const params = new URLSearchParams(query);
+    return params.get(param);
+  }
+
+  private getLocation() {
+    const withoutHash = window.location.hash.substring(1);
+    const [before, after] = withoutHash.split('?');
+
+    return {
+      previewName: this.getParam(after, 'preview'),
+      componentId: ComponentID.tryFromString(before),
+    };
+  }
+
+  static runtime = PreviewRuntime;
+
+  static dependencies = [PubsubAspect];
+
+  static slots = [Slot.withType<PreviewType>(), Slot.withType<RenderingContextProvider>()];
+
+  static async provider(
+    [pubsub]: [PubsubPreview],
+    config,
+    [previewSlot, renderingContextSlot]: [PreviewSlot, RenderingContextSlot]
+  ) {
+    const preview = new PreviewPreview(pubsub, previewSlot, renderingContextSlot);
+
+    window.addEventListener('hashchange', () => {
+      preview.render();
+    });
+
+    return preview;
+  }
+}
+
+export function linkModules(previewName: string, defaultModule: any, componentMap: { [key: string]: any }) {
+  PREVIEW_MODULES[previewName] = {
+    mainModule: defaultModule,
+    componentMap,
+  };
+}
+
+PreviewAspect.addRuntime(PreviewPreview);

package/preview.start-plugin.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
+import { flatten } from 'lodash';
+import { PreviewServerStatus } from '@teambit/preview.cli.preview-server-status';
+import { BundlerMain, ComponentServer } from '@teambit/bundler';
+import { PubsubMain } from '@teambit/pubsub';
+import { ProxyEntry, StartPlugin, StartPluginOptions, UiMain } from '@teambit/ui';
+import { Workspace, CheckTypes } from '@teambit/workspace';
+import { SubscribeToWebpackEvents, CompilationResult } from '@teambit/preview.cli.webpack-events-listener';
+import { CompilationInitiator } from '@teambit/compiler';
+import { Logger } from '@teambit/logger';
+
+type CompilationServers = Record<string, CompilationResult>;
+type ServersSetter = Dispatch<SetStateAction<CompilationServers>>;
+
+export class PreviewStartPlugin implements StartPlugin {
+  constructor(
+    private workspace: Workspace,
+    private bundler: BundlerMain,
+    private ui: UiMain,
+    private pubsub: PubsubMain,
+    private logger: Logger
+  ) {}
+
+  previewServers: ComponentServer[] = [];
+
+  async initiate(options: StartPluginOptions) {
+    this.listenToDevServers();
+
+    const components = await this.workspace.byPattern(options.pattern || '');
+    // TODO: logic for creating preview servers must be refactored to this aspect from the DevServer aspect.
+    const previewServers = await this.bundler.devServer(components);
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    previewServers.forEach((server) => server.listen());
+    // DON'T add wait! this promise never resolve so it's stop all the start process!
+    this.workspace.watcher
+      .watchAll({
+        spawnTSServer: true,
+        checkTypes: CheckTypes.None,
+        preCompile: false,
+        msgs: {
+          onAll: () => {},
+          onStart: () => {},
+          onReady: () => {},
+          onChange: () => {},
+          onAdd: () => {},
+          onError: () => {},
+          onUnlink: () => {},
+        },
+        initiator: CompilationInitiator.Start,
+      })
+      .catch((err) => {
+        const msg = `watcher found an error`;
+        this.logger.error(msg, err);
+        this.logger.console(`${msg}, ${err.message}`);
+      });
+    this.previewServers = this.previewServers.concat(previewServers);
+  }
+
+  getProxy(): ProxyEntry[] {
+    const proxyConfigs = this.previewServers.map<ProxyEntry[]>((server) => {
+      return [
+        {
+          context: [`/preview/${server.context.envRuntime.id}`],
+          target: `http://localhost:${server.port}`,
+        },
+        {
+          context: [`/_hmr/${server.context.envRuntime.id}`],
+          target: `http://localhost:${server.port}`,
+          ws: true,
+        },
+      ];
+    });
+
+    return flatten(proxyConfigs);
+  }
+
+  // TODO: this should be a part of the devServer
+  private listenToDevServers() {
+    // keep state changes immutable!
+    SubscribeToWebpackEvents(this.pubsub, {
+      onStart: (id) => {
+        this.updateServers((state) => ({
+          ...state,
+          [id]: { compiling: true },
+        }));
+      },
+      onDone: (id, results) => {
+        this.updateServers((state) => ({
+          ...state,
+          [id]: results,
+        }));
+      },
+    });
+  }
+
+  private setReady: () => void;
+  private readyPromise = new Promise<void>((resolve) => (this.setReady = resolve));
+  get whenReady(): Promise<void> {
+    return this.readyPromise;
+  }
+
+  private initialState: CompilationServers = {};
+  // implements react-like setter (value or updater)
+  private updateServers: ServersSetter = (servers) => {
+    this.initialState = typeof servers === 'function' ? servers(this.initialState) : servers;
+    return servers;
+  };
+
+  render = () => {
+    const [servers, setServers] = useState<CompilationServers>(this.initialState);
+    this.updateServers = setServers;
+    this.initialState = {};
+
+    useEffect(() => {
+      const noneAreCompiling = Object.values(servers).every((x) => !x.compiling);
+      if (noneAreCompiling) this.setReady();
+    }, [servers]);
+
+    return <PreviewServerStatus previewServers={this.previewServers} serverStats={servers} />;
+  };
+}

package/strategies/component-strategy.ts

@@ -0,0 +1,34 @@
+import { BuildContext } from '@teambit/builder';
+import { Target, BundlerResult, BundlerContext } from '@teambit/bundler';
+import { BundlingStrategy } from '../bundling-strategy';
+import { PreviewDefinition } from '../preview-definition';
+import { PreviewTask } from '../preview.task';
+
+export class ComponentBundlingStrategy implements BundlingStrategy {
+  name = 'component';
+
+  computeTargets(context: BuildContext, previewDefs: PreviewDefinition[], previewTask: PreviewTask): Promise<Target[]> {
+    return Promise.all(
+      context.capsuleNetwork.graphCapsules.map(async (capsule) => {
+        return {
+          entries: await previewTask.computePaths(capsule, previewDefs, context),
+          components: [capsule.component],
+          outputPath: capsule.path,
+        };
+      })
+    );
+  }
+
+  async computeResults(context: BundlerContext, results: BundlerResult[], previewTask: PreviewTask) {
+    return {
+      componentsResults: results.map((result) => {
+        return {
+          errors: result.errors,
+          component: result.components[0],
+          warning: result.warnings,
+        };
+      }),
+      artifacts: [{ name: 'preview', globPatterns: [previewTask.getPreviewDirectory(context)] }],
+    };
+  }
+}

package/strategies/env-strategy.ts

@@ -0,0 +1,118 @@
+import { join, resolve } from 'path';
+import { existsSync, mkdirpSync } from 'fs-extra';
+import { flatten } from 'lodash';
+import { ComponentMap } from '@teambit/component';
+import { Compiler } from '@teambit/compiler';
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import { Capsule } from '@teambit/isolator';
+import { BuildContext, ComponentResult } from '@teambit/builder';
+import { BundlerResult, BundlerContext } from '@teambit/bundler';
+import { BundlingStrategy } from '../bundling-strategy';
+import { PreviewDefinition } from '../preview-definition';
+import { PreviewMain } from '../preview.main.runtime';
+
+/**
+ * bundles all components in a given env into the same bundle.
+ */
+export class EnvBundlingStrategy implements BundlingStrategy {
+  name = 'env';
+
+  constructor(private preview: PreviewMain) {}
+
+  async computeTargets(context: BuildContext, previewDefs: PreviewDefinition[]) {
+    const outputPath = this.getOutputPath(context);
+    if (!existsSync(outputPath)) mkdirpSync(outputPath);
+
+    return [
+      {
+        entries: await this.computePaths(outputPath, previewDefs, context),
+        components: context.components,
+        outputPath,
+      },
+    ];
+  }
+
+  async computeResults(context: BundlerContext, results: BundlerResult[]) {
+    const result = results[0];
+
+    const componentsResults: ComponentResult[] = result.components.map((component) => {
+      return {
+        component,
+        errors: result.errors.map((err) => (typeof err === 'string' ? err : err.message)),
+        warning: result.warnings,
+        startTime: result.startTime,
+        endTime: result.endTime,
+      };
+    });
+
+    const artifacts = this.getArtifactDef(context);
+
+    return {
+      componentsResults,
+      artifacts,
+    };
+  }
+
+  private getArtifactDef(context: BuildContext) {
+    // eslint-disable-next-line @typescript-eslint/prefer-as-const
+    const env: 'env' = 'env';
+    const rootDir = this.getDirName(context);
+
+    return [
+      {
+        name: 'preview',
+        globPatterns: ['public/**'],
+        rootDir,
+        context: env,
+      },
+    ];
+  }
+
+  getDirName(context: BuildContext) {
+    const envName = context.id.replace('/', '__');
+    return `${envName}-preview`;
+  }
+
+  private getOutputPath(context: BuildContext) {
+    return resolve(`${context.capsuleNetwork.capsulesRootDir}/${this.getDirName(context)}`);
+  }
+
+  private getPaths(context: BuildContext, files: AbstractVinyl[], capsule: Capsule) {
+    const compiler: Compiler = context.env.getCompiler();
+    return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));
+  }
+
+  private async computePaths(outputPath: string, defs: PreviewDefinition[], context: BuildContext): Promise<string[]> {
+    const previewMain = await this.preview.writePreviewRuntime(context);
+    const moduleMapsPromise = defs.map(async (previewDef) => {
+      const moduleMap = await previewDef.getModuleMap(context.components);
+
+      const paths = ComponentMap.as(context.components, (component) => {
+        const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);
+        const maybeFiles = moduleMap.get(component);
+        if (!maybeFiles || !capsule) return [];
+        const [, files] = maybeFiles;
+        const compiledPaths = this.getPaths(context, files, capsule);
+        return compiledPaths;
+      });
+
+      const template = previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : 'undefined';
+
+      const link = this.preview.writeLink(
+        previewDef.prefix,
+        paths,
+        previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : undefined,
+        outputPath
+      );
+
+      const files = flatten(paths.toArray().map(([, file]) => file)).concat([link]);
+
+      if (template) return files.concat([template]);
+      return files;
+    });
+
+    const moduleMaps = await Promise.all(moduleMapsPromise);
+
+    return flatten(moduleMaps.concat([previewMain]));
+  }
+}

package/strategies/index.ts

@@ -0,0 +1,2 @@
+export { EnvBundlingStrategy } from './env-strategy';
+export { ComponentBundlingStrategy } from './component-strategy';

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/preview-module.ts

@@ -0,0 +1,15 @@
+/**
+ * A full index of the preview data
+ */
+export type PreviewModule<T = any> = {
+  /** Dictionary mapping components to their module files. */
+  componentMap: Record<string, ModuleFile<T>[]>;
+
+  /** The 'main file' for this Preview type */
+  mainModule: {
+    default: (...args: any[]) => void;
+  };
+};
+
+/** single preview module, e.g. compositions file */
+export type ModuleFile<T = any> = Record<string, T>;

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}