@teambit/preview 0.0.555 → 0.0.559

package/preview.main.runtime.tsx

@@ -1,346 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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.route.ts

@@ -1,56 +0,0 @@
-import { Request, Response, Route } from '@teambit/express';
-import mime from 'mime';
-import type { Component } from '@teambit/component';
-import { noPreview, serverError } from '@teambit/ui-foundation.ui.pages.static-error';
-import type { Logger } from '@teambit/logger';
-
-import { PreviewMain } from './preview.main.runtime';
-import { PreviewArtifact } from './preview-artifact';
-
-type UrlParams = {
-  /** `/preview/:previewPath(*)` */
-  previewPath?: string;
-};
-
-export class PreviewRoute implements Route {
-  constructor(
-    /**
-     * preview extension.
-     */
-    private preview: PreviewMain,
-    private logger: Logger
-  ) {}
-
-  route = `/preview/:previewPath(*)`;
-  method = 'get';
-
-  middlewares = [
-    async (req: Request<UrlParams>, res: Response) => {
-      try {
-        // @ts-ignore TODO: @guy please fix.
-        const component = req.component as Component | undefined;
-        if (!component) return res.status(404).send(noPreview());
-
-        let artifact: PreviewArtifact | undefined;
-        // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680
-        try {
-          artifact = await this.preview.getPreview(component);
-        } catch (e: any) {
-          return res.status(404).send(noPreview());
-        }
-        // TODO: please fix file path concatenation here.
-        const file = artifact?.getFile(`public/${req.params.previewPath || 'index.html'}`);
-        if (!file) return res.status(404).send(noPreview());
-
-        const contents = file.contents;
-        const str = `${file.cwd}/${file.path}`;
-        const contentType = mime.getType(str);
-        if (contentType) res.set('Content-Type', contentType);
-        return res.send(contents);
-      } catch (e: any) {
-        this.logger.error('failed getting preview', e);
-        return res.status(500).send(serverError());
-      }
-    },
-  ];
-}

package/preview.start-plugin.tsx

@@ -1,121 +0,0 @@
-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} />;
-  };
-}