@teambit/preview 0.0.769 → 0.0.772

package/dist/strategies/env-strategy.js.map

@@ -1 +1 @@
-{"version":3,"names":["ENV_STRATEGY_ARTIFACT_NAME","EnvBundlingStrategy","constructor","preview","pkg","dependencyResolver","computeTargets","context","previewDefs","outputPath","getOutputPath","existsSync","mkdirpSync","htmlConfig","generateHtmlConfig","dev","peers","getPeerDependenciesListFromEnv","env","entries","computePaths","html","components","hostDependencies","aliasHostDependencies","options","config","title","templateContent","cache","minify","computeResults","results","result","componentsResults","map","component","errors","err","message","warning","warnings","startTime","endTime","artifacts","getArtifactDef","rootDir","getDirName","name","globPatterns","envName","id","replace","resolve","capsuleNetwork","capsulesRootDir","getPaths","files","capsule","compiler","getCompiler","file","join","path","getDistPathBySrcPath","relative","defs","previewMain","writePreviewRuntime","moduleMapsPromise","previewDef","moduleMap","getModuleMap","paths","ComponentMap","as","graphCapsules","getCapsule","maybeFiles","get","compiledPaths","template","renderTemplatePath","link","writeLink","prefix","undefined","flatten","toArray","concat","moduleMaps","Promise","all"],"sources":["env-strategy.ts"],"sourcesContent":["import { join, resolve } from 'path';\nimport { existsSync, mkdirpSync } from 'fs-extra';\nimport { flatten } from 'lodash';\nimport { ComponentMap } from '@teambit/component';\nimport { Compiler } from '@teambit/compiler';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\nimport { Capsule } from '@teambit/isolator';\nimport { ComponentResult } from '@teambit/builder';\nimport { BundlerContext, BundlerHtmlConfig, BundlerResult } from '@teambit/bundler';\nimport { DependencyResolverMain } from '@teambit/dependency-resolver';\nimport { PkgMain } from '@teambit/pkg';\nimport type { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';\nimport { PreviewDefinition } from '../preview-definition';\nimport { PreviewMain } from '../preview.main.runtime';\nimport { html } from '../webpack';\n\nexport const ENV_STRATEGY_ARTIFACT_NAME = 'preview';\n\n/**\n * bundles all components in a given env into the same bundle.\n */\nexport class EnvBundlingStrategy implements BundlingStrategy {\n  name = 'env';\n\n  constructor(private preview: PreviewMain, private pkg: PkgMain, private dependencyResolver: DependencyResolverMain) {}\n\n  async computeTargets(context: ComputeTargetsContext, previewDefs: PreviewDefinition[]) {\n    const outputPath = this.getOutputPath(context);\n    if (!existsSync(outputPath)) mkdirpSync(outputPath);\n    const htmlConfig = this.generateHtmlConfig({ dev: context.dev });\n    const peers = await this.dependencyResolver.getPeerDependenciesListFromEnv(context.env);\n\n    return [\n      {\n        entries: await this.computePaths(outputPath, previewDefs, context),\n        html: [htmlConfig],\n        components: context.components,\n        outputPath,\n        /* It's a path to the root of the host component. */\n        // hostRootDir, handle this\n        hostDependencies: peers,\n        aliasHostDependencies: true,\n      },\n    ];\n  }\n\n  private generateHtmlConfig(options: { dev?: boolean }): BundlerHtmlConfig {\n    const config = {\n      title: 'Preview',\n      templateContent: html('Preview'),\n      cache: false,\n      minify: options?.dev ?? true,\n    };\n    return config;\n  }\n\n  async computeResults(context: BundlerContext, results: BundlerResult[]) {\n    const result = results[0];\n\n    const componentsResults: ComponentResult[] = result.components.map((component) => {\n      return {\n        component,\n        errors: result.errors.map((err) => (typeof err === 'string' ? err : err.message)),\n        warning: result.warnings,\n        startTime: result.startTime,\n        endTime: result.endTime,\n      };\n    });\n\n    const artifacts = this.getArtifactDef(context);\n\n    return {\n      componentsResults,\n      artifacts,\n    };\n  }\n\n  private getArtifactDef(context: ComputeTargetsContext) {\n    // eslint-disable-next-line @typescript-eslint/prefer-as-const\n    const env: 'env' = 'env';\n    const rootDir = this.getDirName(context);\n\n    return [\n      {\n        name: ENV_STRATEGY_ARTIFACT_NAME,\n        globPatterns: ['public/**'],\n        rootDir,\n        context: env,\n      },\n    ];\n  }\n\n  getDirName(context: ComputeTargetsContext) {\n    const envName = context.id.replace('/', '__');\n    return `${envName}-preview`;\n  }\n\n  private getOutputPath(context: ComputeTargetsContext) {\n    return resolve(`${context.capsuleNetwork.capsulesRootDir}/${this.getDirName(context)}`);\n  }\n\n  private getPaths(context: ComputeTargetsContext, files: AbstractVinyl[], capsule: Capsule) {\n    const compiler: Compiler = context.env.getCompiler();\n    return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));\n  }\n\n  private async computePaths(\n    outputPath: string,\n    defs: PreviewDefinition[],\n    context: ComputeTargetsContext\n  ): Promise<string[]> {\n    const previewMain = await this.preview.writePreviewRuntime(context);\n    const moduleMapsPromise = defs.map(async (previewDef) => {\n      const moduleMap = await previewDef.getModuleMap(context.components);\n\n      const paths = ComponentMap.as(context.components, (component) => {\n        const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);\n        const maybeFiles = moduleMap.get(component);\n        if (!maybeFiles || !capsule) return [];\n        const [, files] = maybeFiles;\n        const compiledPaths = this.getPaths(context, files, capsule);\n        return compiledPaths;\n      });\n\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        outputPath,\n        false\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"],"mappings":"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"}
+{"version":3,"names":["ENV_STRATEGY_ARTIFACT_NAME","EnvBundlingStrategy","constructor","preview","pkg","dependencyResolver","computeTargets","context","previewDefs","outputPath","getOutputPath","existsSync","mkdirpSync","htmlConfig","generateHtmlConfig","dev","peers","getPeerDependenciesListFromEnv","env","entries","computePaths","html","components","hostDependencies","aliasHostDependencies","options","config","title","templateContent","cache","minify","computeResults","results","result","componentsResults","map","component","errors","err","message","warning","warnings","startTime","endTime","artifacts","getArtifactDef","rootDir","getDirName","name","globPatterns","envName","id","replace","resolve","capsuleNetwork","capsulesRootDir","getPaths","files","capsule","compiler","getCompiler","file","join","path","getDistPathBySrcPath","relative","defs","previewMain","writePreviewRuntime","moduleMapsPromise","previewDef","moduleMap","getModuleMap","paths","ComponentMap","as","graphCapsules","getCapsule","maybeFiles","get","compiledPaths","template","renderTemplatePath","link","writeLink","prefix","undefined","flatten","toArray","concat","moduleMaps","Promise","all"],"sources":["env-strategy.ts"],"sourcesContent":["import { join, resolve } from 'path';\nimport { existsSync, mkdirpSync } from 'fs-extra';\nimport { flatten } from 'lodash';\nimport { ComponentMap } from '@teambit/component';\nimport { Compiler } from '@teambit/compiler';\nimport { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';\nimport { Capsule } from '@teambit/isolator';\nimport { ComponentResult } from '@teambit/builder';\nimport { BundlerContext, BundlerHtmlConfig, BundlerResult } from '@teambit/bundler';\nimport { DependencyResolverMain } from '@teambit/dependency-resolver';\nimport { PkgMain } from '@teambit/pkg';\nimport type { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';\nimport { PreviewDefinition } from '../preview-definition';\nimport { PreviewMain } from '../preview.main.runtime';\nimport { html } from '../bundler/html-template';\n\nexport const ENV_STRATEGY_ARTIFACT_NAME = 'preview';\n\n/**\n * bundles all components in a given env into the same bundle.\n */\nexport class EnvBundlingStrategy implements BundlingStrategy {\n  name = 'env';\n\n  constructor(private preview: PreviewMain, private pkg: PkgMain, private dependencyResolver: DependencyResolverMain) {}\n\n  async computeTargets(context: ComputeTargetsContext, previewDefs: PreviewDefinition[]) {\n    const outputPath = this.getOutputPath(context);\n    if (!existsSync(outputPath)) mkdirpSync(outputPath);\n    const htmlConfig = this.generateHtmlConfig({ dev: context.dev });\n    const peers = await this.dependencyResolver.getPeerDependenciesListFromEnv(context.env);\n\n    return [\n      {\n        entries: await this.computePaths(outputPath, previewDefs, context),\n        html: [htmlConfig],\n        components: context.components,\n        outputPath,\n        /* It's a path to the root of the host component. */\n        // hostRootDir, handle this\n        hostDependencies: peers,\n        aliasHostDependencies: true,\n      },\n    ];\n  }\n\n  private generateHtmlConfig(options: { dev?: boolean }): BundlerHtmlConfig {\n    const config = {\n      title: 'Preview',\n      templateContent: html('Preview'),\n      cache: false,\n      minify: options?.dev ?? true,\n    };\n    return config;\n  }\n\n  async computeResults(context: BundlerContext, results: BundlerResult[]) {\n    const result = results[0];\n\n    const componentsResults: ComponentResult[] = result.components.map((component) => {\n      return {\n        component,\n        errors: result.errors.map((err) => (typeof err === 'string' ? err : err.message)),\n        warning: result.warnings,\n        startTime: result.startTime,\n        endTime: result.endTime,\n      };\n    });\n\n    const artifacts = this.getArtifactDef(context);\n\n    return {\n      componentsResults,\n      artifacts,\n    };\n  }\n\n  private getArtifactDef(context: ComputeTargetsContext) {\n    // eslint-disable-next-line @typescript-eslint/prefer-as-const\n    const env: 'env' = 'env';\n    const rootDir = this.getDirName(context);\n\n    return [\n      {\n        name: ENV_STRATEGY_ARTIFACT_NAME,\n        globPatterns: ['public/**'],\n        rootDir,\n        context: env,\n      },\n    ];\n  }\n\n  getDirName(context: ComputeTargetsContext) {\n    const envName = context.id.replace('/', '__');\n    return `${envName}-preview`;\n  }\n\n  private getOutputPath(context: ComputeTargetsContext) {\n    return resolve(`${context.capsuleNetwork.capsulesRootDir}/${this.getDirName(context)}`);\n  }\n\n  private getPaths(context: ComputeTargetsContext, files: AbstractVinyl[], capsule: Capsule) {\n    const compiler: Compiler = context.env.getCompiler();\n    return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));\n  }\n\n  private async computePaths(\n    outputPath: string,\n    defs: PreviewDefinition[],\n    context: ComputeTargetsContext\n  ): Promise<string[]> {\n    const previewMain = await this.preview.writePreviewRuntime(context);\n    const moduleMapsPromise = defs.map(async (previewDef) => {\n      const moduleMap = await previewDef.getModuleMap(context.components);\n\n      const paths = ComponentMap.as(context.components, (component) => {\n        const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);\n        const maybeFiles = moduleMap.get(component);\n        if (!maybeFiles || !capsule) return [];\n        const [, files] = maybeFiles;\n        const compiledPaths = this.getPaths(context, files, capsule);\n        return compiledPaths;\n      });\n\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        outputPath,\n        false\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"],"mappings":"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"}

