@teambit/component 0.0.1079 → 0.0.1080

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

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentOverviewFields = exports.componentIdFields = exports.componentFieldsWithLogs = exports.componentFields = exports.SUB_SUBSCRIPTION_ADDED = exports.SUB_COMPONENT_REMOVED = exports.SUB_COMPONENT_CHANGED = exports.GET_COMPONENT_WITH_LOGS = exports.GET_COMPONENT = exports.COMPONENT_QUERY_LOG_FIELDS = void 0;
+function _client() {
+  const data = require("@apollo/client");
+  _client = function () {
+    return data;
+  };
+  return data;
+}
+const componentIdFields = (0, _client().gql)`
+  fragment componentIdFields on ComponentID {
+    name
+    version
+    scope
+  }
+`;
+exports.componentIdFields = componentIdFields;
+const componentOverviewFields = (0, _client().gql)`
+  fragment componentOverviewFields on Component {
+    id {
+      ...componentIdFields
+    }
+    aspects(include: ["teambit.preview/preview", "teambit.envs/envs"]) {
+      # '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.
+      id
+      data
+    }
+    elementsUrl
+    description
+    deprecation {
+      isDeprecate
+      newId
+    }
+    labels
+    displayName
+    server {
+      env
+      url
+      host
+      basePath
+    }
+    buildStatus
+    env {
+      id
+      icon
+    }
+    size {
+      compressedTotal
+    }
+    preview {
+      includesEnvTemplate
+      legacyHeader
+      isScaling
+      skipIncludes
+    }
+    compositions {
+      identifier
+      displayName
+    }
+  }
+  ${componentIdFields}
+`;
+exports.componentOverviewFields = componentOverviewFields;
+const componentFields = (0, _client().gql)`
+  fragment componentFields on Component {
+    ...componentOverviewFields
+    packageName
+    latest
+    compositions {
+      identifier
+      displayName
+    }
+    tags {
+      version
+    }
+  }
+  ${componentOverviewFields}
+`;
+exports.componentFields = componentFields;
+const componentFieldsWithLogs = (0, _client().gql)`
+  fragment componentFieldWithLogs on Component {
+    id {
+      ...componentIdFields
+    }
+    logs(
+      type: $logType
+      offset: $logOffset
+      limit: $logLimit
+      sort: $logSort
+      head: $logHead
+      takeHeadFromComponent: $logTakeHeadFromComponent
+    ) {
+      id
+      message
+      username
+      email
+      date
+      hash
+      tag
+      displayName
+    }
+  }
+  ${componentIdFields}
+`;
+exports.componentFieldsWithLogs = componentFieldsWithLogs;
+const COMPONENT_QUERY_LOG_FIELDS = `
+  $logOffset: Int
+  $logLimit: Int
+  $logType: String
+  $logHead: String
+  $logSort: String
+  $logTakeHeadFromComponent: Boolean
+`;
+exports.COMPONENT_QUERY_LOG_FIELDS = COMPONENT_QUERY_LOG_FIELDS;
+const GET_COMPONENT = (0, _client().gql)`
+  query Component($extensionId: String!, $id: String!) {
+    getHost(id: $extensionId) {
+      id # used for GQL caching
+      get(id: $id) {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+exports.GET_COMPONENT = GET_COMPONENT;
+const GET_COMPONENT_WITH_LOGS = (0, _client().gql)`
+  query Component(
+    $extensionId: String!
+    $id: String!
+    ${COMPONENT_QUERY_LOG_FIELDS}
+    ) {
+    getHost(id: $extensionId) {
+      id # used for GQL caching
+      get(id: $id) {
+        ...componentFieldWithLogs
+      }
+    }
+  }
+  ${componentFieldsWithLogs}
+`;
+exports.GET_COMPONENT_WITH_LOGS = GET_COMPONENT_WITH_LOGS;
+const SUB_SUBSCRIPTION_ADDED = (0, _client().gql)`
+  subscription OnComponentAdded {
+    componentAdded {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+exports.SUB_SUBSCRIPTION_ADDED = SUB_SUBSCRIPTION_ADDED;
+const SUB_COMPONENT_CHANGED = (0, _client().gql)`
+  subscription OnComponentChanged {
+    componentChanged {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+exports.SUB_COMPONENT_CHANGED = SUB_COMPONENT_CHANGED;
+const SUB_COMPONENT_REMOVED = (0, _client().gql)`
+  subscription OnComponentRemoved {
+    componentRemoved {
+      componentIds {
+        ...componentIdFields
+      }
+    }
+  }
+  ${componentIdFields}
+`;
+exports.SUB_COMPONENT_REMOVED = SUB_COMPONENT_REMOVED;
+
+//# sourceMappingURL=use-component.fragments.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["componentIdFields","gql","componentOverviewFields","componentFields","componentFieldsWithLogs","COMPONENT_QUERY_LOG_FIELDS","GET_COMPONENT","GET_COMPONENT_WITH_LOGS","SUB_SUBSCRIPTION_ADDED","SUB_COMPONENT_CHANGED","SUB_COMPONENT_REMOVED"],"sources":["use-component.fragments.ts"],"sourcesContent":["import { gql } from '@apollo/client';\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      host\n      basePath\n    }\n    buildStatus\n    env {\n      id\n      icon\n    }\n    size {\n      compressedTotal\n    }\n    preview {\n      includesEnvTemplate\n      legacyHeader\n      isScaling\n      skipIncludes\n    }\n    compositions {\n      identifier\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const componentFields = gql`\n  fragment componentFields on Component {\n    ...componentOverviewFields\n    packageName\n    latest\n    compositions {\n      identifier\n      displayName\n    }\n    tags {\n      version\n    }\n  }\n  ${componentOverviewFields}\n`;\n\nexport const componentFieldsWithLogs = gql`\n  fragment componentFieldWithLogs on Component {\n    id {\n      ...componentIdFields\n    }\n    logs(\n      type: $logType\n      offset: $logOffset\n      limit: $logLimit\n      sort: $logSort\n      head: $logHead\n      takeHeadFromComponent: $logTakeHeadFromComponent\n    ) {\n      id\n      message\n      username\n      email\n      date\n      hash\n      tag\n      displayName\n    }\n  }\n  ${componentIdFields}\n`;\n\nexport const COMPONENT_QUERY_LOG_FIELDS = `\n  $logOffset: Int\n  $logLimit: Int\n  $logType: String\n  $logHead: String\n  $logSort: String\n  $logTakeHeadFromComponent: Boolean\n`;\n\nexport const GET_COMPONENT = gql`\n  query Component($extensionId: String!, $id: String!) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nexport const GET_COMPONENT_WITH_LOGS = gql`\n  query Component(\n    $extensionId: String!\n    $id: String!\n    ${COMPONENT_QUERY_LOG_FIELDS}\n    ) {\n    getHost(id: $extensionId) {\n      id # used for GQL caching\n      get(id: $id) {\n        ...componentFieldWithLogs\n      }\n    }\n  }\n  ${componentFieldsWithLogs}\n`;\n\nexport const SUB_SUBSCRIPTION_ADDED = gql`\n  subscription OnComponentAdded {\n    componentAdded {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nexport const SUB_COMPONENT_CHANGED = gql`\n  subscription OnComponentChanged {\n    componentChanged {\n      component {\n        ...componentFields\n      }\n    }\n  }\n  ${componentFields}\n`;\n\nexport const SUB_COMPONENT_REMOVED = gql`\n  subscription OnComponentRemoved {\n    componentRemoved {\n      componentIds {\n        ...componentIdFields\n      }\n    }\n  }\n  ${componentIdFields}\n`;\n"],"mappings":";;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAEO,MAAMA,iBAAiB,GAAG,IAAAC,aAAG,CAAC;AACrC;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,uBAAuB,GAAG,IAAAD,aAAG,CAAC;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;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAAC;AAAC;AAEK,MAAMG,eAAe,GAAG,IAAAF,aAAG,CAAC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,uBAAwB;AAC5B,CAAC;AAAC;AAEK,MAAME,uBAAuB,GAAG,IAAAH,aAAG,CAAC;AAC3C;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,CAAC;AAAC;AAEK,MAAMK,0BAA0B,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,aAAa,GAAG,IAAAL,aAAG,CAAC;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAAC;AAEK,MAAMI,uBAAuB,GAAG,IAAAN,aAAG,CAAC;AAC3C;AACA;AACA;AACA,MAAMI,0BAA2B;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,uBAAwB;AAC5B,CAAC;AAAC;AAEK,MAAMI,sBAAsB,GAAG,IAAAP,aAAG,CAAC;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAAC;AAEK,MAAMM,qBAAqB,GAAG,IAAAR,aAAG,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIE,eAAgB;AACpB,CAAC;AAAC;AAEK,MAAMO,qBAAqB,GAAG,IAAAT,aAAG,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,iBAAkB;AACtB,CAAC;AAAC"}

package/dist/ui/use-component.js

@@ -3,6 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Filters", {
+  enumerable: true,
+  get: function () {
+    return _useComponent().Filters;
+  }
+});
+Object.defineProperty(exports, "UseComponentType", {
+  enumerable: true,
+  get: function () {
+    return _useComponent().UseComponentType;
+  }
+});
 exports.useComponent = useComponent;
 function _uiFoundationUiReactRouter() {
   const data = require("@teambit/ui-foundation.ui.react-router.use-query");
@@ -18,6 +30,13 @@ function _useComponentQuery() {
   };
   return data;
 }
+function _useComponent() {
+  const data = require("./use-component.model");
+  _useComponent = function () {
+    return data;
+  };
+  return data;
+}
 function useComponent(host, id, options) {
   var _ref;
   const query = (0, _uiFoundationUiReactRouter().useQuery)();

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

@@ -1 +1 @@
-{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","customUseComponent","skip","componentVersion","get","undefined","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  skip?: boolean;\n};\n\nexport type UseComponentType = (id: string, host: string, filters?: Filters, skip?: boolean) => Component;\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {\n  const query = useQuery();\n  const { version, logFilters, customUseComponent, skip } = options || {};\n  const componentVersion = (version || query.get('version')) ?? undefined;\n\n  const componentIdStr = id && withVersion(id, componentVersion);\n  const targetUseComponent = customUseComponent || useComponentQuery;\n\n  return targetUseComponent(componentIdStr || '', host, logFilters, skip || !id);\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;AAiBO,SAASA,YAAY,CAACC,IAAY,EAAEC,EAAW,EAAEC,OAA6B,EAAa;EAAA;EAChG,MAAMC,KAAK,GAAG,IAAAC,qCAAQ,GAAE;EACxB,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC,kBAAkB;IAAEC;EAAK,CAAC,GAAGN,OAAO,IAAI,CAAC,CAAC;EACvE,MAAMO,gBAAgB,WAAIJ,OAAO,IAAIF,KAAK,CAACO,GAAG,CAAC,SAAS,CAAC,uCAAKC,SAAS;EAEvE,MAAMC,cAAc,GAAGX,EAAE,IAAIY,WAAW,CAACZ,EAAE,EAAEQ,gBAAgB,CAAC;EAC9D,MAAMK,kBAAkB,GAAGP,kBAAkB,IAAIQ,sCAAiB;EAElE,OAAOD,kBAAkB,CAACF,cAAc,IAAI,EAAE,EAAEZ,IAAI,EAAEM,UAAU,EAAEE,IAAI,IAAI,CAACP,EAAE,CAAC;AAChF;AAEA,SAASY,WAAW,CAACZ,EAAU,EAAEI,OAAgB,EAAE;EACjD,IAAI,CAACA,OAAO,EAAE,OAAOJ,EAAE;EACvB,IAAIA,EAAE,CAACe,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAOf,EAAE;EAC/B,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAC;AAC3B"}
+{"version":3,"names":["useComponent","host","id","options","query","useQuery","version","logFilters","customUseComponent","skip","componentVersion","get","undefined","componentIdStr","withVersion","targetUseComponent","useComponentQuery","includes"],"sources":["use-component.tsx"],"sourcesContent":["import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';\nimport { useComponentQuery } from './use-component-query';\nimport { ComponentQueryResult, UseComponentOptions, UseComponentType, Filters } from './use-component.model';\n\nexport { UseComponentType, Filters };\n\nexport function useComponent(host: string, id?: string, options?: UseComponentOptions): ComponentQueryResult {\n  const query = useQuery();\n  const { version, logFilters, customUseComponent, skip } = options || {};\n  const componentVersion = (version || query.get('version')) ?? undefined;\n\n  const componentIdStr = id && withVersion(id, componentVersion);\n  const targetUseComponent = customUseComponent || useComponentQuery;\n\n  return targetUseComponent(componentIdStr || '', host, logFilters, skip || !id);\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;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAIO,SAASA,YAAY,CAACC,IAAY,EAAEC,EAAW,EAAEC,OAA6B,EAAwB;EAAA;EAC3G,MAAMC,KAAK,GAAG,IAAAC,qCAAQ,GAAE;EACxB,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC,kBAAkB;IAAEC;EAAK,CAAC,GAAGN,OAAO,IAAI,CAAC,CAAC;EACvE,MAAMO,gBAAgB,WAAIJ,OAAO,IAAIF,KAAK,CAACO,GAAG,CAAC,SAAS,CAAC,uCAAKC,SAAS;EAEvE,MAAMC,cAAc,GAAGX,EAAE,IAAIY,WAAW,CAACZ,EAAE,EAAEQ,gBAAgB,CAAC;EAC9D,MAAMK,kBAAkB,GAAGP,kBAAkB,IAAIQ,sCAAiB;EAElE,OAAOD,kBAAkB,CAACF,cAAc,IAAI,EAAE,EAAEZ,IAAI,EAAEM,UAAU,EAAEE,IAAI,IAAI,CAACP,EAAE,CAAC;AAChF;AAEA,SAASY,WAAW,CAACZ,EAAU,EAAEI,OAAgB,EAAE;EACjD,IAAI,CAACA,OAAO,EAAE,OAAOJ,EAAE;EACvB,IAAIA,EAAE,CAACe,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAOf,EAAE;EAC/B,OAAQ,GAAEA,EAAG,IAAGI,OAAQ,EAAC;AAC3B"}

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

@@ -0,0 +1,40 @@
+import { ComponentDescriptor } from '@teambit/component-descriptor';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { ComponentError } from './component-error';
+import { ComponentModel } from './component-model';
+export declare type LogFilter = {
+    offset?: number;
+    limit?: number;
+    head?: string;
+    sort?: string;
+    takeHeadFromComponent?: boolean;
+};
+export declare type Filters = {
+    log?: LogFilter & {
+        type?: string;
+    };
+    loading?: boolean;
+};
+export declare type UseComponentOptions = {
+    version?: string;
+    logFilters?: Filters;
+    customUseComponent?: UseComponentType;
+    skip?: boolean;
+};
+export declare type ComponentQueryResult = {
+    component?: ComponentModel;
+    componentDescriptor?: ComponentDescriptor;
+    componentLogs?: ComponentLogs;
+    loading?: boolean;
+    error?: ComponentError;
+};
+export declare type ComponentLogsResult = {
+    componentLogs?: ComponentLogs;
+    error?: ComponentError;
+    loading?: boolean;
+};
+export declare type ComponentLogs = {
+    logs?: LegacyComponentLog[];
+    loading?: boolean;
+};
+export declare type UseComponentType = (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentQueryResult;

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

@@ -0,0 +1,3 @@
+"use strict";
+
+//# sourceMappingURL=use-component.model.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["use-component.model.ts"],"sourcesContent":["import { ComponentDescriptor } from '@teambit/component-descriptor';\nimport { LegacyComponentLog } from '@teambit/legacy-component-log';\nimport { ComponentError } from './component-error';\nimport { ComponentModel } from './component-model';\n\nexport type LogFilter = {\n  offset?: number;\n  limit?: number;\n  head?: string;\n  sort?: string;\n  takeHeadFromComponent?: boolean;\n};\n\nexport type Filters = {\n  log?: LogFilter & { type?: string };\n  loading?: boolean;\n};\n\nexport type UseComponentOptions = {\n  version?: string;\n  logFilters?: Filters;\n  customUseComponent?: UseComponentType;\n  skip?: boolean;\n};\n\nexport type ComponentQueryResult = {\n  component?: ComponentModel;\n  componentDescriptor?: ComponentDescriptor;\n  componentLogs?: ComponentLogs;\n  loading?: boolean;\n  error?: ComponentError;\n};\n\nexport type ComponentLogsResult = {\n  componentLogs?: ComponentLogs;\n  error?: ComponentError;\n  loading?: boolean;\n};\n\nexport type ComponentLogs = {\n  logs?: LegacyComponentLog[];\n  loading?: boolean;\n};\n\nexport type UseComponentType = (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentQueryResult;\n"],"mappings":""}

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

@@ -0,0 +1 @@
+export declare function getOffsetValue(offset: any, limit: any, backwards?: boolean): any;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOffsetValue = getOffsetValue;
+function getOffsetValue(offset, limit, backwards = false) {
+  if (offset !== undefined) {
+    return backwards ? -(offset + limit) : offset;
+  }
+  if (limit !== undefined) {
+    return 0;
+  }
+  return undefined;
+}
+
+//# sourceMappingURL=use-component.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getOffsetValue","offset","limit","backwards","undefined"],"sources":["use-component.utils.ts"],"sourcesContent":["export function getOffsetValue(offset, limit, backwards = false) {\n  if (offset !== undefined) {\n    return backwards ? -(offset + limit) : offset;\n  }\n  if (limit !== undefined) {\n    return 0;\n  }\n  return undefined;\n}\n"],"mappings":";;;;;;AAAO,SAASA,cAAc,CAACC,MAAM,EAAEC,KAAK,EAAEC,SAAS,GAAG,KAAK,EAAE;EAC/D,IAAIF,MAAM,KAAKG,SAAS,EAAE;IACxB,OAAOD,SAAS,GAAG,EAAEF,MAAM,GAAGC,KAAK,CAAC,GAAGD,MAAM;EAC/C;EACA,IAAIC,KAAK,KAAKE,SAAS,EAAE;IACvB,OAAO,CAAC;EACV;EACA,OAAOA,SAAS;AAClB"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.1079",
+  "version": "0.0.1080",
   "homepage": "https://bit.cloud/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.1079"
+    "version": "0.0.1080"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -36,40 +36,39 @@
     "@teambit/design.navigation.responsive-navbar": "0.0.5",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.497",
-    "@teambit/aspect-loader": "0.0.1079",
-    "@teambit/graph": "0.0.1079",
+    "@teambit/aspect-loader": "0.0.1080",
+    "@teambit/graph": "0.0.1080",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
     "@teambit/toolbox.string.capitalize": "0.0.490",
     "@teambit/cli": "0.0.727",
     "@teambit/express": "0.0.825",
-    "@teambit/graphql": "0.0.1079",
+    "@teambit/graphql": "0.0.1080",
     "@teambit/bit-error": "0.0.402",
-    "@teambit/command-bar": "0.0.1079",
+    "@teambit/command-bar": "0.0.1080",
     "@teambit/component-package-version": "0.0.422",
     "@teambit/component.ui.deprecation-icon": "0.0.504",
-    "@teambit/preview": "0.0.1079",
-    "@teambit/pubsub": "0.0.1079",
-    "@teambit/react-router": "0.0.1079",
+    "@teambit/preview": "0.0.1080",
+    "@teambit/pubsub": "0.0.1080",
+    "@teambit/react-router": "0.0.1080",
     "@teambit/ui-foundation.ui.is-browser": "0.0.495",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.134",
-    "@teambit/ui": "0.0.1079",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.135",
+    "@teambit/ui": "0.0.1080",
     "@teambit/component-issues": "0.0.92",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
     "@teambit/cli-table": "0.0.41",
+    "@teambit/legacy-component-log": "0.0.400",
     "@teambit/component-descriptor": "0.0.296",
     "@teambit/ui-foundation.ui.react-router.use-query": "0.0.496",
     "@teambit/harmony.ui.aspect-box": "0.0.497",
+    "@teambit/compositions": "0.0.1080",
+    "@teambit/deprecation": "0.0.1080",
+    "@teambit/envs": "0.0.1080",
     "@teambit/envs.ui.env-icon": "0.0.495",
-    "@teambit/compositions": "0.0.1079",
-    "@teambit/deprecation": "0.0.1079",
-    "@teambit/envs": "0.0.1079",
-    "@teambit/legacy-component-log": "0.0.399",
-    "@teambit/component.ui.version-dropdown": "0.0.785",
+    "@teambit/component.ui.version-dropdown": "0.0.786",
     "@teambit/lanes.hooks.use-lanes": "0.0.191",
     "@teambit/lanes.ui.models.lanes-model": "0.0.144",
-    "@teambit/ui-foundation.ui.full-loader": "0.0.495",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.133"
   },
   "devDependencies": {

package/ui/component.tsx

@@ -4,13 +4,13 @@ import flatten from 'lodash.flatten';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
 import { isFunction } from 'lodash';
-import styles from './component.module.scss';
 import { ComponentProvider, ComponentDescriptorProvider } from './context';
-import { useComponent as useComponentQuery, UseComponentType } from './use-component';
+import { useComponent as useComponentQuery, UseComponentType, Filters } from './use-component';
 import { ComponentModel } from './component-model';
 import { useIdFromLocation } from './use-component-from-location';
 import { ComponentID } from '..';
-import { Filters } from './use-component-query';
+
+import styles from './component.module.scss';
 
 export type ComponentPageSlot = SlotRegistry<ComponentPageElement[]>;
 export type ComponentPageElement = {
@@ -53,8 +53,13 @@ export function Component({
   const _componentIdStr = getComponentIdStr(componentIdStr);
   const componentId = _componentIdStr ? ComponentID.fromString(_componentIdStr) : undefined;
   const resolvedComponentIdStr = path || idFromLocation;
+  const componentFiltersFromProps = useComponentFilters?.() || {};
+
   const useComponentOptions = {
-    logFilters: useComponentFilters?.(),
+    logFilters: {
+      ...componentFiltersFromProps,
+      ...(componentFiltersFromProps.loading ? {} : { log: { limit: 3, ...componentFiltersFromProps.log } }),
+    },
     customUseComponent: useComponent,
   };
 
@@ -63,6 +68,7 @@ export function Component({
     componentId?.toString() || idFromLocation,
     useComponentOptions
   );
+
   // trigger onComponentChange when component changes
   useEffect(() => onComponentChange?.(component), [component]);
   // cleanup when unmounting component
@@ -72,7 +78,7 @@ export function Component({
   const before = useMemo(() => pageItems.filter((x) => x.type === 'before').map((x) => x.content), [pageItems]);
   const after = useMemo(() => pageItems.filter((x) => x.type === 'after').map((x) => x.content), [pageItems]);
 
-  if (error) return error.renderError();
+  if (error) return error?.renderError();
   if (!component) return <div></div>;
 
   return (

package/ui/index.ts

@@ -3,7 +3,26 @@ export { Component } from './component';
 export { ConsumeMethodSlot, ComponentMenu, VersionRelatedDropdowns } from './menu';
 export { ComponentModel, ComponentModelProps } from './component-model';
 export { ComponentContext, ComponentProvider } from './context';
-export { useComponent } from './use-component';
 export { TopBarNav } from './top-bar-nav';
-export { componentIdFields, componentOverviewFields, componentFields } from './use-component-query';
+export { useComponent } from './use-component';
+export {
+  componentIdFields,
+  componentOverviewFields,
+  componentFields,
+  componentFieldsWithLogs,
+  COMPONENT_QUERY_LOG_FIELDS,
+  GET_COMPONENT,
+  GET_COMPONENT_WITH_LOGS,
+} from './use-component.fragments';
 export { useIdFromLocation } from './use-component-from-location';
+export type {
+  LogFilter,
+  Filters,
+  UseComponentOptions,
+  ComponentQueryResult,
+  UseComponentType,
+  ComponentLogs,
+  ComponentLogsResult,
+} from './use-component.model';
+export { useComponentQuery } from './use-component-query';
+export { useComponentLogs } from './use-component-logs';

package/ui/menu/index.ts

@@ -1,3 +1,9 @@
 export { CollapsibleMenuNav, MenuNavProps } from './menu-nav';
 export { ComponentMenu, VersionRelatedDropdowns } from './menu';
-export type { NavPlugin, OrderedNavigationSlot, ConsumePlugin, ConsumeMethodSlot } from './nav-plugin';
+export type {
+  NavPlugin,
+  OrderedNavigationSlot,
+  ConsumePlugin,
+  ConsumeMethodSlot,
+  ConsumePluginProps,
+} from './nav-plugin';