@teambit/react 0.0.526 → 0.0.530

package/dist/react-app-options.d.ts

@@ -7,5 +7,6 @@ export declare type ReactAppOptions = {
     bundler?: Bundler;
     devServer?: DevServer;
     deploy?: (context: DeployContext) => Promise<void>;
+    prerenderRoutes?: string[];
     portRange?: number[];
 };

package/dist/react.app-type.js

@@ -22,7 +22,7 @@ class ReactAppType {
   }
 
   createApp(options) {
-    return new (_react().ReactApp)(options.name, options.entry, options.portRange || [3000, 4000], this.reactEnv, options.deploy);
+    return new (_react().ReactApp)(options.name, options.entry, options.portRange || [3000, 4000], this.reactEnv, options.deploy, options.prerenderRoutes);
   }
 
 }

package/dist/react.app-type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["react.app-type.ts"],"names":["ReactAppType","constructor","name","reactEnv","createApp","options","ReactApp","entry","portRange","deploy"],"mappings":";;;;;;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,YAAN,CAA+D;AACpEC,EAAAA,WAAW,CAAUC,IAAV,EAAgCC,QAAhC,EAAoD;AAAA,SAA1CD,IAA0C,GAA1CA,IAA0C;AAAA,SAApBC,QAAoB,GAApBA,QAAoB;AAAE;;AAEjEC,EAAAA,SAAS,CAACC,OAAD,EAA2B;AAClC,WAAO,KAAIC,iBAAJ,EAAaD,OAAO,CAACH,IAArB,EAA2BG,OAAO,CAACE,KAAnC,EAA0CF,OAAO,CAACG,SAAR,IAAqB,CAAC,IAAD,EAAO,IAAP,CAA/D,EAA6E,KAAKL,QAAlF,EAA4FE,OAAO,CAACI,MAApG,CAAP;AACD;;AALmE","sourcesContent":["import { ApplicationType } from '@teambit/application';\nimport { ReactEnv } from './react.env';\nimport { ReactAppOptions } from './react-app-options';\nimport { ReactApp } from './react.application';\n\nexport class ReactAppType implements ApplicationType<ReactAppOptions> {\n  constructor(readonly name: string, private reactEnv: ReactEnv) {}\n\n  createApp(options: ReactAppOptions) {\n    return new ReactApp(options.name, options.entry, options.portRange || [3000, 4000], this.reactEnv, options.deploy);\n  }\n}\n"]}
+{"version":3,"sources":["react.app-type.ts"],"names":["ReactAppType","constructor","name","reactEnv","createApp","options","ReactApp","entry","portRange","deploy","prerenderRoutes"],"mappings":";;;;;;;AAGA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAEO,MAAMA,YAAN,CAA+D;AACpEC,EAAAA,WAAW,CAAUC,IAAV,EAAgCC,QAAhC,EAAoD;AAAA,SAA1CD,IAA0C,GAA1CA,IAA0C;AAAA,SAApBC,QAAoB,GAApBA,QAAoB;AAAE;;AAEjEC,EAAAA,SAAS,CAACC,OAAD,EAA2B;AAClC,WAAO,KAAIC,iBAAJ,EACLD,OAAO,CAACH,IADH,EAELG,OAAO,CAACE,KAFH,EAGLF,OAAO,CAACG,SAAR,IAAqB,CAAC,IAAD,EAAO,IAAP,CAHhB,EAIL,KAAKL,QAJA,EAKLE,OAAO,CAACI,MALH,EAMLJ,OAAO,CAACK,eANH,CAAP;AAQD;;AAZmE","sourcesContent":["import { ApplicationType } from '@teambit/application';\nimport { ReactEnv } from './react.env';\nimport { ReactAppOptions } from './react-app-options';\nimport { ReactApp } from './react.application';\n\nexport class ReactAppType implements ApplicationType<ReactAppOptions> {\n  constructor(readonly name: string, private reactEnv: ReactEnv) {}\n\n  createApp(options: ReactAppOptions) {\n    return new ReactApp(\n      options.name,\n      options.entry,\n      options.portRange || [3000, 4000],\n      this.reactEnv,\n      options.deploy,\n      options.prerenderRoutes\n    );\n  }\n}\n"]}

