extract React specific code into subapp-react module

packages/subapp-react/.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [["@babel/env", { modules: "auto", targets: { node: "current" } }], "@babel/react"]
+};

packages/subapp-react/.gitignore

@@ -0,0 +1,3 @@
+browser
+dist
+*-lock.*

packages/subapp-react/README.md

@@ -0,0 +1,88 @@
+# Electrode Subapp For React
+
+This module mainly serve to setup subapp-web with Facebook React framework.
+
+It basically re-exports the module subapp-web and sets it up with React specific APIs.
+
+For convenience, it also exports the module `react`.
+
+To use, a subapp's code should be doing:
+
+```js
+import { React, loadSubApp } from "subapp-react";
+
+import Component from "./component";
+
+export default loadSubApp({ name: "MyComponent", Component });
+```
+
+For all pratical purposes, if there's code somewhere else that ensures subapp-web is setup with the proper React framework, then it's equivalent to the following:
+
+```js
+import React from "react";
+import { loadSubApp } from "subapp-web";
+
+import Component from "./component";
+
+export default loadSubApp({ name: "MyComponent", Component });
+```
+
+`react` and `react-dom` are specified as peerDependencies, so you must install them as part of your `package.json` dependencies.
+
+## SSR App Context
+
+This module also exports a default React context that SSR uses to pass in server `request` object to your React component.
+
+ie:
+
+```js
+import { AppContext } from "subapp-react";
+
+const Component = () => {
+  return (
+    <AppContext.Consumer>
+      {({ isSsr, ssr, subApp }) => {
+        return (
+          <div>
+            IS_SSR: {`${Boolean(isSsr)}`} HAS_REQUEST: {ssr && ssr.request ? "yes" : "no"}
+          </div>
+        );
+      }}
+    </AppContext.Consumer>
+  );
+};
+```
+
+## Support for React Router
+
+If you want to use [react-router] in your application, then you need to install the dependencies:
+
+- [react-router] and [react-router-dom]
+
+ie:
+
+```bash
+npm i react-router react-router-dom
+```
+
+And then set the `useReactRouter` flag to true in your subapp:
+
+```js
+import { React, loadSubApp } from "subapp-react";
+
+export default loadSubApp({ name: "MySubapp", Component, useReactRouter: true });
+```
+
+## License
+
+Copyright (c) 2016-present, WalmartLabs
+
+Licensed under the [Apache License, Version 2.0].
+
+[apache license, version 2.0]: https://www.apache.org/licenses/LICENSE-2.0
+[react-router]: https://www.npmjs.com/package/react-router
+[react-router-dom]: https://www.npmjs.com/package/react-router-dom
+
+```
+
+```

packages/subapp-react/babelrc-node

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "node": "8.15.0"
+      }
+    } ], "react"
+  ]
+}

packages/subapp-web/lib/framework-lib.js → packages/subapp-react/lib/framework-lib.js

@@ -2,14 +2,6 @@
 
 /* eslint-disable max-statements */
 
-/*
-   In order to support different UI framework like React/Preact,
-   first extract the framework specific code from subapp lib into
-   their own file.
-   Next allow a separate module to DI this into the subapp lib
-   in order to allow apps to use the framework they choose
- */
-
 const assert = require("assert");
 const optionalRequire = require("optional-require")(require);
 const React = require("react");

packages/subapp-react/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const subappWeb = require("subapp-web");
+const React = require("react");
+const FrameworkLib = require("./framework-lib");
+const { default: AppContext } = require("../browser/app-context");
+
+subappWeb.setupFramework(FrameworkLib);
+
+module.exports = {
+  ...subappWeb,
+  AppContext,
+  FrameworkLib,
+  React
+};

