@teambit/preview 0.0.771 → 0.0.774

package/preview.preview.runtime.tsx

@@ -8,13 +8,15 @@ 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 { ModuleFile, PreviewModule } from './types/preview-module';
 import { RenderingContext } from './rendering-context';
 import { fetchComponentAspects } from './gql/fetch-component-aspects';
+import { PREVIEW_MODULES } from './preview-modules';
 
-export type PreviewSlot = SlotRegistry<PreviewType>;
+// forward linkModules() for generate-link.ts
+export { linkModules } from './preview-modules';
 
-const PREVIEW_MODULES: Record<string, PreviewModule> = {};
+export type PreviewSlot = SlotRegistry<PreviewType>;
 
 export type RenderingContextOptions = { aspectsFilter?: string[] };
 export type RenderingContextProvider = (options: RenderingContextOptions) => { [key: string]: any };
@@ -47,6 +49,32 @@ export class PreviewPreview {
 
   private isDev = false;
 
+  private isReady() {
+    const { previewName } = this.getLocation();
+    const name = previewName || this.getDefault();
+
+    if (!PREVIEW_MODULES.has(name)) return false;
+    const preview = this.getPreview(name);
+    if (!preview) return false;
+    const includedReady = preview.include?.every((included) => PREVIEW_MODULES.has(included)) ?? true;
+    if (!includedReady) return false;
+
+    return true;
+  }
+
+  private _setupPromise?: Promise<void>;
+  setup = () => {
+    if (this.isReady()) return Promise.resolve();
+
+    this._setupPromise ??= new Promise((resolve) => {
+      PREVIEW_MODULES.onSet.add(() => {
+        if (this.isReady()) resolve();
+      });
+    });
+
+    return this._setupPromise;
+  };
+
   /**
    * render the preview.
    */
@@ -61,14 +89,12 @@ export class PreviewPreview {
     }
 
     const includesAll = await Promise.all(
-      (preview.include || []).map(async (prevName) => {
-        const includedPreview = this.getPreview(prevName);
+      (preview.include || []).map(async (inclPreviewName) => {
+        const includedPreview = this.getPreview(inclPreviewName);
         if (!includedPreview) return undefined;
 
-        return includedPreview.selectPreviewModel?.(
-          componentId.fullName,
-          await this.getPreviewModule(prevName, componentId, name)
-        );
+        const inclPreviewModule = await this.getPreviewModule(inclPreviewName, componentId);
+        return includedPreview.selectPreviewModel?.(componentId.fullName, inclPreviewModule);
       })
     );
 
@@ -84,18 +110,17 @@ export class PreviewPreview {
     );
   };
 
-  async getPreviewModule(name: string, id: ComponentID, parentPreviewName?: string): Promise<PreviewModule> {
-    const relevantModel = PREVIEW_MODULES[name];
-    if (relevantModel.componentMap[id.fullName]) return relevantModel;
-
-    let component;
-    // Handle case when there is overview but no composition on the workspace dev server
-    if (!parentPreviewName || !PREVIEW_MODULES[parentPreviewName].componentMap[id.fullName]) {
-      // if (!window[name]) throw new PreviewNotFound(name);
-      // const isSplitComponentBundle = relevantModel.isSplitComponentBundle ?? false;
-      // const component = window[id.toStringWithoutVersion()];
-      component = await this.fetchComponentPreview(id, name);
-    }
+  async getPreviewModule(previewName: string, id: ComponentID): Promise<PreviewModule> {
+    const compShortId = id.fullName;
+
+    const relevantModel = PREVIEW_MODULES.get(previewName);
+    if (!relevantModel) throw new Error(`[preview.preview] missing preview "${previewName}"`);
+    if (relevantModel.componentMap[compShortId]) return relevantModel;
+
+    const componentPreviews = await this.fetchComponentPreview(id, previewName);
+    PREVIEW_MODULES.loadComponentPreviews(compShortId, componentPreviews);
+
+    const component = componentPreviews[previewName];
 
     return {
       mainModule: relevantModel.mainModule,
@@ -105,13 +130,12 @@ export class PreviewPreview {
     };
   }
 
-  async fetchComponentPreview(id: ComponentID, name: string) {
-    let previewFile;
+  async fetchComponentPreview(id: ComponentID, name: string): Promise<Record<string, ModuleFile[]>> {
+    let previewFile: string | undefined;
     const allFiles = await this.fetchComponentPreviewFiles(id, name);
     // It's a component bundled with the env
-    if (allFiles === null) {
-      return Promise.resolve(undefined);
-    }
+    if (allFiles === null) return {};
+
     allFiles.forEach((file) => {
       // We want to run the preview file always last
       if (file.endsWith('-preview.js')) {
@@ -120,10 +144,9 @@ export class PreviewPreview {
         this.addComponentFileElement(id, file);
       }
     });
-    return new Promise((resolve, reject) => {
-      const previewScriptElement = this.getPreviewScriptElement(id, name, previewFile, resolve, reject);
-      document.head.appendChild(previewScriptElement);
-    });
+
+    if (!previewFile) return {};
+    return this.loadPreviewScript(id, name, previewFile);
   }
 
   private addComponentFileElement(id: ComponentID, previewBundleFileName: string) {
@@ -177,23 +200,24 @@ export class PreviewPreview {
     return link;
   }
 
-  private getPreviewScriptElement(id: ComponentID, name: string, previewBundleFileName: string, 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 PreviewNotFound(name));
-      const targetPreview = componentPreview[name];
-      if (!targetPreview) return resolve(undefined);
-
-      return resolve(targetPreview);
-    };
-    return script;
+  private async loadPreviewScript(id: ComponentID, previewName: string, previewBundleFileName: string) {
+    await new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script');
+      const previewRoute = `~aspect/component-preview`;
+      const src = `/api/${id.toString()}/${previewRoute}/${previewBundleFileName}`;
+      script.src = src;
+      script.setAttribute('defer', 'defer');
+      script.onload = () => resolve();
+      script.onerror = (message, _, _1, _2, error) =>
+        reject(error || new Error(`[preview.preview] failed to load preview script: ${message}`));
+      document.head.appendChild(script);
+    });
+
+    const globalId = `${id.toStringWithoutVersion()}-preview`;
+    const componentPreview = window[globalId];
+    if (!componentPreview) throw new PreviewNotFound(previewName);
+
+    return componentPreview as Record<string, ModuleFile[]>;
   }
 
   private getComponentAspects = memoize(fetchComponentAspects, {
@@ -276,8 +300,4 @@ export class PreviewPreview {
   }
 }
 
-export function linkModules(previewName: string, previewModule: PreviewModule) {
-  PREVIEW_MODULES[previewName] = previewModule;
-}
-
 PreviewAspect.addRuntime(PreviewPreview);

package/strategies/env-strategy.ts

@@ -12,7 +12,7 @@ import { PkgMain } from '@teambit/pkg';
 import type { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';
 import { PreviewDefinition } from '../preview-definition';
 import { PreviewMain } from '../preview.main.runtime';
-import { html } from '../webpack';
+import { html } from '../bundler/html-template';
 
 export const ENV_STRATEGY_ARTIFACT_NAME = 'preview';
 

package/dist/webpack/html.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["html","title"],"sources":["html.ts"],"sourcesContent":["/** html template for Previews (docs, compositions, etc) */\nexport function html(title: string) {\n  return `\n  <!DOCTYPE html>\n  <html lang=\"en\">\n    <head>\n      <meta charset=\"utf-8\">\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n      <title>${title}</title>\n      <script>\n      // Allow to use react dev-tools inside the examples\n      try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}\n      </script>\n      <!-- minimal css resets -->\n      <style> html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; } </style>\n    </head>\n    <body>\n      <div id=\"root\"></div>\n    </body>\n  </html>\n  `;\n}\n"],"mappings":";;;;;;;AAAA;AACO,SAASA,IAAT,CAAcC,KAAd,EAA6B;EAClC,OAAQ;AACV;AACA;AACA;AACA;AACA;AACA,eAAeA,KAAM;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAlBE;AAmBD"}

package/dist/webpack/index.d.ts

@@ -1 +0,0 @@
-export { html } from './html';

package/dist/webpack/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "html", {
-  enumerable: true,
-  get: function () {
-    return _html().html;
-  }
-});
-
-function _html() {
-  const data = require("./html");
-
-  _html = function () {
-    return data;
-  };
-
-  return data;
-}
-
-//# sourceMappingURL=index.js.map

package/dist/webpack/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { html } from './html';\n"],"mappings":";;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA"}

package/webpack/index.ts

@@ -1 +0,0 @@
-export { html } from './html';