-
+
+
);
}
diff --git a/scopes/design/ui/server-error-page/server-error-page.composition.tsx b/scopes/design/ui/server-error-page/server-error-page.composition.tsx
index 5d23dbd61eae..ed783fe1495d 100644
--- a/scopes/design/ui/server-error-page/server-error-page.composition.tsx
+++ b/scopes/design/ui/server-error-page/server-error-page.composition.tsx
@@ -1,11 +1,11 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { ServerErrorPage } from './server-error-page';
export const ServerErrorPageExample = () => {
return (
-
+
-
+
);
};
diff --git a/scopes/design/ui/server-error-page/server-error-page.docs.tsx b/scopes/design/ui/server-error-page/server-error-page.docs.tsx
index e76c68cf44eb..de850159eef0 100644
--- a/scopes/design/ui/server-error-page/server-error-page.docs.tsx
+++ b/scopes/design/ui/server-error-page/server-error-page.docs.tsx
@@ -1,17 +1,17 @@
import React from 'react';
import { Section } from '@teambit/documenter.ui.section';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { Separator } from '@teambit/documenter.ui.separator';
import { ServerErrorPage } from './server-error-page';
export default function Overview() {
return (
-
+
<>
A page component that displays a 500 error message.
-
+
);
}
diff --git a/scopes/design/ui/status-message-card/index.ts b/scopes/design/ui/status-message-card/index.ts
new file mode 100644
index 000000000000..b154b396f6e0
--- /dev/null
+++ b/scopes/design/ui/status-message-card/index.ts
@@ -0,0 +1,2 @@
+export { StatusMessageCard } from './status-message-card';
+export type { StatusMessageCardProps } from './status-message-card';
diff --git a/scopes/design/ui/status-message-card/status-message-card.composition.tsx b/scopes/design/ui/status-message-card/status-message-card.composition.tsx
new file mode 100644
index 000000000000..b9a8d657f438
--- /dev/null
+++ b/scopes/design/ui/status-message-card/status-message-card.composition.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
+import { StatusMessageCard } from './status-message-card';
+
+export const PassingMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
+export const FailingMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
+export const PendingMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
+export const ProcessingMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
+export const SkippedMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
+export const UnknownMessageCard = () => (
+
+
+ this might take a minute
+
+
+);
diff --git a/scopes/design/ui/status-message-card/status-message-card.docs.mdx b/scopes/design/ui/status-message-card/status-message-card.docs.mdx
new file mode 100644
index 000000000000..e4cfd9828233
--- /dev/null
+++ b/scopes/design/ui/status-message-card/status-message-card.docs.mdx
@@ -0,0 +1,28 @@
+---
+labels: ['react', 'typescript', 'message-card', 'status']
+---
+
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
+import { StatusMessageCard } from './status-message-card';
+
+StatusMessageCard examples:
+
+A passing status card
+
+```js live
+
+
+ this might take a minute
+
+
+```
+
+A failing status card
+
+```js live
+
+
+ this might take a minute
+
+
+```
diff --git a/scopes/design/ui/status-message-card/status-message-card.module.scss b/scopes/design/ui/status-message-card/status-message-card.module.scss
new file mode 100644
index 000000000000..4f89ddf734c1
--- /dev/null
+++ b/scopes/design/ui/status-message-card/status-message-card.module.scss
@@ -0,0 +1,18 @@
+.success {
+ color: var(--passing, #2e945a);
+}
+.failure {
+ color: var(--failing, #d31948);
+}
+.pending {
+ color: var(--pending, #414141);
+}
+.processing {
+ color: var(--processing, #0984e3);
+}
+.skipped {
+ color: var(--skipped, #ff8b00);
+}
+.unknown {
+ color: var(--unknown, #6c707c);
+}
diff --git a/scopes/design/ui/status-message-card/status-message-card.spec.tsx b/scopes/design/ui/status-message-card/status-message-card.spec.tsx
new file mode 100644
index 000000000000..05674376f7de
--- /dev/null
+++ b/scopes/design/ui/status-message-card/status-message-card.spec.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PassingMessageCard } from './status-message-card.composition';
+
+describe('status-message-card', () => {
+ it('should render with the correct title', () => {
+ const { getByText } = render(
);
+ const rendered = getByText('success card');
+ expect(rendered).toBeTruthy();
+ });
+});
diff --git a/scopes/design/ui/status-message-card/status-message-card.tsx b/scopes/design/ui/status-message-card/status-message-card.tsx
new file mode 100644
index 000000000000..a63e728b4704
--- /dev/null
+++ b/scopes/design/ui/status-message-card/status-message-card.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { MessageCard, MessageCardProps } from '@teambit/design.ui.surfaces.message-card';
+import colorStyles from './status-message-card.module.scss';
+
+export type StatusMessageCardProps = {
+ /**
+ * The icon and color to show in the card
+ */
+ status: 'SUCCESS' | 'FAILURE' | 'PENDING' | 'PROCESSING' | 'SKIPPED' | 'UNKNOWN';
+} & MessageCardProps;
+
+/**
+ * A card to display status information to the user
+ */
+export function StatusMessageCard({ status, ...rest }: StatusMessageCardProps) {
+ const lowerCaseStatus = status.toLowerCase();
+ const iconProps = getStatusIcon(lowerCaseStatus);
+ return
;
+}
+
+function getStatusIcon(status: string) {
+ const iconPrefix = 'Ripple';
+ if (!status) return undefined;
+ switch (status) {
+ case 'success':
+ return {
+ icon: `${iconPrefix}-${status}`,
+ iconClass: colorStyles[status],
+ };
+ case 'failure':
+ return {
+ icon: `${iconPrefix}-failed`,
+ iconClass: colorStyles[status],
+ };
+ case 'pending':
+ return {
+ icon: `${iconPrefix}-${status}`,
+ iconClass: colorStyles[status],
+ };
+ case 'processing':
+ return {
+ icon: `${iconPrefix}-${status}`,
+ iconClass: colorStyles[status],
+ };
+ case 'skipped':
+ return {
+ icon: `${iconPrefix}-${status}`,
+ iconClass: colorStyles[status],
+ };
+ default:
+ return {
+ icon: `${iconPrefix}-${status}`,
+ iconClass: colorStyles[status],
+ };
+ }
+}
diff --git a/scopes/design/ui/time-ago/time-ago.composition.tsx b/scopes/design/ui/time-ago/time-ago.composition.tsx
index 16ea2d2250bf..a631eaa11d58 100644
--- a/scopes/design/ui/time-ago/time-ago.composition.tsx
+++ b/scopes/design/ui/time-ago/time-ago.composition.tsx
@@ -1,63 +1,63 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { TimeAgo } from './time-ago';
export const YearsAgoWithTimestamp = () => {
return (
-
+
-
+
);
};
export const MonthTimeAgo = () => {
const date = new Date();
return (
-
+
-
+
);
};
export const MonthsTimeAgo = () => {
const date = new Date();
return (
-
+
-
+
);
};
export const HourTimeAgo = () => {
const date = new Date();
return (
-
+
-
+
);
};
export const HoursTimeAgo = () => {
const date = new Date();
return (
-
+
-
+
);
};
export const CurrentTime = () => {
return (
-
+
-
+
);
};
export const CurrentTimeWithIsoDate = () => {
return (
-
+
-
+
);
};
diff --git a/scopes/design/ui/time-ago/time-ago.docs.tsx b/scopes/design/ui/time-ago/time-ago.docs.tsx
index e74489cc4ad5..8c5ebe969f8c 100644
--- a/scopes/design/ui/time-ago/time-ago.docs.tsx
+++ b/scopes/design/ui/time-ago/time-ago.docs.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Section } from '@teambit/documenter.ui.section';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { Separator } from '@teambit/documenter.ui.separator';
import { H3 } from '@teambit/documenter.ui.heading';
import { Paragraph } from '@teambit/documenter.ui.paragraph';
@@ -8,13 +8,13 @@ import { TimeAgo } from './time-ago';
export default function Overview() {
return (
-
+
Overview
Time-ago displays the time passed since a specific date (received as a prop).
-
+
);
}
diff --git a/scopes/docs/docs/overview/overview.tsx b/scopes/docs/docs/overview/overview.tsx
index bbef3415c6cc..53d1dc2e4555 100644
--- a/scopes/docs/docs/overview/overview.tsx
+++ b/scopes/docs/docs/overview/overview.tsx
@@ -1,9 +1,23 @@
+import React, { useContext } from 'react';
import { ComponentContext } from '@teambit/component';
import { ComponentPreview } from '@teambit/preview.ui.component-preview';
-import React, { useContext } from 'react';
+import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
export function Overview() {
const component = useContext(ComponentContext);
-
+ if (component?.buildStatus === 'pending')
+ return (
+
+ this might take some time
+
+ );
+ if (component?.buildStatus === 'failed')
+ return (
+
+ );
return
;
}
diff --git a/scopes/envs/aspect-docs/envs/envs.composition.tsx b/scopes/envs/aspect-docs/envs/envs.composition.tsx
index c22e44abb1b4..be6b62e9a98e 100644
--- a/scopes/envs/aspect-docs/envs/envs.composition.tsx
+++ b/scopes/envs/aspect-docs/envs/envs.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Envs } from './index';
export const EnvsDocs = () => (
-
+
-
+
);
diff --git a/scopes/envs/aspect-docs/envs/envs.docs.mdx b/scopes/envs/aspect-docs/envs/envs.docs.mdx
index e1fae4f55ee1..b335ccb21a9d 100644
--- a/scopes/envs/aspect-docs/envs/envs.docs.mdx
+++ b/scopes/envs/aspect-docs/envs/envs.docs.mdx
@@ -22,13 +22,13 @@ import { Envs } from '@teambit/aspect-docs.envs';
### Render with theme and MDX providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Envs } from '@teambit/aspect-docs.envs';
-
+
-;
+;
```
diff --git a/scopes/generator/aspect-docs/generator/generator.composition.tsx b/scopes/generator/aspect-docs/generator/generator.composition.tsx
index df2b2ae94d68..ef9362000866 100644
--- a/scopes/generator/aspect-docs/generator/generator.composition.tsx
+++ b/scopes/generator/aspect-docs/generator/generator.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Generator } from './index';
export const GeneratorDocs = () => (
-
+
-
+
);
diff --git a/scopes/generator/aspect-docs/generator/generator.docs.mdx b/scopes/generator/aspect-docs/generator/generator.docs.mdx
index d8bc3a117bce..7b8e7f0336e5 100644
--- a/scopes/generator/aspect-docs/generator/generator.docs.mdx
+++ b/scopes/generator/aspect-docs/generator/generator.docs.mdx
@@ -22,13 +22,13 @@ import { Generator } from '@teambit/aspect-docs.generator';
### Render with theme and MDX providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Generator } from '@teambit/aspect-docs.generator';
-
+
-;
+;
```
diff --git a/scopes/harmony/application/application.main.runtime.ts b/scopes/harmony/application/application.main.runtime.ts
index 7c6e70ee2722..f2badfaf06d6 100644
--- a/scopes/harmony/application/application.main.runtime.ts
+++ b/scopes/harmony/application/application.main.runtime.ts
@@ -7,6 +7,7 @@ import { EnvsAspect, EnvsMain } from '@teambit/envs';
import ComponentAspect, { ComponentMain, ComponentID } from '@teambit/component';
import { ApplicationType } from './application-type';
import { Application } from './application';
+import { DeploymentProvider } from './deployment-provider';
import { AppNotFound } from './exceptions';
import { ApplicationAspect } from './application.aspect';
import { AppListCmd } from './app-list.cmd';
@@ -16,6 +17,7 @@ import { AppService } from './application.service';
export type ApplicationTypeSlot = SlotRegistry
;
export type ApplicationSlot = SlotRegistry;
+export type DeploymentProviderSlot = SlotRegistry;
export type ApplicationAspectConfig = {};
@@ -35,6 +37,7 @@ export class ApplicationMain {
constructor(
private appSlot: ApplicationSlot,
private appTypeSlot: ApplicationTypeSlot,
+ private deploymentProviderSlot: DeploymentProviderSlot,
private envs: EnvsMain,
private componentAspect: ComponentMain,
private appService: AppService
@@ -63,6 +66,21 @@ export class ApplicationMain {
return flatten(this.appSlot.values());
}
+ /**
+ * register new deployment provider like netlify, cloudflare pages or custom deployment.
+ */
+ registerDeploymentProvider(provider: DeploymentProvider) {
+ this.deploymentProviderSlot.register([provider]);
+ return this;
+ }
+
+ /**
+ * list all deployment providers
+ */
+ listProviders() {
+ return flatten(this.deploymentProviderSlot.values());
+ }
+
/**
* get an app.
*/
@@ -134,16 +152,20 @@ export class ApplicationMain {
static runtime = MainRuntime;
static dependencies = [CLIAspect, LoggerAspect, BuilderAspect, EnvsAspect, ComponentAspect];
- static slots = [Slot.withType(), Slot.withType()];
+ static slots = [
+ Slot.withType(),
+ Slot.withType(),
+ Slot.withType(),
+ ];
static async provider(
[cli, loggerAspect, builder, envs, component]: [CLIMain, LoggerMain, BuilderMain, EnvsMain, ComponentMain],
config: ApplicationAspectConfig,
- [appTypeSlot, appSlot]: [ApplicationTypeSlot, ApplicationSlot]
+ [appTypeSlot, appSlot, deploymentProviderSlot]: [ApplicationTypeSlot, ApplicationSlot, DeploymentProviderSlot]
) {
const logger = loggerAspect.createLogger(ApplicationAspect.id);
const appService = new AppService();
- const application = new ApplicationMain(appSlot, appTypeSlot, envs, component, appService);
+ const application = new ApplicationMain(appSlot, appTypeSlot, deploymentProviderSlot, envs, component, appService);
builder.registerDeployTasks([new DeployTask(application)]);
cli.registerGroup('apps', 'Applications');
cli.register(new RunCmd(application, logger), new AppListCmd(application));
diff --git a/scopes/harmony/application/application.ts b/scopes/harmony/application/application.ts
index 3b793cff630e..fa03c8c6bc31 100644
--- a/scopes/harmony/application/application.ts
+++ b/scopes/harmony/application/application.ts
@@ -1,4 +1,5 @@
import { BuildContext } from '@teambit/builder';
+import { Capsule } from '@teambit/isolator';
import { AppContext } from './app-context';
import { DeployContext } from './deploy-context';
@@ -16,7 +17,7 @@ export interface Application {
/**
* build the application.
*/
- build(context: BuildContext, aspectId: string): Promise;
+ build(context: BuildContext, aspectId: string, capsule: Capsule): Promise;
/**
* application deployment. this is a build task.
diff --git a/scopes/harmony/application/deploy.task.ts b/scopes/harmony/application/deploy.task.ts
index c0ce22062ca2..b94e95c0b271 100644
--- a/scopes/harmony/application/deploy.task.ts
+++ b/scopes/harmony/application/deploy.task.ts
@@ -1,24 +1,49 @@
-import { BuildTask, BuiltTaskResult, BuildContext } from '@teambit/builder';
+import mapSeries from 'p-map-series';
+import { Capsule } from '@teambit/isolator';
+import { BuildTask, BuiltTaskResult, BuildContext, ComponentResult } from '@teambit/builder';
+import { ComponentID } from '@teambit/component';
import { ApplicationAspect } from './application.aspect';
import { ApplicationMain } from './application.main.runtime';
+import { DeployContext } from './deploy-context';
+
+export const BUILD_UI_TASK = 'build_ui_application';
export class DeployTask implements BuildTask {
- name = 'Application_Deployment';
+ name = BUILD_UI_TASK;
aspectId = ApplicationAspect.id;
constructor(private application: ApplicationMain) {}
async execute(context: BuildContext): Promise {
- await Promise.all(
- this.application.listApps().map(async (app) => {
+ const apps = this.application.listApps();
+ const componentsResultsUi = await mapSeries(
+ apps,
+ async (app): Promise => {
const aspectId = this.application.getAppAspect(app.name);
- if (!aspectId) return;
- const deployContext = await app.build(context, aspectId);
+ if (!aspectId) return undefined;
+ const capsules = context.capsuleNetwork.seedersCapsules;
+ const capsule = this.getCapsule(capsules, aspectId);
+ if (!capsule) return undefined;
+ const deployContext = await app.build(context, aspectId, capsule);
+ if (!deployContext.publicDir) return undefined;
if (app.deploy) await app.deploy(deployContext);
- })
+ await this.deployToProviders(deployContext);
+ return { component: capsule.component, metadata: { publicDir: deployContext.publicDir } };
+ }
);
+
return {
- componentsResults: [],
+ componentsResults: componentsResultsUi.flatMap((f) => (f ? [f] : [])),
};
}
+
+ private getCapsule(capsules: Capsule[], aspectId: string) {
+ const aspectCapsuleId = ComponentID.fromString(aspectId).toStringWithoutVersion();
+ return capsules.find((capsule) => capsule.component.id.toStringWithoutVersion() === aspectCapsuleId);
+ }
+
+ private async deployToProviders(deployContext: DeployContext) {
+ const providers = this.application.listProviders();
+ await mapSeries(providers, async (provider) => provider.deploy(deployContext));
+ }
}
diff --git a/scopes/harmony/application/deployment-provider.ts b/scopes/harmony/application/deployment-provider.ts
new file mode 100644
index 000000000000..ce32145917c5
--- /dev/null
+++ b/scopes/harmony/application/deployment-provider.ts
@@ -0,0 +1,5 @@
+import { DeployContext } from './deploy-context';
+
+export interface DeploymentProvider {
+ deploy(context: DeployContext): Promise;
+}
diff --git a/scopes/harmony/application/index.ts b/scopes/harmony/application/index.ts
index 780f73421ada..924a52d598e7 100644
--- a/scopes/harmony/application/index.ts
+++ b/scopes/harmony/application/index.ts
@@ -2,4 +2,5 @@ export { ApplicationAspect } from './application.aspect';
export type { ApplicationMain } from './application.main.runtime';
export type { Application } from './application';
export { AppContext } from './app-context';
+export { DeploymentProvider } from './deployment-provider';
export { DeployContext } from './deploy-context';
diff --git a/scopes/harmony/aspect-docs/logger/logger.composition.tsx b/scopes/harmony/aspect-docs/logger/logger.composition.tsx
index 446cdf3b39f5..4933b2f6b0f4 100644
--- a/scopes/harmony/aspect-docs/logger/logger.composition.tsx
+++ b/scopes/harmony/aspect-docs/logger/logger.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Logger } from './index';
export const LoggerDocs = () => (
-
+
-
+
);
diff --git a/scopes/harmony/aspect-docs/logger/logger.docs.mdx b/scopes/harmony/aspect-docs/logger/logger.docs.mdx
index c425841f5913..e3065e7e88f9 100644
--- a/scopes/harmony/aspect-docs/logger/logger.docs.mdx
+++ b/scopes/harmony/aspect-docs/logger/logger.docs.mdx
@@ -22,13 +22,13 @@ import { Logger } from '@teambit/aspect-docs.logger';
### Render with theme and MDX providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Logger } from '@teambit/aspect-docs.logger';
-
+
-;
+;
```
diff --git a/scopes/harmony/aspect-docs/node/node.composition.tsx b/scopes/harmony/aspect-docs/node/node.composition.tsx
index 86497603c0be..e14b250fe2b1 100644
--- a/scopes/harmony/aspect-docs/node/node.composition.tsx
+++ b/scopes/harmony/aspect-docs/node/node.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Node } from './index';
export const NodeDocs = () => (
-
+
-
+
);
diff --git a/scopes/harmony/aspect-docs/node/node.docs.mdx b/scopes/harmony/aspect-docs/node/node.docs.mdx
index 8cadd8acf56f..1f16fb1df993 100644
--- a/scopes/harmony/aspect-docs/node/node.docs.mdx
+++ b/scopes/harmony/aspect-docs/node/node.docs.mdx
@@ -22,13 +22,13 @@ import { Node } from '@teambit/aspect-docs.node';
### Render with theme and MDX providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Node } from '@teambit/aspect-docs.node';
-
+
-;
+;
```
diff --git a/scopes/harmony/aspect/babel/babel-config.ts b/scopes/harmony/aspect/babel/babel-config.ts
index 4f34afd435f5..8e24f3d2206c 100644
--- a/scopes/harmony/aspect/babel/babel-config.ts
+++ b/scopes/harmony/aspect/babel/babel-config.ts
@@ -16,9 +16,7 @@ const plugins = [
[
require.resolve('@babel/plugin-transform-modules-commonjs'),
{
- lazy: (requirePath) => {
- return !requirePath.includes('.ui') && !requirePath.includes('.preview');
- },
+ lazy: () => true,
},
],
require.resolve('babel-plugin-transform-typescript-metadata'),
diff --git a/scopes/harmony/bit/app.ts b/scopes/harmony/bit/app.ts
index bae5d23073cc..3e1152369c9a 100644
--- a/scopes/harmony/bit/app.ts
+++ b/scopes/harmony/bit/app.ts
@@ -10,7 +10,7 @@ require('v8-compile-cache');
import './hook-require';
import { bootstrap } from '@teambit/legacy/dist/bootstrap';
-import { handleErrorAndExit } from '@teambit/legacy/dist/cli/command-runner';
+import { handleErrorAndExit } from '@teambit/legacy/dist/cli/handle-errors';
import { runCLI } from './load-bit';
// eslint-disable-next-line @typescript-eslint/no-floating-promises
diff --git a/scopes/harmony/bit/manifests.ts b/scopes/harmony/bit/manifests.ts
index 38e5f11a20c1..d5b7cd3aa1d9 100644
--- a/scopes/harmony/bit/manifests.ts
+++ b/scopes/harmony/bit/manifests.ts
@@ -13,7 +13,6 @@ import { DeprecationAspect } from '@teambit/deprecation';
import { DocsAspect } from '@teambit/docs';
import { EnvsAspect } from '@teambit/envs';
import { ExpressAspect } from '@teambit/express';
-import { FlowsAspect } from '@teambit/flows';
import { YarnAspect } from '@teambit/yarn';
import { GeneratorAspect } from '@teambit/generator';
import { HarmonyUiAppAspect } from '@teambit/harmony-ui-app';
@@ -84,7 +83,6 @@ export const manifestsMap = {
[UIAspect.id]: UIAspect,
[GeneratorAspect.id]: GeneratorAspect,
[EnvsAspect.id]: EnvsAspect,
- [FlowsAspect.id]: FlowsAspect,
[GraphAspect.id]: GraphAspect,
[PubsubAspect.id]: PubsubAspect,
[DependencyResolverAspect.id]: DependencyResolverAspect,
diff --git a/scopes/harmony/cache/cache.main.runtime.ts b/scopes/harmony/cache/cache.main.runtime.ts
index f88fef83c925..7de36b19e955 100644
--- a/scopes/harmony/cache/cache.main.runtime.ts
+++ b/scopes/harmony/cache/cache.main.runtime.ts
@@ -30,22 +30,27 @@ export class CacheMain {
cacheDirectory: CACHE_ROOT,
};
- async set(key: string, data: string): Promise {
+ async set(key: string, data: any, ttl?: number): Promise {
this.logger.debug(`put cache to ${key} with data ${data}`);
+ const expire = ttl ? new Date().getTime() + ttl : null;
return cacache
- .put(this.globalCacheFolder, key, data)
+ .put(this.globalCacheFolder, key, JSON.stringify({ data, expire }))
.then(() => true)
.catch(() => false);
}
- async get(key: string): Promise {
+ async get(key: string): Promise {
this.logger.debug(`get cache for ${key}`);
return cacache
.get(this.globalCacheFolder, key)
- .then((cacheObject) => {
- return cacheObject.data.toString();
+ .then(async (cacheObject) => {
+ const { data, expire } = JSON.parse(cacheObject.data.toString());
+ if (expire && new Date().getTime() > expire) {
+ return cacache.rm(this.globalCacheFolder, key);
+ }
+ return data;
})
- .catch(() => null);
+ .catch(() => undefined);
}
private get globalCacheFolder() {
diff --git a/scopes/harmony/cache/cache.spec.ts b/scopes/harmony/cache/cache.spec.ts
new file mode 100644
index 000000000000..f167721774be
--- /dev/null
+++ b/scopes/harmony/cache/cache.spec.ts
@@ -0,0 +1,31 @@
+import v4 from 'uuid';
+import { rmdirSync } from 'fs';
+import { expect } from 'chai';
+import { Logger } from '@teambit/logger';
+import { CacheMain } from './cache.main.runtime';
+
+describe('Cache Aspect', () => {
+ const cacheDirectory = `/tmp/bit/${v4()}`;
+ const cache = new CacheMain({ cacheDirectory }, new Logger('cache.main.runtime'));
+ it('it should set cache with ttl', async () => {
+ await cache.set('_foo', 'bar', 1000);
+ const data = await cache.get('_foo');
+ expect(data).to.equal('bar');
+ });
+
+ it('it should expire cache', async () => {
+ await cache.set('_foo', 'bar', 1);
+ const data = await cache.get('_foo');
+ expect(data).to.equal(null);
+ });
+
+ it('it should set cache without expire ttl', async () => {
+ await cache.set('_foo', 'bar');
+ const data = await cache.get('_foo');
+ expect(data).to.equal('bar');
+ });
+
+ afterAll(() => {
+ rmdirSync(cacheDirectory, { recursive: true });
+ });
+});
diff --git a/scopes/harmony/cli/cli-parser.ts b/scopes/harmony/cli/cli-parser.ts
new file mode 100644
index 000000000000..696404d33a9d
--- /dev/null
+++ b/scopes/harmony/cli/cli-parser.ts
@@ -0,0 +1,177 @@
+import didYouMean from 'didyoumean';
+import yargs, { CommandModule } from 'yargs';
+import { Command } from '@teambit/legacy/dist/cli/command';
+import { GroupsType } from '@teambit/legacy/dist/cli/command-groups';
+import { loadConsumerIfExist } from '@teambit/legacy/dist/consumer';
+import loader from '@teambit/legacy/dist/cli/loader';
+import chalk from 'chalk';
+import { getCommandId } from './get-command-id';
+import { formatHelp } from './help';
+import { GLOBAL_GROUP, STANDARD_GROUP, YargsAdapter } from './yargs-adapter';
+import { CommandNotFound } from './exceptions/command-not-found';
+
+export class CLIParser {
+ constructor(private commands: Command[], private groups: GroupsType) {}
+
+ async parse() {
+ const args = process.argv.slice(2); // remove the first two arguments, they're not relevant
+
+ this.throwForNonExistsCommand(args[0]);
+
+ yargs(args);
+ yargs.help(false);
+ this.configureParser();
+ this.commands.forEach((command: Command) => {
+ if (command.commands && command.commands.length) {
+ this.parseCommandWithSubCommands(command);
+ } else {
+ const yargsCommand = this.getYargsCommand(command);
+ yargs.command(yargsCommand);
+ }
+ });
+ this.configureGlobalFlags();
+ this.setHelpMiddleware();
+ this.configureCompletion();
+
+ yargs
+ // .recommendCommands() // don't use it, it brings the global help of yargs, we have a custom one
+ .wrap(null);
+
+ await yargs.parse();
+ }
+
+ private setHelpMiddleware() {
+ yargs.middleware((argv) => {
+ if (argv._.length === 0) {
+ // this is the main help page
+ this.printHelp();
+ process.exit(0);
+ }
+ if (argv.help) {
+ loader.off(); // stop the "loading bit..." before showing help if needed
+ // this is a command help page
+ yargs.showHelp(logCommandHelp);
+ process.exit(0);
+ }
+ }, true);
+ }
+
+ private configureCompletion() {
+ const commandsToShowComponentIdsForCompletion = [
+ 'show',
+ 'diff',
+ 'tag',
+ 'export',
+ 'env',
+ 'envs',
+ 'compile',
+ 'build',
+ 'test',
+ 'lint',
+ 'log',
+ 'dependents',
+ 'dependencies',
+ ];
+ // @ts-ignore
+ yargs.completion('completion', async function (current, argv, completionFilter, done) {
+ if (!current.startsWith('-') && commandsToShowComponentIdsForCompletion.includes(argv._[1])) {
+ const consumer = await loadConsumerIfExist();
+ done(consumer?.bitmapIdsFromCurrentLane.map((id) => id.toStringWithoutVersion()));
+ } else {
+ completionFilter();
+ }
+ });
+ }
+
+ private printHelp() {
+ const help = formatHelp(this.commands, this.groups);
+ // eslint-disable-next-line no-console
+ console.log(help);
+ }
+
+ private configureParser() {
+ yargs.parserConfiguration({
+ // 'strip-dashed': true, // we can't enable it, otherwise, the completion doesn't work
+ 'strip-aliased': true,
+ 'boolean-negation': false,
+ 'populate--': true,
+ });
+ }
+
+ private parseCommandWithSubCommands(command: Command) {
+ const yarnCommand = this.getYargsCommand(command);
+ yarnCommand.builder = () => {
+ command.commands?.forEach((cmd) => {
+ const subCommand = this.getYargsCommand(cmd);
+ yargs.command(subCommand);
+ });
+ return yargs;
+ };
+ yargs.command(yarnCommand);
+ }
+
+ private getYargsCommand(command: Command): CommandModule {
+ const yarnCommand = new YargsAdapter(command);
+ yarnCommand.handler = yarnCommand.handler.bind(yarnCommand);
+
+ return yarnCommand;
+ }
+
+ private configureGlobalFlags() {
+ yargs
+ .option('help', {
+ alias: 'h',
+ describe: 'show help',
+ group: GLOBAL_GROUP,
+ })
+ .option('version', {
+ global: false,
+ alias: 'v',
+ describe: 'show version',
+ group: GLOBAL_GROUP,
+ });
+ }
+
+ private throwForNonExistsCommand(commandName: string) {
+ if (!commandName || commandName.startsWith('-')) {
+ return;
+ }
+ const commandsNames = this.commands.map((c) => getCommandId(c.name));
+ const aliases = this.commands.map((c) => c.alias).filter((a) => a);
+ const existingGlobalFlags = ['-V', '--version'];
+ const validCommands = [...commandsNames, ...aliases, ...existingGlobalFlags];
+ const commandExist = validCommands.includes(commandName);
+
+ if (!commandExist) {
+ didYouMean.returnFirstMatch = true;
+ const suggestions = didYouMean(
+ commandName,
+ this.commands.filter((c) => !c.private).map((c) => getCommandId(c.name))
+ );
+ const suggestion = suggestions && Array.isArray(suggestions) ? suggestions[0] : suggestions;
+
+ throw new CommandNotFound(commandName, suggestion as string);
+ }
+ }
+}
+
+/**
+ * color the flags with green.
+ * there is no API to get the options, so it is done by regex.
+ * see https://github.com/yargs/yargs/issues/1956
+ */
+function logCommandHelp(help: string) {
+ const replacer = (_, p1, p2) => `${p1}${chalk.green(p2)}`;
+ const lines = help.split('\n');
+ let passedOptions = false;
+ for (let i = 0; i < lines.length; i += 1) {
+ const line = lines[i];
+ if (line.startsWith(STANDARD_GROUP)) {
+ passedOptions = true;
+ } else if (passedOptions) {
+ lines[i] = line.replace(/(--)([\w-]+)/, replacer).replace(/(-)([\w-]+)/, replacer);
+ }
+ }
+ // eslint-disable-next-line no-console
+ console.log(lines.join('\n'));
+}
diff --git a/scopes/harmony/cli/cli.cmd.ts b/scopes/harmony/cli/cli.cmd.ts
new file mode 100644
index 000000000000..c1d94e5a1579
--- /dev/null
+++ b/scopes/harmony/cli/cli.cmd.ts
@@ -0,0 +1,22 @@
+import { Command, CommandOptions } from '@teambit/cli';
+import { CLIMain } from './cli.main.runtime';
+import { GenerateCommandsDoc } from './generate-doc-md';
+
+export class CliCmd implements Command {
+ name = 'cli';
+ description = 'shows all available commands';
+ alias = '';
+ loader = false;
+ group = 'general';
+ options = [['', 'generate', 'generate an .md file']] as CommandOptions;
+
+ constructor(private cliMain: CLIMain) {}
+
+ async report(args, { generate }: { generate: boolean }) {
+ if (generate) return new GenerateCommandsDoc(this.cliMain.commands).generate();
+ return this.cliMain.commands
+ .filter((cmd) => !cmd.private)
+ .map((cmd) => `${cmd.name}`)
+ .join('\n');
+ }
+}
diff --git a/scopes/harmony/cli/cli.main.runtime.ts b/scopes/harmony/cli/cli.main.runtime.ts
index 0c3f2f7afe0b..d86612dc97b1 100644
--- a/scopes/harmony/cli/cli.main.runtime.ts
+++ b/scopes/harmony/cli/cli.main.runtime.ts
@@ -1,19 +1,18 @@
import { Slot, SlotRegistry } from '@teambit/harmony';
import { buildRegistry } from '@teambit/legacy/dist/cli';
import { Command } from '@teambit/legacy/dist/cli/command';
-import { register } from '@teambit/legacy/dist/cli/command-registry';
import LegacyLoadExtensions from '@teambit/legacy/dist/legacy-extensions/extensions-loader';
-import commander from 'commander';
-import didYouMean from 'didyoumean';
-import { equals, splitWhen, flatten } from 'ramda';
+
+import { flatten } from 'ramda';
import { groups, GroupsType } from '@teambit/legacy/dist/cli/command-groups';
import { clone } from 'lodash';
import { CLIAspect, MainRuntime } from './cli.aspect';
-import { formatHelp } from './help';
import { AlreadyExistsError } from './exceptions/already-exists';
-import { CommandNotFound } from './exceptions/command-not-found';
import { getCommandId } from './get-command-id';
import { LegacyCommandAdapter } from './legacy-command-adapter';
+import { CLIParser } from './cli-parser';
+import { CompletionCmd } from './completion.cmd';
+import { CliCmd } from './cli.cmd';
export type CommandList = Array;
export type OnStart = (hasWorkspace: boolean) => Promise;
@@ -53,7 +52,7 @@ export class CLIMain {
/**
* list of all registered commands. (legacy and new).
*/
- get commands() {
+ get commands(): CommandList {
return flatten(this.commandsSlot.values());
}
@@ -80,22 +79,8 @@ export class CLIMain {
*/
async run(hasWorkspace: boolean) {
await this.invokeOnStart(hasWorkspace);
- const args = process.argv.slice(2); // remove the first two arguments, they're not relevant
- if (!args[0] || ['-h', '--help'].includes(args[0])) {
- this.printHelp();
- return;
- }
-
- const [params, packageManagerArgs] = splitWhen(equals('--'), process.argv);
- if (packageManagerArgs && packageManagerArgs.length) {
- packageManagerArgs.shift(); // remove the -- delimiter
- }
-
- this.commands.forEach((command) => register(command as any, commander, packageManagerArgs));
- this.throwForNonExistsCommand(args[0]);
-
- // this is what runs the `execAction` of the specific command and eventually exits the process
- commander.parse(params);
+ const CliParser = new CLIParser(this.commands, this.groups);
+ await CliParser.parse();
}
private async invokeOnStart(hasWorkspace: boolean) {
@@ -121,31 +106,6 @@ export class CLIMain {
}
}
- private printHelp() {
- const help = formatHelp(this.commands, this.groups);
- // eslint-disable-next-line no-console
- console.log(help);
- }
-
- private throwForNonExistsCommand(commandName: string) {
- const commandsNames = this.commands.map((c) => getCommandId(c.name));
- const aliases = this.commands.map((c) => c.alias).filter((a) => a);
- const globalFlags = ['-V', '--version'];
- const validCommands = [...commandsNames, ...aliases, ...globalFlags];
- const commandExist = validCommands.includes(commandName);
-
- if (!commandExist) {
- didYouMean.returnFirstMatch = true;
- const suggestions = didYouMean(
- commandName,
- this.commands.filter((c) => !c.private).map((c) => getCommandId(c.name))
- );
- const suggestion = suggestions && Array.isArray(suggestions) ? suggestions[0] : suggestions;
- // @ts-ignore
- throw new CommandNotFound(commandName, suggestion);
- }
- }
-
static dependencies = [];
static runtime = MainRuntime;
static slots = [Slot.withType(), Slot.withType()];
@@ -167,10 +127,11 @@ export class CLIMain {
}, []);
const legacyRegistry = buildRegistry(extensionsCommands);
- const allCommands = legacyRegistry.commands.concat(legacyRegistry.extensionsCommands || []);
- const allCommandsAdapters = allCommands.map((command) => new LegacyCommandAdapter(command, cliMain));
- // @ts-ignore
- cliMain.register(...allCommandsAdapters);
+ const legacyCommands = legacyRegistry.commands.concat(legacyRegistry.extensionsCommands || []);
+ const legacyCommandsAdapters = legacyCommands.map((command) => new LegacyCommandAdapter(command, cliMain));
+ const cliCmd = new CliCmd(cliMain);
+ cliMain.register(...legacyCommandsAdapters, new CompletionCmd(), cliCmd);
+
return cliMain;
}
}
diff --git a/src/cli/command-runner.ts b/scopes/harmony/cli/command-runner.ts
similarity index 64%
rename from src/cli/command-runner.ts
rename to scopes/harmony/cli/command-runner.ts
index f9ac9642870b..34b2ad86e868 100644
--- a/src/cli/command-runner.ts
+++ b/scopes/harmony/cli/command-runner.ts
@@ -1,12 +1,13 @@
import { render } from 'ink';
-import { serializeError } from 'serialize-error';
-import { migrate } from '../api/consumer';
-import logger, { LoggerLevel } from '../logger/logger';
-import { buildCommandMessage, isNumeric, packCommand } from '../utils';
-import { CLIArgs, Command, Flags } from './command';
-import { parseCommandName } from './command-registry';
-import defaultHandleError from './default-error-handler';
-import loader from './loader';
+import { migrate } from '@teambit/legacy/dist/api/consumer';
+import logger, { LoggerLevel } from '@teambit/legacy/dist/logger/logger';
+import { CLIArgs, Command, Flags } from '@teambit/legacy/dist/cli/command';
+import { parseCommandName } from '@teambit/legacy/dist/cli/command-registry';
+import loader from '@teambit/legacy/dist/cli/loader';
+import { handleErrorAndExit } from '@teambit/legacy/dist/cli/handle-errors';
+import { TOKEN_FLAG_NAME } from '@teambit/legacy/dist/constants';
+import globalFlags from '@teambit/legacy/dist/cli/global-flags';
+import { Analytics } from '@teambit/legacy/dist/analytics/analytics';
export class CommandRunner {
private commandName: string;
@@ -19,6 +20,7 @@ export class CommandRunner {
*/
async runCommand() {
try {
+ this.bootstrapCommand();
await this.runMigrateIfNeeded();
this.determineConsoleWritingDuringCommand();
if (this.flags.json) {
@@ -37,6 +39,18 @@ export class CommandRunner {
throw new Error(`command "${this.commandName}" doesn't implement "render" nor "report" methods`);
}
+ private bootstrapCommand() {
+ Analytics.init(this.commandName, this.flags, this.args);
+ logger.info(`[*] started a new command: "${this.commandName}" with the following data:`, {
+ args: this.args,
+ flags: this.flags,
+ });
+ const token = this.flags[TOKEN_FLAG_NAME];
+ if (token) {
+ globalFlags.token = token.toString();
+ }
+ }
+
/**
* when both "render" and "report" were implemented, check whether it's a terminal.
* if it's a terminal, use "render", if not, use "report" because "report" is just a string
@@ -91,7 +105,7 @@ export class CommandRunner {
* for internals commands, such as, _put, _fetch, the command.loader = false.
*/
private determineConsoleWritingDuringCommand() {
- if (this.command.loader && !this.flags.json) {
+ if (this.command.loader && !this.flags.json && !this.flags['get-yargs-completions']) {
loader.on();
loader.start(`running command "${this.commandName}"...`);
logger.shouldWriteToConsole = true;
@@ -120,43 +134,3 @@ export class CommandRunner {
return null;
}
}
-
-function serializeErrAndExit(err, commandName: string) {
- const data = packCommand(buildCommandMessage(serializeError(err), undefined, false), false, false);
- const code = err.code && isNumeric(err.code) ? err.code : 1;
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- return process.stderr.write(data, () => logger.exitAfterFlush(code, commandName));
-}
-
-export async function handleErrorAndExit(err: Error, commandName: string, shouldSerialize = false): Promise {
- try {
- loader.off();
- logger.error(`got an error from command ${commandName}: ${err}`);
- logger.error(err.stack || '');
- const { message, error } = defaultHandleError(err);
- if (shouldSerialize) serializeErrAndExit(error, commandName);
- else await logErrAndExit(message, commandName);
- } catch (e) {
- // eslint-disable-next-line no-console
- console.error('failed to log the error properly, failure error', e);
- // eslint-disable-next-line no-console
- console.error('failed to log the error properly, original error', err);
- process.exit(1);
- }
-}
-
-export async function handleUnhandledRejection(err: Error | null | undefined | {}) {
- // eslint-disable-next-line no-console
- console.error('** unhandled rejection found, please make sure the promise is resolved/rejected correctly! **');
- if (err instanceof Error) {
- return handleErrorAndExit(err, process.argv[2]);
- }
- console.error(err); // eslint-disable-line
- return handleErrorAndExit(new Error(`unhandledRejections found. err ${err}`), process.argv[2]);
-}
-
-export async function logErrAndExit(err: Error | string, commandName: string) {
- if (!err) throw new Error(`logErrAndExit expects to get either an Error or a string, got nothing`);
- console.error(err); // eslint-disable-line
- await logger.exitAfterFlush(1, commandName);
-}
diff --git a/scopes/harmony/cli/completion.cmd.ts b/scopes/harmony/cli/completion.cmd.ts
new file mode 100644
index 000000000000..465338e14893
--- /dev/null
+++ b/scopes/harmony/cli/completion.cmd.ts
@@ -0,0 +1,9 @@
+import { Command } from '@teambit/legacy/dist/cli/command';
+
+export class CompletionCmd implements Command {
+ name = 'completion';
+ description = 'enable bash/zsh-completion shortcuts for commands and options';
+ alias = '';
+ group = 'general';
+ options = [];
+}
diff --git a/scopes/harmony/cli/generate-doc-md.ts b/scopes/harmony/cli/generate-doc-md.ts
new file mode 100644
index 000000000000..be6b167aec7e
--- /dev/null
+++ b/scopes/harmony/cli/generate-doc-md.ts
@@ -0,0 +1,77 @@
+import { Command } from '@teambit/legacy/dist/cli/command';
+import { CommandOptions } from '@teambit/legacy/dist/cli/legacy-command';
+import { getCommandId } from './get-command-id';
+
+export class GenerateCommandsDoc {
+ constructor(private commands: Command[]) {}
+
+ generate(): string {
+ const commands = this.getAllPublicCommands();
+ let output = `---
+id: cli-all
+title: CLI Commands
+---
+
+Commands that are marked as workspace only must be executed inside a workspace. Commands that are marked as not workspace only, can be executed from anywhere and will run on a remote server.
+`;
+ output += commands.map((cmd) => this.generateCommand(cmd)).join('\n');
+
+ return output;
+ }
+
+ private getAllPublicCommands() {
+ return this.commands.filter((cmd) => !cmd.private);
+ }
+
+ private generateCommand(cmd: Command) {
+ const commandName = getCommandId(cmd.name);
+ let result = `## ${commandName} \n\n`;
+ if (cmd.alias && cmd.alias.length > 0) {
+ result += `**Alias**: \`${cmd.alias}\` \n`;
+ }
+ result += `**Workspace only**: ${cmd.skipWorkspace ? 'no' : 'yes'} \n`;
+ result += `**Description**: ${this.formatDescription(cmd.description as string)}`;
+ result += `\`bit ${cmd.name}\` \n\n`;
+
+ if (cmd.commands && cmd.commands.length > 0) {
+ result += this.generateSubCommands(cmd.commands);
+ }
+ result += this.generateOptions(cmd.options);
+ result += `--- \n`;
+
+ return result;
+ }
+
+ private generateSubCommands(subCommands: Command[]) {
+ let ret = '';
+ subCommands.forEach((subCommand) => {
+ // @ts-ignore
+ const name = subCommand.name.match(/^([\w-]+)/)[0];
+ ret += `### ${name} \n`;
+ ret += `**Usage**: ${subCommand.name.replace(/([<>*()?])/g, '\\$1')} \n\n`;
+ ret += `**Description**: ${this.formatDescription(subCommand.description as string)}`;
+
+ ret += '\n';
+ ret += this.generateOptions(subCommand.options);
+ });
+ return ret;
+ }
+
+ private generateOptions(options: CommandOptions): string {
+ if (!options || options.length <= 0) return '';
+ let output = `| **Option** | **Option alias** | **Description**| \n`;
+ output += `|---|:-----:|---|\n`;
+ options.forEach((opt) => {
+ const [alias, flag, description] = opt;
+ const aliasFormatted = alias ? `-${alias}` : ' ';
+ const flagFormatted = `--${flag}`;
+ output += `|\`${flagFormatted}\`|\`${aliasFormatted}\`|${description}|\n`;
+ });
+ output += `\n`;
+ return output;
+ }
+
+ private formatDescription(description: string): string {
+ return `${description.split('\n').join(' \n')} \n\n`;
+ }
+}
diff --git a/scopes/harmony/cli/legacy-command-adapter.ts b/scopes/harmony/cli/legacy-command-adapter.ts
index 1276cc2eed32..6c0f2dd64750 100644
--- a/scopes/harmony/cli/legacy-command-adapter.ts
+++ b/scopes/harmony/cli/legacy-command-adapter.ts
@@ -14,6 +14,7 @@ export class LegacyCommandAdapter implements Command {
private?: boolean;
migration?: boolean;
internal?: boolean;
+ skipWorkspace?: boolean;
_packageManagerArgs?: string[];
constructor(private cmd: LegacyCommand, cliExtension: CLIMain) {
this.name = cmd.name;
@@ -21,9 +22,11 @@ export class LegacyCommandAdapter implements Command {
this.options = cmd.opts || [];
this.alias = cmd.alias;
this.shortDescription = cmd.shortDescription;
+ this.skipWorkspace = cmd.skipWorkspace;
this.group = cmd.group;
this.loader = cmd.loader;
this.private = cmd.private;
+
this.migration = cmd.migration;
this.internal = cmd.internal;
this.commands = (cmd.commands || []).map((sub) => new LegacyCommandAdapter(sub, cliExtension));
diff --git a/scopes/harmony/cli/yargs-adapter.ts b/scopes/harmony/cli/yargs-adapter.ts
new file mode 100644
index 000000000000..432306435c26
--- /dev/null
+++ b/scopes/harmony/cli/yargs-adapter.ts
@@ -0,0 +1,92 @@
+import chalk from 'chalk';
+import { Command } from '@teambit/legacy/dist/cli/command';
+import { Arguments, CommandBuilder, CommandModule } from 'yargs';
+import { TOKEN_FLAG } from '@teambit/legacy/dist/constants';
+import { camelCase } from 'lodash';
+import { CommandRunner } from './command-runner';
+
+export const GLOBAL_GROUP = 'Global';
+export const STANDARD_GROUP = 'Options';
+
+export class YargsAdapter implements CommandModule {
+ command: string;
+ describe?: string;
+ aliases?: string;
+ builder: CommandBuilder;
+ constructor(private commanderCommand: Command) {
+ this.command = commanderCommand.name;
+ this.describe = chalk.yellow(commanderCommand.description as string);
+ this.aliases = commanderCommand.alias;
+ this.builder = this.optionsToBuilder(commanderCommand);
+ }
+
+ handler(argv: Arguments) {
+ const enteredArgs = getArgsFromCommandName(this.commanderCommand.name);
+ const argsValues = enteredArgs.map((a) => argv[a]) as any[];
+ // a workaround to get a flag syntax such as "--all [version]" work with yargs.
+ const flags = Object.keys(argv).reduce((acc, current) => {
+ if (current === '_' || current === '$0' || current === '--') return acc;
+ const flagName = current.split(' ')[0];
+ acc[flagName] = argv[current];
+ return acc;
+ }, {});
+ this.commanderCommand._packageManagerArgs = (argv['--'] || []) as string[];
+
+ const commandRunner = new CommandRunner(this.commanderCommand, argsValues, flags);
+ return commandRunner.runCommand();
+ }
+
+ private optionsToBuilder(command: Command) {
+ const option = command.options.reduce((acc, [alias, opt, desc]) => {
+ acc[opt] = {
+ alias,
+ describe: desc,
+ group: STANDARD_GROUP,
+ type: opt.includes(' ') ? undefined : 'boolean',
+ };
+ return acc;
+ }, {});
+ const globalOptions = this.getGlobalOptions(command);
+
+ return { ...option, ...globalOptions };
+ }
+
+ private getGlobalOptions(command: Command): Record {
+ const globalOptions: Record = {};
+ if (command.remoteOp) {
+ globalOptions[TOKEN_FLAG] = {
+ describe: 'authentication token',
+ group: GLOBAL_GROUP,
+ };
+ }
+ if (!command.internal) {
+ globalOptions.log = {
+ describe:
+ 'print log messages to the screen, options are: [trace, debug, info, warn, error, fatal], the default is info',
+ group: GLOBAL_GROUP,
+ };
+ globalOptions['safe-mode'] = {
+ describe:
+ 'bootstrap the bare-minimum with only the CLI aspect. useful mainly for low-level commands when bit refuses to load',
+ group: GLOBAL_GROUP,
+ };
+ }
+ return globalOptions;
+ }
+}
+
+function getArgsFromCommandName(commandName: string) {
+ const commandSplit = commandName.split(' ');
+ commandSplit.shift(); // remove the first element, it's the command-name
+
+ return commandSplit.map((existArg) => {
+ const trimmed = existArg.trim();
+ if ((!trimmed.startsWith('<') && !trimmed.startsWith('[')) || (!trimmed.endsWith('>') && !trimmed.endsWith(']'))) {
+ throw new Error(`expect arg "${trimmed}" of "${commandName}" to be wrapped with "[]" or "<>"`);
+ }
+ // remove the opening and closing brackets
+ const withoutBrackets = trimmed.slice(1, -1);
+
+ return camelCase(withoutBrackets);
+ });
+}
diff --git a/scopes/harmony/config/schema.json b/scopes/harmony/config/schema.json
index f7b8e45664c9..2140b63dfa22 100644
--- a/scopes/harmony/config/schema.json
+++ b/scopes/harmony/config/schema.json
@@ -129,33 +129,6 @@
}
}
},
- "teambit.pipelines/flows": {
- "description": "main configuration for handling the build process of components.",
- "type": "object",
- "properties": {
- "tasks": {
- "description": "configure build tasks. configuration of build tasks is basically a map of `task name` pointed to an array of tasks. each task can be either a bash command or an extension which exposes a task. reserved task names: build, test, runs on pre-tag.",
- "type": "object",
- "properties": {
- "build": {
- "type": "array",
- "default": ["teambit.react/react:build", "mv dist dist-copy"],
- "examples": [["teambit.react/react:build", "mv dist dist-copy"]]
- },
- "test": {
- "type": "array",
- "default": ["mocha ."],
- "examples": [["mocha ."]]
- },
- "deploy": {
- "type": "array",
- "default": ["firebase deploy"],
- "examples": [["firebase deploy"]]
- }
- }
- }
- }
- },
"teambit.pkg/pkg": {
"description": "",
"type": "object",
diff --git a/scopes/harmony/graphql/graphql.main.runtime.ts b/scopes/harmony/graphql/graphql.main.runtime.ts
index df82a2451c0d..192cab5e9139 100644
--- a/scopes/harmony/graphql/graphql.main.runtime.ts
+++ b/scopes/harmony/graphql/graphql.main.runtime.ts
@@ -5,7 +5,7 @@ import { Harmony, Slot, SlotRegistry } from '@teambit/harmony';
import { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
import express, { Express } from 'express';
import { graphqlHTTP } from 'express-graphql';
-import getPort from 'get-port';
+import { Port } from '@teambit/toolbox.network.get-port';
import { execute, subscribe } from 'graphql';
import { PubSub } from 'graphql-subscriptions';
import { createServer, Server } from 'http';
@@ -157,7 +157,7 @@ export class GraphqlMain {
private async getPort(range: number[]) {
const [from, to] = range;
- return getPort({ port: getPort.makeRange(from, to) });
+ return Port.getPort(from, to);
}
/** create Subscription server with different port */
diff --git a/scopes/harmony/node/node.main.runtime.ts b/scopes/harmony/node/node.main.runtime.ts
index 6917924cd8bb..9931adbb1991 100644
--- a/scopes/harmony/node/node.main.runtime.ts
+++ b/scopes/harmony/node/node.main.runtime.ts
@@ -71,15 +71,23 @@ export class NodeMain {
);
/**
+ * @deprecated - use useWebpack
* override the preview config in the env.
*/
overridePreviewConfig = this.react.overridePreviewConfig.bind(this.react);
/**
+ * @deprecated - use useWebpack
* override the dev server configuration.
*/
overrideDevServerConfig = this.react.overrideDevServerConfig.bind(this.react);
+ /**
+ * override the env's dev server and preview webpack configurations.
+ * Replaces both overrideDevServerConfig and overridePreviewConfig
+ */
+ useWebpack = this.react.useWebpack.bind(this.react);
+
/**
* override the dependency configuration of the component environment.
*/
@@ -89,6 +97,8 @@ export class NodeMain {
});
}
+ overrideMounter = this.react.overrideMounter.bind(this.react);
+
/**
* create a new composition of the node environment.
*/
diff --git a/scopes/mdx/aspect-docs/mdx/mdx.composition.tsx b/scopes/mdx/aspect-docs/mdx/mdx.composition.tsx
index 0a8235ecffde..1a37d6114ebf 100644
--- a/scopes/mdx/aspect-docs/mdx/mdx.composition.tsx
+++ b/scopes/mdx/aspect-docs/mdx/mdx.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Mdx } from './index';
export const MdxDocs = () => (
-
+
-
+
);
diff --git a/scopes/mdx/aspect-docs/mdx/mdx.docs.mdx b/scopes/mdx/aspect-docs/mdx/mdx.docs.mdx
index a47087592f42..824967ed4f62 100644
--- a/scopes/mdx/aspect-docs/mdx/mdx.docs.mdx
+++ b/scopes/mdx/aspect-docs/mdx/mdx.docs.mdx
@@ -22,13 +22,13 @@ import { Mdx } from '@teambit/aspect-docs.mdx';
### Render with theme and MDX providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Mdx } from '@teambit/aspect-docs.mdx';
-
+
-;
+;
```
diff --git a/scopes/mdx/mdx/templates/mdx-component/files/docs.ts b/scopes/mdx/mdx/templates/mdx-component/files/docs.ts
index 974fca39b194..53373c77c179 100644
--- a/scopes/mdx/mdx/templates/mdx-component/files/docs.ts
+++ b/scopes/mdx/mdx/templates/mdx-component/files/docs.ts
@@ -29,15 +29,15 @@ This is a simple MDX-file compiled by Bit to a reuseable component.
### Render with theme and MDX providers
\`\`\`js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context'
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'
import { MDXLayout } from '@teambit/ui.mdx-layout'
import { ${Name} } from './index'
-
+
<${Name} />
-
+
\`\`\`
`,
};
diff --git a/scopes/mdx/ui/mdx-layout/mdx-layout.module.scss b/scopes/mdx/ui/mdx-layout/mdx-layout.module.scss
new file mode 100644
index 000000000000..345595f7852f
--- /dev/null
+++ b/scopes/mdx/ui/mdx-layout/mdx-layout.module.scss
@@ -0,0 +1,5 @@
+.mdxContent {
+ * {
+ max-width: 100%;
+ }
+}
diff --git a/scopes/mdx/ui/mdx-layout/mdx-layout.tsx b/scopes/mdx/ui/mdx-layout/mdx-layout.tsx
index 29f1a735de9d..08ecc04280d8 100644
--- a/scopes/mdx/ui/mdx-layout/mdx-layout.tsx
+++ b/scopes/mdx/ui/mdx-layout/mdx-layout.tsx
@@ -16,6 +16,7 @@ import { HighlightedTextSpan } from '@teambit/mdx.ui.docs.highlighted-text-span'
import { Snippet } from '@teambit/mdx.ui.docs.snippet';
import { Link } from '@teambit/mdx.ui.docs.link';
import { P } from '@teambit/mdx.ui.docs.paragraph';
+import styles from './mdx-layout.module.scss';
const defaultMdxComponents = {
h1: createHeading('lg'),
@@ -84,7 +85,11 @@ export type MDXLayoutProps = {
*/
export function MDXLayout({ children, mdxComponents }: MDXLayoutProps) {
const components = Object.assign(defaultMdxComponents, mdxComponents);
- return {children};
+ return (
+
+ {children}
+
+ );
}
MDXLayout.defaultProps = {
diff --git a/scopes/pipelines/aspect-docs/builder/builder.composition.tsx b/scopes/pipelines/aspect-docs/builder/builder.composition.tsx
index 5dfdc6aa1fa9..08abeeb49024 100644
--- a/scopes/pipelines/aspect-docs/builder/builder.composition.tsx
+++ b/scopes/pipelines/aspect-docs/builder/builder.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Builder } from './index';
export const BuilderDocs = () => (
-
+
-
+
);
diff --git a/scopes/pipelines/aspect-docs/builder/builder.docs.mdx b/scopes/pipelines/aspect-docs/builder/builder.docs.mdx
index 89a6243c1d5b..db556c648299 100644
--- a/scopes/pipelines/aspect-docs/builder/builder.docs.mdx
+++ b/scopes/pipelines/aspect-docs/builder/builder.docs.mdx
@@ -22,13 +22,13 @@ import { Builder } from '@teambit/aspect-docs.builder';
### Render with theme and MDX providers
```jsx
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Builder } from '@teambit/aspect-docs.builder';
-
+
-;
+;
```
diff --git a/scopes/pipelines/builder/build-pipe.ts b/scopes/pipelines/builder/build-pipe.ts
index afad49ef3c97..279af3eb9050 100644
--- a/scopes/pipelines/builder/build-pipe.ts
+++ b/scopes/pipelines/builder/build-pipe.ts
@@ -1,5 +1,4 @@
import { EnvDefinition } from '@teambit/envs';
-import { compact } from 'lodash';
import { ComponentMap } from '@teambit/component';
import { Logger, LongProcessLogger } from '@teambit/logger';
import mapSeries from 'p-map-series';
@@ -48,6 +47,7 @@ export class BuildPipe {
private failedTasks: BuildTask[] = [];
private failedDependencyTask: BuildTask | undefined;
private longProcessLogger: LongProcessLogger;
+ private taskResults: TaskResults[] = [];
constructor(
/**
* array of services to apply on the components.
@@ -64,9 +64,9 @@ export class BuildPipe {
async execute(): Promise {
await this.executePreBuild();
this.longProcessLogger = this.logger.createLongProcessLogger('running tasks', this.tasksQueue.length);
- const results = await mapSeries(this.tasksQueue, async ({ task, env }) => this.executeTask(task, env));
+ await mapSeries(this.tasksQueue, async ({ task, env }) => this.executeTask(task, env));
this.longProcessLogger.end();
- const tasksResultsList = new TaskResultsList(this.tasksQueue, compact(results));
+ const tasksResultsList = new TaskResultsList(this.tasksQueue, this.taskResults);
await this.executePostBuild(tasksResultsList);
return tasksResultsList;
@@ -81,13 +81,13 @@ export class BuildPipe {
this.logger.consoleSuccess();
}
- private async executeTask(task: BuildTask, env: EnvDefinition): Promise {
+ private async executeTask(task: BuildTask, env: EnvDefinition): Promise {
const taskId = BuildTaskHelper.serializeId(task);
const taskName = `${taskId}${task.description ? ` (${task.description})` : ''}`;
this.longProcessLogger.logProgress(`env "${env.id}", task "${taskName}"`);
this.updateFailedDependencyTask(task);
if (this.shouldSkipTask(taskId, env.id)) {
- return null;
+ return;
}
const startTask = process.hrtime();
const taskStartTime = Date.now();
@@ -115,7 +115,7 @@ export class BuildPipe {
endTime,
};
- return taskResults;
+ this.taskResults.push(taskResults);
}
private async executePostBuild(tasksResults: TaskResultsList) {
@@ -149,6 +149,7 @@ export class BuildPipe {
private getBuildContext(envId: string) {
const buildContext = this.envsBuildContext[envId];
if (!buildContext) throw new Error(`unable to find buildContext for ${envId}`);
+ buildContext.previousTasksResults = this.taskResults;
return buildContext;
}
diff --git a/scopes/pipelines/builder/build-pipeline-order.ts b/scopes/pipelines/builder/build-pipeline-order.ts
index eef0822bd51b..e329e3696ecc 100644
--- a/scopes/pipelines/builder/build-pipeline-order.ts
+++ b/scopes/pipelines/builder/build-pipeline-order.ts
@@ -1,4 +1,3 @@
-import R from 'ramda';
import { Graph } from 'cleargraph';
import TesterAspect from '@teambit/tester';
import { EnvDefinition, Environment } from '@teambit/envs';
@@ -66,7 +65,7 @@ export function calculatePipelineOrder(
pipelineEnvs.push({ env: envDefinition, pipeline });
});
- const flattenedPipeline: BuildTask[] = R.flatten(pipelineEnvs.map((pipelineEnv) => pipelineEnv.pipeline));
+ const flattenedPipeline: BuildTask[] = pipelineEnvs.map((pipelineEnv) => pipelineEnv.pipeline).flat();
flattenedPipeline.forEach((task) => addDependenciesToGraph(graphs, flattenedPipeline, task));
const dataPerLocation: DataPerLocation[] = graphs.map(({ location, graph }) => {
@@ -176,7 +175,7 @@ which is invalid. the dependency must be located earlier or in the same location
function getPipelineForEnv(taskSlot: TaskSlot, env: Environment, pipeNameOnEnv: string): BuildTask[] {
const buildTasks: BuildTask[] = env[pipeNameOnEnv] ? env[pipeNameOnEnv]() : [];
- const slotsTasks = R.flatten(taskSlot.values());
+ const slotsTasks = taskSlot.values().flat();
const tasksAtStart: BuildTask[] = [];
const tasksAtEnd: BuildTask[] = [];
slotsTasks.forEach((task) => {
diff --git a/scopes/pipelines/builder/build-task.ts b/scopes/pipelines/builder/build-task.ts
index 16599a91f9f3..87d51bf40976 100644
--- a/scopes/pipelines/builder/build-task.ts
+++ b/scopes/pipelines/builder/build-task.ts
@@ -4,6 +4,7 @@ import type { Network } from '@teambit/isolator';
import type { ComponentResult } from './types';
import type { ArtifactDefinition } from './artifact';
import { TaskResultsList } from './task-results-list';
+import { TaskResults } from './build-pipe';
export type TaskLocation = 'start' | 'end';
@@ -22,6 +23,11 @@ export interface BuildContext extends ExecutionContext {
* network of capsules ready to be built.
*/
capsuleNetwork: Network;
+
+ /**
+ * data generated by tasks that were running before this task
+ */
+ previousTasksResults: TaskResults[];
}
export interface BuildTask {
diff --git a/scopes/pipelines/builder/builder.service.tsx b/scopes/pipelines/builder/builder.service.tsx
index c31f4b5506a2..1424b89f5010 100644
--- a/scopes/pipelines/builder/builder.service.tsx
+++ b/scopes/pipelines/builder/builder.service.tsx
@@ -89,6 +89,7 @@ export class BuilderService implements EnvService (file.contents || '').toString())
- .join('\n')}`;
- const md5 = createHash('md5', { encoding: 'utf8' }).update(content).digest('base64').toString();
- return md5;
- }
-
- async saveHashValue(capsule: Capsule, name: string): Promise {
- await safeGetLock(this.pathToCache);
- const file = await safeReadFile(this.pathToCache);
- const content = file ? JSON.parse(file) : {};
- const hash = this.hash(capsule, name);
- content[capsule.wrkDir] = content[capsule.wrkDir] || {};
- content[capsule.wrkDir][name] = hash;
- await fs.writeFile(this.pathToCache, JSON.stringify(content, null, 2));
- return unlock(this.pathToCache);
- }
-
- async getCacheValue(wrkDir: string, name: string): Promise {
- await safeGetLock(this.pathToCache);
- const file = await safeReadFile(this.pathToCache);
- const content = file ? JSON.parse(file) : {};
- const cacheValue = path([wrkDir, name], content);
- await unlock(this.pathToCache);
- return cacheValue;
- }
-
- async compareToCache(capsule: Capsule, name: string): Promise {
- const inCache = await this.getCacheValue(capsule.wrkDir, name);
- const hashValue = this.hash(capsule, name);
- return equals(inCache, hashValue);
- }
-}
-
-export function getExecutionCache() {
- const pathToCache = join(CACHE_ROOT, 'capsules', 'cache-flow.json');
- return new ExecutionCache(pathToCache);
-}
-
-async function safeReadFile(filePath: string) {
- let content: string | null = null;
- try {
- content = await fs.readFile(filePath, { encoding: 'utf8' });
- // eslint-disable-next-line no-empty
- } catch (e) {}
- return content;
-}
-
-async function safeGetLock(
- cachePath: string,
- options: {
- init: (somePath: string) => Promise;
- timeout: number;
- } = {
- init: (somePath: string) => fs.writeFile(somePath, '{}', 'utf8'),
- timeout: 100,
- }
-): Promise {
- let lockState: 'UNLOCK' | 'LOCK' | 'UNLOCKERROR' = 'UNLOCK';
- try {
- await lock(cachePath, { retries: 5, update: options.timeout });
- lockState = 'LOCK';
- } catch (e) {
- if (e.code === 'ENOENT') {
- await options.init(cachePath);
- } else {
- lockState = 'UNLOCKERROR';
- }
- }
- return lockState === 'UNLOCK'
- ? safeGetLock(cachePath)
- : lockState === 'UNLOCKERROR'
- ? new Promise(function (resolve) {
- setTimeout(function () {
- return safeGetLock(cachePath).then(() => resolve());
- }, options.timeout);
- })
- : undefined;
-}
diff --git a/scopes/pipelines/flows/flow/flow.ts b/scopes/pipelines/flows/flow/flow.ts
deleted file mode 100644
index 11244d68c8ba..000000000000
--- a/scopes/pipelines/flows/flow/flow.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
-/* eslint-disable no-plusplus */
-/* eslint-disable max-len */
-import { Capsule } from '@teambit/isolator';
-import logger from '@teambit/legacy/dist/logger/logger';
-import { ReplaySubject, Subject } from 'rxjs';
-
-import { executeTask } from '../task';
-
-export class Flow {
- private result: any[] = [];
- constructor(private tasks: string[]) {}
- /**
- * Takes a capsule and return a stream of streams.
- * Return value represent the execution of tasks.
- *
- * @param capsule ComponentCapsule to execute tasks
- */
- execute(capsule: Capsule): ReplaySubject {
- const id = capsule.component.id.toString();
- const startTime = new Date();
- const subject = new ReplaySubject();
- subject.next({
- type: 'flow:start',
- id,
- startTime,
- });
- if (this.tasks && this.tasks.length) {
- logger.debug(`flowsExt, flow.execute of ${id}. tasks: ${this.tasks.join(', ')}`);
- this.execSequence(capsule, subject, startTime, 0);
- } else {
- logger.debug(`flowsExt, flow.execute of ${id}. no tasks. handleDone`);
- setImmediate(() => this.handleDone(subject, capsule, startTime));
- }
- return subject;
- }
-
- private execSequence(capsule: Capsule, subject: Subject, start: Date, index: number) {
- const id = capsule.component.id.toString();
- logger.debug(`flowsExt, flow.execSequence of ${id}. index: ${index}`);
- const that = this;
- const task = executeTask(this.tasks[index], capsule);
- subject.next(task);
- task.subscribe({
- next(data) {
- if (data.type === 'task:result') {
- that.result.push(data);
- if (data.code) {
- index = that.handleError(index, capsule, data, subject, start);
- }
- }
- },
- complete() {
- if (that.tasks.length > index + 1) {
- that.execSequence(capsule, subject, start, ++index);
- } else {
- that.handleDone(subject, capsule, start);
- }
- },
- });
- }
-
- private handleError(index: number, capsule: Capsule, data: any, subject: Subject, start: Date) {
- for (let i = index + 1; i < this.tasks.length; ++i) {
- this.result.push({
- type: 'task:error',
- id: `${capsule.component.id.toString()}:${this.tasks[i]}`,
- value: new Error(`Error by ${data.id}`),
- errorBy: data,
- });
- }
- const isError = true;
- this.handleDone(subject, capsule, start, isError);
- return this.tasks.length;
- }
-
- private handleDone(subject: Subject, capsule: Capsule, startTime: Date, isError = false) {
- const endTime = new Date();
- logger.debug(`flowsExt, flow.handleDone of ${capsule.component.id.toString()}. isError: ${isError}`);
- subject[isError ? 'error' : 'next']({
- type: 'flow:result',
- id: capsule.component.id,
- value: {
- capsule,
- tasks: this.result,
- },
- code: isError ? 1 : 0,
- startTime,
- duration: endTime.getTime() - startTime.getTime(),
- });
- setTimeout(subject.complete.bind(subject), 0);
- this.result = [];
- }
-}
diff --git a/scopes/pipelines/flows/flow/index.ts b/scopes/pipelines/flows/flow/index.ts
deleted file mode 100644
index 94aede584046..000000000000
--- a/scopes/pipelines/flows/flow/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Flow } from './flow';
diff --git a/scopes/pipelines/flows/flows.aspect.ts b/scopes/pipelines/flows/flows.aspect.ts
deleted file mode 100644
index dd76a72ca3e6..000000000000
--- a/scopes/pipelines/flows/flows.aspect.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Aspect } from '@teambit/harmony';
-
-export const FlowsAspect = Aspect.create({
- id: 'teambit.pipelines/flows',
- dependencies: [],
- defaultConfig: {},
-});
diff --git a/scopes/pipelines/flows/flows.docs.md b/scopes/pipelines/flows/flows.docs.md
deleted file mode 100644
index b634be4060e0..000000000000
--- a/scopes/pipelines/flows/flows.docs.md
+++ /dev/null
@@ -1,142 +0,0 @@
-
-Run tasks on components and their dependents.
-
-- Provides a `bit run` command to execute tasks on components in worksapce.
-- Provides an API to create network of components and execute tasks.
-- Used as a low-level API for other Bit commands like `compile`, `test` and `watch`.
-
-## Description
-
-Inside a Bit project all components are linked to each other in a **network** according to their dependency graph. When you make a change, you can see the downstream effets when running component tasks. This means that all tasks run in the right order and if several components don't directly depend on each other, Flows parallelizes their tasks (and shows live console output in a readable order).
-
-## Usage
-
-### Command sinopsys
-
-```sh
-bit run [components...] [-v | --verbose] [--concurrency]
-```
-
-#### Examples
-
-```bash
-# runs 'build' flow on all components that have 'build' task defined.
-bit run build
-
-# runs 'build' flow for a specific component.
-bit run build logo
-
-# same as before with verbose output
-bit run build logo --verbose
-
-# setting concurrency
-bit run build logo --concurrency 4 --verbose
-```
-
-### Configuration
-
-Use `bit.jsonc` configuration docs to understand how to configure bit.
-
-```js
-// workspace configuration with default values for 'concurrency' and 'verbose'
-
-{
- "teambit.pipelines/flows": {
- "concurrency": 4,
- "verbose": false,
- "tasks": {
- // the structure of a module task id: = `\`#${PackageName}:${PathToModule}\``
- "build": ["@bit/bit.evangalist.extensions.react-ts:transpile"],
- }
- }
-}
-
-```
-
-You may also use the `variants` configuring option to override `tasks` of a specific component(s).
-The structure allows only for the task entry in that use case.
-
-```javascript
-{
- "variants": {
- "ui/*":{
- "teambit.pipelines/flows": {
- "tasks": {
- "build": ["some_build_task"]
- }
- }
- }
- }
-}
-```
-
-Consult with the docs to learn more about variants.
-
-## Flows API
-
-Flows API is document in [`flows.ts`](https://github.com/teambit/bit/blob/harmony/main/src/extensions/flows/flows.ts) module. Here are two examples:
-
-```js
-import {Flows, flattenReplaySubject} from 'teambit.pipelines/flows'
-
-const flows = new Flows(workspace)
-const execution = flows.run(seeders)
-
-// rxjs example
-flattenReplaySubject(execution)
- .subscribe((result) => console.log('result is:', result))
-
-// promise example
-const result = await flows.runToPromise(seeders)
-console.log('result is', result)
-```
-
-## Recommended Work`Flows`
-
-Flows prefers convention over configuration for managing team's workflow to scale their development. It's philosophy is that when teams agree on the kind of actions they support it's easier to onboard developers to various projects in the organization. This is mainly becasue it helps developers avoid the details of each component build and treat it as the "same" action.
-
-For example:
-
- - `build` - run all compilation/testing/lint
- - `ci` - flow to run bit CI system
- - `dev` - compiling with source map and what not.
- - `personal` - personal workflow team doesn't know of, to test things.
-
-## How to implement a task
-
-A `task` is a module which exports a default function (or `module.exports`) with the following signature:
-
-```ts
-export type Task = () => any | () => Promise
-```
-
-- Tasks should be tracked and exported as components to a remote Bit scope.
-- Tasks defined as `devDependencies` for components consuming them.
-- Each task `stdout`, `stderr` is reported.
-- Each task should return a value (which is truthy) which will be reported to Bit's main process.
-
-## Design
-
-The Flows API solves the problem of reporting the execution of dynamic activities across a graph of isolated components. The problem becomes complex in use cases like TypeScript API where dependent/dependency components build order needs to be respected.
-
-Flows solves this problem by providing:
-
-- Unified UX
-- Aggressive caching
-- Topological execution order.
-
-### Entities
-
-- Capsule - Isolated representation of a component in filesystem.
-- Network - A graph of component capsules.
-- Flow - A collection of tasks to execute in a capsule.
-- Task - a runnable activity in a capsule defined by bash or javascript task.
-
-For each main term there is a module in the flows implementation.
-
-### Additional modules
-
-- Cache - Caches capsule execution in `~/Library/Caches/Bit/capsules`
-- Run - Holds run command as a component.
-- util - fake-capsule creation, rxjs helper etc.
-
diff --git a/scopes/pipelines/flows/flows.main.runtime.ts b/scopes/pipelines/flows/flows.main.runtime.ts
deleted file mode 100644
index b2d5e8164b64..000000000000
--- a/scopes/pipelines/flows/flows.main.runtime.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MainRuntime } from '@teambit/cli';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-
-import { Flows } from './flows';
-import { FlowsAspect } from './flows.aspect';
-
-type ScriptDeps = [Workspace];
-
-export const FlowsMain = {
- name: 'flows',
- runtime: MainRuntime,
- dependencies: [WorkspaceAspect],
- async provider([workspace]: ScriptDeps) {
- const flows = new Flows(workspace);
- // const runCMD = new RunCmd(flows, reporter, logger);
- // cli.register(runCMD);
- return flows;
- },
-};
-
-FlowsAspect.addRuntime(FlowsMain);
diff --git a/scopes/pipelines/flows/flows.ts b/scopes/pipelines/flows/flows.ts
deleted file mode 100644
index 9edd2e72b500..000000000000
--- a/scopes/pipelines/flows/flows.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable max-classes-per-file */
-import { ComponentID } from '@teambit/component';
-import { Capsule } from '@teambit/isolator';
-import { Workspace } from '@teambit/workspace';
-import { BitId } from '@teambit/legacy-bit-id';
-import logger from '@teambit/legacy/dist/logger/logger';
-import { EventEmitter } from 'events';
-
-import { getExecutionCache } from './cache';
-import { Flow } from './flow/flow';
-import { GetFlow, Network } from './network';
-import { getWorkspaceGraph, PostFlow } from './network/network';
-import { ExecutionOptions } from './network/options';
-
-export class Flows {
- private emitter = new EventEmitter();
- constructor(private workspace: Workspace) {}
-
- getIds(ids: string[]) {
- return ids.map((id) => new ComponentID(this.workspace.consumer.getParsedId(id)));
- }
-
- /**
- * Creates a custom network from workspace.
- *
- * @param seeders - array of components to build.
- * @param getFlow - function which provide component flow.
- * @param postFlow - postFlow callback.
- */
- createNetwork(seeders: ComponentID[], getFlow: GetFlow, postFlow: PostFlow = () => Promise.resolve()) {
- const network = new Network(this.workspace, seeders, getFlow, getWorkspaceGraph, postFlow);
- network.onWorkspaceLoaded((...args) => {
- this.emitter.emit('workspaceLoaded', args);
- });
- return network;
- }
-
- /**
- * Creates network which runs named flow according to project configuration.
- *
- * @param seeders array of components to build
- * @param name flow name
- * @param options
- */
- createNetworkByFlowName(seeders: ComponentID[], name = 'build', options: ExecutionOptions) {
- const getFlow = async (capsule: Capsule) => {
- const seed = capsule.component.id;
- const id = seed instanceof BitId ? seed : seed._legacy;
- const component = await this.workspace.get(seed);
- if (!component) {
- return new Flow([]);
- }
- const isCached = await getExecutionCache().compareToCache(capsule, name);
- const flowsConfig = component.config.extensions.findCoreExtension('flows')?.config;
- const tasks = flowsConfig && flowsConfig.tasks ? flowsConfig.tasks[name] : [];
- const flow = isCached && options.caching ? new Flow([]) : new Flow(tasks);
-
- return flow;
- };
- const postFlow = async (capsule: Capsule) => {
- const cache = getExecutionCache();
- return cache.saveHashValue(capsule, name);
- };
- return this.createNetwork(seeders, getFlow, postFlow);
- }
-
- /**
- * Executes named flow on network and returns a promise with network:result message.
- *
- * @param seeders array of components to build
- * @param name flow name
- * @param options
- * @param network optional custom network
- */
- async runToPromise(seeders: ComponentID[], name = 'build', options?: Partial, network?: Network) {
- logger.debug(`flowsExt, runToPromise is running ${name} on ${seeders.map((s) => s.toString()).join(', ')}`);
- const resultStream = await this.run(seeders, name, options, network);
- logger.debug(`flowsExt, runToPromise got resultStream`);
- return new Promise((resolve, reject) => {
- resultStream.subscribe({
- next(data: any) {
- if (data.type === 'network:result') {
- logger.debug(`flowsExt, runToPromise going to resolve the promise.`);
- resolve(data);
- } else {
- logger.debug(`flowsExt, runToPromise data.type is ${data.type}. the promise is not resolved nor rejected`);
- }
- },
- error(err: any) {
- logger.debug(`flowsExt, runToPromise going to reject the promise.`);
- reject(err);
- },
- complete() {
- logger.debug(`flowsExt, runToPromise in complete()`);
- },
- });
- });
- }
-
- /**
- * Executes named flow on network and returns an execution stream.
- *
- * @param seeders array of components to build
- * @param name flow name
- * @param options
- * @param network optional custom network
- */
- // @todo: @qballer please add return type
- async run(
- seeders: ComponentID[],
- name = 'build',
- options?: Partial,
- network?: Network
- ): Promise {
- const opts: ExecutionOptions = Object.assign(
- {
- caching: true,
- concurrency: 4,
- traverse: 'both',
- },
- options
- );
- network = network || this.createNetworkByFlowName(seeders, name, opts);
- const resultStream = await network.execute(opts);
- return resultStream;
- }
-
- /**
- * runs custom flow on network.
- *
- * @param flowsWithIds
- * @param options
- */
- async runMultiple(flowsWithIds: IdsAndFlows, options?: Partial) {
- const getFlow = (capsule: Capsule) => {
- const id = capsule.component.id;
- // @ts-ignore for some reason the capsule.component here is ConsumerComponent
- const value = flowsWithIds.getFlows(id);
- return Promise.resolve(new Flow(value || []));
- };
-
- const ids = flowsWithIds.map((withID) => new ComponentID(withID.id));
- const network = this.createNetwork(ids, getFlow);
- return this.runToPromise(ids, '', options || {}, network);
- }
-
- onWorkspaceLoaded(cb) {
- this.emitter.on('workspaceLoaded', cb);
- }
-}
-
-export class IdsAndFlows extends Array<{ id: BitId; value: string[] }> {
- getFlows(id: BitId): string[] | null {
- const found = this.find((item) => item.id.isEqual(id));
- return found ? found.value : null;
- }
- getFlowsIgnoreVersion(id: BitId): string[] | null {
- const found = this.find((item) => item.id.isEqualWithoutVersion(id));
- return found ? found.value : null;
- }
- getFlowsIgnoreScopeAndVersion(id: BitId): string[] | null {
- const found = this.find((item) => item.id.isEqualWithoutScopeAndVersion(id));
- return found ? found.value : null;
- }
- toString() {
- return this.map(({ id, value }) => `id: ${id}, task: ${value.join(', ')}`).join('; ');
- }
-}
diff --git a/scopes/pipelines/flows/index.ts b/scopes/pipelines/flows/index.ts
deleted file mode 100644
index 5cab66c7db8e..000000000000
--- a/scopes/pipelines/flows/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { Flows, IdsAndFlows } from './flows';
-export { TASK_SEPARATOR, SCRIPT_FILENAME } from './task/task';
-export { flattenNestedMap, flattenReplaySubject } from './util/flatten-nested-map';
-export { createFakeCapsule } from './util/create-capsule';
-export { createGetGraphFn, createTestNetworkStream } from './util/create-fake-network';
-export type { FlowsMain } from './flows.main.runtime';
-export { FlowsAspect } from './flows.aspect';
diff --git a/scopes/pipelines/flows/network/index.ts b/scopes/pipelines/flows/network/index.ts
deleted file mode 100644
index 0c27e9d55f26..000000000000
--- a/scopes/pipelines/flows/network/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Network, GetFlow } from './network';
diff --git a/scopes/pipelines/flows/network/network.ts b/scopes/pipelines/flows/network/network.ts
deleted file mode 100644
index 65f489f16c4d..000000000000
--- a/scopes/pipelines/flows/network/network.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import { ComponentID } from '@teambit/component';
-import { Capsule } from '@teambit/isolator';
-import { Workspace } from '@teambit/workspace';
-import { Consumer } from '@teambit/legacy/dist/consumer';
-import DependencyGraph from '@teambit/legacy/dist/scope/graph/scope-graph';
-import { EventEmitter } from 'events';
-import { Graph } from 'graphlib';
-import { from, ReplaySubject } from 'rxjs';
-import { concatAll, filter, map, mergeAll, mergeMap, tap } from 'rxjs/operators';
-
-import { Flow } from '../flow';
-import { toposortByLevels } from '../util/sort-graph-by-levels';
-import { ExecutionOptions } from './options';
-import { createSubGraph, getNeighborsByDirection } from './sub-graph';
-
-export type GetFlow = (capsule: Capsule) => Promise;
-export type PostFlow = (capsule: Capsule) => Promise; // runs when finishes flow successfully
-
-type CacheValue = {
- visited: boolean;
- capsule: Capsule;
- result: any;
-};
-
-export type Cache = { [k: string]: CacheValue };
-
-export class Network {
- constructor(
- private workspace: Workspace,
- private seeders: ComponentID[],
- private getFlow: GetFlow,
- private getGraph = getWorkspaceGraph,
- private postFlow?: PostFlow,
- private emitter = new EventEmitter()
- ) {}
-
- async execute(options: ExecutionOptions) {
- const networkStream = new ReplaySubject();
- const startTime = new Date();
-
- networkStream.next({
- type: 'network:start',
- startTime,
- });
- const graph = await this.createGraph(options);
-
- const createCapsuleStartTime = new Date();
- networkStream.next({
- type: 'network:capsules:start',
- startTime: createCapsuleStartTime,
- });
-
- const visitedCache = await createCapsuleVisitCache(graph, this.workspace);
-
- networkStream.next({
- type: 'network:capsules:end',
- startTime: createCapsuleStartTime,
- duration: new Date().getTime() - createCapsuleStartTime.getTime(),
- });
-
- this.emitter.emit('workspaceLoaded', Object.keys(visitedCache).length);
- this.traverse(graph, networkStream, visitedCache, startTime);
- return networkStream;
- }
-
- onWorkspaceLoaded(cb) {
- this.emitter.on('workspaceLoaded', cb);
- }
-
- traverse(graph: Graph, stream: ReplaySubject, visitedCache: Cache, startTime: Date) {
- const sorted = toposortByLevels(graph);
- const getFlow = this.getFlow.bind(this);
- const postFlow = this.postFlow ? this.postFlow.bind(this) : null;
- from(sorted)
- .pipe(
- mergeMap((level) =>
- from(
- level.map((flowId) =>
- getFlow(visitedCache[flowId].capsule).then((flow) => {
- visitedCache[flowId].visited = true;
- return flow.execute(visitedCache[flowId].capsule);
- })
- )
- )
- ),
- concatAll(),
- map((flowStream) => {
- stream.next(flowStream);
- return flowStream;
- }),
- mergeAll(),
- filter((data: any) => data.type === 'flow:result'),
- tap((data) => (visitedCache[data.id.toString()].result = data)),
- tap((data) => handlePostFlow(postFlow, visitedCache[data.id.toString()]))
- )
- .subscribe({
- complete() {
- endNetwork(stream, startTime, visitedCache);
- },
- error(err: any) {
- handleNetworkError(err.id, graph, visitedCache, err);
- },
- });
- }
-
- private async createGraph(options: ExecutionOptions) {
- const fullGraph = await this.getGraph(this.workspace.consumer);
- if (this.seeders.length === 0) {
- return fullGraph;
- }
-
- const components = await this.workspace.getMany(this.seeders);
- const subGraph = createSubGraph(components, options, fullGraph);
- return subGraph;
- }
-}
-
-function handlePostFlow(postFlow: PostFlow | null, cacheValue: CacheValue) {
- if (postFlow) {
- postFlow(cacheValue.capsule).catch(() => {});
- }
-}
-
-function endNetwork(network: ReplaySubject, startTime: Date, visitedCache: Cache) {
- const endMessage = {
- type: 'network:result',
- startTime,
- duration: new Date().getTime() - startTime.getTime(),
- value: Object.entries(visitedCache).reduce((accum, [key, val]) => {
- accum[key] = {
- result: val.result,
- visited: val.visited,
- };
- return accum;
- }, {}),
- // eslint-disable-next-line no-bitwise
- code: !!~Object.entries(visitedCache).findIndex(
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- ([_k, value]: [string, CacheValue]) => !value.visited || value.result instanceof Error
- ),
- };
- network.next(endMessage);
- network.complete();
-}
-
-function handleNetworkError(seed: string, graph: Graph, visitedCache: Cache, err: any) {
- const dependents = getNeighborsByDirection(seed, graph);
- dependents
- .map((dependent) => {
- visitedCache[dependent].result = new Error(`Error due to ${seed}`);
- return dependent;
- })
- .forEach((dependent) => graph.removeNode(dependent));
- visitedCache[seed].result = err;
- graph.removeNode(seed);
-}
-
-async function createCapsuleVisitCache(graph: Graph, workspace: Workspace): Promise {
- const capsules = await workspace.loadCapsules(graph.nodes());
- return capsules.reduce((accum, curr) => {
- accum[curr.component.id.toString()] = {
- visited: false,
- capsule: curr,
- result: null,
- };
- return accum;
- }, {});
-}
-
-export function getWorkspaceGraph(consumer: Consumer) {
- return DependencyGraph.buildGraphFromWorkspace(consumer, false, true);
-}
diff --git a/scopes/pipelines/flows/network/options.ts b/scopes/pipelines/flows/network/options.ts
deleted file mode 100644
index 0b863b8c78c3..000000000000
--- a/scopes/pipelines/flows/network/options.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type ExecutionOptions = {
- concurrency: number;
- traverse: 'only' | 'dependencies' | 'dependents' | 'both';
- caching: boolean;
-};
diff --git a/scopes/pipelines/flows/network/sub-graph.ts b/scopes/pipelines/flows/network/sub-graph.ts
deleted file mode 100644
index 2399f2bbc179..000000000000
--- a/scopes/pipelines/flows/network/sub-graph.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component } from '@teambit/component';
-import { Graph } from 'graphlib';
-import { flatten, uniq } from 'ramda';
-
-import { ExecutionOptions } from './options';
-
-export function createSubGraph(components: Component[], options: ExecutionOptions, graph: Graph) {
- const shouldStay = uniq(
- flatten(
- components.map((comp) => {
- const id = comp.id.toString();
- const base = [id];
- let pre: string[] = [];
- let post: string[] = [];
- if (options.traverse === 'both' || options.traverse === 'dependencies') {
- pre = getNeighborsByDirection(id, graph, 'predecessors');
- }
- if (options.traverse === 'both' || options.traverse === 'dependents') {
- post = getNeighborsByDirection(id, graph);
- }
- return base.concat(post).concat(pre);
- })
- )
- );
-
- return graph.nodes().reduce((g, curr) => {
- if (!shouldStay.includes(curr)) {
- g.removeNode(curr);
- }
- return graph;
- }, graph);
-}
-
-export function getNeighborsByDirection(
- id: string,
- g: Graph,
- direction: 'predecessors' | 'successors' = 'successors'
-): string[] {
- const neighbors = g[direction](id) || [];
- return neighbors.concat(neighbors.map((pre) => flatten(getNeighborsByDirection(pre, g, direction))));
-}
diff --git a/scopes/pipelines/flows/task/container-script.js b/scopes/pipelines/flows/task/container-script.js
deleted file mode 100644
index 703ce4b6c90f..000000000000
--- a/scopes/pipelines/flows/task/container-script.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable global-require */
-/* eslint-disable no-console */
-/* eslint-disable import/no-dynamic-require */
-
-function handleError(error) {
- process && process.send ? process.send({ error }) : console.error(error);
- process.exit(1);
-}
-
-const pathToTask = process.argv.find(function (value, index, arr) {
- if (!index) {
- return false;
- }
- return __filename.endsWith(arr[index - 1]);
-});
-
-let userTask;
-try {
- userTask = require(pathToTask);
-} catch (e) {
- handleError(new Error('script-container can not find user task'));
-}
-
-const toExecute = userTask.default || userTask;
-
-if (typeof toExecute === 'function') {
- const getPromisedResult = () => {
- const executed = toExecute();
- return executed && executed.then ? executed : Promise.resolve(executed);
- };
- getPromisedResult()
- .then((userTaskResult) => {
- process.on('beforeExit', async (code) => {
- const toSend = userTaskResult || { exitCode: code };
- process.send ? process.send(toSend) : Promise.resolve();
- });
- })
- .catch(handleError);
-}
diff --git a/scopes/pipelines/flows/task/execution-stream.ts b/scopes/pipelines/flows/task/execution-stream.ts
deleted file mode 100644
index 2604f39fac03..000000000000
--- a/scopes/pipelines/flows/task/execution-stream.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ContainerExec } from '@teambit/isolator';
-import logger from '@teambit/legacy/dist/logger/logger';
-import { ReplaySubject, Subject } from 'rxjs';
-
-export function listenToExecutionStream(exec: ContainerExec, id: string, time: Date = new Date()): Subject {
- logger.debug(`flowsExt, createExecutionStream of ${id} started`);
- let message: any = null;
- const subscriber = new ReplaySubject();
- subscriber.next({
- type: 'task:start',
- id,
- startTime: time,
- });
-
- exec.stdout.on('data', function (data) {
- subscriber.next({
- type: 'task:stdout',
- id,
- value: data.toString(),
- });
- });
-
- exec.stderr.on('data', function (data) {
- logger.error(`flowsExt, createExecutionStream of ${id} got error: ${data.toString()}`);
- subscriber.next({
- type: 'task:stderr',
- id,
- value: data.toString(),
- });
- });
-
- exec.on('message', function (data) {
- message = data;
- });
-
- exec.on('close', function () {
- logger.debug(`flowsExt, createExecutionStream of ${id} completed!`);
- const streamMessage = {
- type: 'task:result',
- id,
- value: message,
- startTime: time,
- duration: new Date().getTime() - time.getTime(),
- code: exec.code,
- };
- subscriber.next(streamMessage);
- subscriber.complete();
- });
- return subscriber;
-}
diff --git a/scopes/pipelines/flows/task/index.ts b/scopes/pipelines/flows/task/index.ts
deleted file mode 100644
index 291008f904d1..000000000000
--- a/scopes/pipelines/flows/task/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { executeTask } from './task';
diff --git a/scopes/pipelines/flows/task/task.ts b/scopes/pipelines/flows/task/task.ts
deleted file mode 100644
index 62ba8d9f11f5..000000000000
--- a/scopes/pipelines/flows/task/task.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable max-classes-per-file */
-
-import { Capsule, ContainerExec } from '@teambit/isolator';
-import { join } from 'path';
-import { Subject } from 'rxjs';
-
-import { listenToExecutionStream } from './execution-stream';
-
-export const PackageMarker = '@';
-
-export const TASK_SEPARATOR = ':'; // separate between the package-name and the task file
-
-export const SCRIPT_FILENAME = '__bit_container.js';
-
-export function executeTask(task: string, capsule: Capsule): Subject {
- const isExtension = (taskString: string) => (taskString || '').trim().startsWith(PackageMarker);
-
- const time = new Date();
- const exec: ContainerExec = new ContainerExec();
- const stream = listenToExecutionStream(exec, `${capsule.component.id.toString()}:${task}`, time);
- if (isExtension(task)) {
- const { host, pathToScript } = createHostScript(capsule, task);
- capsule.execNode(host, { args: [pathToScript] }, exec);
- } else {
- capsule.typedExec(
- {
- command: task.trim().split(' '),
- stdio: 'ipc',
- cwd: '',
- } as any,
- exec
- );
- }
- return stream;
-}
-
-function createHostScript(capsule: Capsule, task: string) {
- const parts = task
- .trim()
- // .slice(1)
- .split(':');
- const containerScript = getContainerScript();
- capsule.fs.writeFileSync(SCRIPT_FILENAME, containerScript, { encoding: 'utf8' });
- return { host: SCRIPT_FILENAME, pathToScript: join(...parts) };
-}
-
-function getContainerScript() {
- return `function handleError(error) {
- process && process.send ? process.send({ error }) : console.error(error);
- process.exit(1);
- }
-
- const pathToTask = process.argv.find(function(value, index, arr) {
- if (!index) {
- return false;
- }
- return __filename.endsWith(arr[index - 1]) || arr[index - 1].endsWith(__filename);
- });
-
- let userTask;
- try {
- userTask = require(pathToTask);
- } catch (e) {
- process.send ? process.send(e) : console.error(e);
- handleError({ message: 'script-container can not find user task at ' + pathToTask });
- }
-
- const toExecute = userTask.default || userTask;
-
- if (typeof toExecute === 'function') {
- const getPromisedResult = () => {
- const executed = toExecute();
- return executed && executed.then ? executed : Promise.resolve(executed);
- };
- getPromisedResult()
- .then(userTaskResult => {
- process.on('beforeExit', async code => {
- const toSend = userTaskResult || { exitCode: code };
- process.send ? process.send(toSend) : console.log(toSend);
- });
- })
- .catch(err => {
- process.send ? process.send(err) : console.error(err);
- handleError(err);
- });
- }
- `;
-}
-
-/*
-{
- PackageMarker PipeMarker
- ^ ^
- | |
- build: ['#bit/envs.react:compile-ts', 'tsc -d', 'cp -r temp/ dist/', '*test', 'node node_modules/bin/tsc'],
- test: ['jest --something *.spec.js']
-}
-*/
diff --git a/scopes/pipelines/flows/util/create-capsule.ts b/scopes/pipelines/flows/util/create-capsule.ts
deleted file mode 100644
index c0c5b7ef4756..000000000000
--- a/scopes/pipelines/flows/util/create-capsule.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Console, State } from '@teambit/capsule';
-import { Component } from '@teambit/component';
-import { Capsule, FsContainer } from '@teambit/isolator';
-import { mkdirp, writeFile } from 'fs-extra';
-import { tmpdir } from 'os';
-import { dirname, join, resolve } from 'path';
-
-type CapsuleContent = { [k: string]: string };
-
-export async function createFakeCapsule(fs: CapsuleContent, id: string) {
- const bitId = { toString: () => id };
- const location = getFakeCapsuleLocation(id);
- await createFS(location, fs);
- const container = new FsContainer(location);
-
- const capsule = new Capsule(
- container,
- container.fs,
- // eslint-disable-next-line no-undef
- new Console(),
- ({} as any) as State,
- {
- id: bitId,
- } as Component
- );
- return capsule;
-}
-
-async function createFS(targetDir: string, content: CapsuleContent) {
- await mkdirp(targetDir);
- await Promise.all(
- Object.keys(content).map(async (key) => {
- const realPath = join(targetDir, key);
- const containingFolder = dirname(realPath);
- await mkdirp(containingFolder);
- const filePath = resolve(targetDir, key);
- await writeFile(filePath, content[key]);
- })
- );
-}
-
-export function getTestCase(name: string): CapsuleContent {
- const main = 'src/index.js';
- return {
- [main]: `console.log('hello-world)`,
- 'package.json': JSON.stringify({ main, name }, null, 2),
- };
-}
-
-export function getFakeCapsuleLocation(id: string) {
- return join(tmpdir(), id);
-}
diff --git a/scopes/pipelines/flows/util/create-fake-network.ts b/scopes/pipelines/flows/util/create-fake-network.ts
deleted file mode 100644
index d22f64678cf5..000000000000
--- a/scopes/pipelines/flows/util/create-fake-network.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Component, ComponentID } from '@teambit/component';
-import { Capsule } from '@teambit/isolator';
-import { Workspace } from '@teambit/workspace';
-import { BitId } from '@teambit/legacy-bit-id';
-import { Consumer } from '@teambit/legacy/dist/consumer';
-import { Graph } from 'graphlib';
-import { ReplaySubject } from 'rxjs';
-
-import { Flow } from '../flow';
-import { Network } from '../network';
-import { ExecutionOptions } from '../network/options';
-import { createFakeCapsule, getFakeCapsuleLocation } from './create-capsule';
-
-export type GraphTestCase = {
- graph: { [id: string]: string[] };
- input: string[];
- options: ExecutionOptions;
-};
-
-export async function createTestNetworkStream(testCase: GraphTestCase): Promise> {
- const fakeGetGraph = createGetGraphFn(testCase);
- const fakeWorkSpace = createFakeWorkSpace(fakeGetGraph);
- const ids = testCase.input.map((val) => new ComponentID(BitId.parse(val)));
- const getFlow = (id: Capsule) => Promise.resolve(new Flow([`echo hello-${id.component.id}`]));
-
- const network = new Network(fakeWorkSpace, ids, getFlow, fakeGetGraph);
- return network.execute(testCase.options);
-}
-
-function createFakeWorkSpace(fakeGetGraph: (_consumer: Consumer) => Promise) {
- return ({
- getMany: (ids: Array) => {
- return Promise.resolve(
- ids.map((id) => {
- return {
- id: {
- toString: () => (typeof id === 'string' ? id : id.toString()),
- },
- } as Component;
- })
- );
- },
- loadCapsules: async (ids: string[]) => {
- const graph = await fakeGetGraph({} as Consumer);
- return Promise.all(ids.map((id) => createFakeCapsuleInGraph(id, graph)));
- },
- } as any) as Workspace;
-}
-
-export function createGetGraphFn(testCase: GraphTestCase) {
- return (_consumer: Consumer) => {
- const res = Object.entries(testCase.graph).reduce((accum, [key, value]) => {
- accum.setNode(key);
- value.forEach((val) => {
- accum.setNode(val);
- accum.setEdge(key, val);
- });
- return accum;
- }, new Graph());
-
- return Promise.resolve(res);
- };
-}
-
-async function createFakeCapsuleInGraph(name: string, graph: Graph) {
- const main = 'src/index.js';
- const dependencies = (graph.predecessors(name) || []).reduce((accum, dependency) => {
- accum[dependency] = `file://${getFakeCapsuleLocation(name)}`;
- return accum;
- }, {});
-
- const fs = {
- [main]: `
- ${Object.keys(dependencies)
- .map((dependency) => `const ${dependency.split('/')[1]} = require('${dependency}')`)
- .join('\n')}
- function printMe(){
- console.log('${Object.keys(dependencies)
- .map((dependency) => `${dependency.split('/')[1]}()` || ['hello', 'world'])
- .join('+')}')
- }
-
- module.exports = function () {
- return '${name}'
- }
- `,
- 'package.json': JSON.stringify({ main, name, dependencies }, null, 2),
- };
-
- const fakeCapsule = await createFakeCapsule(fs, name);
- return fakeCapsule;
-}
diff --git a/scopes/pipelines/flows/util/flatten-nested-map.ts b/scopes/pipelines/flows/util/flatten-nested-map.ts
deleted file mode 100644
index 2d169ecffbef..000000000000
--- a/scopes/pipelines/flows/util/flatten-nested-map.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ReplaySubject } from 'rxjs';
-import { flatMap } from 'rxjs/operators';
-
-type NetworkMessages = ReplaySubject>;
-type FlowMessages = ReplaySubject>;
-
-/**
- * takes a stream of higher order ReplaySubjects and flattens it recursively.
- *
- * @param toFlat ReplaySubject with nested messages
- */
-export function flattenReplaySubject(toFlat: ReplaySubject | ReplaySubject) {
- return toFlat.pipe(flattenNestedMap() as any);
-}
-
-/**
- * RxJS operator which flatten a nested stream of ReplaySubjects.
- *
- * @param isRecursive should flatten recursively or 1 level
- */
-export function flattenNestedMap(isRecursive = true) {
- return flatMap(function (toFlat: N | ReplaySubject>) {
- return toFlat instanceof ReplaySubject && isRecursive ? flattenReplaySubject(toFlat) : toReplaySubject(toFlat);
- }) as any;
-}
-
-/**
- * takes an object and creates a ReplaySubject from it.
- *
- * @param toSubject
- */
-export function toReplaySubject(toSubject: N | F | ReplaySubject>) {
- if (toSubject instanceof ReplaySubject) {
- return toSubject;
- }
- const subject = new ReplaySubject();
- subject.next(toSubject);
- subject.complete();
- return subject;
-}
diff --git a/scopes/pipelines/flows/util/sort-graph-by-levels.ts b/scopes/pipelines/flows/util/sort-graph-by-levels.ts
deleted file mode 100644
index 291ec016dc0e..000000000000
--- a/scopes/pipelines/flows/util/sort-graph-by-levels.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { BitIdStr } from '@teambit/legacy-bit-id';
-import logger from '@teambit/legacy/dist/logger/logger';
-import { alg, Graph } from 'graphlib';
-
-type Level = {
- inEdgeCount: number;
- edges: string[];
-};
-
-export function toposortByLevels(graph: Graph, throwForCycles = false): Array {
- // @todo: @qballer, once you implement the option to not sort the graph, revisit the throwForCycles arg
- const cycles = alg.findCycles(graph);
- if (cycles.length) {
- // impossible to topsort
- if (throwForCycles) {
- throw new Error(`fatal: graphlib was unable to topsort the components. circles: ${cycles}`);
- }
- logger.warn(`unable to topsort. cycles: ${cycles}`);
- return [graph.nodes()]; // all nodes on the same level
- }
-
- return getGraphSorted(graph)
- .reduce((accum: Array, curr) => {
- const inEdges = graph.inEdges(curr);
- if (!accum.length) {
- accum.push({
- inEdgeCount: inEdges ? inEdges.length : 0,
- edges: [curr],
- });
- return accum;
- }
- if (!inEdges) {
- return accum;
- }
- const prevInEdges = accum[accum.length - 1].inEdgeCount;
- if (inEdges.length === prevInEdges) {
- accum[accum.length - 1].edges.push(curr);
- } else {
- accum.push({
- inEdgeCount: inEdges.length,
- edges: [curr],
- });
- }
- return accum;
- }, [])
- .map((level) => level.edges);
-}
-
-function getGraphSorted(graph: Graph): string[] {
- try {
- return alg.topsort(graph);
- } catch (err) {
- // should never arrive here, it's just a precaution, as topsort doesn't fail nicely
- logger.error(err);
- throw new Error(`fatal: graphlib was unable to topsort the components. ${err.toString()}`);
- }
-}
diff --git a/scopes/pkg/aspect-docs/pkg/pkg.composition.tsx b/scopes/pkg/aspect-docs/pkg/pkg.composition.tsx
index e4456db5bd4c..cda38906dcee 100644
--- a/scopes/pkg/aspect-docs/pkg/pkg.composition.tsx
+++ b/scopes/pkg/aspect-docs/pkg/pkg.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Pkg } from './index';
export const PkgDocs = () => (
-
+
-
+
);
diff --git a/scopes/pkg/aspect-docs/pkg/pkg.docs.mdx b/scopes/pkg/aspect-docs/pkg/pkg.docs.mdx
index 048d7490aeac..a2fdfb3797f6 100644
--- a/scopes/pkg/aspect-docs/pkg/pkg.docs.mdx
+++ b/scopes/pkg/aspect-docs/pkg/pkg.docs.mdx
@@ -22,13 +22,13 @@ import { Pkg } from '@teambit/aspect-docs.pkg';
### Render with theme and Pkg providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { PkgLayout } from '@teambit/ui.Pkg-layout';
import { Pkg } from '@teambit/aspect-docs.pkg';
-
+
-;
+;
```
diff --git a/scopes/pkg/pkg/publisher.ts b/scopes/pkg/pkg/publisher.ts
index af6b96c7570e..72f6eb7ab79b 100644
--- a/scopes/pkg/pkg/publisher.ts
+++ b/scopes/pkg/pkg/publisher.ts
@@ -10,7 +10,6 @@ import { BitError } from '@teambit/bit-error';
import { Scope } from '@teambit/legacy/dist/scope';
import mapSeries from 'p-map-series';
import execa from 'execa';
-import R from 'ramda';
import { PkgAspect } from './pkg.aspect';
export type PublisherOptions = {
@@ -57,8 +56,8 @@ export class Publisher {
if (this.options.dryRun) publishParams.push('--dry-run');
const extraArgs = this.getExtraArgsFromConfig(capsule.component);
if (extraArgs && Array.isArray(extraArgs) && extraArgs?.length) {
- const extraArgsSplit = extraArgs.map((arg) => arg.split(' '));
- publishParams.push(...R.flatten(extraArgsSplit));
+ const extraArgsSplit = extraArgs.map((arg) => arg.split(' ')).flat();
+ publishParams.push(...extraArgsSplit);
}
const publishParamsStr = publishParams.join(' ');
const cwd = capsule.path;
diff --git a/scopes/preview/aspect-docs/preview/preview.composition.tsx b/scopes/preview/aspect-docs/preview/preview.composition.tsx
index f7c30c7e7fea..5210d8d722e4 100644
--- a/scopes/preview/aspect-docs/preview/preview.composition.tsx
+++ b/scopes/preview/aspect-docs/preview/preview.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { Preview } from './index';
export const PreviewDocs = () => (
-
+
-
+
);
diff --git a/scopes/preview/aspect-docs/preview/preview.docs.mdx b/scopes/preview/aspect-docs/preview/preview.docs.mdx
index 1cdc2726ef76..44493b5b6ef5 100644
--- a/scopes/preview/aspect-docs/preview/preview.docs.mdx
+++ b/scopes/preview/aspect-docs/preview/preview.docs.mdx
@@ -22,13 +22,13 @@ import { Preview } from '@teambit/aspect-docs.preview';
### Render with theme and Preview providers
```jsx
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { Preview } from '@teambit/aspect-docs.preview';
-
+
-;
+;
```
diff --git a/scopes/preview/cli/preview-server-status/preview-server-row.tsx b/scopes/preview/cli/preview-server-status/preview-server-row.tsx
index d70f435f0a77..f3ee39474adb 100644
--- a/scopes/preview/cli/preview-server-status/preview-server-row.tsx
+++ b/scopes/preview/cli/preview-server-status/preview-server-row.tsx
@@ -13,7 +13,7 @@ export function PreviewServerRow({ previewServer, verbose }: PreviewServerRowPro
{previewServer.context.envRuntime.id}
- {previewServer.context.relatedContexts.length ? (
+ {previewServer.context.relatedContexts.length && previewServer.context.relatedContexts.length > 1 ? (
{' '}
on behalf of
diff --git a/scopes/preview/preview/preview.main.runtime.tsx b/scopes/preview/preview/preview.main.runtime.tsx
index 29b713eb637d..e55937ea0ee4 100644
--- a/scopes/preview/preview/preview.main.runtime.tsx
+++ b/scopes/preview/preview/preview.main.runtime.tsx
@@ -4,12 +4,14 @@ import { PubsubAspect, PubsubMain } from '@teambit/pubsub';
import { MainRuntime } from '@teambit/cli';
import { Component, ComponentAspect, ComponentMain, ComponentMap, ComponentID } from '@teambit/component';
import { EnvsAspect, EnvsMain, ExecutionContext } from '@teambit/envs';
-import { Slot, SlotRegistry } from '@teambit/harmony';
+import { Slot, SlotRegistry, Harmony } from '@teambit/harmony';
import { UIAspect, UiMain } from '@teambit/ui';
import { CACHE_ROOT } from '@teambit/legacy/dist/constants';
import objectHash from 'object-hash';
+import { uniq } from 'lodash';
import { writeFileSync, existsSync, mkdirSync } from 'fs-extra';
import { join } from 'path';
+import { AspectDefinition, AspectLoaderMain, AspectLoaderAspect } from '@teambit/aspect-loader';
import WorkspaceAspect, { Workspace } from '@teambit/workspace';
import { PreviewArtifactNotFound, BundlingStrategyNotFound } from './exceptions';
import { generateLink } from './generate-link';
@@ -41,6 +43,11 @@ export type BundlingStrategySlot = SlotRegistry;
export class PreviewMain {
constructor(
+ /**
+ * harmony context.
+ */
+ private harmony: Harmony,
+
/**
* slot for preview definitions.
*/
@@ -50,6 +57,8 @@ export class PreviewMain {
private envs: EnvsMain,
+ private aspectLoader: AspectLoaderMain,
+
readonly config: PreviewConfig,
private bundlingStrategySlot: BundlingStrategySlot,
@@ -106,7 +115,7 @@ export class PreviewMain {
this.execContexts.set(context.id, context);
this.componentsByAspect.set(context.id, new RuntimeComponents(context.components));
- const previewRuntime = await this.writePreviewRuntime();
+ const previewRuntime = await this.writePreviewRuntime(context);
const linkFiles = await this.updateLinkFiles(context.components, context);
return [...linkFiles, previewRuntime];
@@ -133,20 +142,41 @@ export class PreviewMain {
return Promise.all(paths);
}
- async writePreviewRuntime() {
+ async writePreviewRuntime(context: { components: Component[] }) {
const ui = this.ui.getUi();
if (!ui) throw new Error('ui not found');
const [name, uiRoot] = ui;
- const filePath = await this.ui.generateRoot(
- await uiRoot.resolveAspects(PreviewRuntime.name),
- name,
- 'preview',
- PreviewAspect.id
- );
+ const resolvedAspects = await uiRoot.resolveAspects(PreviewRuntime.name);
+ const filteredAspects = this.filterAspectsByExecutionContext(resolvedAspects, context);
+ const filePath = await this.ui.generateRoot(filteredAspects, name, 'preview', PreviewAspect.id);
console.log('filePath', filePath);
return filePath;
}
+ /**
+ * Filter the aspects to have only aspects that are:
+ * 1. core aspects
+ * 2. configured on the host (workspace/scope)
+ * 3. used by at least one component from the context
+ * @param aspects
+ * @param context
+ */
+ private filterAspectsByExecutionContext(aspects: AspectDefinition[], context: { components: Component[] }) {
+ let allComponentContextAspects: string[] = [];
+ allComponentContextAspects = context.components.reduce((acc, curr) => {
+ return acc.concat(curr.state.aspects.ids);
+ }, allComponentContextAspects);
+ const hostAspects = Object.keys(this.harmony.config.toObject());
+ const allAspectsToInclude = uniq(hostAspects.concat(allComponentContextAspects));
+ const filtered = aspects.filter((aspect) => {
+ if (!aspect.getId) {
+ return false;
+ }
+ return this.aspectLoader.isCoreAspect(aspect.getId) || allAspectsToInclude.includes(aspect.getId);
+ });
+ return filtered;
+ }
+
private getDefaultStrategies() {
return [new EnvBundlingStrategy(this), new ComponentBundlingStrategy()];
}
@@ -222,6 +252,7 @@ export class PreviewMain {
EnvsAspect,
WorkspaceAspect,
PubsubAspect,
+ AspectLoaderAspect,
];
static defaultConfig = {
@@ -230,22 +261,26 @@ export class PreviewMain {
};
static async provider(
- [bundler, builder, componentExtension, uiMain, envs, workspace, pubsub]: [
+ [bundler, builder, componentExtension, uiMain, envs, workspace, pubsub, aspectLoader]: [
BundlerMain,
BuilderMain,
ComponentMain,
UiMain,
EnvsMain,
Workspace | undefined,
- PubsubMain
+ PubsubMain,
+ AspectLoaderMain
],
config: PreviewConfig,
- [previewSlot, bundlingStrategySlot]: [PreviewDefinitionRegistry, BundlingStrategySlot]
+ [previewSlot, bundlingStrategySlot]: [PreviewDefinitionRegistry, BundlingStrategySlot],
+ harmony: Harmony
) {
const preview = new PreviewMain(
+ harmony,
previewSlot,
uiMain,
envs,
+ aspectLoader,
config,
bundlingStrategySlot,
builder,
diff --git a/scopes/preview/preview/preview.route.ts b/scopes/preview/preview/preview.route.ts
index e164e3ffe35b..e63c18ac5649 100644
--- a/scopes/preview/preview/preview.route.ts
+++ b/scopes/preview/preview/preview.route.ts
@@ -28,7 +28,7 @@ export class PreviewRoute implements Route {
const str = `${file.cwd}/${file.path}`;
const contentType = mime.getType(str);
if (contentType) res.set('Content-Type', contentType);
- return res.send(contents.toString());
+ return res.send(contents);
},
];
}
diff --git a/scopes/preview/preview/strategies/env-strategy.ts b/scopes/preview/preview/strategies/env-strategy.ts
index 40322a82f736..689f874feaa2 100644
--- a/scopes/preview/preview/strategies/env-strategy.ts
+++ b/scopes/preview/preview/strategies/env-strategy.ts
@@ -84,7 +84,7 @@ export class EnvBundlingStrategy implements BundlingStrategy {
}
private async computePaths(outputPath: string, defs: PreviewDefinition[], context: BuildContext): Promise {
- const previewMain = await this.preview.writePreviewRuntime();
+ const previewMain = await this.preview.writePreviewRuntime(context);
const moduleMapsPromise = defs.map(async (previewDef) => {
const moduleMap = await previewDef.getModuleMap(context.components);
diff --git a/scopes/preview/ui/preview-placeholder/preview-placeholder.tsx b/scopes/preview/ui/preview-placeholder/preview-placeholder.tsx
index 7b294a4d6580..c61012f42a26 100644
--- a/scopes/preview/ui/preview-placeholder/preview-placeholder.tsx
+++ b/scopes/preview/ui/preview-placeholder/preview-placeholder.tsx
@@ -16,12 +16,19 @@ export function PreviewPlaceholder({
return selectDefaultComposition(component);
}, [component, shouldShowPreview]);
+ const name = component.id.toString();
+ if (component.buildStatus === 'pending')
+ return (
+
+ );
+
if (shouldShowPreview) {
return ;
}
- const name = component.id.toString();
-
return (
diff --git a/scopes/react/aspect-docs/react-native/react-native.composition.tsx b/scopes/react/aspect-docs/react-native/react-native.composition.tsx
index 2d7bf5a625b9..f92a3412c30d 100644
--- a/scopes/react/aspect-docs/react-native/react-native.composition.tsx
+++ b/scopes/react/aspect-docs/react-native/react-native.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { ReactNative } from './index';
export const ReactNativeDocs = () => (
-
+
-
+
);
diff --git a/scopes/react/aspect-docs/react-native/react-native.docs.mdx b/scopes/react/aspect-docs/react-native/react-native.docs.mdx
index 53cbff6c470d..4844f1441362 100644
--- a/scopes/react/aspect-docs/react-native/react-native.docs.mdx
+++ b/scopes/react/aspect-docs/react-native/react-native.docs.mdx
@@ -22,13 +22,13 @@ import { ReactNative } from '@teambit/react.aspect-docs.react-native';
### Render with theme and ReactNative providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXNativeLayout } from '@teambit/ui.mdx-layout';
import { ReactNative } from '@teambit/react.aspect-docs.react-native';
-
+
-;
+;
```
diff --git a/scopes/react/aspect-docs/react-native/react-native.mdx b/scopes/react/aspect-docs/react-native/react-native.mdx
index 8b60954ebca7..5c52bf7cf5fb 100644
--- a/scopes/react/aspect-docs/react-native/react-native.mdx
+++ b/scopes/react/aspect-docs/react-native/react-native.mdx
@@ -804,3 +804,141 @@ export class ReactNativeEnv implements Environment {
}
}
```
+
+## FAQ
+
+### Compositions issues
+
+```
+You may need an appropriate loader to handle this file type...
+```
+
+This error can show up for multiple reason, and one of the most popular is because we use a library in a React Native component that uses Native API's.
+As the local Bit Dev Server runs on the Web it can't work properly with API's that are meant to be run on a mobile device.
+So components that are using a library that use Native API's cannot be rendered on the web, because the Native API's are unavailable.
+
+One way to solve it is to see if the library has support for Web and update your code to also be Web compatible.
+If not, the second way to solve this is to search for a parallel library with Web support and make a Webpack aliases in a Bit React Native extension inside your project, and then configure the extension to make a Webpack alises.
+
+If for some reason a library doesn't have a parallel library for the web and doesn't have built in Websupport, you can't make the composition work on the local Bit dev server.
+
+For example, [`react-native-svg`](https://github.com/react-native-svg/react-native-svg) library has a parallel library called [`react-native-svg-web`](https://github.com/bakerface/react-native-svg-web).
+Let's create a React Native extension and add a `webpack-transformers.ts` file in the extension under `webpack` folder, the file looks like this:
+
+```ts
+import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';
+
+/**
+ * Transformation to apply for both preview and dev server
+ * @param config
+ * @param _context
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function commonTransformation(config: WebpackConfigMutator, _context: WebpackConfigTransformContext) {
+ // Merge config with the webpack.config.js file - adding handlebars support
+ // config.merge([webpackConfig]);
+ config.addAliases({
+ 'react-native-svg': require.resolve('react-native-svg-web'),
+ 'react-native-web': require.resolve('react-native-web'),
+ });
+ return config;
+}
+
+/**
+ * Transformation for the preview only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const previewConfigTransformer: WebpackConfigTransformer = (
+ config: WebpackConfigMutator,
+ context: WebpackConfigTransformContext
+) => {
+ const newConfig = commonTransformation(config, context);
+ return newConfig;
+};
+
+/**
+ * Transformation for the dev server only
+ * @param config
+ * @param context
+ * @returns
+ */
+export const devServerConfigTransformer: WebpackConfigTransformer = (
+ config: WebpackConfigMutator,
+ context: WebpackConfigTransformContext
+) => {
+ const newConfig = commonTransformation(config, context);
+ return newConfig;
+};
+```
+
+And then in the main file of the extension we created, let's add the import of the Webpack transformers:
+
+```ts
+import { EnvsMain, EnvsAspect } from '@teambit/envs';
+import { ReactNativeAspect, ReactNativeMain } from '@teambit/react-native';
+import { previewConfigTransformer, devServerConfigTransformer } from './webpack/webpack-transformers';
+
+export class CustomReactNativeExtension {
+ constructor(private reactNative: ReactNativeMain) {}
+
+ static dependencies: any = [EnvsAspect, ReactNativeAspect];
+
+ static async provider([envs, reactNative]: [EnvsMain, ReactNativeMain]) {
+ const CustomReactNativeEnv = reactNative.compose([
+ /*
+ Use any of the "reactNative.override..." transformers to
+ */
+ reactNative.useWebpack({
+ previewConfig: [previewConfigTransformer],
+ devServerConfig: [devServerConfigTransformer],
+ }),
+ ]);
+
+ envs.registerEnv(CustomReactNativeEnv);
+
+ return new CustomReactNativeExtension(reactNative);
+ }
+}
+```
+
+This will add the Webpack aliases to the Webpack configurations and solve the issue.
+One last thing we need to do, is to add the peer dependencies of the parallel library we use to the dependency resolver of the extension in the variants section in `workspace.jsonc` file:
+
+```json
+{
+ "teambit.workspace/variants": {
+ // ...
+ "[some]/[variant]": {
+ "[yourscope]/extensions/custom-react-native": {}
+ },
+ "extensions/custom-react-native": {
+ "teambit.harmony/aspect": {},
+ "teambit.dependencies/dependency-resolver": {
+ "policy": {
+ "dependencies": {
+ "react-native-svg-web": "1.0.9",
+ "react-native-web": "0.16.2",
+ "prop-types": "15.7.2"
+ }
+ }
+ }
+ }
+ // ...
+ }
+}
+```
+
+In this case `react-native-svg-web` has these dependencies in the peer dependencies:
+
+```json
+"peerDependencies": {
+ "prop-types": "*",
+ "react": "*",
+ "react-native-web": ">= 0.10.1"
+},
+```
+
+So we need to add them as the dependencies of the extension so it will work properly.
+Now every component that will use the `react-native-svg` library will work fine with the compositions, and this solution can be used for every other library that use Native API's.
diff --git a/scopes/react/aspect-docs/react/react.composition.tsx b/scopes/react/aspect-docs/react/react.composition.tsx
index fae69f54a6ba..498d3f82ff6e 100644
--- a/scopes/react/aspect-docs/react/react.composition.tsx
+++ b/scopes/react/aspect-docs/react/react.composition.tsx
@@ -1,12 +1,12 @@
import React from 'react';
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
import { ReactAspect } from './index';
export const ReactDocs = () => (
-
+
-
+
);
diff --git a/scopes/react/aspect-docs/react/react.docs.mdx b/scopes/react/aspect-docs/react/react.docs.mdx
index fef8f33c176e..9dbaf05779d8 100644
--- a/scopes/react/aspect-docs/react/react.docs.mdx
+++ b/scopes/react/aspect-docs/react/react.docs.mdx
@@ -22,13 +22,13 @@ import { ReactAspect } from '@teambit/react.aspect-docs.react';
### Render with theme and React providers
```js
-import { ThemeContext } from '@teambit/documenter.theme.theme-context';
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
import { MDXLayout } from '@teambit/ui.mdx-layout';
import { ReactAspect } from '@teambit/react.aspect-docs.react';
-
+
-;
+;
```
diff --git a/scopes/react/aspect-docs/react/react.mdx b/scopes/react/aspect-docs/react/react.mdx
index 3aa56a537aaa..94c6fef42556 100644
--- a/scopes/react/aspect-docs/react/react.mdx
+++ b/scopes/react/aspect-docs/react/react.mdx
@@ -273,7 +273,7 @@ export class ReactExtension {
#### `overridePreviewConfig(config: Configuration): EnvTransformer`
Merges the Webpack configuration for the 'Preview' environment service, with the contents of your [webpack configuration file](https://webpack.js.org/configuration/).
-This webpack configuration is used for building and rendering your components on the local dev server.
+This webpack configuration is used for building and rendering your components for production (during `bit tag` or `bit build`).
```ts
// ...
@@ -291,7 +291,7 @@ export class ReactExtension {
#### `overrideDevServerConfig(config: Configuration): EnvTransformer`
Merges the Webpack configuration for the 'DevServer' environment service, with the contents of your [webpack configuration file](https://webpack.js.org/configuration/).
-This configuration is used for building and rendering the dev server UI (but not your components, which use the PreviewConfig)
+This configuration is used for building and rendering your components in the local dev server.
```ts
// ...
diff --git a/scopes/react/component-highlighter/component-highlighter/component-highlighter.module.scss b/scopes/react/component-highlighter/component-highlighter/component-highlighter.module.scss
index 443ea7bff3b3..996c0c3be3ef 100644
--- a/scopes/react/component-highlighter/component-highlighter/component-highlighter.module.scss
+++ b/scopes/react/component-highlighter/component-highlighter/component-highlighter.module.scss
@@ -2,6 +2,7 @@
border: solid var(--border-color, #ededed);
border-width: 0px;
box-sizing: border-box;
+ height: 100%;
transition: border 300ms;
@@ -11,7 +12,6 @@
&.active {
border-width: 8px;
- height: 100vh;
overflow: auto;
}
}
diff --git a/scopes/react/eslint-config-bit-react/component.json b/scopes/react/eslint-config-bit-react/component.json
index 81e70bd0d841..efce6acf4eb5 100644
--- a/scopes/react/eslint-config-bit-react/component.json
+++ b/scopes/react/eslint-config-bit-react/component.json
@@ -27,7 +27,7 @@
},
"peerDependencies": {
"eslint": "> 7.0.0",
- "@teambit/legacy": "1.0.89"
+ "@teambit/legacy": "1.0.98"
}
}
}
diff --git a/scopes/react/react-native/component.json b/scopes/react/react-native/component.json
index f524804ae295..b0631bafbb9a 100644
--- a/scopes/react/react-native/component.json
+++ b/scopes/react/react-native/component.json
@@ -39,14 +39,14 @@
},
"devDependencies": {
"@teambit/legacy": "-",
- "@types/react": "^16.8.0",
- "@types/react-dom": "^16.8.0"
+ "@types/react": "^17.0.8",
+ "@types/react-dom": "^17.0.5"
},
"peerDependencies": {
- "react": "^16.8.0",
- "react-dom": "^16.8.0",
- "react-native-web": "^0.14.0",
- "@teambit/legacy": "1.0.89"
+ "react": "^16.8.0 || ^17.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0",
+ "react-native-web": "^0.16.0",
+ "@teambit/legacy": "1.0.98"
}
}
},
@@ -54,4 +54,4 @@
"env": "teambit.harmony/aspect"
}
}
-}
\ No newline at end of file
+}
diff --git a/scopes/react/react-native/react-native.main.runtime.ts b/scopes/react/react-native/react-native.main.runtime.ts
index 8808af94d57f..8e99a309d976 100644
--- a/scopes/react/react-native/react-native.main.runtime.ts
+++ b/scopes/react/react-native/react-native.main.runtime.ts
@@ -32,7 +32,7 @@ export class ReactNativeMain {
* override the TS config of the environment.
*/
overrideTsConfig: (
- tsconfig: TsConfigSourceFile,
+ tsconfig?: TsConfigSourceFile,
compilerOptions?: Partial
,
tsModule?: any
) => EnvTransformer = this.react.overrideTsConfig.bind(this.react);
@@ -51,7 +51,7 @@ export class ReactNativeMain {
* override the build ts config.
*/
overrideBuildTsConfig: (
- tsconfig: any,
+ tsconfig?: TsConfigSourceFile,
compilerOptions?: Partial
) => EnvTransformer = this.react.overrideBuildTsConfig.bind(this.react);
@@ -118,15 +118,15 @@ function getReactNativeDeps() {
'react-dom': '-',
'react-native': '-',
'@types/jest': '^26.0.0',
- '@types/react': '^16.8.0',
- '@types/react-dom': '^16.8.0',
- '@types/react-native': '^0.63.0',
+ '@types/react': '^17.0.8',
+ '@types/react-dom': '^17.0.5',
+ '@types/react-native': '^0.64.1',
},
peerDependencies: {
- react: '^16.8.0',
- 'react-dom': '^16.8.0',
- 'react-native': '^0.63.0',
- 'react-native-web': '^0.14.0',
+ react: '^16.8.0 || ^17.0.0',
+ 'react-dom': '^16.8.0 || ^17.0.0',
+ 'react-native': '^0.64.1',
+ 'react-native-web': '^0.16.0',
},
};
}
diff --git a/scopes/react/react-native/webpack/webpack.config.js b/scopes/react/react-native/webpack/webpack.config.js
index e87ea63cfd33..5a02d697312d 100644
--- a/scopes/react/react-native/webpack/webpack.config.js
+++ b/scopes/react/react-native/webpack/webpack.config.js
@@ -27,7 +27,7 @@ module.exports = {
react: require.resolve('react'),
'react-dom/server': require.resolve('react-dom/server'),
'react-native$': require.resolve('react-native-web'),
- 'react-dom/unstable-native-dependencies': require.resolve('react-dom/unstable-native-dependencies'),
+ // 'react-dom/unstable-native-dependencies': require.resolve('react-dom/unstable-native-dependencies'),
// 'react-refresh/runtime': require.resolve('react-refresh/runtime'),
},
},
diff --git a/scopes/react/react/bootstrap.tsx b/scopes/react/react/bootstrap.tsx
index e9efdfaaf775..98052df952ff 100644
--- a/scopes/react/react/bootstrap.tsx
+++ b/scopes/react/react/bootstrap.tsx
@@ -1,48 +1,17 @@
-import React, { ComponentType, ReactNode } from 'react';
+import React from 'react';
import ReactDOM from 'react-dom';
import { RenderingContext } from '@teambit/preview';
-import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page';
-import { ReactAspect } from './react.aspect';
-function wrap(Component: ComponentType, WrapperComponent?: ComponentType): ComponentType {
- function Wrapper({ children }: { children?: ReactNode }) {
- if (!WrapperComponent) return {children};
-
- return (
-
- {children}
-
- );
- }
-
- return Wrapper;
-}
-
-/**
- * HOC to wrap and mount all registered providers into the DOM.
- */
-export function withProviders(providers: ComponentType[] = []) {
- return providers.reduce(
- (MainProvider, Provider) => {
- if (!MainProvider) return wrap(Provider);
- return wrap(Provider, MainProvider);
- },
- ({ children }) => {children}
- );
-}
+import { CompositionsApp } from './compositions-app';
/**
* this mounts compositions into the DOM in the component preview.
* this function can be overridden through ReactAspect.overrideCompositionsMounter() API
* to apply custom logic for component DOM mounting.
*/
-export default (Composition: React.ComponentType = StandaloneNotFoundPage, previewContext: RenderingContext) => {
- const reactContext = previewContext.get(ReactAspect.id);
- const Provider = withProviders(reactContext?.providers);
+export default (Composition: React.ComponentType, previewContext: RenderingContext) => {
ReactDOM.render(
-
-
- ,
+ ,
document.getElementById('root')
);
};
diff --git a/scopes/react/react/component.json b/scopes/react/react/component.json
index 75e4cef4ef2b..bd98d60504d1 100644
--- a/scopes/react/react/component.json
+++ b/scopes/react/react/component.json
@@ -28,11 +28,9 @@
"eslint-plugin-jsx-a11y": "6.4.1",
"react-app-polyfill": "1.0.6",
"resolve-url-loader": "3.1.2",
- "file-loader": "6.2.0",
"@mdx-js/react": "1.6.22",
"jest-environment-jsdom": "26.6.2",
"identity-obj-proxy": "3.0.0",
- "url-loader": "4.1.1",
"jest-watch-typeahead": "0.6.1",
"babel-plugin-named-asset-import": "0.3.7",
"babel-loader": "8.2.2",
@@ -55,13 +53,13 @@
"@teambit/legacy": "-",
"@types/mocha": "5.2.7",
"@types/node": "12.20.4",
- "@types/react": "^16.8.0",
- "@types/react-dom": "^16.8.0"
+ "@types/react": "^17.0.8",
+ "@types/react-dom": "^17.0.5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
- "@teambit/legacy": "1.0.89"
+ "@teambit/legacy": "1.0.98"
}
}
}
diff --git a/scopes/react/react/compositions-app.tsx b/scopes/react/react/compositions-app.tsx
new file mode 100644
index 000000000000..098a24b50e08
--- /dev/null
+++ b/scopes/react/react/compositions-app.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Composer } from '@teambit/base-ui.utils.composer';
+import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page';
+import { RenderingContext } from '@teambit/preview';
+import { ErrorFallback } from '@teambit/react.ui.error-fallback';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ReactAspect } from './react.aspect';
+
+export function CompositionsApp({
+ Composition = StandaloneNotFoundPage,
+ previewContext,
+}: {
+ Composition?: React.ComponentType;
+ previewContext: RenderingContext;
+}) {
+ const reactContext = previewContext.get(ReactAspect.id);
+ const providers = reactContext?.providers || [];
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/scopes/react/react/docs/base.tsx b/scopes/react/react/docs/base.tsx
index 0699d3affa62..0b9cccaca2f6 100644
--- a/scopes/react/react/docs/base.tsx
+++ b/scopes/react/react/docs/base.tsx
@@ -1,11 +1,13 @@
-import 'reset-css';
-import React, { HTMLAttributes } from 'react';
-import { docsFile } from '@teambit/documenter.types.docs-file';
+import React, { HTMLAttributes, useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
import classNames from 'classnames';
+import flatten from 'lodash.flatten';
+import { docsFile } from '@teambit/documenter.types.docs-file';
import { isFunction } from 'ramda-adjunct';
+import { Composer } from '@teambit/base-ui.utils.composer';
import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
+import { ErrorFallback } from '@teambit/react.ui.error-fallback';
import { RenderingContext } from '@teambit/preview';
-import { withProviders } from '../mount';
import { ReactAspect } from '../react.aspect';
import styles from './base.module.scss';
import { ComponentOverview } from './component-overview';
@@ -33,6 +35,9 @@ const defaultDocs = {
export function Base({ docs = defaultDocs, componentId, compositions, renderingContext, ...rest }: DocsSectionProps) {
const { loading, error, data } = useFetchDocs(componentId);
+ const rawProviders = renderingContext.get(ReactAspect.id);
+ const reactContext = useMemo(() => flatten(Object.values(rawProviders || {})), [rawProviders]);
+
if (!data || loading) return null;
if (loading) return null;
if (error) throw error;
@@ -42,8 +47,6 @@ export function Base({ docs = defaultDocs, componentId, compositions, renderingC
const { examples = [], labels = [], abstract = docsModel.abstract } = docs;
const { displayName, version, packageName, description } = component;
const Content: any = isFunction(docs.default) ? docs.default : () => null;
- const reactContext = renderingContext.get(ReactAspect.id);
- const Provider = withProviders(reactContext?.providers);
return (
@@ -55,23 +58,27 @@ export function Base({ docs = defaultDocs, componentId, compositions, renderingC
packageName={packageName}
/>
-
- {Content.isMDXComponent ? (
-
-
+
+
+
+ {Content.isMDXComponent ? (
+
+
+
+
+
+ ) : (
-
+
+
+
+
+
{children}
+
+ {cta}
+
+
.png)
+
-[](https://github.com/prettier/prettier)
+
+
+
+
+