[major] update create-app to use subapp2 demo

packages/xarc-create-app/template/README.md

@@ -1,6 +1,6 @@
 # my-x-app
 
-Welcome to your web application using Electrode X.
+Welcome to your React application using Electrode X.
 
 ## Development
 
@@ -14,30 +14,28 @@ Some initial things to do and try:
 
    - First install dependencies
 
-   ```
-   npm install
-   ```
+```
+npm install
+```
 
-   - Then to develop your app, do
+- Then to develop your app, do
 
-   ```
-   npm run dev
-   ```
+```
+npm run dev
+```
 
-   - Once App is running, point browser to <http://localhost:3000>
+- Once App is running, point browser to <http://localhost:3000>
 
-3. Try adding some simple text to `home/subapp-home.js` or `demo1/subapp-demo1.js`.
+3. Try adding some simple text to `src/home/index.ts` or `src/demo1/index.ts`.
 
 4. Create some React components and add them to the home or demo subapp.
 
-5. Enable some optional features in `archetype/config/index.js`.
+5. Enable some optional features in `xclap.ts` when calling `loadXarcDevTasks`.
 
-6. Read up on a quick intro to the [Electrode SubApp architecture](https://github.com/electrode-io/electrode/blob/master/samples/poc-subapp/README.md).
+6. Create a repo and push your app to <https://www.github.com>, and update `repository` in `package.json`.
 
-7. Create a repo and push your app to <https://www.github.com>, and update `repository` in `package.json`.
-
-8. Contribute to the [Electrode Platform](https://github.com/electrode-io/electrode/blob/master/CONTRIBUTING.md).
+7. Contribute to the [Electrode Platform](https://github.com/electrode-io/electrode/blob/master/CONTRIBUTING.md).
 
 ## Resources
 
-- Check Electrode docs at <https://docs.electrode.io>
+- Check Electrode docs at <https://www.electrode.io/electrode/>

packages/xarc-create-app/template/_package.js

@@ -30,22 +30,16 @@ module.exports = (base, merge) => {
       npm: ">= 6"
     },
     dependencies: {
-      "@xarc/app": "^8.1.8",
+      "@xarc/app": "^8.2.0",
       "@xarc/fastify-server": "^2.0.0",
-      react: "^16.13.1",
-      "react-dom": "^16.13.1",
-      redux: "^4.0.5",
-      "react-redux": "^7.2.0",
-      "subapp-react": "^0.0.23",
-      "subapp-redux": "^1.0.32",
-      "subapp-server": "^1.3.1"
+      "@xarc/react": "^0.1.0",
+      "@xarc/react-redux": "^0.1.0"
     },
     devDependencies: {
       "@types/node": "^14.14.6",
-      "@xarc/app-dev": "^8.1.8",
+      "@xarc/app-dev": "^8.2.0",
       "ts-node": "^9.0.0",
-      typescript: "^4.0.3",
-      xclap: "^0.2.53"
+      typescript: "^4.0.3"
     }
   };
 

packages/xarc-create-app/template/src/app.tsx

@@ -0,0 +1,13 @@
+import { declareSubApp, xarcV2 } from "@xarc/react";
+
+export const home = declareSubApp({
+  name: "home",
+  getModule: () => import("./home")
+});
+
+export const Demo2 = declareSubApp({
+  name: "demo2",
+  getModule: () => import("./demo2")
+});
+
+xarcV2.debug("app.tsx");

packages/xarc-create-app/template/src/demo1/index.tsx

@@ -0,0 +1,17 @@
+import { React, ReactSubApp } from "@xarc/react";
+
+const Demo1 = props => {
+  return (
+    <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
+      <p>subapp demo1</p>
+      props: {JSON.stringify(props)}
+      <p>
+        <a href="https://www.electrode.io/electrode/">Electrode Docs</a>
+      </p>
+    </div>
+  );
+};
+
+export const subapp: ReactSubApp = {
+  Component: Demo1
+};

packages/xarc-create-app/template/src/demo2/index.tsx

@@ -0,0 +1,65 @@
+//
+// A more complicate demo subapp using Redux
+//
+// Note: using redux requires top level Redux store initialization so if another
+// subapp tries to use this as a dynamic component, then it must also uses redux and
+// provides the redux top level store facility.
+//
+
+import { React, ReactSubApp } from "@xarc/react";
+import { reduxFeature, connect } from "@xarc/react-redux";
+export { reduxReducers } from "./reducers";
+
+const incNumber = () => {
+  return {
+    type: "INC_NUMBER"
+  };
+};
+
+const decNumber = () => {
+  return {
+    type: "DEC_NUMBER"
+  };
+};
+
+const Demo2 = props => {
+  const { value, dispatch } = props;
+
+  return (
+    <div>
+      <div
+        style={{
+          padding: "5px",
+          marginTop: "15px",
+          border: "solid",
+          marginLeft: "15%",
+          marginRight: "15%"
+        }}
+      >
+        <h2>subapp demo2 with Redux</h2>
+        Redux State Demo: <button onClick={() => dispatch(decNumber())}>&#8810;</button>
+        &nbsp;{value}&nbsp;
+        <button onClick={() => dispatch(incNumber())}>&#8811;</button>
+      </div>
+      <p style={{ textAlign: "center" }}>© {new Date().getFullYear()} Your (Company) name here</p>
+    </div>
+  );
+};
+
+const mapStateToProps = state => {
+  return { value: state.number.value };
+};
+
+export const subapp: ReactSubApp = {
+  Component: connect(mapStateToProps, dispatch => ({ dispatch }))(Demo2),
+  wantFeatures: [
+    reduxFeature({
+      React,
+      shareStore: true,
+      reducers: true, // true => read the reduxReducers export from this file
+      prepare: async initialState => {
+        return { initialState: initialState || { number: { value: 999 } } };
+      }
+    })
+  ]
+};

packages/xarc-create-app/template/src/demo2/reducers.ts

@@ -12,4 +12,6 @@ const number = (store = { value: 0 }, action) => {
   return store;
 };
 
-export default number;
+export const reduxReducers = {
+  number
+};

packages/xarc-create-app/template/src/home/index.tsx

@@ -0,0 +1,36 @@
+import { React, ReactSubApp, createDynamicComponent, staticPropsFeature } from "@xarc/react";
+import electrodePng from "../../static/electrode.png";
+import { message } from "./message";
+
+export const Demo1 = createDynamicComponent(
+  {
+    name: "demo1",
+    getModule: () => import("../demo1")
+  },
+  { ssr: true }
+);
+
+const Home = props => {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <h1>
+        <a href="https://www.electrode.io">
+          Electrode <img src={electrodePng} />
+        </a>
+      </h1>
+      <p>{message}</p>
+      <p>props: {JSON.stringify(props)}</p>
+      <h1>Demo1 subapp as a dynamic component in Home</h1>
+      <Demo1 />
+    </div>
+  );
+};
+
+export const subapp: ReactSubApp = {
+  Component: Home,
+  wantFeatures: [
+    staticPropsFeature({
+      serverModule: require.resolve("./static-props")
+    })
+  ]
+};

packages/xarc-create-app/template/src/home/message.ts

@@ -0,0 +1 @@
+export const message = "Welcome to xarc React Application";

packages/xarc-create-app/template/src/home/static-props.tsx

@@ -0,0 +1,11 @@
+const maxDelay = 50;
+
+export async function getStaticProps() {
+  const delay = Math.floor(Math.random() * maxDelay);
+  return new Promise(resolve => {
+    return setTimeout(
+      () => resolve({ props: { message: "Hello from static props", delay } }),
+      delay
+    );
+  });
+}

packages/xarc-create-app/template/src/server/config.ts

@@ -24,21 +24,7 @@ export const config = {
     "@xarc/app-dev": {
       priority: -1,
       enable: process.env.WEBPACK_DEV === "true"
-    },
-    /**
-     * Register the server routes plugin for the app
-     */
-    "subapp-server": {
-      options: {
-        cdn: {
-          /**
-           * Enable CDN in production mode.  To try this locally, do:
-           * 1. npm run build
-           * 2. NODE_ENV=production clap mock-cloud
-           */
-          enable: process.env.NODE_ENV === "production"
-        }
-      }
     }
-  }
+  },
+  deferStart: true
 };