@teambit/preview 1.0.465 → 1.0.467

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "1.0.465",
+  "version": "1.0.467",
   "homepage": "https://bit.cloud/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "1.0.465"
+    "version": "1.0.467"
   },
   "dependencies": {
     "mime": "2.5.2",
@@ -16,9 +16,11 @@
     "camelcase": "6.2.0",
     "normalize-path": "3.0.0",
     "object-hash": "2.1.1",
+    "chalk": "2.4.2",
+    "pad-right": "0.2.2",
     "webpack": "5.84.1",
     "graphql-tag": "2.12.1",
-    "chalk": "2.4.2",
+    "filenamify": "4.2.0",
     "lodash.compact": "3.0.1",
     "graphql-request": "6.1.0",
     "webpack-manifest-plugin": "5.0.0",
@@ -29,35 +31,35 @@
     "@teambit/bit-error": "0.0.404",
     "@teambit/preview.cli.dev-server-events-listener": "0.0.1",
     "@teambit/react.webpack.react-webpack": "1.0.37",
-    "@teambit/express": "0.0.1141",
-    "@teambit/logger": "0.0.1135",
+    "@teambit/express": "0.0.1143",
+    "@teambit/logger": "0.0.1137",
     "@teambit/ui-foundation.ui.pages.static-error": "0.0.105",
-    "@teambit/builder": "1.0.465",
-    "@teambit/bundler": "1.0.465",
-    "@teambit/component": "1.0.465",
+    "@teambit/builder": "1.0.467",
+    "@teambit/bundler": "1.0.467",
+    "@teambit/component": "1.0.467",
     "@teambit/preview.ui.component-preview": "1.0.16",
-    "@teambit/aspect-loader": "1.0.465",
-    "@teambit/cli": "0.0.1042",
-    "@teambit/dependency-resolver": "1.0.465",
-    "@teambit/envs": "1.0.465",
+    "@teambit/aspect-loader": "1.0.467",
+    "@teambit/cli": "0.0.1044",
+    "@teambit/dependency-resolver": "1.0.467",
+    "@teambit/envs": "1.0.467",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.496",
     "@teambit/toolbox.crypto.sha1": "0.0.2",
-    "@teambit/ui": "1.0.465",
-    "@teambit/isolator": "1.0.465",
+    "@teambit/ui": "1.0.467",
+    "@teambit/isolator": "1.0.467",
     "@teambit/harmony.modules.harmony-root-generator": "0.0.7",
     "@teambit/component.sources": "0.0.44",
     "@teambit/toolbox.path.path": "0.0.4",
-    "@teambit/cache": "0.0.1135",
-    "@teambit/graphql": "1.0.465",
+    "@teambit/cache": "0.0.1137",
+    "@teambit/graphql": "1.0.467",
     "@teambit/harmony.modules.feature-toggle": "0.0.6",
-    "@teambit/pkg": "1.0.465",
-    "@teambit/pubsub": "1.0.465",
-    "@teambit/scope": "1.0.465",
-    "@teambit/watcher": "1.0.465",
-    "@teambit/workspace": "1.0.465",
-    "@teambit/compiler": "1.0.465",
+    "@teambit/pkg": "1.0.467",
+    "@teambit/pubsub": "1.0.467",
+    "@teambit/scope": "1.0.467",
+    "@teambit/watcher": "1.0.467",
+    "@teambit/workspace": "1.0.467",
+    "@teambit/compiler": "1.0.467",
     "@teambit/preview.cli.webpack-events-listener": "0.0.175",
-    "@teambit/webpack": "1.0.465"
+    "@teambit/webpack": "1.0.467"
   },
   "devDependencies": {
     "@types/mime": "2.0.3",

package/preview.service.tsx

@@ -1,5 +1,15 @@
-import { EnvService, Env, EnvContext, ServiceTransformationMap } from '@teambit/envs';
-import { EnvPreviewConfig } from './preview.main.runtime';
+import filenamify from 'filenamify';
+import { EnvService, ExecutionContext, Env, EnvContext, ServiceTransformationMap } from '@teambit/envs';
+import { EnvPreviewConfig, PreviewMain } from './preview.main.runtime';
+import { BitError } from '@teambit/bit-error';
+import { DependencyResolverMain } from '@teambit/dependency-resolver';
+import { Logger } from '@teambit/logger';
+import { Bundler, BundlerContext, BundlerHtmlConfig, Target } from '@teambit/bundler';
+import { Component, ComponentID } from '@teambit/component';
+import { join, resolve } from 'path';
+import { outputFileSync, pathExists, readJsonSync } from 'fs-extra';
+import { ScopeMain } from '@teambit/scope';
+import { html } from './bundler/html-template';
 
 type PreviewTransformationMap = ServiceTransformationMap & {
   /**
@@ -27,9 +37,18 @@ type PreviewTransformationMap = ServiceTransformationMap & {
   getPreviewConfig?: () => EnvPreviewConfig;
 };
 
+const LOCAL_PREVIEW_DIR = 'local-preview';
+
 export class PreviewService implements EnvService<any> {
   name = 'preview';
 
+  constructor(
+    private preview: PreviewMain,
+    private logger: Logger,
+    private dependencyResolver: DependencyResolverMain,
+    private scope: ScopeMain
+  ) {}
+
   transform(env: Env, envContext: EnvContext): PreviewTransformationMap | undefined {
     // Old env
     if (!env?.preview) return undefined;
@@ -48,4 +67,171 @@ export class PreviewService implements EnvService<any> {
 
     return transformMap;
   }
+
+  async run(context: ExecutionContext, options: { name: string }): Promise<any> {
+    const defs = this.preview.getDefs();
+    const onlyCompositionDef = defs.filter((def) => def.prefix === 'compositions');
+    if (!onlyCompositionDef || onlyCompositionDef.length === 0) {
+      throw new BitError('unable to find composition definition');
+    }
+    const components = context.components;
+    const componentIds = components.map((c) => c.id);
+    const envDirName = this.getEnvDirName(context.id);
+    const outputPath = this.getEnvLocalPreviewDir(options.name, envDirName);
+    const linkFiles = await this.preview.updateLinkFiles(onlyCompositionDef, context.components, context);
+    const dirPath = join(this.preview.tempFolder, context.id);
+    await this.addComponentsToLocalMapping(options.name, envDirName, componentIds);
+    const previewRootEntry = this.generateLocalPreviewRoot(dirPath);
+
+    const entries = [...linkFiles, previewRootEntry];
+    const peers = await this.dependencyResolver.getPreviewHostDependenciesFromEnv(context.envDefinition.env);
+    const hostRootDir = context.envRuntime.envAspectDefinition?.aspectPath;
+    const targets = this.getTargets({ entries, components, outputPath, peers, hostRootDir });
+    const url = `/preview/${context.envRuntime.id}`;
+    const htmlConfig = this.generateHtmlConfig();
+    // @ts-ignore we don't really need the full bundler type here, we should
+    // change the original type to only have the relevant fields
+    const bundlerContext: BundlerContext = Object.assign(context, {
+      targets,
+      compress: false,
+      html: [htmlConfig],
+      components,
+      entry: [],
+      publicPath: '/',
+      hostRootDir,
+      hostDependencies: peers,
+      aliasHostDependencies: true,
+      rootPath: url,
+      development: true,
+      metaData: {
+        initiator: `Generate local preview`,
+        envId: context.id,
+      },
+    });
+
+    const bundler: Bundler = await context.env.getBundler(bundlerContext);
+    await bundler.run();
+    const res = componentIds.reduce((acc, id) => {
+      return { ...acc, [id.fullName]: outputPath };
+    }, {});
+    return res;
+  }
+
+  getEnvDirName(envId: string): string {
+    return filenamify(envId, { replacement: '_' });
+  }
+
+  getLocalPreviewDir(name: string) {
+    const dirPath = this.scope.legacyScope.tmp.composePath(`${LOCAL_PREVIEW_DIR}/${name}`);
+    return dirPath;
+  }
+
+  getEnvLocalPreviewDir(name: string, envDirName: string) {
+    const localPreviewDir = this.getLocalPreviewDir(name);
+    return join(localPreviewDir, envDirName);
+  }
+
+  getComponentsPreviewPath(name: string) {
+    const dirPath = this.getLocalPreviewDir(name);
+    const filePath = join(dirPath, 'components-preview.json');
+    return filePath;
+  }
+
+  async readComponentsPreview(name: string) {
+    const filePath = this.getComponentsPreviewPath(name);
+    return readJsonSync(filePath);
+  }
+
+  async addComponentsToLocalMapping(name: string, envDirPath: string, compIds: ComponentID[]) {
+    const filePath = this.getComponentsPreviewPath(name);
+    // const idsString = compIds.map((id) => id.toString());
+    const idsString = compIds.map((id) => id.fullName);
+    const exists = await pathExists(filePath);
+    // let newFile = { [envDirPath]: idsString };
+    let newFile = idsString.reduce((acc, id) => {
+      return { ...acc, [id]: envDirPath };
+    }, {});
+    if (exists) {
+      const existingFile = readJsonSync(filePath);
+      newFile = { ...existingFile, ...newFile };
+    }
+    outputFileSync(filePath, JSON.stringify(newFile, null, 2));
+    return newFile;
+  }
+
+  generateLocalPreviewRoot(dir: string) {
+    const contents = `const previewModules = window.__bit_preview_modules;
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const location = window.location.pathname;
+const splitLocation = location.split('/').filter((x) => x);
+// Remove message part
+splitLocation.shift();
+// const comp = urlParams.get('comp');
+const comp = splitLocation.join('/');
+const compositions = previewModules.get("compositions");
+const mounter = compositions.modulesMap.default;
+const componentMap = compositions.componentMap;
+const foundComponent = componentMap[comp];
+if (!foundComponent) {
+  throw new Error('component not found');
+}
+let compositionName = urlParams.get('name');
+if (!compositionName) {
+  const allCompositions = Object.keys(foundComponent[0]);
+  compositionName = allCompositions[0];
+}
+const composition = foundComponent[0][compositionName];
+if (!composition) {
+  throw new Error('composition not found');
+}
+let func = mounter.default;
+if (typeof func !== 'function') {
+  func = func.default;
+}
+func(composition);
+    `;
+    const previewRootPath = resolve(join(dir, `preview.entry.js`));
+
+    // if (!existsSync(previewRootPath)) {
+    outputFileSync(previewRootPath, contents);
+    // }
+    return previewRootPath;
+  }
+
+  generateHtmlConfig() {
+    const config: BundlerHtmlConfig = {
+      title: 'Preview',
+      templateContent: html('Preview'),
+      minify: false,
+      filename: 'index.html',
+    };
+    return config;
+  }
+
+  private getTargets({
+    entries,
+    components,
+    outputPath,
+    peers,
+    hostRootDir,
+  }: {
+    entries: string[];
+    components: Component[];
+    outputPath: string;
+    peers?: string[];
+    hostRootDir: string;
+  }): Target[] {
+    return [
+      {
+        entries,
+        components,
+        outputPath,
+        hostRootDir,
+        hostDependencies: peers,
+        externalizeHostDependencies: false,
+        aliasHostDependencies: true,
+      },
+    ];
+  }
 }

package/serve-preview.cmd.tsx

@@ -0,0 +1,21 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import type { PreviewMain } from './preview.main.runtime';
+
+export class ServePreviewCmd implements Command {
+  name = 'serve-preview';
+  description = 'serve local preview bundle for components';
+  group = 'development';
+  options = [['p', 'port [port]', 'port to run the server on']] as CommandOptions;
+  private = true;
+
+  constructor(
+    /**
+     * access to the extension instance.
+     */
+    private preview: PreviewMain
+  ) {}
+
+  async wait(args, options: { port: number }) {
+    await this.preview.serveLocalPreview(options);
+  }
+}

package/strategies/component-strategy.ts

@@ -7,7 +7,6 @@ import { Compiler } from '@teambit/compiler';
 import type { AbstractVinyl } from '@teambit/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 { Logger } from '@teambit/logger';
@@ -39,7 +38,6 @@ export class ComponentBundlingStrategy implements BundlingStrategy {
 
   constructor(
     private preview: PreviewMain,
-    private pkg: PkgMain,
     private dependencyResolver: DependencyResolverMain,
     private logger: Logger
   ) {}