@teambit/component 0.0.784 → 0.0.787

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { AspectEntry, AspectData, ResolveComponentIdFunc } from './aspect-entry'
 export { Snap, SnapProps } from './snap/snap';
 export type { Author } from './snap/author';
 export { Tag, TagProps } from './tag/tag';
+export type { IComponent } from './component-interface';
 export { State } from './state';
 export type { Hash } from './hash';
 export { TagMap } from './tag-map';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData, ResolveComponentIdFunc } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext, ComponentDescriptorContext, useComponentDescriptor } from './ui/context/component-context';\nexport type { ComponentProviderProps, ComponentDescriptorProviderProps } from './ui/context';\nexport { ComponentProvider, ComponentDescriptorProvider } from './ui/context';\nexport { componentFields, componentIdFields, componentOverviewFields } from './ui';\nexport { ConsumePlugin } from './ui/menu';\nexport { RegisteredComponentRoute, ComponentUrlParams } from './component.route';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport { TopBarNav, TopBarNavProps } from './ui/top-bar-nav';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\nexport { useComponent } from './ui';\n\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;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;;AAGA;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;;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;;AAvBA;AACA;AAGA;AACA;AAqBA;AACA;eAEeA,4B"}
+{"version":3,"names":["ComponentAspect"],"sources":["index.ts"],"sourcesContent":["import { ComponentAspect } from './component.aspect';\n\nexport { useComponentHost } from './host';\nexport { Component, InvalidComponent } from './component';\nexport { ComponentID } from '@teambit/component-id';\nexport { default as ComponentFS } from './component-fs';\nexport type { default as ComponentConfig } from './config';\nexport type { ComponentFactory } from './component-factory';\nexport type { AspectList } from './aspect-list';\nexport { AspectEntry, AspectData, ResolveComponentIdFunc } from './aspect-entry';\n// TODO: check why it's not working when using the index in snap dir like this:\n// export { Snap, Author } from './snap';\nexport { Snap, SnapProps } from './snap/snap';\nexport type { Author } from './snap/author';\n// TODO: check why it's not working when using the index in tag dir like this:\n// export { Tag } from './tag';\nexport { Tag, TagProps } from './tag/tag';\nexport type { IComponent } from './component-interface';\nexport { State } from './state';\nexport type { Hash } from './hash';\nexport { TagMap } from './tag-map';\nexport { ComponentMap } from './component-map';\nexport type { ComponentMain } from './component.main.runtime';\nexport type { ComponentUI } from './component.ui.runtime';\nexport { Section } from './section';\nexport { ComponentContext, ComponentDescriptorContext, useComponentDescriptor } from './ui/context/component-context';\nexport type { ComponentProviderProps, ComponentDescriptorProviderProps } from './ui/context';\nexport { ComponentProvider, ComponentDescriptorProvider } from './ui/context';\nexport { componentFields, componentIdFields, componentOverviewFields } from './ui';\nexport { ConsumePlugin } from './ui/menu';\nexport { RegisteredComponentRoute, ComponentUrlParams } from './component.route';\nexport { ComponentModel, ComponentModelProps } from './ui/component-model';\nexport { TopBarNav, TopBarNavProps } from './ui/top-bar-nav';\nexport type { ShowFragment, ShowRow } from './show';\nexport { default as Config } from './config';\nexport { useComponent } from './ui';\n\n// export { AspectList } from './aspect-list';\n// export { AspectEntry } from './aspect-entry';\nexport { ComponentAspect };\nexport default ComponentAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAGA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAIA;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;;AAGA;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;;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;;AAxBA;AACA;AAGA;AACA;AAsBA;AACA;eAEeA,4B"}

package/dist/ui/component.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
+import { UseComponentType } from './use-component';
 import { ComponentModel } from './component-model';
 export declare type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export declare type ComponentPageElement = {
@@ -12,8 +13,10 @@ export declare type ComponentProps = {
     routeSlot: RouteSlot;
     host: string;
     onComponentChange?: (activeComponent?: ComponentModel) => void;
+    useComponent?: UseComponentType;
+    componentIdStr?: string;
 };
 /**
  * main UI component of the Component extension.
  */
-export declare function Component({ routeSlot, containerSlot, host, onComponentChange }: ComponentProps): JSX.Element;
+export declare function Component({ routeSlot, containerSlot, host, onComponentChange, componentIdStr, useComponent, }: ComponentProps): JSX.Element;

package/dist/ui/component.js

@@ -89,6 +89,16 @@ function _useComponentFromLocation() {
   return data;
 }
 
+function _() {
+  const data = require("..");
+
+  _ = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -100,23 +110,28 @@ function Component({
   routeSlot,
   containerSlot,
   host,
-  onComponentChange
+  onComponentChange,
+  componentIdStr,
+  useComponent
 }) {
-  const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
+  const idFromLocation = (0, _useComponentFromLocation().useIdFromLocation)();
+  const componentId = componentIdStr ? _().ComponentID.fromString(componentIdStr) : undefined;
+  const fullName = (componentId === null || componentId === void 0 ? void 0 : componentId.fullName) || idFromLocation;
   const lanesContext = (0, _lanesUi().useLanesContext)();
-  const laneComponent = componentId ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(componentId) : undefined;
-  const useComponentOptions = laneComponent && {
-    logFilters: {
+  const laneComponent = fullName ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(fullName) : undefined;
+  const useComponentOptions = {
+    logFilters: laneComponent && {
       log: {
         logHead: laneComponent.version
       }
-    }
+    },
+    customUseComponent: useComponent
   };
   const {
     component,
     componentDescriptor,
     error
-  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || componentId, useComponentOptions); // trigger onComponentChange when component changes
+  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || (componentId === null || componentId === void 0 ? void 0 : componentId.toString()) || idFromLocation, useComponentOptions); // trigger onComponentChange when component changes
 
   (0, _react().useEffect)(() => onComponentChange === null || onComponentChange === void 0 ? void 0 : onComponentChange(component), [component]); // cleanup when unmounting component
 
@@ -133,7 +148,7 @@ function Component({
   }, before, /*#__PURE__*/_react().default.createElement("div", {
     className: _componentModule().default.container
   }, routeSlot && /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
-    parentPath: `${componentId}/*`,
+    parentPath: `${fullName}/*`,
     slot: routeSlot
   })), after));
 }

