@teambit/compositions 1.0.106 → 1.0.108

package/composition.ts

@@ -0,0 +1,60 @@
+import { humanizeCompositionId } from '@teambit/compositions.model.composition-id';
+
+export type CompositionProps = {
+  identifier: string;
+  filepath?: string;
+  displayName?: string;
+};
+
+export type CompositionBrowserMetadata = {
+  displayName?: string;
+  identifier: string;
+};
+
+export type CompositionBrowserMetadataObject = {
+  compositions: CompositionBrowserMetadata[];
+};
+
+export class Composition {
+  constructor(
+    /**
+     * identifier of the composition
+     */
+    readonly identifier: string,
+
+    /**
+     * file path in which the composition is contained.
+     */
+    readonly filepath?: string,
+
+    /**
+     * set explicit display name
+     */
+    private _displayName?: string
+  ) {}
+
+  get displayName() {
+    return this._displayName || humanizeCompositionId(this.identifier);
+  }
+
+  toObject() {
+    return {
+      identifier: this.identifier,
+      filepath: this.filepath,
+      displayName: this._displayName,
+    };
+  }
+
+  toBrowserMetaDataObject(): CompositionBrowserMetadata {
+    return {
+      identifier: this.identifier,
+      displayName: this._displayName,
+    };
+  }
+
+  static fromArray(compositions: CompositionProps[]): Composition[] {
+    return compositions.map((composition) => {
+      return new Composition(composition.identifier, composition.filepath, composition.displayName);
+    });
+  }
+}

package/compositions.aspect.ts

@@ -0,0 +1,9 @@
+import { Aspect } from '@teambit/harmony';
+
+export const CompositionsAspect = Aspect.create({
+  id: 'teambit.compositions/compositions',
+  dependencies: [],
+  defaultConfig: {},
+});
+
+export default CompositionsAspect;

package/compositions.graphql.ts

@@ -0,0 +1,32 @@
+import { Component } from '@teambit/component';
+import { Schema } from '@teambit/graphql';
+import gql from 'graphql-tag';
+
+import { CompositionsMain } from './compositions.main.runtime';
+
+export function compositionsSchema(compositions: CompositionsMain): Schema {
+  return {
+    typeDefs: gql`
+      extend type Component {
+        compositions: [Composition]
+      }
+
+      type Subscription {
+        compositionAdded: Composition
+      }
+
+      type Composition {
+        filepath: String
+        identifier: String
+        displayName: String
+      }
+    `,
+    resolvers: {
+      Component: {
+        compositions: (component: Component) => {
+          return compositions.getCompositions(component);
+        },
+      },
+    },
+  };
+}

package/compositions.main.runtime.ts

