@teambit/react 0.0.690 → 0.0.693

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

@@ -51,4 +51,9 @@ export type ReactAppOptions = {
    * ranges of ports to use to run the app server.
    */
   portRange?: number[];
+
+  /**
+   * favicon for the app. You can pass an abs path (using require.resolve()) or a url.
+   */
+  favicon?: string;
 };

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

@@ -16,7 +16,8 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
       options.bundler,
       options.devServer,
       options.webpackTransformers,
-      options.deploy
+      options.deploy,
+      options.favicon
     );
   }
 }

package/apps/web/react.application.ts

@@ -2,6 +2,8 @@ import { join, basename } from 'path';
 import { Application, AppContext, AppBuildContext } from '@teambit/application';
 import { Bundler, DevServer, BundlerContext, DevServerContext, BundlerHtmlConfig } from '@teambit/bundler';
 import { Port } from '@teambit/toolbox.network.get-port';
+import { remove } from 'lodash';
+import TerserPlugin from 'terser-webpack-plugin';
 import { WebpackConfigTransformer } from '@teambit/webpack';
 import { ReactEnv } from '../../react.env';
 import { prerenderSPAPlugin } from './plugins';
@@ -19,9 +21,9 @@ export class ReactApp implements Application {
     readonly bundler?: Bundler,
     readonly devServer?: DevServer,
     readonly transformers?: WebpackConfigTransformer[],
-    readonly deploy?: (context: ReactDeployContext) => Promise<void>
+    readonly deploy?: (context: ReactDeployContext) => Promise<void>,
+    readonly favicon?: string
   ) {}
-
   readonly applicationType = 'react-common-js';
   readonly dir = 'public';
   async run(context: AppContext): Promise<number> {
@@ -57,6 +59,7 @@ export class ReactApp implements Application {
         title: context.name,
         templateContent: html(context.name),
         minify: false,
+        favicon: this.favicon,
         // filename: ''.html`,
       },
     ];
@@ -100,6 +103,21 @@ 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 (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,
+            },
+          })
+        );
+      }
       return config;
     };
     const transformers = [defaultTransformer, ...(this.transformers ?? [])];
@@ -117,6 +135,7 @@ export class ReactApp implements Application {
       rootPath: '',
       publicPath: `public/${this.name}`,
       title: this.name,
+      favicon: this.favicon,
     });
   }
 }