@teambit/preview 1.0.106 → 1.0.108

package/preview-definition.ts

@@ -0,0 +1,41 @@
+import type { Component, ComponentMap } from '@teambit/component';
+import type { Environment, ExecutionContext } from '@teambit/envs';
+import type { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+
+export interface PreviewDefinition {
+  /**
+   * extension preview prefix
+   */
+  prefix: string;
+
+  /**
+   * which other extension modules to include in the preview context.
+   */
+  include?: string[];
+
+  /**
+   * path of the default template to be executed.
+   */
+  renderTemplatePath: (context: ExecutionContext) => Promise<string | undefined>;
+
+  /**
+   * get the template by env.
+   * TODO: refactor `renderTemplatePath` to accept only an env and remove this method.
+   */
+  renderTemplatePathByEnv: (env: Environment) => Promise<string | undefined>;
+
+  /**
+   * get all files to require in the preview runtime.
+   */
+  getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>>;
+
+  /**
+   * Whether to include the peers chunk in the output html
+   */
+  includePeers?: boolean;
+
+  /**
+   * Get metadata for the preview
+   */
+  getMetadata?: (component: Component) => Promise<unknown>;
+}

package/preview-env.ts

@@ -0,0 +1,46 @@
+import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';
+import { AsyncEnvHandler, EnvHandler } from '@teambit/envs';
+
+/**
+ * interface for implementing component previews
+ * using bit's development environments.
+ */
+export interface PreviewEnv {
+  preview(): EnvHandler<Preview>;
+}
+
+export type Preview = {
+  /**
+   * return an instance of a mounter.
+   */
+  getMounter: () => string;
+
+  /**
+   * return a path to a docs template.
+   */
+  getDocsTemplate: () => string;
+
+  /**
+   * return a dev server instance to use for previews.
+   */
+  getDevServer: (context: DevServerContext) => EnvHandler<DevServer> | AsyncEnvHandler<DevServer>;
+
+  /**
+   * return an instance for a preview bundler.
+   */
+  getBundler: (context: BundlerContext) => EnvHandler<Bundler> | AsyncEnvHandler<Bundler>;
+
+  /**
+   * return the id of the dev server.
+   * used for deduplication of dev servers
+   */
+  getDevEnvId: () => string;
+
+  /**
+   * dependencies that will bundled as part of the env template and will configured as externals for the component bundle
+   * these dependencies will be available in the preview on the window.
+   * these dependencies will have only one instance on the page.
+   * for dev server these dependencies will be aliased
+   */
+  getHostDependencies: () => string[];
+};

package/preview-type.ts

@@ -0,0 +1,36 @@
+import { ComponentID } from '@teambit/component-id';
+import { RenderingContext } from './rendering-context';
+import { PreviewModule } from './types/preview-module';
+
+export interface PreviewType {
+  /**
+   * preview name to register.
+   */
+  name: string;
+
+  /**
+   * preview render method.
+   */
+  render(
+    componentId: ComponentID,
+    envId: string,
+    linkedModules: PreviewModule<any>,
+    includedPreviews: string[],
+    renderingContext: RenderingContext
+  ): void;
+
+  /**
+   * determine if this will be the default preview to render.
+   */
+  default?: boolean;
+
+  /**
+   * which other extension modules to include in the preview context.
+   */
+  include?: string[];
+
+  /**
+   * select relevant information to show in preview context
+   */
+  selectPreviewModel?: (componentId: string, module: PreviewModule) => any;
+}

package/preview.aspect.ts

@@ -0,0 +1,12 @@
+import { Aspect, RuntimeDefinition } from '@teambit/harmony';
+
+export const PreviewRuntime = new RuntimeDefinition('preview');
+
+export const PreviewAspect = Aspect.create({
+  id: 'teambit.preview/preview',
+  dependencies: [],
+  defaultConfig: {},
+  declareRuntime: PreviewRuntime,
+});
+
+export default PreviewAspect;

package/preview.graphql.ts

@@ -0,0 +1,48 @@
+import { Component } from '@teambit/component';
+import gql from 'graphql-tag';
+
+import { PreviewMain } from './preview.main.runtime';
+
+export function previewSchema(previewExtension: PreviewMain) {
+  return {
+    typeDefs: gql`
+      type Preview {
+        # url: String!
+        """
+        Check if the component supports scaling
+        """
+        isScaling: Boolean
+        includesEnvTemplate: Boolean
+        legacyHeader: Boolean
+        skipIncludes: Boolean
+      }
+
+      extend type Component {
+        preview: Preview
+      }
+    `,
+    resolvers: {
+      Component: {
+        preview: (component: Component) => {
+          // return previewExtension.getPreview(component);
+          return { component };
+        },
+      },
+      Preview: {
+        includesEnvTemplate: ({ component }) => {
+          return previewExtension.isBundledWithEnv(component);
+        },
+        isScaling: ({ component }) => {
+          return previewExtension.doesScaling(component);
+        },
+        legacyHeader: ({ component }) => {
+          return previewExtension.isLegacyHeader(component);
+        },
+        skipIncludes: ({ component }) => {
+          // return true;
+          return previewExtension.isSupportSkipIncludes(component);
+        },
+      },
+    },
+  };
+}

package/preview.route.ts

@@ -0,0 +1,58 @@
+import type { NextFunction, Request, Response, Route } from '@teambit/express';
+import type { Component } from '@teambit/component';
+import { noPreview, serverError } from '@teambit/ui-foundation.ui.pages.static-error';
+import type { Logger } from '@teambit/logger';
+
+import { PreviewMain } from './preview.main.runtime';
+import { PreviewArtifact } from './preview-artifact';
+import { getArtifactFileMiddleware } from './artifact-file-middleware';
+import type { PreviewUrlParams } from './artifact-file-middleware';
+
+export class PreviewRoute implements Route {
+  constructor(
+    /**
+     * preview extension.
+     */
+    private preview: PreviewMain,
+    private logger: Logger
+  ) {}
+
+  route = `/preview/:previewName?/:filePath(*)`;
+  method = 'get';
+
+  middlewares = [
+    async (req: Request<PreviewUrlParams>, 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());
+        const isLegacyPath = await this.preview.isBundledWithEnv(component);
+
+        let artifact: PreviewArtifact | undefined;
+        // TODO - prevent error `getVinylsAndImportIfMissing is not a function` #4680
+        try {
+          // Taking the env template (in this case we will take the component only bundle throw component-preview route)
+          // We use this route for the env template for backward compatibility - new scopes which contain components tagged with old versions of bit
+          if (!isLegacyPath) {
+            artifact = await this.preview.getEnvTemplateFromComponentEnv(component);
+          } else {
+            // If it's legacy (bundled together with the env template) take the preview bundle from the component directly
+            artifact = await this.preview.getPreview(component);
+          }
+        } catch (e: any) {
+          this.logger.error(`getEnvTemplateFromComponentEnv or getPreview has failed`, e);
+          return res.status(404).send(noPreview());
+        }
+        // @ts-ignore
+        req.artifact = artifact;
+        // @ts-ignore
+        req.isLegacyPath = isLegacyPath;
+        return next();
+      } catch (e: any) {
+        this.logger.error('failed getting preview', e);
+        return res.status(500).send(serverError());
+      }
+    },
+    getArtifactFileMiddleware(this.logger),
+  ];
+}

