@teambit/component 1.0.107 → 1.0.108

package/component.graphql.ts

@@ -0,0 +1,256 @@
+import stripAnsi from 'strip-ansi';
+import gql from 'graphql-tag';
+import { GraphQLJSONObject } from 'graphql-type-json';
+import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
+import { Component } from './component';
+import { ComponentFactory } from './component-factory';
+import { ComponentMain } from './component.main.runtime';
+
+export function componentSchema(componentExtension: ComponentMain) {
+  return {
+    typeDefs: gql`
+      scalar JSON
+      scalar JSONObject
+
+      type ComponentID {
+        name: String!
+        version: String
+        scope: String
+      }
+
+      type Tag {
+        # semver assigned to the tag.
+        version: String!
+
+        # tag hash.
+        hash: String!
+      }
+
+      type Snap {
+        # hash of the snapshot.
+        hash: String!
+
+        # time of the snapshot.
+        timestamp: String!
+
+        # parents of the snap
+        parents: [String]!
+
+        # snapper
+        author: Author!
+
+        # snapshot message
+        message: String
+      }
+
+      type LogEntry {
+        message: String!
+        displayName: String
+        username: String
+        parents: [String]!
+        email: String
+        date: String
+        hash: String!
+        tag: String
+        id: String!
+        profileImage: String
+      }
+
+      type Author {
+        # display name of the snapper.
+        displayName: String!
+
+        # author of the snapper.
+        email: String!
+      }
+
+      type Component {
+        # id of the component.
+        id: ComponentID!
+
+        # head snap of the component.
+        head: Snap
+
+        # head tag of the component.
+        headTag: Tag
+
+        # list of all relative component paths.
+        fs: [String]
+
+        # relative path to the main file of the component
+        mainFile: String
+
+        # return specific file contents by relative file path.
+        getFile(path: String): String
+
+        # latest version of the component.
+        latest: String
+
+        # display name of the component
+        displayName: String!
+
+        # component buildStatus
+        buildStatus: String
+
+        # list of component releases.
+        tags: [Tag]!
+
+        # Log entry of the component.
+        log: LogEntry!
+
+        """
+        component logs
+        """
+        logs(
+          """
+          type of logs to show (tag or snap)
+          """
+          type: String
+          offset: Int
+          limit: Int
+          """
+          head to start traversing logs from
+          """
+          head: String
+          sort: String
+          """
+          start traversing logs from the fetched component's head
+          """
+          takeHeadFromComponent: Boolean
+        ): [LogEntry]!
+
+        aspects(include: [String]): [Aspect]
+      }
+
+      type Aspect {
+        id: String!
+        icon: String
+        config: JSONObject
+        data: JSONObject
+      }
+
+      type InvalidComponent {
+        id: ComponentID!
+        errorName: String!
+        errorMessage: String!
+      }
+
+      type ComponentHost {
+        id: ID!
+        name: String!
+
+        # load a component.
+        get(id: String!, withState: Boolean): Component
+
+        # list components
+        list(offset: Int, limit: Int): [Component]!
+
+        # list invalid components and their errors
+        listInvalid: [InvalidComponent]!
+
+        # get component logs(snaps) by component id
+        snaps(id: String!): [LogEntry]! @deprecated(reason: "Use the logs field on Component")
+      }
+
+      type Query {
+        getHost(id: String): ComponentHost
+      }
+    `,
+    resolvers: {
+      JSONObject: GraphQLJSONObject,
+      Component: {
+        id: (component: Component) => component.id.toObject(),
+        displayName: (component: Component) => component.displayName,
+        fs: (component: Component) => {
+          return component.state.filesystem.files.map((file) => file.relative);
+        },
+        log: async (component: Component) => {
+          const snap = await component.loadSnap(component.id.version);
+          return {
+            ...snap,
+            date: snap.timestamp.getTime(),
+            email: snap.author.email,
+            username: snap.author.name,
+            displayName: snap.author.displayName,
+            id: snap.hash,
+          };
+        },
+        getFile: (component: Component, { path }: { path: string }) => {
+          const maybeFile = component.state.filesystem.files.find(
+            (file) => pathNormalizeToLinux(file.relative) === path
+          );
+          if (!maybeFile) return undefined;
+          return maybeFile.contents.toString('utf-8');
+        },
+        mainFile: (component: Component) => {
+          return component.state._consumer.mainFile;
+        },
+        headTag: (component: Component) => component.headTag?.toObject(),
+        latest: (component: Component) => component.latest,
+        tags: (component) => {
+          // graphql doesn't support map types
+          return component.tags.toArray().map((tag) => tag.toObject());
+        },
+        aspects: (component: Component, { include }: { include?: string[] }) => {
+          return component.state.aspects.filter(include).serialize();
+        },
+        logs: async (
+          component: Component,
+          filter?: {
+            type?: string;
+            offset?: number;
+            limit?: number;
+            head?: string;
+            sort?: string;
+            takeHeadFromComponent: boolean;
+          }
+        ) => {
+          let head = filter?.head;
+          if (!head && filter?.takeHeadFromComponent) {
+            head = component.id.version;
+          }
+          const finalFilter = { ...filter, ...{ head } };
+          return (await component.getLogs(finalFilter)).map((log) => ({ ...log, id: log.hash }));
+        },
+      },
+      ComponentHost: {
+        get: async (host: ComponentFactory, { id }: { id: string }) => {
+          try {
+            const componentId = await host.resolveComponentId(id);
+            const component = await host.get(componentId);
+            return component;
+          } catch (error: any) {
+            return null;
+          }
+        },
+        snaps: async (host: ComponentFactory, { id }: { id: string }) => {
+          const componentId = await host.resolveComponentId(id);
+          // return (await host.getLogs(componentId)).map(log => ({...log, id: log.hash}))
+          return host.getLogs(componentId);
+        },
+        list: async (host: ComponentFactory, filter?: { offset: number; limit: number }) => {
+          return host.list(filter);
+        },
+        listInvalid: async (host: ComponentFactory) => {
+          const invalidComps = await host.listInvalid();
+          return invalidComps.map(({ id, err }) => ({
+            id,
+            errorName: err.name,
+            errorMessage: err.message ? stripAnsi(err.message) : err.name,
+          }));
+        },
+        id: async (host: ComponentFactory) => {
+          return host.name;
+        },
+        name: async (host: ComponentFactory) => {
+          return host.name;
+        },
+      },
+      Query: {
+        getHost: (componentExt: ComponentMain, { id }: { id: string }) => {
+          return componentExtension.getHost(id);
+        },
+      },
+    },
+  };
+}

