@teambit/preview 1.0.106 → 1.0.108

package/env-preview-template.task.ts

@@ -0,0 +1,280 @@
+import {
+  BuildContext,
+  BuiltTaskResult,
+  BuildTask,
+  TaskLocation,
+  ComponentResult,
+  CAPSULE_ARTIFACTS_DIR,
+} from '@teambit/builder';
+import { MainRuntime } from '@teambit/cli';
+import mapSeries from 'p-map-series';
+import { Component, ComponentMap } from '@teambit/component';
+import { AspectLoaderMain } from '@teambit/aspect-loader';
+import { Bundler, BundlerContext, BundlerHtmlConfig, BundlerResult, Target } from '@teambit/bundler';
+import type { EnvDefinition, Environment, EnvsMain } from '@teambit/envs';
+import { join } from 'path';
+import { compact, flatten, isEmpty } from 'lodash';
+import { Logger } from '@teambit/logger';
+import { DependencyResolverMain } from '@teambit/dependency-resolver';
+import { existsSync, mkdirpSync } from 'fs-extra';
+import type { PreviewMain } from './preview.main.runtime';
+import { generateTemplateEntries } from './bundler/chunks';
+import { generateHtmlConfig } from './bundler/html-plugin';
+import { writePeerLink } from './bundler/create-peers-link';
+
+export type ModuleExpose = {
+  name: string;
+  path: string;
+  include?: string[];
+};
+
+type TargetsGroup = {
+  env: Environment;
+  envToGetBundler: Environment;
+  targets: Target[];
+};
+type TargetsGroupMap = {
+  [envId: string]: TargetsGroup;
+};
+
+export const GENERATE_ENV_TEMPLATE_TASK_NAME = 'GenerateEnvTemplate';
+
+export class EnvPreviewTemplateTask implements BuildTask {
+  aspectId = 'teambit.preview/preview';
+  name = GENERATE_ENV_TEMPLATE_TASK_NAME;
+  location: TaskLocation = 'end';
+  // readonly dependencies = [CompilerAspect.id];
+
+  constructor(
+    private preview: PreviewMain,
+    private envs: EnvsMain,
+    private aspectLoader: AspectLoaderMain,
+    private dependencyResolver: DependencyResolverMain,
+    private logger: Logger
+  ) {}
+
+  async execute(context: BuildContext): Promise<BuiltTaskResult> {
+    const previewDefs = this.preview.getDefs();
+    const htmlConfig = previewDefs.map((previewModule) => generateHtmlConfig(previewModule, { dev: context.dev }));
+    const originalSeedersIds = context.capsuleNetwork.originalSeedersCapsules.map((c) => c.component.id.toString());
+    const grouped: TargetsGroupMap = {};
+    // avoid running them with `Promise.all` because getEnv methods do import/isolate which can't be in parallel.
+    await mapSeries(context.components, async (component) => {
+      // Do not run over other components in the graph. it make the process much longer with no need
+      if (originalSeedersIds && originalSeedersIds.length && !originalSeedersIds.includes(component.id.toString())) {
+        return undefined;
+      }
+      const envDef = this.envs.getEnvFromComponent(component);
+      if (!envDef) return undefined;
+      const env = envDef.env;
+      const bundlingStrategy = this.preview.getBundlingStrategy(envDef.env);
+      if (bundlingStrategy.name === 'env') {
+        return undefined;
+      }
+      const target = await this.getEnvTargetFromComponent(context, component, envDef, htmlConfig);
+      if (!target) return undefined;
+      const shouldUseDefaultBundler = this.shouldUseDefaultBundler(envDef);
+      let envToGetBundler = this.envs.getEnvsEnvDefinition().env;
+      let groupEnvId = 'default';
+      if (!shouldUseDefaultBundler) {
+        envToGetBundler = env;
+        groupEnvId = envDef.id;
+      }
+      if (!grouped[groupEnvId]) {
+        grouped[groupEnvId] = {
+          env,
+          envToGetBundler,
+          targets: [target],
+        };
+      } else {
+        grouped[groupEnvId].targets.push(target);
+      }
+      return undefined;
+    });
+    if (isEmpty(grouped)) {
+      return { componentsResults: [] };
+    }
+
+    return this.runBundlerForGroups(context, grouped);
+  }
+
+  private async runBundlerForGroups(context: BuildContext, groups: TargetsGroupMap): Promise<BuiltTaskResult> {
+    const bundlerContext: BundlerContext = Object.assign(context, {
+      targets: [],
+      entry: [],
+      development: context.dev,
+      metaData: {
+        initiator: `${GENERATE_ENV_TEMPLATE_TASK_NAME} task`,
+        envId: context.id,
+        isEnvTemplate: true,
+      },
+    });
+
+    const bundlerResults = await mapSeries(Object.entries(groups), async ([, targetsGroup]) => {
+      bundlerContext.targets = targetsGroup.targets;
+      const bundler: Bundler = await targetsGroup.envToGetBundler.getTemplateBundler(bundlerContext);
+      const bundlerResult = await bundler.run();
+      return bundlerResult;
+    });
+
+    const results = await this.computeResults(bundlerContext, flatten(bundlerResults));
+    return results;
+  }
+
+  private shouldUseDefaultBundler(envDef: EnvDefinition): boolean {
+    if (this.aspectLoader.isCoreEnv(envDef.id) && envDef.id !== 'teambit.react/react-native') return true;
+    const env = envDef.env;
+    if (env.getTemplateBundler && typeof env.getTemplateBundler === 'function') return false;
+    return true;
+  }
+
+  private async getEnvTargetFromComponent(
+    context: BuildContext,
+    envComponent: Component,
+    envDef: EnvDefinition,
+    htmlConfig: BundlerHtmlConfig[]
+  ): Promise<Target | undefined> {
+    const envPreviewConfig = this.preview.getEnvPreviewConfig(envDef.env);
+
+    const peers = await this.dependencyResolver.getPreviewHostDependenciesFromEnv(envDef.env);
+    // const module = await this.getPreviewModule(envComponent);
+    // const entries = Object.keys(module).map((key) => module.exposes[key]);
+    const capsule = context.capsuleNetwork.graphCapsules.getCapsule(envComponent.id);
+    if (!capsule) throw new Error('no capsule found');
+    // Passing here the env itself to make sure it's preview runtime will be part of the preview root file
+    // that's needed to make sure the providers register there are running correctly
+    const previewRoot = await this.preview.writePreviewRuntime(context, [envComponent.id.toString()]);
+    const entries = await this.generateEntries({
+      envDef,
+      splitComponentBundle: envPreviewConfig.splitComponentBundle ?? false,
+      workDir: capsule.path,
+      peers,
+      previewRoot,
+    });
+
+    const outputPath = this.computeOutputPath(context, envComponent);
+    if (!existsSync(outputPath)) mkdirpSync(outputPath);
+    const resolvedEnvAspects = await this.preview.resolveAspects(MainRuntime.name, [envComponent.id], undefined, {
+      requestedOnly: true,
+      // required to support envs that are plguins (.bit-env files)
+      filterByRuntime: false,
+    });
+    const resolvedEnv = resolvedEnvAspects[0];
+    const hostRootDir = resolvedEnv?.aspectPath;
+
+    if (!hostRootDir) {
+      this.logger.warn(`env preview template task, hostRootDir is not defined, for env ${envComponent.id.toString()}`);
+    }
+
+    return {
+      peers,
+      html: htmlConfig,
+      entries,
+      chunking: { splitChunks: true },
+      components: [envComponent],
+      outputPath,
+      /* It's a path to the root of the host component. */
+      hostRootDir,
+      hostDependencies: peers,
+      aliasHostDependencies: true,
+    };
+  }
+
+  private async generateEntries({
+    previewRoot,
+    workDir,
+    peers,
+    envDef,
+    splitComponentBundle,
+  }: {
+    previewRoot: string;
+    workDir: string;
+    peers: string[];
+    envDef: EnvDefinition;
+    splitComponentBundle: boolean;
+  }) {
+    const previewModules = await this.getPreviewModules(envDef);
+    const previewEntries = previewModules.map(({ name, path, ...rest }) => {
+      const linkFile = this.preview.writeLink(
+        name,
+        ComponentMap.create([]),
+        { default: path },
+        workDir,
+        splitComponentBundle
+      );
+
+      return { name, path, ...rest, entry: linkFile };
+    });
+    const peerLink = await writePeerLink(peers, workDir);
+
+    const entries = generateTemplateEntries({
+      peers: peerLink,
+      previewRootPath: previewRoot,
+      previewModules: previewEntries,
+    });
+    return entries;
+  }
+
+  async computeResults(context: BundlerContext, results: BundlerResult[]) {
+    const allResults = results.map((result) => {
+      const componentsResults: ComponentResult[] = result.components.map((component) => {
+        return {
+          component,
+          errors: result.errors.map((err) => (typeof err === 'string' ? err : err.message)),
+          warning: result.warnings,
+          startTime: result.startTime,
+          endTime: result.endTime,
+        };
+      });
+      return componentsResults;
+    });
+
+    const componentsResults = flatten(allResults);
+
+    const artifacts = getArtifactDef();
+
+    return {
+      componentsResults,
+      artifacts,
+    };
+  }
+
+  private async getPreviewModules(envDef: EnvDefinition): Promise<ModuleExpose[]> {
+    const previewDefs = this.preview.getDefs();
+
+    const modules = compact(
+      await Promise.all(
+        previewDefs.map(async (def) => {
+          if (!def.renderTemplatePathByEnv) return undefined;
+          return {
+            name: def.prefix,
+            path: (await def.renderTemplatePathByEnv(envDef.env)) || '',
+            include: def.include,
+          };
+        })
+      )
+    );
+
+    return modules;
+  }
+
+  private computeOutputPath(context: BuildContext, component: Component) {
+    const capsule = context.capsuleNetwork.graphCapsules.getCapsule(component.id);
+    if (!capsule) throw new Error('no capsule found');
+    return join(capsule.path, getArtifactDirectory());
+  }
+}
+
+export function getArtifactDirectory() {
+  return join(CAPSULE_ARTIFACTS_DIR, 'env-template');
+}
+
+export function getArtifactDef() {
+  return [
+    {
+      name: 'env-template',
+      globPatterns: ['**'],
+      rootDir: getArtifactDirectory(),
+    },
+  ];
+}

