@teambit/graph 0.0.553 → 0.0.557

package/dist/graph.ui.runtime.d.ts

@@ -6,8 +6,15 @@ export interface ComponentWidgetProps extends React.HTMLAttributes<HTMLDivElemen
 }
 export declare type ComponentWidget = ComponentType<ComponentWidgetProps>;
 export declare type ComponentWidgetSlot = SlotRegistry<ComponentWidget>;
+/**
+ * Presents dependencies graph in the component page
+ */
 export declare class GraphUI {
     private componentWidgetSlot;
+    /**
+     * adds plugins to component nodes
+     * @param value
+     */
     registerComponentWidget(value: ComponentWidget): void;
     constructor(componentWidgetSlot: ComponentWidgetSlot);
     static dependencies: import("@teambit/harmony").Aspect[];

package/dist/ui/dependencies-graph/calc-elements.d.ts

@@ -4,5 +4,8 @@ import { GraphModel } from '../query';
 declare type ElementsOptions = {
     rootNode?: ComponentID;
 };
+/**
+ * generate Nodes and Edges for the ReactFlowRenderer graph renderer
+ */
 export declare function calcElements(graph: GraphModel | undefined, { rootNode }: ElementsOptions): (Node<any> | Edge<any>)[];
 export {};

package/dist/ui/dependencies-graph/calc-layout.d.ts

@@ -1,4 +1,7 @@
 import { GraphModel } from '../query';
+/**
+ * calculate the specific location of each node in the graph
+ */
 export declare function calcLayout(graph: GraphModel): Map<string, {
     x: number;
     y: number;

package/dist/ui/dependencies-graph/graph-context.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ComponentWidgetSlot } from '../../graph.ui.runtime';
+/** internal context, to pass shared information to all nodes */
 export declare type ComponentGraph = {
     componentWidgets: ComponentWidgetSlot;
 };

package/dist/ui/query/use-graph-query.d.ts

@@ -1,5 +1,6 @@
 import { GraphQlError } from '@teambit/graphql';
 import { GraphModel } from './graph-model';
+/** provides dependencies graph data from graphQL */
 export declare function useGraphQuery(componentId: string[], filter?: string): {
     graph: GraphModel | undefined;
     error: GraphQlError | undefined;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graph",
-  "version": "0.0.553",
+  "version": "0.0.557",
   "homepage": "https://bit.dev/teambit/component/graph",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "graph",
-    "version": "0.0.553"
+    "version": "0.0.557"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -23,17 +23,17 @@
     "@teambit/base-ui.text.muted-text": "1.0.1",
     "@teambit/evangelist.input.checkbox.label": "1.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/component": "0.0.553",
-    "@teambit/graphql": "0.0.553",
-    "@teambit/cli": "0.0.384",
-    "@teambit/ui": "0.0.553",
-    "@teambit/legacy-bit-id": "0.0.373",
-    "@teambit/component.ui.deprecation-icon": "0.0.467",
+    "@teambit/component": "0.0.557",
+    "@teambit/graphql": "0.0.557",
+    "@teambit/cli": "0.0.388",
+    "@teambit/ui": "0.0.557",
+    "@teambit/legacy-bit-id": "0.0.377",
+    "@teambit/component.ui.deprecation-icon": "0.0.471",
     "@teambit/design.ui.styles.ellipsis": "0.0.346",
-    "@teambit/envs.ui.env-icon": "0.0.461",
+    "@teambit/envs.ui.env-icon": "0.0.465",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.462"
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.466"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.170",
+    "@teambit/legacy": "1.0.174",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,12 +77,20 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.170",
+        "@teambit/legacy": "1.0.174",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx",
+    "*.js",
+    "*.json"
+  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/tsconfig.json

@@ -15,9 +15,9 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "outDir": "dist",
     "composite": true,
     "emitDeclarationOnly": true,
+    "outDir": "dist",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,
@@ -25,7 +25,6 @@
     "strict": true,
     "noImplicitAny": false,
     "rootDir": ".",
-    "removeComments": true,
     "preserveConstEnums": true,
     "resolveJsonModule": true
   },

package/component-graph/component-graph.ts

@@ -1,105 +0,0 @@
-import { Component } from '@teambit/component';
-import { Graph } from 'cleargraph';
-
-import { Dependency } from '../model/dependency';
-import { DuplicateDependency, VersionSubgraph } from '../duplicate-dependency';
-
-export const DEPENDENCIES_TYPES = ['dependencies', 'devDependencies'];
-
-type Node = { id: string; node: Component };
-type Edge = { sourceId: string; targetId: string; edge: Dependency };
-
-export class ComponentGraph extends Graph<Component, Dependency> {
-  versionMap: Map<string, { allVersionNodes: string[]; latestVersionNode: string }>;
-  constructor(nodes: Node[] = [], edges: Edge[] = []) {
-    super(nodes, edges);
-    this.versionMap = new Map();
-  }
-
-  protected create(nodes: Node[] = [], edges: Edge[] = []): this {
-    return new ComponentGraph(nodes, edges) as this;
-  }
-
-  findDuplicateDependencies(): Map<string, DuplicateDependency> {
-    const duplicateDependencies: Map<string, DuplicateDependency> = new Map();
-    for (const [compFullName, versions] of this.versionMap) {
-      if (versions.allVersionNodes.length > 1) {
-        const versionSubgraphs: VersionSubgraph[] = [];
-        const notLatestVersions = versions.allVersionNodes.filter((version) => version !== versions.latestVersionNode);
-        notLatestVersions.forEach((version) => {
-          const predecessors = this.predecessorsSubgraph(version);
-          const immediatePredecessors = this.predecessors(version).map((predecessor) => predecessor.id);
-          const subGraph = this.buildFromCleargraph(predecessors);
-          const versionSubgraph: VersionSubgraph = {
-            versionId: version,
-            subGraph,
-            // TODO: validate that this is working correctly
-            immediateDependents: immediatePredecessors,
-          };
-          versionSubgraphs.push(versionSubgraph);
-        });
-        if (versionSubgraphs.length > 0) {
-          const duplicateDep = new DuplicateDependency(versions.latestVersionNode, versionSubgraphs);
-          duplicateDependencies.set(compFullName, duplicateDep);
-        }
-      }
-    }
-    return duplicateDependencies;
-  }
-
-  buildFromCleargraph(graph: Graph<Component, Dependency>): ComponentGraph {
-    // TODO: once cleargraph constructor and graph.nodes are consistent we should just use this line
-    // this.create(graph.nodes, graph.edges)
-
-    const newGraph = new ComponentGraph();
-    const newGraphNodes: Node[] = graph.nodes.map((node) => {
-      return {
-        id: node.id,
-        node: node.attr,
-      };
-    });
-    const newGraphEdges: Edge[] = graph.edges.map((edge) => {
-      return {
-        sourceId: edge.sourceId,
-        targetId: edge.targetId,
-        edge: edge.attr,
-      };
-    });
-    newGraph.setNodes(newGraphNodes);
-    newGraph.setEdges(newGraphEdges);
-
-    return newGraph;
-  }
-
-  runtimeOnly(componentIds: string[]) {
-    return this.successorsSubgraph(componentIds, (edge) => edge.attr.type === 'runtime');
-  }
-
-  _calculateVersionMap() {
-    const versionMap: Map<string, { allVersionNodes: string[]; latestVersionNode: string }> = new Map();
-    for (const node of this.nodes) {
-      const comp = node.attr;
-      const compKey = node.id;
-      const compFullName = comp.id._legacy.toStringWithoutVersion();
-      if (!versionMap.has(compFullName)) {
-        versionMap.set(compFullName, {
-          allVersionNodes: [compKey],
-          latestVersionNode: compKey,
-        });
-      } else {
-        const value = versionMap.get(compFullName);
-        if (value) {
-          if (Object.prototype.hasOwnProperty.call(value, 'allVersionNodes')) {
-            value.allVersionNodes.push(compKey);
-          }
-          const currentCompVersion = this.node(compKey)?.attr.id._legacy.getVersion();
-          const latestCompVersion = this.node(value.latestVersionNode)?.attr.id._legacy.getVersion();
-          if (!!currentCompVersion && !!latestCompVersion && currentCompVersion.isLaterThan(latestCompVersion)) {
-            value.latestVersionNode = compKey;
-          }
-        }
-      }
-    }
-    return versionMap;
-  }
-}

package/component-graph/index.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/no-cycle
-export { ComponentGraph } from './component-graph';

package/duplicate-dependency.ts

@@ -1,18 +0,0 @@
-// eslint-disable-next-line import/no-cycle
-import type { ComponentGraph } from './component-graph';
-
-export class DuplicateDependency {
-  latestVersionId: string;
-  priorVersions: VersionSubgraph[];
-
-  constructor(latestVersionId: string, priorVersions: VersionSubgraph[]) {
-    this.latestVersionId = latestVersionId;
-    this.priorVersions = priorVersions;
-  }
-}
-
-export type VersionSubgraph = {
-  versionId: string;
-  subGraph: ComponentGraph;
-  immediateDependents: string[];
-};

package/edge-type.ts

@@ -1,5 +0,0 @@
-export enum EdgeType {
-  dev = 'DEV',
-  runtime = 'RUNTIME',
-  peer = 'PEER',
-}

package/graph-builder.ts

@@ -1,56 +0,0 @@
-import { ComponentFactory, ComponentID, ComponentMain } from '@teambit/component';
-import type LegacyGraph from '@teambit/legacy/dist/scope/graph/graph';
-import { ComponentGraph } from './component-graph';
-import { Dependency } from './model/dependency';
-
-type GetGraphOpts = {
-  host?: ComponentFactory;
-};
-
-type BuildFromLegacyGraphOpts = {
-  host?: ComponentFactory;
-};
-export class GraphBuilder {
-  _graph?: ComponentGraph;
-  _initialized = false;
-  constructor(private componentAspect: ComponentMain) {}
-
-  async getGraph(ids?: ComponentID[], opts: GetGraphOpts = {}): Promise<ComponentGraph> {
-    const componentHost = opts.host || this.componentAspect.getHost();
-
-    const legacyGraph = await componentHost.getLegacyGraph(ids);
-    const graph = await this.buildFromLegacy(legacyGraph, { host: opts.host });
-    this._graph = graph;
-    this._initialized = true;
-    return this._graph;
-  }
-
-  private async buildFromLegacy(
-    legacyGraph: LegacyGraph,
-    opts: BuildFromLegacyGraphOpts = {}
-  ): Promise<ComponentGraph> {
-    const newGraph = new ComponentGraph();
-    const componentHost = opts.host || this.componentAspect.getHost();
-
-    const setNodeP = legacyGraph.nodes().map(async (nodeId) => {
-      const componentId = await componentHost.resolveComponentId(nodeId);
-      const component = await componentHost.get(componentId);
-      if (component) {
-        newGraph.setNode(componentId.toString(), component);
-      }
-    });
-    await Promise.all(setNodeP);
-
-    const setEdgePromise = legacyGraph.edges().map(async (edgeId) => {
-      const source = await componentHost.resolveComponentId(edgeId.v);
-      const target = await componentHost.resolveComponentId(edgeId.w);
-      const edgeObj =
-        legacyGraph.edge(edgeId.v, edgeId.w) === 'dependencies' ? new Dependency('runtime') : new Dependency('dev');
-      newGraph.setEdge(source.toString(), target.toString(), edgeObj);
-    });
-    await Promise.all(setEdgePromise);
-
-    newGraph.versionMap = newGraph._calculateVersionMap();
-    return newGraph;
-  }
-}

package/graph.aspect.ts

@@ -1,7 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const GraphAspect = Aspect.create({
-  id: 'teambit.component/graph',
-  dependencies: [],
-  defaultConfig: {},
-});

package/graph.docs.md

@@ -1,7 +0,0 @@
----
-description: Generate Bit component dependency graphs.
-labels: ['dependency', 'graph', 'component', 'bit']
----
-
-This is an extension that knows to build a graph of components from a component or a list of components.
-It uses the component-resolver extension in order to resolve the component dependencies during the graph building.

package/graph.graphql.ts

@@ -1,94 +0,0 @@
-import { ComponentMain } from '@teambit/component';
-import { Schema } from '@teambit/graphql';
-import gql from 'graphql-tag';
-
-import { GraphBuilder } from './graph-builder';
-import { ComponentGraph } from './component-graph';
-import { GraphFilter } from './model/graph-filters';
-import { DependencyType } from './model/dependency';
-import { EdgeType } from './edge-type';
-
-const textCmp = new Intl.Collator().compare;
-
-export function graphSchema(graphBuilder: GraphBuilder, componentAspect: ComponentMain): Schema {
-  return {
-    typeDefs: gql`
-      type ComponentGraph {
-        nodes: [ComponentGraphNode]
-        edges: [ComponentGraphEdge]
-      }
-
-      type ComponentGraphNode {
-        id: String
-        component: Component
-      }
-
-      enum DependencyLifecycleType {
-        PEER
-        RUNTIME
-        DEV
-      }
-
-      type ComponentGraphEdge {
-        sourceId: String
-        targetId: String
-        dependencyLifecycleType: DependencyLifecycleType
-      }
-
-      extend type Query {
-        graph(ids: [String], filter: String): ComponentGraph
-      }
-    `,
-    resolvers: {
-      ComponentGraph: {
-        nodes: (graph: ComponentGraph) => {
-          return graph.nodes
-            .map((node) => {
-              return {
-                id: node.id,
-                component: node.attr,
-              };
-            })
-            .sort((a, b) => textCmp(a.id, b.id));
-        },
-        edges: (graph: ComponentGraph) => {
-          return graph.edges
-            .map(
-              (edge) =>
-                ({
-                  sourceId: edge.sourceId,
-                  targetId: edge.targetId,
-                  dependencyLifecycleType: getDependencyLifecycleType(edge.attr.type),
-                } as { sourceId: string; targetId: string; dependencyLifecycleType: EdgeType })
-            )
-            .sort((a, b) => textCmp(a.sourceId, b.sourceId))
-            .sort((a, b) => textCmp(a.targetId, b.targetId));
-        },
-      },
-      Query: {
-        graph: async (_parent, { ids, filter }: { ids?: string[]; filter?: GraphFilter }) => {
-          const componentsHost = componentAspect.getHost();
-          const resolvedIds = ids
-            ? await componentsHost.resolveMultipleComponentIds(ids)
-            : (await componentsHost.list()).map((x) => x.id);
-
-          const graph = await graphBuilder.getGraph(resolvedIds);
-          if (!graph) return undefined;
-
-          if (filter === 'runtimeOnly') {
-            const runtimeGraph = graph.runtimeOnly(resolvedIds.map((x) => x.toString()));
-            return runtimeGraph;
-          }
-
-          return graph;
-        },
-      },
-    },
-  };
-}
-
-function getDependencyLifecycleType(edgeRawData: DependencyType): EdgeType {
-  if (edgeRawData === 'dev') return EdgeType.dev;
-  if (edgeRawData === 'runtime') return EdgeType.runtime;
-  return EdgeType.peer;
-}

package/graph.main.runtime.ts

@@ -1,15 +0,0 @@
-import { MainRuntime } from '@teambit/cli';
-import GraphqlAspect from '@teambit/graphql';
-import { ComponentAspect } from '@teambit/component';
-
-import { GraphAspect } from './graph.aspect';
-import { provide } from './graph.provider';
-
-export const GraphMain = {
-  name: 'graph',
-  runtime: MainRuntime,
-  dependencies: [GraphqlAspect, ComponentAspect],
-  provider: provide,
-};
-
-GraphAspect.addRuntime(GraphMain);

package/graph.provider.ts

@@ -1,14 +0,0 @@
-import { GraphqlMain } from '@teambit/graphql';
-import { ComponentMain } from '@teambit/component';
-
-import { GraphBuilder } from './graph-builder';
-import { graphSchema } from './graph.graphql';
-
-export type GraphDeps = [GraphqlMain, ComponentMain];
-
-export async function provide([graphql, componentAspect]: GraphDeps): Promise<GraphBuilder> {
-  const graphBuilder = new GraphBuilder(componentAspect);
-  // TODO: make sure it's working (the host here might be undefined?)
-  graphql.register(graphSchema(graphBuilder, componentAspect));
-  return graphBuilder;
-}

package/graph.ui.runtime.tsx

@@ -1,41 +0,0 @@
-import { ComponentType } from 'react';
-import { UIRuntime } from '@teambit/ui';
-import { Slot, SlotRegistry } from '@teambit/harmony';
-
-import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';
-import { GraphAspect } from './graph.aspect';
-import { GraphSection } from './ui/graph.section';
-
-export interface ComponentWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
-  component: ComponentModel;
-}
-export type ComponentWidget = ComponentType<ComponentWidgetProps>;
-export type ComponentWidgetSlot = SlotRegistry<ComponentWidget>;
-
-/**
- * Presents dependencies graph in the component page
- */
-export class GraphUI {
-  /**
-   * adds plugins to component nodes
-   * @param value
-   */
-  registerComponentWidget(value: ComponentWidget) {
-    this.componentWidgetSlot.register(value);
-  }
-
-  constructor(private componentWidgetSlot: ComponentWidgetSlot) {}
-  static dependencies = [ComponentAspect];
-  static runtime = UIRuntime;
-  static slots = [Slot.withType<ComponentWidget>()];
-  static async provider([componentUI]: [ComponentUI], config, [componentWidgetSlot]: [ComponentWidgetSlot]) {
-    const graphUI = new GraphUI(componentWidgetSlot);
-    const section = new GraphSection(componentWidgetSlot);
-    componentUI.registerNavigation(section.navigationLink, section.order);
-    componentUI.registerRoute(section.route);
-
-    return graphUI;
-  }
-}
-
-GraphAspect.addRuntime(GraphUI);

