@teambit/preview 0.0.775 → 0.0.778

package/preview.preview.runtime.tsx

@@ -12,6 +12,7 @@ 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';
+import { loadScript, loadLink } from './html-utils';
 
 // forward linkModules() for generate-link.ts
 export { linkModules } from './preview-modules';
@@ -136,14 +137,17 @@ export class PreviewPreview {
     // It's a component bundled with the env
     if (allFiles === null) return {};
 
-    allFiles.forEach((file) => {
-      // We want to run the preview file always last
-      if (file.endsWith('-preview.js')) {
-        previewFile = file;
-      } else {
-        this.addComponentFileElement(id, file);
-      }
-    });
+    await Promise.all(
+      allFiles.map((file) => {
+        // We want to run the preview file always last
+        if (file.endsWith('-preview.js')) {
+          previewFile = file;
+          return undefined;
+        }
+
+        return this.addComponentFileElement(id, file);
+      })
+    );
 
     if (!previewFile) return {};
     return this.loadPreviewScript(id, name, previewFile);
@@ -177,42 +181,25 @@ export class PreviewPreview {
   }
 
   private addComponentFileScriptElement(id: ComponentID, previewBundleFileName: string) {
-    const script = document.createElement('script');
-    script.setAttribute('defer', 'defer');
-    const stringId = id.toString();
     const previewRoute = `~aspect/component-preview`;
+    const stringId = id.toString();
     const src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;
-    script.src = src;
-    document.head.appendChild(script);
-    return script;
+    return loadScript({ src });
   }
 
   private addComponentFileLinkElement(id: ComponentID, previewBundleFileName: string) {
-    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;
+    return loadLink({ href });
   }
 
   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 previewRoute = `~aspect/component-preview`;
+    const src = `/api/${id.toString()}/${previewRoute}/${previewBundleFileName}`;
+    await loadScript({ src });
 
+    // TODO - replace with jsonp
     const globalId = `${id.toStringWithoutVersion()}-preview`;
     const componentPreview = window[globalId];
     if (!componentPreview) throw new PreviewNotFound(previewName);

package/strategies/component-strategy.ts

@@ -119,12 +119,16 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
     component: Component,
     context: ComputeTargetsContext
   ): Promise<ComponentEntry> {
-    const path = await this.computePaths(previewDefs, context, component);
+    const componentPreviewPath = await this.computePaths(previewDefs, context, component);
     const [componentPath] = this.getPaths(context, component, [component.mainFile]);
-    const componentPreviewChunkId = this.getComponentChunkId(component.id, 'preview');
+
+    const chunks = {
+      componentPreview: this.getComponentChunkId(component.id, 'preview'),
+      component: context.splitComponentBundle ? component.id.toStringWithoutVersion() : undefined,
+    };
 
     const entries = {
-      [componentPreviewChunkId]: {
+      [chunks.componentPreview]: {
         filename: this.getComponentChunkFileName(
           component.id.toString({
             fsCompatible: true,
@@ -132,17 +136,14 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
           }),
           'preview'
         ),
-        import: path,
-        // dependOn: component.id.toStringWithoutVersion(),
-        library: {
-          name: componentPreviewChunkId,
-          type: 'umd',
-        },
+        import: componentPreviewPath,
+        dependOn: chunks.component,
+        library: { name: chunks.componentPreview, type: 'umd' },
       },
     };
-    if (context.splitComponentBundle) {
-      const componentChunkId = component.id.toStringWithoutVersion();
-      entries[componentChunkId] = {
+
+    if (chunks.component) {
+      entries[chunks.component] = {
         filename: this.getComponentChunkFileName(
           component.id.toString({
             fsCompatible: true,
@@ -150,13 +151,12 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
           }),
           'component'
         ),
+        dependOn: undefined,
         import: componentPath,
-        library: {
-          name: componentChunkId,
-          type: 'umd',
-        },
+        library: { name: chunks.component, type: 'umd' },
       };
     }
+
     return { component, entries };
   }
 

package/strategies/generate-component-link.ts

@@ -17,15 +17,15 @@ export function generateComponentLink(modules: ModuleVar[]): string {
   // import per preview file
   const importStr: string = links
     .map(({ entries }) => entries.map(({ path, linkName }) => `import * as ${linkName} from '${path}'`).join(';\n'))
-    .join('\n');
+    .join(';\n');
 
   // export files group per preview
   const exportsString: string = links
     .map(({ name, entries }) => `export const ${name} = [${entries.map((entry) => entry.linkName).join(', ')}]`)
     .join(';\n');
 
-  return `${importStr}
+  return `${importStr};
 
-${exportsString}
+${exportsString};
 `;
 }