package/dist/react.application.d.ts

@@ -8,7 +8,8 @@ export declare class ReactApp implements Application {
     readonly portRange: number[];
     private reactEnv;
     readonly deploy?: ((context: DeployContext) => Promise<void>) | undefined;
-    constructor(name: string, entry: string[], portRange: number[], reactEnv: ReactEnv, deploy?: ((context: DeployContext) => Promise<void>) | undefined);
+    readonly prerenderRoutes?: string[] | undefined;
+    constructor(name: string, entry: string[], portRange: number[], reactEnv: ReactEnv, deploy?: ((context: DeployContext) => Promise<void>) | undefined, prerenderRoutes?: string[] | undefined);
     applicationType: string;
     run(context: AppContext): Promise<number>;
     build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext>;

package/dist/react.application.js

@@ -21,6 +21,16 @@ function _defineProperty2() {
   return data;
 }
 
+function _prerenderSpaPlugin() {
+  const data = _interopRequireDefault(require("@dreysolano/prerender-spa-plugin"));
+
+  _prerenderSpaPlugin = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _path() {
   const data = require("path");
 
@@ -42,12 +52,13 @@ function _toolboxNetwork() {
 }
 
 class ReactApp {
-  constructor(name, entry, portRange, reactEnv, deploy) {
+  constructor(name, entry, portRange, reactEnv, deploy, prerenderRoutes) {
     this.name = name;
     this.entry = entry;
     this.portRange = portRange;
     this.reactEnv = reactEnv;
     this.deploy = deploy;
+    this.prerenderRoutes = prerenderRoutes;
     (0, _defineProperty2().default)(this, "applicationType", 'react');
   }
 
@@ -93,6 +104,16 @@ class ReactApp {
         path: (0, _path().join)(outputPath, 'public'),
         publicPath: `/`
       });
+      configMutator.addPlugin(new (_prerenderSpaPlugin().default)({
+        staticDir: (0, _path().join)(outputPath, 'public'),
+        routes: this.prerenderRoutes,
+
+        postProcess(renderedRoute) {
+          renderedRoute.outputPath = (0, _path().join)(outputPath, 'public', `${renderedRoute.originalRoute}.html`);
+          return renderedRoute;
+        }
+
+      }));
       return configMutator;
     }]);
     await bundler.run();

package/dist/react.application.js.map

@@ -1 +1 @@
-{"version":3,"sources":["react.application.ts"],"names":["ReactApp","constructor","name","entry","portRange","reactEnv","deploy","run","context","devServerContext","getDevServerContext","devServer","getDevServer","configMutator","addTopLevel","historyApiFallback","index","disableDotRule","raw","output","publicPath","from","to","port","Port","getPort","listen","build","aspectId","appCapsule","env","publicDir","outputPath","path","distDir","getCompiler","entries","map","require","resolve","bundlerContext","Object","assign","targets","components","component","rootPath","bundler","getBundler","deployContext","applicationType","title"],"mappings":"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","sourcesContent":["import { join, basename } from 'path';\nimport { Capsule } from '@teambit/isolator';\nimport { Application, AppContext, DeployContext } from '@teambit/application';\nimport { BuildContext } from '@teambit/builder';\nimport { Bundler, BundlerContext, DevServerContext } from '@teambit/bundler';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { ReactEnv } from './react.env';\n\nexport class ReactApp implements Application {\n  constructor(\n    readonly name: string,\n    readonly entry: string[],\n    readonly portRange: number[],\n    private reactEnv: ReactEnv,\n    readonly deploy?: (context: DeployContext) => Promise<void>\n  ) {}\n\n  applicationType = 'react';\n\n  async run(context: AppContext): Promise<number> {\n    const devServerContext = this.getDevServerContext(context);\n    const devServer = this.reactEnv.getDevServer(devServerContext, [\n      (configMutator) => {\n        // configMutator.addTopLevel('output', { publicPath: `/public/${this.name}` });\n        configMutator.addTopLevel('devServer', {\n          historyApiFallback: {\n            index: '/index.html',\n            disableDotRule: true,\n          },\n        });\n\n        if (!configMutator.raw.output) configMutator.raw.output = {};\n        configMutator.raw.output.publicPath = '/';\n\n        return configMutator;\n      },\n    ]);\n    const [from, to] = this.portRange;\n    const port = await Port.getPort(from, to);\n    await devServer.listen(port);\n    return port;\n  }\n\n  async build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext> {\n    const reactEnv: ReactEnv = context.env;\n    const publicDir = join('applications', this.name, 'build');\n    const outputPath = join(appCapsule.path, publicDir);\n    const { distDir } = reactEnv.getCompiler();\n    const entries = this.entry.map((entry) => require.resolve(`${appCapsule.path}/${distDir}/${basename(entry)}`));\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets: [\n        {\n          components: [appCapsule?.component],\n          entries,\n          outputPath,\n        },\n      ],\n      entry: [],\n      rootPath: '/',\n    });\n    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [\n      (configMutator) => {\n        configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });\n        return configMutator;\n      },\n    ]);\n    await bundler.run();\n    const deployContext = Object.assign(context, {\n      applicationType: this.applicationType,\n      aspectId,\n      publicDir: join(appCapsule.path, publicDir, 'public'),\n    });\n    return deployContext;\n  }\n\n  private getDevServerContext(context: AppContext): DevServerContext {\n    return Object.assign(context, {\n      entry: this.entry,\n      rootPath: '',\n      publicPath: `public/${this.name}`,\n      title: this.name,\n    });\n  }\n}\n"]}
+{"version":3,"sources":["react.application.ts"],"names":["ReactApp","constructor","name","entry","portRange","reactEnv","deploy","prerenderRoutes","run","context","devServerContext","getDevServerContext","devServer","getDevServer","configMutator","addTopLevel","historyApiFallback","index","disableDotRule","raw","output","publicPath","from","to","port","Port","getPort","listen","build","aspectId","appCapsule","env","publicDir","outputPath","path","distDir","getCompiler","entries","map","require","resolve","bundlerContext","Object","assign","targets","components","component","rootPath","bundler","getBundler","addPlugin","PrerenderSPAPlugin","staticDir","routes","postProcess","renderedRoute","originalRoute","deployContext","applicationType","title"],"mappings":"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","sourcesContent":["import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';\nimport { join, basename } from 'path';\nimport { Capsule } from '@teambit/isolator';\nimport { Application, AppContext, DeployContext } from '@teambit/application';\nimport { BuildContext } from '@teambit/builder';\nimport { Bundler, BundlerContext, DevServerContext } from '@teambit/bundler';\nimport { Port } from '@teambit/toolbox.network.get-port';\nimport { ReactEnv } from './react.env';\n\nexport class ReactApp implements Application {\n  constructor(\n    readonly name: string,\n    readonly entry: string[],\n    readonly portRange: number[],\n    private reactEnv: ReactEnv,\n    readonly deploy?: (context: DeployContext) => Promise<void>,\n    readonly prerenderRoutes?: string[]\n  ) {}\n\n  applicationType = 'react';\n\n  async run(context: AppContext): Promise<number> {\n    const devServerContext = this.getDevServerContext(context);\n    const devServer = this.reactEnv.getDevServer(devServerContext, [\n      (configMutator) => {\n        // configMutator.addTopLevel('output', { publicPath: `/public/${this.name}` });\n        configMutator.addTopLevel('devServer', {\n          historyApiFallback: {\n            index: '/index.html',\n            disableDotRule: true,\n          },\n        });\n\n        if (!configMutator.raw.output) configMutator.raw.output = {};\n        configMutator.raw.output.publicPath = '/';\n\n        return configMutator;\n      },\n    ]);\n    const [from, to] = this.portRange;\n    const port = await Port.getPort(from, to);\n    await devServer.listen(port);\n    return port;\n  }\n\n  async build(context: BuildContext, aspectId: string, appCapsule: Capsule): Promise<DeployContext> {\n    const reactEnv: ReactEnv = context.env;\n    const publicDir = join('applications', this.name, 'build');\n    const outputPath = join(appCapsule.path, publicDir);\n    const { distDir } = reactEnv.getCompiler();\n    const entries = this.entry.map((entry) => require.resolve(`${appCapsule.path}/${distDir}/${basename(entry)}`));\n    const bundlerContext: BundlerContext = Object.assign(context, {\n      targets: [\n        {\n          components: [appCapsule?.component],\n          entries,\n          outputPath,\n        },\n      ],\n      entry: [],\n      rootPath: '/',\n    });\n    const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [\n      (configMutator) => {\n        configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });\n        configMutator.addPlugin(\n          new PrerenderSPAPlugin({\n            staticDir: join(outputPath, 'public'),\n            routes: this.prerenderRoutes,\n            postProcess(renderedRoute) {\n              renderedRoute.outputPath = join(outputPath, 'public', `${renderedRoute.originalRoute}.html`);\n              return renderedRoute;\n            },\n          })\n        );\n        return configMutator;\n      },\n    ]);\n    await bundler.run();\n    const deployContext = Object.assign(context, {\n      applicationType: this.applicationType,\n      aspectId,\n      publicDir: join(appCapsule.path, publicDir, 'public'),\n    });\n    return deployContext;\n  }\n\n  private getDevServerContext(context: AppContext): DevServerContext {\n    return Object.assign(context, {\n      entry: this.entry,\n      rootPath: '',\n      publicPath: `public/${this.name}`,\n      title: this.name,\n    });\n  }\n}\n"]}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.526",
+  "version": "0.0.530",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.526"
+    "version": "0.0.530"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
+    "@dreysolano/prerender-spa-plugin": "1.0.3",
     "@teambit/harmony": "0.2.11",
     "fs-extra": "10.0.0",
     "lodash": "4.17.21",
@@ -78,44 +79,44 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.354",
-    "@teambit/preview": "0.0.526",
-    "@teambit/react.ui.error-fallback": "0.0.70",
-    "@teambit/react.ui.loader-fallback": "0.0.49",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.124",
+    "@teambit/preview": "0.0.530",
+    "@teambit/react.ui.error-fallback": "0.0.72",
+    "@teambit/react.ui.loader-fallback": "0.0.51",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.126",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/application": "0.0.168",
-    "@teambit/bundler": "0.0.526",
-    "@teambit/builder": "0.0.526",
-    "@teambit/isolator": "0.0.526",
-    "@teambit/toolbox.network.get-port": "0.0.74",
-    "@teambit/compiler": "0.0.526",
-    "@teambit/component.modules.component-url": "0.0.79",
-    "@teambit/component": "0.0.526",
-    "@teambit/envs": "0.0.526",
-    "@teambit/eslint": "0.0.526",
-    "@teambit/formatter": "0.0.77",
-    "@teambit/jest": "0.0.526",
-    "@teambit/linter": "0.0.526",
-    "@teambit/pkg": "0.0.526",
-    "@teambit/prettier": "0.0.77",
-    "@teambit/react.babel.bit-react-transformer": "0.0.452",
-    "@teambit/schema": "0.0.526",
-    "@teambit/tester": "0.0.526",
-    "@teambit/typescript": "0.0.526",
-    "@teambit/webpack": "0.0.526",
-    "@teambit/workspace": "0.0.526",
+    "@teambit/application": "0.0.172",
+    "@teambit/bundler": "0.0.530",
+    "@teambit/builder": "0.0.530",
+    "@teambit/isolator": "0.0.530",
+    "@teambit/toolbox.network.get-port": "0.0.76",
+    "@teambit/compiler": "0.0.530",
+    "@teambit/component.modules.component-url": "0.0.81",
+    "@teambit/component": "0.0.530",
+    "@teambit/envs": "0.0.530",
+    "@teambit/eslint": "0.0.530",
+    "@teambit/formatter": "0.0.81",
+    "@teambit/jest": "0.0.530",
+    "@teambit/linter": "0.0.530",
+    "@teambit/pkg": "0.0.530",
+    "@teambit/prettier": "0.0.81",
+    "@teambit/react.babel.bit-react-transformer": "0.0.454",
+    "@teambit/schema": "0.0.530",
+    "@teambit/tester": "0.0.530",
+    "@teambit/typescript": "0.0.530",
+    "@teambit/webpack": "0.0.530",
+    "@teambit/workspace": "0.0.530",
     "@teambit/cli": "0.0.380",
-    "@teambit/dependency-resolver": "0.0.526",
-    "@teambit/generator": "0.0.526",
-    "@teambit/graphql": "0.0.526",
-    "@teambit/react.ui.highlighter-provider": "0.0.132",
-    "@teambit/compositions": "0.0.526",
-    "@teambit/ui": "0.0.526",
-    "@teambit/react.eslint-config-bit-react": "0.0.447",
-    "@teambit/mdx.modules.mdx-loader": "0.0.448",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.64",
-    "@teambit/webpack.modules.style-regexps": "0.0.93",
+    "@teambit/dependency-resolver": "0.0.530",
+    "@teambit/generator": "0.0.530",
+    "@teambit/graphql": "0.0.530",
+    "@teambit/react.ui.highlighter-provider": "0.0.134",
+    "@teambit/compositions": "0.0.530",
+    "@teambit/ui": "0.0.530",
+    "@teambit/react.eslint-config-bit-react": "0.0.449",
+    "@teambit/mdx.modules.mdx-loader": "0.0.450",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.66",
+    "@teambit/webpack.modules.style-regexps": "0.0.95",
     "@teambit/component-id": "0.0.370",
     "@teambit/config": "0.0.391"
   },
