@teambit/component 0.0.747 → 0.0.750

package/dist/ui/component-model/component-model.d.ts

@@ -27,6 +27,7 @@ export declare type ComponentModelProps = {
 };
 export declare type ComponentPreview = {
     includesEnvTemplate?: boolean;
+    legacyHeader?: boolean;
 };
 export declare type ComponentServer = {
     env: string;

package/dist/ui/component-model/component-model.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","latest","preview","logs","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"sources":["component-model.ts"],"sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n  latest?: string;\n  preview?: ComponentPreview;\n  logs?: LegacyComponentLog[];\n};\n\nexport type ComponentPreview = {\n  includesEnvTemplate?: boolean;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string,\n\n    /**\n     * latest version of component\n     */\n    readonly latest?: string,\n\n    readonly preview?: ComponentPreview,\n\n    readonly logs?: LegacyComponentLog[]\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n    latest,\n    preview,\n    logs,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host,\n      latest,\n      preview,\n      logs\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["ComponentModel","constructor","id","displayName","packageName","server","compositions","tags","buildStatus","issuesCount","elementsUrl","status","deprecation","environment","description","labels","host","latest","preview","logs","version","from","env","ComponentID","fromObject","Composition","fromArray","TagMap","map","tag","Tag","componentsProps","rawComponent","empty","name","scope","url"],"sources":["component-model.ts"],"sourcesContent":["import { Composition, CompositionProps } from '@teambit/compositions';\nimport { DeprecationInfo } from '@teambit/deprecation';\nimport { Descriptor } from '@teambit/envs';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport { Tag } from '../../tag';\nimport { TagMap } from '../../tag-map';\nimport { TagProps } from '../../tag/tag';\n// import { Snap } from '../../snap';\n\n// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW\n// HOOK FROM YOUR ASPECT!!!\n// TODO: remove all properties from here to their rightful place in their aspects.\nexport type ComponentModelProps = {\n  id: ComponentIdObj;\n  description: string;\n  buildStatus?: string;\n  server?: ComponentServer;\n  displayName: string;\n  packageName: string; // pkg aspect\n  elementsUrl?: string; // pkg aspect\n  compositions?: CompositionProps[];\n  tags?: TagProps[];\n  issuesCount?: number; // component/issues aspect\n  status?: any; // workspace aspect.\n  deprecation?: DeprecationInfo; // deprecation aspect\n  env?: Descriptor; // env aspect.\n  labels?: string[];\n  host?: string;\n  latest?: string;\n  preview?: ComponentPreview;\n  logs?: LegacyComponentLog[];\n};\n\nexport type ComponentPreview = {\n  includesEnvTemplate?: boolean;\n  legacyHeader?: boolean;\n};\n\nexport type ComponentServer = {\n  env: string;\n  url: string;\n};\n\nexport class ComponentModel {\n  constructor(\n    /**\n     * id of the component\n     */\n    readonly id: ComponentID,\n\n    /**\n     * display name of the component.\n     */\n    readonly displayName: string,\n\n    /**\n     * package name of the component.\n     */\n    readonly packageName: string,\n\n    /**\n     * the component server.\n     */\n    readonly server: ComponentServer | undefined,\n\n    /**\n     * array of compositions\n     */\n    readonly compositions: Composition[],\n\n    /**\n     * tags of the component.\n     */\n    readonly tags: TagMap,\n\n    /**\n     * component build status\n     */\n    readonly buildStatus?: string,\n\n    /**\n     * issues of component.\n     */\n    readonly issuesCount?: number,\n    /**\n     * elements url\n     */\n    readonly elementsUrl?: string,\n    /**\n     * status of component.\n     */\n    readonly status?: any,\n\n    /**\n     * deprecation info of the component.\n     */\n    readonly deprecation?: DeprecationInfo,\n\n    /**\n     * env descriptor.\n     */\n    readonly environment?: Descriptor,\n\n    /**\n     * description of the component.\n     */\n\n    readonly description = '',\n\n    readonly labels: string[] = [],\n\n    /**\n     * host of the component\n     */\n    readonly host?: string,\n\n    /**\n     * latest version of component\n     */\n    readonly latest?: string,\n\n    readonly preview?: ComponentPreview,\n\n    readonly logs?: LegacyComponentLog[]\n  ) {}\n\n  get version() {\n    if (!this.id.version) return 'new';\n    return this.id.version;\n  }\n\n  /**\n   * create an instance of a component from a plain object.\n   */\n  static from({\n    id,\n    server,\n    displayName,\n    compositions = [],\n    packageName,\n    elementsUrl,\n    tags = [],\n    deprecation,\n    buildStatus,\n    env,\n    status,\n    issuesCount,\n    description,\n    labels,\n    host,\n    latest,\n    preview,\n    logs,\n  }: ComponentModelProps) {\n    return new ComponentModel(\n      ComponentID.fromObject(id),\n      displayName,\n      packageName,\n      server,\n      Composition.fromArray(compositions),\n      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),\n      buildStatus,\n      issuesCount,\n      elementsUrl,\n      status,\n      deprecation,\n      env,\n      description,\n      labels,\n      host,\n      latest,\n      preview,\n      logs\n    );\n  }\n\n  static fromArray(componentsProps: ComponentModelProps[]) {\n    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));\n  }\n\n  static empty() {\n    return new ComponentModel(\n      ComponentID.fromObject({ name: 'root', scope: 'temp' }),\n      '',\n      '',\n      { env: '', url: '' },\n      [],\n      TagMap.empty()\n    );\n  }\n}\n"],"mappings":";;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAsCO,MAAMA,cAAN,CAAqB;EAC1BC,WAAW;EACT;AACJ;AACA;EACaC,EAJA;EAMT;AACJ;AACA;EACaC,WATA;EAWT;AACJ;AACA;EACaC,WAdA;EAgBT;AACJ;AACA;EACaC,MAnBA;EAqBT;AACJ;AACA;EACaC,YAxBA;EA0BT;AACJ;AACA;EACaC,IA7BA;EA+BT;AACJ;AACA;EACaC,WAlCA;EAoCT;AACJ;AACA;EACaC,WAvCA;EAwCT;AACJ;AACA;EACaC,WA3CA;EA4CT;AACJ;AACA;EACaC,MA/CA;EAiDT;AACJ;AACA;EACaC,WApDA;EAsDT;AACJ;AACA;EACaC,WAzDA;EA2DT;AACJ;AACA;EAEaC,WAAW,GAAG,EA/Dd,EAiEAC,MAAgB,GAAG,EAjEnB;EAmET;AACJ;AACA;EACaC,IAtEA;EAwET;AACJ;AACA;EACaC,MA3EA,EA6EAC,OA7EA,EA+EAC,IA/EA,EAgFT;IAAA,KA5ESjB,EA4ET,GA5ESA,EA4ET;IAAA,KAvESC,WAuET,GAvESA,WAuET;IAAA,KAlESC,WAkET,GAlESA,WAkET;IAAA,KA7DSC,MA6DT,GA7DSA,MA6DT;IAAA,KAxDSC,YAwDT,GAxDSA,YAwDT;IAAA,KAnDSC,IAmDT,GAnDSA,IAmDT;IAAA,KA9CSC,WA8CT,GA9CSA,WA8CT;IAAA,KAzCSC,WAyCT,GAzCSA,WAyCT;IAAA,KArCSC,WAqCT,GArCSA,WAqCT;IAAA,KAjCSC,MAiCT,GAjCSA,MAiCT;IAAA,KA5BSC,WA4BT,GA5BSA,WA4BT;IAAA,KAvBSC,WAuBT,GAvBSA,WAuBT;IAAA,KAjBSC,WAiBT,GAjBSA,WAiBT;IAAA,KAfSC,MAeT,GAfSA,MAeT;IAAA,KAVSC,IAUT,GAVSA,IAUT;IAAA,KALSC,MAKT,GALSA,MAKT;IAAA,KAHSC,OAGT,GAHSA,OAGT;IAAA,KADSC,IACT,GADSA,IACT;EAAE;;EAEO,IAAPC,OAAO,GAAG;IACZ,IAAI,CAAC,KAAKlB,EAAL,CAAQkB,OAAb,EAAsB,OAAO,KAAP;IACtB,OAAO,KAAKlB,EAAL,CAAQkB,OAAf;EACD;EAED;AACF;AACA;;;EACa,OAAJC,IAAI,CAAC;IACVnB,EADU;IAEVG,MAFU;IAGVF,WAHU;IAIVG,YAAY,GAAG,EAJL;IAKVF,WALU;IAMVM,WANU;IAOVH,IAAI,GAAG,EAPG;IAQVK,WARU;IASVJ,WATU;IAUVc,GAVU;IAWVX,MAXU;IAYVF,WAZU;IAaVK,WAbU;IAcVC,MAdU;IAeVC,IAfU;IAgBVC,MAhBU;IAiBVC,OAjBU;IAkBVC;EAlBU,CAAD,EAmBa;IACtB,OAAO,IAAInB,cAAJ,CACLuB,0BAAA,CAAYC,UAAZ,CAAuBtB,EAAvB,CADK,EAELC,WAFK,EAGLC,WAHK,EAILC,MAJK,EAKLoB,2BAAA,CAAYC,SAAZ,CAAsBpB,YAAtB,CALK,EAMLqB,gBAAA,CAAOD,SAAP,CAAiBnB,IAAI,CAACqB,GAAL,CAAUC,GAAD,IAASC,UAAA,CAAIN,UAAJ,CAAeK,GAAf,CAAlB,CAAjB,CANK,EAOLrB,WAPK,EAQLC,WARK,EASLC,WATK,EAULC,MAVK,EAWLC,WAXK,EAYLU,GAZK,EAaLR,WAbK,EAcLC,MAdK,EAeLC,IAfK,EAgBLC,MAhBK,EAiBLC,OAjBK,EAkBLC,IAlBK,CAAP;EAoBD;;EAEe,OAATO,SAAS,CAACK,eAAD,EAAyC;IACvD,OAAOA,eAAe,CAACH,GAAhB,CAAqBI,YAAD,IAAkBhC,cAAc,CAACqB,IAAf,CAAoBW,YAApB,CAAtC,CAAP;EACD;;EAEW,OAALC,KAAK,GAAG;IACb,OAAO,IAAIjC,cAAJ,CACLuB,0BAAA,CAAYC,UAAZ,CAAuB;MAAEU,IAAI,EAAE,MAAR;MAAgBC,KAAK,EAAE;IAAvB,CAAvB,CADK,EAEL,EAFK,EAGL,EAHK,EAIL;MAAEb,GAAG,EAAE,EAAP;MAAWc,GAAG,EAAE;IAAhB,CAJK,EAKL,EALK,EAMLT,gBAAA,CAAOM,KAAP,EANK,CAAP;EAQD;;AAlJyB"}

package/dist/ui/component.js

@@ -39,6 +39,16 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
+function _lanesUi() {
+  const data = require("@teambit/lanes.ui.lanes");
+
+  _lanesUi = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _componentModule() {
   const data = _interopRequireDefault(require("./component.module.scss"));
 
@@ -93,11 +103,20 @@ function Component({
   onComponentChange
 }) {
   const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
+  const lanesContext = (0, _lanesUi().useLanesContext)();
+  const laneComponent = componentId ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(componentId) : undefined;
+  const useComponentOptions = laneComponent && {
+    logFilters: {
+      log: {
+        logHead: laneComponent.version
+      }
+    }
+  };
   const {
     component,
     componentDescriptor,
     error
-  } = (0, _useComponent().useComponent)(host, componentId); // trigger onComponentChange when component changes
+  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || componentId, useComponentOptions); // trigger onComponentChange when component changes
 
   (0, _react().useEffect)(() => onComponentChange === null || onComponentChange === void 0 ? void 0 : onComponentChange(component), [component]); // cleanup when unmounting component
 

package/dist/ui/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","componentId","useIdFromLocation","component","componentDescriptor","error","useComponent","useEffect","undefined","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\n\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {\n  const componentId = useIdFromLocation();\n  const { component, componentDescriptor, error } = useComponent(host, componentId);\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>\n          {routeSlot && <SlotRouter parentPath={`${componentId}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAeA;AACA;AACA;AACO,SAASA,SAAT,CAAmB;EAAEC,SAAF;EAAaC,aAAb;EAA4BC,IAA5B;EAAkCC;AAAlC,CAAnB,EAA0F;EAC/F,MAAMC,WAAW,GAAG,IAAAC,6CAAA,GAApB;EACA,MAAM;IAAEC,SAAF;IAAaC,mBAAb;IAAkCC;EAAlC,IAA4C,IAAAC,4BAAA,EAAaP,IAAb,EAAmBE,WAAnB,CAAlD,CAF+F,CAG/F;;EACA,IAAAM,kBAAA,EAAU,MAAMP,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGG,SAAH,CAAjC,EAAgD,CAACA,SAAD,CAAhD,EAJ+F,CAK/F;;EACA,IAAAI,kBAAA,EAAU,MAAM,MAAMP,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGQ,SAAH,CAAvC,EAAsD,EAAtD;EAEA,MAAMC,SAAS,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQb,aAAR,aAAQA,aAAR,uBAAQA,aAAa,CAAEc,MAAf,EAAR,CAAd,EAAgD,CAACd,aAAD,CAAhD,CAAlB;EACA,MAAMe,MAAM,GAAG,IAAAH,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,QAAnC,EAA6CC,GAA7C,CAAkDF,CAAD,IAAOA,CAAC,CAACG,OAA1D,CAAd,EAAkF,CAACT,SAAD,CAAlF,CAAf;EACA,MAAMU,KAAK,GAAG,IAAAT,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,OAAnC,EAA4CC,GAA5C,CAAiDF,CAAD,IAAOA,CAAC,CAACG,OAAzD,CAAd,EAAiF,CAACT,SAAD,CAAjF,CAAd;EAEA,IAAIJ,KAAJ,EAAW,OAAOA,KAAK,CAACe,WAAN,EAAP;EACX,IAAI,CAACjB,SAAL,EAAgB,oBAAO,2CAAP;EAEhB,oBACE,+BAAC,sCAAD;IAA6B,mBAAmB,EAAEC;EAAlD,gBACE,+BAAC,4BAAD;IAAmB,SAAS,EAAED;EAA9B,GACGU,MADH,eAEE;IAAK,SAAS,EAAEQ,0BAAA,CAAOC;EAAvB,GACGzB,SAAS,iBAAI,+BAAC,uCAAD;IAAY,UAAU,EAAG,GAAEI,WAAY,IAAvC;IAA4C,IAAI,EAAEJ;EAAlD,EADhB,CAFF,EAKGsB,KALH,CADF,CADF;AAWD"}
+{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","componentId","useIdFromLocation","lanesContext","useLanesContext","laneComponent","resolveComponent","undefined","useComponentOptions","logFilters","log","logHead","version","component","componentDescriptor","error","useComponent","id","toString","useEffect","pageItems","useMemo","flatten","values","before","filter","x","type","map","content","after","renderError","styles","container"],"sources":["component.tsx"],"sourcesContent":["import React, { useEffect, ReactNode, useMemo } from 'react';\nimport flatten from 'lodash.flatten';\nimport { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { SlotRegistry } from '@teambit/harmony';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\n\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\n\nexport type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;\nexport type ComponentPageElement = {\n  type: 'before' | 'after';\n  content: ReactNode;\n};\n\nexport type ComponentProps = {\n  containerSlot?: ComponentPageSlot;\n  routeSlot: RouteSlot;\n  host: string;\n  onComponentChange?: (activeComponent?: ComponentModel) => void;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {\n  const componentId = useIdFromLocation();\n  const lanesContext = useLanesContext();\n  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;\n  const useComponentOptions = laneComponent && {\n        logFilters: { log: { logHead: laneComponent.version } },\n      }\n\n  const { component, componentDescriptor, error } = useComponent(\n    host,\n    laneComponent?.id.toString() || componentId,\n    useComponentOptions\n  );\n  // trigger onComponentChange when component changes\n  useEffect(() => onComponentChange?.(component), [component]);\n  // cleanup when unmounting component\n  useEffect(() => () => onComponentChange?.(undefined), []);\n\n  const pageItems = useMemo(() => flatten(containerSlot?.values()), [containerSlot]);\n  const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);\n  const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);\n\n  if (error) return error.renderError();\n  if (!component) return <div></div>;\n\n  return (\n    <ComponentDescriptorProvider componentDescriptor={componentDescriptor}>\n      <ComponentProvider component={component}>\n        {before}\n        <div className={styles.container}>\n          {routeSlot && <SlotRouter parentPath={`${componentId}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAeA;AACA;AACA;AACO,SAASA,SAAT,CAAmB;EAAEC,SAAF;EAAaC,aAAb;EAA4BC,IAA5B;EAAkCC;AAAlC,CAAnB,EAA0F;EAC/F,MAAMC,WAAW,GAAG,IAAAC,6CAAA,GAApB;EACA,MAAMC,YAAY,GAAG,IAAAC,0BAAA,GAArB;EACA,MAAMC,aAAa,GAAGJ,WAAW,GAAGE,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEG,gBAAd,CAA+BL,WAA/B,CAAH,GAAiDM,SAAlF;EACA,MAAMC,mBAAmB,GAAGH,aAAa,IAAI;IACvCI,UAAU,EAAE;MAAEC,GAAG,EAAE;QAAEC,OAAO,EAAEN,aAAa,CAACO;MAAzB;IAAP;EAD2B,CAA7C;EAIA,MAAM;IAAEC,SAAF;IAAaC,mBAAb;IAAkCC;EAAlC,IAA4C,IAAAC,4BAAA,EAChDjB,IADgD,EAEhD,CAAAM,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEY,EAAf,CAAkBC,QAAlB,OAAgCjB,WAFgB,EAGhDO,mBAHgD,CAAlD,CAR+F,CAa/F;;EACA,IAAAW,kBAAA,EAAU,MAAMnB,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGa,SAAH,CAAjC,EAAgD,CAACA,SAAD,CAAhD,EAd+F,CAe/F;;EACA,IAAAM,kBAAA,EAAU,MAAM,MAAMnB,iBAAN,aAAMA,iBAAN,uBAAMA,iBAAiB,CAAGO,SAAH,CAAvC,EAAsD,EAAtD;EAEA,MAAMa,SAAS,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQxB,aAAR,aAAQA,aAAR,uBAAQA,aAAa,CAAEyB,MAAf,EAAR,CAAd,EAAgD,CAACzB,aAAD,CAAhD,CAAlB;EACA,MAAM0B,MAAM,GAAG,IAAAH,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,QAAnC,EAA6CC,GAA7C,CAAkDF,CAAD,IAAOA,CAAC,CAACG,OAA1D,CAAd,EAAkF,CAACT,SAAD,CAAlF,CAAf;EACA,MAAMU,KAAK,GAAG,IAAAT,gBAAA,EAAQ,MAAMD,SAAS,CAACK,MAAV,CAAkBC,CAAD,IAAOA,CAAC,CAACC,IAAF,KAAW,OAAnC,EAA4CC,GAA5C,CAAiDF,CAAD,IAAOA,CAAC,CAACG,OAAzD,CAAd,EAAiF,CAACT,SAAD,CAAjF,CAAd;EAEA,IAAIL,KAAJ,EAAW,OAAOA,KAAK,CAACgB,WAAN,EAAP;EACX,IAAI,CAAClB,SAAL,EAAgB,oBAAO,2CAAP;EAEhB,oBACE,+BAAC,sCAAD;IAA6B,mBAAmB,EAAEC;EAAlD,gBACE,+BAAC,4BAAD;IAAmB,SAAS,EAAED;EAA9B,GACGW,MADH,eAEE;IAAK,SAAS,EAAEQ,0BAAA,CAAOC;EAAvB,GACGpC,SAAS,iBAAI,+BAAC,uCAAD;IAAY,UAAU,EAAG,GAAEI,WAAY,IAAvC;IAA4C,IAAI,EAAEJ;EAAlD,EADhB,CAFF,EAKGiC,KALH,CADF,CADF;AAWD"}

package/dist/ui/menu/menu.js

@@ -201,9 +201,18 @@ function ComponentMenu({
   consumeMethodSlot
 }) {
   const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
+  const lanesContext = (0, _lanesUi().useLanesContext)();
+  const laneComponent = componentId ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(componentId) : undefined;
+  const useComponentOptions = laneComponent && {
+    logFilters: {
+      log: {
+        logHead: laneComponent.version
+      }
+    }
+  };
   const {
     component
-  } = (0, _useComponent().useComponent)(host, componentId);
+  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || componentId, useComponentOptions);
   const mainMenuItems = (0, _react().useMemo)(() => (0, _lodash().groupBy)((0, _lodash().flatten)(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().FullLoader, null);
   return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {

package/dist/ui/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentId","useIdFromLocation","component","useComponent","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","isNew","tags","isEmpty","lanesContext","useLanesContext","currentLane","viewedLane","logs","isWorkspace","snaps","filter","log","tag","map","snap","version","hash","reverse","tagLookup","Map","forEach","set","compact","toArray","get","lanes","getLanesByComponentId","id","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n\n  consumeMethodSlot: ConsumeMethodSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n}: MenuProps) {\n  const componentId = useIdFromLocation();\n  const { component } = useComponent(host, componentId);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${componentId}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <MenuNav navigationSlot={navigationSlot} />\n              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <div className={styles.widgets}>\n                <MenuNav navigationSlot={widgetSlot} />\n              </div>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown menuItems={mainMenuItems} />\n            </div>\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const isNew = component.tags.isEmpty();\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["ComponentMenu","navigationSlot","widgetSlot","className","host","menuItemSlot","consumeMethodSlot","componentId","useIdFromLocation","lanesContext","useLanesContext","laneComponent","resolveComponent","undefined","useComponentOptions","logFilters","log","logHead","version","component","useComponent","id","toString","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","isNew","tags","isEmpty","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tagLookup","Map","forEach","set","compact","toArray","get","lanes","getLanesByComponentId","localVersion","currentVersion","search","includes","methods","useConsumeMethods","length","useBox","name","latest","componentModel","method","x","Component","Title"],"sources":["menu.tsx"],"sourcesContent":["import { Routes, Route } from 'react-router-dom';\nimport { MainDropdown, MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { VersionDropdown } from '@teambit/component.ui.version-dropdown';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { flatten, groupBy, compact } from 'lodash';\nimport classnames from 'classnames';\nimport React, { useMemo } from 'react';\nimport { UseBoxDropdown } from '@teambit/ui-foundation.ui.use-box.dropdown';\nimport { Menu as ConsumeMethodsMenu } from '@teambit/ui-foundation.ui.use-box.menu';\nimport { LaneModel, useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport type { ComponentModel } from '../component-model';\nimport { useComponent } from '../use-component';\nimport { MenuNav } from './menu-nav';\nimport { MobileMenuNav } from './mobile-menu-nav';\nimport styles from './menu.module.scss';\nimport { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';\nimport { useIdFromLocation } from '../use-component-from-location';\n\nexport type MenuProps = {\n  className?: string;\n  /**\n   * slot for top bar menu nav items\n   */\n  navigationSlot: OrderedNavigationSlot;\n  /**\n   * right side menu item slot\n   */\n  widgetSlot: OrderedNavigationSlot;\n  host: string;\n  /**\n   * main dropdown item slot\n   */\n  menuItemSlot: MenuItemSlot;\n\n  consumeMethodSlot: ConsumeMethodSlot;\n};\n\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n}: MenuProps) {\n  const componentId = useIdFromLocation();\n  const lanesContext = useLanesContext();\n  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;\n  const useComponentOptions = laneComponent && {\n    logFilters: { log: { logHead: laneComponent.version } },\n  };\n\n  const { component } = useComponent(host, laneComponent?.id.toString() || componentId, useComponentOptions);\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${componentId}/*`}\n        element={\n          <div className={classnames(styles.topBar, className)}>\n            <div className={styles.leftSide}>\n              <MenuNav navigationSlot={navigationSlot} />\n              <MobileMenuNav navigationSlot={navigationSlot} widgetSlot={widgetSlot} />\n            </div>\n            <div className={styles.rightSide}>\n              <div className={styles.widgets}>\n                <MenuNav navigationSlot={widgetSlot} />\n              </div>\n              <VersionRelatedDropdowns component={component} consumeMethods={consumeMethodSlot} host={host} />\n              <MainDropdown menuItems={mainMenuItems} />\n            </div>\n          </div>\n        }\n      />\n    </Routes>\n  );\n}\n\nfunction VersionRelatedDropdowns({\n  component,\n  consumeMethods,\n  host,\n}: {\n  component: ComponentModel;\n  consumeMethods: ConsumeMethodSlot;\n  host: string;\n}) {\n  const location = useLocation();\n  const isNew = component.tags.isEmpty();\n  const lanesContext = useLanesContext();\n  const currentLane = lanesContext?.viewedLane;\n  const { logs } = component;\n  const isWorkspace = host === 'teambit.workspace/workspace';\n\n  const snaps = useMemo(() => {\n    return (logs || [])\n      .filter((log) => !log.tag)\n      .map((snap) => ({ ...snap, version: snap.hash }))\n      .reverse();\n  }, [logs]);\n\n  const tags = useMemo(() => {\n    const tagLookup = new Map<string, LegacyComponentLog>();\n    (logs || [])\n      .filter((log) => log.tag)\n      .forEach((tag) => {\n        tagLookup.set(tag?.tag as string, tag);\n      });\n    return compact(\n      component.tags\n        ?.toArray()\n        .reverse()\n        .map((tag) => tagLookup.get(tag.version.version))\n    ).map((tag) => ({ ...tag, version: tag.tag as string }));\n  }, [logs]);\n\n  const lanes = lanesContext?.getLanesByComponentId(component.id) || [];\n  const localVersion = isWorkspace && !isNew && !currentLane;\n\n  const currentVersion =\n    isWorkspace && !isNew && !location?.search.includes('version') ? 'workspace' : component.version;\n\n  const methods = useConsumeMethods(consumeMethods, component, currentLane);\n  return (\n    <>\n      {tags.length > 0 && (\n        <UseBoxDropdown\n          position=\"bottom-end\"\n          className={styles.useBox}\n          Menu={<ConsumeMethodsMenu methods={methods} componentName={component.id.name} />}\n        />\n      )}\n      <VersionDropdown\n        tags={tags}\n        snaps={snaps}\n        lanes={lanes}\n        localVersion={localVersion}\n        currentVersion={currentVersion}\n        latestVersion={component.latest}\n        currentLane={currentLane}\n      />\n    </>\n  );\n}\n\nfunction useConsumeMethods(\n  consumeMethods: ConsumeMethodSlot,\n  componentModel: ComponentModel,\n  currentLane?: LaneModel\n): ConsumeMethod[] {\n  return useMemo(\n    () =>\n      flatten(consumeMethods.values())\n        .map((method) => {\n          return method?.(componentModel, { currentLane });\n        })\n        .filter((x) => !!x && x.Component && x.Title) as ConsumeMethod[],\n    [consumeMethods, componentModel, currentLane]\n  );\n}\n"],"mappings":"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"}

package/dist/ui/menu/mobile-menu-nav.js

@@ -81,6 +81,16 @@ function _designInputs() {
   return data;
 }
 
+function _baseReactNavigation() {
+  const data = require("@teambit/base-react.navigation.link");
+
+  _baseReactNavigation = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _topBarNav() {
   const data = require("../top-bar-nav");
 
@@ -159,17 +169,43 @@ function Placeholder(_ref) {
       rest = (0, _objectWithoutProperties2().default)(_ref, ["slots"]);
   return /*#__PURE__*/_react().default.createElement("div", (0, _extends2().default)({}, rest, {
     className: _mobileMenuNavModule().default.placeholder
-  }), /*#__PURE__*/_react().default.createElement(_reactRouterDom().Routes, null, slots === null || slots === void 0 ? void 0 : slots.map(([id, menuItem]) => {
-    var _menuItem$props, _menuItem$props2, _menuItem$props3, _menuItem$props4;
-
-    return /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
-      key: id,
-      path: menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props = menuItem.props) === null || _menuItem$props === void 0 ? void 0 : _menuItem$props.href,
-      element: typeof (menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props2 = menuItem.props) === null || _menuItem$props2 === void 0 ? void 0 : _menuItem$props2.children) === 'string' ? menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props3 = menuItem.props) === null || _menuItem$props3 === void 0 ? void 0 : _menuItem$props3.children : menuItem === null || menuItem === void 0 ? void 0 : (_menuItem$props4 = menuItem.props) === null || _menuItem$props4 === void 0 ? void 0 : _menuItem$props4.displayName
-    });
-  })), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
+  }), slots.map(([id, menuItem]) => /*#__PURE__*/_react().default.createElement(ShowWhenMatch, {
+    key: id,
+    href: menuItem.props.href || '',
+    end: menuItem.props.exact
+  }, typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName)), /*#__PURE__*/_react().default.createElement(_designElements().Icon, {
     of: "fat-arrow-down"
   }));
 }
 
+function ShowWhenMatch({
+  href,
+  children,
+  caseSensitive,
+  end: exact
+}) {
+  const isMatch = useLinkMatch(href, {
+    caseSensitive,
+    exact
+  });
+  if (!isMatch) return null;
+  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+}
+
+function useLinkMatch(href, {
+  caseSensitive,
+  exact
+} = {}) {
+  const location = (0, _baseReactNavigation().useLocation)();
+  let pathname = (location === null || location === void 0 ? void 0 : location.pathname) || '/';
+  let destination = (0, _reactRouterDom().useResolvedPath)(href).pathname;
+
+  if (!caseSensitive) {
+    pathname = pathname.toLowerCase();
+    destination = destination.toLowerCase();
+  }
+
+  return destination === pathname || !exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/';
+}
+
 //# sourceMappingURL=mobile-menu-nav.js.map

package/dist/ui/menu/mobile-menu-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      <Routes>\n        {slots?.map(([id, menuItem]) => (\n          <Route\n            key={id}\n            path={menuItem?.props?.href}\n            element={\n              typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName\n            }\n          />\n        ))}\n      </Routes>\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["MobileMenuNav","navigationSlot","widgetSlot","className","totalSlots","useMemo","toArray","sort","sortFn","classnames","styles","navigation","mobileNav","mobileStyles","mobileMenu","close","map","id","menuItem","props","mobileMenuLink","active","children","displayName","order","first","second","Placeholder","slots","rest","placeholder","href","exact","ShowWhenMatch","caseSensitive","end","isMatch","useLinkMatch","location","useLocation","pathname","destination","useResolvedPath","toLowerCase","startsWith","charAt","length"],"sources":["mobile-menu-nav.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from 'react';\nimport { useResolvedPath } from 'react-router-dom';\nimport classnames from 'classnames';\nimport { Icon } from '@teambit/design.elements.icon';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { useLocation } from '@teambit/base-react.navigation.link';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport mobileStyles from './mobile-menu-nav.module.scss';\nimport { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport function MobileMenuNav({\n  navigationSlot,\n  widgetSlot,\n  className,\n}: {\n  navigationSlot: OrderedNavigationSlot;\n  widgetSlot: OrderedNavigationSlot;\n  className?: string;\n}) {\n  const totalSlots = useMemo(\n    () => [...navigationSlot.toArray().sort(sortFn), ...widgetSlot.toArray().sort(sortFn)],\n    [navigationSlot, widgetSlot]\n  );\n\n  return (\n    <Dropdown\n      // @ts-ignore - mismatch between @types/react\n      placeholder={<Placeholder slots={totalSlots} />}\n      className={classnames(styles.navigation, styles.mobileNav, className)}\n      dropClass={mobileStyles.mobileMenu}\n    >\n      <nav>\n        <Icon of=\"x-thick\" className={mobileStyles.close} />\n        {totalSlots.map(([id, menuItem]) => {\n          return (\n            <TopBarNav\n              key={id}\n              {...menuItem.props}\n              className={mobileStyles.mobileMenuLink}\n              activeClassName={mobileStyles.active}\n            >\n              {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n            </TopBarNav>\n          );\n        })}\n      </nav>\n    </Dropdown>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\ntype PlaceholderProps = {\n  slots: [string, NavPlugin][];\n  baseUrl?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nfunction Placeholder({ slots, ...rest }: PlaceholderProps) {\n  return (\n    <div {...rest} className={mobileStyles.placeholder}>\n      {slots.map(([id, menuItem]) => (\n        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>\n          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}\n        </ShowWhenMatch>\n      ))}\n      <Icon of=\"fat-arrow-down\" />\n    </div>\n  );\n}\n\nfunction ShowWhenMatch({\n  href,\n  children,\n  caseSensitive,\n  end: exact,\n}: {\n  href: string;\n  children: ReactNode;\n  caseSensitive?: boolean;\n  end?: boolean;\n}) {\n  const isMatch = useLinkMatch(href, { caseSensitive, exact });\n  if (!isMatch) return null;\n  return <>{children}</>;\n}\n\nfunction useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {\n  const location = useLocation();\n  let pathname = location?.pathname || '/';\n  let destination = useResolvedPath(href).pathname;\n\n  if (!caseSensitive) {\n    pathname = pathname.toLowerCase();\n    destination = destination.toLowerCase();\n  }\n\n  return (\n    destination === pathname ||\n    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')\n  );\n}\n"],"mappings":"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"}

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

@@ -4,8 +4,7 @@ import { ComponentError } from './component-error';
 export declare const componentIdFields: import("@apollo/client").DocumentNode;
 export declare const componentOverviewFields: import("@apollo/client").DocumentNode;
 export declare const componentFields: import("@apollo/client").DocumentNode;
-/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
-export declare function useComponentQuery(componentId: string, host: string, filters?: {
+export declare type Filters = {
     log?: {
         logType?: string;
         logOffset?: number;
@@ -13,7 +12,9 @@ export declare function useComponentQuery(componentId: string, host: string, fil
         logHead?: string;
         logSort?: string;
     };
-}): {
+};
+/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
+export declare function useComponentQuery(componentId: string, host: string, filters?: Filters): {
     componentDescriptor: ComponentDescriptor | undefined;
     component: ComponentModel | undefined;
     error: ComponentError | undefined;

package/dist/ui/use-component-query.js

@@ -130,6 +130,7 @@ const componentOverviewFields = (0, _client().gql)`
     }
     preview {
       includesEnvTemplate
+      legacyHeader
     }
     compositions {
       identifier
@@ -223,8 +224,8 @@ const SUB_COMPONENT_REMOVED = (0, _client().gql)`
   }
   ${componentIdFields}
 `;
-/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
 
+/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
 function useComponentQuery(componentId, host, filters) {
   var _data$getHost;
 

package/dist/ui/use-component-query.js.map

@@ -1 +1 @@
-{"version":3,"names":["componentIdFields","gql","componentOverviewFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","filters","idRef","useRef","current","data","error","loading","subscribeToMore","useDataQuery","variables","id","extensionId","log","useEffect","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","useMemo","aspectList","entries","aspects","fromObject","componentDescriptor","ComponentDescriptor","toString","undefined","ComponentModel","from","ComponentError","message"],"sources":["use-component-query.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nexport const componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nexport const componentOverviewFields = gql`\n  fragment componentOverviewFields on Component {\n    id {\n      ...componentIdFields\n    }\n    aspects(include: [\"teambit.preview/preview\", \"teambit.pipelines/builder\", \"teambit.envs/envs\"]) {\n      # 'id' property in gql refers to a *global* identifier and used for caching.\n      # this makes aspect data cache under the same key, even when they are under different components.\n      # renaming the property fixes that.\n      aspectId: id\n      aspectData: data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    preview {\n      includesEnvTemplate\n    }\n    compositions {\n      identifier\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    ...componentOverviewFields\n    packageName\n    latest\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    logs(type: $logType, offset: $logOffset, limit: $logLimit, head: $logHead, sort: $logSort) {\n      id\n      message\n      username\n      email\n      date\n      hash\n      tag\n    }\n  }\n  ${componentIdFields}\n  ${componentOverviewFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component(\n    $id: String!\n    $extensionId: String!\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded($logType: String, $logOffset: Int, $logLimit: Int, $logHead: String, $logSort: String) {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged(\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\n\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(\n  componentId: string,\n  host: string,\n  filters?: { log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string } }\n) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n  return useMemo(() => {\n    const aspectList = {\n      entries: rawComponent?.aspects,\n    };\n    const id = rawComponent && ComponentID.fromObject(rawComponent.id);\n    return {\n      componentDescriptor: id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined,\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n    };\n  }, [rawComponent, host, error]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEO,MAAMA,iBAAiB,GAAG,IAAAC,aAAA,CAAI;AACrC;AACA;AACA;AACA;AACA;AACA,CANO;;AAQA,MAAMC,uBAAuB,GAAG,IAAAD,aAAA,CAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CArCO;;AAuCA,MAAMG,eAAe,GAAG,IAAAF,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,IAAIE,uBAAwB;AAC5B,CA3BO;;AA6BP,MAAME,aAAa,GAAG,IAAAH,aAAA,CAAI;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAlBA;AAoBA,MAAME,sBAAsB,GAAG,IAAAJ,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CATA;AAWA,MAAMG,qBAAqB,GAAG,IAAAL,aAAA,CAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB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"}
+{"version":3,"names":["componentIdFields","gql","componentOverviewFields","componentFields","GET_COMPONENT","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED","useComponentQuery","componentId","host","filters","idRef","useRef","current","data","error","loading","subscribeToMore","useDataQuery","variables","id","extensionId","log","useEffect","unsubAddition","document","updateQuery","prev","subscriptionData","prevComponent","getHost","get","addedComponent","componentAdded","component","name","unsubChanges","updatedComponent","componentChanged","isUpdated","ComponentID","isEqualObj","unsubRemoval","removedIds","componentRemoved","componentIds","length","isRemoved","some","removedId","rawComponent","useMemo","aspectList","entries","aspects","fromObject","componentDescriptor","ComponentDescriptor","toString","undefined","ComponentModel","from","ComponentError","message"],"sources":["use-component-query.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { gql } from '@apollo/client';\nimport { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';\nimport { ComponentID, ComponentIdObj } from '@teambit/component-id';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\n\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\n\nexport const componentIdFields = gql`\n  fragment componentIdFields on ComponentID {\n    name\n    version\n    scope\n  }\n`;\n\nexport const componentOverviewFields = gql`\n  fragment componentOverviewFields on Component {\n    id {\n      ...componentIdFields\n    }\n    aspects(include: [\"teambit.preview/preview\", \"teambit.pipelines/builder\", \"teambit.envs/envs\"]) {\n      # 'id' property in gql refers to a *global* identifier and used for caching.\n      # this makes aspect data cache under the same key, even when they are under different components.\n      # renaming the property fixes that.\n      aspectId: id\n      aspectData: data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n    }\n    compositions {\n      identifier\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const componentFields = gql`\n  fragment componentFields on Component {\n    id {\n      ...componentIdFields\n    }\n    ...componentOverviewFields\n    packageName\n    latest\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n    logs(type: $logType, offset: $logOffset, limit: $logLimit, head: $logHead, sort: $logSort) {\n      id\n      message\n      username\n      email\n      date\n      hash\n      tag\n    }\n  }\n  ${componentIdFields}\n  ${componentOverviewFields}\n`;\n\nconst GET_COMPONENT = gql`\n  query Component(\n    $id: String!\n    $extensionId: String!\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded($logType: String, $logOffset: Int, $logLimit: Int, $logHead: String, $logSort: String) {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged(\n    $logType: String\n    $logOffset: Int\n    $logLimit: Int\n    $logHead: String\n    $logSort: String\n  ) {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nconst SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\nexport type Filters = {\n  log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string };\n};\n/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */\nexport function useComponentQuery(componentId: string, host: string, filters?: Filters) {\n  const idRef = useRef(componentId);\n  idRef.current = componentId;\n  const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {\n    variables: { id: componentId, extensionId: host, ...(filters?.log || {}) },\n  });\n\n  useEffect(() => {\n    // @TODO @Kutner fix subscription for scope\n    if (host !== 'teambit.workspace/workspace') {\n      return () => {};\n    }\n\n    const unsubAddition = subscribeToMore({\n      document: SUB_SUBSCRIPTION_ADDED,\n      updateQuery: (prev, { subscriptionData }) => {\n        const prevComponent = prev?.getHost?.get;\n        const addedComponent = subscriptionData?.data?.componentAdded?.component;\n\n        if (!addedComponent || prevComponent) return prev;\n\n        if (idRef.current === addedComponent.id.name) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: addedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubChanges = subscribeToMore({\n      document: SUB_COMPONENT_CHANGED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const updatedComponent = subscriptionData?.data?.componentChanged?.component;\n\n        const isUpdated = updatedComponent && ComponentID.isEqualObj(prevComponent?.id, updatedComponent?.id);\n\n        if (isUpdated) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: updatedComponent,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    const unsubRemoval = subscribeToMore({\n      document: SUB_COMPONENT_REMOVED,\n      updateQuery: (prev, { subscriptionData }) => {\n        if (!subscriptionData.data) return prev;\n\n        const prevComponent = prev?.getHost?.get;\n        const removedIds: ComponentIdObj[] | undefined = subscriptionData?.data?.componentRemoved?.componentIds;\n        if (!prevComponent || !removedIds?.length) return prev;\n\n        const isRemoved = removedIds.some((removedId) => ComponentID.isEqualObj(removedId, prevComponent.id));\n\n        if (isRemoved) {\n          return {\n            ...prev,\n            getHost: {\n              ...prev.getHost,\n              get: null,\n            },\n          };\n        }\n\n        return prev;\n      },\n    });\n\n    return () => {\n      unsubChanges();\n      unsubAddition();\n      unsubRemoval();\n    };\n  }, []);\n\n  const rawComponent = data?.getHost?.get;\n  return useMemo(() => {\n    const aspectList = {\n      entries: rawComponent?.aspects,\n    };\n    const id = rawComponent && ComponentID.fromObject(rawComponent.id);\n    return {\n      componentDescriptor: id ? ComponentDescriptor.fromObject({ id: id.toString(), aspectList }) : undefined,\n      component: rawComponent ? ComponentModel.from({ ...rawComponent, host }) : undefined,\n      // eslint-disable-next-line\n      error: error\n        ? new ComponentError(500, error.message)\n        : !rawComponent && !loading\n        ? new ComponentError(404)\n        : undefined,\n    };\n  }, [rawComponent, host, error]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;AAEO,MAAMA,iBAAiB,GAAG,IAAAC,aAAA,CAAI;AACrC;AACA;AACA;AACA;AACA;AACA,CANO;;AAQA,MAAMC,uBAAuB,GAAG,IAAAD,aAAA,CAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAtCO;;AAwCA,MAAMG,eAAe,GAAG,IAAAF,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,IAAIE,uBAAwB;AAC5B,CA3BO;;AA6BP,MAAME,aAAa,GAAG,IAAAH,aAAA,CAAI;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAlBA;AAoBA,MAAME,sBAAsB,GAAG,IAAAJ,aAAA,CAAI;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CATA;AAWA,MAAMG,qBAAqB,GAAG,IAAAL,aAAA,CAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;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"}

package/dist/ui/use-component.d.ts

@@ -1,10 +1,14 @@
-import { ComponentID } from '@teambit/component-id';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
 import { ComponentModel } from './component-model';
 import { ComponentError } from './component-error';
+import { Filters } from './use-component-query';
 export declare type Component = {
     component?: ComponentModel;
     error?: ComponentError;
     componentDescriptor?: ComponentDescriptor;
 };
-export declare function useComponent(host: string, id?: string | ComponentID): Component;
+export declare type UseComponentOptions = {
+    version?: string;
+    logFilters?: Filters;
+};
+export declare function useComponent(host: string, id?: string, options?: UseComponentOptions): Component;

package/dist/ui/use-component.js

@@ -15,16 +15,6 @@ function _uiFoundationUiReactRouter() {
   return data;
 }
 
-function _lanesUi() {
-  const data = require("@teambit/lanes.ui.lanes");
-
-  _lanesUi = function () {
-    return data;
-  };
-
-  return data;
-}
-
 function _useComponentQuery() {
   const data = require("./use-component-query");
 
@@ -35,25 +25,17 @@ function _useComponentQuery() {
   return data;
 }
 
-function useComponent(host, id) {
-  var _lanesContext$viewedL, _lanesContext$viewedL2;
+function useComponent(host, id, options) {
+  var _ref;
 
   const query = (0, _uiFoundationUiReactRouter().useQuery)();
-  const version = query.get('version') || undefined;
-  const lanesContext = (0, _lanesUi().useLanesContext)();
-  const targetId = typeof id === 'string' && id || typeof id !== 'undefined' && id.toString({
-    ignoreVersion: true
-  });
-  if (!targetId) throw new TypeError('useComponent received no component id');
-  const currentLane = lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.viewedLane; // when on a lane, always fetch all the logs starting from the 'head' version
-
-  const laneComponentId = lanesContext === null || lanesContext === void 0 ? void 0 : (_lanesContext$viewedL = lanesContext.viewedLane) === null || _lanesContext$viewedL === void 0 ? void 0 : (_lanesContext$viewedL2 = _lanesContext$viewedL.components.find(component => component.id.fullName === targetId)) === null || _lanesContext$viewedL2 === void 0 ? void 0 : _lanesContext$viewedL2.id;
-  const componentIdStr = laneComponentId ? laneComponentId === null || laneComponentId === void 0 ? void 0 : laneComponentId.toString() : withVersion(targetId, version);
-  const logFilters = currentLane ? {
-    log: {
-      logHead: laneComponentId === null || laneComponentId === void 0 ? void 0 : laneComponentId.version
-    }
-  } : undefined;
+  const {
+    version,
+    logFilters
+  } = options || {};
+  const componentVersion = (_ref = version || query.get('version')) !== null && _ref !== void 0 ? _ref : undefined;
+  if (!id) throw new TypeError('useComponent received no component id');
+  const componentIdStr = withVersion(id, componentVersion);
   return (0, _useComponentQuery().useComponentQuery)(componentIdStr, host, logFilters);
 }
 

package/dist/ui/use-component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useComponent","host","id","query","useQuery","version","get","undefined","lanesContext","useLanesContext","targetId","toString","ignoreVersion","TypeError","currentLane","viewedLane","laneComponentId","components","find","component","fullName","componentIdStr","withVersion","logFilters","log","logHead","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { useLanesContext } from '@teambit/lanes.ui.lanes';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\n\nexport function useComponent(host: string, id?: string | ComponentID): Component {\n  const query = useQuery();\n  const version = query.get('version') || undefined;\n  const lanesContext = useLanesContext();\n\n  const targetId =\n    (typeof id === 'string' && id) || (typeof id !== 'undefined' && id.toString({ ignoreVersion: true }));\n  if (!targetId) throw new TypeError('useComponent received no component id');\n  const currentLane = lanesContext?.viewedLane;\n  // when on a lane, always fetch all the logs starting from the 'head' version\n  const laneComponentId = lanesContext?.viewedLane?.components.find(\n    (component) => component.id.fullName === targetId\n  )?.id;\n\n  const componentIdStr = laneComponentId ? laneComponentId?.toString() : withVersion(targetId, version);\n\n  const logFilters = currentLane\n    ? {\n        log: {\n          logHead: laneComponentId?.version,\n        },\n      }\n    : undefined;\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAQO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAA0E;EAAA;;EAC/E,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAMC,OAAO,GAAGF,KAAK,CAACG,GAAN,CAAU,SAAV,KAAwBC,SAAxC;EACA,MAAMC,YAAY,GAAG,IAAAC,0BAAA,GAArB;EAEA,MAAMC,QAAQ,GACX,OAAOR,EAAP,KAAc,QAAd,IAA0BA,EAA3B,IAAmC,OAAOA,EAAP,KAAc,WAAd,IAA6BA,EAAE,CAACS,QAAH,CAAY;IAAEC,aAAa,EAAE;EAAjB,CAAZ,CADlE;EAEA,IAAI,CAACF,QAAL,EAAe,MAAM,IAAIG,SAAJ,CAAc,uCAAd,CAAN;EACf,MAAMC,WAAW,GAAGN,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEO,UAAlC,CAR+E,CAS/E;;EACA,MAAMC,eAAe,GAAGR,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEO,UAAjB,oFAAG,sBAA0BE,UAA1B,CAAqCC,IAArC,CACrBC,SAAD,IAAeA,SAAS,CAACjB,EAAV,CAAakB,QAAb,KAA0BV,QADnB,CAAH,2DAAG,uBAErBR,EAFH;EAIA,MAAMmB,cAAc,GAAGL,eAAe,GAAGA,eAAH,aAAGA,eAAH,uBAAGA,eAAe,CAAEL,QAAjB,EAAH,GAAiCW,WAAW,CAACZ,QAAD,EAAWL,OAAX,CAAlF;EAEA,MAAMkB,UAAU,GAAGT,WAAW,GAC1B;IACEU,GAAG,EAAE;MACHC,OAAO,EAAET,eAAF,aAAEA,eAAF,uBAAEA,eAAe,CAAEX;IADvB;EADP,CAD0B,GAM1BE,SANJ;EAQA,OAAO,IAAAmB,sCAAA,EAAkBL,cAAlB,EAAkCpB,IAAlC,EAAwCsB,UAAxC,CAAP;AACD;;AAED,SAASD,WAAT,CAAqBpB,EAArB,EAAiCG,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOH,EAAP;EACd,IAAIA,EAAE,CAACyB,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOzB,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGG,OAAQ,EAAxB;AACD"}
+{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","componentVersion","get","undefined","TypeError","componentIdStr","withVersion","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { ComponentModel } from './component-model';\nimport { ComponentError } from './component-error';\nimport { Filters, useComponentQuery } from './use-component-query';\n\nexport type Component = {\n  component?: ComponentModel;\n  error?: ComponentError;\n  componentDescriptor?: ComponentDescriptor;\n};\nexport type UseComponentOptions = {\n  version?: string;\n  logFilters?: Filters\n};\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {\n  const query = useQuery();\n  const { version, logFilters } = options || {};\n  const componentVersion = (version || query.get('version')) ?? undefined;\n  \n  if (!id) throw new TypeError('useComponent received no component id');\n\n  const componentIdStr = withVersion(id, componentVersion);\n\n  return useComponentQuery(componentIdStr, host, logFilters);\n}\n\nfunction withVersion(id: string, version?: string) {\n  if (!version) return id;\n  if (id.includes('@')) return id;\n  return `${id}@${version}`;\n}\n"],"mappings":";;;;;;;AAAA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAYO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiDC,OAAjD,EAA2F;EAAA;;EAChG,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAM;IAAEC,OAAF;IAAWC;EAAX,IAA0BJ,OAAO,IAAI,EAA3C;EACA,MAAMK,gBAAgB,WAAIF,OAAO,IAAIF,KAAK,CAACK,GAAN,CAAU,SAAV,CAAf,uCAAwCC,SAA9D;EAEA,IAAI,CAACR,EAAL,EAAS,MAAM,IAAIS,SAAJ,CAAc,uCAAd,CAAN;EAET,MAAMC,cAAc,GAAGC,WAAW,CAACX,EAAD,EAAKM,gBAAL,CAAlC;EAEA,OAAO,IAAAM,sCAAA,EAAkBF,cAAlB,EAAkCX,IAAlC,EAAwCM,UAAxC,CAAP;AACD;;AAED,SAASM,WAAT,CAAqBX,EAArB,EAAiCI,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;EACd,IAAIA,EAAE,CAACa,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOb,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.747",
+  "version": "0.0.750",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.747"
+    "version": "0.0.750"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,42 +31,42 @@
     "@teambit/design.inputs.dropdown": "0.0.7",
     "@teambit/component-id": "0.0.402",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.488",
-    "@teambit/aspect-loader": "0.0.747",
+    "@teambit/aspect-loader": "0.0.750",
     "@teambit/legacy-bit-id": "0.0.399",
     "@teambit/toolbox.path.match-patterns": "0.0.1",
     "@teambit/toolbox.string.capitalize": "0.0.483",
-    "@teambit/cli": "0.0.493",
-    "@teambit/config": "0.0.506",
-    "@teambit/express": "0.0.591",
-    "@teambit/graphql": "0.0.747",
+    "@teambit/cli": "0.0.495",
+    "@teambit/config": "0.0.508",
+    "@teambit/express": "0.0.593",
+    "@teambit/graphql": "0.0.750",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.747",
+    "@teambit/command-bar": "0.0.750",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
-    "@teambit/preview": "0.0.747",
-    "@teambit/pubsub": "0.0.747",
-    "@teambit/react-router": "0.0.747",
+    "@teambit/preview": "0.0.750",
+    "@teambit/pubsub": "0.0.750",
+    "@teambit/react-router": "0.0.750",
     "@teambit/ui-foundation.ui.is-browser": "0.0.486",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.487",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.490",
     "@teambit/ui-foundation.ui.use-box.menu": "0.0.115",
-    "@teambit/ui": "0.0.747",
+    "@teambit/ui": "0.0.750",
     "@teambit/component-issues": "0.0.53",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
     "@teambit/cli-table": "0.0.34",
-    "@teambit/component-descriptor": "0.0.55",
-    "@teambit/lanes.ui.lanes": "0.0.60",
+    "@teambit/lanes.ui.lanes": "0.0.62",
+    "@teambit/component-descriptor": "0.0.57",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487",
     "@teambit/design.ui.empty-box": "0.0.353",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
     "@teambit/design.ui.pages.not-found": "0.0.355",
     "@teambit/design.ui.pages.server-error": "0.0.355",
-    "@teambit/compositions": "0.0.747",
-    "@teambit/deprecation": "0.0.747",
-    "@teambit/envs": "0.0.747",
+    "@teambit/compositions": "0.0.750",
+    "@teambit/deprecation": "0.0.750",
+    "@teambit/envs": "0.0.750",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
     "@teambit/envs.ui.env-icon": "0.0.486",
-    "@teambit/component.ui.version-dropdown": "0.0.546",
+    "@teambit/component.ui.version-dropdown": "0.0.548",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.115",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487"
@@ -88,7 +88,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.273",
+    "@teambit/legacy": "1.0.275",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -116,7 +116,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.273",
+        "@teambit/legacy": "1.0.275",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/{preview-1653967602594.js → preview-1654226751250.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.747/dist/component.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.747/dist/component.docs.mdx')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.750/dist/component.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.750/dist/component.docs.mdx')]

package/tsconfig.json

@@ -30,6 +30,11 @@
     "preserveConstEnums": true
   },
   "exclude": [
-    "dist"
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
   ]
 }

package/ui/component-model/component-model.ts

@@ -34,6 +34,7 @@ export type ComponentModelProps = {
 
 export type ComponentPreview = {
   includesEnvTemplate?: boolean;
+  legacyHeader?: boolean;
 };
 
 export type ComponentServer = {

package/ui/component.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, ReactNode, useMemo } from 'react';
 import flatten from 'lodash.flatten';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
+import { useLanesContext } from '@teambit/lanes.ui.lanes';
 
 import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
@@ -27,7 +28,17 @@ export type ComponentProps = {
  */
 export function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps) {
   const componentId = useIdFromLocation();
-  const { component, componentDescriptor, error } = useComponent(host, componentId);
+  const lanesContext = useLanesContext();
+  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;
+  const useComponentOptions = laneComponent && {
+        logFilters: { log: { logHead: laneComponent.version } },
+      }
+
+  const { component, componentDescriptor, error } = useComponent(
+    host,
+    laneComponent?.id.toString() || componentId,
+    useComponentOptions
+  );
   // trigger onComponentChange when component changes
   useEffect(() => onComponentChange?.(component), [component]);
   // cleanup when unmounting component

package/ui/menu/menu.tsx

@@ -50,7 +50,13 @@ export function ComponentMenu({
   consumeMethodSlot,
 }: MenuProps) {
   const componentId = useIdFromLocation();
-  const { component } = useComponent(host, componentId);
+  const lanesContext = useLanesContext();
+  const laneComponent = componentId ? lanesContext?.resolveComponent(componentId) : undefined;
+  const useComponentOptions = laneComponent && {
+    logFilters: { log: { logHead: laneComponent.version } },
+  };
+
+  const { component } = useComponent(host, laneComponent?.id.toString() || componentId, useComponentOptions);
   const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);
   if (!component) return <FullLoader />;
   return (

package/ui/menu/mobile-menu-nav.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import React, { ReactNode, useMemo } from 'react';
+import { useResolvedPath } from 'react-router-dom';
 import classnames from 'classnames';
 import { Icon } from '@teambit/design.elements.icon';
 import { Dropdown } from '@teambit/design.inputs.dropdown';
+import { useLocation } from '@teambit/base-react.navigation.link';
 import { TopBarNav } from '../top-bar-nav';
 import styles from './menu.module.scss';
 import mobileStyles from './mobile-menu-nav.module.scss';
@@ -64,18 +65,44 @@ type PlaceholderProps = {
 function Placeholder({ slots, ...rest }: PlaceholderProps) {
   return (
     <div {...rest} className={mobileStyles.placeholder}>
-      <Routes>
-        {slots?.map(([id, menuItem]) => (
-          <Route
-            key={id}
-            path={menuItem?.props?.href}
-            element={
-              typeof menuItem?.props?.children === 'string' ? menuItem?.props?.children : menuItem?.props?.displayName
-            }
-          />
-        ))}
-      </Routes>
+      {slots.map(([id, menuItem]) => (
+        <ShowWhenMatch key={id} href={menuItem.props.href || ''} end={menuItem.props.exact}>
+          {typeof menuItem.props.children === 'string' ? menuItem.props.children : menuItem.props.displayName}
+        </ShowWhenMatch>
+      ))}
       <Icon of="fat-arrow-down" />
     </div>
   );
 }
+
+function ShowWhenMatch({
+  href,
+  children,
+  caseSensitive,
+  end: exact,
+}: {
+  href: string;
+  children: ReactNode;
+  caseSensitive?: boolean;
+  end?: boolean;
+}) {
+  const isMatch = useLinkMatch(href, { caseSensitive, exact });
+  if (!isMatch) return null;
+  return <>{children}</>;
+}
+
+function useLinkMatch(href: string, { caseSensitive, exact }: { caseSensitive?: boolean; exact?: boolean } = {}) {
+  const location = useLocation();
+  let pathname = location?.pathname || '/';
+  let destination = useResolvedPath(href).pathname;
+
+  if (!caseSensitive) {
+    pathname = pathname.toLowerCase();
+    destination = destination.toLowerCase();
+  }
+
+  return (
+    destination === pathname ||
+    (!exact && pathname.startsWith(destination) && pathname.charAt(destination.length) === '/')
+  );
+}

package/ui/use-component-query.ts

@@ -45,6 +45,7 @@ export const componentOverviewFields = gql`
     }
     preview {
       includesEnvTemplate
+      legacyHeader
     }
     compositions {
       identifier
@@ -141,13 +142,11 @@ const SUB_COMPONENT_REMOVED = gql`
   }
   ${componentIdFields}
 `;
-
+export type Filters = {
+  log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string };
+};
 /** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
-export function useComponentQuery(
-  componentId: string,
-  host: string,
-  filters?: { log?: { logType?: string; logOffset?: number; logLimit?: number; logHead?: string; logSort?: string } }
-) {
+export function useComponentQuery(componentId: string, host: string, filters?: Filters) {
   const idRef = useRef(componentId);
   idRef.current = componentId;
   const { data, error, loading, subscribeToMore } = useDataQuery(GET_COMPONENT, {

package/ui/use-component.tsx

@@ -1,40 +1,27 @@
-import { ComponentID } from '@teambit/component-id';
 import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
-import { useLanesContext } from '@teambit/lanes.ui.lanes';
 import { ComponentModel } from './component-model';
 import { ComponentError } from './component-error';
-import { useComponentQuery } from './use-component-query';
+import { Filters, useComponentQuery } from './use-component-query';
 
 export type Component = {
   component?: ComponentModel;
   error?: ComponentError;
   componentDescriptor?: ComponentDescriptor;
 };
+export type UseComponentOptions = {
+  version?: string;
+  logFilters?: Filters
+};
 
-export function useComponent(host: string, id?: string | ComponentID): Component {
+export function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {
   const query = useQuery();
-  const version = query.get('version') || undefined;
-  const lanesContext = useLanesContext();
-
-  const targetId =
-    (typeof id === 'string' && id) || (typeof id !== 'undefined' && id.toString({ ignoreVersion: true }));
-  if (!targetId) throw new TypeError('useComponent received no component id');
-  const currentLane = lanesContext?.viewedLane;
-  // when on a lane, always fetch all the logs starting from the 'head' version
-  const laneComponentId = lanesContext?.viewedLane?.components.find(
-    (component) => component.id.fullName === targetId
-  )?.id;
-
-  const componentIdStr = laneComponentId ? laneComponentId?.toString() : withVersion(targetId, version);
+  const { version, logFilters } = options || {};
+  const componentVersion = (version || query.get('version')) ?? undefined;
+  
+  if (!id) throw new TypeError('useComponent received no component id');
 
-  const logFilters = currentLane
-    ? {
-        log: {
-          logHead: laneComponentId?.version,
-        },
-      }
-    : undefined;
+  const componentIdStr = withVersion(id, componentVersion);
 
   return useComponentQuery(componentIdStr, host, logFilters);
 }