@teambit/component-compare 1.0.1080 → 1.0.1082

package/component-compare.ui.runtime.tsx

@@ -5,7 +5,6 @@ import type { Harmony, SlotRegistry } from '@teambit/harmony';
 import { Slot } from '@teambit/harmony';
 import type { ComponentUI } from '@teambit/component';
 import { ComponentAspect } from '@teambit/component';
-import { ComponentCompare } from '@teambit/component.ui.component-compare.component-compare';
 import { UIRuntime } from '@teambit/ui';
 import type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import type {
@@ -14,41 +13,50 @@ import type {
 } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import { ComponentCompareChangelog } from '@teambit/component.ui.component-compare.changelog';
 import { ComponentCompareAspects } from '@teambit/component.ui.component-compare.compare-aspects.compare-aspects';
+import type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';
 import { AspectsCompareSection } from './component-compare-aspects.section';
 import { ComponentCompareAspect } from './component-compare.aspect';
 import { ComponentCompareSection } from './component-compare.section';
 import { CompareChangelogSection } from './component-compare-changelog.section';
+import { ComponentComparePage } from './component-compare-page';
 
 export type ComponentCompareNav = Array<TabItem>;
 export type ComponentCompareNavSlot = SlotRegistry<ComponentCompareNav>;
+
+export type ComponentCompareTabSlot = SlotRegistry<TabItem | TabItem[]>;
+
+export type ApiDiffInsightSlot = SlotRegistry<ApiDiffInsight | ApiDiffInsight[]>;
+
 export class ComponentCompareUI {
   constructor(
     private host: string,
     private navSlot: ComponentCompareNavSlot,
     private routeSlot: RouteSlot,
+    private compareTabSlot: ComponentCompareTabSlot,
+    private apiDiffInsightSlot: ApiDiffInsightSlot,
     private compUI: ComponentUI
   ) {}
 
   static runtime = UIRuntime;
 
-  static slots = [Slot.withType<ComponentCompareNavSlot>(), Slot.withType<RouteSlot>()];
+  static slots = [
+    Slot.withType<ComponentCompareNavSlot>(),
+    Slot.withType<RouteSlot>(),
+    Slot.withType<TabItem | TabItem[]>(),
+    Slot.withType<ApiDiffInsight | ApiDiffInsight[]>(),
+  ];
 
   static dependencies = [ComponentAspect];
 
   getComponentComparePage = (props?: ComponentCompareProps & { pinned?: boolean }) => {
-    const tabs = props?.tabs || (() => flatten(this.navSlot.values()));
-    const routes = props?.routes || (() => flatten(this.routeSlot.values()));
+    const tabs = props?.tabs || (() => this.resolveCompareTabs());
     const host = props?.host || this.host;
-
-    return (
-      <ComponentCompare
-        {...(props || {})}
-        tabs={tabs}
-        routes={routes}
-        host={host}
-        isFullScreen={props?.isFullScreen ?? true}
-      />
-    );
+    // The API compare tab is contributed by the api-reference aspect via `registerNavigation`
+    // (navSlot), which the redesign page's view-mode toolbar doesn't read. Hand it the API element
+    // lazily so it's resolved at render time — after every aspect's UI provider has registered,
+    // regardless of provider order — and rendered as a page-local `api` view mode.
+    const getApiTab = () => this.tabs.find((tab) => tab.id === 'api')?.element;
+    return <ComponentComparePage tabs={tabs} host={host} getApiTab={getApiTab} />;
   };
 
   getAspectsComparePage = () => {
@@ -73,6 +81,68 @@ export class ComponentCompareUI {
     return this;
   }
 
+  /**
+   * Register an inline-compare tab. The tab's `id` should match the new toolbar view-mode ids
+   * (`inline-code`, `inline-preview`, `inline-docs`, `inline-deps`, `inline-tests`, `inline-config`).
+   * Used by both the single-component compare page and lane-compare.
+   */
+  registerCompareTab(tab: TabItem | TabItem[]) {
+    this.compareTabSlot.register(tab);
+    return this;
+  }
+
+  /**
+   * contribute intelligence to the API diff view: per-change renderers for migration
+   * hints, affected dependents, codemods, etc. rendered in each change block's
+   * insights area (lane compare API view and the single-component API tab).
+   */
+  registerApiDiffInsight(insight: ApiDiffInsight | ApiDiffInsight[]) {
+    this.apiDiffInsightSlot.register(insight);
+    return this;
+  }
+
+  private _resolvedApiDiffInsights?: ApiDiffInsight[];
+  private _resolvedApiDiffInsightsKey?: number;
+  /**
+   * Memoized by slot-entry count (mirroring `resolveCompareTabs`) so the returned array keeps a
+   * stable identity across renders — `LaneCompare` is React.memo'd, and a fresh array on every
+   * call would break its shallow compare and re-render the whole compare tree.
+   */
+  getApiDiffInsights(): ApiDiffInsight[] {
+    const slotEntries = this.apiDiffInsightSlot.toArray();
+    if (this._resolvedApiDiffInsights && this._resolvedApiDiffInsightsKey === slotEntries.length) {
+      return this._resolvedApiDiffInsights;
+    }
+    this._resolvedApiDiffInsights = flatten(
+      slotEntries.map(([, value]) => value) as Array<ApiDiffInsight | ApiDiffInsight[]>
+    );
+    this._resolvedApiDiffInsightsKey = slotEntries.length;
+    return this._resolvedApiDiffInsights;
+  }
+
+  private _resolvedCompareTabs?: TabItem[];
+  private _resolvedCompareTabsKey?: number;
+  /**
+   * Resolve the inline-compare tabs that aspects register via `registerCompareTab` (code →
+   * inline-code/deps/tests/config, compositions → inline-preview, docs → inline-docs, …). Dedup by
+   * id (first registration wins), sort by order. Memoized by slot-entry count so the resolved list
+   * keeps a stable identity across renders. Owning each tab in its aspect keeps component-compare
+   * decoupled from code/preview/docs UI; single-component compare and lane-compare both read this.
+   */
+  resolveCompareTabs(): TabItem[] {
+    const slotEntries = this.compareTabSlot.toArray();
+    if (this._resolvedCompareTabs && this._resolvedCompareTabsKey === slotEntries.length) {
+      return this._resolvedCompareTabs;
+    }
+    const registered = flatten(slotEntries.map(([, value]) => value).filter(Boolean) as Array<TabItem | TabItem[]>);
+    const seen = new Set<string>();
+    const deduped = registered.filter((tab) => (seen.has(tab.id) ? false : (seen.add(tab.id), true)));
+    const merged = deduped.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    this._resolvedCompareTabs = merged;
+    this._resolvedCompareTabsKey = slotEntries.length;
+    return merged;
+  }
+
   get routes() {
     return this.routeSlot.map;
   }
@@ -106,12 +176,24 @@ export class ComponentCompareUI {
   static async provider(
     [componentUi]: [ComponentUI],
     _,
-    [navSlot, routeSlot]: [ComponentCompareNavSlot, RouteSlot],
+    [navSlot, routeSlot, compareTabSlot, apiDiffInsightSlot]: [
+      ComponentCompareNavSlot,
+      RouteSlot,
+      ComponentCompareTabSlot,
+      ApiDiffInsightSlot,
+    ],
     harmony: Harmony
   ) {
     const { config } = harmony;
     const host = String(config.get('teambit.harmony/bit'));
-    const componentCompareUI = new ComponentCompareUI(host, navSlot, routeSlot, componentUi);
+    const componentCompareUI = new ComponentCompareUI(
+      host,
+      navSlot,
+      routeSlot,
+      compareTabSlot,
+      apiDiffInsightSlot,
+      componentUi
+    );
     const componentCompareSection = new ComponentCompareSection(componentCompareUI, false);
     const pinnedComponentCompareSection = new ComponentCompareSection(componentCompareUI, true);
     componentUi.registerRoute([componentCompareSection.route]);

package/dist/compare-component-pairs.d.ts

@@ -0,0 +1,20 @@
+export type ComponentComparePair = {
+    baseId: string;
+    compareId: string;
+};
+export type CompareComponentPairsOptions = {
+    /** index into `pairs` to start from (default 0) */
+    offset?: number;
+    /** number of pairs to process from `offset` (default: the rest of the list) */
+    limit?: number;
+    /** max number of pairs compared in parallel */
+    concurrency: number;
+    /** invoked when a single pair's comparison throws; that pair's slot becomes null */
+    onError?: (pair: ComponentComparePair, err: unknown) => void;
+};
+/**
+ * compares a paginated slice of component pairs with bounded concurrency.
+ * a pair whose `compareFn` throws becomes `null` in the result instead of failing the whole batch.
+ * the returned array is aligned to the requested slice (`pairs[offset .. offset + limit]`).
+ */
+export declare function compareComponentPairs<T>(pairs: ComponentComparePair[], compareFn: (baseId: string, compareId: string) => Promise<T>, options: CompareComponentPairsOptions): Promise<Array<T | null>>;

package/dist/compare-component-pairs.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compareComponentPairs = compareComponentPairs;
+function _pMap() {
+  const data = _interopRequireDefault(require("p-map"));
+  _pMap = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * compares a paginated slice of component pairs with bounded concurrency.
+ * a pair whose `compareFn` throws becomes `null` in the result instead of failing the whole batch.
+ * the returned array is aligned to the requested slice (`pairs[offset .. offset + limit]`).
+ */
+async function compareComponentPairs(pairs, compareFn, options) {
+  const offset = options.offset ?? 0;
+  const limit = options.limit ?? pairs.length - offset;
+  const slice = pairs.slice(offset, offset + limit);
+  return (0, _pMap().default)(slice, async pair => {
+    try {
+      return await compareFn(pair.baseId, pair.compareId);
+    } catch (err) {
+      options.onError?.(pair, err);
+      return null;
+    }
+  }, {
+    concurrency: options.concurrency
+  });
+}
+
+//# sourceMappingURL=compare-component-pairs.js.map

package/dist/compare-component-pairs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_pMap","data","_interopRequireDefault","require","e","__esModule","default","compareComponentPairs","pairs","compareFn","options","offset","limit","length","slice","pMap","pair","baseId","compareId","err","onError","concurrency"],"sources":["compare-component-pairs.ts"],"sourcesContent":["import pMap from 'p-map';\n\nexport type ComponentComparePair = {\n  baseId: string;\n  compareId: string;\n};\n\nexport type CompareComponentPairsOptions = {\n  /** index into `pairs` to start from (default 0) */\n  offset?: number;\n  /** number of pairs to process from `offset` (default: the rest of the list) */\n  limit?: number;\n  /** max number of pairs compared in parallel */\n  concurrency: number;\n  /** invoked when a single pair's comparison throws; that pair's slot becomes null */\n  onError?: (pair: ComponentComparePair, err: unknown) => void;\n};\n\n/**\n * compares a paginated slice of component pairs with bounded concurrency.\n * a pair whose `compareFn` throws becomes `null` in the result instead of failing the whole batch.\n * the returned array is aligned to the requested slice (`pairs[offset .. offset + limit]`).\n */\nexport async function compareComponentPairs<T>(\n  pairs: ComponentComparePair[],\n  compareFn: (baseId: string, compareId: string) => Promise<T>,\n  options: CompareComponentPairsOptions\n): Promise<Array<T | null>> {\n  const offset = options.offset ?? 0;\n  const limit = options.limit ?? pairs.length - offset;\n  const slice = pairs.slice(offset, offset + limit);\n\n  return pMap(\n    slice,\n    async (pair): Promise<T | null> => {\n      try {\n        return await compareFn(pair.baseId, pair.compareId);\n      } catch (err) {\n        options.onError?.(pair, err);\n        return null;\n      }\n    },\n    { concurrency: options.concurrency }\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,MAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,KAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyB,SAAAC,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBzB;AACA;AACA;AACA;AACA;AACO,eAAeG,qBAAqBA,CACzCC,KAA6B,EAC7BC,SAA4D,EAC5DC,OAAqC,EACX;EAC1B,MAAMC,MAAM,GAAGD,OAAO,CAACC,MAAM,IAAI,CAAC;EAClC,MAAMC,KAAK,GAAGF,OAAO,CAACE,KAAK,IAAIJ,KAAK,CAACK,MAAM,GAAGF,MAAM;EACpD,MAAMG,KAAK,GAAGN,KAAK,CAACM,KAAK,CAACH,MAAM,EAAEA,MAAM,GAAGC,KAAK,CAAC;EAEjD,OAAO,IAAAG,eAAI,EACTD,KAAK,EACL,MAAOE,IAAI,IAAwB;IACjC,IAAI;MACF,OAAO,MAAMP,SAAS,CAACO,IAAI,CAACC,MAAM,EAAED,IAAI,CAACE,SAAS,CAAC;IACrD,CAAC,CAAC,OAAOC,GAAG,EAAE;MACZT,OAAO,CAACU,OAAO,GAAGJ,IAAI,EAAEG,GAAG,CAAC;MAC5B,OAAO,IAAI;IACb;EACF,CAAC,EACD;IAAEE,WAAW,EAAEX,OAAO,CAACW;EAAY,CACrC,CAAC;AACH","ignoreList":[]}

package/dist/compare-component-pairs.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/compare-component-pairs.spec.js

@@ -0,0 +1,94 @@
+"use strict";
+
+function _chai() {
+  const data = require("chai");
+  _chai = function () {
+    return data;
+  };
+  return data;
+}
+function _compareComponentPairs() {
+  const data = require("./compare-component-pairs");
+  _compareComponentPairs = function () {
+    return data;
+  };
+  return data;
+}
+describe('compareComponentPairs', () => {
+  const pairs = [{
+    baseId: 'a@1',
+    compareId: 'a@2'
+  }, {
+    baseId: 'b@1',
+    compareId: 'b@2'
+  }, {
+    baseId: 'c@1',
+    compareId: 'c@2'
+  }];
+  it('returns one result per pair, preserving order', async () => {
+    const results = await (0, _compareComponentPairs().compareComponentPairs)(pairs, async (baseId, compareId) => ({
+      id: `${baseId}-${compareId}`
+    }), {
+      concurrency: 2
+    });
+    (0, _chai().expect)(results).to.deep.equal([{
+      id: 'a@1-a@2'
+    }, {
+      id: 'b@1-b@2'
+    }, {
+      id: 'c@1-c@2'
+    }]);
+  });
+  it('slices by offset and limit', async () => {
+    const results = await (0, _compareComponentPairs().compareComponentPairs)(pairs, async baseId => ({
+      id: baseId
+    }), {
+      offset: 1,
+      limit: 1,
+      concurrency: 2
+    });
+    (0, _chai().expect)(results).to.deep.equal([{
+      id: 'b@1'
+    }]);
+  });
+  it('returns an empty array when offset is past the end', async () => {
+    const results = await (0, _compareComponentPairs().compareComponentPairs)(pairs, async b => ({
+      id: b
+    }), {
+      offset: 99,
+      concurrency: 2
+    });
+    (0, _chai().expect)(results).to.deep.equal([]);
+  });
+  it('isolates a failing pair as null without failing the others', async () => {
+    const errors = [];
+    const results = await (0, _compareComponentPairs().compareComponentPairs)(pairs, async baseId => {
+      if (baseId === 'b@1') throw new Error('no version yet');
+      return {
+        id: baseId
+      };
+    }, {
+      concurrency: 2,
+      onError: pair => errors.push(pair)
+    });
+    (0, _chai().expect)(results).to.deep.equal([{
+      id: 'a@1'
+    }, null, {
+      id: 'c@1'
+    }]);
+    (0, _chai().expect)(errors).to.deep.equal([{
+      baseId: 'b@1',
+      compareId: 'b@2'
+    }]);
+  });
+  it('returns an empty array for empty input', async () => {
+    const results = await (0, _compareComponentPairs().compareComponentPairs)([], async b => ({
+      id: b
+    }), {
+      concurrency: 2
+    });
+    (0, _chai().expect)(results).to.deep.equal([]);
+  });
+});
+
+//# sourceMappingURL=compare-component-pairs.spec.js.map

package/dist/compare-component-pairs.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_chai","data","require","_compareComponentPairs","describe","pairs","baseId","compareId","it","results","compareComponentPairs","id","concurrency","expect","to","deep","equal","offset","limit","b","errors","Error","onError","pair","push"],"sources":["compare-component-pairs.spec.ts"],"sourcesContent":["import { expect } from 'chai';\nimport { compareComponentPairs } from './compare-component-pairs';\nimport type { ComponentComparePair } from './compare-component-pairs';\n\ndescribe('compareComponentPairs', () => {\n  const pairs: ComponentComparePair[] = [\n    { baseId: 'a@1', compareId: 'a@2' },\n    { baseId: 'b@1', compareId: 'b@2' },\n    { baseId: 'c@1', compareId: 'c@2' },\n  ];\n\n  it('returns one result per pair, preserving order', async () => {\n    const results = await compareComponentPairs(\n      pairs,\n      async (baseId, compareId) => ({ id: `${baseId}-${compareId}` }),\n      { concurrency: 2 }\n    );\n    expect(results).to.deep.equal([{ id: 'a@1-a@2' }, { id: 'b@1-b@2' }, { id: 'c@1-c@2' }]);\n  });\n\n  it('slices by offset and limit', async () => {\n    const results = await compareComponentPairs(pairs, async (baseId) => ({ id: baseId }), {\n      offset: 1,\n      limit: 1,\n      concurrency: 2,\n    });\n    expect(results).to.deep.equal([{ id: 'b@1' }]);\n  });\n\n  it('returns an empty array when offset is past the end', async () => {\n    const results = await compareComponentPairs(pairs, async (b) => ({ id: b }), {\n      offset: 99,\n      concurrency: 2,\n    });\n    expect(results).to.deep.equal([]);\n  });\n\n  it('isolates a failing pair as null without failing the others', async () => {\n    const errors: ComponentComparePair[] = [];\n    const results = await compareComponentPairs(\n      pairs,\n      async (baseId) => {\n        if (baseId === 'b@1') throw new Error('no version yet');\n        return { id: baseId };\n      },\n      {\n        concurrency: 2,\n        onError: (pair) => errors.push(pair),\n      }\n    );\n    expect(results).to.deep.equal([{ id: 'a@1' }, null, { id: 'c@1' }]);\n    expect(errors).to.deep.equal([{ baseId: 'b@1', compareId: 'b@2' }]);\n  });\n\n  it('returns an empty array for empty input', async () => {\n    const results = await compareComponentPairs([], async (b) => ({ id: b }), { concurrency: 2 });\n    expect(results).to.deep.equal([]);\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/component-compare-page.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+export type ComponentComparePageProps = {
+    host: string;
+    tabs: TabItem[] | (() => TabItem[]);
+    /**
+     * Lazily resolves the API compare element (contributed by the api-reference aspect). Resolved at
+     * render — not construction — so it doesn't depend on UI-provider registration order. When it
+     * yields an element, the page exposes an `api` view mode; the element is only mounted while that
+     * view is active, so its diff query fires on-demand.
+     */
+    getApiTab?: () => React.ReactNode;
+    className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function ComponentComparePage({ host: hostFromProps, tabs, getApiTab, className, ...rest }: ComponentComparePageProps): React.JSX.Element;