@teambit/react 0.0.704 → 0.0.705

package/apps/web/plugins/prerender.ts

@@ -1,13 +1,18 @@
 import { join } from 'path';
 import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';
+import { ReactAppPrerenderOptions } from '../react-app-options';
 
-export const prerenderSPAPlugin = (prerenderRoutes: string[], staticDir: string) => {
+export const prerenderSPAPlugin = (prerender: ReactAppPrerenderOptions, staticDir: string) => {
   return new PrerenderSPAPlugin({
     staticDir,
-    routes: prerenderRoutes,
+    routes: prerender?.routes,
     postProcess(renderedRoute: any) {
+      if (prerender.postProcess) return prerender.postProcess(renderedRoute, staticDir);
       renderedRoute.outputPath = join(staticDir, `${renderedRoute.originalRoute}.html`);
       return renderedRoute;
     },
+    server: {
+      ...prerender?.server,
+    },
   });
 };

package/apps/web/react-app-options.ts

@@ -3,6 +3,23 @@ import { WebpackConfigTransformer } from '@teambit/webpack';
 
 import { ReactDeployContext } from './deploy-context';
 
+export type ReactAppPrerenderOptions = {
+  /**
+   * routes to prerender
+   */
+  routes: string[];
+  /**
+   * the proxy server you want the prerender headless browser to run on
+   */
+
+  server?: { proxy: { [key: string]: { target: 'http://localhost:8000/'; pathRewrite: { [key: string]: string } } } };
+
+  /**
+   * Post processing of the prerendered html. This is useful for adding meta tags to the html or changing the file name.
+   */
+  postProcess?: (prerenderRoute: string, staticDir: string) => string;
+};
+
 export type ReactAppOptions = {
   /**
    * name of the application.
@@ -36,11 +53,11 @@ export type ReactAppOptions = {
 
   /**
    * decide whether to prerender your app. accepts an array of routes. if none, prerender would not apply.
-   * e.g ['/plugins', '/learn', '/docs/quick-start]
+   *  e.g ['/plugins', '/learn', '/docs/quick-start]
+   * You can also pass a configuration for the proxy, please refer here: https://github.com/webpack/docs/wiki/webpack-dev-server#proxy
+   *
    */
-  prerender?: {
-    routes?: string[];
-  };
+  prerender?: ReactAppPrerenderOptions;
 
   /**
    * deploy function.

package/apps/web/react.app-type.ts

@@ -12,7 +12,7 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
       options.entry,
       options.portRange || [3000, 4000],
       this.reactEnv,
-      options.prerender?.routes,
+      options.prerender,
       options.bundler,
       options.devServer,
       options.webpackTransformers,

package/apps/web/react.application.ts

@@ -8,6 +8,7 @@ import { WebpackConfigTransformer } from '@teambit/webpack';
 import { ReactEnv } from '../../react.env';
 import { prerenderSPAPlugin } from './plugins';
 import { ReactAppBuildResult } from './react-build-result';
+import { ReactAppPrerenderOptions } from './react-app-options';
 import { html } from '../../webpack';
 import { ReactDeployContext } from '.';
 
@@ -17,7 +18,7 @@ export class ReactApp implements Application {
     readonly entry: string[],
     readonly portRange: number[],
     private reactEnv: ReactEnv,
-    readonly prerenderRoutes?: string[],
+    readonly prerender?: ReactAppPrerenderOptions,
     readonly bundler?: Bundler,
     readonly devServer?: DevServer,
     readonly transformers?: WebpackConfigTransformer[],
@@ -102,28 +103,73 @@ export class ReactApp implements Application {
 
     const defaultTransformer: WebpackConfigTransformer = (configMutator) => {
       const config = configMutator.addTopLevel('output', { path: staticDir, publicPath: `/` });
-      if (this.prerenderRoutes) config.addPlugin(prerenderSPAPlugin(this.prerenderRoutes, staticDir));
+      if (this.prerender) config.addPlugin(prerenderSPAPlugin(this.prerender, staticDir));
       if (config.raw.optimization?.minimizer) {
         remove(config.raw.optimization?.minimizer, (minimizer) => {
           return minimizer.constructor.name === 'TerserPlugin';
         });
-        config.raw.optimization?.minimizer.push(
-          new TerserPlugin({
-            minify: TerserPlugin.esbuildMinify,
-            // `terserOptions` options will be passed to `esbuild`
-            // Link to options - https://esbuild.github.io/api/#minify
-            terserOptions: {
-              minify: true,
-            },
-          })
-        );
+
+        config.raw.optimization?.minimizer.push(this.getESBuildConfig());
       }
+
       return config;
     };
     const transformers = [defaultTransformer, ...(this.transformers ?? [])];
     const bundler: Bundler = await reactEnv.getBundler(bundlerContext, transformers);
     return bundler;
   }
+  private getESBuildConfig = (isPrerendering = this.prerender) => {
+    // We don't want to use esbuild in case of prerendering since the headless browser puppeteer doesn't support
+    // the output of esbuild
+
+    if (isPrerendering) {
+      return new TerserPlugin({
+        extractComments: false,
+        terserOptions: {
+          parse: {
+            // We want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minification steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending further investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          output: {
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
+          },
+        },
+      });
+    }
+    return new TerserPlugin({
+      minify: TerserPlugin.esbuildMinify,
+      // `terserOptions` options will be passed to `esbuild`
+      // Link to options - https://esbuild.github.io/api/#minify
+      terserOptions: {
+        minify: true,
+      },
+    });
+  };
 
   private getPublicDir() {
     return join(this.applicationType, this.name);