@teambit/eject 1.0.107 → 1.0.108

package/components-ejector.ts

@@ -0,0 +1,197 @@
+/**
+ * a classic use case of eject is when a user imports a component using `bit import` to update it,
+ * but the user has no intention to have the code as part of the project source code.
+ * the eject provides the option to delete the component locally and install it via the NPM client.
+ *
+ * an implementation note, the entire process is done with rollback in mind.
+ * since installing the component via NPM client is an error prone process, we do it first, before
+ * removing the component files, so then it's easier to rollback.
+ */
+import { Workspace } from '@teambit/workspace';
+import { Consumer } from '@teambit/legacy/dist/consumer';
+import { ComponentIdList, ComponentID } from '@teambit/component-id';
+import defaultErrorHandler from '@teambit/legacy/dist/cli/default-error-handler';
+import { getScopeRemotes } from '@teambit/legacy/dist/scope/scope-remotes';
+import componentIdToPackageName from '@teambit/legacy/dist/utils/bit/component-id-to-package-name';
+import Component from '@teambit/legacy/dist/consumer/component/consumer-component';
+import PackageJsonFile from '@teambit/legacy/dist/consumer/component/package-json-file';
+import * as packageJsonUtils from '@teambit/legacy/dist/consumer/component/package-json-utils';
+import DataToPersist from '@teambit/legacy/dist/consumer/component/sources/data-to-persist';
+import RemovePath from '@teambit/legacy/dist/consumer/component/sources/remove-path';
+import { Logger } from '@teambit/logger';
+import { InstallMain } from '@teambit/install';
+
+export type EjectResults = {
+  ejectedComponents: ComponentIdList;
+  failedComponents: FailedComponents;
+};
+
+export type EjectOptions = {
+  force?: boolean; // eject although a component is modified/staged
+  keepFiles?: boolean; // keep component files on the workspace
+};
+
+type FailedComponents = {
+  modifiedComponents: ComponentIdList;
+  stagedComponents: ComponentIdList;
+  notExportedComponents: ComponentIdList;
+  selfHostedExportedComponents: ComponentIdList;
+};
+
+export class ComponentsEjector {
+  consumer: Consumer;
+  idsToEject: ComponentIdList;
+  componentsToEject: Component[] = [];
+  // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
+  notEjectedDependents: Array<{ dependent: Component; ejectedDependencies: Component[] }>;
+  failedComponents: FailedComponents;
+  // @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
+  packageJsonFilesBeforeChanges: PackageJsonFile[]; // for rollback in case of errors
+  constructor(
+    private workspace: Workspace,
+    private install: InstallMain,
+    private logger: Logger,
+    private componentsIds: ComponentID[],
+    private ejectOptions: EjectOptions
+  ) {
+    this.consumer = this.workspace.consumer;
+    this.idsToEject = new ComponentIdList();
+    this.failedComponents = {
+      modifiedComponents: new ComponentIdList(),
+      stagedComponents: new ComponentIdList(),
+      notExportedComponents: new ComponentIdList(),
+      selfHostedExportedComponents: new ComponentIdList(),
+    };
+  }
+
+  async eject(): Promise<EjectResults> {
+    await this.decideWhichComponentsToEject();
+    this.logger.debug(`${this.idsToEject.length} to eject`);
+    await this.loadComponentsToEject();
+    if (this.idsToEject.length) {
+      this._validateIdsHaveScopesAndVersions();
+      await this.removeComponentsFromNodeModules();
+      await this.untrackComponents();
+      await this.installPackages();
+      await this.removeComponentsFiles();
+      await this.consumer.writeBitMap();
+    }
+    this.logger.debug('eject: completed successfully');
+    return {
+      ejectedComponents: this.idsToEject,
+      failedComponents: this.failedComponents,
+    };
+  }
+
+  async decideWhichComponentsToEject(): Promise<void> {
+    this.logger.setStatusLine('Eject: getting the components status');
+    if (!this.componentsIds.length) return;
+    const remotes = await getScopeRemotes(this.consumer.scope);
+    const hubExportedComponents = new ComponentIdList();
+    this.componentsIds.forEach((componentId) => {
+      const bitId = componentId;
+      if (!this.workspace.isExported(bitId)) this.failedComponents.notExportedComponents.push(bitId);
+      else if (remotes.isHub(bitId.scope as string)) hubExportedComponents.push(bitId);
+      else this.failedComponents.selfHostedExportedComponents.push(bitId);
+    });
+    if (this.ejectOptions.force) {
+      this.idsToEject = hubExportedComponents;
+    } else {
+      await Promise.all(
+        hubExportedComponents.map(async (id) => {
+          try {
+            const componentStatus = await this.consumer.getComponentStatusById(id);
+            if (componentStatus.modified) this.failedComponents.modifiedComponents.push(id);
+            else if (componentStatus.staged) this.failedComponents.stagedComponents.push(id);
+            else this.idsToEject.push(id);
+          } catch (err: any) {
+            this.throwEjectError(
+              `eject operation failed getting the status of ${id.toString()}, no action has been done.
+            please fix the issue to continue.`,
+              err
+            );
+          }
+        })
+      );
+    }
+    this.logger.consoleSuccess();
+  }
+
+  async loadComponentsToEject() {
+    // TODO: check if we really need the { loadExtensions: true } here
+    const { components } = await this.consumer.loadComponents(this.idsToEject, undefined, { loadExtensions: true });
+    this.componentsToEject = components;
+  }
+
+  async removeComponentsFromNodeModules() {
+    const action = 'Eject: removing the existing components from node_modules';
+    this.logger.setStatusLine(action);
+    this.logger.debug(action);
+    await packageJsonUtils.removeComponentsFromNodeModules(this.consumer, this.componentsToEject);
+    this.logger.consoleSuccess(action);
+  }
+
+  async installPackages() {
+    this.logger.setStatusLine('Eject: installing packages using the package-manager');
+    const packages = this.getPackagesToInstall();
+    await this.install.install(packages);
+  }
+
+  getPackagesToInstall(): string[] {
+    return this.componentsToEject.map((c) => componentIdToPackageName(c));
+  }
+
+  _buildExceptionMessageWithRollbackData(action: string): string {
+    return `eject failed ${action}.
+your package.json (if existed) has been restored, however, some bit generated data may have been deleted, please run "bit link" to restore them.`;
+  }
+
+  /**
+   * as part of the 'eject' operation, a component is removed locally. as opposed to the remove
+   * command, in this case, no need to remove the objects from the scope, only remove from the
+   * filesystem, which means, delete the component files, untrack from .bitmap and clean
+   * package.json and bit.json traces.
+   */
+  private async removeComponentsFiles() {
+    if (this.ejectOptions.keepFiles) {
+      return;
+    }
+    this.logger.setStatusLine('Eject: removing the components files from the filesystem');
+    const dataToPersist = new DataToPersist();
+    this.componentsToEject.forEach((component) => {
+      const componentMap = component.componentMap;
+      if (!componentMap) {
+        throw new Error('ComponentEjector.removeComponentsFiles expect a component to have componentMap prop');
+      }
+      const rootDir = componentMap.rootDir;
+      if (!rootDir) {
+        throw new Error('ComponentEjector.removeComponentsFiles expect a componentMap to have rootDir');
+      }
+      dataToPersist.removePath(new RemovePath(rootDir, true));
+    });
+    dataToPersist.addBasePath(this.consumer.getPath());
+    await dataToPersist.persistAllToFS();
+    this.logger.consoleSuccess();
+  }
+
+  private async untrackComponents() {
+    this.logger.debug('eject: removing the components from the .bitmap');
+    await this.consumer.cleanFromBitMap(this.idsToEject);
+  }
+
+  throwEjectError(message: string, originalError: Error) {
+    const { message: originalErrorMessage } = defaultErrorHandler(originalError);
+    this.logger.error(`eject has stopped due to an error ${originalErrorMessage}`, originalError);
+    throw new Error(`${message}
+
+got the following error: ${originalErrorMessage}`);
+  }
+
+  _validateIdsHaveScopesAndVersions() {
+    this.idsToEject.forEach((id) => {
+      if (!id.hasScope() || !id.hasVersion()) {
+        throw new TypeError(`EjectComponents expects ids with scope and version, got ${id.toString()}`);
+      }
+    });
+  }
+}