package/index.ts

@@ -1,11 +0,0 @@
-export { GraphAspect as default, GraphAspect } from './graph.aspect';
-
-export { Dependency } from './model/dependency';
-export { DuplicateDependency, VersionSubgraph } from './duplicate-dependency';
-export type { ComponentGraph } from './component-graph';
-export type { GraphBuilder } from './graph-builder';
-export type { GraphMain } from './graph.main.runtime';
-export { EdgeType } from './edge-type';
-export type { GraphUI, ComponentWidget, ComponentWidgetSlot, ComponentWidgetProps } from './graph.ui.runtime';
-export { useGraph, useGraphQuery, GraphModel, EdgeModel, NodeModel } from './ui/query';
-export { objectListToGraph, IdGraph } from './object-list-to-graph';

package/model/dependency/dependency.ts

@@ -1,11 +0,0 @@
-export type DependencyType = 'dev' | 'peer' | 'runtime';
-
-export class Dependency {
-  readonly type: DependencyType;
-  constructor(type: DependencyType) {
-    this.type = type;
-  }
-  stringify(): string {
-    return this.type;
-  }
-}

package/model/dependency/index.ts

@@ -1 +0,0 @@
-export { Dependency, DependencyType } from './dependency';

package/model/graph-filters/graph-filters.ts

