@teambit/workspace 0.0.565 → 0.0.569

package/workspace-component/workspace-component-loader.ts

@@ -0,0 +1,276 @@
+import { Component, ComponentFS, ComponentID, Config, InvalidComponent, State, TagMap } from '@teambit/component';
+import { BitId } from '@teambit/legacy-bit-id';
+import { ExtensionDataList } from '@teambit/legacy/dist/consumer/config/extension-data';
+import mapSeries from 'p-map-series';
+import { compact } from 'lodash';
+import ConsumerComponent from '@teambit/legacy/dist/consumer/component';
+import { MissingBitMapComponent } from '@teambit/legacy/dist/consumer/bit-map/exceptions';
+import { getLatestVersionNumber } from '@teambit/legacy/dist/utils';
+import { IssuesClasses } from '@teambit/component-issues';
+import { ComponentNotFound } from '@teambit/legacy/dist/scope/exceptions';
+import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';
+import { Logger } from '@teambit/logger';
+import { EnvsAspect, EnvsMain } from '@teambit/envs';
+import { ExtensionDataEntry } from '@teambit/legacy/dist/consumer/config';
+import { getMaxSizeForComponents, InMemoryCache } from '@teambit/legacy/dist/cache/in-memory-cache';
+import { createInMemoryCache } from '@teambit/legacy/dist/cache/cache-factory';
+import ComponentNotFoundInPath from '@teambit/legacy/dist/consumer/component/exceptions/component-not-found-in-path';
+import { Workspace } from '../workspace';
+import { WorkspaceComponent } from './workspace-component';
+
+export class WorkspaceComponentLoader {
+  private componentsCache: InMemoryCache<Component>; // cache loaded components
+  private componentsCacheForCapsule: InMemoryCache<Component>; // cache loaded components for capsule, must not use the cache for the workspace
+  constructor(
+    private workspace: Workspace,
+    private logger: Logger,
+    private dependencyResolver: DependencyResolverMain,
+    private envs: EnvsMain
+  ) {
+    this.componentsCache = createInMemoryCache({ maxSize: getMaxSizeForComponents() });
+    this.componentsCacheForCapsule = createInMemoryCache({ maxSize: getMaxSizeForComponents() });
+  }
+
+  async getMany(ids: Array<ComponentID>, forCapsule = false): Promise<Component[]> {
+    const idsWithoutEmpty = compact(ids);
+    const errors: { id: ComponentID; err: Error }[] = [];
+    const longProcessLogger = this.logger.createLongProcessLogger('loading components', ids.length);
+    const componentsP = mapSeries(idsWithoutEmpty, async (id: ComponentID) => {
+      longProcessLogger.logProgress(id.toString());
+      return this.get(id, forCapsule).catch((err) => {
+        if (this.isComponentNotExistsError(err)) {
+          errors.push({
+            id,
+            err,
+          });
+          return undefined;
+        }
+        throw err;
+      });
+    });
+    const components = await componentsP;
+    errors.forEach((err) => {
+      if (!this.workspace.consumer.isLegacy) {
+        this.logger.console(`failed loading component ${err.id.toString()}, see full error in debug.log file`);
+      }
+      this.logger.warn(`failed loading component ${err.id.toString()}`, err.err);
+    });
+    // remove errored components
+    const filteredComponents: Component[] = compact(components);
+    longProcessLogger.end();
+    return filteredComponents;
+  }
+
+  async getInvalid(ids: Array<ComponentID>): Promise<InvalidComponent[]> {
+    const idsWithoutEmpty = compact(ids);
+    const errors: InvalidComponent[] = [];
+    const longProcessLogger = this.logger.createLongProcessLogger('loading components', ids.length);
+    await mapSeries(idsWithoutEmpty, async (id: ComponentID) => {
+      longProcessLogger.logProgress(id.toString());
+      try {
+        await this.workspace.consumer.loadComponent(id._legacy);
+      } catch (err: any) {
+        if (ConsumerComponent.isComponentInvalidByErrorType(err)) {
+          errors.push({
+            id,
+            err,
+          });
+          return;
+        }
+        throw err;
+      }
+    });
+    return errors;
+  }
+
+  async get(
+    componentId: ComponentID,
+    forCapsule = false,
+    legacyComponent?: ConsumerComponent,
+    useCache = true,
+    storeInCache = true
+  ): Promise<Component> {
+    const bitIdWithVersion: BitId = getLatestVersionNumber(
+      this.workspace.consumer.bitmapIdsFromCurrentLane,
+      componentId._legacy
+    );
+    const id = bitIdWithVersion.version ? componentId.changeVersion(bitIdWithVersion.version) : componentId;
+    const fromCache = this.getFromCache(id, forCapsule);
+    if (fromCache && useCache) {
+      return fromCache;
+    }
+    const consumerComponent = legacyComponent || (await this.getConsumerComponent(id, forCapsule));
+    // in case of out-of-sync, the id may changed during the load process
+    const updatedId = consumerComponent ? ComponentID.fromLegacy(consumerComponent.id, id.scope) : id;
+    const component = await this.loadOne(updatedId, consumerComponent);
+    if (storeInCache) {
+      this.addMultipleEnvsIssueIfNeeded(component); // it's in storeInCache block, otherwise, it wasn't fully loaded
+      this.saveInCache(component, forCapsule);
+    }
+    return component;
+  }
+
+  private addMultipleEnvsIssueIfNeeded(component: Component) {
+    const envs = this.envs.getAllEnvsConfiguredOnComponent(component);
+    if (envs.length < 2) {
+      return;
+    }
+    component.state.issues.getOrCreate(IssuesClasses.MultipleEnvs).data = envs.map((e) => e.id);
+  }
+
+  clearCache() {
+    this.componentsCache.deleteAll();
+    this.componentsCacheForCapsule.deleteAll();
+  }
+  clearComponentCache(id: ComponentID) {
+    const idStr = id.toString();
+    this.componentsCache.delete(idStr);
+    this.componentsCacheForCapsule.delete(idStr);
+  }
+
+  private async loadOne(id: ComponentID, consumerComponent?: ConsumerComponent) {
+    const componentFromScope = await this.workspace.scope.get(id);
+    if (!consumerComponent) {
+      if (!componentFromScope) throw new MissingBitMapComponent(id.toString());
+      return componentFromScope;
+    }
+
+    let extensionDataList = await this.workspace.componentExtensions(id, componentFromScope);
+    const extensionsFromConsumerComponent = consumerComponent.extensions || new ExtensionDataList();
+    // Merge extensions added by the legacy code in memory (for example data of dependency resolver)
+    extensionDataList = ExtensionDataList.mergeConfigs([
+      extensionsFromConsumerComponent,
+      extensionDataList,
+    ]).filterRemovedExtensions();
+
+    // temporarily mutate consumer component extensions until we remove all direct access from legacy to extensions data
+    // TODO: remove this once we remove all direct access from legacy code to extensions data
+    consumerComponent.extensions = extensionDataList;
+
+    const state = new State(
+      new Config(consumerComponent.mainFile, extensionDataList),
+      await this.workspace.createAspectList(extensionDataList),
+      ComponentFS.fromVinyls(consumerComponent.files),
+      consumerComponent.dependencies,
+      consumerComponent
+    );
+    if (componentFromScope) {
+      // Removed by @gilad. do not mutate the component from the scope
+      // componentFromScope.state = state;
+      // const workspaceComponent = WorkspaceComponent.fromComponent(componentFromScope, this.workspace);
+      const workspaceComponent = new WorkspaceComponent(
+        componentFromScope.id,
+        componentFromScope.head,
+        state,
+        componentFromScope.tags,
+        this.workspace
+      );
+      return this.executeLoadSlot(workspaceComponent);
+    }
+    return this.executeLoadSlot(this.newComponentFromState(id, state));
+  }
+
+  private saveInCache(component: Component, forCapsule: boolean): void {
+    if (forCapsule) {
+      this.componentsCacheForCapsule.set(component.id.toString(), component);
+    } else {
+      this.componentsCache.set(component.id.toString(), component);
+    }
+  }
+
+  /**
+   * make sure that not only the id-str match, but also the legacy-id.
+   * this is needed because the ComponentID.toString() is the same whether or not the legacy-id has
+   * scope-name, as it includes the defaultScope if the scope is empty.
+   * as a result, when out-of-sync is happening and the id is changed to include scope-name in the
+   * legacy-id, the component is the cache has the old id.
+   */
+  private getFromCache(id: ComponentID, forCapsule: boolean): Component | undefined {
+    const fromCache = forCapsule
+      ? this.componentsCacheForCapsule.get(id.toString())
+      : this.componentsCache.get(id.toString());
+    if (fromCache && fromCache.id._legacy.isEqual(id._legacy)) {
+      return fromCache;
+    }
+    return undefined;
+  }
+
+  private async getConsumerComponent(id: ComponentID, forCapsule = false): Promise<ConsumerComponent | undefined> {
+    try {
+      return forCapsule
+        ? // eslint-disable-next-line @typescript-eslint/return-await
+          await this.workspace.consumer.loadComponentForCapsule(id._legacy)
+        : // eslint-disable-next-line @typescript-eslint/return-await
+          await this.workspace.consumer.loadComponent(id._legacy);
+    } catch (err: any) {
+      // don't return undefined for any error. otherwise, if the component is invalid (e.g. main
+      // file is missing) it returns the model component later unexpectedly, or if it's new, it
+      // shows MissingBitMapComponent error incorrectly.
+      if (this.isComponentNotExistsError(err)) {
+        this.logger.debug(
+          `failed loading component "${id.toString()}" from the workspace due to "${err.name}" error\n${err.message}`
+        );
+        return undefined;
+      }
+      throw err;
+    }
+  }
+
+  private isComponentNotExistsError(err: Error): boolean {
+    return (
+      err instanceof ComponentNotFound ||
+      err instanceof MissingBitMapComponent ||
+      err instanceof ComponentNotFoundInPath
+    );
+  }
+
+  private async executeLoadSlot(component: Component) {
+    const entries = this.workspace.onComponentLoadSlot.toArray();
+    const promises = entries.map(async ([extension, onLoad]) => {
+      const data = await onLoad(component);
+      return this.upsertExtensionData(component, extension, data);
+    });
+
+    // Special load events which runs from the workspace but should run from the correct aspect
+    // TODO: remove this once those extensions dependent on workspace
+    const envsData = await this.workspace.getEnvSystemDescriptor(component);
+
+    // Move to deps resolver main runtime once we switch ws<> deps resolver direction
+    const policy = await this.dependencyResolver.mergeVariantPolicies(component.config.extensions);
+    const dependencies = await this.dependencyResolver.extractDepsFromLegacy(component, policy);
+
+    const depResolverData = {
+      dependencies,
+      policy: policy.serialize(),
+    };
+
+    promises.push(this.upsertExtensionData(component, EnvsAspect.id, envsData));
+    promises.push(this.upsertExtensionData(component, DependencyResolverAspect.id, depResolverData));
+
+    await Promise.all(promises);
+
+    // Update the aspect list to have changes happened during the on load slot (new data added above)
+    const updatedAspectList = await this.workspace.createAspectList(component.state.config.extensions);
+    component.state.aspects = updatedAspectList;
+    return component;
+  }
+
+  private newComponentFromState(id: ComponentID, state: State): Component {
+    return new WorkspaceComponent(id, null, state, new TagMap(), this.workspace);
+  }
+
+  private async upsertExtensionData(component: Component, extension: string, data: any) {
+    const existingExtension = component.state.config.extensions.findExtension(extension);
+    if (existingExtension) {
+      // Only merge top level of extension data
+      Object.assign(existingExtension.data, data);
+      return;
+    }
+    component.state.config.extensions.push(await this.getDataEntry(extension, data));
+  }
+
+  private async getDataEntry(extension: string, data: { [key: string]: any }): Promise<ExtensionDataEntry> {
+    // TODO: @gilad we need to refactor the extension data entry api.
+    return new ExtensionDataEntry(undefined, undefined, extension, undefined, data);
+  }
+}