package/component.main.runtime.ts

@@ -0,0 +1,170 @@
+import { CLIAspect, CLIMain, MainRuntime } from '@teambit/cli';
+import { ExpressAspect, ExpressMain, Route } from '@teambit/express';
+import { GraphqlAspect, GraphqlMain } from '@teambit/graphql';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import { ComponentID } from '@teambit/component-id';
+import { flatten, orderBy } from 'lodash';
+import { ExtensionDataList } from '@teambit/legacy/dist/consumer/config';
+import { ComponentFactory } from './component-factory';
+import { ComponentAspect } from './component.aspect';
+import { componentSchema } from './component.graphql';
+import { ComponentRoute } from './component.route';
+import { AspectList } from './aspect-list';
+import { HostNotFound } from './exceptions';
+import { AspectEntry } from './aspect-entry';
+import {
+  ShowCmd,
+  ShowFragment,
+  NameFragment,
+  MainFileFragment,
+  IDFragment,
+  ScopeFragment,
+  FilesFragment,
+  ExtensionsFragment,
+} from './show';
+import { RegisteredComponentRoute } from '.';
+
+export type ComponentHostSlot = SlotRegistry<ComponentFactory>;
+
+export type ShowFragmentSlot = SlotRegistry<ShowFragment[]>;
+
+export class ComponentMain {
+  constructor(
+    /**
+     * slot for component hosts to register.
+     */
+    private hostSlot: ComponentHostSlot,
+
+    /**
+     * Express Extension
+     */
+    private express: ExpressMain,
+
+    private showFragmentSlot: ShowFragmentSlot
+  ) {}
+
+  /**
+   * register a new component host.
+   */
+  registerHost(host: ComponentFactory) {
+    this.hostSlot.register(host);
+    return this;
+  }
+
+  /**
+   * important! avoid using this method.
+   * seems like this method was written to work around a very specific case when the ComponentID of the aspects are
+   * not available. in case of new components, to get the ComponentID, the workspace-aspect is needed to get the
+   * default-scope. when this method is called from the scope, there is no way to get the real component-id.
+   * instead, this method asks for the "scope", which when called by the scope-aspect is the current scope-name.
+   * it may or may not be the real scope-name of the aspect.
+   * to fix this possibly incorrect scope-name, the `workspace.resolveScopeAspectListIds()` checks whether the
+   * scope-name is the same as scope.name, and if so, resolve it to the correct scope-name.
+   */
+  createAspectListFromLegacy(legacyExtensionDataList: ExtensionDataList) {
+    return AspectList.fromLegacyExtensions(legacyExtensionDataList);
+  }
+
+  createAspectListFromEntries(entries: AspectEntry[]) {
+    return new AspectList(entries);
+  }
+
+  registerRoute(routes: RegisteredComponentRoute[]) {
+    const routeEntries = routes.map((route: RegisteredComponentRoute) => {
+      return new ComponentRoute(route, this);
+    });
+
+    const flattenRoutes = flatten(routeEntries) as any as Route[];
+
+    this.express.register(flattenRoutes);
+    return this;
+  }
+
+  /**
+   * set the prior host.
+   */
+  setHostPriority(id: string) {
+    const host = this.hostSlot.get(id);
+    if (!host) {
+      throw new HostNotFound(id);
+    }
+
+    this._priorHost = host;
+    return this;
+  }
+
+  /**
+   * get component host by extension ID.
+   */
+  getHost(id?: string): ComponentFactory {
+    if (id) {
+      const host = this.hostSlot.get(id);
+      if (!host) throw new HostNotFound(id);
+      return host;
+    }
+
+    return this.getPriorHost();
+  }
+
+  getRoute(id: ComponentID, routeName: string) {
+    return `/api/${id.toString()}/~aspect/${routeName}`;
+  }
+
+  /**
+   * get the prior host.
+   */
+  private getPriorHost() {
+    if (this._priorHost) return this._priorHost;
+
+    const hosts = this.hostSlot.values();
+    const priorityHost = hosts.find((host) => host.priority);
+    return priorityHost || hosts[0];
+  }
+
+  getShowFragments() {
+    const fragments = orderBy(flatten(this.showFragmentSlot.values()), ['weight', ['asc']]);
+    return fragments;
+  }
+
+  isHost(name: string) {
+    return !!this.hostSlot.get(name);
+  }
+
+  /**
+   * register a show fragment to display further information in the `bit show` command.
+   */
+  registerShowFragments(showFragments: ShowFragment[]) {
+    this.showFragmentSlot.register(showFragments);
+    return this;
+  }
+
+  private _priorHost: ComponentFactory | undefined;
+
+  static slots = [Slot.withType<ComponentFactory>(), Slot.withType<Route[]>(), Slot.withType<ShowFragment[]>()];
+
+  static runtime = MainRuntime;
+  static dependencies = [GraphqlAspect, ExpressAspect, CLIAspect];
+
+  static async provider(
+    [graphql, express, cli]: [GraphqlMain, ExpressMain, CLIMain],
+    config,
+    [hostSlot, showFragmentSlot]: [ComponentHostSlot, ShowFragmentSlot]
+  ) {
+    const componentExtension = new ComponentMain(hostSlot, express, showFragmentSlot);
+    cli.register(new ShowCmd(componentExtension));
+
+    componentExtension.registerShowFragments([
+      new NameFragment(),
+      new MainFileFragment(),
+      new IDFragment(),
+      new ScopeFragment(),
+      new FilesFragment(),
+      new ExtensionsFragment(),
+    ]);
+    graphql.register(componentSchema(componentExtension));
+
+    return componentExtension;
+  }
+}
+
+ComponentAspect.addRuntime(ComponentMain);

