@teambit/react 0.0.553 → 0.0.557

package/react.main.runtime.ts

@@ -1,437 +0,0 @@
-import mergeDeepLeft from 'ramda/src/mergeDeepLeft';
-import { omit } from 'lodash';
-import { MainRuntime } from '@teambit/cli';
-import type { CompilerMain } from '@teambit/compiler';
-import { CompilerAspect, Compiler } from '@teambit/compiler';
-import { BuildTask } from '@teambit/builder';
-import { Component } from '@teambit/component';
-import { EnvsAspect, EnvsMain, EnvTransformer, Environment } from '@teambit/envs';
-import type { GraphqlMain } from '@teambit/graphql';
-import { GraphqlAspect } from '@teambit/graphql';
-import type { JestMain } from '@teambit/jest';
-import { JestAspect } from '@teambit/jest';
-import type { PkgMain, PackageJsonProps } from '@teambit/pkg';
-import { PkgAspect } from '@teambit/pkg';
-import type { TesterMain } from '@teambit/tester';
-import { TesterAspect } from '@teambit/tester';
-import type { TypescriptMain, TsCompilerOptionsWithoutTsConfig, TsConfigTransformer } from '@teambit/typescript';
-import { TypescriptAspect } from '@teambit/typescript';
-import type { WebpackMain, Configuration, WebpackConfigTransformer } from '@teambit/webpack';
-import { WebpackAspect } from '@teambit/webpack';
-import { GeneratorAspect, GeneratorMain } from '@teambit/generator';
-import { Workspace, WorkspaceAspect } from '@teambit/workspace';
-import { DevServerContext, BundlerContext } from '@teambit/bundler';
-import { VariantPolicyConfigObject } from '@teambit/dependency-resolver';
-import ts from 'typescript';
-import { ApplicationAspect, ApplicationMain } from '@teambit/application';
-import { FormatterContext } from '@teambit/formatter';
-import { LinterContext } from '@teambit/linter';
-import { ESLintMain, ESLintAspect, EslintConfigTransformer } from '@teambit/eslint';
-import { PrettierMain, PrettierAspect, PrettierConfigTransformer } from '@teambit/prettier';
-import { ReactAspect } from './react.aspect';
-import { ReactEnv } from './react.env';
-import { ReactAppType } from './react.app-type';
-import { reactSchema } from './react.graphql';
-import { ReactAppOptions } from './react-app-options';
-import { ReactApp } from './react.application';
-import { componentTemplates, workspaceTemplates } from './react.templates';
-
-type ReactDeps = [
-  EnvsMain,
-  JestMain,
-  TypescriptMain,
-  CompilerMain,
-  WebpackMain,
-  Workspace,
-  GraphqlMain,
-  PkgMain,
-  TesterMain,
-  ESLintMain,
-  PrettierMain,
-  ApplicationMain,
-  GeneratorMain
-];
-
-export type ReactMainConfig = {
-  /**
-   * configure the react env compiler.
-   * can be configured to either TypeScript ('ts') or Babel ('babel').
-   */
-  compiler: 'babel' | 'ts';
-
-  /**
-   * configure the component tester.
-   * can be either Jest ('jest') or Mocha ('mocha')
-   */
-  tester: 'jest' | 'mocha';
-
-  /**
-   * version of React to configure.
-   */
-  reactVersion: string;
-};
-
-export type UseWebpackModifiers = {
-  previewConfig?: WebpackConfigTransformer[];
-  devServerConfig?: WebpackConfigTransformer[];
-};
-
-export type UseTypescriptModifiers = {
-  buildConfig?: TsConfigTransformer[];
-  devConfig?: TsConfigTransformer[];
-};
-
-export type UseEslintModifiers = {
-  transformers: EslintConfigTransformer[];
-};
-export type UsePrettierModifiers = {
-  transformers: PrettierConfigTransformer[];
-};
-
-export class ReactMain {
-  constructor(
-    /**
-     * an instance of the React env.
-     */
-    readonly reactEnv: ReactEnv,
-
-    private envs: EnvsMain,
-
-    private application: ApplicationMain,
-
-    private workspace: Workspace
-  ) {}
-
-  readonly env = this.reactEnv;
-
-  /**
-   * override the env's typescript config for both dev and build time.
-   * Replaces both overrideTsConfig (devConfig) and overrideBuildTsConfig (buildConfig)
-   */
-  useTypescript(modifiers?: UseTypescriptModifiers, tsModule: any = ts) {
-    const overrides: any = {};
-    const devTransformers = modifiers?.devConfig;
-    if (devTransformers) {
-      overrides.getCompiler = () => this.reactEnv.getCompiler(devTransformers, tsModule);
-    }
-    const buildTransformers = modifiers?.buildConfig;
-    if (buildTransformers) {
-      const buildPipeModifiers = {
-        tsModifier: {
-          transformers: buildTransformers,
-          module: tsModule,
-        },
-      };
-      overrides.getBuildPipe = () => this.reactEnv.getBuildPipe(buildPipeModifiers);
-    }
-    return this.envs.override(overrides);
-  }
-
-  /**
-   * @deprecated use useTypescript()
-   * override the TS config of the React environment.
-   * @param tsModule typeof `ts` module instance.
-   */
-  overrideTsConfig(
-    tsconfig: Record<string, any> = {},
-    compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {},
-    tsModule: any = ts
-  ) {
-    const transformer: TsConfigTransformer = (configMutator) => {
-      configMutator.mergeTsConfig(tsconfig);
-      configMutator.raw.compileJs = compilerOptions.compileJs ?? configMutator.raw.compileJs;
-      configMutator.raw.compileJsx = compilerOptions.compileJsx ?? configMutator.raw.compileJsx;
-      if (compilerOptions.types) {
-        configMutator.addTypes(compilerOptions.types);
-      }
-      const genericCompilerOptions = omit(compilerOptions, ['types', 'compileJs', 'compileJsx']);
-      configMutator.raw = Object.assign(configMutator.raw, genericCompilerOptions);
-      return configMutator;
-    };
-    // return this.envs.override({
-    //   getCompiler: () => this.reactEnv.getCompiler([transformer], tsModule),
-    // });
-    return this.useTypescript({ devConfig: [transformer] }, tsModule);
-  }
-
-  /**
-   * Override the Bit documentation link. See docs: https://bit.dev/docs/docs/doc-templates
-   */
-  overrideDocsTemplate(templatePath: string) {
-    return this.envs.override({
-      getDocsTemplate: () => templatePath,
-    });
-  }
-
-  /**
-   * @deprecated use useTypescript()
-   * override the build tsconfig.
-   */
-  overrideBuildTsConfig(
-    tsconfig: Record<string, any> = {},
-    compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {},
-    tsModule: any = ts
-  ) {
-    const transformer: TsConfigTransformer = (configMutator) => {
-      configMutator.mergeTsConfig(tsconfig);
-      configMutator.raw.compileJs = compilerOptions.compileJs ?? configMutator.raw.compileJs;
-      configMutator.raw.compileJsx = compilerOptions.compileJsx ?? configMutator.raw.compileJsx;
-      if (compilerOptions.types) {
-        configMutator.addTypes(compilerOptions.types);
-      }
-      const genericCompilerOptions = omit(compilerOptions, ['types', 'compileJs', 'compileJsx']);
-      configMutator.raw = Object.assign(configMutator.raw, genericCompilerOptions);
-      return configMutator;
-    };
-    // return this.envs.override({
-    //   getBuildPipe: () => this.reactEnv.getBuildPipe([transformer], tsModule),
-    // });
-    return this.useTypescript({ buildConfig: [transformer] }, tsModule);
-  }
-
-  /**
-   * register a new React application.
-   */
-  registerReactApp(options: ReactAppOptions) {
-    this.application.registerApp(
-      new ReactApp(options.name, options.entry, options.portRange || [3000, 4000], this.reactEnv, options.deploy)
-    );
-
-    return this;
-  }
-
-  /**
-   * override the env's dev server and preview webpack configurations.
-   * Replaces both overrideDevServerConfig and overridePreviewConfig
-   */
-  useWebpack(modifiers?: UseWebpackModifiers): EnvTransformer {
-    const overrides: any = {};
-    const devServerTransformers = modifiers?.devServerConfig;
-    if (devServerTransformers) {
-      overrides.getDevServer = (context: DevServerContext) =>
-        this.reactEnv.getDevServer(context, devServerTransformers);
-      overrides.getDevEnvId = (context: DevServerContext) => this.reactEnv.getDevEnvId(context.envDefinition.id);
-    }
-    const previewTransformers = modifiers?.previewConfig;
-    if (previewTransformers) {
-      overrides.getBundler = (context: BundlerContext) => this.reactEnv.getBundler(context, previewTransformers);
-    }
-    return this.envs.override(overrides);
-  }
-
-  /**
-   * An API to mutate the prettier config
-   * @param modifiers
-   * @returns
-   */
-  useEslint(modifiers?: UseEslintModifiers): EnvTransformer {
-    const transformers = modifiers?.transformers || [];
-    return this.envs.override({
-      getLinter: (context: LinterContext) => this.reactEnv.getLinter(context, transformers),
-    });
-  }
-
-  /**
-   * An API to mutate the prettier config
-   * @param modifiers
-   * @returns
-   */
-  usePrettier(modifiers?: UsePrettierModifiers): EnvTransformer {
-    const transformers = modifiers?.transformers || [];
-    return this.envs.override({
-      getFormatter: (context: FormatterContext) => this.reactEnv.getFormatter(context, transformers),
-    });
-  }
-
-  /**
-   * @deprecated use useWebpack()
-   * override the dev server webpack config.
-   */
-  overrideDevServerConfig(config: Configuration) {
-    const transformer: WebpackConfigTransformer = (configMutator) => {
-      return configMutator.merge([config]);
-    };
-
-    return this.envs.override({
-      getDevServer: (context: DevServerContext) => this.reactEnv.getDevServer(context, [transformer]),
-      getDevEnvId: (context: DevServerContext) => this.reactEnv.getDevEnvId(context.envDefinition.id),
-    });
-  }
-
-  /**
-   * @deprecated use useWebpack()
-   * override the preview webpack config.
-   */
-  overridePreviewConfig(config: Configuration) {
-    const transformer: WebpackConfigTransformer = (configMutator) => {
-      return configMutator.merge([config]);
-    };
-    return this.envs.override({
-      getBundler: (context: BundlerContext) => this.reactEnv.getBundler(context, [transformer]),
-    });
-  }
-
-  overrideMounter(mounterPath: string) {
-    return this.envs.override({
-      getMounter: () => {
-        return mounterPath;
-      },
-    });
-  }
-
-  /**
-   * create a new composition of the react environment.
-   */
-  compose(transformers: EnvTransformer[], targetEnv: Environment = {}) {
-    return this.envs.compose(this.envs.merge(targetEnv, this.reactEnv), transformers);
-  }
-
-  /**
-   * override the jest configuration.
-   * @param jestConfigPath {typeof jest} absolute path to jest.config.json.
-   * @param jestModulePath absolute path to jest
-   */
-  overrideJestConfig(jestConfigPath: string, jestModulePath?: string) {
-    return this.envs.override({
-      getTester: () => this.reactEnv.getTester(jestConfigPath, jestModulePath),
-    });
-  }
-
-  /**
-   * override the build pipeline of the component environment.
-   */
-  overrideBuildPipe(tasks: BuildTask[]) {
-    return this.envs.override({
-      getBuildPipe: () => tasks,
-    });
-  }
-
-  /**
-   * override the compiler tasks inside the build pipeline of the component environment.
-   */
-  overrideCompilerTasks(tasks: BuildTask[]) {
-    const pipeWithoutCompiler = this.reactEnv.getBuildPipe().filter((task) => task.aspectId !== CompilerAspect.id);
-
-    return this.envs.override({
-      getBuildPipe: () => [...tasks, ...pipeWithoutCompiler],
-    });
-  }
-
-  /**
-   * override the dependency configuration of the component environment.
-   */
-  overrideDependencies(dependencyPolicy: VariantPolicyConfigObject) {
-    return this.envs.override({
-      getDependencies: async () => {
-        const reactDeps = await this.reactEnv.getDependencies();
-        return mergeDeepLeft(dependencyPolicy, reactDeps);
-      },
-    });
-  }
-
-  /**
-   * override the workspace compiler.
-   */
-  overrideCompiler(compiler: Compiler) {
-    return this.envs.override({
-      getCompiler: () => {
-        return compiler;
-      },
-    });
-  }
-
-  /**
-   * TODO: @gilad we need to implement this.
-   */
-  overrideEslintConfig() {}
-
-  /**
-   * override the package json props of the component environment.
-   */
-  overridePackageJsonProps(props: PackageJsonProps) {
-    return this.envs.override({
-      getPackageJsonProps: () => {
-        return {
-          ...props,
-          ...this.reactEnv.getPackageJsonProps(),
-        };
-      },
-    });
-  }
-
-  /**
-   * returns doc adjusted specifically for react components.
-   */
-  getDocs(component: Component) {
-    const docsArray = component.state._consumer.docs;
-    if (!docsArray || !docsArray[0]) {
-      return null;
-    }
-
-    const docs = docsArray[0];
-
-    return {
-      abstract: docs.description,
-      filePath: docs.filePath,
-      properties: docs.properties,
-    };
-  }
-
-  static runtime = MainRuntime;
-  static dependencies = [
-    EnvsAspect,
-    JestAspect,
-    TypescriptAspect,
-    CompilerAspect,
-    WebpackAspect,
-    WorkspaceAspect,
-    GraphqlAspect,
-    PkgAspect,
-    TesterAspect,
-    ESLintAspect,
-    PrettierAspect,
-    ApplicationAspect,
-    GeneratorAspect,
-  ];
-
-  static async provider(
-    [
-      envs,
-      jestAspect,
-      tsAspect,
-      compiler,
-      webpack,
-      workspace,
-      graphql,
-      pkg,
-      tester,
-      eslint,
-      prettier,
-      application,
-      generator,
-    ]: ReactDeps,
-    config: ReactMainConfig
-  ) {
-    const reactEnv = new ReactEnv(
-      jestAspect,
-      tsAspect,
-      compiler,
-      webpack,
-      workspace,
-      pkg,
-      tester,
-      config,
-      eslint,
-      prettier
-    );
-    const react = new ReactMain(reactEnv, envs, application, workspace);
-    graphql.register(reactSchema(react));
-    envs.registerEnv(reactEnv);
-    generator.registerComponentTemplate(componentTemplates);
-    generator.registerWorkspaceTemplate(workspaceTemplates);
-    application.registerAppType(new ReactAppType('react-app', reactEnv));
-    return react;
-  }
-}
-
-ReactAspect.addRuntime(ReactMain);

