@teambit/component 0.0.555 → 0.0.559

package/component.ui.runtime.tsx

@@ -1,216 +0,0 @@
-import PubsubAspect, { PubsubUI, BitBaseEvent } from '@teambit/pubsub';
-import PreviewAspect, { ClickInsideAnIframeEvent } from '@teambit/preview';
-import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
-import { Slot } from '@teambit/harmony';
-import { NavigationSlot, RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-import { UIRuntime } from '@teambit/ui';
-import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
-import React from 'react';
-import { RouteProps } from 'react-router-dom';
-import CommandBarAspect, { CommandBarUI, CommandEntry } from '@teambit/command-bar';
-import copy from 'copy-to-clipboard';
-import { ComponentAspect } from './component.aspect';
-import { Component, ComponentPageElement, ComponentPageSlot } from './ui/component';
-import { Menu, NavPlugin, OrderedNavigationSlot } from './ui/menu';
-import { AspectSection } from './aspect.section';
-import { ComponentModel } from './ui';
-
-export type Server = {
-  env: string;
-  url: string;
-};
-
-export type ComponentMeta = {
-  id: string;
-};
-
-export const componentIdUrlRegex = '[\\w\\/-]*[\\w-]';
-
-export class ComponentUI {
-  readonly routePath = `/:componentId(${componentIdUrlRegex})`;
-
-  constructor(
-    /**
-     * Pubsub aspects
-     */
-    private pubsub: PubsubUI,
-
-    private routeSlot: RouteSlot,
-
-    private navSlot: OrderedNavigationSlot,
-
-    /**
-     * slot for registering a new widget to the menu.
-     */
-    private widgetSlot: OrderedNavigationSlot,
-
-    private menuItemSlot: MenuItemSlot,
-
-    private pageItemSlot: ComponentPageSlot,
-
-    private commandBarUI: CommandBarUI
-  ) {
-    if (isBrowser) this.registerPubSub();
-  }
-
-  /**
-   * the current visible component
-   */
-  private activeComponent?: ComponentModel;
-
-  private copyNpmId = () => {
-    const packageName = this.activeComponent?.packageName;
-    if (packageName) {
-      const version = this.activeComponent?.id.version;
-      const versionString = version ? `@${version}` : '';
-      copy(`${packageName}${versionString}`);
-    }
-  };
-
-  /**
-   * key bindings used by component aspect
-   */
-  private keyBindings: CommandEntry[] = [
-    {
-      id: 'component.copyBitId', // TODO - extract to a component!
-      handler: () => {
-        copy(this.activeComponent?.id.toString() || '');
-      },
-      displayName: 'Copy component ID',
-      keybinding: '.',
-    },
-    {
-      id: 'component.copyNpmId', // TODO - extract to a component!
-      handler: this.copyNpmId,
-      displayName: 'Copy component package name',
-      keybinding: ',',
-    },
-  ];
-
-  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'),
-    },
-    {
-      category: 'workflow',
-      title: 'Copy component ID',
-      keyChar: '.',
-      handler: () => this.commandBarUI?.run('component.copyBitId'),
-    },
-    {
-      category: 'workflow',
-      title: 'Copy component package name',
-      keyChar: ',',
-      handler: () => this.commandBarUI?.run('component.copyNpmId'),
-    },
-  ];
-
-  registerPubSub() {
-    this.pubsub.sub(PreviewAspect.id, (be: BitBaseEvent<any>) => {
-      if (be.type === ClickInsideAnIframeEvent.TYPE) {
-        const event = new MouseEvent('mousedown', {
-          view: window,
-          bubbles: true,
-          cancelable: true,
-        });
-
-        const body = document.body;
-        body?.dispatchEvent(event);
-      }
-    });
-  }
-
-  handleComponentChange = (activeComponent?: ComponentModel) => {
-    this.activeComponent = activeComponent;
-  };
-
-  getComponentUI(host: string) {
-    return (
-      <Component
-        routeSlot={this.routeSlot}
-        containerSlot={this.pageItemSlot}
-        onComponentChange={this.handleComponentChange}
-        host={host}
-      />
-    );
-  }
-
-  getMenu(host: string) {
-    return (
-      <Menu navigationSlot={this.navSlot} widgetSlot={this.widgetSlot} host={host} menuItemSlot={this.menuItemSlot} />
-    );
-  }
-
-  registerRoute(route: RouteProps) {
-    this.routeSlot.register(route);
-    return this;
-  }
-
-  registerNavigation(nav: NavLinkProps, order?: number) {
-    this.navSlot.register({
-      props: nav,
-      order,
-    });
-  }
-
-  registerWidget(widget: NavLinkProps, order?: number) {
-    this.widgetSlot.register({ props: widget, order });
-  }
-
-  registerMenuItem = (menuItems: MenuItem[]) => {
-    this.menuItemSlot.register(menuItems);
-  };
-
-  registerPageItem = (...items: ComponentPageElement[]) => {
-    this.pageItemSlot.register(items);
-  };
-
-  static dependencies = [PubsubAspect, CommandBarAspect];
-
-  static runtime = UIRuntime;
-
-  static slots = [
-    Slot.withType<RouteProps>(),
-    Slot.withType<NavPlugin>(),
-    Slot.withType<NavigationSlot>(),
-    Slot.withType<MenuItemSlot>(),
-    Slot.withType<ComponentPageSlot>(),
-  ];
-
-  static async provider(
-    [pubsub, commandBarUI]: [PubsubUI, CommandBarUI],
-    config,
-    [routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot]: [
-      RouteSlot,
-      OrderedNavigationSlot,
-      OrderedNavigationSlot,
-      MenuItemSlot,
-      ComponentPageSlot
-    ]
-  ) {
-    // TODO: refactor ComponentHost to a separate extension (including sidebar, host, graphql, etc.)
-    // TODO: add contextual hook for ComponentHost @uri/@oded
-    const componentUI = new ComponentUI(pubsub, routeSlot, navSlot, widgetSlot, menuItemSlot, pageSlot, commandBarUI);
-    const section = new AspectSection();
-
-    componentUI.commandBarUI.addCommand(...componentUI.keyBindings);
-    componentUI.registerMenuItem(componentUI.menuItems);
-    componentUI.registerRoute(section.route);
-    componentUI.registerWidget(section.navigationLink, section.order);
-    return componentUI;
-  }
-}
-
-export default ComponentUI;
-
-ComponentAspect.addRuntime(ComponentUI);

