@teambit/react 0.0.732 → 0.0.735

package/apps/web/plugins/index.ts

@@ -1 +1 @@
-export { prerenderSPAPlugin } from './prerender';
+export { prerenderPlugin } from './prerender';

package/apps/web/plugins/prerender.ts

@@ -1,18 +1,10 @@
-import { join } from 'path';
-import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';
+import PrerenderSPAPlugin from 'prerender-spa-plugin-next';
+import { PuppeteerRenderer } from '@teambit/react.modules.prerenderer-puppeteer';
 import { ReactAppPrerenderOptions } from '../react-app-options';
 
-export const prerenderSPAPlugin = (prerender: ReactAppPrerenderOptions, staticDir: string) => {
+export const prerenderPlugin = (options: ReactAppPrerenderOptions) => {
   return new PrerenderSPAPlugin({
-    staticDir,
-    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,
-    },
+    renderer: PuppeteerRenderer,
+    ...options,
   });
 };

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

@@ -3,21 +3,62 @@ import { WebpackConfigTransformer } from '@teambit/webpack';
 
 import { ReactDeployContext } from './deploy-context';
 
+type prerenderedRoute = {
+  /** The prerendered route, after following redirects */
+  route: string;
+  /** The original route passed, before redirects */
+  originalRoute: string;
+  /** The resulting HTML for the route */
+  html: string;
+  /**
+   * The path to write the rendered HTML to.
+   * This is null (automatically calculated after postProcess)
+   * unless explicitly set. */
+  outputPath?: string | null;
+};
+
+/** https://github.com/Tofandel/prerender-spa-plugin-next */
 export type ReactAppPrerenderOptions = {
+  /**
+   * sub folder to output the prerender, inside the webpack output folder
+   * @default '/'
+   */
+  staticDir?: string;
+
+  /** The index file to fall back on for SPAs. */
+  indexPath?: string;
+
   /**
    * 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 } } } };
+  server?: {
+    proxy: {
+      [key: string]: {
+        /** required by HPM.
+         * @default 'http://localhost:8000/' */
+        target: string;
+        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;
+  postProcess?: (prerenderRoute: prerenderedRoute) => prerenderedRoute;
+
+  /** The renderer you'd like to use to prerender the app.
+   * @default new require("@prerenderer/renderer-puppeteer").
+   */
+  renderer?: any;
+
+  /** options to pass to the renderer class's constructor */
+  rendererOptions?: any;
 };
 
 export type ReactAppOptions = {

package/apps/web/react.application.ts

@@ -6,7 +6,7 @@ import { remove } from 'lodash';
 import TerserPlugin from 'terser-webpack-plugin';
 import { WebpackConfigTransformer } from '@teambit/webpack';
 import { ReactEnv } from '../../react.env';
-import { prerenderSPAPlugin } from './plugins';
+import { prerenderPlugin } from './plugins';
 import { ReactAppBuildResult } from './react-build-result';
 import { ReactAppPrerenderOptions } from './react-app-options';
 import { html } from '../../webpack';
@@ -105,7 +105,7 @@ export class ReactApp implements Application {
 
     const defaultTransformer: WebpackConfigTransformer = (configMutator) => {
       const config = configMutator.addTopLevel('output', { path: staticDir, publicPath: `/` });
-      if (this.prerender) config.addPlugin(prerenderSPAPlugin(this.prerender, staticDir));
+      if (this.prerender) config.addPlugin(prerenderPlugin(this.prerender));
       if (config.raw.optimization?.minimizer) {
         remove(config.raw.optimization?.minimizer, (minimizer) => {
           return minimizer.constructor.name === 'TerserPlugin';