@teambit/preview 0.0.625 → 0.0.631

package/preview.preview.runtime.tsx

@@ -1,6 +1,7 @@
 import PubsubAspect, { PubsubPreview } from '@teambit/pubsub';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { ComponentID } from '@teambit/component-id';
+import crossFetch from 'cross-fetch';
 
 import { PreviewNotFound } from './exceptions';
 import { PreviewType } from './preview-type';
@@ -44,7 +45,7 @@ export class PreviewPreview {
   /**
    * render the preview.
    */
-  render = () => {
+  render = async () => {
     const { previewName, componentId } = this.getLocation();
     const name = previewName || this.getDefault();
 
@@ -52,18 +53,126 @@ export class PreviewPreview {
     if (!preview || !componentId) {
       throw new PreviewNotFound(previewName);
     }
-    const includes = (preview.include || [])
-      .map((prevName) => {
+    const includesAll = await Promise.all(
+      (preview.include || []).map(async (prevName) => {
         const includedPreview = this.getPreview(prevName);
         if (!includedPreview) return undefined;
 
-        return includedPreview.selectPreviewModel?.(componentId.fullName, PREVIEW_MODULES[prevName]);
+        return includedPreview.selectPreviewModel?.(
+          componentId.fullName,
+          await this.getPreviewModule(prevName, componentId)
+        );
       })
-      .filter((module) => !!module);
+    );
 
-    return preview.render(componentId.fullName, PREVIEW_MODULES[name], includes, this.getRenderingContext());
+    const includes = includesAll.filter((module) => !!module);
+
+    return preview.render(
+      componentId.fullName,
+      await this.getPreviewModule(name, componentId),
+      includes,
+      this.getRenderingContext()
+    );
   };
 
+  async getPreviewModule(name: string, id: ComponentID): Promise<PreviewModule> {
+    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: any = await this.fetchComponentPreview(id, name);
+
+    return {
+      mainModule: PREVIEW_MODULES[name].mainModule,
+      componentMap: {
+        [id.fullName]: component,
+      },
+    };
+  }
+
+  async fetchComponentPreview(id: ComponentID, name: string) {
+    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);
+    });
+  }
+
+  private addComponentFileElement(id: ComponentID, previewBundleFileName: string) {
+    if (previewBundleFileName.endsWith('.js')) {
+      return this.addComponentFileScriptElement(id, previewBundleFileName);
+    }
+    return this.addComponentFileLinkElement(id, previewBundleFileName);
+  }
+
+  private async fetchComponentPreviewFiles(id: ComponentID, previewName: string): Promise<string[]> {
+    const previewAssetsRoute = `~aspect/preview-assets`;
+    const stringId = id.toString();
+    const url = `/api/${stringId}/${previewAssetsRoute}`;
+
+    const res = await crossFetch(url);
+    if (res.status >= 400) {
+      throw new PreviewNotFound(previewName);
+    }
+    const parsed = await res.json();
+    if (!parsed.files || !parsed.files.length) {
+      throw new PreviewNotFound(previewName);
+    }
+    return parsed.files;
+  }
+
+  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 src = `/api/${stringId}/${previewRoute}/${previewBundleFileName}`;
+    script.src = src;
+    document.head.appendChild(script);
+    return script;
+  }
+
+  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;
+  }
+
+  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 reject(new PreviewNotFound(name));
+
+      return resolve(targetPreview);
+    };
+    return script;
+  }
+
   /**
    * register a new preview.
    */
@@ -131,6 +240,7 @@ export class PreviewPreview {
     const preview = new PreviewPreview(pubsub, previewSlot, renderingContextSlot);
 
     window.addEventListener('hashchange', () => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       preview.render();
     });
 
@@ -138,9 +248,15 @@ export class PreviewPreview {
   }
 }
 
