@teambit/preview 0.0.627 → 0.0.632

package/dist/preview.preview.runtime.js

@@ -56,6 +56,16 @@ function _componentId() {
   return data;
 }
 
+function _crossFetch() {
+  const data = _interopRequireDefault(require("cross-fetch"));
+
+  _crossFetch = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _exceptions() {
   const data = require("./exceptions");
 
@@ -111,7 +121,7 @@ class PreviewPreview {
     this.pubsub = pubsub;
     this.previewSlot = previewSlot;
     this.renderingContextSlot = renderingContextSlot;
-    (0, _defineProperty2().default)(this, "render", () => {
+    (0, _defineProperty2().default)(this, "render", async () => {
       const {
         previewName,
         componentId
@@ -123,14 +133,15 @@ class PreviewPreview {
         throw new (_exceptions().PreviewNotFound)(previewName);
       }
 
-      const includes = (preview.include || []).map(prevName => {
+      const includesAll = await Promise.all((preview.include || []).map(async prevName => {
         var _includedPreview$sele;
 
         const includedPreview = this.getPreview(prevName);
         if (!includedPreview) return undefined;
-        return (_includedPreview$sele = includedPreview.selectPreviewModel) === null || _includedPreview$sele === void 0 ? void 0 : _includedPreview$sele.call(includedPreview, componentId.fullName, PREVIEW_MODULES[prevName]);
-      }).filter(module => !!module);
-      return preview.render(componentId.fullName, PREVIEW_MODULES[name], includes, this.getRenderingContext());
+        return (_includedPreview$sele = includedPreview.selectPreviewModel) === null || _includedPreview$sele === void 0 ? void 0 : _includedPreview$sele.call(includedPreview, componentId.fullName, await this.getPreviewModule(prevName, componentId));
+      }));
+      const includes = includesAll.filter(module => !!module);
+      return preview.render(componentId.fullName, await this.getPreviewModule(name, componentId), includes, this.getRenderingContext());
     });
     this.registerClickPubSub();
   }
@@ -147,9 +158,114 @@ class PreviewPreview {
    */
 
 
+  async getPreviewModule(name, id) {
+    if (PREVIEW_MODULES[name].componentMap[id.fullName]) return PREVIEW_MODULES[name]; // if (!window[name]) throw new PreviewNotFound(name);
+    // const isSplitComponentBundle = PREVIEW_MODULES[name].isSplitComponentBundle ?? false;
+    // const component = window[id.toStringWithoutVersion()];
+
+    const component = await this.fetchComponentPreview(id, name);
+    return {
+      mainModule: PREVIEW_MODULES[name].mainModule,
+      componentMap: {
+        [id.fullName]: component
+      }
+    };
+  }
+
+  async fetchComponentPreview(id, name) {
+    let previewFile;
+    const allFiles = await this.fetchComponentPreviewFiles(id, name);
+    allFiles.forEach(file => {
+      // We want to run the preview file always last
+      if (file.endsWith('-preview.js')) {
+        previewFile = file;
+      } else {
+        this.addComponentFileElement(id, file);
+      }
+    });
+    return new Promise((resolve, reject) => {
+      const previewScriptElement = this.getPreviewScriptElement(id, name, previewFile, resolve, reject);
+      document.head.appendChild(previewScriptElement);
+    });
+  }
+
+  addComponentFileElement(id, previewBundleFileName) {
+    if (previewBundleFileName.endsWith('.js')) {
+      return this.addComponentFileScriptElement(id, previewBundleFileName);
+    }
+
+    return this.addComponentFileLinkElement(id, previewBundleFileName);
+  }
+
+  async fetchComponentPreviewFiles(id, previewName) {
+    const previewAssetsRoute = `~aspect/preview-assets`;
+    const stringId = id.toString();
+    const url = `/api/${stringId}/${previewAssetsRoute}`;
+    const res = await (0, _crossFetch().default)(url);
+
+    if (res.status >= 400) {
+      throw new (_exceptions().PreviewNotFound)(previewName);
+    }
+
+    const parsed = await res.json();
+
+    if (!parsed.files || !parsed.files.length) {
+      throw new (_exceptions().PreviewNotFound)(previewName);
+    }
+
+    return parsed.files;
+  }
+
+  addComponentFileScriptElement(id, previewBundleFileName) {
+    const script = document.createElement('script');
+    script.setAttribute('defer', 'defer');
+    const stringId = id.toString();
+    const previewRoute = `~aspect/component-preview`;
+    const src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;
+    script.src = src;
+    document.head.appendChild(script);
+    return script;
+  }
+
+  addComponentFileLinkElement(id, previewBundleFileName) {
+    const link = document.createElement('link');
+    const stringId = id.toString();
+    const previewRoute = `~aspect/component-preview`;
+    const href = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;
+    link.setAttribute('href', href);
+
+    if (previewBundleFileName.endsWith('.css')) {
+      link.setAttribute('rel', 'stylesheet');
+    }
+
+    document.head.appendChild(link);
+    return link;
+  }
+
+  getPreviewScriptElement(id, name, previewBundleFileName, resolve, reject) {
+    const script = document.createElement('script');
+    script.setAttribute('defer', 'defer');
+    const stringId = id.toString(); // const previewRoute = `~aspect/preview`;
+
+    const previewRoute = `~aspect/component-preview`;
+    const src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;
+    script.src = src; // generate path to remote scope. [scope url]/
+
+    script.onload = () => {
+      const componentPreview = window[`${id.toStringWithoutVersion()}-preview`];
+      if (!componentPreview) return reject(new (_exceptions().PreviewNotFound)(name));
+      const targetPreview = componentPreview[name];
+      if (!targetPreview) return reject(new (_exceptions().PreviewNotFound)(name));
+      return resolve(targetPreview);
+    };
+
+    return script;
+  }
   /**
    * register a new preview.
    */
+
+
   registerPreview(preview) {
     this.previewSlot.register(preview);
     return this;
@@ -202,6 +318,7 @@ class PreviewPreview {
   static async provider([pubsub], config, [previewSlot, renderingContextSlot]) {
     const preview = new PreviewPreview(pubsub, previewSlot, renderingContextSlot);
     window.addEventListener('hashchange', () => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       preview.render();
     });
     return preview;
@@ -214,9 +331,10 @@ exports.PreviewPreview = PreviewPreview;
 (0, _defineProperty2().default)(PreviewPreview, "dependencies", [_pubsub().default]);
 (0, _defineProperty2().default)(PreviewPreview, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType()]);
 
-function linkModules(previewName, defaultModule, componentMap) {
+function linkModules(previewName, defaultModule, isSplitComponentBundle, componentMap) {
   PREVIEW_MODULES[previewName] = {
     mainModule: defaultModule,
+    isSplitComponentBundle,
     componentMap
   };
 }

package/dist/preview.preview.runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["preview.preview.runtime.tsx"],"names":["PREVIEW_MODULES","PreviewPreview","constructor","pubsub","previewSlot","renderingContextSlot","previewName","componentId","getLocation","name","getDefault","preview","getPreview","PreviewNotFound","includes","include","map","prevName","includedPreview","undefined","selectPreviewModel","fullName","filter","module","render","getRenderingContext","registerClickPubSub","window","addEventListener","e","timestamp","Date","now","clickEvent","Object","assign","pub","PreviewAspect","id","ClickInsideAnIframeEvent","registerPreview","register","RenderingContext","registerRenderContext","renderContext","previews","values","defaultOne","find","previewCandidate","default","getParam","query","param","params","URLSearchParams","get","withoutHash","location","hash","substring","before","after","split","ComponentID","tryFromString","provider","config","PreviewRuntime","PubsubAspect","Slot","withType","linkModules","defaultModule","componentMap","mainModule","addRuntime"],"mappings":"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","sourcesContent":["import PubsubAspect, { PubsubPreview } from '@teambit/pubsub';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentID } from '@teambit/component-id';\n\nimport { PreviewNotFound } from './exceptions';\nimport { PreviewType } from './preview-type';\nimport { PreviewAspect, PreviewRuntime } from './preview.aspect';\nimport { ClickInsideAnIframeEvent } from './events';\nimport { PreviewModule } from './types/preview-module';\nimport { RenderingContext } from './rendering-context';\n\nexport type PreviewSlot = SlotRegistry<PreviewType>;\n\nconst PREVIEW_MODULES: Record<string, PreviewModule> = {};\n\nexport type RenderingContextProvider = () => { [key: string]: any };\nexport type RenderingContextSlot = SlotRegistry<RenderingContextProvider>;\n\nexport class PreviewPreview {\n  constructor(\n    /**\n     * register to pubsub\n     */\n    private pubsub: PubsubPreview,\n\n    /**\n     * preview slot.\n     */\n    private previewSlot: PreviewSlot,\n\n    private renderingContextSlot: RenderingContextSlot\n  ) {\n    this.registerClickPubSub();\n  }\n\n  private registerClickPubSub() {\n    window.addEventListener('click', (e) => {\n      const timestamp = Date.now();\n      const clickEvent = Object.assign({}, e);\n      this.pubsub.pub(PreviewAspect.id, new ClickInsideAnIframeEvent(timestamp, clickEvent));\n    });\n  }\n\n  /**\n   * render the preview.\n   */\n  render = () => {\n    const { previewName, componentId } = this.getLocation();\n    const name = previewName || this.getDefault();\n\n    const preview = this.getPreview(name);\n    if (!preview || !componentId) {\n      throw new PreviewNotFound(previewName);\n    }\n    const includes = (preview.include || [])\n      .map((prevName) => {\n        const includedPreview = this.getPreview(prevName);\n        if (!includedPreview) return undefined;\n\n        return includedPreview.selectPreviewModel?.(componentId.fullName, PREVIEW_MODULES[prevName]);\n      })\n      .filter((module) => !!module);\n\n    return preview.render(componentId.fullName, PREVIEW_MODULES[name], includes, this.getRenderingContext());\n  };\n\n  /**\n   * register a new preview.\n   */\n  registerPreview(preview: PreviewType) {\n    this.previewSlot.register(preview);\n    return this;\n  }\n\n  /**\n   * get the preview rendering context.\n   */\n  getRenderingContext() {\n    return new RenderingContext(this.renderingContextSlot);\n  }\n\n  /**\n   * allows aspects to add rendering contexts.\n   * render context is available through all preview definitions.\n   */\n  registerRenderContext(renderContext: RenderingContextProvider) {\n    this.renderingContextSlot.register(renderContext);\n    return this;\n  }\n\n  getDefault() {\n    const previews = this.previewSlot.values();\n    const defaultOne = previews.find((previewCandidate) => previewCandidate.default);\n\n    return defaultOne?.name || previews[0].name;\n  }\n\n  private getPreview(previewName: string): undefined | PreviewType {\n    const previews = this.previewSlot.values();\n    const preview = previews.find((previewCandidate) => previewCandidate.name === previewName);\n\n    return preview;\n  }\n\n  private getParam(query: string, param: string) {\n    const params = new URLSearchParams(query);\n    return params.get(param);\n  }\n\n  private getLocation() {\n    const withoutHash = window.location.hash.substring(1);\n    const [before, after] = withoutHash.split('?');\n\n    return {\n      previewName: this.getParam(after, 'preview'),\n      componentId: ComponentID.tryFromString(before),\n    };\n  }\n\n  static runtime = PreviewRuntime;\n\n  static dependencies = [PubsubAspect];\n\n  static slots = [Slot.withType<PreviewType>(), Slot.withType<RenderingContextProvider>()];\n\n  static async provider(\n    [pubsub]: [PubsubPreview],\n    config,\n    [previewSlot, renderingContextSlot]: [PreviewSlot, RenderingContextSlot]\n  ) {\n    const preview = new PreviewPreview(pubsub, previewSlot, renderingContextSlot);\n\n    window.addEventListener('hashchange', () => {\n      preview.render();\n    });\n\n    return preview;\n  }\n}\n\nexport function linkModules(previewName: string, defaultModule: any, componentMap: { [key: string]: any }) {\n  PREVIEW_MODULES[previewName] = {\n    mainModule: defaultModule,\n    componentMap,\n  };\n}\n\nPreviewAspect.addRuntime(PreviewPreview);\n"]}
+{"version":3,"sources":["preview.preview.runtime.tsx"],"names":["PREVIEW_MODULES","PreviewPreview","constructor","pubsub","previewSlot","renderingContextSlot","previewName","componentId","getLocation","name","getDefault","preview","getPreview","PreviewNotFound","includesAll","Promise","all","include","map","prevName","includedPreview","undefined","selectPreviewModel","fullName","getPreviewModule","includes","filter","module","render","getRenderingContext","registerClickPubSub","window","addEventListener","e","timestamp","Date","now","clickEvent","Object","assign","pub","PreviewAspect","id","ClickInsideAnIframeEvent","componentMap","component","fetchComponentPreview","mainModule","previewFile","allFiles","fetchComponentPreviewFiles","forEach","file","endsWith","addComponentFileElement","resolve","reject","previewScriptElement","getPreviewScriptElement","document","head","appendChild","previewBundleFileName","addComponentFileScriptElement","addComponentFileLinkElement","previewAssetsRoute","stringId","toString","url","res","status","parsed","json","files","length","script","createElement","setAttribute","previewRoute","src","link","href","onload","componentPreview","toStringWithoutVersion","targetPreview","registerPreview","register","RenderingContext","registerRenderContext","renderContext","previews","values","defaultOne","find","previewCandidate","default","getParam","query","param","params","URLSearchParams","get","withoutHash","location","hash","substring","before","after","split","ComponentID","tryFromString","provider","config","PreviewRuntime","PubsubAspect","Slot","withType","linkModules","defaultModule","isSplitComponentBundle","addRuntime"],"mappings":"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","sourcesContent":["import PubsubAspect, { PubsubPreview } from '@teambit/pubsub';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentID } from '@teambit/component-id';\nimport crossFetch from 'cross-fetch';\n\nimport { PreviewNotFound } from './exceptions';\nimport { PreviewType } from './preview-type';\nimport { PreviewAspect, PreviewRuntime } from './preview.aspect';\nimport { ClickInsideAnIframeEvent } from './events';\nimport { PreviewModule } from './types/preview-module';\nimport { RenderingContext } from './rendering-context';\n\nexport type PreviewSlot = SlotRegistry<PreviewType>;\n\nconst PREVIEW_MODULES: Record<string, PreviewModule> = {};\n\nexport type RenderingContextProvider = () => { [key: string]: any };\nexport type RenderingContextSlot = SlotRegistry<RenderingContextProvider>;\n\nexport class PreviewPreview {\n  constructor(\n    /**\n     * register to pubsub\n     */\n    private pubsub: PubsubPreview,\n\n    /**\n     * preview slot.\n     */\n    private previewSlot: PreviewSlot,\n\n    private renderingContextSlot: RenderingContextSlot\n  ) {\n    this.registerClickPubSub();\n  }\n\n  private registerClickPubSub() {\n    window.addEventListener('click', (e) => {\n      const timestamp = Date.now();\n      const clickEvent = Object.assign({}, e);\n      this.pubsub.pub(PreviewAspect.id, new ClickInsideAnIframeEvent(timestamp, clickEvent));\n    });\n  }\n\n  /**\n   * render the preview.\n   */\n  render = async () => {\n    const { previewName, componentId } = this.getLocation();\n    const name = previewName || this.getDefault();\n\n    const preview = this.getPreview(name);\n    if (!preview || !componentId) {\n      throw new PreviewNotFound(previewName);\n    }\n    const includesAll = await Promise.all(\n      (preview.include || []).map(async (prevName) => {\n        const includedPreview = this.getPreview(prevName);\n        if (!includedPreview) return undefined;\n\n        return includedPreview.selectPreviewModel?.(\n          componentId.fullName,\n          await this.getPreviewModule(prevName, componentId)\n        );\n      })\n    );\n\n    const includes = includesAll.filter((module) => !!module);\n\n    return preview.render(\n      componentId.fullName,\n      await this.getPreviewModule(name, componentId),\n      includes,\n      this.getRenderingContext()\n    );\n  };\n\n  async getPreviewModule(name: string, id: ComponentID): Promise<PreviewModule> {\n    if (PREVIEW_MODULES[name].componentMap[id.fullName]) return PREVIEW_MODULES[name];\n    // if (!window[name]) throw new PreviewNotFound(name);\n    // const isSplitComponentBundle = PREVIEW_MODULES[name].isSplitComponentBundle ?? false;\n    // const component = window[id.toStringWithoutVersion()];\n    const component: any = await this.fetchComponentPreview(id, name);\n\n    return {\n      mainModule: PREVIEW_MODULES[name].mainModule,\n      componentMap: {\n        [id.fullName]: component,\n      },\n    };\n  }\n\n  async fetchComponentPreview(id: ComponentID, name: string) {\n    let previewFile;\n    const allFiles = await this.fetchComponentPreviewFiles(id, name);\n    allFiles.forEach((file) => {\n      // We want to run the preview file always last\n      if (file.endsWith('-preview.js')) {\n        previewFile = file;\n      } else {\n        this.addComponentFileElement(id, file);\n      }\n    });\n    return new Promise((resolve, reject) => {\n      const previewScriptElement = this.getPreviewScriptElement(id, name, previewFile, resolve, reject);\n      document.head.appendChild(previewScriptElement);\n    });\n  }\n\n  private addComponentFileElement(id: ComponentID, previewBundleFileName: string) {\n    if (previewBundleFileName.endsWith('.js')) {\n      return this.addComponentFileScriptElement(id, previewBundleFileName);\n    }\n    return this.addComponentFileLinkElement(id, previewBundleFileName);\n  }\n\n  private async fetchComponentPreviewFiles(id: ComponentID, previewName: string): Promise<string[]> {\n    const previewAssetsRoute = `~aspect/preview-assets`;\n    const stringId = id.toString();\n    const url = `/api/${stringId}/${previewAssetsRoute}`;\n\n    const res = await crossFetch(url);\n    if (res.status >= 400) {\n      throw new PreviewNotFound(previewName);\n    }\n    const parsed = await res.json();\n    if (!parsed.files || !parsed.files.length) {\n      throw new PreviewNotFound(previewName);\n    }\n    return parsed.files;\n  }\n\n  private addComponentFileScriptElement(id: ComponentID, previewBundleFileName: string) {\n    const script = document.createElement('script');\n    script.setAttribute('defer', 'defer');\n    const stringId = id.toString();\n    const previewRoute = `~aspect/component-preview`;\n    const src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;\n    script.src = src;\n    document.head.appendChild(script);\n    return script;\n  }\n\n  private addComponentFileLinkElement(id: ComponentID, previewBundleFileName: string) {\n    const link = document.createElement('link');\n    const stringId = id.toString();\n    const previewRoute = `~aspect/component-preview`;\n    const href = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;\n    link.setAttribute('href', href);\n    if (previewBundleFileName.endsWith('.css')) {\n      link.setAttribute('rel', 'stylesheet');\n    }\n    document.head.appendChild(link);\n    return link;\n  }\n\n  private getPreviewScriptElement(id: ComponentID, name: string, previewBundleFileName: string, resolve, reject) {\n    const script = document.createElement('script');\n    script.setAttribute('defer', 'defer');\n    const stringId = id.toString();\n    // const previewRoute = `~aspect/preview`;\n    const previewRoute = `~aspect/component-preview`;\n    const src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;\n    script.src = src; // generate path to remote scope. [scope url]/\n    script.onload = () => {\n      const componentPreview = window[`${id.toStringWithoutVersion()}-preview`];\n      if (!componentPreview) return reject(new PreviewNotFound(name));\n      const targetPreview = componentPreview[name];\n      if (!targetPreview) return reject(new PreviewNotFound(name));\n\n      return resolve(targetPreview);\n    };\n    return script;\n  }\n\n  /**\n   * register a new preview.\n   */\n  registerPreview(preview: PreviewType) {\n    this.previewSlot.register(preview);\n    return this;\n  }\n\n  /**\n   * get the preview rendering context.\n   */\n  getRenderingContext() {\n    return new RenderingContext(this.renderingContextSlot);\n  }\n\n  /**\n   * allows aspects to add rendering contexts.\n   * render context is available through all preview definitions.\n   */\n  registerRenderContext(renderContext: RenderingContextProvider) {\n    this.renderingContextSlot.register(renderContext);\n    return this;\n  }\n\n  getDefault() {\n    const previews = this.previewSlot.values();\n    const defaultOne = previews.find((previewCandidate) => previewCandidate.default);\n\n    return defaultOne?.name || previews[0].name;\n  }\n\n  private getPreview(previewName: string): undefined | PreviewType {\n    const previews = this.previewSlot.values();\n    const preview = previews.find((previewCandidate) => previewCandidate.name === previewName);\n\n    return preview;\n  }\n\n  private getParam(query: string, param: string) {\n    const params = new URLSearchParams(query);\n    return params.get(param);\n  }\n\n  private getLocation() {\n    const withoutHash = window.location.hash.substring(1);\n    const [before, after] = withoutHash.split('?');\n\n    return {\n      previewName: this.getParam(after, 'preview'),\n      componentId: ComponentID.tryFromString(before),\n    };\n  }\n\n  static runtime = PreviewRuntime;\n\n  static dependencies = [PubsubAspect];\n\n  static slots = [Slot.withType<PreviewType>(), Slot.withType<RenderingContextProvider>()];\n\n  static async provider(\n    [pubsub]: [PubsubPreview],\n    config,\n    [previewSlot, renderingContextSlot]: [PreviewSlot, RenderingContextSlot]\n  ) {\n    const preview = new PreviewPreview(pubsub, previewSlot, renderingContextSlot);\n\n    window.addEventListener('hashchange', () => {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      preview.render();\n    });\n\n    return preview;\n  }\n}\n\nexport function linkModules(\n  previewName: string,\n  defaultModule: any,\n  isSplitComponentBundle: boolean,\n  componentMap: { [key: string]: any }\n) {\n  PREVIEW_MODULES[previewName] = {\n    mainModule: defaultModule,\n    isSplitComponentBundle,\n    componentMap,\n  };\n}\n\nPreviewAspect.addRuntime(PreviewPreview);\n"]}

package/dist/preview.route.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="express" />
-import { Request, Response, Route } from '@teambit/express';
+import type { NextFunction, Request, Response, Route } from '@teambit/express';
 import type { Logger } from '@teambit/logger';
 import { PreviewMain } from './preview.main.runtime';
-declare type UrlParams = {
-    /** `/preview/:previewPath(*)` */
-    previewPath?: string;
-};
+import type { PreviewUrlParams } from './artifact-file-middleware';
 export declare class PreviewRoute implements Route {
     /**
      * preview extension.
@@ -19,6 +16,5 @@ export declare class PreviewRoute implements Route {
     preview: PreviewMain, logger: Logger);
     route: string;
     method: string;
-    middlewares: ((req: Request<UrlParams>, res: Response) => Promise<import("express").Response<any>>)[];
+    middlewares: ((req: Request<PreviewUrlParams>, res: Response, next: NextFunction) => Promise<void | import("express").Response<any>>)[];
 }
-export {};

package/dist/preview.route.js

@@ -19,20 +19,20 @@ function _defineProperty2() {
   return data;
 }
 
-function _mime() {
-  const data = _interopRequireDefault(require("mime"));
+function _uiFoundationUiPages() {
+  const data = require("@teambit/ui-foundation.ui.pages.static-error");
 
-  _mime = function () {
+  _uiFoundationUiPages = function () {
     return data;
   };
 
   return data;
 }
 
-function _uiFoundationUiPages() {
-  const data = require("@teambit/ui-foundation.ui.pages.static-error");
+function _artifactFileMiddleware() {
+  const data = require("./artifact-file-middleware");
 
-  _uiFoundationUiPages = function () {
+  _artifactFileMiddleware = function () {
     return data;
   };
 
@@ -47,38 +47,39 @@ class PreviewRoute {
   preview, logger) {
     this.preview = preview;
     this.logger = logger;
-    (0, _defineProperty2().default)(this, "route", `/preview/:previewPath(*)`);
+    (0, _defineProperty2().default)(this, "route", `/preview/:previewName?/:filePath(*)`);
     (0, _defineProperty2().default)(this, "method", 'get');
-    (0, _defineProperty2().default)(this, "middlewares", [async (req, res) => {
+    (0, _defineProperty2().default)(this, "middlewares", [async (req, res, next) => {
       try {
-        var _artifact;
-
         // @ts-ignore TODO: @guy please fix.
         const component = req.component;
         if (!component) return res.status(404).send((0, _uiFoundationUiPages().noPreview)());
+        const isLegacyPath = await this.preview.isBundledWithEnv(component);
         let artifact; // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680
 
         try {
-          artifact = await this.preview.getPreview(component);
+          // Taking the env template (in this case we will take the component only bundle throw component-preview route)
+          // We use this route for the env template for backward compatibility - new scopes which contain components tagged with old versions of bit
+          if (!isLegacyPath) {
+            artifact = await this.preview.getEnvTemplateFromComponentEnv(component);
+          } else {
+            // If it's legacy (bundled together with the env template) take the preview bundle from the component directly
+            artifact = await this.preview.getPreview(component);
+          }
         } catch (e) {
           return res.status(404).send((0, _uiFoundationUiPages().noPreview)());
-        } // TODO: please fix file path concatenation here.
-
+        } // @ts-ignore
 
-        const file = (_artifact = artifact) === null || _artifact === void 0 ? void 0 : _artifact.getFile(`public/${req.params.previewPath || 'index.html'}`);
-        if (!file) return res.status(404).send((0, _uiFoundationUiPages().noPreview)());
-        const contents = file.contents;
-        const str = `${file.cwd}/${file.path}`;
 
-        const contentType = _mime().default.getType(str);
+        req.artifact = artifact; // @ts-ignore
 
-        if (contentType) res.set('Content-Type', contentType);
-        return res.send(contents);
+        req.isLegacyPath = isLegacyPath;
+        return next();
       } catch (e) {
         this.logger.error('failed getting preview', e);
         return res.status(500).send((0, _uiFoundationUiPages().serverError)());
       }
-    }]);
+    }, (0, _artifactFileMiddleware().getArtifactFileMiddleware)(this.logger)]);
   }
 
 }

package/dist/preview.route.js.map

@@ -1 +1 @@
-{"version":3,"sources":["preview.route.ts"],"names":["PreviewRoute","constructor","preview","logger","req","res","component","status","send","artifact","getPreview","e","file","getFile","params","previewPath","contents","str","cwd","path","contentType","mime","getType","set","error"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAWO,MAAMA,YAAN,CAAoC;AACzCC,EAAAA,WAAW;AACT;AACJ;AACA;AACYC,EAAAA,OAJC,EAKDC,MALC,EAMT;AAAA,SAFQD,OAER,GAFQA,OAER;AAAA,SADQC,MACR,GADQA,MACR;AAAA,mDAEO,0BAFP;AAAA,oDAGO,KAHP;AAAA,yDAKY,CACZ,OAAOC,GAAP,EAAgCC,GAAhC,KAAkD;AAChD,UAAI;AAAA;;AACF;AACA,cAAMC,SAAS,GAAGF,GAAG,CAACE,SAAtB;AACA,YAAI,CAACA,SAAL,EAAgB,OAAOD,GAAG,CAACE,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,uCAArB,CAAP;AAEhB,YAAIC,QAAJ,CALE,CAMF;;AACA,YAAI;AACFA,UAAAA,QAAQ,GAAG,MAAM,KAAKP,OAAL,CAAaQ,UAAb,CAAwBJ,SAAxB,CAAjB;AACD,SAFD,CAEE,OAAOK,CAAP,EAAe;AACf,iBAAON,GAAG,CAACE,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,uCAArB,CAAP;AACD,SAXC,CAYF;;;AACA,cAAMI,IAAI,gBAAGH,QAAH,8CAAG,UAAUI,OAAV,CAAmB,UAAST,GAAG,CAACU,MAAJ,CAAWC,WAAX,IAA0B,YAAa,EAAnE,CAAb;AACA,YAAI,CAACH,IAAL,EAAW,OAAOP,GAAG,CAACE,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,uCAArB,CAAP;AAEX,cAAMQ,QAAQ,GAAGJ,IAAI,CAACI,QAAtB;AACA,cAAMC,GAAG,GAAI,GAAEL,IAAI,CAACM,GAAI,IAAGN,IAAI,CAACO,IAAK,EAArC;;AACA,cAAMC,WAAW,GAAGC,gBAAKC,OAAL,CAAaL,GAAb,CAApB;;AACA,YAAIG,WAAJ,EAAiBf,GAAG,CAACkB,GAAJ,CAAQ,cAAR,EAAwBH,WAAxB;AACjB,eAAOf,GAAG,CAACG,IAAJ,CAASQ,QAAT,CAAP;AACD,OArBD,CAqBE,OAAOL,CAAP,EAAe;AACf,aAAKR,MAAL,CAAYqB,KAAZ,CAAkB,wBAAlB,EAA4Cb,CAA5C;AACA,eAAON,GAAG,CAACE,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,yCAArB,CAAP;AACD;AACF,KA3BW,CALZ;AAAE;;AAPqC","sourcesContent":["import { Request, Response, Route } from '@teambit/express';\nimport mime from 'mime';\nimport type { Component } from '@teambit/component';\nimport { noPreview, serverError } from '@teambit/ui-foundation.ui.pages.static-error';\nimport type { Logger } from '@teambit/logger';\n\nimport { PreviewMain } from './preview.main.runtime';\nimport { PreviewArtifact } from './preview-artifact';\n\ntype UrlParams = {\n  /** `/preview/:previewPath(*)` */\n  previewPath?: string;\n};\n\nexport class PreviewRoute implements Route {\n  constructor(\n    /**\n     * preview extension.\n     */\n    private preview: PreviewMain,\n    private logger: Logger\n  ) {}\n\n  route = `/preview/:previewPath(*)`;\n  method = 'get';\n\n  middlewares = [\n    async (req: Request<UrlParams>, res: Response) => {\n      try {\n        // @ts-ignore TODO: @guy please fix.\n        const component = req.component as Component | undefined;\n        if (!component) return res.status(404).send(noPreview());\n\n        let artifact: PreviewArtifact | undefined;\n        // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680\n        try {\n          artifact = await this.preview.getPreview(component);\n        } catch (e: any) {\n          return res.status(404).send(noPreview());\n        }\n        // TODO: please fix file path concatenation here.\n        const file = artifact?.getFile(`public/${req.params.previewPath || 'index.html'}`);\n        if (!file) return res.status(404).send(noPreview());\n\n        const contents = file.contents;\n        const str = `${file.cwd}/${file.path}`;\n        const contentType = mime.getType(str);\n        if (contentType) res.set('Content-Type', contentType);\n        return res.send(contents);\n      } catch (e: any) {\n        this.logger.error('failed getting preview', e);\n        return res.status(500).send(serverError());\n      }\n    },\n  ];\n}\n"]}
+{"version":3,"sources":["preview.route.ts"],"names":["PreviewRoute","constructor","preview","logger","req","res","next","component","status","send","isLegacyPath","isBundledWithEnv","artifact","getEnvTemplateFromComponentEnv","getPreview","e","error"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAKA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAGO,MAAMA,YAAN,CAAoC;AACzCC,EAAAA,WAAW;AACT;AACJ;AACA;AACYC,EAAAA,OAJC,EAKDC,MALC,EAMT;AAAA,SAFQD,OAER,GAFQA,OAER;AAAA,SADQC,MACR,GADQA,MACR;AAAA,mDAEO,qCAFP;AAAA,oDAGO,KAHP;AAAA,yDAKY,CACZ,OAAOC,GAAP,EAAuCC,GAAvC,EAAsDC,IAAtD,KAA6E;AAC3E,UAAI;AACF;AACA,cAAMC,SAAS,GAAGH,GAAG,CAACG,SAAtB;AACA,YAAI,CAACA,SAAL,EAAgB,OAAOF,GAAG,CAACG,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,uCAArB,CAAP;AAChB,cAAMC,YAAY,GAAG,MAAM,KAAKR,OAAL,CAAaS,gBAAb,CAA8BJ,SAA9B,CAA3B;AAEA,YAAIK,QAAJ,CANE,CAOF;;AACA,YAAI;AACF;AACA;AACA,cAAI,CAACF,YAAL,EAAmB;AACjBE,YAAAA,QAAQ,GAAG,MAAM,KAAKV,OAAL,CAAaW,8BAAb,CAA4CN,SAA5C,CAAjB;AACD,WAFD,MAEO;AACL;AACAK,YAAAA,QAAQ,GAAG,MAAM,KAAKV,OAAL,CAAaY,UAAb,CAAwBP,SAAxB,CAAjB;AACD;AACF,SATD,CASE,OAAOQ,CAAP,EAAe;AACf,iBAAOV,GAAG,CAACG,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,uCAArB,CAAP;AACD,SAnBC,CAoBF;;;AACAL,QAAAA,GAAG,CAACQ,QAAJ,GAAeA,QAAf,CArBE,CAsBF;;AACAR,QAAAA,GAAG,CAACM,YAAJ,GAAmBA,YAAnB;AACA,eAAOJ,IAAI,EAAX;AACD,OAzBD,CAyBE,OAAOS,CAAP,EAAe;AACf,aAAKZ,MAAL,CAAYa,KAAZ,CAAkB,wBAAlB,EAA4CD,CAA5C;AACA,eAAOV,GAAG,CAACG,MAAJ,CAAW,GAAX,EAAgBC,IAAhB,CAAqB,yCAArB,CAAP;AACD;AACF,KA/BW,EAgCZ,yDAA0B,KAAKN,MAA/B,CAhCY,CALZ;AAAE;;AAPqC","sourcesContent":["import type { NextFunction, Request, Response, Route } from '@teambit/express';\nimport type { Component } from '@teambit/component';\nimport { noPreview, serverError } from '@teambit/ui-foundation.ui.pages.static-error';\nimport type { Logger } from '@teambit/logger';\n\nimport { PreviewMain } from './preview.main.runtime';\nimport { PreviewArtifact } from './preview-artifact';\nimport { getArtifactFileMiddleware } from './artifact-file-middleware';\nimport type { PreviewUrlParams } from './artifact-file-middleware';\n\nexport class PreviewRoute implements Route {\n  constructor(\n    /**\n     * preview extension.\n     */\n    private preview: PreviewMain,\n    private logger: Logger\n  ) {}\n\n  route = `/preview/:previewName?/:filePath(*)`;\n  method = 'get';\n\n  middlewares = [\n    async (req: Request<PreviewUrlParams>, res: Response, next: NextFunction) => {\n      try {\n        // @ts-ignore TODO: @guy please fix.\n        const component = req.component as Component | undefined;\n        if (!component) return res.status(404).send(noPreview());\n        const isLegacyPath = await this.preview.isBundledWithEnv(component);\n\n        let artifact: PreviewArtifact | undefined;\n        // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680\n        try {\n          // Taking the env template (in this case we will take the component only bundle throw component-preview route)\n          // We use this route for the env template for backward compatibility - new scopes which contain components tagged with old versions of bit\n          if (!isLegacyPath) {\n            artifact = await this.preview.getEnvTemplateFromComponentEnv(component);\n          } else {\n            // If it's legacy (bundled together with the env template) take the preview bundle from the component directly\n            artifact = await this.preview.getPreview(component);\n          }\n        } catch (e: any) {\n          return res.status(404).send(noPreview());\n        }\n        // @ts-ignore\n        req.artifact = artifact;\n        // @ts-ignore\n        req.isLegacyPath = isLegacyPath;\n        return next();\n      } catch (e: any) {\n        this.logger.error('failed getting preview', e);\n        return res.status(500).send(serverError());\n      }\n    },\n    getArtifactFileMiddleware(this.logger),\n  ];\n}\n"]}

package/dist/preview.task.d.ts

@@ -4,8 +4,8 @@ import { BundlerMain } from '@teambit/bundler';
 import { ComponentMap } from '@teambit/component';
 import { Capsule } from '@teambit/isolator';
 import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
-import { PreviewDefinition } from './preview-definition';
 import { PreviewMain } from './preview.main.runtime';
+export declare const PREVIEW_TASK_NAME = "GeneratePreview";
 export declare class PreviewTask implements BuildTask {
     /**
      * bundler extension.
@@ -28,7 +28,7 @@ export declare class PreviewTask implements BuildTask {
     name: string;
     location: TaskLocation;
     execute(context: BuildContext): Promise<BuiltTaskResult>;
-    computePaths(capsule: Capsule, defs: PreviewDefinition[], context: BuildContext): Promise<string[]>;
+    getLinkFileDirectory(): string;
     getPreviewDirectory(context: ExecutionContext): string;
     getPathsFromMap(capsule: Capsule, moduleMap: ComponentMap<AbstractVinyl[]>, context: BuildContext): ComponentMap<string[]>;
 }

package/dist/preview.task.js

@@ -2,14 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require("core-js/modules/es.array.iterator.js");
-
 require("core-js/modules/es.promise.js");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewTask = void 0;
+exports.PreviewTask = exports.PREVIEW_TASK_NAME = void 0;
 
 function _defineProperty2() {
   const data = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -31,16 +29,19 @@ function _path() {
   return data;
 }
 
-function _lodash() {
-  const data = require("lodash");
+function _builder() {
+  const data = require("@teambit/builder");
 
-  _lodash = function () {
+  _builder = function () {
     return data;
   };
 
   return data;
 }
 
+const PREVIEW_TASK_NAME = 'GeneratePreview';
+exports.PREVIEW_TASK_NAME = PREVIEW_TASK_NAME;
+
 class PreviewTask {
   constructor(
   /**
@@ -54,39 +55,39 @@ class PreviewTask {
     this.bundler = bundler;
     this.preview = preview;
     (0, _defineProperty2().default)(this, "aspectId", 'teambit.preview/preview');
-    (0, _defineProperty2().default)(this, "name", 'GeneratePreview');
+    (0, _defineProperty2().default)(this, "name", PREVIEW_TASK_NAME);
     (0, _defineProperty2().default)(this, "location", 'end');
   }
 
+  // readonly dependencies = [CompilerAspect.id];
   async execute(context) {
+    var _envPreviewConfig$spl;
+
     const defs = this.preview.getDefs();
     const url = `/preview/${context.envRuntime.id}`;
-    const bundlingStrategy = this.preview.getBundlingStrategy();
-    const targets = await bundlingStrategy.computeTargets(context, defs, this);
+    const bundlingStrategy = this.preview.getBundlingStrategy(context.env);
+    const envPreviewConfig = this.preview.getEnvPreviewConfig(context.env);
+    const splitComponentBundle = (_envPreviewConfig$spl = envPreviewConfig.splitComponentBundle) !== null && _envPreviewConfig$spl !== void 0 ? _envPreviewConfig$spl : false;
+    const computeTargetsContext = Object.assign(context, {
+      splitComponentBundle
+    });
+    const targets = await bundlingStrategy.computeTargets(computeTargetsContext, defs, this);
     const bundlerContext = Object.assign(context, {
       targets,
+      externalizePeer: bundlingStrategy.name !== 'env',
       entry: [],
       publicPath: this.getPreviewDirectory(context),
-      rootPath: url
+      rootPath: url,
+      development: context.dev
     });
     const bundler = await context.env.getBundler(bundlerContext, []);
     const bundlerResults = await bundler.run();
-    return bundlingStrategy.computeResults(bundlerContext, bundlerResults, this);
+    const results = bundlingStrategy.computeResults(bundlerContext, bundlerResults, this);
+    return results;
   }
 
-  async computePaths(capsule, defs, context) {
-    const previewMain = await this.preview.writePreviewRuntime(context);
-    const moduleMapsPromise = defs.map(async previewDef => {
-      const moduleMap = await previewDef.getModuleMap([capsule.component]);
-      const paths = this.getPathsFromMap(capsule, moduleMap, context);
-      const template = previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : 'undefined';
-      const link = this.preview.writeLink(previewDef.prefix, paths, previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : undefined, capsule.path);
-      const files = (0, _lodash().flatten)(paths.toArray().map(([, file]) => file)).concat([link]);
-      if (template) return files.concat([template]);
-      return files;
-    });
-    const moduleMaps = await Promise.all(moduleMapsPromise);
-    return (0, _lodash().flatten)(moduleMaps.concat([previewMain]));
+  getLinkFileDirectory() {
+    return (0, _path().join)(_builder().CAPSULE_ARTIFACTS_DIR, 'preview-links');
   }
 
   getPreviewDirectory(context) {

package/dist/preview.task.js.map

@@ -1 +1 @@
-{"version":3,"sources":["preview.task.ts"],"names":["PreviewTask","constructor","bundler","preview","execute","context","defs","getDefs","url","envRuntime","id","bundlingStrategy","getBundlingStrategy","targets","computeTargets","bundlerContext","Object","assign","entry","publicPath","getPreviewDirectory","rootPath","env","getBundler","bundlerResults","run","computeResults","computePaths","capsule","previewMain","writePreviewRuntime","moduleMapsPromise","map","previewDef","moduleMap","getModuleMap","component","paths","getPathsFromMap","template","renderTemplatePath","link","writeLink","prefix","undefined","path","files","toArray","file","concat","moduleMaps","Promise","all","outputPath","compiler","getCompiler","getDistPathBySrcPath","relative"],"mappings":"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","sourcesContent":["import { resolve, join } from 'path';\nimport { ExecutionContext } from '@teambit/envs';\nimport { BuildContext, BuiltTaskResult, BuildTask, TaskLocation } from '@teambit/builder';\nimport { Bundler, BundlerContext, BundlerMain, Target } from '@teambit/bundler';\nimport { Compiler } from '@teambit/compiler';\nimport { ComponentMap } from '@teambit/component';\nimport { Capsule } from '@teambit/isolator';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\nimport { flatten } from 'lodash';\nimport { PreviewDefinition } from './preview-definition';\nimport { PreviewMain } from './preview.main.runtime';\n\nexport class PreviewTask implements BuildTask {\n  constructor(\n    /**\n     * bundler extension.\n     */\n    private bundler: BundlerMain,\n\n    /**\n     * preview extension.\n     */\n    private preview: PreviewMain\n  ) {}\n\n  aspectId = 'teambit.preview/preview';\n  name = 'GeneratePreview';\n  location: TaskLocation = 'end';\n\n  async execute(context: BuildContext): Promise<BuiltTaskResult> {\n    const defs = this.preview.getDefs();\n    const url = `/preview/${context.envRuntime.id}`;\n    const bundlingStrategy = this.preview.getBundlingStrategy();\n\n    const targets: Target[] = await bundlingStrategy.computeTargets(context, defs, this);\n\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets,\n      entry: [],\n      publicPath: this.getPreviewDirectory(context),\n      rootPath: url,\n    });\n\n    const bundler: Bundler = await context.env.getBundler(bundlerContext, []);\n    const bundlerResults = await bundler.run();\n\n    return bundlingStrategy.computeResults(bundlerContext, bundlerResults, this);\n  }\n\n  async computePaths(capsule: Capsule, defs: PreviewDefinition[], context: BuildContext): Promise<string[]> {\n    const previewMain = await this.preview.writePreviewRuntime(context);\n\n    const moduleMapsPromise = defs.map(async (previewDef) => {\n      const moduleMap = await previewDef.getModuleMap([capsule.component]);\n      const paths = this.getPathsFromMap(capsule, moduleMap, context);\n      const template = previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : 'undefined';\n\n      const link = this.preview.writeLink(\n        previewDef.prefix,\n        paths,\n        previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : undefined,\n        capsule.path\n      );\n\n      const files = flatten(paths.toArray().map(([, file]) => file)).concat([link]);\n\n      if (template) return files.concat([template]);\n      return files;\n    });\n\n    const moduleMaps = await Promise.all(moduleMapsPromise);\n\n    return flatten(moduleMaps.concat([previewMain]));\n  }\n\n  getPreviewDirectory(context: ExecutionContext) {\n    const outputPath = resolve(`${context.id}/public`);\n    return outputPath;\n  }\n\n  getPathsFromMap(\n    capsule: Capsule,\n    moduleMap: ComponentMap<AbstractVinyl[]>,\n    context: BuildContext\n  ): ComponentMap<string[]> {\n    const compiler: Compiler = context.env.getCompiler(context);\n    return moduleMap.map((files) => {\n      return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));\n    });\n  }\n}\n"]}
+{"version":3,"sources":["preview.task.ts"],"names":["PREVIEW_TASK_NAME","PreviewTask","constructor","bundler","preview","execute","context","defs","getDefs","url","envRuntime","id","bundlingStrategy","getBundlingStrategy","env","envPreviewConfig","getEnvPreviewConfig","splitComponentBundle","computeTargetsContext","Object","assign","targets","computeTargets","bundlerContext","externalizePeer","name","entry","publicPath","getPreviewDirectory","rootPath","development","dev","getBundler","bundlerResults","run","results","computeResults","getLinkFileDirectory","CAPSULE_ARTIFACTS_DIR","outputPath","getPathsFromMap","capsule","moduleMap","compiler","getCompiler","map","files","file","path","getDistPathBySrcPath","relative"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAQO,MAAMA,iBAAiB,GAAG,iBAA1B;;;AACA,MAAMC,WAAN,CAAuC;AAC5CC,EAAAA,WAAW;AACT;AACJ;AACA;AACYC,EAAAA,OAJC;AAMT;AACJ;AACA;AACYC,EAAAA,OATC,EAUT;AAAA,SANQD,OAMR,GANQA,OAMR;AAAA,SADQC,OACR,GADQA,OACR;AAAA,sDAES,yBAFT;AAAA,kDAGKJ,iBAHL;AAAA,sDAIuB,KAJvB;AAAE;;AAKJ;AAEa,QAAPK,OAAO,CAACC,OAAD,EAAkD;AAAA;;AAC7D,UAAMC,IAAI,GAAG,KAAKH,OAAL,CAAaI,OAAb,EAAb;AACA,UAAMC,GAAG,GAAI,YAAWH,OAAO,CAACI,UAAR,CAAmBC,EAAG,EAA9C;AACA,UAAMC,gBAAgB,GAAG,KAAKR,OAAL,CAAaS,mBAAb,CAAiCP,OAAO,CAACQ,GAAzC,CAAzB;AACA,UAAMC,gBAAgB,GAAG,KAAKX,OAAL,CAAaY,mBAAb,CAAiCV,OAAO,CAACQ,GAAzC,CAAzB;AACA,UAAMG,oBAAoB,4BAAGF,gBAAgB,CAACE,oBAApB,yEAA4C,KAAtE;AACA,UAAMC,qBAAqB,GAAGC,MAAM,CAACC,MAAP,CAAcd,OAAd,EAAuB;AAAEW,MAAAA;AAAF,KAAvB,CAA9B;AAEA,UAAMI,OAAiB,GAAG,MAAMT,gBAAgB,CAACU,cAAjB,CAAgCJ,qBAAhC,EAAuDX,IAAvD,EAA6D,IAA7D,CAAhC;AAEA,UAAMgB,cAA8B,GAAGJ,MAAM,CAACC,MAAP,CAAcd,OAAd,EAAuB;AAC5De,MAAAA,OAD4D;AAE5DG,MAAAA,eAAe,EAAEZ,gBAAgB,CAACa,IAAjB,KAA0B,KAFiB;AAG5DC,MAAAA,KAAK,EAAE,EAHqD;AAI5DC,MAAAA,UAAU,EAAE,KAAKC,mBAAL,CAAyBtB,OAAzB,CAJgD;AAK5DuB,MAAAA,QAAQ,EAAEpB,GALkD;AAM5DqB,MAAAA,WAAW,EAAExB,OAAO,CAACyB;AANuC,KAAvB,CAAvC;AASA,UAAM5B,OAAgB,GAAG,MAAMG,OAAO,CAACQ,GAAR,CAAYkB,UAAZ,CAAuBT,cAAvB,EAAuC,EAAvC,CAA/B;AACA,UAAMU,cAAc,GAAG,MAAM9B,OAAO,CAAC+B,GAAR,EAA7B;AAEA,UAAMC,OAAO,GAAGvB,gBAAgB,CAACwB,cAAjB,CAAgCb,cAAhC,EAAgDU,cAAhD,EAAgE,IAAhE,CAAhB;AACA,WAAOE,OAAP;AACD;;AAEDE,EAAAA,oBAAoB,GAAG;AACrB,WAAO,kBAAKC,gCAAL,EAA4B,eAA5B,CAAP;AACD;;AAEDV,EAAAA,mBAAmB,CAACtB,OAAD,EAA4B;AAC7C,UAAMiC,UAAU,GAAG,qBAAS,GAAEjC,OAAO,CAACK,EAAG,SAAtB,CAAnB;AACA,WAAO4B,UAAP;AACD;;AAEDC,EAAAA,eAAe,CACbC,OADa,EAEbC,SAFa,EAGbpC,OAHa,EAIW;AACxB,UAAMqC,QAAkB,GAAGrC,OAAO,CAACQ,GAAR,CAAY8B,WAAZ,CAAwBtC,OAAxB,CAA3B;AACA,WAAOoC,SAAS,CAACG,GAAV,CAAeC,KAAD,IAAW;AAC9B,aAAOA,KAAK,CAACD,GAAN,CAAWE,IAAD,IAAU,kBAAKN,OAAO,CAACO,IAAb,EAAmBL,QAAQ,CAACM,oBAAT,CAA8BF,IAAI,CAACG,QAAnC,CAAnB,CAApB,CAAP;AACD,KAFM,CAAP;AAGD;;AA9D2C","sourcesContent":["import { resolve, join } from 'path';\nimport { ExecutionContext } from '@teambit/envs';\nimport { BuildContext, BuiltTaskResult, BuildTask, TaskLocation, CAPSULE_ARTIFACTS_DIR } from '@teambit/builder';\nimport { Bundler, BundlerContext, BundlerMain, Target } from '@teambit/bundler';\nimport { Compiler } from '@teambit/compiler';\nimport { ComponentMap } from '@teambit/component';\nimport { Capsule } from '@teambit/isolator';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\nimport { PreviewMain } from './preview.main.runtime';\n\nexport const PREVIEW_TASK_NAME = 'GeneratePreview';\nexport class PreviewTask implements BuildTask {\n  constructor(\n    /**\n     * bundler extension.\n     */\n    private bundler: BundlerMain,\n\n    /**\n     * preview extension.\n     */\n    private preview: PreviewMain\n  ) {}\n\n  aspectId = 'teambit.preview/preview';\n  name = PREVIEW_TASK_NAME;\n  location: TaskLocation = 'end';\n  // readonly dependencies = [CompilerAspect.id];\n\n  async execute(context: BuildContext): Promise<BuiltTaskResult> {\n    const defs = this.preview.getDefs();\n    const url = `/preview/${context.envRuntime.id}`;\n    const bundlingStrategy = this.preview.getBundlingStrategy(context.env);\n    const envPreviewConfig = this.preview.getEnvPreviewConfig(context.env);\n    const splitComponentBundle = envPreviewConfig.splitComponentBundle ?? false;\n    const computeTargetsContext = Object.assign(context, { splitComponentBundle });\n\n    const targets: Target[] = await bundlingStrategy.computeTargets(computeTargetsContext, defs, this);\n\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets,\n      externalizePeer: bundlingStrategy.name !== 'env',\n      entry: [],\n      publicPath: this.getPreviewDirectory(context),\n      rootPath: url,\n      development: context.dev,\n    });\n\n    const bundler: Bundler = await context.env.getBundler(bundlerContext, []);\n    const bundlerResults = await bundler.run();\n\n    const results = bundlingStrategy.computeResults(bundlerContext, bundlerResults, this);\n    return results;\n  }\n\n  getLinkFileDirectory() {\n    return join(CAPSULE_ARTIFACTS_DIR, 'preview-links');\n  }\n\n  getPreviewDirectory(context: ExecutionContext) {\n    const outputPath = resolve(`${context.id}/public`);\n    return outputPath;\n  }\n\n  getPathsFromMap(\n    capsule: Capsule,\n    moduleMap: ComponentMap<AbstractVinyl[]>,\n    context: BuildContext\n  ): ComponentMap<string[]> {\n    const compiler: Compiler = context.env.getCompiler(context);\n    return moduleMap.map((files) => {\n      return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));\n    });\n  }\n}\n"]}

package/dist/strategies/component-strategy.d.ts

@@ -1,20 +1,60 @@
-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';
+import { Component } from '@teambit/component';
+import { ComponentResult } from '@teambit/builder';
+import type { PkgMain } from '@teambit/pkg';
+import type { DependencyResolverMain } from '@teambit/dependency-resolver';
+import type { BundlerResult, BundlerContext, BundlerEntryMap } from '@teambit/bundler';
+import { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';
+import type { PreviewDefinition } from '../preview-definition';
+import type { PreviewMain } from '../preview.main.runtime';
+export declare const PREVIEW_CHUNK_SUFFIX = "preview";
+export declare const COMPONENT_CHUNK_SUFFIX = "component";
+export declare const PREVIEW_CHUNK_FILENAME_SUFFIX: string;
+export declare const COMPONENT_CHUNK_FILENAME_SUFFIX: string;
+export declare const COMPONENT_STRATEGY_SIZE_KEY_NAME = "size";
+export declare const COMPONENT_STRATEGY_ARTIFACT_NAME = "preview-component";
+/**
+ * bundles all components in a given env into the same bundle.
+ */
 export declare class ComponentBundlingStrategy implements BundlingStrategy {
+    private preview;
+    private pkg;
+    private dependencyResolver;
     name: string;
-    computeTargets(context: BuildContext, previewDefs: PreviewDefinition[], previewTask: PreviewTask): Promise<Target[]>;
-    computeResults(context: BundlerContext, results: BundlerResult[], previewTask: PreviewTask): Promise<{
-        componentsResults: {
-            errors: Error[];
-            component: import("@teambit/component").Component;
-            warning: string[];
-        }[];
+    constructor(preview: PreviewMain, pkg: PkgMain, dependencyResolver: DependencyResolverMain);
+    computeTargets(context: ComputeTargetsContext, previewDefs: PreviewDefinition[]): Promise<{
+        entries: BundlerEntryMap;
+        components: Component[];
+        outputPath: string;
+    }[]>;
+    computeComponentEntry(previewDefs: PreviewDefinition[], component: Component, context: ComputeTargetsContext): Promise<{
+        [x: string]: {
+            filename: string;
+            import: string;
+            library: {
+                name: string;
+                type: string;
+            };
+        };
+    }>;
+    private getComponentChunkId;
+    private getComponentChunkFileName;
+    private getAssetAbsolutePath;
+    copyAssetsToCapsules(context: BundlerContext, result: BundlerResult): void;
+    private findAssetsForComponent;
+    private getArtifactDirectory;
+    private computeComponentMetadata;
+    computeResults(context: BundlerContext, results: BundlerResult[]): Promise<{
+        componentsResults: ComponentResult[];
         artifacts: {
             name: string;
             globPatterns: string[];
+            rootDir: string;
         }[];
     }>;
+    private getArtifactDef;
+    getDirName(context: ComputeTargetsContext): string;
+    private getOutputPath;
+    private getPaths;
+    private getComponentOutputPath;
+    private computePaths;
 }