@teambit/react 0.0.554 → 0.0.558

package/jest/transformer.js

@@ -1,41 +0,0 @@
-/* eslint-disable global-require */
-const { transform } = require('@babel/core');
-
-const presets = [
-  require('@babel/preset-react'),
-  require('@babel/preset-typescript'),
-  require('babel-preset-jest'),
-  [
-    require('@babel/preset-env'),
-    {
-      targets: {
-        node: 12,
-      },
-      useBuiltIns: 'usage',
-      corejs: 3,
-    },
-  ],
-];
-const plugins = [
-  [require('@babel/plugin-transform-modules-commonjs')],
-  [require('babel-plugin-transform-typescript-metadata')],
-  [require('@babel/plugin-proposal-decorators'), { legacy: true }],
-  [require('@babel/plugin-transform-runtime')],
-  [require('@babel/plugin-proposal-object-rest-spread')],
-  [require('@babel/plugin-proposal-class-properties')],
-];
-
-module.exports = {
-  process(src, filename) {
-    const result = transform(src, {
-      sourceMap: 'inline',
-      filename,
-      presets,
-      plugins,
-      babelrc: false,
-      configFile: false,
-    });
-
-    return result ? result.code : src;
-  },
-};

package/mount.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { RenderingContext } from '@teambit/preview';
-
-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, previewContext: RenderingContext) => {
-  ReactDOM.render(
-    <CompositionsApp Composition={Composition} previewContext={previewContext} />,
-    document.getElementById('root')
-  );
-};

package/prettier/prettier.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  trailingComma: 'es5',
-  tabWidth: 2,
-  singleQuote: true,
-};

package/react-app-options.ts

@@ -1,45 +0,0 @@
-import { Bundler, DevServer } from '@teambit/bundler';
-import { DeployContext } from '@teambit/application';
-
-export type ReactAppOptions = {
-  /**
-   * name of the application.
-   */
-  name: string;
-
-  /**
-   * path to entry files of the application.
-   */
-  entry: string[];
-
-  /**
-   * use server-side rendering for the app.
-   */
-  ssr?: boolean;
-
-  /**
-   * instance of bundler to use.
-   */
-  bundler?: Bundler;
-
-  /**
-   * instance of dev server to use.
-   */
-  devServer?: DevServer;
-
-  /**
-   * deploy function.
-   */
-  deploy?: (context: DeployContext) => Promise<void>;
-
-  /**
-   * prerender routes of application (will create static file for the route)
-   * e.g ['/plugins', '/learn', '/docs/quick-start]
-   */
-  prerenderRoutes?: string[];
-
-  /**
-   * ranges of ports to use to run the app server.
-   */
-  portRange?: number[];
-};

package/react.app-type.ts

@@ -1,19 +0,0 @@
-import { ApplicationType } from '@teambit/application';
-import { ReactEnv } from './react.env';
-import { ReactAppOptions } from './react-app-options';
-import { ReactApp } from './react.application';
-
-export class ReactAppType implements ApplicationType<ReactAppOptions> {
-  constructor(readonly name: string, private reactEnv: ReactEnv) {}
-
-  createApp(options: ReactAppOptions) {
-    return new ReactApp(
-      options.name,
-      options.entry,
-      options.portRange || [3000, 4000],
-      this.reactEnv,
-      options.deploy,
-      options.prerenderRoutes
-    );
-  }
-}

package/react.application.ts