package/env-template.route.ts

@@ -0,0 +1,72 @@
+import type { NextFunction, Request, Response } from '@teambit/express';
+import type { ComponentUrlParams, RegisteredComponentRoute } from '@teambit/component';
+import { noPreview, serverError } from '@teambit/ui-foundation.ui.pages.static-error';
+import type { Logger } from '@teambit/logger';
+
+import type { PreviewMain } from './preview.main.runtime';
+import type { PreviewArtifact } from './preview-artifact';
+import { getArtifactFileMiddleware, GetCacheControlFunc } from './artifact-file-middleware';
+
+type UrlParams = ComponentUrlParams & {
+  filePath?: string;
+};
+
+// Week for now
+const CACHE_MAX_AGE = 60 * 60 * 24 * 7;
+
+const getCacheControl: GetCacheControlFunc = (_filePath: string, _contents: string, mimeType?: string | null) => {
+  // Do not cache the html files
+  if (mimeType && mimeType === 'text/html') {
+    return undefined;
+  }
+  return `private, max-age=${CACHE_MAX_AGE}`;
+};
+
+export class EnvTemplateRoute implements RegisteredComponentRoute {
+  constructor(
+    /**
+     * preview extension.
+     */
+    private preview: PreviewMain,
+    private logger: Logger
+  ) {}
+
+  route = `/env-template/:previewName/:filePath(*)`;
+  method = 'get';
+
+  // Since we might give it a core env id
+  // Then in the component route when we do host.get(id) it will fail, as we don't have the core envs in the scope/workspace
+  resolveComponent = false;
+
+  // @ts-ignore
+  middlewares = [
+    async (req: Request<UrlParams>, res: Response, next: NextFunction) => {
+      try {
+        // @ts-ignore TODO: @guy please fix.
+        // const component = req.component as Component | undefined;
+        // if (!component) return res.status(404).send(noPreview());
+
+        let artifact: PreviewArtifact | undefined;
+        // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680
+        try {
+          const { componentId: envId } = req.params;
+          artifact = await this.preview.getEnvTemplateByEnvId(envId);
+        } catch (e: any) {
+          this.logger.error(`getEnvTemplateByEnvId has failed`, e);
+          return res.status(404).send(noPreview());
+        }
+
+        // @ts-ignore
+        req.artifact = artifact;
+        // @ts-ignore
+        req.isLegacyPath = false;
+
+        return next();
+      } catch (e: any) {
+        this.logger.error('failed getting preview', e);
+        return res.status(500).send(serverError());
+      }
+    },
+    getArtifactFileMiddleware(this.logger, getCacheControl),
+  ];
+}

