@teambit/react 1.0.413 → 1.0.414

package/react.main.runtime.ts

@@ -1,476 +0,0 @@
-import type { DevFilesMain } from '@teambit/dev-files';
-import { DevFilesAspect } from '@teambit/dev-files';
-import { Harmony } from '@teambit/harmony';
-import { merge, 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, ComponentID } from '@teambit/component';
-import { EnvsAspect, EnvsMain, EnvTransformer, Environment, EnvContext } from '@teambit/envs';
-import type { GraphqlMain } from '@teambit/graphql';
-import { GraphqlAspect } from '@teambit/graphql';
-import type { PkgMain, PackageJsonProps } from '@teambit/pkg';
-import { SchemaMain, SchemaAspect } from '@teambit/schema';
-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 { DependencyResolverAspect, DependencyResolverMain, EnvPolicyConfigObject } 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 { Logger, LoggerAspect, LoggerMain } from '@teambit/logger';
-import { EslintConfigTransformer } from '@teambit/defender.eslint.config-mutator';
-import { WorkerAspect, WorkerMain } from '@teambit/worker';
-
-import { ReactAspect } from './react.aspect';
-import { ReactEnv } from './react.env';
-import { ReactAppType } from './apps/web';
-import { reactSchema } from './react.graphql';
-import { getTemplates } from './react.templates';
-import { ReactAppOptions } from './apps/web/react-app-options';
-import { ReactSchema } from './react.schema';
-import { ReactAPITransformer } from './react.api.transformer';
-import { PrettierConfigTransformer } from '@teambit/defender.prettier.config-mutator';
-
-type ReactDeps = [
-  EnvsMain,
-  TypescriptMain,
-  CompilerMain,
-  WebpackMain,
-  Workspace,
-  GraphqlMain,
-  PkgMain,
-  TesterMain,
-  ApplicationMain,
-  GeneratorMain,
-  DependencyResolverMain,
-  LoggerMain,
-  SchemaMain,
-  WorkerMain,
-  DevFilesMain
-];
-
-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[];
-  webpackModulePath?: string;
-  webpackDevServerModulePath?: string;
-};
-
-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 reactAppType: ReactAppType,
-
-    private dependencyResolver: DependencyResolverMain,
-
-    private logger: Logger
-  ) {}
-
-  readonly env = this.reactEnv;
-
-  getReactAppType(name: string) {
-    return new ReactAppType(name, this.reactEnv, this.logger, this.dependencyResolver);
-  }
-
-  /**
-   * use this to register apps programmatically.
-   */
-  async registerApp(reactApp: ReactAppOptions) {
-    return this.application.registerApp(this.reactAppType.createApp(reactApp));
-  }
-
-  /**
-   * 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/refrence/docs/doc-templates
-   */
-  overrideDocsTemplate(templatePath: string) {
-    return this.envs.override({
-      getDevEnvId: (context: DevServerContext) => this.reactEnv.getDevEnvId(context.envDefinition.id),
-      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);
-  }
-
-  /**
-   * 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 || modifiers?.webpackModulePath || modifiers?.webpackDevServerModulePath) {
-      overrides.getDevServer = (context: DevServerContext) =>
-        this.reactEnv.getDevServer(
-          context,
-          devServerTransformers,
-          modifiers?.webpackModulePath,
-          modifiers?.webpackDevServerModulePath
-        );
-      overrides.getDevEnvId = (context: DevServerContext) => this.reactEnv.getDevEnvId(context.envDefinition.id);
-    }
-    const previewTransformers = modifiers?.previewConfig;
-    if (previewTransformers || modifiers?.webpackModulePath) {
-      overrides.getBundler = (context: BundlerContext) =>
-        this.reactEnv.getBundler(context, previewTransformers, modifiers?.webpackModulePath);
-    }
-    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) {
-    const buildTransformers = [() => jestConfigPath];
-    return this.envs.override({
-      getTester: () => this.reactEnv.getTester(jestConfigPath, jestModulePath),
-      getBuildPipe: () =>
-        this.reactEnv.getBuildPipe({ jestModifier: { transformers: buildTransformers, module: 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.getBuildPipeWithoutCompiler();
-
-    return this.envs.override({
-      getBuildPipe: () => [...tasks, ...pipeWithoutCompiler],
-    });
-  }
-
-  /**
-   * override the dependency configuration of the component environment.
-   */
-  overrideDependencies(dependencyPolicy: EnvPolicyConfigObject) {
-    return this.envs.override({
-      getDependencies: async () => {
-        const reactDeps = await this.reactEnv.getDependencies();
-        return merge(reactDeps, dependencyPolicy);
-      },
-    });
-  }
-
-  /**
-   * 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 {
-          ...this.reactEnv.getPackageJsonProps(),
-          ...props,
-        };
-      },
-    });
-  }
-
-  /**
-   * 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,
-    TypescriptAspect,
-    CompilerAspect,
-    WebpackAspect,
-    WorkspaceAspect,
-    GraphqlAspect,
-    PkgAspect,
-    TesterAspect,
-    ApplicationAspect,
-    GeneratorAspect,
-    DependencyResolverAspect,
-    LoggerAspect,
-    SchemaAspect,
-    WorkerAspect,
-    DevFilesAspect,
-  ];
-
-  static async provider(
-    [
-      envs,
-      tsAspect,
-      compiler,
-      webpack,
-      workspace,
-      graphql,
-      pkg,
-      tester,
-      application,
-      generator,
-      dependencyResolver,
-      loggerMain,
-      schemaMain,
-      workerMain,
-      devFilesMain,
-    ]: ReactDeps,
-    config: ReactMainConfig,
-    slots,
-    harmony: Harmony
-  ) {
-    const logger = loggerMain.createLogger(ReactAspect.id);
-    const reactEnv = new ReactEnv(
-      tsAspect,
-      compiler,
-      webpack,
-      workspace,
-      workerMain,
-      pkg,
-      tester,
-      config,
-      dependencyResolver,
-      devFilesMain,
-      logger,
-      CompilerAspect.id
-    );
-    const appType = new ReactAppType('react-app', reactEnv, logger, dependencyResolver);
-    const react = new ReactMain(reactEnv, envs, application, appType, dependencyResolver, logger);
-    graphql.register(reactSchema(react));
-    envs.registerEnv(reactEnv);
-    if (generator) {
-      const envContext = new EnvContext(ComponentID.fromString(ReactAspect.id), loggerMain, workerMain, harmony);
-      generator.registerComponentTemplate(getTemplates(envContext));
-    }
-
-    if (application) application.registerAppType(appType);
-    if (schemaMain) schemaMain.registerSchemaClass(ReactSchema);
-    if (tsAspect) tsAspect.registerApiTransformer([new ReactAPITransformer()]);
-
-    return react;
-  }
-}
-
-ReactAspect.addRuntime(ReactMain);

package/react.preview.runtime.ts

@@ -1,55 +0,0 @@
-import { ComponentType } from 'react';
-import flatten from 'lodash.flatten';
-import { SlotRegistry, Slot } from '@teambit/harmony';
-import { PreviewAspect, PreviewPreview, PreviewRuntime, RenderingContextProvider } 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: RenderingContextProvider = ({ aspectsFilter }) => {
-    let entries = this.providerSlot.toArray();
-
-    if (aspectsFilter) {
-      const allowedAspects = new Set(aspectsFilter);
-      allowedAspects.add(ReactAspect.id);
-
-      entries = entries.filter(([aspectId]) => allowedAspects.has(aspectId));
-    }
-
-    const providers = flatten(entries.map(([, provider]) => provider));
-
-    return {
-      providers,
-    };
-  };
-
-  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);
-
-    // @ts-ignore
-    reactPreview.registerProvider([HighlighterProvider]);
-
-    preview.registerRenderContext(reactPreview.getRenderingContext);
-
-    return reactPreview;
-  }
-}
-
-ReactAspect.addRuntime(ReactPreview);
-
-export default ReactPreview;

package/react.schema.ts

@@ -1,111 +0,0 @@
-import {
-  DocSchema,
-  FunctionLikeSchema,
-  Location,
-  Modifier,
-  ParameterSchema,
-  SchemaNode,
-  SchemaRegistry,
-  TagName,
-  TypeRefSchema,
-} from '@teambit/semantics.entities.semantic-schema';
-import chalk from 'chalk';
-import { compact } from 'lodash';
-
-/**
- * function-like can be a function, method, arrow-function, variable-function, etc.
- */
-export class ReactSchema extends SchemaNode {
-  readonly returnType: SchemaNode;
-
-  readonly props?: ParameterSchema;
-
-  readonly doc?: DocSchema;
-
-  readonly signature?: string | undefined;
-
-  constructor(
-    readonly location: Location,
-    readonly name: string,
-    returnType: TypeRefSchema,
-    props?: ParameterSchema<TypeRefSchema>,
-    signature?: string,
-    readonly modifiers: Modifier[] = [],
-    doc?: DocSchema,
-    readonly typeParams?: string[]
-  ) {
-    super();
-    this.props = props;
-    this.returnType = returnType;
-    this.doc = doc;
-    this.signature = signature || FunctionLikeSchema.createSignature(name, compact([props]), returnType);
-  }
-
-  getNodes() {
-    return compact([this.props, this.returnType]);
-  }
-
-  toString(options?: { color?: boolean }): string {
-    const bold = options?.color ? chalk.bold : (x: string) => x;
-
-    const paramsStr = this.props?.toString();
-    const typeParamsStr = this.typeParams ? `<${this.typeParams.join(', ')}>` : '';
-    return `${this.modifiersToString()}${typeParamsStr}${bold(this.name)}(${paramsStr}): ${this.returnType.toString()}`;
-  }
-
-  toFullSignature(options?: { showDocs?: boolean }): string {
-    let signature = '';
-
-    if (this.doc && options?.showDocs) {
-      signature += `${this.doc.toFullSignature()}\n`;
-    }
-
-    const modifiersStr = this.modifiersToString();
-    const typeParamsStr = this.typeParams ? `<${this.typeParams.join(', ')}>` : '';
-    const paramsStr = this.props ? this.props.toFullSignature() : '';
-
-    const returnTypeStr = this.returnType.toFullSignature();
-
-    signature += `${modifiersStr}const ${this.name}${typeParamsStr} = (${paramsStr}): ${returnTypeStr};`;
-
-    return signature;
-  }
-
-  isDeprecated(): boolean {
-    return Boolean(this.doc?.hasTag(TagName.deprecated));
-  }
-
-  isPrivate(): boolean {
-    return Boolean(this.modifiers.find((m) => m === 'private') || this.doc?.hasTag(TagName.private));
-  }
-
-  private modifiersToString() {
-    const modifiersToPrint = this.modifiers.filter((modifier) => modifier !== 'export');
-    return modifiersToPrint.length ? `${modifiersToPrint.join(' ')} ` : '';
-  }
-
-  toObject() {
-    return {
-      ...super.toObject(),
-      name: this.name,
-      props: this.props?.toObject(),
-      returnType: this.returnType.toObject(),
-      signature: this.signature,
-      modifiers: this.modifiers,
-      doc: this.doc?.toObject(),
-      typeParams: this.typeParams,
-    };
-  }
-
-  static fromObject(obj: Record<string, any>): ReactSchema {
-    const location = obj.location;
-    const name = obj.name;
-    const props = obj.props ? ParameterSchema.fromObject<TypeRefSchema>(obj.props) : undefined;
-    const returnType = SchemaRegistry.fromObject(obj.returnType);
-    const signature = obj.signature;
-    const modifiers = obj.modifiers;
-    const doc = obj.doc ? DocSchema.fromObject(obj.doc) : undefined;
-    const typeParams = obj.typeParams;
-    return new ReactSchema(location, name, returnType, props, signature, modifiers, doc, typeParams);
-  }
-}

package/react.templates.ts

@@ -1,28 +0,0 @@
-import {
-  ReactComponentTemplate,
-  ReactHookTemplate,
-  ReactWebpackTemplate,
-  ReactViteTemplate,
-  ReactJSComponentTemplate,
-  ReactEnvTemplate,
-  ThemeTemplate,
-} from '@bitdev/react.generators.react-templates';
-import { EnvContext } from '@teambit/envs';
-import { ComponentTemplate, TemplateList } from '@teambit/generator';
-
-const templateListHandler = TemplateList.from([
-  ReactComponentTemplate.from({ env: 'bitdev.react/react-env' }),
-  ReactViteTemplate.from({ env: 'bitdev.react/react-env' }),
-  ReactHookTemplate.from({ env: 'bitdev.react/react-env' }),
-  ThemeTemplate.from({ env: 'bitdev.react/react-env' }),
-  // ReactContextTemplate.from({ env: 'bitdev.react/react-env' }),
-  ReactWebpackTemplate.from({ env: 'bitdev.react/react-env' }),
-  // ReactWebpackAppTemplate.from({ env: 'bitdev.react/react-env' }),
-  ReactJSComponentTemplate.from({ env: 'bitdev.react/react-env' }),
-  ReactEnvTemplate.from(),
-]);
-
-export function getTemplates(envContext: EnvContext): ComponentTemplate[] {
-  const templateList = templateListHandler(envContext);
-  return templateList.compute();
-}