package/dist/strategies/generate-component-link.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/es.array.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,9 +18,31 @@ function _toolboxPath() {
 }
 
 function generateComponentLink(modules) {
-  return `${modules.map(moduleVar => {
-    return `export const ${moduleVar.prefix} = [${moduleVar.paths.map(path => `require('${(0, _toolboxPath().toWindowsCompatiblePath)(path)}')`).join(', ')}]`; // return `export { * as ${moduleVar.prefix} } from '${toWindowsCompatiblePath(moduleVar.paths)}'`;
-  }).join('\n')}
+  const links = modules.map(({
+    prefix,
+    paths
+  }) => ({
+    name: prefix,
+    entries: paths.map((path, idx) => ({
+      path: (0, _toolboxPath().toWindowsCompatiblePath)(path),
+      linkName: `${prefix}_${idx}`
+    }))
+  })); // import per preview file
+
+  const importStr = links.map(({
+    entries
+  }) => entries.map(({
+    path,
+    linkName
+  }) => `import * as ${linkName} from '${path}'`).join(';\n')).join('\n'); // export files group per preview
+
+  const exportsString = links.map(({
+    name,
+    entries
+  }) => `export const ${name} = [${entries.map(entry => entry.linkName).join(', ')}]`).join(';\n');
+  return `${importStr}
+
+${exportsString}
 `;
 }
 

package/dist/strategies/generate-component-link.js.map

@@ -1 +1 @@
-{"version":3,"names":["generateComponentLink","modules","map","moduleVar","prefix","paths","path","toWindowsCompatiblePath","join"],"sources":["generate-component-link.ts"],"sourcesContent":["import { toWindowsCompatiblePath } from '@teambit/toolbox.path.to-windows-compatible-path';\n\nexport type ModuleVar = {\n  prefix: string;\n  paths: string[];\n};\n\nexport function generateComponentLink(modules: ModuleVar[]): string {\n  return `${modules\n    .map((moduleVar) => {\n      return `export const ${moduleVar.prefix} = [${moduleVar.paths\n        .map((path) => `require('${toWindowsCompatiblePath(path)}')`)\n        .join(', ')}]`;\n\n      // return `export { * as ${moduleVar.prefix} } from '${toWindowsCompatiblePath(moduleVar.paths)}'`;\n    })\n    .join('\\n')}\n`;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAOO,SAASA,qBAAT,CAA+BC,OAA/B,EAA6D;EAClE,OAAQ,GAAEA,OAAO,CACdC,GADO,CACFC,SAAD,IAAe;IAClB,OAAQ,gBAAeA,SAAS,CAACC,MAAO,OAAMD,SAAS,CAACE,KAAV,CAC3CH,GAD2C,CACtCI,IAAD,IAAW,YAAW,IAAAC,sCAAA,EAAwBD,IAAxB,CAA8B,IADb,EAE3CE,IAF2C,CAEtC,IAFsC,CAEhC,GAFd,CADkB,CAKlB;EACD,CAPO,EAQPA,IARO,CAQF,IARE,CAQI;AAChB,CATE;AAUD"}
+{"version":3,"names":["generateComponentLink","modules","links","map","prefix","paths","name","entries","path","idx","toWindowsCompatiblePath","linkName","importStr","join","exportsString","entry"],"sources":["generate-component-link.ts"],"sourcesContent":["import { toWindowsCompatiblePath } from '@teambit/toolbox.path.to-windows-compatible-path';\n\nexport type ModuleVar = {\n  prefix: string;\n  paths: string[];\n};\n\nexport function generateComponentLink(modules: ModuleVar[]): string {\n  const links = modules.map(({ prefix, paths }) => ({\n    name: prefix,\n    entries: paths.map((path, idx) => ({\n      path: toWindowsCompatiblePath(path),\n      linkName: `${prefix}_${idx}`,\n    })),\n  }));\n\n  // import per preview file\n  const importStr: string = links\n    .map(({ entries }) => entries.map(({ path, linkName }) => `import * as ${linkName} from '${path}'`).join(';\\n'))\n    .join('\\n');\n\n  // export files group per preview\n  const exportsString: string = links\n    .map(({ name, entries }) => `export const ${name} = [${entries.map((entry) => entry.linkName).join(', ')}]`)\n    .join(';\\n');\n\n  return `${importStr}\n\n${exportsString}\n`;\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAOO,SAASA,qBAAT,CAA+BC,OAA/B,EAA6D;EAClE,MAAMC,KAAK,GAAGD,OAAO,CAACE,GAAR,CAAY,CAAC;IAAEC,MAAF;IAAUC;EAAV,CAAD,MAAwB;IAChDC,IAAI,EAAEF,MAD0C;IAEhDG,OAAO,EAAEF,KAAK,CAACF,GAAN,CAAU,CAACK,IAAD,EAAOC,GAAP,MAAgB;MACjCD,IAAI,EAAE,IAAAE,sCAAA,EAAwBF,IAAxB,CAD2B;MAEjCG,QAAQ,EAAG,GAAEP,MAAO,IAAGK,GAAI;IAFM,CAAhB,CAAV;EAFuC,CAAxB,CAAZ,CAAd,CADkE,CASlE;;EACA,MAAMG,SAAiB,GAAGV,KAAK,CAC5BC,GADuB,CACnB,CAAC;IAAEI;EAAF,CAAD,KAAiBA,OAAO,CAACJ,GAAR,CAAY,CAAC;IAAEK,IAAF;IAAQG;EAAR,CAAD,KAAyB,eAAcA,QAAS,UAASH,IAAK,GAA1E,EAA8EK,IAA9E,CAAmF,KAAnF,CADE,EAEvBA,IAFuB,CAElB,IAFkB,CAA1B,CAVkE,CAclE;;EACA,MAAMC,aAAqB,GAAGZ,KAAK,CAChCC,GAD2B,CACvB,CAAC;IAAEG,IAAF;IAAQC;EAAR,CAAD,KAAwB,gBAAeD,IAAK,OAAMC,OAAO,CAACJ,GAAR,CAAaY,KAAD,IAAWA,KAAK,CAACJ,QAA7B,EAAuCE,IAAvC,CAA4C,IAA5C,CAAkD,GAD7E,EAE3BA,IAF2B,CAEtB,KAFsB,CAA9B;EAIA,OAAQ,GAAED,SAAU;AACtB;AACA,EAAEE,aAAc;AAChB,CAHE;AAID"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "0.0.769",
+  "version": "0.0.772",
   "homepage": "https://bit.dev/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "0.0.769"
+    "version": "0.0.772"
   },
   "dependencies": {
     "mime": "2.5.2",
@@ -17,32 +17,33 @@
     "object-hash": "2.1.1",
     "cross-fetch": "3.0.6",
     "memoizee": "0.4.15",
+    "lodash.compact": "3.0.1",
     "graphql-request": "3.4.0",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
     "@teambit/harmony": "0.3.3",
-    "@teambit/express": "0.0.606",
-    "@teambit/logger": "0.0.601",
+    "@teambit/express": "0.0.609",
+    "@teambit/logger": "0.0.604",
     "@teambit/ui-foundation.ui.pages.static-error": "0.0.73",
-    "@teambit/builder": "0.0.769",
-    "@teambit/bundler": "0.0.769",
-    "@teambit/component": "0.0.769",
-    "@teambit/aspect-loader": "0.0.769",
-    "@teambit/dependency-resolver": "0.0.769",
-    "@teambit/envs": "0.0.769",
-    "@teambit/isolator": "0.0.769",
+    "@teambit/builder": "0.0.772",
+    "@teambit/bundler": "0.0.772",
+    "@teambit/component": "0.0.772",
+    "@teambit/aspect-loader": "0.0.772",
+    "@teambit/dependency-resolver": "0.0.772",
+    "@teambit/envs": "0.0.772",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.483",
     "@teambit/component-id": "0.0.402",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/cli": "0.0.508",
-    "@teambit/graphql": "0.0.769",
-    "@teambit/pkg": "0.0.769",
-    "@teambit/pubsub": "0.0.769",
-    "@teambit/ui": "0.0.769",
-    "@teambit/workspace": "0.0.769",
-    "@teambit/compiler": "0.0.769",
+    "@teambit/cli": "0.0.511",
+    "@teambit/graphql": "0.0.772",
+    "@teambit/pkg": "0.0.772",
+    "@teambit/pubsub": "0.0.772",
+    "@teambit/ui": "0.0.772",
+    "@teambit/workspace": "0.0.772",
+    "@teambit/compiler": "0.0.772",
     "@teambit/preview.cli.preview-server-status": "0.0.491",
-    "@teambit/preview.cli.webpack-events-listener": "0.0.161"
+    "@teambit/preview.cli.webpack-events-listener": "0.0.161",
+    "@teambit/isolator": "0.0.772"
   },
   "devDependencies": {
     "@types/mime": "2.0.3",
@@ -51,6 +52,7 @@
     "@types/react": "^17.0.8",
     "@types/object-hash": "1.3.4",
     "@types/memoizee": "0.4.5",
+    "@types/lodash.compact": "3.0.6",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
@@ -59,7 +61,7 @@
     "@teambit/preview.aspect-docs.preview": "0.0.138"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.288",
+    "@teambit/legacy": "1.0.292",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -87,7 +89,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.288",
+        "@teambit/legacy": "1.0.292",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/preview-1656362028747.js

@@ -0,0 +1,5 @@
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.preview_preview@0.0.772/dist/preview.composition.js'
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.preview_preview@0.0.772/dist/preview.docs.mdx'
+
+export const compositions = [compositions_0];
+export const overview = [overview_0]

package/preview-modules.tsx

@@ -0,0 +1,28 @@
+import type { PreviewModule, ModuleFile } from './types/preview-module';
+
+type ModuleId = string;
+
+export class PreviewModules extends Map<ModuleId, PreviewModule> {
+  onSet = new Set<() => void>();
+
+  override set(id: ModuleId, preview: PreviewModule) {
+    super.set(id, preview);
+    this.onSet.forEach((callback) => callback());
+    return this;
+  }
+
+  loadComponentPreviews(compId: string, previews: Record<string, ModuleFile[]>) {
+    Object.entries(previews).forEach(([previewName, moduleFile]) => {
+      const preview = this.get(previewName);
+      if (!preview) return; // TODO - ok for now
+
+      preview.componentMap[compId] = moduleFile;
+    });
+  }
+}
+
+export const PREVIEW_MODULES = new PreviewModules();
+
+export function linkModules(previewName: string, previewModule: PreviewModule) {
+  PREVIEW_MODULES.set(previewName, previewModule);
+}

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/component-strategy.ts

@@ -365,10 +365,10 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
     const moduleMapsPromise = defs.map(async (previewDef) => {
       const moduleMap = await previewDef.getModuleMap([component]);
       const maybeFiles = moduleMap.get(component);
-      if (!maybeFiles || !capsule) return [];
+      if (!maybeFiles || !capsule) return { prefix: previewDef.prefix, paths: [] };
+
       const [, files] = maybeFiles;
       const compiledPaths = this.getPaths(context, component, files);
-      // const files = flatten(paths.toArray().map(([, file]) => file));
 
       return {
         prefix: previewDef.prefix,
@@ -376,7 +376,7 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
       };
     });
 
-    const moduleMaps = flatten(await Promise.all(moduleMapsPromise));
+    const moduleMaps = await Promise.all(moduleMapsPromise);
 
     const contents = generateComponentLink(moduleMaps);
     return this.preview.writeLinkContents(contents, this.getComponentOutputPath(capsule), 'preview');

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/strategies/generate-component-link.ts

@@ -6,14 +6,26 @@ export type ModuleVar = {
 };
 
 export function generateComponentLink(modules: ModuleVar[]): string {
-  return `${modules
-    .map((moduleVar) => {
-      return `export const ${moduleVar.prefix} = [${moduleVar.paths
-        .map((path) => `require('${toWindowsCompatiblePath(path)}')`)
-        .join(', ')}]`;
+  const links = modules.map(({ prefix, paths }) => ({
+    name: prefix,
+    entries: paths.map((path, idx) => ({
+      path: toWindowsCompatiblePath(path),
+      linkName: `${prefix}_${idx}`,
+    })),
+  }));
 
-      // return `export { * as ${moduleVar.prefix} } from '${toWindowsCompatiblePath(moduleVar.paths)}'`;
-    })
-    .join('\n')}
+  // import per preview file
+  const importStr: string = links
+    .map(({ entries }) => entries.map(({ path, linkName }) => `import * as ${linkName} from '${path}'`).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}
+
+${exportsString}
 `;
 }

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/preview-1655954795354.js

@@ -1,2 +0,0 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.preview_preview@0.0.769/dist/preview.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.preview_preview@0.0.769/dist/preview.docs.mdx')]

package/webpack/index.ts

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