package/react.preview.runtime.ts

@@ -1,44 +0,0 @@
-import { ComponentType } from 'react';
-import flatten from 'lodash.flatten';
-import { SlotRegistry, Slot } from '@teambit/harmony';
-import PreviewAspect, { PreviewPreview, PreviewRuntime } from '@teambit/preview';
-import { HighlighterProvider } from '@teambit/react.ui.highlighter-provider';
-import { ReactAspect } from './react.aspect';
-
-export type Provider = ComponentType<{}>;
-export type ProviderSlot = SlotRegistry<Provider[]>;
-
-export class ReactPreview {
-  constructor(private preview: PreviewPreview, private providerSlot: ProviderSlot) {}
-
-  registerProvider(provider: Provider[]) {
-    this.providerSlot.register(provider);
-  }
-
-  getRenderingContext() {
-    return {
-      providers: flatten(this.providerSlot.values()),
-    };
-  }
-
-  static runtime = PreviewRuntime;
-
-  static slots = [Slot.withType<Provider>()];
-
-  static dependencies = [PreviewAspect];
-
-  static async provider([preview]: [PreviewPreview], config, [providerSlot]: [ProviderSlot]) {
-    const reactPreview = new ReactPreview(preview, providerSlot);
-
-    reactPreview.registerProvider([HighlighterProvider]);
-
-    preview.registerRenderContext(() => {
-      return reactPreview.getRenderingContext();
-    });
-    return reactPreview;
-  }
-}
-
-ReactAspect.addRuntime(ReactPreview);
-
-export default ReactPreview;