package/preview.task.ts

@@ -0,0 +1,85 @@
+import { resolve, join } from 'path';
+import { ExecutionContext } from '@teambit/envs';
+import { BuildContext, BuiltTaskResult, BuildTask, TaskLocation, CAPSULE_ARTIFACTS_DIR } from '@teambit/builder';
+import { Bundler, BundlerContext, BundlerMain, Target } from '@teambit/bundler';
+import { Compiler } from '@teambit/compiler';
+import { ComponentMap } from '@teambit/component';
+import { Capsule } from '@teambit/isolator';
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import { DependencyResolverMain } from '@teambit/dependency-resolver';
+import { Logger } from '@teambit/logger';
+import { PreviewMain } from './preview.main.runtime';
+
+export const PREVIEW_TASK_NAME = 'GeneratePreview';
+export class PreviewTask implements BuildTask {
+  constructor(
+    /**
+     * bundler extension.
+     */
+    private bundler: BundlerMain,
+
+    /**
+     * preview extension.
+     */
+    private preview: PreviewMain,
+
+    private dependencyResolver: DependencyResolverMain,
+    private logger: Logger
+  ) {}
+
+  aspectId = 'teambit.preview/preview';
+  name = PREVIEW_TASK_NAME;
+  description = 'Bundling components for preview';
+  location: TaskLocation = 'end';
+  // readonly dependencies = [CompilerAspect.id];
+
+  async execute(context: BuildContext): Promise<BuiltTaskResult> {
+    const defs = this.preview.getDefs();
+    const url = `/preview/${context.envRuntime.id}`;
+    const bundlingStrategy = this.preview.getBundlingStrategy(context.env);
+    const envPreviewConfig = this.preview.getEnvPreviewConfig(context.env);
+    const splitComponentBundle = envPreviewConfig.splitComponentBundle ?? false;
+    const computeTargetsContext = Object.assign(context, { splitComponentBundle });
+
+    const targets: Target[] = await bundlingStrategy.computeTargets(computeTargetsContext, defs, this);
+
+    const bundlerContext: BundlerContext = Object.assign(context, {
+      targets,
+      compress: bundlingStrategy.name !== 'env' && splitComponentBundle,
+      entry: [],
+      publicPath: this.getPreviewDirectory(context),
+      rootPath: url,
+      development: context.dev,
+      metaData: {
+        initiator: `${PREVIEW_TASK_NAME} task`,
+        envId: context.id,
+      },
+    });
+
+    const bundler: Bundler = await context.env.getBundler(bundlerContext);
+    const bundlerResults = await bundler.run();
+
+    const results = bundlingStrategy.computeResults(bundlerContext, bundlerResults, this);
+    return results;
+  }
+
+  getLinkFileDirectory() {
+    return join(CAPSULE_ARTIFACTS_DIR, 'preview-links');
+  }
+
+  getPreviewDirectory(context: ExecutionContext) {
+    const outputPath = resolve(`${context.id}/public`);
+    return outputPath;
+  }
+
+  getPathsFromMap(
+    capsule: Capsule,
+    moduleMap: ComponentMap<AbstractVinyl[]>,
+    context: BuildContext
+  ): ComponentMap<string[]> {
+    const compiler: Compiler = context.env.getCompiler(context);
+    return moduleMap.map((files) => {
+      return files.map((file) => join(capsule.path, compiler.getDistPathBySrcPath(file.relative)));
+    });
+  }
+}