package/config.ts

@@ -1,34 +0,0 @@
-import { Compilers, Testers } from '@teambit/legacy/dist/consumer/config/abstract-config';
-import { ComponentOverridesData } from '@teambit/legacy/dist/consumer/config/component-overrides';
-import { ExtensionDataList } from '@teambit/legacy/dist/consumer/config/extension-data';
-import { PathLinux } from '@teambit/legacy/dist/utils/path';
-// import { CustomResolvedPath } from '@teambit/legacy/dist/consumer/component/consumer-component';
-// import { ComponentOverridesData } from '@teambit/legacy/dist/consumer/config/component-overrides';
-
-type LegacyConfigProps = {
-  lang?: string;
-  compiler?: string | Compilers;
-  tester?: string | Testers;
-  bindingPrefix: string;
-  extensions?: ExtensionDataList;
-  overrides?: ComponentOverridesData;
-};
-
-/**
- * in-memory representation of the component configuration.
- */
-export default class Config {
-  constructor(
-    /**
-     * version main file
-     */
-    readonly main: PathLinux,
-
-    /**
-     * configured extensions
-     */
-    readonly extensions: ExtensionDataList,
-
-    readonly legacyProperties?: LegacyConfigProps
-  ) {}
-}

package/dependencies/dependencies.ts

@@ -1,74 +0,0 @@
-/* eslint-disable max-classes-per-file */
-import { BitError } from '@teambit/bit-error';
-import { BitId } from '@teambit/legacy-bit-id';
-
-const DEV_ENV = 'development';
-const RUNTIME_ENV = 'runtime';
-
-// type Environment = DEV_ENV | RUNTIME_ENV;
-type Environment = 'development' | 'runtime';
-// type WrappingMethod = 'component' | 'package';
-
-export class DependencyId extends BitId {}
-
-export class Dependency {
-  constructor(public id: DependencyId) {}
-}
-
-export class PackageDependency extends Dependency {}
-
-export class ComponentDependency extends Dependency {}
-
-export class DependencyList extends Array<Dependency> {
-  /**
-   * Get only package dependencies
-   *
-   * @readonly
-   * @memberof DependencyList
-   */
-  get packages(): PackageDependency[] {
-    return this.filter((dep) => dep instanceof PackageDependency);
-  }
-
-  get components(): ComponentDependency[] {
-    return this.filter((dep) => dep instanceof ComponentDependency);
-  }
-
-  static fromArray(dependencies: Dependency[]): DependencyList {
-    return new DependencyList(...dependencies);
-  }
-}
-
-export class Dependencies {
-  constructor(public runtime: DependencyList, public dev: DependencyList, public peer: DependencyList) {}
-
-  private getByEnvironment(env: Environment): DependencyList {
-    if (env === DEV_ENV) {
-      return DependencyList.fromArray(this.runtime.concat(this.dev).concat(this.peer));
-    }
-    if (env === RUNTIME_ENV) {
-      return DependencyList.fromArray(this.runtime.concat(this.peer));
-    }
-    throw new BitError(`env ${env} is not supported`);
-  }
-
-  /**
-   * Get dependencies needed for development environnement such as runtime, dev and peer
-   *
-   * @returns {DependencyList}
-   * @memberof Dependencies
-   */
-  computeDev(): DependencyList {
-    return this.getByEnvironment(DEV_ENV);
-  }
-
-  /**
-   * Get dependencies needed for runtime environnement such as runtime and peer
-   *
-   * @returns {DependencyList}
-   * @memberof Dependencies
-   */
-  computeRuntime(): DependencyList {
-    return this.getByEnvironment(RUNTIME_ENV);
-  }
-}