package/react.templates.ts

@@ -1,29 +0,0 @@
-import { ComponentTemplate, WorkspaceTemplate } from '@teambit/generator';
-import { reactComponent, deprecatedReactComponent } from './templates/react-component';
-import { reactComponentJS, deprecatedReactComponentJS } from './templates/react-component-js';
-import { reactEnvTemplate } from './templates/react-env';
-import { deprecatedReactWorkspaceTemplate } from './templates/react-workspace-deprecated';
-import { reactHook } from './templates/react-hook';
-import { reactContext } from './templates/react-context';
-import { reactAppTemplate } from './templates/react-app';
-import { reactWorkspaceTemplate } from './templates/react-workspace';
-import { reactWorkspaceAppTemplate } from './templates/react-workspace-app';
-import { reactWorkspaceLibTemplate } from './templates/react-workspace-lib';
-
-export const componentTemplates: ComponentTemplate[] = [
-  reactComponent,
-  reactContext,
-  reactHook,
-  reactComponentJS,
-  reactEnvTemplate,
-  reactAppTemplate,
-  deprecatedReactComponent,
-  deprecatedReactComponentJS,
-];
-
-export const workspaceTemplates: WorkspaceTemplate[] = [
-  reactWorkspaceTemplate,
-  reactWorkspaceAppTemplate,
-  reactWorkspaceLibTemplate,
-  deprecatedReactWorkspaceTemplate,
-];