@@ -1 +0,0 @@
-export type GraphFilter = 'runtimeOnly' | undefined;

package/model/graph-filters/index.ts

@@ -1 +0,0 @@
-export type { GraphFilter } from './graph-filters';

package/object-list-to-graph.ts

@@ -1,54 +0,0 @@
-import { Graph } from 'cleargraph';
-import { uniqBy } from 'lodash';
-import { BitId } from '@teambit/legacy-bit-id';
-import { ObjectList } from '@teambit/legacy/dist/scope/objects/object-list';
-import { getAllVersionsInfo } from '@teambit/legacy/dist/scope/component-ops/traverse-versions';
-import { Dependency } from './model/dependency';
-
-type Node = { id: string; node: BitId };
-type Edge = { sourceId: string; targetId: string; edge: Dependency };
-
-export class IdGraph extends Graph<BitId, Dependency> {
-  constructor(nodes: Node[] = [], edges: Edge[] = []) {
-    super(nodes, edges);
-  }
-}
-
-export async function objectListToGraph(objectList: ObjectList): Promise<IdGraph> {
-  const bitObjectsList = await objectList.toBitObjects();
-  const components = bitObjectsList.getComponents();
-  const versions = bitObjectsList.getVersions();
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-  await Promise.all(
-    components.map(async (component) => {
-      const versionsInfo = await getAllVersionsInfo({
-        modelComponent: component,
-        versionObjects: versions,
-        throws: false,
-      });
-      versionsInfo.forEach((versionInfo) => {
-        const id = component.toBitId().changeVersion(versionInfo.tag || versionInfo.ref.toString());
-        const idStr = id.toString();
-        nodes.push({ id: idStr, node: id });
-        if (!versionInfo.version) {
-          return;
-        }
-        const { dependencies, devDependencies, extensionDependencies } = versionInfo.version.depsIdsGroupedByType;
-        const addDep = (depId: BitId, edge: Dependency) => {
-          const depIdStr = depId.toString();
-          nodes.push({ id: depIdStr, node: depId });
-          edges.push({ sourceId: idStr, targetId: depIdStr, edge });
-        };
-        const runTime = new Dependency('runtime');
-        const dev = new Dependency('dev');
-        dependencies.forEach((depId) => addDep(depId, runTime));
-        [...devDependencies, ...extensionDependencies].forEach((depId) => addDep(depId, dev));
-      });
-    })
-  );
-  const uniqNodes = uniqBy(nodes, 'id');
-  const idGraph = new IdGraph(uniqNodes, edges);
-
-  return idGraph;
-}

package/types/asset.d.ts

@@ -1,29 +0,0 @@
-declare module '*.png' {
-  const value: any;
-  export = value;
-}
-declare module '*.svg' {
-  import type { FunctionComponent, SVGProps } from 'react';
-
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
-  const src: string;
-  export default src;
-}
-
-// @TODO Gilad
-declare module '*.jpg' {
-  const value: any;
-  export = value;
-}
-declare module '*.jpeg' {
-  const value: any;
-  export = value;
-}
-declare module '*.gif' {
-  const value: any;
-  export = value;
-}
-declare module '*.bmp' {
-  const value: any;
-  export = value;
-}