package/dependencies/index.ts

@@ -1 +0,0 @@
-export { Dependencies } from './dependencies';

package/exceptions/could-not-find-latest.ts

@@ -1,8 +0,0 @@
-export class CouldNotFindLatest extends Error {
-  constructor(semverArray: string[]) {
-    super(`could not find latest semver in array: ${semverArray.join(', ')}`);
-  }
-  report() {
-    return this.message;
-  }
-}

package/exceptions/host-not-found.ts

@@ -1,14 +0,0 @@
-export class HostNotFound extends Error {
-  constructor(
-    /**
-     * name of the host.
-     */
-    private hostName: string
-  ) {
-    super();
-  }
-
-  toString() {
-    return `[component] error: host '${this.hostName}' was not found`;
-  }
-}

package/exceptions/index.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as NothingToSnap } from './nothing-to-snap';
-export { HostNotFound } from './host-not-found';
-export { CouldNotFindLatest } from './could-not-find-latest';

package/exceptions/nothing-to-snap.ts

@@ -1 +0,0 @@
-export default class NothingToSnap extends Error {}

package/hash.ts

@@ -1,4 +0,0 @@
-/**
- * type for representing content-addressable filesystem hashes.
- */
-export type Hash = string;

package/history-graph.ts

@@ -1 +0,0 @@
-export default class HistoryGraph {}

package/host/component-host-model.ts

@@ -1,9 +0,0 @@
-import { ComponentModel } from '../ui';
-
-export class ComponentHostModel {
-  constructor(readonly name: string, readonly components: ComponentModel[]) {}
-
-  static from(data: any) {
-    return new ComponentHostModel(data.getHost.name, ComponentModel.fromArray(data.getHost.list));
-  }
-}

package/host/index.ts

@@ -1,2 +0,0 @@
-export { useComponentHost } from './use-component-host';
-export * from './component-host-model';

package/host/use-component-host.ts

@@ -1,39 +0,0 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
-
-import { ComponentHostModel } from './component-host-model';
-
-const COMPONENT_HOST = gql`
-  {
-    getHost {
-      id # used for GQL caching
-      name
-      list {
-        id {
-          name
-          version
-          scope
-        }
-        deprecation {
-          isDeprecate
-        }
-        env {
-          id
-          icon
-        }
-      }
-    }
-  }
-`;
-
-export function useComponentHost() {
-  const { data, loading } = useDataQuery(COMPONENT_HOST);
-
-  if (!data || loading) {
-    return {};
-  }
-
-  const host = ComponentHostModel.from(data);
-
-  return { host };
-}

package/index.ts

@@ -1,32 +0,0 @@
-import { ComponentAspect } from './component.aspect';
-
-export { useComponentHost } from './host';
-export { Component, InvalidComponent } from './component';
-export { ComponentID } from '@teambit/component-id';
-export { default as ComponentFS } from './component-fs';
-export type { default as ComponentConfig } from './config';
-export type { ComponentFactory } from './component-factory';
-export type { AspectList } from './aspect-list';
-export { AspectEntry, AspectData } from './aspect-entry';
-// TODO: check why it's not working when using the index in snap dir like this:
-// export { Snap, Author } from './snap';
-export { Snap } from './snap/snap';
-export type { Author } from './snap/author';
-// TODO: check why it's not working when using the index in tag dir like this:
-// export { Tag } from './tag';
-export { Tag } from './tag/tag';
-export { State } from './state';
-export type { Hash } from './hash';
-export { TagMap } from './tag-map';
-export { ComponentMap } from './component-map';
-export type { ComponentMain } from './component.main.runtime';
-export type { ComponentUI } from './component.ui.runtime';
-export { Section } from './section';
-export { ComponentContext } from './ui/context/component-context';
-export { ComponentModel, ComponentModelProps } from './ui/component-model';
-export type { ShowFragment, ShowRow } from './show';
-export { default as Config } from './config';
-// export { AspectList } from './aspect-list';
-// export { AspectEntry } from './aspect-entry';
-export { ComponentAspect };
-export default ComponentAspect;