@@ -0,0 +1,214 @@
+import { MainRuntime } from '@teambit/cli';
+import { AspectData, Component, ComponentMap, IComponent } from '@teambit/component';
+import ScopeAspect, { ScopeMain } from '@teambit/scope';
+import { DevFilesAspect, DevFilesMain } from '@teambit/dev-files';
+import EnvsAspect, { EnvsMain } from '@teambit/envs';
+import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
+import { ComponentLoadOptions } from '@teambit/legacy/dist/consumer/component/component-loader';
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+import { PreviewAspect, PreviewMain } from '@teambit/preview';
+import { SchemaAspect, SchemaMain } from '@teambit/schema';
+import { matchPatterns, splitPatterns } from '@teambit/toolbox.path.match-patterns';
+import { Workspace, WorkspaceAspect } from '@teambit/workspace';
+import { join } from 'path';
+import { Composition } from './composition';
+import { CompositionsAspect } from './compositions.aspect';
+import { compositionsSchema } from './compositions.graphql';
+import { CompositionPreviewDefinition } from './compositions.preview-definition';
+
+export type CompositionsConfig = {
+  /**
+   * glob pattern to detect composition files. This includes all related files, like styles and jsons.
+   * @example ['/*.composition?(s).*']
+   */
+  compositionFilePattern: string[];
+  /**
+   * glob pattern to select Preview files. this will only include files matched by compositionFilePattern.
+   * @example ['*.{t,j}s', '*.{t,j}sx']
+   */
+  compositionPreviewFilePattern: string[];
+};
+
+/**
+ * the component documentation extension.
+ */
+export class CompositionsMain {
+  constructor(
+    /**
+     * Glob pattern to select all composition files
+     */
+    private compositionFilePattern: string[],
+
+    /**
+     * Glob pattern to select composition preview files
+     */
+    private previewFilePattern: string[],
+
+    /**
+     * envs extension.
+     */
+    private preview: PreviewMain,
+
+    /**
+     * workspace extension.
+     */
+    private workspace: Workspace,
+
+    /**
+     * schema extension.
+     */
+    private schema: SchemaMain,
+
+    private devFiles: DevFilesMain,
+
+    private envs: EnvsMain
+  ) {}
+
+  /**
+   * returns an array of doc file paths for a set of components.
+   */
+  getPreviewFiles(components: Component[]): ComponentMap<AbstractVinyl[]> {
+    return ComponentMap.as<AbstractVinyl[]>(components, (component) => {
+      // this includes non executables, like `button.compositions.module.scss` or `presets.compositions.json`
+      const compositionFiles = component.state.filesystem.byGlob(this.compositionFilePattern);
+
+      // select only relevant preview files (.tsx, etc)
+      const previewFiles = new Set(
+        component.state.filesystem.byGlob(this.previewFilePattern).map((file) => file.relative)
+      );
+      const files = compositionFiles.filter((file) => previewFiles.has(file.relative));
+
+      return files;
+    });
+  }
+
+  /**
+   * checks if a file matches the composition file pattern.
+   */
+  isCompositionFile(filePath: string): boolean {
+    const { includePatterns, excludePatterns } = splitPatterns(this.compositionFilePattern);
+    return matchPatterns(filePath, includePatterns, excludePatterns);
+  }
+
+  /**
+   * get component compositions.
+   */
+  getCompositions(component: IComponent): Composition[] {
+    const entry = component.get(CompositionsAspect.id);
+    if (!entry) return [];
+    const compositions = entry.data.compositions;
+    if (!compositions) return [];
+
+    return Composition.fromArray(compositions);
+  }
+
+  /**
+   * read composition from the component source code.
+   */
+  readCompositions(component: Component): Composition[] {
+    const maybeFiles = this.getPreviewFiles([component]).byComponent(component);
+
+    if (!maybeFiles) return [];
+    const [, files] = maybeFiles;
+    return files.map((file) => this.computeCompositions(component, file)).flat();
+  }
+
+  getCompositionFilePattern() {
+    return this.compositionFilePattern;
+  }
+
+  getComponentDevPatterns(component: Component) {
+    const env = this.envs.calculateEnv(component, { skipWarnings: !!this.workspace?.inInstallContext }).env;
+    const componentEnvCompositionsDevPatterns: string[] = env.getCompositionsDevPatterns
+      ? env.getCompositionsDevPatterns(component)
+      : [];
+    const componentPatterns = componentEnvCompositionsDevPatterns.concat(this.getCompositionFilePattern());
+    return { name: 'compositions', pattern: componentPatterns };
+  }
+
+  getDevPatternToRegister() {
+    return this.getComponentDevPatterns.bind(this);
+  }
+
+  async onComponentLoad(component: Component, loadOpts?: ComponentLoadOptions): Promise<AspectData | undefined> {
+    if (loadOpts?.loadCompositions === false) return undefined;
+    const compositions = this.readCompositions(component);
+    return {
+      compositions: compositions.map((composition) => composition.toObject()),
+    };
+  }
+
+  private computeCompositions(component: Component, file: AbstractVinyl): Composition[] {
+    // :TODO hacked for a specific file extension now until david will take care in the compiler.
+    const pathArray = file.path.split('.');
+    pathArray[pathArray.length - 1] = 'js';
+
+    const modulePath = this.workspace ? join(this.workspace.componentDir(component.id), file.relative) : file.relative;
+    const exports = this.schema.parseModule(modulePath, file.contents.toString());
+    return exports.map((exportModel) => {
+      const displayName = exportModel.staticProperties?.get('compositionName');
+
+      return new Composition(
+        exportModel.identifier,
+        file.relative,
+        typeof displayName === 'string' ? displayName : undefined
+      );
+    });
+  }
+
+  static defaultConfig: CompositionsConfig = {
+    compositionFilePattern: ['**/*.composition?(s).*'],
+    compositionPreviewFilePattern: ['**/*.{t,j}s?(x)'],
+  };
+
+  static runtime = MainRuntime;
+  static dependencies = [
+    PreviewAspect,
+    GraphqlAspect,
+    WorkspaceAspect,
+    SchemaAspect,
+    DevFilesAspect,
+    EnvsAspect,
+    ScopeAspect,
+  ];
+
+  static async provider(
+    [preview, graphql, workspace, schema, devFiles, envs, scope]: [
+      PreviewMain,
+      GraphqlMain,
+      Workspace,
+      SchemaMain,
+      DevFilesMain,
+      EnvsMain,
+      ScopeMain
+    ],
+    config: CompositionsConfig
+  ) {
+    const compositions = new CompositionsMain(
+      config.compositionFilePattern,
+      config.compositionPreviewFilePattern,
+      preview,
+      workspace,
+      schema,
+      devFiles,
+      envs
+    );
+
+    // TODO: use the docs implementation to allow component specific pattern
+    devFiles.registerDevPattern(compositions.getDevPatternToRegister());
+
+    graphql.register(compositionsSchema(compositions));
+    preview.registerDefinition(new CompositionPreviewDefinition(compositions));
+
+    if (workspace) {
+      workspace.registerOnComponentLoad(compositions.onComponentLoad.bind(compositions));
+    }
+    if (scope) {
+      scope.registerOnCompAspectReCalc(compositions.onComponentLoad.bind(compositions));
+    }
+
+    return compositions;
+  }
+}
+
+CompositionsAspect.addRuntime(CompositionsMain);

