@teambit/react 0.0.555 → 0.0.556

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.555",
+  "version": "0.0.556",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.555"
+    "version": "0.0.556"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -79,46 +79,46 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.354",
-    "@teambit/preview": "0.0.555",
-    "@teambit/react.ui.error-fallback": "0.0.87",
-    "@teambit/react.ui.loader-fallback": "0.0.65",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.140",
+    "@teambit/preview": "0.0.556",
+    "@teambit/react.ui.error-fallback": "0.0.88",
+    "@teambit/react.ui.loader-fallback": "0.0.66",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.141",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/application": "0.0.197",
-    "@teambit/bundler": "0.0.555",
-    "@teambit/builder": "0.0.555",
-    "@teambit/isolator": "0.0.555",
-    "@teambit/toolbox.network.get-port": "0.0.90",
-    "@teambit/compiler": "0.0.555",
-    "@teambit/component.modules.component-url": "0.0.97",
-    "@teambit/component": "0.0.555",
-    "@teambit/envs": "0.0.555",
-    "@teambit/eslint": "0.0.555",
-    "@teambit/formatter": "0.0.106",
-    "@teambit/jest": "0.0.555",
-    "@teambit/linter": "0.0.555",
-    "@teambit/pkg": "0.0.555",
-    "@teambit/prettier": "0.0.106",
-    "@teambit/react.babel.bit-react-transformer": "0.0.470",
-    "@teambit/schema": "0.0.555",
-    "@teambit/tester": "0.0.555",
-    "@teambit/typescript": "0.0.555",
-    "@teambit/webpack": "0.0.555",
-    "@teambit/workspace": "0.0.555",
-    "@teambit/cli": "0.0.386",
-    "@teambit/dependency-resolver": "0.0.555",
-    "@teambit/generator": "0.0.555",
-    "@teambit/graphql": "0.0.555",
-    "@teambit/react.ui.highlighter-provider": "0.0.150",
-    "@teambit/compositions": "0.0.555",
-    "@teambit/ui": "0.0.555",
-    "@teambit/react.eslint-config-bit-react": "0.0.463",
-    "@teambit/mdx.modules.mdx-loader": "0.0.464",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.80",
-    "@teambit/webpack.modules.style-regexps": "0.0.109",
-    "@teambit/component-id": "0.0.376",
-    "@teambit/config": "0.0.397"
+    "@teambit/application": "0.0.198",
+    "@teambit/bundler": "0.0.556",
+    "@teambit/builder": "0.0.556",
+    "@teambit/isolator": "0.0.556",
+    "@teambit/toolbox.network.get-port": "0.0.91",
+    "@teambit/compiler": "0.0.556",
+    "@teambit/component.modules.component-url": "0.0.98",
+    "@teambit/component": "0.0.556",
+    "@teambit/envs": "0.0.556",
+    "@teambit/eslint": "0.0.556",
+    "@teambit/formatter": "0.0.107",
+    "@teambit/jest": "0.0.556",
+    "@teambit/linter": "0.0.556",
+    "@teambit/pkg": "0.0.556",
+    "@teambit/prettier": "0.0.107",
+    "@teambit/react.babel.bit-react-transformer": "0.0.471",
+    "@teambit/schema": "0.0.556",
+    "@teambit/tester": "0.0.556",
+    "@teambit/typescript": "0.0.556",
+    "@teambit/webpack": "0.0.556",
+    "@teambit/workspace": "0.0.556",
+    "@teambit/cli": "0.0.387",
+    "@teambit/dependency-resolver": "0.0.556",
+    "@teambit/generator": "0.0.556",
+    "@teambit/graphql": "0.0.556",
+    "@teambit/react.ui.highlighter-provider": "0.0.151",
+    "@teambit/compositions": "0.0.556",
+    "@teambit/ui": "0.0.556",
+    "@teambit/react.eslint-config-bit-react": "0.0.464",
+    "@teambit/mdx.modules.mdx-loader": "0.0.465",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.81",
+    "@teambit/webpack.modules.style-regexps": "0.0.110",
+    "@teambit/component-id": "0.0.377",
+    "@teambit/config": "0.0.398"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -133,10 +133,10 @@
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
-    "@teambit/react.aspect-docs.react": "0.0.105"
+    "@teambit/react.aspect-docs.react": "0.0.106"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.172",
+    "@teambit/legacy": "1.0.173",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -198,11 +198,17 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.172",
+        "@teambit/legacy": "1.0.173",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "README.md",
+    "README.mdx"
+  ],
   "private": false
 }

package/compositions-app.tsx

