feat: genesis (#1722)

Author: lzxb

README.md

@@ -61,6 +61,7 @@ This repository is to showcase examples of how Webpack 5's new Module Federation
 - [x] [NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://github.com/module-federation/module-federation-examples/tree/master/nextjs-ssr) (currently in closed beta testing)
 - [x] [Building A Plugin-based Workflow Designer With Angular and Module Federation](https://github.com/manfredsteyer/module-federation-with-angular-dynamic-workflow-designer) — External Example
 - [x] [Vue.js](./vue3-demo/README.md) — Simple host/remote (render function / sfc) example using Vue 3.0.
+- [x] [Vue2 SSR](./genesis/README.md) — This example demonstrates module as a service
 
 # Notes
 

genesis/README.md

@@ -0,0 +1,12 @@
+# Vue Genesis Example
+
+[This example demonstrates module as a service](https://github.com/fmfe/genesis/blob/master/docs/zh-CN/why.md#%E4%BB%80%E4%B9%88%E6%98%AF%E6%A8%A1%E5%9D%97%E5%8D%B3%E6%9C%8D%E5%8A%A1)
+
+- `ssr-mf-about` About service
+- `ssr-mf-home` Home service
+
+# Running Demo
+Run `yarn && yarn dev` or `yarn && yarn build && yarn start`
+
+- [localhost:3001](http://localhost:3001) (ssr-mf-home)
+- [localhost:3002](http://localhost:3002/about) (ssr-mf-about)

genesis/lerna.json

@@ -0,0 +1,5 @@
+{
+  "version": "0.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
+}

genesis/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "concurrently --raw \"lerna run --scope=ssr-mf-about dev\" \"lerna run --scope=ssr-mf-home dev\"",
+    "build": "FORCE_COLOR=1 lerna run --scope=ssr-mf-about build && FORCE_COLOR=1 lerna run --scope=ssr-mf-home build",
+    "start": "concurrently --raw \"lerna run --scope=ssr-mf-about start\" \"lerna run --scope=ssr-mf-home start\""
+  },
+  "devDependencies": {
+    "concurrently": "7.0.0",
+    "lerna": "4.0.0"
+  },
+  "workspaces": {
+    "packages": [
+      "ssr-mf-about",
+      "ssr-mf-home"
+    ]
+  }
+}

genesis/ssr-mf-about/genesis.build.ts

@@ -0,0 +1,9 @@
+import { Build } from '@fmfe/genesis-compiler';
+
+import { ssr } from './genesis';
+
+const start = () => {
+    const build = new Build(ssr);
+    return build.start();
+};
+start();

genesis/ssr-mf-about/genesis.dev.ts

@@ -0,0 +1,13 @@
+import { Watch } from '@fmfe/genesis-compiler';
+
+import { app, ssr, startApp } from './genesis';
+
+const start = async () => {
+    const watch = new Watch(ssr);
+    await watch.start();
+    const renderer = watch.renderer;
+    app.use(watch.devMiddleware);
+    app.use(watch.hotMiddleware);
+    startApp(renderer);
+};
+start();

genesis/ssr-mf-about/genesis.prod.ts

@@ -0,0 +1,15 @@
+import express from 'express';
+
+import { app, ssr, startApp } from './genesis';
+
+const renderer = ssr.createRenderer();
+
+app.use(
+    renderer.staticPublicPath,
+    express.static(renderer.staticDir, {
+        immutable: true,
+        maxAge: '31536000000'
+    })
+);
+
+startApp(renderer);

genesis/ssr-mf-about/genesis.ts

@@ -0,0 +1,61 @@
+import { MF, Renderer, SSR } from '@fmfe/genesis-core';
+import express from 'express';
+import path from 'path';
+
+export const app = express();
+
+export const ssr = new SSR({
+    name: 'ssr-mf-about',
+    build: {
+        extractCSS: false
+    }
+});
+
+export const mf = new MF(ssr, {
+    exposes: {
+        './src/routes': './src/routes.ts'
+    },
+    remotes: [
+        {
+            name: 'ssr-mf-home',
+            clientOrigin: 'http://localhost:3001',
+            serverOrigin: 'http://localhost:3001'
+        }
+    ],
+    shared: {
+        vue: {
+            singleton: true
+        },
+        'vue-router': {
+            singleton: true
+        },
+        'vue-meta': {
+            singleton: true
+        }
+    },
+    typesDir: path.resolve('./types/ssr-mf-about')
+});
+
+app.get(mf.manifestRoutePath, async (req, res, next) => {
+    const t = Number(req.query.t);
+    const maxAwait = 1000 * 60;
+    await mf.exposes.getManifest(t, maxAwait);
+    next();
+});
+
+export const startApp = (renderer: Renderer) => {
+    mf.remote.init(renderer);
+    mf.remote.polling();
+    app.get('/about', async (req, res, next) => {
+        try {
+            const result = await renderer.renderHtml({
+                req,
+                res
+            });
+            res.send(result.data);
+        } catch (e) {
+            next(e);
+        }
+    });
+    app.listen(3002, () => console.log(`http://localhost:3002`));
+};

genesis/ssr-mf-about/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "ssr-mf-about",
+    "version": "2.0.10",
+    "main": "index.js",
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "dev": "genesis-ts-node --project=./tsconfig.node.json genesis.dev",
+        "build": "rm -rf dist types && npm run build:dts && npm run build:vue && npm run build:node",
+        "build:node": "NODE_ENV=production genesis-tsc --build ./tsconfig.node.json",
+        "build:vue": "NODE_ENV=production genesis-ts-node --project=./tsconfig.node.json genesis.build",
+        "build:dts": "genesis-vue-tsc --declaration --emitDeclarationOnly",
+        "type-check": "genesis-vue-tsc --noEmit",
+        "start": "NODE_ENV=production node dist/genesis.prod"
+    },
+    "devDependencies": {
+        "@fmfe/genesis-compiler": "2.0.10",
+        "@types/express": "^4.17.13",
+        "vue": "^2.6.14",
+        "vue-meta": "^2.4.0",
+        "vue-router": "^3.5.3"
+    },
+    "dependencies": {
+        "@fmfe/genesis-core": "2.0.10",
+        "express": "^4.17.2"
+    }
+}

genesis/ssr-mf-about/src/entry-client.ts

@@ -0,0 +1 @@
+export { default } from 'ssr-mf-home/src/common/create-app-client';

genesis/ssr-mf-about/src/entry-server.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'ssr-mf-home/src/common/create-app';
+
+import { routes } from './routes';
+
+export default createApp(routes);

genesis/ssr-mf-about/src/images/logo.svg

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <%- meta %>
+    <%- title %>
+    <%- style %>
+</head>
+
+<body>
+    <%-html %>
+    <%- scriptState %>
+    <%- script %>
+</body>
+
+</html>

genesis/ssr-mf-about/src/index.html

@@ -0,0 +1,8 @@
+import { RouteConfig } from 'vue-router';
+
+export const routes: RouteConfig[] = [
+    {
+        path: '/about',
+        component: () => import('./views/about.vue').then((m) => m.default)
+    }
+];

genesis/ssr-mf-about/src/routes.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue';
+    export default Vue;
+}

genesis/ssr-mf-about/src/shims-vue.d.ts

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>ssr-mf-about</h2>
+        About <br />
+        <img src="../images/logo.svg" width="60" height="60" alt="logo" />
+    </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+    name: 'about',
+    metaInfo() {
+        return {
+            title: 'About'
+        };
+    }
+});
+</script>