package/preview.ts

@@ -0,0 +1,13 @@
+import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';
+
+export interface Preview {
+  /**
+   * get a dev server instance of the.
+   */
+  getDevServer(context: DevServerContext): DevServer;
+
+  /**
+   * get bundler instance.
+   */
+  getBundler(context: BundlerContext): Bundler;
+}

package/rendering-context.ts

@@ -0,0 +1,16 @@
+import { RenderingContextSlot } from './preview.preview.runtime';
+
+export type RenderingContextOptions = { aspectsFilter?: string[] };
+export type RenderingContextProvider = (options: RenderingContextOptions) => { [key: string]: any };
+
+export class RenderingContext {
+  constructor(private contexts: RenderingContextSlot, private options: RenderingContextOptions = {}) {}
+
+  /**
+   * obtain rendering context of a specific aspect.
+   */
+  get(aspectId: string) {
+    const contextFactory = this.contexts.get(aspectId);
+    return contextFactory?.(this.options);
+  }
+}

package/size-event.ts

@@ -0,0 +1,14 @@
+import { BitBaseEvent } from '@teambit/pubsub';
+
+export type SizeEventType = {
+  height: number;
+  width: number;
+};
+
+export class SizeEvent extends BitBaseEvent<SizeEventType> {
+  static readonly TYPE = 'preview-size';
+
+  constructor(sizeEvent: SizeEventType) {
+    super(SizeEvent.TYPE, '0.0.1', new Date().getTime(), sizeEvent);
+  }
+}

package/tsconfig.json

@@ -1,38 +1,33 @@
 {
   "compilerOptions": {
     "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
+      "esnext",
+      "dom",
+      "dom.Iterable"
     ],
-    "target": "es2015",
-    "module": "CommonJS",
-    "jsx": "react",
-    "allowJs": true,
-    "composite": true,
+    "target": "es2020",
+    "module": "es2020",
+    "jsx": "react-jsx",
     "declaration": true,
     "sourceMap": true,
-    "skipLibCheck": true,
     "experimentalDecorators": true,
-    "outDir": "dist",
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "rootDir": ".",
     "resolveJsonModule": true,
-    "emitDeclarationOnly": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "preserveConstEnums": true
+    "allowJs": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true
   },
   "exclude": [
+    "artifacts",
+    "public",
     "dist",
+    "node_modules",
+    "package.json",
     "esm.mjs",
-    "package.json"
+    "**/*.cjs",
+    "./dist"
   ],
   "include": [
     "**/*",

package/types/asset.d.ts

@@ -5,12 +5,12 @@ declare module '*.png' {
 declare module '*.svg' {
   import type { FunctionComponent, SVGProps } from 'react';
 
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
   const src: string;
   export default src;
 }
-
-// @TODO Gilad
 declare module '*.jpg' {
   const value: any;
   export = value;
@@ -27,3 +27,15 @@ declare module '*.bmp' {
   const value: any;
   export = value;
 }
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}