package/workspace-component/workspace-component.ts

@@ -0,0 +1,51 @@
+import { Component, ComponentID, Snap, State, TagMap } from '@teambit/component';
+import { IssuesList } from '@teambit/component-issues';
+import { Workspace } from '../workspace';
+import { ComponentStatus } from './component-status';
+
+// TODO: refactor this to a composition rather than to use inheritance
+export class WorkspaceComponent extends Component {
+  constructor(
+    /**
+     * component ID represented by the `ComponentId` type.
+     */
+    readonly id: ComponentID,
+
+    /**
+     * head version of the component. can be `null` for new components.
+     */
+    readonly head: Snap | null = null,
+
+    /**
+     * state of the component.
+     */
+    workspaceState: State,
+
+    /**
+     * tags of the component.
+     */
+    readonly tags: TagMap = new TagMap(),
+
+    /**
+     * workspace extension.
+     */
+    readonly workspace: Workspace
+  ) {
+    super(id, head, workspaceState, tags, workspace);
+  }
+
+  async getStatus(): Promise<ComponentStatus> {
+    return this.workspace.getComponentStatus(this);
+  }
+
+  /**
+   * get all issues reported on the component.
+   */
+  getIssues(): IssuesList | null {
+    return this.workspace.getComponentIssues(this);
+  }
+
+  static fromComponent(component: Component, workspace: Workspace) {
+    return new WorkspaceComponent(component.id, component.head, component.state, component.tags, workspace);
+  }
+}

