add subapp2-todo-app sample (#1789)

samples/subapp2-todo-app/.browserslistrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+last 2 versions
+ie >= 11
+> 5%

samples/subapp2-todo-app/.gitignore

@@ -0,0 +1,44 @@
+node_modules
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage
+
+.tmp
+.nyc_output
+config/assets.json
+.isomorphic*
+lib

samples/subapp2-todo-app/README.md

@@ -0,0 +1,41 @@
+# my-x-app
+
+Welcome to your React application using Electrode X.
+
+## Development
+
+Some initial things to do and try:
+
+1. Update your `package.json` to fill in some information.
+
+   - `name`, `description`, `homepage`, `author`
+
+2. Start doing some testing and development
+
+   - First install dependencies
+
+```
+npm install
+```
+
+- Then to develop your app, do
+
+```
+npm run dev
+```
+
+- Once App is running, point browser to <http://localhost:3000>
+
+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 `xclap.ts` when calling `loadXarcDevTasks`.
+
+6. Create a repo and push your app to <https://www.github.com>, and update `repository` in `package.json`.
+
+7. Contribute to the [Electrode Platform](https://github.com/electrode-io/electrode/blob/master/CONTRIBUTING.md).
+
+## Resources
+
+- Check Electrode docs at <https://www.electrode.io/electrode/>

samples/subapp2-todo-app/babel.config.js

@@ -0,0 +1,4 @@
+"use strict";
+module.exports = {
+  extends: "@xarc/app-dev/config/babel/babelrc.js"
+};

samples/subapp2-todo-app/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "my-x-app",
+  "version": "0.0.1",
+  "description": "Web application using Electrode X",
+  "homepage": "",
+  "scripts": {
+    "dev": "clap -q dev",
+    "test": "clap check",
+    "build": "clap build",
+    "start": "node lib/server"
+  },
+  "author": {
+    "name": "",
+    "email": "",
+    "url": ""
+  },
+  "contributors": [],
+  "main": "lib/server/index.js",
+  "keywords": [
+    "electrode",
+    "web"
+  ],
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">= 10",
+    "npm": ">= 6"
+  },
+  "dependencies": {
+    "@xarc/app": "^8.2.0",
+    "@xarc/fastify-server": "^2.0.0",
+    "@xarc/react": "^0.1.0",
+    "@xarc/react-redux": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.6",
+    "@xarc/app-dev": "^8.2.0",
+    "classnames": "^2.2.6",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.3"
+  },
+  "fyn": {
+    "dependencies": {
+      "@xarc/app": "../../packages/xarc-app",
+      "@xarc/react": "../../packages/xarc-react",
+      "@xarc/react-redux": "../../packages/xarc-react-redux"
+    },
+    "devDependencies": {
+      "@xarc/app-dev": "../../packages/xarc-app-dev"
+    }
+  }
+}

samples/subapp2-todo-app/src/app.tsx

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

samples/subapp2-todo-app/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
+};

samples/subapp2-todo-app/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 } } };
+      }
+    })
+  ]
+};

samples/subapp2-todo-app/src/demo2/reducers.ts

@@ -0,0 +1,17 @@
+const number = (store = { value: 0 }, action) => {
+  if (action.type === "INC_NUMBER") {
+    return {
+      value: store.value + 1
+    };
+  } else if (action.type === "DEC_NUMBER") {
+    return {
+      value: store.value - 1
+    };
+  }
+
+  return store;
+};
+
+export const reduxReducers = {
+  number
+};

samples/subapp2-todo-app/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")
+    })
+  ]
+};

samples/subapp2-todo-app/src/home/message.ts

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

samples/subapp2-todo-app/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
+    );
+  });
+}

samples/subapp2-todo-app/src/routes.ts

@@ -0,0 +1,8 @@
+export const favicon = "static/favicon.png";
+
+export default {
+  "/": {
+    pageTitle: "Welcome to Electrode",
+    subApps: ["./home", "./demo1", "./demo2"]
+  }
+};

samples/subapp2-todo-app/src/server/config.ts

@@ -0,0 +1,30 @@
+"use strict";
+
+/**
+ * A simple configuration to setup fastify to serve routes for the
+ * Electrode X webapp.
+ *
+ * To support config composition base on environment, checkout these:
+ *
+ * 1. https://www.npmjs.com/package/electrode-confippet
+ * 2. https://www.npmjs.com/package/config
+ *
+ */
+export const config = {
+  connection: {
+    host: process.env.HOST || "localhost",
+    // Allow Electrode X to control app's listening port during dev
+    // to serve both static assets and app under a unified proxy port
+    port: parseInt(process.env.APP_SERVER_PORT || process.env.PORT || "3000")
+  },
+  plugins: {
+    /**
+     * Register the dev support plugin
+     */
+    "@xarc/app-dev": {
+      priority: -1,
+      enable: process.env.WEBPACK_DEV === "true"
+    }
+  },
+  deferStart: true
+};