genesis/ssr-mf-about/src/views/about.vue

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "allowJs": true,
+        "sourceMap": true,
+        "strict": true,
+        "noEmit": false,
+        "noUnusedLocals": true,
+        "skipLibCheck": true,
+        "noImplicitAny": false,
+        "resolveJsonModule": true,
+        "baseUrl": "./",
+        "declaration": true,
+        "declarationDir": "./types",
+        "types": [
+            "@types/node"
+        ],
+        "allowSyntheticDefaultImports": true
+    },
+    "exclude": [
+        "dist",
+        "types"
+    ]
+}

genesis/ssr-mf-about/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "sourceMap": false,
+        "noEmit": false,
+        "target": "ES2018",
+        "module": "CommonJS",
+        "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "declaration": false,
+        "declarationDir": null,
+        "esModuleInterop": true,
+        "outDir": "./dist"
+    },
+    "exclude": [
+        "dist",
+        "types",
+        "src"
+    ]
+}

genesis/ssr-mf-about/tsconfig.node.json

@@ -0,0 +1,9 @@
+import { Build } from '@fmfe/genesis-compiler';
+
+import { ssr } from './genesis';
+
+const start = () => {
+    const build = new Build(ssr);
+    return build.start();
+};
+start();

genesis/ssr-mf-home/genesis.build.ts

@@ -0,0 +1,13 @@
+import { Watch } from '@fmfe/genesis-compiler';
+
+import { app, ssr, startApp } from './genesis';
+
+const start = async () => {
+    const watch = new Watch(ssr);
+    await watch.start();
+    const renderer = watch.renderer;
+    app.use(watch.devMiddleware);
+    app.use(watch.hotMiddleware);
+    startApp(renderer);
+};
+start();

genesis/ssr-mf-home/genesis.dev.ts

@@ -0,0 +1,15 @@
+import express from 'express';
+
+import { app, ssr, startApp } from './genesis';
+
+const renderer = ssr.createRenderer();
+
+app.use(
+    renderer.staticPublicPath,
+    express.static(renderer.staticDir, {
+        immutable: true,
+        maxAge: '31536000000'
+    })
+);
+
+startApp(renderer);