@teambit/component 0.0.1079 → 0.0.1080

package/ui/use-component.fragments.ts

@@ -0,0 +1,169 @@
+import { gql } from '@apollo/client';
+
+export const componentIdFields = gql`
+  fragment componentIdFields on ComponentID {
+    name
+    version
+    scope
+  }
+`;
+
+export const componentOverviewFields = 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}
+`;
+
+export const componentFields = gql`
+  fragment componentFields on Component {
+    ...componentOverviewFields
+    packageName
+    latest
+    compositions {
+      identifier
+      displayName
+    }
+    tags {
+      version
+    }
+  }
+  ${componentOverviewFields}
+`;
+
+export const componentFieldsWithLogs = 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}
+`;
+
+export const COMPONENT_QUERY_LOG_FIELDS = `
+  $logOffset: Int
+  $logLimit: Int
+  $logType: String
+  $logHead: String
+  $logSort: String
+  $logTakeHeadFromComponent: Boolean
+`;
+
+export const GET_COMPONENT = gql`
+  query Component($extensionId: String!, $id: String!) {
+    getHost(id: $extensionId) {
+      id # used for GQL caching
+      get(id: $id) {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+export const GET_COMPONENT_WITH_LOGS = gql`
+  query Component(
+    $extensionId: String!
+    $id: String!
+    ${COMPONENT_QUERY_LOG_FIELDS}
+    ) {
+    getHost(id: $extensionId) {
+      id # used for GQL caching
+      get(id: $id) {
+        ...componentFieldWithLogs
+      }
+    }
+  }
+  ${componentFieldsWithLogs}
+`;
+
+export const SUB_SUBSCRIPTION_ADDED = gql`
+  subscription OnComponentAdded {
+    componentAdded {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+export const SUB_COMPONENT_CHANGED = gql`
+  subscription OnComponentChanged {
+    componentChanged {
+      component {
+        ...componentFields
+      }
+    }
+  }
+  ${componentFields}
+`;
+
+export const SUB_COMPONENT_REMOVED = gql`
+  subscription OnComponentRemoved {
+    componentRemoved {
+      componentIds {
+        ...componentIdFields
+      }
+    }
+  }
+  ${componentIdFields}
+`;

package/ui/use-component.model.ts

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

package/ui/use-component.tsx

@@ -1,25 +1,10 @@
 import { useQuery } from '@teambit/ui-foundation.ui.react-router.use-query';
-import { ComponentDescriptor } from '@teambit/component-descriptor';
-import { ComponentModel } from './component-model';
-import { ComponentError } from './component-error';
-import { Filters, useComponentQuery } from './use-component-query';
+import { useComponentQuery } from './use-component-query';
+import { ComponentQueryResult, UseComponentOptions, UseComponentType, Filters } from './use-component.model';
 
-export type Component = {
-  component?: ComponentModel;
-  error?: ComponentError;
-  componentDescriptor?: ComponentDescriptor;
-  loading?: boolean;
-};
-export type UseComponentOptions = {
-  version?: string;
-  logFilters?: Filters;
-  customUseComponent?: UseComponentType;
-  skip?: boolean;
-};
+export { UseComponentType, Filters };
 
-export type UseComponentType = (id: string, host: string, filters?: Filters, skip?: boolean) => Component;
-
-export function useComponent(host: string, id?: string, options?: UseComponentOptions): Component {
+export function useComponent(host: string, id?: string, options?: UseComponentOptions): ComponentQueryResult {
   const query = useQuery();
   const { version, logFilters, customUseComponent, skip } = options || {};
   const componentVersion = (version || query.get('version')) ?? undefined;

package/ui/use-component.utils.ts

@@ -0,0 +1,9 @@
+export function getOffsetValue(offset, limit, backwards = false) {
+  if (offset !== undefined) {
+    return backwards ? -(offset + limit) : offset;
+  }
+  if (limit !== undefined) {
+    return 0;
+  }
+  return undefined;
+}