@teambit/react 0.0.555 → 0.0.559

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.555",
+  "version": "0.0.559",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.555"
+    "version": "0.0.559"
   },
   "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.559",
+    "@teambit/react.ui.error-fallback": "0.0.90",
+    "@teambit/react.ui.loader-fallback": "0.0.68",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.143",
     "@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.201",
+    "@teambit/bundler": "0.0.559",
+    "@teambit/builder": "0.0.559",
+    "@teambit/isolator": "0.0.559",
+    "@teambit/toolbox.network.get-port": "0.0.93",
+    "@teambit/compiler": "0.0.559",
+    "@teambit/component.modules.component-url": "0.0.100",
+    "@teambit/component": "0.0.559",
+    "@teambit/envs": "0.0.559",
+    "@teambit/eslint": "0.0.559",
+    "@teambit/formatter": "0.0.110",
+    "@teambit/jest": "0.0.559",
+    "@teambit/linter": "0.0.559",
+    "@teambit/pkg": "0.0.559",
+    "@teambit/prettier": "0.0.110",
+    "@teambit/react.babel.bit-react-transformer": "0.0.473",
+    "@teambit/schema": "0.0.559",
+    "@teambit/tester": "0.0.559",
+    "@teambit/typescript": "0.0.559",
+    "@teambit/webpack": "0.0.559",
+    "@teambit/workspace": "0.0.559",
+    "@teambit/cli": "0.0.389",
+    "@teambit/dependency-resolver": "0.0.559",
+    "@teambit/generator": "0.0.559",
+    "@teambit/graphql": "0.0.559",
+    "@teambit/react.ui.highlighter-provider": "0.0.153",
+    "@teambit/compositions": "0.0.559",
+    "@teambit/ui": "0.0.559",
+    "@teambit/react.eslint-config-bit-react": "0.0.466",
+    "@teambit/mdx.modules.mdx-loader": "0.0.467",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.83",
+    "@teambit/webpack.modules.style-regexps": "0.0.112",
+    "@teambit/component-id": "0.0.379",
+    "@teambit/config": "0.0.400"
   },
   "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.108"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.172",
+    "@teambit/legacy": "1.0.175",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -198,11 +198,26 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.172",
+        "@teambit/legacy": "1.0.175",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "**/*.md",
+    "**/*.mdx",
+    "**/*.js",
+    "**/*.json",
+    "**/*.sass",
+    "**/*.scss",
+    "**/*.less",
+    "**/*.css",
+    "**/*.css",
+    "**/*.jpeg",
+    "**/*.gif"
+  ],
   "private": false
 }

package/tsconfig.json

@@ -15,9 +15,9 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "outDir": "dist",
     "composite": true,
     "emitDeclarationOnly": true,
+    "outDir": "dist",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,

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