@@ -132,10 +133,10 @@
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
-    "@teambit/react.aspect-docs.react": "0.0.88"
+    "@teambit/react.aspect-docs.react": "0.0.90"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.161",
+    "@teambit/legacy": "1.0.163",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -197,7 +198,7 @@
         "@types/jest": "^26.0.0"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.161",
+        "@teambit/legacy": "1.0.163",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/react-app-options.ts

@@ -32,6 +32,12 @@ export type ReactAppOptions = {
    */
   deploy?: (context: DeployContext) => Promise<void>;
 
+  /**
+   * prerender routes of application (will create static file for the route)
+   * e.g ['/plugins', '/learn', '/docs/quick-start]
+   */
+  prerenderRoutes?: string[];
+
   /**
    * ranges of ports to use to run the app server.
    */

package/react.app-type.ts

@@ -7,6 +7,13 @@ export class ReactAppType implements ApplicationType<ReactAppOptions> {
   constructor(readonly name: string, private reactEnv: ReactEnv) {}
 
   createApp(options: ReactAppOptions) {
-    return new ReactApp(options.name, options.entry, options.portRange || [3000, 4000], this.reactEnv, options.deploy);
+    return new ReactApp(
+      options.name,
+      options.entry,
+      options.portRange || [3000, 4000],
+      this.reactEnv,
+      options.deploy,
+      options.prerenderRoutes
+    );
   }
 }

package/react.application.ts

@@ -1,3 +1,4 @@
+import PrerenderSPAPlugin from '@dreysolano/prerender-spa-plugin';
 import { join, basename } from 'path';
 import { Capsule } from '@teambit/isolator';
 import { Application, AppContext, DeployContext } from '@teambit/application';
@@ -12,7 +13,8 @@ export class ReactApp implements Application {
     readonly entry: string[],
     readonly portRange: number[],
     private reactEnv: ReactEnv,
-    readonly deploy?: (context: DeployContext) => Promise<void>
+    readonly deploy?: (context: DeployContext) => Promise<void>,
+    readonly prerenderRoutes?: string[]
   ) {}
 
   applicationType = 'react';
@@ -61,6 +63,16 @@ export class ReactApp implements Application {
     const bundler: Bundler = await reactEnv.getBundler(bundlerContext, [
       (configMutator) => {
         configMutator.addTopLevel('output', { path: join(outputPath, 'public'), publicPath: `/` });
+        configMutator.addPlugin(
+          new PrerenderSPAPlugin({
+            staticDir: join(outputPath, 'public'),
+            routes: this.prerenderRoutes,
+            postProcess(renderedRoute) {
+              renderedRoute.outputPath = join(outputPath, 'public', `${renderedRoute.originalRoute}.html`);
+              return renderedRoute;
+            },
+          })
+        );
         return configMutator;
       },
     ]);