package/compositions.preview-definition.ts

@@ -0,0 +1,40 @@
+import { Component, ComponentMap } from '@teambit/component';
+import type { ExecutionContext, Environment } from '@teambit/envs';
+import { PreviewDefinition } from '@teambit/preview';
+import { isFunction } from 'lodash';
+import { AbstractVinyl } from '@teambit/legacy/dist/consumer/component/sources';
+
+import { CompositionsMain } from './compositions.main.runtime';
+import { CompositionBrowserMetadataObject } from './composition';
+
+export class CompositionPreviewDefinition implements PreviewDefinition {
+  readonly prefix = 'compositions';
+  readonly includePeers = true;
+
+  constructor(private compositions: CompositionsMain) {}
+
+  async renderTemplatePath(context: ExecutionContext): Promise<string | undefined> {
+    return this.renderTemplatePathByEnv(context.env);
+  }
+
+  async renderTemplatePathByEnv(env: Environment): Promise<string | undefined> {
+    if (env.getMounter && isFunction(env.getMounter)) {
+      return env.getMounter();
+    }
+    return undefined;
+  }
+
+  async getModuleMap(components: Component[]): Promise<ComponentMap<AbstractVinyl[]>> {
+    const map = this.compositions.getPreviewFiles(components);
+    return map;
+  }
+
+  async getMetadata(component: Component): Promise<CompositionBrowserMetadataObject> {
+    const compositions = this.compositions
+      .getCompositions(component)
+      .map((composition) => ({ displayName: composition.displayName, identifier: composition.identifier }));
+    return {
+      compositions,
+    };
+  }
+}

package/compositions.preview.runtime.ts

@@ -0,0 +1,93 @@
+import { ComponentID } from '@teambit/component-id';
+import {
+  PreviewAspect,
+  PreviewPreview,
+  RenderingContext,
+  PreviewRuntime,
+  PreviewModule,
+  ModuleFile,
+} from '@teambit/preview';
+import head from 'lodash.head';
+import { CompositionBrowserMetadataObject } from './composition';
+
+import { CompositionsAspect } from './compositions.aspect';
+
+export class CompositionsPreview {
+  constructor(
+    /**
+     * preview extension.
+     */
+    private preview: PreviewPreview
+  ) {}
+
+  render(componentId: ComponentID, envId: string, modules: PreviewModule, otherPreviewDefs, context: RenderingContext) {
+    if (!modules.componentMap[componentId.fullName]) return;
+
+    const compositions = this.selectPreviewModel(componentId.fullName, modules);
+    const metadata = this.getMetadata(componentId.fullName, modules);
+    const active = this.getActiveComposition(compositions, metadata);
+
+    const mainModule = modules.modulesMap[envId] || modules.modulesMap.default;
+    const defaultExports = mainModule.default;
+
+    defaultExports(active, context);
+  }
+
+  /** gets relevant information for this preview to render */
+  selectPreviewModel(componentFullName: string, previewModule: PreviewModule) {
+    const files = previewModule.componentMap[componentFullName] || [];
+
+    // allow compositions to come from many files. It is assumed they will have unique named
+    const combined = Object.assign({}, ...files);
+    return combined;
+  }
+
+  getMetadata(componentFullName: string, previewModule: PreviewModule): CompositionBrowserMetadataObject | undefined {
+    const metadata = previewModule?.componentMapMetadata
+      ? previewModule.componentMapMetadata[componentFullName]
+      : undefined;
+    if (metadata) {
+      return metadata as CompositionBrowserMetadataObject;
+    }
+    return undefined;
+  }
+
+  private getActiveComposition(module: ModuleFile, metadata?: CompositionBrowserMetadataObject) {
+    const firstQueryParam = window.location.hash.split('&')[1];
+    const query = this.preview.getQuery();
+    const compositionId = this.preview.getParam(query, 'name') || firstQueryParam;
+
+    if (compositionId && module[compositionId]) {
+      return module[compositionId];
+    }
+
+    if (metadata && metadata.compositions) {
+      const first = head(metadata.compositions);
+      const firstId = first?.identifier;
+      if (firstId && module[firstId]) {
+        return module[firstId];
+      }
+    }
+
+    const first = head(Object.values(module));
+    return first;
+  }
+
+  static runtime = PreviewRuntime;
+
+  static dependencies = [PreviewAspect];
+
+  static async provider([preview]: [PreviewPreview]) {
+    const compPreview = new CompositionsPreview(preview);
+    preview.registerPreview({
+      name: 'compositions',
+      render: compPreview.render.bind(compPreview),
+      selectPreviewModel: compPreview.selectPreviewModel.bind(compPreview),
+      default: true,
+    });
+
+    return compPreview;
+  }
+}
+
+CompositionsAspect.addRuntime(CompositionsPreview);