-export function linkModules(previewName: string, defaultModule: any, componentMap: { [key: string]: any }) {
+export function linkModules(
+  previewName: string,
+  defaultModule: any,
+  isSplitComponentBundle: boolean,
+  componentMap: { [key: string]: any }
+) {
   PREVIEW_MODULES[previewName] = {
     mainModule: defaultModule,
+    isSplitComponentBundle,
     componentMap,
   };
 }

package/strategies/component-strategy.ts

@@ -1,34 +1,340 @@
-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 { readFileSync } from 'fs';
+import { join, resolve, basename } from 'path';
+import { existsSync, mkdirpSync } from 'fs-extra';
+import { Component } from '@teambit/component';
+import { ComponentID } from '@teambit/component-id';
+import { flatten } from 'lodash';
+import { Compiler } from '@teambit/compiler';
+import type { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import type { Capsule } from '@teambit/isolator';
+import { CAPSULE_ARTIFACTS_DIR, ComponentResult } from '@teambit/builder';
+import type { PkgMain } from '@teambit/pkg';
+import { BitError } from '@teambit/bit-error';
+import type { DependencyResolverMain } from '@teambit/dependency-resolver';
+import type { BundlerResult, BundlerContext, Asset, BundlerEntryMap, EntriesAssetsMap } from '@teambit/bundler';
+import { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';
+import type { PreviewDefinition } from '../preview-definition';
+import type { ComponentPreviewMetaData, PreviewMain } from '../preview.main.runtime';
+import { generateComponentLink } from './generate-component-link';
 
+export const PREVIEW_CHUNK_SUFFIX = 'preview';
+export const COMPONENT_CHUNK_SUFFIX = 'component';
+export const PREVIEW_CHUNK_FILENAME_SUFFIX = `${PREVIEW_CHUNK_SUFFIX}.js`;
+export const COMPONENT_CHUNK_FILENAME_SUFFIX = `${COMPONENT_CHUNK_SUFFIX}.js`;
+
+export const COMPONENT_STRATEGY_SIZE_KEY_NAME = 'size';
+export const COMPONENT_STRATEGY_ARTIFACT_NAME = 'preview-component';
+/**
+ * bundles all components in a given env into the same bundle.
+ */
 export class ComponentBundlingStrategy implements BundlingStrategy {
   name = 'component';
 
-  computeTargets(context: BuildContext, previewDefs: PreviewDefinition[], previewTask: PreviewTask): Promise<Target[]> {
-    return Promise.all(
-      context.capsuleNetwork.graphCapsules.map(async (capsule) => {
-        return {
-          entries: await previewTask.computePaths(capsule, previewDefs, context),
-          components: [capsule.component],
-          outputPath: capsule.path,
-        };
-      })
+  constructor(private preview: PreviewMain, private pkg: PkgMain, private dependencyResolver: DependencyResolverMain) {}
+
+  async computeTargets(context: ComputeTargetsContext, previewDefs: PreviewDefinition[]) {
+    const outputPath = this.getOutputPath(context);
+    if (!existsSync(outputPath)) mkdirpSync(outputPath);
+
+    // const entriesArr = flatten(
+    //   await Promise.all(
+    //     context.capsuleNetwork.seedersCapsules.map((capsule) => {
+    //       return this.computeComponentEntry(previewDefs, capsule.component, context);
+    //     }, {})
+    //   )
+    // );
+
+    const entriesArr = await Promise.all(
+      context.capsuleNetwork.seedersCapsules.map((capsule) => {
+        return this.computeComponentEntry(previewDefs, capsule.component, context);
+      }, {})
     );
+
+    const entries: BundlerEntryMap = entriesArr.reduce((entriesMap, entry) => {
+      // entriesMap[entry.library.name] = entry;
+      Object.assign(entriesMap, entry);
+      return entriesMap;
+    }, {});
+    // const entries = entriesArr.reduce((entriesMap, entry) => {
+    //   entriesMap[entry.library.name] = entry;
+    //   return entriesMap;
+    // }, {});
+
+    // const modules = await Promise.all(entriesArr.map(async (entry) => {
+    //   const dependencies = await this.dependencyResolver.getDependencies(entry.component);
+    //   const manifest = dependencies.toDependenciesManifest();
+    //   const peer = Object.entries(manifest.peerDependencies || {}).reduce((acc, [packageName, version]) => {
+    //     acc[packageName] = {
+    //       singleton: true,
+    //       requiredVersion: version
+    //     };
+
+    //     return acc;
+    //   }, {});
+    //   // console.log(entry);
+    //   return {
+    //     name: entry.library.name,
+    //     exposes: {
+    //       '.': entry.import || ''
+    //     },
+    //     shared: {
+    //       ...manifest.dependencies,
+    //       ...peer
+    //     },
+    //   };
+    // }));
+
+    return [
+      {
+        // entries: await this.computePaths(outputPath, previewDefs, context),
+        entries,
+        components: context.components,
+        outputPath,
+        // modules,
+      },
+    ];
+  }
+
+  async computeComponentEntry(previewDefs: PreviewDefinition[], component: Component, context: ComputeTargetsContext) {
+    const path = await this.computePaths(previewDefs, context, component);
+    const [componentPath] = this.getPaths(context, component, [component.mainFile]);
+    const componentPreviewChunkId = this.getComponentChunkId(component.id, 'preview');
+
+    const entries = {
+      [componentPreviewChunkId]: {
+        filename: this.getComponentChunkFileName(
+          component.id.toString({
+            fsCompatible: true,
+            ignoreVersion: true,
+          }),
+          'preview'
+        ),
+        import: path,
+        // dependOn: component.id.toStringWithoutVersion(),
+        library: {
+          name: componentPreviewChunkId,
+          type: 'umd',
+        },
+      },
+    };
+    if (context.splitComponentBundle) {
+      const componentChunkId = component.id.toStringWithoutVersion();
+      entries[componentChunkId] = {
+        filename: this.getComponentChunkFileName(
+          component.id.toString({
+            fsCompatible: true,
+            ignoreVersion: true,
+          }),
+          'component'
+        ),
+        import: componentPath,
+        library: {
+          name: componentChunkId,
+          type: 'umd',
+        },
+      };
+    }
+    return entries;
+  }
+
+  private getComponentChunkId(componentId: ComponentID, type: 'component' | 'preview') {
+    const id =
+      type === 'component'
+        ? componentId.toStringWithoutVersion()
+        : `${componentId.toStringWithoutVersion()}-${PREVIEW_CHUNK_SUFFIX}`;
+    return id;
+  }
+
+  private getComponentChunkFileName(idstr: string, type: 'component' | 'preview') {
+    const suffix = type === 'component' ? COMPONENT_CHUNK_FILENAME_SUFFIX : PREVIEW_CHUNK_FILENAME_SUFFIX;
+    return `${idstr}-${suffix}`;
+  }
+
+  private getAssetAbsolutePath(context: BundlerContext, asset: Asset): string {
+    const path = this.getOutputPath(context);
+    return join(path, 'public', asset.name);
+  }
+
+  copyAssetsToCapsules(context: BundlerContext, result: BundlerResult) {
+    context.components.forEach((component) => {
+      const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);
+      if (!capsule) return;
+      const files = this.findAssetsForComponent(component, result.assets, result.entriesAssetsMap || {});
+      if (!files) return;
+
+      files.forEach((asset) => {
+        const filePath = this.getAssetAbsolutePath(context, asset);
+        const contents = readFileSync(filePath);
+        // const exists = capsule.fs.existsSync(this.getArtifactDirectory());
+        // if (!exists) capsule.fs.mkdirSync(this.getArtifactDirectory());
+        // We don't use the mkdirSync as it uses the capsule fs which uses memfs, which doesn't know to handle nested none existing folders
+        mkdirpSync(join(capsule.path, this.getArtifactDirectory()));
+        const filename = basename(asset.name);
+        // let filename = asset.name;
+        // if (filePath.endsWith('.css')){
+        //   filename = this.getCssFileName(capsule.component.id);
+        // }
+        capsule.fs.writeFileSync(join(this.getArtifactDirectory(), filename), contents);
+      });
+    });
+  }
+
+  // private getCssFileName(componentId: ComponentID): string {
+  //   return `${componentId.toString({ ignoreVersion: true, fsCompatible: true })}.css`;
+  // }
+
+  private findAssetsForComponent(
+    component: Component,
+    assets: Asset[],
+    entriesAssetsMap: EntriesAssetsMap
+  ): Asset[] | undefined {
+    if (!assets) return undefined;
+
+    const componentEntryId = component.id.toStringWithoutVersion();
+    const componentPreviewEntryId = this.getComponentChunkId(component.id, 'preview');
+    const componentFiles = entriesAssetsMap[componentEntryId]?.assets || [];
+    const componentAuxiliaryFiles = entriesAssetsMap[componentEntryId]?.auxiliaryAssets || [];
+    const componentPreviewFiles = entriesAssetsMap[componentPreviewEntryId]?.assets || [];
+    const componentPreviewAuxiliaryFiles = entriesAssetsMap[componentPreviewEntryId]?.auxiliaryAssets || [];
+
+    const files = componentFiles
+      .concat(componentAuxiliaryFiles)
+      .concat(componentPreviewFiles)
+      .concat(componentPreviewAuxiliaryFiles);
+    return files;
   }
 
-  async computeResults(context: BundlerContext, results: BundlerResult[], previewTask: PreviewTask) {
+  private getArtifactDirectory() {
+    return join(CAPSULE_ARTIFACTS_DIR, 'preview');
+  }
+
+  private computeComponentMetadata(
+    context: BundlerContext,
+    result: BundlerResult,
+    component: Component
+  ): ComponentPreviewMetaData {
+    const componentEntryId = component.id.toStringWithoutVersion();
+    if (!result?.entriesAssetsMap || !result?.entriesAssetsMap[componentEntryId]) {
+      return {};
+    }
+    const files = (result.entriesAssetsMap[componentEntryId]?.assets || []).map((file) => {
+      return {
+        name: basename(file.name),
+        size: file.size,
+      };
+    });
+    const filesTotalSize = result.entriesAssetsMap[componentEntryId]?.assetsSize || 0;
+    const assets = (result.entriesAssetsMap[componentEntryId]?.auxiliaryAssets || []).map((file) => {
+      return {
+        name: basename(file.name),
+        size: file.size,
+      };
+    });
+    const assetsTotalSize = result.entriesAssetsMap[componentEntryId]?.auxiliaryAssetsSize || 0;
+    const totalSize = filesTotalSize + assetsTotalSize;
+
+    const metadata = {
+      [COMPONENT_STRATEGY_SIZE_KEY_NAME]: {
+        files,
+        assets,
+        totalFiles: filesTotalSize,
+        totalAssets: assetsTotalSize,
+        total: totalSize,
+      },
+    };
+    return metadata;
+  }
+
+  async computeResults(context: BundlerContext, results: BundlerResult[]) {
+    const result = results[0];
+
+    this.copyAssetsToCapsules(context, result);
+
+    const componentsResults: ComponentResult[] = result.components.map((component) => {
+      const metadata = this.computeComponentMetadata(context, result, component);
+      return {
+        component,
+        metadata,
+        errors: result.errors.map((err) => (typeof err === 'string' ? err : err.message)),
+        warning: result.warnings,
+        startTime: result.startTime,
+        endTime: result.endTime,
+      };
+    });
+
+    const artifacts = this.getArtifactDef();
+
     return {
-      componentsResults: results.map((result) => {
-        return {
-          errors: result.errors,
-          component: result.components[0],
-          warning: result.warnings,
-        };
-      }),
-      artifacts: [{ name: 'preview', globPatterns: [previewTask.getPreviewDirectory(context)] }],
+      componentsResults,
+      artifacts,
     };
   }
+
+  private getArtifactDef() {
+    // eslint-disable-next-line @typescript-eslint/prefer-as-const
+    // const env: 'env' = 'env';
+    // const rootDir = this.getDirName(context);
+
+    return [
+      {
+        name: COMPONENT_STRATEGY_ARTIFACT_NAME,
+        globPatterns: ['**'],
+        rootDir: this.getArtifactDirectory(),
+        // context: env,
+      },
+    ];
+  }
+
+  getDirName(context: ComputeTargetsContext) {
+    const envName = context.id.replace('/', '__');
+    return `${envName}-preview`;
+  }
+
+  private getOutputPath(context: ComputeTargetsContext) {
+    return resolve(`${context.capsuleNetwork.capsulesRootDir}/${this.getDirName(context)}`);
+  }
+
+  private getPaths(context: ComputeTargetsContext, component: Component, files: AbstractVinyl[]) {
+    const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);
+    if (!capsule) return [];
+    const compiler: Compiler = context.env.getCompiler();
+    return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));
+  }
+
+  private getComponentOutputPath(capsule: Capsule) {
+    return resolve(`${capsule.path}`);
+  }
+
+  private async computePaths(
+    defs: PreviewDefinition[],
+    context: ComputeTargetsContext,
+    component: Component
+  ): Promise<string> {
+    // const previewMain = await this.preview.writePreviewRuntime(context);
+    const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);
+    // if (!capsule) return undefined;
+    if (!capsule)
+      throw new BitError(
+        `could not find capsule for component ${component.id.toString()} during compute paths to bundle`
+      );
+    const moduleMapsPromise = defs.map(async (previewDef) => {
+      const moduleMap = await previewDef.getModuleMap([component]);
+      const maybeFiles = moduleMap.get(component);
+      if (!maybeFiles || !capsule) return [];
+      const [, files] = maybeFiles;
+      const compiledPaths = this.getPaths(context, component, files);
+      // const files = flatten(paths.toArray().map(([, file]) => file));
+
+      return {
+        prefix: previewDef.prefix,
+        paths: compiledPaths,
+      };
+    });
+
+    const moduleMaps = flatten(await Promise.all(moduleMapsPromise));
+
+    const contents = generateComponentLink(moduleMaps);
+    return this.preview.writeLinkContents(contents, this.getComponentOutputPath(capsule), 'preview');
+    // return flatten(moduleMaps);
+  }
 }

package/strategies/env-strategy.ts

@@ -5,11 +5,12 @@ import { ComponentMap } from '@teambit/component';
 import { Compiler } from '@teambit/compiler';
 import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
 import { Capsule } from '@teambit/isolator';
-import { BuildContext, ComponentResult } from '@teambit/builder';
-import { BundlerResult, BundlerContext } from '@teambit/bundler';
-import { BundlingStrategy } from '../bundling-strategy';
+import { ComponentResult } from '@teambit/builder';
+import { BundlerContext, BundlerHtmlConfig, BundlerResult } from '@teambit/bundler';
+import type { BundlingStrategy, ComputeTargetsContext } from '../bundling-strategy';
 import { PreviewDefinition } from '../preview-definition';
 import { PreviewMain } from '../preview.main.runtime';
+import { html } from '../webpack';
 
 /**
  * bundles all components in a given env into the same bundle.
@@ -19,19 +20,31 @@ export class EnvBundlingStrategy implements BundlingStrategy {
 
   constructor(private preview: PreviewMain) {}
 
-  async computeTargets(context: BuildContext, previewDefs: PreviewDefinition[]) {
+  async computeTargets(context: ComputeTargetsContext, previewDefs: PreviewDefinition[]) {
     const outputPath = this.getOutputPath(context);
     if (!existsSync(outputPath)) mkdirpSync(outputPath);
+    const htmlConfig = this.generateHtmlConfig({ dev: context.dev });
 
     return [
       {
         entries: await this.computePaths(outputPath, previewDefs, context),
+        html: [htmlConfig],
         components: context.components,
         outputPath,
       },
     ];
   }
 
+  private generateHtmlConfig(options: { dev?: boolean }): BundlerHtmlConfig {
+    const config = {
+      title: 'Preview',
+      templateContent: html('Preview'),
+      cache: false,
+      minify: options?.dev ?? true,
+    };
+    return config;
+  }
+
   async computeResults(context: BundlerContext, results: BundlerResult[]) {
     const result = results[0];
 
@@ -53,7 +66,7 @@ export class EnvBundlingStrategy implements BundlingStrategy {
     };
   }
 
-  private getArtifactDef(context: BuildContext) {
+  private getArtifactDef(context: ComputeTargetsContext) {
     // eslint-disable-next-line @typescript-eslint/prefer-as-const
     const env: 'env' = 'env';
     const rootDir = this.getDirName(context);
@@ -68,21 +81,25 @@ export class EnvBundlingStrategy implements BundlingStrategy {
     ];
   }
 
-  getDirName(context: BuildContext) {
+  getDirName(context: ComputeTargetsContext) {
     const envName = context.id.replace('/', '__');
     return `${envName}-preview`;
   }
 
-  private getOutputPath(context: BuildContext) {
+  private getOutputPath(context: ComputeTargetsContext) {
     return resolve(`${context.capsuleNetwork.capsulesRootDir}/${this.getDirName(context)}`);
   }
 
-  private getPaths(context: BuildContext, files: AbstractVinyl[], capsule: Capsule) {
+  private getPaths(context: ComputeTargetsContext, files: AbstractVinyl[], capsule: Capsule) {
     const compiler: Compiler = context.env.getCompiler();
     return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));
   }
 
-  private async computePaths(outputPath: string, defs: PreviewDefinition[], context: BuildContext): Promise<string[]> {
+  private async computePaths(
+    outputPath: string,
+    defs: PreviewDefinition[],
+    context: ComputeTargetsContext
+  ): Promise<string[]> {
     const previewMain = await this.preview.writePreviewRuntime(context);
     const moduleMapsPromise = defs.map(async (previewDef) => {
       const moduleMap = await previewDef.getModuleMap(context.components);
@@ -102,7 +119,8 @@ export class EnvBundlingStrategy implements BundlingStrategy {
         previewDef.prefix,
         paths,
         previewDef.renderTemplatePath ? await previewDef.renderTemplatePath(context) : undefined,
-        outputPath
+        outputPath,
+        false
       );
 
       const files = flatten(paths.toArray().map(([, file]) => file)).concat([link]);

package/strategies/generate-component-link.ts

@@ -0,0 +1,19 @@
+import { toWindowsCompatiblePath } from '@teambit/toolbox.path.to-windows-compatible-path';
+
+export type ModuleVar = {
+  prefix: string;
+  paths: string[];
+};
+
+export function generateComponentLink(modules: ModuleVar[]): string {
+  return `${modules
+    .map((moduleVar) => {
+      return `export const ${moduleVar.prefix} = [${moduleVar.paths
+        .map((path) => `require('${toWindowsCompatiblePath(path)}')`)
+        .join(', ')}]`;
+
+      // return `export { * as ${moduleVar.prefix} } from '${toWindowsCompatiblePath(moduleVar.paths)}'`;
+    })
+    .join('\n')}
+`;
+}

package/types/preview-module.ts

@@ -9,6 +9,8 @@ export type PreviewModule<T = any> = {
   mainModule: {
     default: (...args: any[]) => void;
   };
+
+  isSplitComponentBundle?: boolean
 };
 
 /** single preview module, e.g. compositions file */

package/webpack/html.ts

@@ -0,0 +1,22 @@
+/** html template for Previews (docs, compositions, etc) */
+export function html(title: string) {
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>${title}</title>
+      <script>
+      // Allow to use react dev-tools inside the examples
+      try { window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__; } catch {}
+      </script>
+      <!-- minimal css resets -->
+      <style> html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100%; } </style>
+    </head>
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>
+  `;
+}

package/webpack/index.ts

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