package/dist/components-ejector.d.ts

@@ -14,15 +14,15 @@ import Component from '@teambit/legacy/dist/consumer/component/consumer-componen
 import PackageJsonFile from '@teambit/legacy/dist/consumer/component/package-json-file';
 import { Logger } from '@teambit/logger';
 import { InstallMain } from '@teambit/install';
-export declare type EjectResults = {
+export type EjectResults = {
     ejectedComponents: ComponentIdList;
     failedComponents: FailedComponents;
 };
-export declare type EjectOptions = {
+export type EjectOptions = {
     force?: boolean;
     keepFiles?: boolean;
 };
-declare type FailedComponents = {
+type FailedComponents = {
     modifiedComponents: ComponentIdList;
     stagedComponents: ComponentIdList;
     notExportedComponents: ComponentIdList;

package/dist/eject.composition.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const Logo: () => React.JSX.Element;
+/// <reference types="react" />
+export declare const Logo: () => JSX.Element;

package/dist/{preview-1703590665075.js → preview-1703647408454.js}

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

package/eject-cmd.ts

@@ -0,0 +1,43 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import { Workspace } from '@teambit/workspace';
+import { COMPONENT_PATTERN_HELP } from '@teambit/legacy/dist/constants';
+import { ejectTemplate } from './eject-template';
+import { EjectMain } from './eject.main.runtime';
+
+export class EjectCmd implements Command {
+  name = 'eject <component-pattern>';
+  description = 'remove component from the workspace and install it instead as a regular npm package.';
+  extendedDescription = 'By default the component files will be removed from the workspace';
+  helpUrl = 'reference/components/exporting-components#ejecting-components';
+  arguments = [
+    {
+      name: 'component-pattern',
+      description: COMPONENT_PATTERN_HELP,
+    },
+  ];
+  alias = 'E';
+  options = [
+    [
+      'f',
+      'force',
+      'ignore local changes/versions. eject component/s even when they are staged or modified. Note: unexported tags/snaps will be lost',
+    ],
+    ['j', 'json', 'print the results in JSON format'],
+    ['', 'keep-files', 'keep the component files in the workspace intact'],
+  ] as CommandOptions;
+  loader = true;
+  migration = true;
+  group = 'development';
+
+  constructor(private ejectMain: EjectMain, private workspace: Workspace) {}
+
+  async report(
+    [pattern]: [string],
+    { force = false, json = false, keepFiles = false }: { force: boolean; json: boolean; keepFiles: boolean }
+  ): Promise<string> {
+    const componentIds = await this.workspace.idsByPattern(pattern);
+    const ejectResults = await this.ejectMain.eject(componentIds, { force, keepFiles });
+    if (json) return JSON.stringify(ejectResults, null, 2);
+    return ejectTemplate(ejectResults);
+  }
+}

package/eject-template.ts

@@ -0,0 +1,38 @@
+import chalk from 'chalk';
+
+import { getCloudDomain } from '@teambit/legacy/dist/constants';
+import { EjectResults } from './components-ejector';
+
+export const successEjectMessage = 'successfully ejected the following components';
+export const failureEjectMessage = 'failed to eject the following components';
+
+export function ejectTemplate(ejectResults: EjectResults): string {
+  const getEjectedOutput = () => {
+    if (!ejectResults.ejectedComponents.length) return '';
+    return chalk.green(`${successEjectMessage} ${chalk.bold(ejectResults.ejectedComponents.toString())}\n`);
+  };
+  const getFailureOutput = () => {
+    const failures = ejectResults.failedComponents;
+    const title = chalk.red(`${failureEjectMessage}\n`);
+    const modified = failures.modifiedComponents.length
+      ? `stopped the eject process for the following components because they have local changes.
+${chalk.bold(failures.modifiedComponents.toString())}
+ejecting modified components discards all local, unstaged, changes.
+use 'bit diff <component id>' to see the changes and decide if to 'bit tag' them or not.
+use the '--force' flag to discard local modifications and proceed with the eject process.\n`
+      : '';
+    const staged = failures.stagedComponents.length
+      ? `components with local versions (use --force to ignore): ${failures.stagedComponents.toString()}\n`
+      : '';
+    const notExported = failures.notExportedComponents.length
+      ? `local components that were not exported yet: ${failures.notExportedComponents.toString()}\n`
+      : '';
+    const selfHosted = failures.selfHostedExportedComponents.length
+      ? `components that were exported to a self hosted scope (not ${getCloudDomain()}): ${failures.selfHostedExportedComponents.toString()}\n`
+      : '';
+    const body = modified + staged + notExported + selfHosted;
+    if (body) return chalk.underline(title) + chalk.red(body);
+    return '';
+  };
+  return getEjectedOutput() + getFailureOutput();
+}

package/eject.aspect.ts

@@ -0,0 +1,5 @@
+import { Aspect } from '@teambit/harmony';
+
+export const EjectAspect = Aspect.create({
+  id: 'teambit.workspace/eject',
+});

package/eject.main.runtime.ts

@@ -0,0 +1,37 @@
+import { CLIAspect, CLIMain, MainRuntime } from '@teambit/cli';
+import { ComponentID } from '@teambit/component-id';
+import { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
+import WorkspaceAspect, { OutsideWorkspaceError, Workspace } from '@teambit/workspace';
+import { InstallAspect, InstallMain } from '@teambit/install';
+import { EjectCmd } from './eject-cmd';
+import { EjectAspect } from './eject.aspect';
+import { ComponentsEjector, EjectOptions, EjectResults } from './components-ejector';
+
+export class EjectMain {
+  constructor(private workspace: Workspace, private install: InstallMain, private logger: Logger) {}
+  async eject(componentIds: ComponentID[], ejectOptions: EjectOptions = {}): Promise<EjectResults> {
+    if (!this.workspace) throw new OutsideWorkspaceError();
+    const componentEjector = new ComponentsEjector(
+      this.workspace,
+      this.install,
+      this.logger,
+      componentIds,
+      ejectOptions
+    );
+    return componentEjector.eject();
+  }
+
+  static runtime = MainRuntime;
+
+  static dependencies = [CLIAspect, WorkspaceAspect, LoggerAspect, InstallAspect];
+
+  static async provider([cli, workspace, loggerMain, install]: [CLIMain, Workspace, LoggerMain, InstallMain]) {
+    const logger = loggerMain.createLogger(EjectAspect.id);
+    const ejectMain = new EjectMain(workspace, install, logger);
+    cli.register(new EjectCmd(ejectMain, workspace));
+
+    return ejectMain;
+  }
+}
+
+EjectAspect.addRuntime(EjectMain);

package/index.ts

@@ -0,0 +1,4 @@
+export type { EjectMain } from './eject.main.runtime';
+export type { EjectResults } from './components-ejector';
+export { successEjectMessage, ejectTemplate } from './eject-template';
+export { EjectAspect } from './eject.aspect';

package/package.json

@@ -1,36 +1,32 @@
 {
   "name": "@teambit/eject",
-  "version": "1.0.107",
+  "version": "1.0.108",
   "homepage": "https://bit.cloud/teambit/workspace/eject",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "eject",
-    "version": "1.0.107"
+    "version": "1.0.108"
   },
   "dependencies": {
     "chalk": "2.4.2",
-    "core-js": "^3.0.0",
-    "@babel/runtime": "7.20.0",
     "@teambit/component-id": "1.2.0",
     "@teambit/harmony": "0.4.6",
-    "@teambit/install": "1.0.107",
-    "@teambit/logger": "0.0.932",
-    "@teambit/workspace": "1.0.107",
-    "@teambit/cli": "0.0.839"
+    "@teambit/install": "1.0.108",
+    "@teambit/logger": "0.0.933",
+    "@teambit/workspace": "1.0.108",
+    "@teambit/cli": "0.0.840"
   },
   "devDependencies": {
-    "@types/react": "^17.0.8",
     "@types/mocha": "9.1.0",
-    "@types/node": "12.20.4",
-    "@types/react-dom": "^17.0.5",
-    "@types/jest": "^26.0.0",
-    "@types/testing-library__jest-dom": "5.9.5"
+    "@types/jest": "^29.2.2",
+    "@types/testing-library__jest-dom": "^5.9.5",
+    "@teambit/harmony.envs.core-aspect-env": "0.0.13"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.624",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "@types/react": "^18.2.12",
+    "@teambit/legacy": "1.0.624"
   },
   "license": "Apache-2.0",
   "optionalDependencies": {},
@@ -44,7 +40,7 @@
   },
   "private": false,
   "engines": {
-    "node": ">=12.22.0"
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -53,12 +49,9 @@
   "keywords": [
     "bit",
     "bit-aspect",
+    "bit-core-aspect",
     "components",
     "collaboration",
-    "web",
-    "react",
-    "react-components",
-    "angular",
-    "angular-components"
+    "web"
   ]
 }

package/tsconfig.json

@@ -1,38 +1,33 @@
 {
   "compilerOptions": {
     "lib": [
-      "es2019",
-      "DOM",
-      "ES6",
-      "DOM.Iterable",
-      "ScriptHost"
+      "esnext",
+      "dom",
+      "dom.Iterable"
     ],
-    "target": "es2015",
-    "module": "CommonJS",
-    "jsx": "react",
-    "allowJs": true,
-    "composite": true,
+    "target": "es2020",
+    "module": "es2020",
+    "jsx": "react-jsx",
     "declaration": true,
     "sourceMap": true,
-    "skipLibCheck": true,
     "experimentalDecorators": true,
-    "outDir": "dist",
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "rootDir": ".",
     "resolveJsonModule": true,
-    "emitDeclarationOnly": true,
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "strictPropertyInitialization": false,
-    "strict": true,
-    "noImplicitAny": false,
-    "preserveConstEnums": true
+    "allowJs": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true
   },
   "exclude": [
+    "artifacts",
+    "public",
     "dist",
+    "node_modules",
+    "package.json",
     "esm.mjs",
-    "package.json"
+    "**/*.cjs",
+    "./dist"
   ],
   "include": [
     "**/*",

package/types/asset.d.ts

@@ -5,12 +5,12 @@ declare module '*.png' {
 declare module '*.svg' {
   import type { FunctionComponent, SVGProps } from 'react';
 
-  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
   const src: string;
   export default src;
 }
-
-// @TODO Gilad
 declare module '*.jpg' {
   const value: any;
   export = value;
@@ -27,3 +27,15 @@ declare module '*.bmp' {
   const value: any;
   export = value;
 }
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}