@@ -1,96 +0,0 @@
-import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';
-import { join, basename } from 'path';
-import { Capsule } from '@teambit/isolator';
-import { Application, AppContext, DeployContext } from '@teambit/application';
-import { BuildContext } from '@teambit/builder';
-import { Bundler, BundlerContext, DevServerContext } from '@teambit/bundler';
-import { Port } from '@teambit/toolbox.network.get-port';
-import { ReactEnv } from './react.env';
-
-export class ReactApp implements Application {
-  constructor(
-    readonly name: string,
-    readonly entry: string[],
-    readonly portRange: number[],
-    private reactEnv: ReactEnv,
-    readonly deploy?: (context: DeployContext) => Promise<void>,
-    readonly prerenderRoutes?: string[]
-  ) {}
-
-  applicationType = 'react';
-
-  async run(context: AppContext): Promise<number> {
-    const devServerContext = this.getDevServerContext(context);
-    const devServer = this.reactEnv.getDevServer(devServerContext, [
-      (configMutator) => {
-        // configMutator.addTopLevel('output', { publicPath: `/public/${this.name}` });
-        configMutator.addTopLevel('devServer', {
-          historyApiFallback: {
-            index: '/index.html',
-            disableDotRule: true,
-          },
-        });
-
-        if (!configMutator.raw.output) configMutator.raw.output = {};
-        configMutator.raw.output.publicPath = '/';
-
-        return configMutator;
-      },
-    ]);
-    const [from, to] = this.portRange;
-    const port = await Port.getPort(from, to);
-    await devServer.listen(port);
-    return port;
-  }
-
-  async build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext> {
-    const reactEnv: ReactEnv = context.env;
-    const publicDir = join('applications', this.name, 'build');
-    const outputPath = join(appCapsule.path, publicDir);
-    const { distDir } = reactEnv.getCompiler();
-    const entries = this.entry.map((entry) => require.resolve(`${appCapsule.path}/${distDir}/${basename(entry)}`));
-    const bundlerContext: BundlerContext = Object.assign(context, {
-      targets: [
-        {
-          components: [appCapsule?.component],
-          entries,
-          outputPath,
-        },
-      ],
-      entry: [],
-      rootPath: '/',
-    });
-    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [
-      (configMutator) => {
-        configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });
-        configMutator.addPlugin(
-          new PrerenderSPAPlugin({
-            staticDir: join(outputPath, 'public'),
-            routes: this.prerenderRoutes,
-            postProcess(renderedRoute) {
-              renderedRoute.outputPath = join(outputPath, 'public', `${renderedRoute.originalRoute}.html`);
-              return renderedRoute;
-            },
-          })
-        );
-        return configMutator;
-      },
-    ]);
-    await bundler.run();
-    const deployContext = Object.assign(context, {
-      applicationType: this.applicationType,
-      aspectId,
-      publicDir: join(appCapsule.path, publicDir, 'public'),
-    });
-    return deployContext;
-  }
-
-  private getDevServerContext(context: AppContext): DevServerContext {
-    return Object.assign(context, {
-      entry: this.entry,
-      rootPath: '',
-      publicPath: `public/${this.name}`,
-      title: this.name,
-    });
-  }
-}

package/react.aspect.ts

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

package/react.composition.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const Logo = () => (
-  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>
-    <img style={{ width: 70 }} src="https://static.bit.dev/brands/logo-react.svg" />
-  </div>
-);

package/react.docs.mdx

@@ -1,8 +0,0 @@
----
-description: A Bit development environment for React Components
-labels: ['react', 'environment', 'env', 'aspect', 'extension']
----
-
-import { ReactAspect } from '@teambit/react.aspect-docs.react';
-
-<ReactAspect />

package/react.env.ts