package/dist/ui/component.js.map

@@ -1 +1 @@
-{"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;IAC3CI,UAAU,EAAE;MAAEC,GAAG,EAAE;QAAEC,OAAO,EAAEN,aAAa,CAACO;MAAzB;IAAP;EAD+B,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"}
+{"version":3,"names":["Component","routeSlot","containerSlot","host","onComponentChange","componentIdStr","useComponent","idFromLocation","useIdFromLocation","componentId","ComponentID","fromString","undefined","fullName","lanesContext","useLanesContext","laneComponent","resolveComponent","useComponentOptions","logFilters","log","logHead","version","customUseComponent","component","componentDescriptor","error","useComponentQuery","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';\nimport styles from './component.module.scss';\nimport { ComponentProvider, ComponentDescriptorProvider } from './context';\nimport { useComponent as useComponentQuery, UseComponentType } from './use-component';\nimport { ComponentModel } from './component-model';\nimport { useIdFromLocation } from './use-component-from-location';\nimport { ComponentID } from '..';\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  useComponent?: UseComponentType;\n  componentIdStr?: string;\n};\n\n/**\n * main UI component of the Component extension.\n */\nexport function Component({\n  routeSlot,\n  containerSlot,\n  host,\n  onComponentChange,\n  componentIdStr,\n  useComponent,\n}: ComponentProps) {\n  const idFromLocation = useIdFromLocation();\n  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;\n  const fullName = componentId?.fullName || idFromLocation;\n  const lanesContext = useLanesContext();\n  const laneComponent = fullName\n    ? lanesContext?.resolveComponent(fullName)\n    : undefined;\n  const useComponentOptions = {\n    logFilters: laneComponent && { log: { logHead: laneComponent.version } },\n    customUseComponent: useComponent,\n  };\n\n  const { component, componentDescriptor, error } = useComponentQuery(\n    host,\n    laneComponent?.id.toString() || componentId?.toString() || idFromLocation,\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={`${fullName}/*`} slot={routeSlot} />}\n        </div>\n        {after}\n      </ComponentProvider>\n    </ComponentDescriptorProvider>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/menu/menu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuItemSlot } from '@teambit/ui-foundation.ui.main-dropdown';
+import { UseComponentType } from '../use-component';
 import { OrderedNavigationSlot, ConsumeMethodSlot } from './nav-plugin';
 export declare type MenuProps = {
     className?: string;
@@ -17,8 +18,10 @@ export declare type MenuProps = {
      */
     menuItemSlot: MenuItemSlot;
     consumeMethodSlot: ConsumeMethodSlot;
+    componentIdStr?: string;
+    useComponent?: UseComponentType;
 };
 /**
  * top bar menu.
  */
-export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, }: MenuProps): JSX.Element;
+export declare function ComponentMenu({ navigationSlot, widgetSlot, className, host, menuItemSlot, consumeMethodSlot, componentIdStr, useComponent, }: MenuProps): JSX.Element;

package/dist/ui/menu/menu.js

@@ -181,6 +181,16 @@ function _useComponentFromLocation() {
   return data;
 }
 
+function _() {
+  const data = require("../..");
+
+  _ = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -198,25 +208,30 @@ function ComponentMenu({
   className,
   host,
   menuItemSlot,
-  consumeMethodSlot
+  consumeMethodSlot,
+  componentIdStr,
+  useComponent
 }) {
-  const componentId = (0, _useComponentFromLocation().useIdFromLocation)();
+  const idFromLocation = (0, _useComponentFromLocation().useIdFromLocation)();
+  const componentId = componentIdStr ? _().ComponentID.fromString(componentIdStr) : undefined;
+  const fullName = (componentId === null || componentId === void 0 ? void 0 : componentId.fullName) || idFromLocation;
   const lanesContext = (0, _lanesUi().useLanesContext)();
-  const laneComponent = componentId ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(componentId) : undefined;
-  const useComponentOptions = laneComponent && {
-    logFilters: {
+  const laneComponent = fullName ? lanesContext === null || lanesContext === void 0 ? void 0 : lanesContext.resolveComponent(fullName) : undefined;
+  const useComponentOptions = {
+    logFilters: laneComponent && {
       log: {
         logHead: laneComponent.version
       }
-    }
+    },
+    customUseComponent: useComponent
   };
   const {
     component
-  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || componentId, useComponentOptions);
+  } = (0, _useComponent().useComponent)(host, (laneComponent === null || laneComponent === void 0 ? void 0 : laneComponent.id.toString()) || (componentId === null || componentId === void 0 ? void 0 : componentId.toStringWithoutVersion()) || fullName, 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, {
-    path: `${componentId}/*`,
+    path: `${fullName}/*`,
     element: /*#__PURE__*/_react().default.createElement("div", {
       className: (0, _classnames().default)(_menuModule().default.topBar, className)
     }, /*#__PURE__*/_react().default.createElement("div", {

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

@@ -1 +1 @@
-{"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","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tags","tagLookup","Map","forEach","set","compact","toArray","get","isNew","length","lanes","getLanesByComponentId","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","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 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 isNew = snaps.length === 0 && tags.length === 0;\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        menuClassName={styles.componentVersionMenu}\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","componentIdStr","useComponent","idFromLocation","useIdFromLocation","componentId","ComponentID","fromString","undefined","fullName","lanesContext","useLanesContext","laneComponent","resolveComponent","useComponentOptions","logFilters","log","logHead","version","customUseComponent","component","useComponentQuery","id","toString","toStringWithoutVersion","mainMenuItems","useMemo","groupBy","flatten","values","classnames","styles","topBar","leftSide","rightSide","widgets","VersionRelatedDropdowns","consumeMethods","location","useLocation","currentLane","viewedLane","logs","isWorkspace","snaps","filter","tag","map","snap","hash","reverse","tags","tagLookup","Map","forEach","set","compact","toArray","get","isNew","length","lanes","getLanesByComponentId","localVersion","currentVersion","search","includes","methods","useConsumeMethods","useBox","name","latest","componentVersionMenu","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 as useComponentQuery, UseComponentType } 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';\nimport { ComponentID } from '../..';\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  componentIdStr?: string;\n\n  useComponent?: UseComponentType;\n};\n\n/**\n * top bar menu.\n */\nexport function ComponentMenu({\n  navigationSlot,\n  widgetSlot,\n  className,\n  host,\n  menuItemSlot,\n  consumeMethodSlot,\n  componentIdStr,\n  useComponent,\n}: MenuProps) {\n  const idFromLocation = useIdFromLocation();\n  const componentId = componentIdStr ? ComponentID.fromString(componentIdStr) : undefined;\n  const fullName = componentId?.fullName || idFromLocation;\n  const lanesContext = useLanesContext();\n  const laneComponent = fullName ? lanesContext?.resolveComponent(fullName) : undefined;\n  const useComponentOptions = {\n    logFilters: laneComponent && { log: { logHead: laneComponent.version } },\n    customUseComponent: useComponent,\n  };\n\n  const { component } = useComponentQuery(\n    host,\n    laneComponent?.id.toString() || componentId?.toStringWithoutVersion() || fullName,\n    useComponentOptions\n  );\n  const mainMenuItems = useMemo(() => groupBy(flatten(menuItemSlot.values()), 'category'), [menuItemSlot]);\n  if (!component) return <FullLoader />;\n  return (\n    <Routes>\n      <Route\n        path={`${fullName}/*`}\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 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 isNew = snaps.length === 0 && tags.length === 0;\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        menuClassName={styles.componentVersionMenu}\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":";;;;;;;;;;;;;;;;;;;;;;;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;;AAEA;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;;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;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AAEA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;AACA;EAAA;;EAAA;IAAA;EAAA;;EAAA;AAAA;;;;;;;;;;AAyBA;AACA;AACA;AACO,SAASA,aAAT,CAAuB;EAC5BC,cAD4B;EAE5BC,UAF4B;EAG5BC,SAH4B;EAI5BC,IAJ4B;EAK5BC,YAL4B;EAM5BC,iBAN4B;EAO5BC,cAP4B;EAQ5BC;AAR4B,CAAvB,EASO;EACZ,MAAMC,cAAc,GAAG,IAAAC,6CAAA,GAAvB;EACA,MAAMC,WAAW,GAAGJ,cAAc,GAAGK,eAAA,CAAYC,UAAZ,CAAuBN,cAAvB,CAAH,GAA4CO,SAA9E;EACA,MAAMC,QAAQ,GAAG,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,QAAb,KAAyBN,cAA1C;EACA,MAAMO,YAAY,GAAG,IAAAC,0BAAA,GAArB;EACA,MAAMC,aAAa,GAAGH,QAAQ,GAAGC,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEG,gBAAd,CAA+BJ,QAA/B,CAAH,GAA8CD,SAA5E;EACA,MAAMM,mBAAmB,GAAG;IAC1BC,UAAU,EAAEH,aAAa,IAAI;MAAEI,GAAG,EAAE;QAAEC,OAAO,EAAEL,aAAa,CAACM;MAAzB;IAAP,CADH;IAE1BC,kBAAkB,EAAEjB;EAFM,CAA5B;EAKA,MAAM;IAAEkB;EAAF,IAAgB,IAAAC,4BAAA,EACpBvB,IADoB,EAEpB,CAAAc,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEU,EAAf,CAAkBC,QAAlB,QAAgClB,WAAhC,aAAgCA,WAAhC,uBAAgCA,WAAW,CAAEmB,sBAAb,EAAhC,KAAyEf,QAFrD,EAGpBK,mBAHoB,CAAtB;EAKA,MAAMW,aAAa,GAAG,IAAAC,gBAAA,EAAQ,MAAM,IAAAC,iBAAA,EAAQ,IAAAC,iBAAA,EAAQ7B,YAAY,CAAC8B,MAAb,EAAR,CAAR,EAAwC,UAAxC,CAAd,EAAmE,CAAC9B,YAAD,CAAnE,CAAtB;EACA,IAAI,CAACqB,SAAL,EAAgB,oBAAO,+BAAC,6BAAD,OAAP;EAChB,oBACE,+BAAC,wBAAD,qBACE,+BAAC,uBAAD;IACE,IAAI,EAAG,GAAEX,QAAS,IADpB;IAEE,OAAO,eACL;MAAK,SAAS,EAAE,IAAAqB,qBAAA,EAAWC,qBAAA,CAAOC,MAAlB,EAA0BnC,SAA1B;IAAhB,gBACE;MAAK,SAAS,EAAEkC,qBAAA,CAAOE;IAAvB,gBACE,+BAAC,kBAAD;MAAS,cAAc,EAAEtC;IAAzB,EADF,eAEE,+BAAC,8BAAD;MAAe,cAAc,EAAEA,cAA/B;MAA+C,UAAU,EAAEC;IAA3D,EAFF,CADF,eAKE;MAAK,SAAS,EAAEmC,qBAAA,CAAOG;IAAvB,gBACE;MAAK,SAAS,EAAEH,qBAAA,CAAOI;IAAvB,gBACE,+BAAC,kBAAD;MAAS,cAAc,EAAEvC;IAAzB,EADF,CADF,eAIE,+BAAC,uBAAD;MAAyB,SAAS,EAAEwB,SAApC;MAA+C,cAAc,EAAEpB,iBAA/D;MAAkF,IAAI,EAAEF;IAAxF,EAJF,eAKE,+BAAC,8BAAD;MAAc,SAAS,EAAE2B;IAAzB,EALF,CALF;EAHJ,EADF,CADF;AAsBD;;AAED,SAASW,uBAAT,CAAiC;EAC/BhB,SAD+B;EAE/BiB,cAF+B;EAG/BvC;AAH+B,CAAjC,EAQG;EACD,MAAMwC,QAAQ,GAAG,IAAAC,kCAAA,GAAjB;EACA,MAAM7B,YAAY,GAAG,IAAAC,0BAAA,GAArB;EACA,MAAM6B,WAAW,GAAG9B,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAE+B,UAAlC;EACA,MAAM;IAAEC;EAAF,IAAWtB,SAAjB;EACA,MAAMuB,WAAW,GAAG7C,IAAI,KAAK,6BAA7B;EAEA,MAAM8C,KAAK,GAAG,IAAAlB,gBAAA,EAAQ,MAAM;IAC1B,OAAO,CAACgB,IAAI,IAAI,EAAT,EACJG,MADI,CACI7B,GAAD,IAAS,CAACA,GAAG,CAAC8B,GADjB,EAEJC,GAFI,CAECC,IAAD,oCAAgBA,IAAhB;MAAsB9B,OAAO,EAAE8B,IAAI,CAACC;IAApC,EAFA,EAGJC,OAHI,EAAP;EAID,CALa,EAKX,CAACR,IAAD,CALW,CAAd;EAOA,MAAMS,IAAI,GAAG,IAAAzB,gBAAA,EAAQ,MAAM;IAAA;;IACzB,MAAM0B,SAAS,GAAG,IAAIC,GAAJ,EAAlB;IACA,CAACX,IAAI,IAAI,EAAT,EACGG,MADH,CACW7B,GAAD,IAASA,GAAG,CAAC8B,GADvB,EAEGQ,OAFH,CAEYR,GAAD,IAAS;MAChBM,SAAS,CAACG,GAAV,CAAcT,GAAd,aAAcA,GAAd,uBAAcA,GAAG,CAAEA,GAAnB,EAAkCA,GAAlC;IACD,CAJH;IAKA,OAAO,IAAAU,iBAAA,qBACLpC,SAAS,CAAC+B,IADL,oDACL,gBACIM,OADJ,GAEGP,OAFH,GAGGH,GAHH,CAGQD,GAAD,IAASM,SAAS,CAACM,GAAV,CAAcZ,GAAG,CAAC5B,OAAJ,CAAYA,OAA1B,CAHhB,CADK,EAKL6B,GALK,CAKAD,GAAD,oCAAeA,GAAf;MAAoB5B,OAAO,EAAE4B,GAAG,CAACA;IAAjC,EALC,CAAP;EAMD,CAbY,EAaV,CAACJ,IAAD,CAbU,CAAb;EAeA,MAAMiB,KAAK,GAAGf,KAAK,CAACgB,MAAN,KAAiB,CAAjB,IAAsBT,IAAI,CAACS,MAAL,KAAgB,CAApD;EAEA,MAAMC,KAAK,GAAG,CAAAnD,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY,CAAEoD,qBAAd,CAAoC1C,SAAS,CAACE,EAA9C,MAAqD,EAAnE;EACA,MAAMyC,YAAY,GAAGpB,WAAW,IAAI,CAACgB,KAAhB,IAAyB,CAACnB,WAA/C;EAEA,MAAMwB,cAAc,GAClBrB,WAAW,IAAI,CAACgB,KAAhB,IAAyB,EAACrB,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAE2B,MAAV,CAAiBC,QAAjB,CAA0B,SAA1B,CAAD,CAAzB,GAAiE,WAAjE,GAA+E9C,SAAS,CAACF,OAD3F;EAGA,MAAMiD,OAAO,GAAGC,iBAAiB,CAAC/B,cAAD,EAAiBjB,SAAjB,EAA4BoB,WAA5B,CAAjC;EACA,oBACE,gEACGW,IAAI,CAACS,MAAL,GAAc,CAAd,iBACC,+BAAC,sCAAD;IACE,QAAQ,EAAC,YADX;IAEE,SAAS,EAAE7B,qBAAA,CAAOsC,MAFpB;IAGE,IAAI,eAAE,+BAAC,6BAAD;MAAoB,OAAO,EAAEF,OAA7B;MAAsC,aAAa,EAAE/C,SAAS,CAACE,EAAV,CAAagD;IAAlE;EAHR,EAFJ,eAQE,+BAAC,8BAAD;IACE,IAAI,EAAEnB,IADR;IAEE,KAAK,EAAEP,KAFT;IAGE,KAAK,EAAEiB,KAHT;IAIE,YAAY,EAAEE,YAJhB;IAKE,cAAc,EAAEC,cALlB;IAME,aAAa,EAAE5C,SAAS,CAACmD,MAN3B;IAOE,WAAW,EAAE/B,WAPf;IAQE,aAAa,EAAET,qBAAA,CAAOyC;EARxB,EARF,CADF;AAqBD;;AAED,SAASJ,iBAAT,CACE/B,cADF,EAEEoC,cAFF,EAGEjC,WAHF,EAImB;EACjB,OAAO,IAAAd,gBAAA,EACL,MACE,IAAAE,iBAAA,EAAQS,cAAc,CAACR,MAAf,EAAR,EACGkB,GADH,CACQ2B,MAAD,IAAY;IACf,OAAOA,MAAP,aAAOA,MAAP,uBAAOA,MAAM,CAAGD,cAAH,EAAmB;MAAEjC;IAAF,CAAnB,CAAb;EACD,CAHH,EAIGK,MAJH,CAIW8B,CAAD,IAAO,CAAC,CAACA,CAAF,IAAOA,CAAC,CAACC,SAAT,IAAsBD,CAAC,CAACE,KAJzC,CAFG,EAOL,CAACxC,cAAD,EAAiBoC,cAAjB,EAAiCjC,WAAjC,CAPK,CAAP;AASD"}

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

@@ -119,8 +119,8 @@ const componentOverviewFields = (0, _client().gql)`
       # 'id' property in gql refers to a *global* identifier and used for caching.
       # this makes aspect data cache under the same key, even when they are under different components.
       # renaming the property fixes that.
-      aspectId: id
-      aspectData: data
+      id
+      data
     }
     elementsUrl
     description
@@ -345,7 +345,12 @@ function useComponentQuery(componentId, host, filters) {
   const rawComponent = data === null || data === void 0 ? void 0 : (_data$getHost = data.getHost) === null || _data$getHost === void 0 ? void 0 : _data$getHost.get;
   return (0, _react().useMemo)(() => {
     const aspectList = {
-      entries: rawComponent === null || rawComponent === void 0 ? void 0 : rawComponent.aspects
+      entries: rawComponent === null || rawComponent === void 0 ? void 0 : rawComponent.aspects.map(aspectObject => {
+        return _objectSpread(_objectSpread({}, aspectObject), {}, {
+          aspectId: aspectObject.id,
+          aspectData: aspectObject.data
+        });
+      })
     };
 
     const id = rawComponent && _componentId().ComponentID.fromObject(rawComponent.id);

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","useDataQuery","variables","id","extensionId","log","data","error","loading","subscribeToMore","rest","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.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      newId\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    size {\n      compressedTotal\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, ...rest } = 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      loading,\n      ...rest,\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;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CA1CO;;AA4CA,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;AA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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","useDataQuery","variables","id","extensionId","log","data","error","loading","subscribeToMore","rest","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","map","aspectObject","aspectId","aspectData","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.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      id\n      data\n    }\n    elementsUrl\n    description\n    deprecation {\n      isDeprecate\n      newId\n    }\n    labels\n    displayName\n    server {\n      env\n      url\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    size {\n      compressedTotal\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, ...rest } = 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.map((aspectObject) => {\n        return {\n          ...aspectObject,\n          aspectId: aspectObject.id,\n          aspectData: aspectObject.data\n        };\n      }),\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      loading,\n      ...rest,\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;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CA1CO;;AA4CA,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;AA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"}

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

@@ -11,5 +11,7 @@ export declare type Component = {
 export declare type UseComponentOptions = {
     version?: string;
     logFilters?: Filters;
+    customUseComponent?: UseComponentType;
 };
+export declare type UseComponentType = (id: string, host: string, filters?: Filters) => Component;
 export declare function useComponent(host: string, id?: string, options?: UseComponentOptions): Component;

package/dist/ui/use-component.js

@@ -31,12 +31,16 @@ function useComponent(host, id, options) {
   const query = (0, _uiFoundationUiReactRouter().useQuery)();
   const {
     version,
-    logFilters
+    logFilters,
+    customUseComponent
   } = 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);
+
+  const targetUseComponent = customUseComponent || _useComponentQuery().useComponentQuery;
+
+  return targetUseComponent(componentIdStr, host, logFilters);
 }
 
 function withVersion(id, version) {

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

@@ -1 +1 @@
-{"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  loading?: boolean;\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;;AAaO,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"}
+{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","customUseComponent","componentVersion","get","undefined","TypeError","componentIdStr","withVersion","targetUseComponent","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  loading?: boolean;\n};\nexport type UseComponentOptions = {\n  version?: string;\n  logFilters?: Filters;\n  customUseComponent?: UseComponentType\n};\n\nexport type UseComponentType = (id: string, host: string, filters?: Filters) => Component\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {\n  const query = useQuery();\n  const { version, logFilters, customUseComponent } = 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  const targetUseComponent = customUseComponent || useComponentQuery;\n\n  return targetUseComponent(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;;AAgBO,SAASA,YAAT,CAAsBC,IAAtB,EAAoCC,EAApC,EAAiDC,OAAjD,EAA2F;EAAA;;EAChG,MAAMC,KAAK,GAAG,IAAAC,qCAAA,GAAd;EACA,MAAM;IAAEC,OAAF;IAAWC,UAAX;IAAuBC;EAAvB,IAA8CL,OAAO,IAAI,EAA/D;EACA,MAAMM,gBAAgB,WAAIH,OAAO,IAAIF,KAAK,CAACM,GAAN,CAAU,SAAV,CAAf,uCAAwCC,SAA9D;EAEA,IAAI,CAACT,EAAL,EAAS,MAAM,IAAIU,SAAJ,CAAc,uCAAd,CAAN;EAET,MAAMC,cAAc,GAAGC,WAAW,CAACZ,EAAD,EAAKO,gBAAL,CAAlC;;EACA,MAAMM,kBAAkB,GAAGP,kBAAkB,IAAIQ,sCAAjD;;EAEA,OAAOD,kBAAkB,CAACF,cAAD,EAAiBZ,IAAjB,EAAuBM,UAAvB,CAAzB;AACD;;AAED,SAASO,WAAT,CAAqBZ,EAArB,EAAiCI,OAAjC,EAAmD;EACjD,IAAI,CAACA,OAAL,EAAc,OAAOJ,EAAP;EACd,IAAIA,EAAE,CAACe,QAAH,CAAY,GAAZ,CAAJ,EAAsB,OAAOf,EAAP;EACtB,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAxB;AACD"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.784",
+  "version": "0.0.787",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.784"
+    "version": "0.0.787"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -31,42 +31,41 @@
     "@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.784",
+    "@teambit/aspect-loader": "0.0.787",
     "@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.518",
-    "@teambit/config": "0.0.531",
-    "@teambit/express": "0.0.616",
-    "@teambit/graphql": "0.0.784",
+    "@teambit/cli": "0.0.520",
+    "@teambit/express": "0.0.618",
+    "@teambit/graphql": "0.0.787",
     "@teambit/bit-error": "0.0.394",
-    "@teambit/command-bar": "0.0.784",
+    "@teambit/command-bar": "0.0.787",
     "@teambit/component.ui.deprecation-icon": "0.0.494",
-    "@teambit/preview": "0.0.784",
-    "@teambit/pubsub": "0.0.784",
-    "@teambit/react-router": "0.0.784",
+    "@teambit/preview": "0.0.787",
+    "@teambit/pubsub": "0.0.787",
+    "@teambit/react-router": "0.0.787",
     "@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.116",
-    "@teambit/ui": "0.0.784",
-    "@teambit/component-issues": "0.0.56",
+    "@teambit/ui": "0.0.787",
+    "@teambit/component-issues": "0.0.57",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.488",
     "@teambit/cli-table": "0.0.34",
-    "@teambit/lanes.ui.lanes": "0.0.86",
-    "@teambit/component-descriptor": "0.0.80",
+    "@teambit/lanes.ui.lanes": "0.0.88",
+    "@teambit/component-descriptor": "0.0.82",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.487",
     "@teambit/design.ui.empty-box": "0.0.354",
     "@teambit/harmony.ui.aspect-box": "0.0.486",
     "@teambit/design.ui.pages.not-found": "0.0.356",
     "@teambit/design.ui.pages.server-error": "0.0.356",
-    "@teambit/compositions": "0.0.784",
-    "@teambit/deprecation": "0.0.784",
-    "@teambit/envs": "0.0.784",
-    "@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.574",
+    "@teambit/compositions": "0.0.787",
+    "@teambit/deprecation": "0.0.787",
+    "@teambit/envs": "0.0.787",
+    "@teambit/legacy-component-log": "0.0.392",
+    "@teambit/component.ui.version-dropdown": "0.0.576",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.116",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.488"
@@ -88,40 +87,11 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.299",
+    "@teambit/legacy": "1.0.301",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
-  "bit": {
-    "bindingPrefix": "@teambit",
-    "env": {},
-    "overrides": {
-      "dependencies": {
-        "@teambit/legacy": "-",
-        "@babel/runtime": "7.12.18",
-        "core-js": "^3.0.0",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "devDependencies": {
-        "@teambit/legacy": "-",
-        "@types/mocha": "9.1.0",
-        "@types/testing-library__jest-dom": "5.9.5",
-        "@types/jest": "^26.0.0",
-        "@types/react-dom": "^17.0.5",
-        "@types/react": "^17.0.8",
-        "@types/node": "12.20.4",
-        "react-dom": "-",
-        "react": "-"
-      },
-      "peerDependencies": {
-        "@teambit/legacy": "1.0.299",
-        "react-dom": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
-      }
-    }
-  },
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/{preview-1657251036992.js → preview-1657623030826.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.784/dist/component.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.784/dist/component.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.787/dist/component.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_component@0.0.787/dist/component.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];