package/dist/composition.d.ts

@@ -1,13 +1,13 @@
-export declare type CompositionProps = {
+export type CompositionProps = {
     identifier: string;
     filepath?: string;
     displayName?: string;
 };
-export declare type CompositionBrowserMetadata = {
+export type CompositionBrowserMetadata = {
     displayName?: string;
     identifier: string;
 };
-export declare type CompositionBrowserMetadataObject = {
+export type CompositionBrowserMetadataObject = {
     compositions: CompositionBrowserMetadata[];
 };
 export declare class Composition {
@@ -18,7 +18,7 @@ export declare class Composition {
     /**
      * file path in which the composition is contained.
      */
-    readonly filepath?: string | undefined;
+    readonly filepath?: string;
     /**
      * set explicit display name
      */
@@ -31,16 +31,16 @@ export declare class Composition {
     /**
      * file path in which the composition is contained.
      */
-    filepath?: string | undefined, 
+    filepath?: string, 
     /**
      * set explicit display name
      */
-    _displayName?: string | undefined);
+    _displayName?: string);
     get displayName(): string;
     toObject(): {
         identifier: string;
-        filepath: string | undefined;
-        displayName: string | undefined;
+        filepath: string;
+        displayName: string;
     };
     toBrowserMetaDataObject(): CompositionBrowserMetadata;
     static fromArray(compositions: CompositionProps[]): Composition[];

package/dist/composition.section.d.ts

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import { Section } from '@teambit/component';
-import React from 'react';
 import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
-declare type Options = {
+type Options = {
     menuBarWidgetSlot: CompositionsMenuSlot;
 };
 export declare class CompositionsSection implements Section {
@@ -22,7 +22,7 @@ export declare class CompositionsSection implements Section {
     };
     route: {
         path: string;
-        element: React.JSX.Element;
+        element: JSX.Element;
     };
     order: number;
 }

package/dist/compositions.composition.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const Logo: () => React.JSX.Element;
+/// <reference types="react" />
+export declare const Logo: () => JSX.Element;

package/dist/compositions.d.ts

@@ -1,22 +1,22 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ComponentModel } from '@teambit/component';
 import { EmptyStateSlot } from './compositions.ui.runtime';
 import { Composition } from './composition';
 import type { CompositionsMenuSlot } from './compositions.ui.runtime';
 import { ComponentCompositionProps } from './ui/composition-preview';
-export declare type MenuBarWidget = {
+export type MenuBarWidget = {
     location: 'start' | 'end';
     content: ReactNode;
 };
-export declare type CompositionsProp = {
+export type CompositionsProp = {
     menuBarWidgets?: CompositionsMenuSlot;
     emptyState?: EmptyStateSlot;
 };
-export declare function Compositions({ menuBarWidgets, emptyState }: CompositionsProp): React.JSX.Element;
-export declare type CompositionContentProps = {
+export declare function Compositions({ menuBarWidgets, emptyState }: CompositionsProp): JSX.Element;
+export type CompositionContentProps = {
     component: ComponentModel;
     selected?: Composition;
     queryParams?: string | string[];
     emptyState?: EmptyStateSlot;
 } & ComponentCompositionProps;
-export declare function CompositionContent({ component, selected, queryParams, emptyState, ...componentCompositionProps }: CompositionContentProps): React.JSX.Element;
+export declare function CompositionContent({ component, selected, queryParams, emptyState, ...componentCompositionProps }: CompositionContentProps): JSX.Element;

package/dist/compositions.js

@@ -205,7 +205,6 @@ function Compositions({
   menuBarWidgets,
   emptyState
 }) {
-  var _component$preview, _component$preview2, _component$preview3;
   const component = (0, _react().useContext)(_component().ComponentContext);
   // const [searchParams, setSearchParams] = useSearchParams();
   const params = (0, _reactRouterDom().useParams)();
@@ -232,9 +231,9 @@ function Compositions({
   const [isSidebarOpen, setSidebarOpenness] = (0, _react().useState)(showSidebar);
   const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.left;
   const compositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions');
-  const isScaling = component === null || component === void 0 || (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.isScaling;
-  const includesEnvTemplates = component === null || component === void 0 || (_component$preview2 = component.preview) === null || _component$preview2 === void 0 ? void 0 : _component$preview2.includesEnvTemplate;
-  const compositionIdentifierParam = isScaling && includesEnvTemplates === false ? `name=${currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier}` : currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier;
+  const isScaling = component?.preview?.isScaling;
+  const includesEnvTemplates = component?.preview?.includesEnvTemplate;
+  const compositionIdentifierParam = isScaling && includesEnvTemplates === false ? `name=${currentComposition?.identifier}` : currentComposition?.identifier;
   const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
   const [compositionParams, setCompositionParams] = (0, _react().useState)({});
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]);
@@ -285,7 +284,7 @@ function Compositions({
     className: _compositionsModule().default.tabContent
   }, /*#__PURE__*/_react().default.createElement(_compositionsPanel().CompositionsPanel, {
     isScaling: isScaling,
-    includesEnvTemplate: (_component$preview3 = component.preview) === null || _component$preview3 === void 0 ? void 0 : _component$preview3.includesEnvTemplate,
+    includesEnvTemplate: component.preview?.includesEnvTemplate,
     onSelectComposition: composition => {
       if (!currentComposition || !location) return;
       if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {
@@ -312,7 +311,6 @@ function Compositions({
   }) : /*#__PURE__*/_react().default.createElement("div", null)))))));
 }
 function CompositionContent(_ref) {
-  var _component$environmen;
   let {
       component,
       selected,
@@ -320,8 +318,8 @@ function CompositionContent(_ref) {
       emptyState
     } = _ref,
     componentCompositionProps = _objectWithoutProperties(_ref, _excluded);
-  const env = (_component$environmen = component.environment) === null || _component$environmen === void 0 ? void 0 : _component$environmen.id;
-  const EmptyStateTemplate = emptyState === null || emptyState === void 0 ? void 0 : emptyState.get(env || ''); // || defaultTemplate;
+  const env = component.environment?.id;
+  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;
 
   if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {
     return /*#__PURE__*/_react().default.createElement("div", {
@@ -336,12 +334,12 @@ function CompositionContent(_ref) {
       title: "There are no compositions for this Component. Learn how to add compositions:"
     }, /*#__PURE__*/_react().default.createElement(_mdxUi().MDXLayout, null, /*#__PURE__*/_react().default.createElement(EmptyStateTemplate, null)))));
   }
-  if ((component === null || component === void 0 ? void 0 : component.buildStatus) === 'pending' && (component === null || component === void 0 ? void 0 : component.host) === 'teambit.scope/scope') return /*#__PURE__*/_react().default.createElement(_designUiSurfaces().StatusMessageCard, {
+  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope') return /*#__PURE__*/_react().default.createElement(_designUiSurfaces().StatusMessageCard, {
     className: _compositionsModule().default.buildStatusMessage,
     status: "PROCESSING",
     title: "component preview pending"
   }, "this might take some time");
-  if ((component === null || component === void 0 ? void 0 : component.buildStatus) === 'failed' && (component === null || component === void 0 ? void 0 : component.host) === 'teambit.scope/scope') return /*#__PURE__*/_react().default.createElement(_designUiSurfaces().StatusMessageCard, {
+  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope') return /*#__PURE__*/_react().default.createElement(_designUiSurfaces().StatusMessageCard, {
     className: _compositionsModule().default.buildStatusMessage,
     status: "FAILURE",
     title: "failed to get component preview "