@@ -1,363 +0,0 @@
-import ts, { TsConfigSourceFile } from 'typescript';
-import { tmpdir } from 'os';
-import { Component } from '@teambit/component';
-import { ComponentUrl } from '@teambit/component.modules.component-url';
-import { BuildTask } from '@teambit/builder';
-import { merge } from 'lodash';
-import { Bundler, BundlerContext, DevServer, DevServerContext } from '@teambit/bundler';
-import { CompilerMain } from '@teambit/compiler';
-import {
-  BuilderEnv,
-  CompilerEnv,
-  DependenciesEnv,
-  DevEnv,
-  LinterEnv,
-  PackageEnv,
-  TesterEnv,
-  FormatterEnv,
-  PipeServiceModifier,
-  PipeServiceModifiersMap,
-} from '@teambit/envs';
-import { JestMain } from '@teambit/jest';
-import { PkgMain } from '@teambit/pkg';
-import { Tester, TesterMain } from '@teambit/tester';
-import { TsConfigTransformer, TypescriptMain } from '@teambit/typescript';
-import type { TypeScriptCompilerOptions } from '@teambit/typescript';
-import { WebpackConfigTransformer, WebpackMain } from '@teambit/webpack';
-import { Workspace } from '@teambit/workspace';
-import { ESLintMain, EslintConfigTransformer } from '@teambit/eslint';
-import { PrettierConfigTransformer, PrettierMain } from '@teambit/prettier';
-import { Linter, LinterContext } from '@teambit/linter';
-import { Formatter, FormatterContext } from '@teambit/formatter';
-import { pathNormalizeToLinux } from '@teambit/legacy/dist/utils';
-import type { ComponentMeta } from '@teambit/react.babel.bit-react-transformer';
-import { SchemaExtractor } from '@teambit/schema';
-import { join, resolve } from 'path';
-import { outputFileSync } from 'fs-extra';
-import { Configuration } from 'webpack';
-// Makes sure the @teambit/react.ui.docs-app is a dependency
-// TODO: remove this import once we can set policy from component to component with workspace version. Then set it via the component.json
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { ReactMainConfig } from './react.main.runtime';
-import { ReactAspect } from './react.aspect';
-
-// webpack configs for both components and envs
-import basePreviewConfigFactory from './webpack/webpack.config.base';
-import basePreviewProdConfigFactory from './webpack/webpack.config.base.prod';
-
-// webpack configs for envs only
-// import devPreviewConfigFactory from './webpack/webpack.config.preview.dev';
-import envPreviewDevConfigFactory from './webpack/webpack.config.env.dev';
-
-// webpack configs for components only
-import componentPreviewProdConfigFactory from './webpack/webpack.config.component.prod';
-import componentPreviewDevConfigFactory from './webpack/webpack.config.component.dev';
-
-export const AspectEnvType = 'react';
-const defaultTsConfig = require('./typescript/tsconfig.json');
-const buildTsConfig = require('./typescript/tsconfig.build.json');
-const eslintConfig = require('./eslint/eslintrc');
-const prettierConfig = require('./prettier/prettier.config.js');
-
-// TODO: move to be taken from the key mode of compiler context
-type CompilerMode = 'build' | 'dev';
-
-type GetBuildPipeModifiers = PipeServiceModifiersMap & {
-  tsModifier?: PipeServiceModifier;
-};
-
-/**
- * a component environment built for [React](https://reactjs.org) .
- */
-export class ReactEnv
-  implements TesterEnv, CompilerEnv, LinterEnv, DevEnv, BuilderEnv, DependenciesEnv, PackageEnv, FormatterEnv
-{
-  constructor(
-    /**
-     * jest extension
-     */
-    private jestAspect: JestMain,
-
-    /**
-     * typescript extension.
-     */
-    private tsAspect: TypescriptMain,
-
-    /**
-     * compiler extension.
-     */
-    private compiler: CompilerMain,
-
-    /**
-     * webpack extension.
-     */
-    private webpack: WebpackMain,
-
-    /**
-     * workspace extension.
-     */
-    private workspace: Workspace,
-
-    /**
-     * pkg extension.
-     */
-    private pkg: PkgMain,
-
-    /**
-     * tester extension
-     */
-    private tester: TesterMain,
-
-    private config: ReactMainConfig,
-
-    private eslint: ESLintMain,
-
-    private prettier: PrettierMain
-  ) {}
-
-  getTsConfig(targetTsConfig?: TsConfigSourceFile): TsConfigSourceFile {
-    return targetTsConfig ? merge({}, defaultTsConfig, targetTsConfig) : defaultTsConfig;
-  }
-
-  getBuildTsConfig(targetTsConfig?: TsConfigSourceFile): TsConfigSourceFile {
-    return targetTsConfig ? merge({}, buildTsConfig, targetTsConfig) : buildTsConfig;
-  }
-
-  /**
-   * returns a component tester.
-   */
-  getTester(jestConfigPath: string, jestModulePath?: string): Tester {
-    const config = jestConfigPath || require.resolve('./jest/jest.config');
-    return this.jestAspect.createTester(config, jestModulePath || require.resolve('jest'));
-  }
-
-  private getTsCompilerOptions(mode: CompilerMode = 'dev'): TypeScriptCompilerOptions {
-    const tsconfig = mode === 'dev' ? defaultTsConfig : buildTsConfig;
-    const pathToSource = pathNormalizeToLinux(__dirname).replace('/dist/', '/src/');
-    const compileJs = true;
-    const compileJsx = true;
-    return {
-      tsconfig,
-      // TODO: @david please remove this line and refactor to be something that makes sense.
-      types: [resolve(pathToSource, './typescript/style.d.ts'), resolve(pathToSource, './typescript/asset.d.ts')],
-      compileJs,
-      compileJsx,
-    };
-  }
-
-  private getTsCompiler(mode: CompilerMode = 'dev', transformers: TsConfigTransformer[] = [], tsModule = ts) {
-    const tsCompileOptions = this.getTsCompilerOptions(mode);
-    return this.tsAspect.createCompiler(tsCompileOptions, transformers, tsModule);
-  }
-
-  getCompiler(transformers: TsConfigTransformer[] = [], tsModule = ts) {
-    return this.getTsCompiler('dev', transformers, tsModule);
-  }
-
-  /**
-   * returns and configures the component linter.
-   */
-  getLinter(context: LinterContext, transformers: EslintConfigTransformer[] = []): Linter {
-    const defaultTransformer: EslintConfigTransformer = (configMutator) => {
-      configMutator.addExtensionTypes(['.md', '.mdx']);
-      return configMutator;
-    };
-
-    const allTransformers = [defaultTransformer, ...transformers];
-
-    return this.eslint.createLinter(
-      context,
-      {
-        config: eslintConfig,
-        // resolve all plugins from the react environment.
-        pluginPath: __dirname,
-      },
-      allTransformers
-    );
-  }
-
-  /**
-   * returns and configures the component formatter.
-   */
-  getFormatter(context: FormatterContext, transformers: PrettierConfigTransformer[] = []): Formatter {
-    return this.prettier.createFormatter(
-      context,
-      {
-        config: prettierConfig,
-      },
-      transformers
-    );
-  }
-
-  private getFileMap(components: Component[], local = false) {
-    return components.reduce<{ [key: string]: ComponentMeta }>((index, component: Component) => {
-      component.state.filesystem.files.forEach((file) => {
-        index[file.path] = {
-          id: component.id.toString(),
-          homepage: local ? `/${component.id.fullName}` : ComponentUrl.toUrl(component.id),
-        };
-      });
-
-      return index;
-    }, {});
-  }
-
-  private writeFileMap(components: Component[], local?: boolean) {
-    const fileMap = this.getFileMap(components, local);
-    const path = join(tmpdir(), `${Math.random().toString(36).substr(2, 9)}.json`);
-    outputFileSync(path, JSON.stringify(fileMap));
-    return path;
-  }
-
-  /**
-   * required for `bit start`
-   */
-  getDevEnvId(id?: string) {
-    if (typeof id !== 'string') return ReactAspect.id;
-    return id || ReactAspect.id;
-  }
-
-  /**
-   * get a schema generator instance configured with the correct tsconfig.
-   */
-  getSchemaExtractor(tsconfig: TsConfigSourceFile): SchemaExtractor {
-    return this.tsAspect.createSchemaExtractor(this.getTsConfig(tsconfig));
-  }
-
-  /**
-   * returns and configures the React component dev server.
-   * required for `bit start`
-   */
-  getDevServer(context: DevServerContext, transformers: WebpackConfigTransformer[] = []): DevServer {
-    const baseConfig = basePreviewConfigFactory(false);
-    const envDevConfig = envPreviewDevConfigFactory(context.id);
-    const componentsDirs = this.getComponentsModulesDirectories(context.components);
-    // const fileMapPath = this.writeFileMap(context.components, true);
-    // const componentDevConfig = componentPreviewDevConfigFactory(fileMapPath, this.workspace.path);
-    // const componentDevConfig = componentPreviewDevConfigFactory(this.workspace.path, context.id);
-    const componentDevConfig = componentPreviewDevConfigFactory(this.workspace.path, context.id, componentsDirs);
-
-    const defaultTransformer: WebpackConfigTransformer = (configMutator) => {
-      const merged = configMutator.merge([baseConfig, envDevConfig, componentDevConfig]);
-      return merged;
-    };
-
-    return this.webpack.createDevServer(context, [defaultTransformer, ...transformers]);
-  }
-
-  async getBundler(context: BundlerContext, transformers: WebpackConfigTransformer[] = []): Promise<Bundler> {
-    // const fileMapPath = this.writeFileMap(context.components);
-    const baseConfig = basePreviewConfigFactory(true);
-    const baseProdConfig = basePreviewProdConfigFactory();
-    // const componentProdConfig = componentPreviewProdConfigFactory(fileMapPath);
-    const componentProdConfig = componentPreviewProdConfigFactory();
-
-    const defaultTransformer: WebpackConfigTransformer = (configMutator) => {
-      const merged = configMutator.merge([baseConfig, baseProdConfig, componentProdConfig]);
-      return merged;
-    };
-
-    return this.webpack.createPreviewBundler(context, [defaultTransformer, ...transformers]);
-  }
-
-  private getComponentsModulesDirectories(components: Component[]): string[] {
-    const dirs = components.map((component) => {
-      return this.pkg.getModulePath(component, { absPath: true });
-    });
-    return dirs;
-  }
-
-  private getEntriesFromWebpackConfig(config?: Configuration): string[] {
-    if (!config || !config.entry) {
-      return [];
-    }
-    if (typeof config.entry === 'string') {
-      return [config.entry];
-    }
-    if (Array.isArray(config.entry)) {
-      let entries: string[] = [];
-      entries = config.entry.reduce((acc, entry) => {
-        if (typeof entry === 'string') {
-          acc.push(entry);
-        }
-        return acc;
-      }, entries);
-      return entries;
-    }
-    return [];
-  }
-
-  /**
-   * returns a path to a docs template.
-   */
-  getDocsTemplate() {
-    return require.resolve('@teambit/react.ui.docs-app');
-  }
-
-  icon = 'https://static.bit.dev/extensions-icons/react.svg';
-
-  /**
-   * returns a paths to a function which mounts a given component to DOM
-   */
-  getMounter() {
-    return require.resolve('./mount');
-  }
-
-  /**
-   * define the package json properties to add to each component.
-   */
-  getPackageJsonProps() {
-    return this.tsAspect.getPackageJsonProps();
-  }
-
-  /**
-   * adds dependencies to all configured components.
-   */
-  getDependencies() {
-    return {
-      dependencies: {
-        react: '-',
-        'react-dom': '-',
-        'core-js': '^3.0.0',
-      },
-      // TODO: add this only if using ts
-      devDependencies: {
-        react: '-',
-        'react-dom': '-',
-        '@types/mocha': '-',
-        '@types/node': '12.20.4',
-        '@types/react': '^17.0.8',
-        '@types/react-dom': '^17.0.5',
-        '@types/jest': '^26.0.0',
-        // '@types/react-router-dom': '^5.0.0', // TODO - should not be here (!)
-        // This is added as dev dep since our jest file transformer uses babel plugins that require this to be installed
-        '@babel/runtime': '7.12.18',
-        '@types/testing-library__jest-dom': '5.9.5',
-      },
-      peerDependencies: {
-        react: '^16.8.0 || ^17.0.0',
-        'react-dom': '^16.8.0 || ^17.0.0',
-      },
-    };
-  }
-
-  /**
-   * returns the component build pipeline.
-   */
-  getBuildPipe(modifiers: GetBuildPipeModifiers = {}): BuildTask[] {
-    const transformers: TsConfigTransformer[] =
-      (modifiers?.tsModifier?.transformers as any as TsConfigTransformer[]) || [];
-    return [this.getCompilerTask(transformers, modifiers?.tsModifier?.module || ts), this.tester.task];
-  }
-
-  private getCompilerTask(transformers: TsConfigTransformer[] = [], tsModule = ts) {
-    const tsCompiler = this.getTsCompiler('build', transformers, tsModule);
-    return this.compiler.createTask('TSCompiler', tsCompiler);
-  }
-
-  async __getDescriptor() {
-    return {
-      type: AspectEnvType,
-    };
-  }
-}

package/react.graphql.ts

@@ -1,52 +0,0 @@
-import { ComponentFactory } from '@teambit/component';
-import gql from 'graphql-tag';
-
-import { ReactMain } from './react.main.runtime';
-
-export function reactSchema(react: ReactMain) {
-  return {
-    typeDefs: gql`
-      extend type ComponentHost {
-        getDocs(id: String!): ReactDocs
-      }
-
-      type ReactDocs {
-        abstract: String
-        filePath: String
-        properties: [Property]
-      }
-
-      type Property {
-        name: String
-        description: String
-        required: Boolean
-        type: String
-        defaultValue: DefaultValue
-      }
-
-      type DefaultValue {
-        value: String
-        computed: Boolean
-      }
-    `,
-    resolvers: {
-      ComponentHost: {
-        getDocs: async (host: ComponentFactory, { id }: { id: string }) => {
-          const componentId = await host.resolveComponentId(id);
-          const component = await host.get(componentId);
-          const empty = {
-            abstract: '',
-            filePath: '',
-            properties: [],
-          };
-
-          if (!component) return empty;
-          const docs = react.getDocs(component);
-          if (!docs) return empty;
-
-          return docs;
-        },
-      },
-    },
-  };
-}