@teambit/react 0.0.823 → 0.0.824

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

@@ -1,11 +1,17 @@
-import { ApplicationType } from '@teambit/application';
 import type { Logger } from '@teambit/logger';
+import type { DependencyResolverMain } from '@teambit/dependency-resolver';
+import { ApplicationType } from '@teambit/application';
 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, private logger?: Logger) {}
+  constructor(
+    readonly name: string,
+    private reactEnv: ReactEnv,
+    private logger: Logger,
+    private dependencyResolver: DependencyResolverMain
+  ) {}
 
   createApp(options: ReactAppOptions) {
     return new ReactApp(
@@ -14,14 +20,15 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
       options.ssr,
       options.portRange || [3000, 4000],
       this.reactEnv,
+      this.logger,
+      this.dependencyResolver,
       options.prerender,
       options.bundler,
       options.ssrBundler,
       options.devServer,
       options.webpackTransformers,
       options.deploy,
-      options.favicon,
-      this.logger
+      options.favicon
     );
   }
 }

package/apps/web/react.application.ts

@@ -1,8 +1,11 @@
+import { readFileSync } from 'fs';
 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 { ComponentMap } from '@teambit/component';
 import type { Logger } from '@teambit/logger';
+import { DependencyResolverMain, WorkspacePolicy } from '@teambit/dependency-resolver';
 import compact from 'lodash.compact';
 import { WebpackConfigTransformer } from '@teambit/webpack';
 import { BitError } from '@teambit/bit-error';
@@ -24,14 +27,15 @@ export class ReactApp implements Application {
     readonly ssr: string | (() => Promise<string>) | undefined,
     readonly portRange: [number, number],
     private reactEnv: ReactEnv,
+    private logger: Logger,
+    private dependencyResolver: DependencyResolverMain,
     readonly prerender?: ReactAppPrerenderOptions,
     readonly bundler?: Bundler,
     readonly ssrBundler?: Bundler,
     readonly devServer?: DevServer,
     readonly transformers: WebpackConfigTransformer[] = [],
     readonly deploy?: (context: ReactDeployContext) => Promise<void>,
-    readonly favicon?: string,
-    private logger?: Logger
+    readonly favicon?: string
   ) {}
   readonly applicationType = 'react-common-js';
   readonly dir = 'public';
@@ -163,16 +167,56 @@ export class ReactApp implements Application {
     });
     const bundler = await this.getBundler(context);
     const bundleResult = await bundler.run();
+    const ssrAppDir = join(this.getPublicDir(context.artifactsDir));
 
-    if (this.ssr) {
-      const bunlder = await this.getSsrBundler(context);
-      await bunlder.run();
-    }
-
+    if (this.ssr) await this.buildSsrApp(context, ssrAppDir);
     return computeResults(bundleResult, {
       publicDir: `${this.getPublicDir(context.artifactsDir)}/${this.dir}`,
-      ssrPublicDir: this.ssr ? `${this.getPublicDir(context.artifactsDir)}/${this.ssrDir}` : undefined,
+      ssrPublicDir: ssrAppDir,
+    });
+  }
+
+  private async buildSsrApp(context: AppBuildContext, ssrAppDir: string) {
+    const ssrBundler = await this.getSsrBundler(context);
+    await ssrBundler.run();
+    const runner = readFileSync(join(__dirname, './ssr/app/runner')).toString();
+    context.capsule.fs.writeFileSync(join(ssrAppDir, 'runner.js'), runner);
+    const capsuleSsrDir = context.capsule.fs.getPath(ssrAppDir);
+    const installer = this.dependencyResolver.getInstaller({
+      packageManager: 'teambit.dependencies/yarn',
+      rootDir: capsuleSsrDir,
+      cacheRootDirectory: capsuleSsrDir,
+    });
+    await installer.install(capsuleSsrDir, this.getSsrPolicy(), new ComponentMap(new Map()));
+    return ssrAppDir;
+  }
+
+  private getSsrPolicy() {
+    const workspacePolicy = new WorkspacePolicy([]);
+    workspacePolicy.add({ lifecycleType: 'runtime', dependencyId: 'express', value: { version: '4.18.1' } });
+    workspacePolicy.add({
+      lifecycleType: 'runtime',
+      dependencyId: '@teambit/react.rendering.ssr',
+      value: { version: '0.0.3' },
+    });
+    workspacePolicy.add({
+      lifecycleType: 'runtime',
+      dependencyId: '@teambit/ui-foundation.ui.pages.static-error',
+      value: { version: '0.0.75' },
+    });
+
+    workspacePolicy.add({
+      lifecycleType: 'peer',
+      dependencyId: 'react',
+      value: { version: '17.0.2' },
+    });
+
+    workspacePolicy.add({
+      lifecycleType: 'peer',
+      dependencyId: 'react-dom',
+      value: { version: '17.0.2' },
     });
+    return workspacePolicy;
   }
 
   private getBundler(context: AppBuildContext) {

package/apps/web/ssr/app/runner

@@ -0,0 +1,52 @@
+const Express = require('express');
+const { readFileSync } = require('fs');
+const { browserFromExpress } = require('@teambit/react.rendering.ssr');
+const { join, resolve } = require('path');
+
+const client = './public';
+const ssrPath = './ssr';
+const mainFile = 'index.html';
+
+// eslint-disable-next-line
+const entry = require(`./${ssrPath}`);
+const manifest = JSON.parse(readFileSync(join(client, 'assets-manifest.json')).toString());
+const options = process?.argv?.slice(2)?.[0] ? JSON.parse(process?.argv?.slice(2)?.[0]) : {};
+
+const assetsArray = Object.values(manifest);
+const assets = {
+  css: assetsArray.filter((id) => id.endsWith && id.endsWith('.css')).map((name) => join(name)),
+  js: assetsArray.filter((id) => id.endsWith && id.endsWith('.js')).map((name) => join(name)),
+};
+
+const app = Express();
+const ssrApp = entry?.default;
+if (!ssrApp) throw new Error(`bundle entry file has no default export (at "${entry}")`);
+
+app.use('/', Express.static(resolve(client)));
+app.use((request, response, next) => {
+  if (request.query._rendering !== 'client') {
+    next();
+    return;
+  }
+  response.sendFile(resolve(client, mainFile));
+});
+
+const port = options?.port || 3000;
+
+app.use(async (request, response) => {
+  const browser = browserFromExpress(request, port);
+  const session = { assets, browser, request, response };
+
+  try {
+    // the app itself controls the response
+    await ssrApp(session);
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+    response.sendFile(resolve(client, mainFile));
+  }
+});
+
+app.listen(port, () => {
+  console.log(`Listening to requests on ${port}`);
+});

package/artifacts/__bit_junit.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <testsuites>
-  <testsuite name="teambit.react/react@0.0.823" timestamp="2022-08-21T03:54:03.991Z" tests="1" failures="0" errors="0" skipped="0">
-    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.197"/>
+  <testsuite name="teambit.react/react@0.0.824" timestamp="2022-08-23T03:59:09.568Z" tests="1" failures="0" errors="0" skipped="0">
+    <testcase classname="index-file.spec.js" name="should match snapshot" time="0.187"/>
   </testsuite>
 </testsuites>