@@ -1,31 +0,0 @@
-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 { LoaderFallback } from '@teambit/react.ui.loader-fallback';
-import { ErrorBoundary } from 'react-error-boundary';
-import { ReactAspect } from './react.aspect';
-
-// hide scrollbars so they won't be visible in the preview at the component card (and it's ok not to show them in the compositions page)
-const hideScrollbars = 'body::-webkit-scrollbar {display: none;}';
-
-export function CompositionsApp({
-  Composition,
-  previewContext,
-}: {
-  Composition?: React.ComponentType;
-  previewContext: RenderingContext;
-}) {
-  const reactContext = previewContext.get(ReactAspect.id);
-  const providers = reactContext?.providers || [];
-
-  return (
-    <ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[Composition]}>
-      <Composer components={providers}>
-        <style>{hideScrollbars}</style>
-        <LoaderFallback Target={Composition} DefaultComponent={StandaloneNotFoundPage} />
-      </Composer>
-    </ErrorBoundary>
-  );
-}

package/eslint/eslintrc.js

@@ -1,12 +0,0 @@
-// Using object
-import '@teambit/react.eslint-config-bit-react';
-
-module.exports = {
-  extends: [require.resolve('@teambit/react.eslint-config-bit-react')],
-  parserOptions: {
-    // parser: require.resolve('@typescript-eslint/parser'),
-    // createDefaultProgram: true,
-    // resolve the env tsconfig.
-    project: require.resolve('../typescript/tsconfig.json'),
-  },
-};

package/highlighter-widget.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { OptionButton } from '@teambit/design.ui.input.option-button';
-import { Tooltip } from '@teambit/design.ui.tooltip';
-import { usePreviewQueryParams } from '@teambit/compositions.ui.hooks.use-composition';
-
-const PARAM_NAME = 'highlighter';
-
-export function HighlighterWidget() {
-  const [active, setActive] = usePreviewQueryParams(PARAM_NAME);
-
-  return (
-    <Tooltip content="Component Highlighter (beta)">
-      {/* tooltip requires child with ref */}
-      <span>
-        <OptionButton icon="highlighter-toggle" onClick={() => setActive(!active)} active={active} />
-      </span>
-    </Tooltip>
-  );
-}

package/index.ts

@@ -1,9 +0,0 @@
-export type { ReactMain, UseWebpackModifiers, UseTypescriptModifiers } from './react.main.runtime';
-export type { ReactPreview } from './react.preview.runtime';
-export type { ReactEnv } from './react.env';
-export type { ReactAppOptions } from './react-app-options';
-// Re-export it to indicate for people that extends the react env that we are using it
-// Commented - make errors in safari - SyntaxError: Invalid regular expression: invalid group specifier name
-// export * as styleRegexps from '@teambit/modules.style-regexps';
-
-export { ReactAspect, ReactAspect as default } from './react.aspect';

package/jest/css-transform.js

@@ -1,12 +0,0 @@
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/jest/file-transform.js

@@ -1,38 +0,0 @@
-const path = require('path');
-const camelcase = require('camelcase');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = camelcase(path.parse(filename).name, {
-        pascalCase: true,
-      });
-      const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};

package/jest/jest.config.js

@@ -1,30 +0,0 @@
-module.exports = {
-  // "roots": [
-  //   "<rootDir>/src"
-  // ],
-  // "collectCoverageFrom": [
-  //   "src/**/*.{js,jsx,ts,tsx}",
-  //   "!src/**/*.d.ts"
-  // ],
-  setupFiles: [require.resolve('react-app-polyfill/jsdom')],
-  setupFilesAfterEnv: [require.resolve('./setupTests.js')],
-  // "testMatch": [
-  // "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-  // "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-  // ],
-  testEnvironment: require.resolve('jest-environment-jsdom'),
-  transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': require.resolve('./transformer'),
-    '^.+\\.css$': require.resolve('./css-transform.js'),
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': require.resolve('./file-transform.js'),
-    // '^(?!.*\\.(svg|png|jpg|jpeg|gif|webp|woff|ttf|woff2)$)': require.resolve('./file-transform.js'),
-  },
-  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$', '^.+\\.module\\.(css|sass|scss)$'],
-  modulePaths: [],
-  moduleNameMapper: {
-    '^react-native$': require.resolve('react-native-web'),
-    '^.+\\.module\\.(css|sass|scss)$': require.resolve('identity-obj-proxy'),
-  },
-  moduleFileExtensions: ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'],
-  // watchPlugins: [require.resolve('jest-watch-typeahead/filename'), require.resolve('jest-watch-typeahead/testname')],
-};

package/jest/setupTests.js

@@ -1,7 +0,0 @@
-// add babel-polyfill.
-// require('babel-polyfill');
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-require('@testing-library/jest-dom/extend-expect');

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 />