package/react.ui.runtime.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { CompositionsAspect, CompositionsUI } from '@teambit/compositions';
-import { UIRuntime } from '@teambit/ui';
-import { TesterAspect, TesterUI } from '@teambit/tester';
-import { AddingTests } from '@teambit/react.instructions.react.adding-tests';
-import { AddingCompositions } from '@teambit/react.instructions.react.adding-compositions';
-import { ReactAspect } from './react.aspect';
-import { HighlighterWidget } from './highlighter-widget';
-
-export class ReactUI {
-  static runtime = UIRuntime;
-  static slots = [];
-  static dependencies = [CompositionsAspect, TesterAspect];
-
-  static async provider([compositionsUI, testerUi]: [CompositionsUI, TesterUI]) {
-    const reactUI = new ReactUI();
-    testerUi.registerEmptyState(() => {
-      return <AddingTests />;
-    });
-    compositionsUI.registerEmptyState(() => {
-      return <AddingCompositions />;
-    });
-
-    compositionsUI.registerMenuWidget({
-      location: 'start',
-      content: <HighlighterWidget />,
-    });
-
-    return reactUI;
-  }
-}
-
-ReactAspect.addRuntime(ReactUI);
-
-export default ReactUI;

package/templates/react-app/files/app-root.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function appRootFile({ namePascalCase: Name }: ComponentContext) {
-  return `import React from 'react';
-import ReactDOM from 'react-dom';
-import { ${Name}App } from './app';
-
-ReactDOM.render(<${Name}App />, document.getElementById('root'));
-`;
-}

