@teambit/react 0.0.804 → 0.0.807

package/apps/web/compute-results.ts

@@ -3,15 +3,17 @@ import { ReactAppBuildResult } from './react-build-result';
 
 type resultsOptions = {
   publicDir: string;
+  ssrPublicDir?: string;
 };
 export async function computeResults(
   results: BundlerResult[],
-  { publicDir }: resultsOptions
+  { publicDir, ssrPublicDir }: resultsOptions
 ): Promise<ReactAppBuildResult> {
   const result = results[0];
 
   return {
     publicDir,
+    ssrPublicDir,
     errors: result.errors,
     warnings: result.warnings,
   };

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

@@ -70,7 +70,7 @@ export type ReactAppOptions = {
   /**
    * path to entry files of the application.
    */
-  entry: string[] | (() => Promise<string[]>);
+  entry: string[] | ((path?: string) => Promise<string[]>);
 
   /**
    * path to server-rendered entrypoint of the app
@@ -82,6 +82,11 @@ export type ReactAppOptions = {
    */
   bundler?: Bundler;
 
+  /**
+   * instance of serverside bundler to use. default is Webpack.
+   */
+  ssrBundler?: Bundler;
+
   /**
    * instance of dev server to use. default is Webpack.
    */

package/apps/web/react-build-result.ts

@@ -6,4 +6,5 @@ export type ReactAppBuildResult = {
    * when using ssr, public dir is undefined.
    */
   publicDir?: string;
+  ssrPublicDir?: string;
 } & AppBuildResult;

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

@@ -16,6 +16,7 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
       this.reactEnv,
       options.prerender,
       options.bundler,
+      options.ssrBundler,
       options.devServer,
       options.webpackTransformers,
       options.deploy,

package/apps/web/react.application.ts

@@ -3,8 +3,7 @@ import { Application, AppContext, AppBuildContext, AppResult } from '@teambit/ap
 import type { Bundler, DevServer, BundlerContext, DevServerContext, BundlerHtmlConfig } from '@teambit/bundler';
 import { Port } from '@teambit/toolbox.network.get-port';
 import type { Logger } from '@teambit/logger';
-import { remove } from 'lodash';
-import TerserPlugin from 'terser-webpack-plugin';
+import compact from 'lodash.compact';
 import { WebpackConfigTransformer } from '@teambit/webpack';
 import { BitError } from '@teambit/bit-error';
 import { ReactEnv } from '../../react.env';
@@ -14,19 +13,20 @@ import { ReactAppPrerenderOptions } from './react-app-options';
 import { html } from '../../webpack';
 import { ReactDeployContext } from '.';
 import { computeResults } from './compute-results';
-import { clientConfig, ssrConfig, calcOutputPath } from './webpack/webpack.app.ssr.config';
-import { addDevServer, setOutput } from './webpack/mutators';
+import { clientConfig, ssrConfig, calcOutputPath, ssrBuildConfig, buildConfig } from './webpack/webpack.app.ssr.config';
+import { addDevServer, setOutput, replaceTerserPlugin } from './webpack/mutators';
 import { createExpressSsr, loadSsrApp, parseAssets } from './ssr/ssr-express';
 
 export class ReactApp implements Application {
   constructor(
     readonly name: string,
-    readonly entry: string[] | (() => Promise<string[]>),
+    readonly entry: string[] | ((path?: string) => Promise<string[]>),
     readonly ssr: string | (() => Promise<string>) | undefined,
     readonly portRange: [number, number],
     private reactEnv: ReactEnv,
     readonly prerender?: ReactAppPrerenderOptions,
     readonly bundler?: Bundler,
+    readonly ssrBundler?: Bundler,
     readonly devServer?: DevServer,
     readonly transformers: WebpackConfigTransformer[] = [],
     readonly deploy?: (context: ReactDeployContext) => Promise<void>,
@@ -35,6 +35,7 @@ export class ReactApp implements Application {
   ) {}
   readonly applicationType = 'react-common-js';
   readonly dir = 'public';
+  readonly ssrDir = 'ssr';
 
   async run(context: AppContext): Promise<number> {
     const [from, to] = this.portRange;
@@ -163,22 +164,71 @@ export class ReactApp implements Application {
     const bundler = await this.getBundler(context);
     const bundleResult = await bundler.run();
 
-    return computeResults(bundleResult, { publicDir: `${this.getPublicDir(context.artifactsDir)}/${this.dir}` });
+    if (this.ssr) {
+      const bunlder = await this.getSsrBundler(context);
+      await bunlder.run();
+    }
+
+    return computeResults(bundleResult, {
+      publicDir: `${this.getPublicDir(context.artifactsDir)}/${this.dir}`,
+      ssrPublicDir: this.ssr ? `${this.getPublicDir(context.artifactsDir)}/${this.ssrDir}` : undefined,
+    });
   }
 
   private getBundler(context: AppBuildContext) {
     if (this.bundler) return this.bundler;
     return this.getDefaultBundler(context);
   }
+
+  private getSsrBundler(context: AppBuildContext) {
+    if (this.ssrBundler) return this.ssrBundler;
+    return this.getDefaultSsrBundler(context);
+  }
+
   private async getDefaultBundler(context: AppBuildContext) {
     const { capsule } = context;
-    const reactEnv: ReactEnv = context.env as ReactEnv;
     const publicDir = this.getPublicDir(context.artifactsDir);
     const outputPath = join(capsule.path, publicDir);
+
+    const bundlerContext = await this.getBuildContext(context, { outputPath });
+    const transformers: WebpackConfigTransformer[] = compact([
+      (configMutator) => configMutator.merge(buildConfig({ outputPath: join(outputPath, this.dir) })),
+      (config) => {
+        if (this.prerender) config.addPlugin(prerenderPlugin(this.prerender));
+        return config;
+      },
+      replaceTerserPlugin({ prerender: !!this.prerender }),
+      ...this.transformers,
+    ]);
+
+    const reactEnv = context.env as ReactEnv;
+    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, transformers);
+    return bundler;
+  }
+
+  private async getDefaultSsrBundler(context: AppBuildContext) {
+    const { capsule } = context;
+    const publicDir = this.getPublicDir(context.artifactsDir);
+    const outputPath = join(capsule.path, publicDir);
+
+    const bundlerContext = await this.getBuildContext(context, { outputPath });
+    const transformers: WebpackConfigTransformer[] = compact([
+      (configMutator) => configMutator.merge(ssrBuildConfig({ outputPath: join(outputPath, this.ssrDir) })),
+      replaceTerserPlugin({ prerender: !!this.prerender }),
+      ...this.transformers,
+    ]);
+
+    const reactEnv = context.env as ReactEnv;
+    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, transformers);
+    return bundler;
+  }
+
+  private async getBuildContext(context: AppBuildContext, { outputPath }: { outputPath: string }) {
+    const { capsule } = context;
+    const reactEnv = context.env as ReactEnv;
     const { distDir } = reactEnv.getCompiler();
-    const targetEntries = Array.isArray(this.entry) ? this.entry : await this.entry();
+    const targetEntries = await this.getEntries(`${capsule.path}/${distDir}`);
     const entries = targetEntries.map((entry) => require.resolve(`${capsule.path}/${distDir}/${basename(entry)}`));
-    const staticDir = join(outputPath, this.dir);
 
     const bundlerContext: BundlerContext = Object.assign(context, {
       targets: [
@@ -199,87 +249,16 @@ export class ReactApp implements Application {
       },
     });
 
-    const defaultTransformer: WebpackConfigTransformer = (configMutator) => {
-      const config = configMutator.addTopLevel('output', {
-        path: staticDir,
-        publicPath: `/`,
-        filename: '[name].[chunkhash].js',
-      });
-      if (this.prerender) config.addPlugin(prerenderPlugin(this.prerender));
-      if (config.raw.optimization?.minimizer) {
-        remove(config.raw.optimization?.minimizer, (minimizer) => {
-          return minimizer.constructor.name === 'TerserPlugin';
-        });
-
-        config.raw.optimization?.minimizer.push(this.getESBuildConfig());
-      }
-
-      return config;
-    };
-    const transformers = [defaultTransformer, ...this.transformers];
-    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, transformers);
-    return bundler;
+    return bundlerContext;
   }
-  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(artifactsDir: string) {
     return join(artifactsDir, this.applicationType, this.name);
   }
 
-  async getEntries(): Promise<string[]> {
+  async getEntries(path?: string): Promise<string[]> {
     if (Array.isArray(this.entry)) return this.entry;
-    return this.entry();
+    return this.entry(path);
   }
 
   async getSsrEntries(): Promise<string[]> {

package/apps/web/webpack/mutators.ts

@@ -1,7 +1,10 @@
 import { WebpackConfigMutator } from '@teambit/webpack';
+import { remove } from 'lodash';
+import TerserPlugin from 'terser-webpack-plugin';
 
 export function addDevServer(configMutator: WebpackConfigMutator) {
   return configMutator.addTopLevel('devServer', {
+    allowedHosts: 'all',
     historyApiFallback: {
       index: '/index.html',
       disableDotRule: true,
@@ -18,3 +21,69 @@ export function setOutput(configMutator: WebpackConfigMutator) {
 
   return configMutator;
 }
+
+export function replaceTerserPlugin({ prerender = false }: { prerender: boolean }) {
+  return (configMutator: WebpackConfigMutator) => {
+    if (!configMutator.raw.optimization?.minimizer) return configMutator;
+
+    remove(configMutator.raw.optimization?.minimizer, (minimizer) => {
+      return minimizer.constructor.name === 'TerserPlugin';
+    });
+
+    const terserer = prerender ? CreateTerserPluginForPrerender() : CreateTerserPlugin();
+    configMutator.raw.optimization?.minimizer.push(terserer);
+
+    return configMutator;
+  };
+}
+
+function CreateTerserPlugin() {
+  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,
+    },
+  });
+}
+
+function CreateTerserPluginForPrerender() {
+  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,
+      },
+    },
+  });
+}

package/apps/web/webpack/webpack.app.ssr.config.ts

@@ -35,3 +35,27 @@ export function ssrConfig(): Configuration {
     },
   };
 }
+
+export function buildConfig({ outputPath }: { outputPath: string }): Configuration {
+  return {
+    output: {
+      path: outputPath,
+      publicPath: `/`,
+      filename: '[name].[chunkhash].js',
+    },
+  };
+}
+
+export function ssrBuildConfig({ outputPath }: { outputPath: string }): Configuration {
+  return {
+    target: 'node',
+    devtool: 'eval-cheap-source-map',
+
+    output: {
+      path: outputPath,
+      publicPath: `/`,
+      libraryTarget: 'commonjs',
+      filename: 'index.js',
+    },
+  };
+}

package/artifacts/__bit_junit.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites>
-  <testsuite name="teambit.react/react@0.0.804" timestamp="2022-08-01T10:17:25.882Z" tests="1" failures="0" errors="0" skipped="0">
-    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.256"/>
+  <testsuite name="teambit.react/react@0.0.807" timestamp="2022-08-04T03:53:03.273Z" tests="1" failures="0" errors="0" skipped="0">
+    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.184"/>
   </testsuite>
 </testsuites>