package/component.route.ts

@@ -0,0 +1,38 @@
+import { NextFunction, Request, Response, Route } from '@teambit/express';
+
+import { ComponentMain } from './component.main.runtime';
+
+export type RegisteredComponentRoute = Route & {
+  resolveComponent?: boolean;
+};
+
+export type ComponentUrlParams = {
+  componentId: string;
+};
+
+export class ComponentRoute implements Route {
+  constructor(private registerRoute: RegisteredComponentRoute, private componentExtension: ComponentMain) {}
+  dynamicRouteRegex = '/?[^/@]+/[^~]*';
+  readonly route = `/:componentId(${this.dynamicRouteRegex})/~aspect${this.registerRoute.route}`;
+
+  get componentMiddlewares() {
+    return [
+      async (req: Request<ComponentUrlParams>, res: Response, next: NextFunction) => {
+        const resolveComponent = this.registerRoute.resolveComponent ?? true;
+        if (resolveComponent) {
+          const { componentId } = req.params;
+          const host = this.componentExtension.getHost();
+          const compId = await host.resolveComponentId(componentId);
+          const component = await host.get(compId);
+          // @ts-ignore
+          req.component = component;
+        }
+        next();
+      },
+    ];
+  }
+
+  method = this.registerRoute.method;
+  // @ts-ignore
+  middlewares = this.componentMiddlewares.concat(this.registerRoute.middlewares);
+}