packages/subapp-react/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "subapp-react",
+  "version": "0.0.1",
+  "description": "Electrode subapp support for React/Redux/React Router",
+  "browser": "browser/index.js",
+  "main": "lib/index.js",
+  "scripts": {
+    "test": "clap check",
+    "coverage": "clap check",
+    "build": "clap -x -n compile minify",
+    "compile": "babel src -d browser --source-maps"
+  },
+  "keywords": [
+    "web",
+    "react",
+    "subapp",
+    "redux",
+    "react-router"
+  ],
+  "author": "Electrode (http://www.electrode.io/)",
+  "contributors": [
+    "Joel Chen <xchen@walmartlabs.com>"
+  ],
+  "license": "Apache-2.0",
+  "files": [
+    "lib",
+    "browser",
+    "dist"
+  ],
+  "dependencies": {
+    "subapp-web": "^1.0.0",
+    "subapp-util": "^1.0.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.7.7",
+    "babel-preset-minify": "^0.5.1",
+    "electrode-archetype-njs-module-dev": "^3.0.0",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-redux": "^6.0.1",
+    "redux": "^4.0.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "fyn": {
+    "dependencies": {
+      "subapp-web": "../subapp-web",
+      "subapp-util": "../subapp-util"
+    }
+  },
+  "nyc": {
+    "all": true,
+    "require": [
+      "@babel/register",
+      "mocha"
+    ],
+    "reporter": [
+      "lcov",
+      "text",
+      "text-summary"
+    ],
+    "exclude": [
+      "coverage",
+      "*clap.js",
+      "gulpfile.js",
+      "dist",
+      "test",
+      "browser",
+      "**/.babelrc.js"
+    ],
+    "check-coverage": true,
+    "statements": 0,
+    "branches": 0,
+    "functions": 0,
+    "lines": 0,
+    "cache": true
+  }
+}

packages/subapp-react/src/.babelrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ["@babel/env", { modules: "auto" }],
+    "@babel/react",
+    process.env.MINIFY ? "minify" : undefined
+  ].filter(x => x)
+};

packages/subapp-react/src/index.js

@@ -0,0 +1,11 @@
+import FrameworkLib from "./fe-framework-lib";
+
+import { setupFramework } from "subapp-web";
+
+setupFramework(FrameworkLib);
+
+export * from "subapp-web";
+
+export { default as React } from "react";
+
+export { default as AppContext } from "./app-context";

packages/subapp-react/test/mocha.opts

@@ -0,0 +1,3 @@
+--require node_modules/electrode-archetype-njs-module-dev/config/test/setup.js
+--require @babel/register
+--recursive

packages/subapp-react/test/spec/ssr-framework.spec.js

@@ -0,0 +1,60 @@
+"use strict";
+
+const React = require("react"); // eslint-disable-line
+const lib = require("../../lib");
+
+describe("SSR React framework", function() {
+  it("should setup React framework", () => {
+    expect(lib.React).to.be.ok;
+    expect(lib.AppContext).to.be.ok;
+    expect(lib.FrameworkLib).to.be.ok;
+    expect(lib.loadSubApp).to.be.a("function");
+  });
+
+  it("should not do SSR without component", async () => {
+    const framework = new lib.FrameworkLib({
+      subApp: {},
+      subAppServer: {},
+      props: {}
+    });
+    const res = await framework.handleSSR();
+    expect(res).contains("has no StartComponent");
+  });
+
+  it("should render Component from subapp with initial props from prepare", async () => {
+    const framework = new lib.FrameworkLib({
+      subApp: {
+        prepare: () => ({ test: "foo bar" }),
+        Component: props => {
+          return <div>Hello {props.test}</div>;
+        }
+      },
+      subAppServer: {},
+      props: { serverSideRendering: true },
+      context: {
+        user: {}
+      }
+    });
+    const res = await framework.handleSSR();
+    expect(res).contains("Hello foo bar");
+  });
+
+  it("should render Component from subapp with initial props from server's prepare", async () => {
+    const framework = new lib.FrameworkLib({
+      subApp: {
+        Component: props => {
+          return <div>Hello {props.test}</div>;
+        }
+      },
+      subAppServer: {
+        prepare: () => ({ test: "foo bar" })
+      },
+      props: { serverSideRendering: true },
+      context: {
+        user: {}
+      }
+    });
+    const res = await framework.handleSSR();
+    expect(res).contains("Hello foo bar");
+  });
+});

packages/subapp-react/xclap.js

@@ -0,0 +1,7 @@
+const xclap = require("xclap");
+xclap.load({
+  minify: xclap.exec("babel src -d dist --source-maps", {
+    execOptions: { env: { MINIFY: "true" } }
+  })
+});
+require("electrode-archetype-njs-module-dev")();

packages/subapp-web/.gitignore

@@ -1,2 +1,3 @@
 browser
 dist
+*-lock.*