package/execution-ref.ts

@@ -0,0 +1,25 @@
+import { Component, ComponentID } from '@teambit/component';
+import type { ExecutionContext } from '@teambit/envs';
+
+// TODO - use workspace.list() instead of this
+export class ExecutionRef {
+  constructor(public executionCtx: ExecutionContext) {
+    this.currentComponents = executionCtx.components;
+  }
+
+  currentComponents: Component[];
+
+  add(added: Component) {
+    this.currentComponents = this.currentComponents.concat(added);
+  }
+  remove(removed: ComponentID) {
+    this.currentComponents = this.currentComponents.filter((c) => c.id.toString() !== removed.toString());
+  }
+  update(next: Component) {
+    this.currentComponents = this.currentComponents.map((c) => (c.equals(next) ? next : c));
+  }
+
+  get(id: ComponentID) {
+    return this.currentComponents.find((x) => x.id.isEqual(id));
+  }
+}

package/generate-link.ts

@@ -0,0 +1,73 @@
+import { toWindowsCompatiblePath } from '@teambit/toolbox.path.to-windows-compatible-path';
+import camelcase from 'camelcase';
+import type { ComponentMap } from '@teambit/component';
+
+export type MainModulesMap = {
+  /**
+   * Path to default module in case there is no specific module for the current environment.
+   */
+  default: string;
+  [envId: string]: string;
+};
+
+// :TODO refactor to building an AST and generate source code based on it.
+export function generateLink(
+  prefix: string,
+  componentMap: ComponentMap<string[]>,
+  mainModulesMap?: MainModulesMap,
+  isSplitComponentBundle = false
+): string {
+  const links = componentMap.toArray().map(([component, modulePath], compIdx) => ({
+    componentIdentifier: component.id.fullName,
+    modules: modulePath.map((path, pathIdx) => ({
+      varName: moduleVarName(compIdx, pathIdx),
+      resolveFrom: toWindowsCompatiblePath(path),
+    })),
+  }));
+
+  let modulesLinks;
+  if (mainModulesMap) {
+    modulesLinks = Object.entries(mainModulesMap).map(([envId, path]) => {
+      const resolveFrom = toWindowsCompatiblePath(path);
+      const varName = getEnvVarName(envId);
+      return { envId, varName, resolveFrom };
+    });
+  }
+
+  return `
+import { linkModules } from '${toWindowsCompatiblePath(require.resolve('./preview.preview.runtime'))}';
+
+${links
+  .map((link) => link.modules.map((module) => `import * as ${module.varName} from "${module.resolveFrom}";`).join('\n'))
+  .filter((line) => line !== '') // prevent empty lines
+  .join('\n')}
+
+${modulesLinks.map((module) => `import * as ${module.varName} from "${module.resolveFrom}";`).join('\n')}
+
+linkModules('${prefix}', {
+  modulesMap: {
+    ${modulesLinks
+      // must include all components, including empty
+      .map((module) => `"${module.envId}": ${module.varName}`)
+      .join(',\n    ')}
+  },
+  isSplitComponentBundle: ${isSplitComponentBundle},
+  componentMap: {
+${links
+  // must include all components, including empty
+  .map((link) => `    "${link.componentIdentifier}": [${link.modules.map((module) => module.varName).join(', ')}]`)
+  .join(',\n')}
+  }
+});
+`;
+}
+
+function moduleVarName(componentIdx: number, fileIdx: number) {
+  return `file_${componentIdx}_${fileIdx}`;
+}
+
+function getEnvVarName(envId: string) {
+  const envNameFormatted = camelcase(envId.replace('@', '').replace('.', '-').replace(/\//g, '-'));
+  const varName = `${envNameFormatted}MainModule`;
+  return varName;
+}

package/index.ts

@@ -0,0 +1,18 @@
+export { PreviewAspect as default, PreviewAspect, PreviewRuntime } from './preview.aspect';
+
+export * from './events';
+export type { PreviewEnv, Preview } from './preview-env';
+export type {
+  PreviewMain,
+  EnvPreviewConfig,
+  ComponentPreviewSize,
+  PreviewStrategyName,
+  PreviewFiles,
+  ComponentPreviewMetaData,
+} from './preview.main.runtime';
+export type { PreviewPreview, RenderingContextOptions, RenderingContextProvider } from './preview.preview.runtime';
+export type { PreviewDefinition } from './preview-definition';
+export type { PreviewModule, ModuleFile } from './types/preview-module';
+export type { RenderingContext } from './rendering-context';
+// Exporting directly from the inner file to prevent breaking the bundling process
+export { ENV_PREVIEW_STRATEGY_NAME, COMPONENT_PREVIEW_STRATEGY_NAME } from './strategies/strategies-names';

package/mk-temp-dir.ts

@@ -0,0 +1,7 @@
+import { mkdtempSync } from 'fs-extra';
+import { tmpdir } from 'os';
+import { sep } from 'path';
+
+export function makeTempDir(prefix = '') {
+  return mkdtempSync(`${tmpdir()}${sep}${prefix}`);
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/preview",
-  "version": "1.0.106",
+  "version": "1.0.108",
   "homepage": "https://bit.cloud/teambit/preview/preview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.preview",
     "name": "preview",
-    "version": "1.0.106"
+    "version": "1.0.108"
   },
   "dependencies": {
     "mime": "2.5.2",
@@ -16,58 +16,54 @@
     "camelcase": "6.2.0",
     "graphql-tag": "2.12.1",
     "object-hash": "2.1.1",
-    "cross-fetch": "3.1.5",
-    "memoizee": "0.4.15",
     "lodash.compact": "3.0.1",
     "graphql-request": "6.1.0",
-    "core-js": "^3.0.0",
-    "@babel/runtime": "7.20.0",
     "@teambit/ui-foundation.ui.pages.static-error": "0.0.92",
     "@teambit/component-id": "1.2.0",
     "@teambit/harmony": "0.4.6",
     "@teambit/bit-error": "0.0.404",
-    "@teambit/express": "0.0.938",
-    "@teambit/logger": "0.0.932",
-    "@teambit/builder": "1.0.106",
-    "@teambit/bundler": "1.0.106",
-    "@teambit/component": "1.0.106",
+    "@teambit/express": "0.0.939",
+    "@teambit/logger": "0.0.933",
+    "@teambit/builder": "1.0.108",
+    "@teambit/bundler": "1.0.108",
+    "@teambit/component": "1.0.108",
     "@teambit/preview.ui.component-preview": "1.0.3",
-    "@teambit/aspect-loader": "1.0.106",
-    "@teambit/cli": "0.0.839",
-    "@teambit/dependency-resolver": "1.0.106",
-    "@teambit/envs": "1.0.106",
+    "@teambit/aspect-loader": "1.0.108",
+    "@teambit/cli": "0.0.840",
+    "@teambit/dependency-resolver": "1.0.108",
+    "@teambit/envs": "1.0.108",
     "@teambit/toolbox.path.to-windows-compatible-path": "0.0.494",
-    "@teambit/graphql": "1.0.106",
-    "@teambit/pkg": "1.0.106",
-    "@teambit/pubsub": "1.0.106",
-    "@teambit/scope": "1.0.106",
-    "@teambit/ui": "1.0.106",
-    "@teambit/watcher": "1.0.106",
-    "@teambit/workspace": "1.0.106",
-    "@teambit/compiler": "1.0.106",
+    "@teambit/graphql": "1.0.108",
+    "@teambit/pkg": "1.0.108",
+    "@teambit/pubsub": "1.0.108",
+    "@teambit/scope": "1.0.108",
+    "@teambit/ui": "1.0.108",
+    "@teambit/watcher": "1.0.108",
+    "@teambit/workspace": "1.0.108",
+    "@teambit/compiler": "1.0.108",
     "@teambit/preview.cli.preview-server-status": "0.0.504",
     "@teambit/preview.cli.webpack-events-listener": "0.0.172",
-    "@teambit/isolator": "1.0.106"
+    "@teambit/isolator": "1.0.108"
   },
   "devDependencies": {
     "@types/mime": "2.0.3",
     "@types/fs-extra": "9.0.7",
     "@types/lodash": "4.14.165",
-    "@types/react": "^17.0.8",
     "@types/object-hash": "1.3.4",
     "@types/memoizee": "0.4.5",
+    "cross-fetch": "3.1.5",
+    "memoizee": "0.4.15",
     "@types/lodash.compact": "3.0.6",
     "@types/mocha": "9.1.0",
-    "@types/node": "12.20.4",
-    "@types/react-dom": "^17.0.5",
-    "@types/jest": "^26.0.0",
-    "@types/testing-library__jest-dom": "5.9.5",
+    "@types/jest": "^29.2.2",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "@teambit/harmony.envs.core-aspect-env": "0.0.13",
     "@teambit/preview.aspect-docs.preview": "0.0.165"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.624",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "@types/react": "^18.2.12",
+    "@teambit/legacy": "1.0.624"
   },
   "license": "Apache-2.0",
   "optionalDependencies": {},
@@ -81,7 +77,7 @@
   },
   "private": false,
   "engines": {
-    "node": ">=12.22.0"
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -90,12 +86,9 @@
   "keywords": [
     "bit",
     "bit-aspect",
+    "bit-core-aspect",
     "components",
     "collaboration",
-    "web",
-    "react",
-    "react-components",
-    "angular",
-    "angular-components"
+    "web"
   ]
 }

package/preview-artifact.ts

@@ -0,0 +1,24 @@
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
+import { uniq } from 'lodash';
+
+export class PreviewArtifact {
+  constructor(private artifacts: AbstractVinyl[]) {}
+
+  getPaths() {
+    // TODO: check why the artifacts stored twice, then remove this uniq here
+    return uniq(this.artifacts.map((artifact) => artifact.relative));
+  }
+
+  getFile(path: string) {
+    return this.artifacts.find((file) => {
+      return pathNormalizeToLinux(file.relative) === path;
+    });
+  }
+
+  getFileEndsWith(path: string) {
+    return this.artifacts.find((file) => {
+      return pathNormalizeToLinux(file.relative).endsWith(path);
+    });
+  }
+}

package/preview-assets.route.ts

@@ -0,0 +1,36 @@
+import type { Request, Response, Route } from '@teambit/express';
+import type { Component } from '@teambit/component';
+import { serverError } from '@teambit/ui-foundation.ui.pages.static-error';
+import type { Logger } from '@teambit/logger';
+
+import { PreviewMain } from './preview.main.runtime';
+
+export class PreviewAssetsRoute implements Route {
+  constructor(
+    /**
+     * preview extension.
+     */
+    private preview: PreviewMain,
+    private logger: Logger
+  ) {}
+
+  route = '/preview-assets';
+  method = 'get';
+
+  middlewares = [
+    async (req: Request, res: Response) => {
+      try {
+        // @ts-ignore TODO: @guy please fix.
+        const component = req.component as Component | undefined;
+        // if (!component) return res.status(404).send(noPreview());
+        if (!component) return res.status(404).jsonp({ error: 'not found' });
+        const result = await this.preview.getPreviewFiles(component);
+        if (!result) return res.status(404).jsonp({ error: 'not found' });
+        return res.json(result);
+      } catch (e: any) {
+        this.logger.error('failed getting preview assets', e);
+        return res.status(500).send(serverError());
+      }
+    },
+  ];
+}

package/preview-context.ts

@@ -0,0 +1,5 @@
+import { BuildContext } from '@teambit/builder';
+
+export interface PreviewContext extends BuildContext {
+  entries: string[];
+}