package/section/index.ts

@@ -1 +0,0 @@
-export { Section } from './section';

package/section/section.tsx

@@ -1,8 +0,0 @@
-import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
-import { RouteProps } from 'react-router-dom';
-
-export interface Section {
-  route: RouteProps;
-  navigationLink: NavLinkProps;
-  order?: number;
-}

package/show/extensions.fragment.ts

@@ -1,23 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class ExtensionsFragment implements ShowFragment {
-  private renderList(component: Component) {
-    const aspects = component.state.aspects.entries.map((entry) => entry.id.toString());
-    return aspects.join('\n');
-  }
-
-  async renderRow(component: Component) {
-    return {
-      title: 'extensions',
-      content: this.renderList(component),
-    };
-  }
-
-  async json(component: Component) {
-    return {
-      title: 'configuration',
-      json: component.state.aspects.serialize() as any,
-    };
-  }
-}

package/show/files.fragment.ts

@@ -1,24 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class FilesFragment implements ShowFragment {
-  async renderRow(component: Component) {
-    return {
-      title: 'files',
-      content: this.getRelativePaths(component).join('\n'),
-    };
-  }
-
-  async json(component: Component) {
-    return {
-      title: 'files',
-      json: this.getRelativePaths(component),
-    };
-  }
-
-  private getRelativePaths(component: Component) {
-    return component.state.filesystem.files.map((file) => file.relative);
-  }
-
-  weight = 4;
-}

package/show/id.fragment.ts

@@ -1,20 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class IDFragment implements ShowFragment {
-  async renderRow(component: Component) {
-    return {
-      title: 'id',
-      content: component.id.toString(),
-    };
-  }
-
-  async json(component: Component) {
-    return {
-      title: 'id',
-      json: component.id.toString(),
-    };
-  }
-
-  weight = 0;
-}

package/show/index.ts

@@ -1,8 +0,0 @@
-export { ShowFragment, ShowRow } from './show-fragment';
-export { ShowCmd } from './show.cmd';
-export { MainFileFragment } from './main-file.fragment';
-export { NameFragment } from './name.fragment';
-export { IDFragment } from './id.fragment';
-export { ScopeFragment } from './scope.fragment';
-export { FilesFragment } from './files.fragment';
-export { ExtensionsFragment } from './extensions.fragment';

package/show/main-file.fragment.ts

@@ -1,13 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class MainFileFragment implements ShowFragment {
-  async renderRow(component: Component) {
-    return {
-      title: 'main file',
-      content: component.state._consumer.mainFile,
-    };
-  }
-
-  weight = 4;
-}

package/show/name.fragment.ts

@@ -1,13 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class NameFragment implements ShowFragment {
-  async renderRow(component: Component) {
-    return {
-      title: 'name',
-      content: component.id.fullName,
-    };
-  }
-
-  weight = 2;
-}

package/show/scope.fragment.ts

@@ -1,15 +0,0 @@
-import { ShowFragment } from './show-fragment';
-import { Component } from '../component';
-
-export class ScopeFragment implements ShowFragment {
-  async renderRow(component: Component) {
-    return {
-      title: 'scope',
-      content: component.id.scope || '',
-    };
-  }
-
-  getRow() {}
-
-  weight = 1;
-}

package/show/show-fragment.ts

@@ -1,44 +0,0 @@
-import { Component } from '../component';
-
-export interface ShowFragment {
-  /**
-   * render a row into the `show` CLI.
-   */
-  renderRow(component: Component): Promise<ShowRow>;
-
-  /**
-   * return a json output.
-   */
-  json?(component: Component): Promise<JSONRow>;
-
-  /**
-   * weight is used to determine the position of the fragment
-   * within the `show` table.
-   */
-  weight?: number;
-}
-
-export interface JSONRow {
-  /**
-   * name of the field.
-   */
-  title: string;
-
-  /**
-   * json content.
-   * TODO: change this from any to a more structured type (e.g. Serializable).
-   */
-  json: any;
-}
-
-export interface ShowRow {
-  /**
-   * title of the fragment
-   */
-  title: string;
-
-  /**
-   * content to render within the fragment.
-   */
-  content: string;
-}