package/templates/react-app/files/app.ts

@@ -1,30 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function appFile({ namePascalCase: Name }: ComponentContext) {
-  return `import React from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-export function ${Name}App() {
-  return (
-    <BrowserRouter>
-
-       {/* header component */}
-
-        <Switch>
-          <Route path="/">
-             {/* home page component */}
-          </Route>
-
-          <Route path="/about">
-             {/* about page component */}
-          </Route>
-
-        </Switch>
-
-        {/* footer component */}
-
-    </BrowserRouter>
-  );
-}
-`;
-}

package/templates/react-app/files/aspect.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function aspectFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { Aspect } from '@teambit/harmony';
-
-export const ${Name}Aspect = Aspect.create({
-  id: 'YourOrgName.YourScopeName/namespace?/${name}'
-});
-`;
-}

package/templates/react-app/files/compositions.ts

@@ -1,11 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function compositionsFile({ namePascalCase: Name }: ComponentContext) {
-  return `import React from 'react';
-import { ${Name}App } from './app';
-
-export const ${Name}Basic = () => {
-  return <${Name}App></${Name}App>;
-};
-`;
-}

package/templates/react-app/files/doc.ts

@@ -1,29 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function docFile({ name }: ComponentContext) {
-  return `---
-description: Application.
-labels: ['env', 'app']
----
-
-## Application component
-
-- The app file contains components from react router dom so you can add here all routes for your app and include all your page components.
-- The main runtime file contains what is needed to build your application as a React app.
-- The app root file renders your app to the DOM.
-- The compositions file renders your app so it can be seen in the compositions tab.
-- The aspect file contains the id of the aspect. You will need to modify this with your own org name, scope name and namespace if any, and then add it to your \`workspace.json\` file at root level like:
-
-\`\`\`json
-"org-name.scope-name/namespace/name": {},
-\`\`\`
-
-### Run the application
-
-You can run your application on a separate port to see it outside of the Bit workspace
-
-\`\`\`bash
-bit run ${name}
-\`\`\`
-`;
-}

package/templates/react-app/files/index.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function indexFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { ${Name}Aspect } from './${name}.aspect';
-
-export type { ${Name}Main } from './${name}.main.runtime';
-export default ${Name}Aspect;
-export { ${Name}Aspect };
-`;
-}

package/templates/react-app/files/main.runtime.ts

@@ -1,22 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function mainRuntimeFile({ name, namePascalCase: Name }: ComponentContext) {
-  return `import { MainRuntime } from '@teambit/cli';
-import { ReactAspect, ReactMain } from '@teambit/react';
-import { ${Name}Aspect } from './${name}.aspect';
-
-export class ${Name}Main {
-  static slots = [];
-  static dependencies = [ReactAspect];
-  static runtime = MainRuntime;
-  static async provider([react]: [ReactMain]) {
-    react.registerReactApp({
-      name: '${name}',
-      entry: ['dist/${name}.app-root']
-    });
-    return new ${Name}Main();
-  }
-}
-${Name}Aspect.addRuntime(${Name}Main);
-`;
-}