package/workspace.ui.runtime.tsx

@@ -0,0 +1,215 @@
+import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';
+import { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';
+import { Slot, SlotRegistry } from '@teambit/harmony';
+import ReactRouterAspect, { ReactRouterUI } from '@teambit/react-router';
+import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { Menu } from '@teambit/ui-foundation.ui.menu';
+import SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';
+import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
+import { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';
+import { GraphAspect, GraphUI } from '@teambit/graph';
+import React from 'react';
+import { RouteProps } from 'react-router-dom';
+import CommandBarAspect, { CommandBarUI, ComponentSearcher, CommandHandler } from '@teambit/command-bar';
+import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
+import { WorkspaceComponentsDrawer } from './ui/workspace-components-drawer';
+import { ComponentTreeWidget } from './component-tree.widget';
+import { Workspace } from './ui';
+import { WorkspaceAspect } from './workspace.aspect';
+
+export type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;
+
+export class WorkspaceUI {
+  constructor(
+    /**
+     * route slot.
+     */
+    private routeSlot: RouteSlot,
+
+    /**
+     * component ui extension.
+     */
+    private componentUi: ComponentUI,
+
+    /**
+     * menu slot
+     */
+    private menuSlot: RouteSlot,
+
+    private menuItemSlot: MenuItemSlot,
+
+    private sidebar: SidebarUI,
+
+    private sidebarSlot: SidebarWidgetSlot,
+
+    /**
+     * sidebar link slot
+     */
+    private sidebarItemSlot: SidebarItemSlot,
+
+    private commandBarUI: CommandBarUI,
+
+    reactRouterUI: ReactRouterUI
+  ) {
+    this.componentSearcher = new ComponentSearcher(reactRouterUI.navigateTo);
+  }
+
+  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};
+
+  /**
+   * register a route to the workspace.
+   */
+  registerRoute(route: RouteProps) {
+    this.routeSlot.register(route);
+    return this;
+  }
+
+  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {
+    this.sidebarSlot.register(componentTreeNode);
+    return this;
+  }
+
+  registerMenuItem = (menuItems: MenuItem[]) => {
+    this.menuItemSlot.register(menuItems);
+  };
+
+  setComponents = (components: ComponentModel[]) => {
+    this.componentSearcher.update(components);
+  };
+
+  registerSidebarLink = (...links: SidebarItem[]) => {
+    this.sidebarItemSlot.register(links);
+  };
+
+  componentSearcher: ComponentSearcher;
+
+  uiRoot(): UIRoot {
+    this.sidebar.registerDrawer(new WorkspaceComponentsDrawer(this.sidebarSlot));
+    this.commandBarUI.addSearcher(this.componentSearcher);
+    const [setKeyBindHandler] = this.commandBarUI.addCommand({
+      id: 'sidebar.toggle', // TODO - extract to a component!
+      handler: () => {},
+      displayName: 'Toggle component list',
+      keybinding: 'alt+s',
+    });
+    this.setKeyBindHandler = setKeyBindHandler;
+
+    return {
+      routes: [
+        {
+          path: '/',
+          children: (
+            <Workspace
+              menuSlot={this.menuSlot}
+              routeSlot={this.routeSlot}
+              sidebar={<this.sidebar.render itemSlot={this.sidebarItemSlot} />}
+              workspaceUI={this}
+              onSidebarTogglerChange={this.setKeyBindHandler}
+            />
+          ),
+        },
+      ],
+    };
+  }
+
+  private menuItems: MenuItem[] = [
+    {
+      category: 'general',
+      title: 'Open command bar',
+      keyChar: 'mod+k',
+      handler: () => this.commandBarUI?.run('command-bar.open'),
+    },
+    {
+      category: 'general',
+      title: 'Toggle component list',
+      keyChar: 'alt+s',
+      handler: () => this.commandBarUI?.run('sidebar.toggle'),
+    },
+  ];
+
+  static dependencies = [
+    UIAspect,
+    ComponentAspect,
+    SidebarAspect,
+    ComponentTreeAspect,
+    CommandBarAspect,
+    ReactRouterAspect,
+    GraphAspect,
+  ];
+
+  static runtime = UIRuntime;
+
+  static slots = [
+    Slot.withType<RouteProps>(),
+    Slot.withType<RouteProps>(),
+    Slot.withType<ComponentTreeNode>(),
+    Slot.withType<MenuItemSlot>(),
+    Slot.withType<SidebarItemSlot>(),
+  ];
+
+  static async provider(
+    [ui, componentUi, sidebar, componentTree, commandBarUI, reactRouterUI, graphUI]: [
+      UiUI,
+      ComponentUI,
+      SidebarUI,
+      ComponentTreeUI,
+      CommandBarUI,
+      ReactRouterUI,
+      GraphUI
+    ],
+    config,
+    [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot]: [
+      RouteSlot,
+      RouteSlot,
+      MenuItemSlot,
+      SidebarWidgetSlot,
+      SidebarItemSlot
+    ]
+  ) {
+    componentTree.registerTreeNode(new ComponentTreeWidget());
+    sidebarSlot.register(new ComponentTreeWidget());
+    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);
+
+    const workspaceUI = new WorkspaceUI(
+      routeSlot,
+      componentUi,
+      menuSlot,
+      menuItemSlot,
+      sidebar,
+      sidebarSlot,
+      sidebarItemSlot,
+      commandBarUI,
+      reactRouterUI
+    );
+    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));
+    workspaceUI.registerMenuItem(workspaceUI.menuItems);
+
+    workspaceUI.registerSidebarLink(() => (
+      <MenuLinkItem exact href="/" icon="comps">
+        Gallery
+      </MenuLinkItem>
+    ));
+
+    workspaceUI.menuSlot.register([
+      {
+        exact: true,
+        path: '/',
+        children: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,
+      },
+      {
+        path: workspaceUI.componentUi.routePath,
+        children: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),
+      },
+    ]);
+
+    workspaceUI.routeSlot.register({
+      path: workspaceUI.componentUi.routePath,
+      children: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),
+    });
+    return workspaceUI;
+  }
+}
+
+export default WorkspaceUI;
+
+WorkspaceAspect.addRuntime(WorkspaceUI);