@teambit/react 0.0.802 → 0.0.803

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

@@ -73,9 +73,9 @@ export type ReactAppOptions = {
   entry: string[] | (() => Promise<string[]>);
 
   /**
-   * use server-side rendering for the app.
+   * path to server-rendered entrypoint of the app
    */
-  ssr?: boolean;
+  ssr?: string | (() => Promise<string>);
 
   /**
    * instance of bundler to use. default is Webpack.
@@ -108,7 +108,7 @@ export type ReactAppOptions = {
   /**
    * ranges of ports to use to run the app server.
    */
-  portRange?: number[];
+  portRange?: [start: number, end: number];
 
   /**
    * favicon for the app. You can pass an abs path (using require.resolve()) or a url.

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

@@ -1,15 +1,17 @@
 import { ApplicationType } from '@teambit/application';
+import type { Logger } from '@teambit/logger';
 import { ReactAppOptions } from './react-app-options';
 import { ReactApp } from './react.application';
 import { ReactEnv } from '../../react.env';
 
 export class ReactAppType implements ApplicationType<ReactAppOptions> {
-  constructor(readonly name: string, private reactEnv: ReactEnv) {}
+  constructor(readonly name: string, private reactEnv: ReactEnv, private logger?: Logger) {}
 
   createApp(options: ReactAppOptions) {
     return new ReactApp(
       options.name,
       options.entry,
+      options.ssr,
       options.portRange || [3000, 4000],
       this.reactEnv,
       options.prerender,
@@ -17,7 +19,8 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
       options.devServer,
       options.webpackTransformers,
       options.deploy,
-      options.favicon
+      options.favicon,
+      this.logger
     );
   }
 }

package/apps/web/react.application.ts

@@ -1,10 +1,12 @@
-import { join, basename } from 'path';
-import { Application, AppContext, AppBuildContext } from '@teambit/application';
-import { Bundler, DevServer, BundlerContext, DevServerContext, BundlerHtmlConfig } from '@teambit/bundler';
+import { join, resolve, basename } from 'path';
+import { Application, AppContext, AppBuildContext, AppResult } from '@teambit/application';
+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 { WebpackConfigTransformer } from '@teambit/webpack';
+import { BitError } from '@teambit/bit-error';
 import { ReactEnv } from '../../react.env';
 import { prerenderPlugin } from './plugins';
 import { ReactAppBuildResult } from './react-build-result';
@@ -12,19 +14,24 @@ 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 { createExpressSsr, loadSsrApp, parseAssets } from './ssr/ssr-express';
 
 export class ReactApp implements Application {
   constructor(
     readonly name: string,
     readonly entry: string[] | (() => Promise<string[]>),
-    readonly portRange: number[],
+    readonly ssr: string | (() => Promise<string>) | undefined,
+    readonly portRange: [number, number],
     private reactEnv: ReactEnv,
     readonly prerender?: ReactAppPrerenderOptions,
     readonly bundler?: Bundler,
     readonly devServer?: DevServer,
     readonly transformers: WebpackConfigTransformer[] = [],
     readonly deploy?: (context: ReactDeployContext) => Promise<void>,
-    readonly favicon?: string
+    readonly favicon?: string,
+    private logger?: Logger
   ) {}
   readonly applicationType = 'react-common-js';
   readonly dir = 'public';
@@ -32,32 +39,112 @@ export class ReactApp implements Application {
   async run(context: AppContext): Promise<number> {
     const [from, to] = this.portRange;
     const port = await Port.getPort(from, to);
+
     if (this.devServer) {
       await this.devServer.listen(port);
       return port;
     }
+
     const devServerContext = await this.getDevServerContext(context);
-    const devServer = this.reactEnv.getDevServer(devServerContext, [
-      (configMutator) =>
-        configMutator.addTopLevel('devServer', {
-          historyApiFallback: {
-            index: '/index.html',
-            disableDotRule: true,
-            headers: {
-              'Access-Control-Allow-Headers': '*',
-            },
-          },
-        }),
-      (configMutator) => {
-        if (!configMutator.raw.output) configMutator.raw.output = {};
-        configMutator.raw.output.publicPath = '/';
+    const devServer = this.reactEnv.getDevServer(devServerContext, [addDevServer, setOutput, ...this.transformers]);
+    await devServer.listen(port);
+    return port;
+  }
+
+  async runSsr(context: AppContext): Promise<AppResult> {
+    const [from, to] = this.portRange;
+    const port = await Port.getPort(from, to);
+
+    // bundle client
+    const clientBundle = await this.buildClient(context);
+    if (clientBundle.errors.length > 0) return { errors: clientBundle.errors };
+    this.logger?.info('[react.application] [ssr] client bundle - complete');
+
+    // bundle server
+    const serverBundle = await this.buildSsr(context);
+    if (serverBundle.errors.length > 0) return { errors: serverBundle.errors };
+    this.logger?.info('[react.application] [ssr] server bundle - complete');
+
+    // load server-side runtime
+    const app = await loadSsrApp(context.workdir, context.appName);
+    this.logger?.info('[react.application] [ssr] bundle code - loaded');
+
+    const expressApp = createExpressSsr({
+      name: context.appName,
+      workdir: context.workdir,
+      port,
+      app,
+      assets: parseAssets(clientBundle.assets),
+      logger: this.logger,
+    });
 
-        return configMutator;
+    expressApp.listen(port);
+    return { port };
+  }
+
+  private async buildClient(context: AppContext) {
+    const htmlConfig: BundlerHtmlConfig[] = [
+      {
+        title: context.appName,
+        templateContent: html(context.appName),
+        minify: false,
+        favicon: this.favicon,
       },
+    ];
+
+    // extend, including prototype methods
+    const ctx: BundlerContext = Object.assign(Object.create(context), {
+      html: htmlConfig,
+      targets: [
+        {
+          entries: await this.getEntries(),
+          components: [context.appComponent],
+          outputPath: resolve(context.workdir, calcOutputPath(context.appName, 'browser')),
+          hostDependencies: await this.getPeers(),
+          aliasHostDependencies: true,
+        },
+      ],
+
+      // @ts-ignore
+      capsuleNetwork: undefined,
+      previousTasksResults: [],
+    });
+
+    const bundler = await this.reactEnv.getBundler(ctx, [
+      (config) => config.merge([clientConfig()]),
       ...this.transformers,
     ]);
-    await devServer.listen(port);
-    return port;
+
+    const bundleResult = await bundler.run();
+    return bundleResult[0];
+  }
+
+  private async buildSsr(context: AppContext) {
+    // extend, including prototype methods
+    const ctx: BundlerContext = Object.assign(Object.create(context), {
+      ...context,
+      targets: [
+        {
+          entries: await this.getSsrEntries(),
+          components: [context.appComponent],
+          outputPath: resolve(context.workdir, calcOutputPath(context.appName, 'ssr')),
+          hostDependencies: await this.getPeers(),
+          aliasHostDependencies: true,
+        },
+      ],
+
+      // @ts-ignore
+      capsuleNetwork: undefined,
+      previousTasksResults: [],
+    });
+
+    const bundler = await this.reactEnv.getBundler(ctx, [
+      (config) => config.merge([ssrConfig()]),
+      ...this.transformers,
+    ]);
+
+    const bundleResult = await bundler.run();
+    return bundleResult[0];
   }
 
   async build(context: AppBuildContext): Promise<ReactAppBuildResult> {
@@ -85,7 +172,7 @@ export class ReactApp implements Application {
   }
   private async getDefaultBundler(context: AppBuildContext) {
     const { capsule } = context;
-    const reactEnv: ReactEnv = context.env;
+    const reactEnv: ReactEnv = context.env as ReactEnv;
     const publicDir = this.getPublicDir(context.artifactsDir);
     const outputPath = join(capsule.path, publicDir);
     const { distDir } = reactEnv.getCompiler();
@@ -99,6 +186,7 @@ export class ReactApp implements Application {
           components: [capsule?.component],
           entries,
           outputPath,
+          hostRootDir: capsule?.path,
           hostDependencies: await this.getPeers(),
           aliasHostDependencies: true,
         },
@@ -194,6 +282,12 @@ export class ReactApp implements Application {
     return this.entry();
   }
 
+  async getSsrEntries(): Promise<string[]> {
+    if (!this.ssr) throw new BitError('tried to build ssr without ssr entries');
+    if (typeof this.ssr === 'string') return [this.ssr];
+    return [await this.ssr()];
+  }
+
   private async getDevServerContext(context: AppContext): Promise<DevServerContext> {
     const entries = await this.getEntries();
     return Object.assign(context, {

package/apps/web/ssr/ssr-express.ts

@@ -0,0 +1,81 @@
+import { Asset } from '@teambit/bundler';
+import { Logger } from '@teambit/logger';
+import { serverError } from '@teambit/ui-foundation.ui.pages.static-error';
+import { browserFromExpress } from '@teambit/react.rendering.ssr';
+import type { HtmlAssets, SsrSession } from '@teambit/react.rendering.ssr';
+
+import Express from 'express';
+import * as fs from 'fs-extra';
+import { resolve } from 'path';
+import urlJoin from 'url-join';
+
+import { calcOutputPath, PUBLIC_PATH, SSR_ENTRY_FILE } from '../webpack/webpack.app.ssr.config';
+
+const MAGIC_FOLDER = 'public'; // idk where this is comping from
+
+type ExpressSsrOptions = {
+  name: string;
+  workdir: string;
+  port: number;
+  app: any;
+  assets: HtmlAssets;
+  logger?: Logger;
+};
+
+export function createExpressSsr({ name, workdir, port, app, assets, logger }: ExpressSsrOptions) {
+  const express = Express();
+
+  const publicFolder = resolve(workdir, calcOutputPath(name, 'browser'), MAGIC_FOLDER);
+
+  express.use(PUBLIC_PATH, Express.static(publicFolder));
+  express.use((request, response, next) => {
+    if (request.query._rendering !== 'client') {
+      next();
+      return;
+    }
+    response.sendFile(resolve(workdir, calcOutputPath(name, 'browser'), MAGIC_FOLDER, 'index.html'));
+  });
+  express.use(async (request, response) => {
+    logger?.info(`[react.application] [ssr] handling "${request.url}"`);
+    const browser = browserFromExpress(request, port);
+    const session: SsrSession = { assets, browser, request, response };
+
+    try {
+      // the app itself controls the response
+      await app(session);
+      logger?.console(`[react.application] [ssr] success "${request.url}"`);
+    } catch (error: any) {
+      logger?.consoleError(`[react.application] [ssr] error at "${request.url}"`, error);
+      response.status(500).send(serverError());
+    }
+  });
+
+  return express;
+}
+
+export async function loadSsrApp(workdir: string, appName: string) {
+  const entryFile = resolve(workdir, calcOutputPath(appName, 'ssr'), MAGIC_FOLDER, SSR_ENTRY_FILE);
+  if (!fs.existsSync(entryFile)) throw new Error(`expected ssr bundle entry file at "${entryFile}"`);
+
+  const entry = await import(entryFile);
+  const app = entry?.default;
+  if (!app) throw new Error(`bundle entry file has no default export (at "${entryFile}")`);
+
+  return app;
+}
+
+export function parseAssets(assets: Asset[], publicPath = PUBLIC_PATH): HtmlAssets {
+  const deadAssets = assets.filter((x) => !x.name);
+  if (deadAssets.length > 0) throw new Error('missing some build assets (maybe need to turn on cachedAssets, etc)');
+
+  return {
+    css: assets
+      .map((x) => x.name)
+      .filter((name) => name?.endsWith('.css'))
+      .map((name) => urlJoin(publicPath, name)),
+    js: assets
+      .map((x) => x.name)
+      .filter((name) => name?.endsWith('.js'))
+      .map((name) => urlJoin(publicPath, name)),
+  };
+}

package/apps/web/webpack/mutators.ts

@@ -0,0 +1,20 @@
+import { WebpackConfigMutator } from '@teambit/webpack';
+
+export function addDevServer(configMutator: WebpackConfigMutator) {
+  return configMutator.addTopLevel('devServer', {
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  });
+}
+
+export function setOutput(configMutator: WebpackConfigMutator) {
+  if (!configMutator.raw.output) configMutator.raw.output = {};
+  configMutator.raw.output.publicPath = '/';
+
+  return configMutator;
+}

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

@@ -0,0 +1,37 @@
+import { join } from 'path';
+import type { Configuration } from 'webpack';
+
+const OUTPUT_FOLDER = 'public/bit-apps';
+export const SSR_ENTRY_FILE = 'index.js';
+/** _external_ base url for static files. (is not a folder)
+ * @example
+ * "http://localhost:3000/public/main.88a88d47d86aaabc0230.js"
+ */
+export const PUBLIC_PATH = '/public';
+
+enum Targets {
+  ssr = 'ssr',
+  browser = 'browser',
+}
+
+export function calcOutputPath(appName: string, target: Targets | keyof typeof Targets) {
+  return join(OUTPUT_FOLDER, appName, target);
+}
+
+export function clientConfig(): Configuration {
+  return {
+    output: { publicPath: PUBLIC_PATH, filename: '[name].[chunkhash].js' },
+  };
+}
+
+export function ssrConfig(): Configuration {
+  return {
+    target: 'node',
+    devtool: 'eval-cheap-source-map',
+
+    output: {
+      libraryTarget: 'commonjs',
+      filename: SSR_ENTRY_FILE,
+    },
+  };
+}

package/artifacts/__bit_junit.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites>
-  <testsuite name="teambit.react/react@0.0.802" timestamp="2022-07-30T03:49:48.838Z" tests="1" failures="0" errors="0" skipped="0">
-    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.02"/>
+  <testsuite name="teambit.react/react@0.0.803" timestamp="2022-07-31T12:58:27.264Z" tests="1" failures="0" errors="0" skipped="0">
+    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.186"/>
   </testsuite>
 </testsuites>