From 6b77e4976162972b0b75f343b900efdc9c53528a Mon Sep 17 00:00:00 2001 From: lzxb <1340641314@qq.com> Date: Tue, 8 Mar 2022 18:04:53 +0800 Subject: [PATCH] feat: genesis --- README.md | 1 + genesis/README.md | 12 ++++ genesis/lerna.json | 5 ++ genesis/package.json | 18 ++++++ genesis/ssr-mf-about/genesis.build.ts | 9 +++ genesis/ssr-mf-about/genesis.dev.ts | 13 ++++ genesis/ssr-mf-about/genesis.prod.ts | 15 +++++ genesis/ssr-mf-about/genesis.ts | 61 +++++++++++++++++++ genesis/ssr-mf-about/package.json | 27 ++++++++ genesis/ssr-mf-about/src/entry-client.ts | 1 + genesis/ssr-mf-about/src/entry-server.ts | 5 ++ genesis/ssr-mf-about/src/images/logo.svg | 26 ++++++++ genesis/ssr-mf-about/src/index.html | 16 +++++ genesis/ssr-mf-about/src/routes.ts | 8 +++ genesis/ssr-mf-about/src/shims-vue.d.ts | 4 ++ genesis/ssr-mf-about/src/views/about.vue | 19 ++++++ genesis/ssr-mf-about/tsconfig.json | 28 +++++++++ genesis/ssr-mf-about/tsconfig.node.json | 20 ++++++ genesis/ssr-mf-home/genesis.build.ts | 9 +++ genesis/ssr-mf-home/genesis.dev.ts | 13 ++++ genesis/ssr-mf-home/genesis.prod.ts | 15 +++++ genesis/ssr-mf-home/genesis.ts | 55 +++++++++++++++++ genesis/ssr-mf-home/package.json | 27 ++++++++ genesis/ssr-mf-home/src/common/app.vue | 21 +++++++ .../src/common/create-app-client.ts | 6 ++ genesis/ssr-mf-home/src/common/create-app.ts | 47 ++++++++++++++ genesis/ssr-mf-home/src/entry-client.ts | 1 + genesis/ssr-mf-home/src/entry-server.ts | 4 ++ genesis/ssr-mf-home/src/images/logo.svg | 26 ++++++++ genesis/ssr-mf-home/src/index.html | 16 +++++ genesis/ssr-mf-home/src/routes.ts | 8 +++ genesis/ssr-mf-home/src/shims-vue.d.ts | 4 ++ genesis/ssr-mf-home/src/views/home.vue | 18 ++++++ genesis/ssr-mf-home/tsconfig.json | 28 +++++++++ genesis/ssr-mf-home/tsconfig.node.json | 20 ++++++ package.json | 3 +- 36 files changed, 608 insertions(+), 1 deletion(-) create mode 100644 genesis/README.md create mode 100644 genesis/lerna.json create mode 100644 genesis/package.json create mode 100644 genesis/ssr-mf-about/genesis.build.ts create mode 100644 genesis/ssr-mf-about/genesis.dev.ts create mode 100644 genesis/ssr-mf-about/genesis.prod.ts create mode 100644 genesis/ssr-mf-about/genesis.ts create mode 100644 genesis/ssr-mf-about/package.json create mode 100644 genesis/ssr-mf-about/src/entry-client.ts create mode 100644 genesis/ssr-mf-about/src/entry-server.ts create mode 100644 genesis/ssr-mf-about/src/images/logo.svg create mode 100644 genesis/ssr-mf-about/src/index.html create mode 100644 genesis/ssr-mf-about/src/routes.ts create mode 100644 genesis/ssr-mf-about/src/shims-vue.d.ts create mode 100644 genesis/ssr-mf-about/src/views/about.vue create mode 100644 genesis/ssr-mf-about/tsconfig.json create mode 100644 genesis/ssr-mf-about/tsconfig.node.json create mode 100644 genesis/ssr-mf-home/genesis.build.ts create mode 100644 genesis/ssr-mf-home/genesis.dev.ts create mode 100644 genesis/ssr-mf-home/genesis.prod.ts create mode 100644 genesis/ssr-mf-home/genesis.ts create mode 100644 genesis/ssr-mf-home/package.json create mode 100644 genesis/ssr-mf-home/src/common/app.vue create mode 100644 genesis/ssr-mf-home/src/common/create-app-client.ts create mode 100644 genesis/ssr-mf-home/src/common/create-app.ts create mode 100644 genesis/ssr-mf-home/src/entry-client.ts create mode 100644 genesis/ssr-mf-home/src/entry-server.ts create mode 100644 genesis/ssr-mf-home/src/images/logo.svg create mode 100644 genesis/ssr-mf-home/src/index.html create mode 100644 genesis/ssr-mf-home/src/routes.ts create mode 100644 genesis/ssr-mf-home/src/shims-vue.d.ts create mode 100644 genesis/ssr-mf-home/src/views/home.vue create mode 100644 genesis/ssr-mf-home/tsconfig.json create mode 100644 genesis/ssr-mf-home/tsconfig.node.json diff --git a/README.md b/README.md index 58c14df4bcf..615ceacb289 100644 --- a/README.md +++ b/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 diff --git a/genesis/README.md b/genesis/README.md new file mode 100644 index 00000000000..e87b2781257 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/genesis/lerna.json b/genesis/lerna.json new file mode 100644 index 00000000000..352f7710b8b --- /dev/null +++ b/genesis/lerna.json @@ -0,0 +1,5 @@ +{ + "version": "0.0.0", + "npmClient": "yarn", + "useWorkspaces": true +} diff --git a/genesis/package.json b/genesis/package.json new file mode 100644 index 00000000000..f1b6bec6cc6 --- /dev/null +++ b/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" + ] + } +} diff --git a/genesis/ssr-mf-about/genesis.build.ts b/genesis/ssr-mf-about/genesis.build.ts new file mode 100644 index 00000000000..6d9c804384b --- /dev/null +++ b/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(); diff --git a/genesis/ssr-mf-about/genesis.dev.ts b/genesis/ssr-mf-about/genesis.dev.ts new file mode 100644 index 00000000000..abb221b7729 --- /dev/null +++ b/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(); diff --git a/genesis/ssr-mf-about/genesis.prod.ts b/genesis/ssr-mf-about/genesis.prod.ts new file mode 100644 index 00000000000..fa8ffe53c83 --- /dev/null +++ b/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); diff --git a/genesis/ssr-mf-about/genesis.ts b/genesis/ssr-mf-about/genesis.ts new file mode 100644 index 00000000000..48ec778d162 --- /dev/null +++ b/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`)); +}; diff --git a/genesis/ssr-mf-about/package.json b/genesis/ssr-mf-about/package.json new file mode 100644 index 00000000000..b376cafa647 --- /dev/null +++ b/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" + } +} diff --git a/genesis/ssr-mf-about/src/entry-client.ts b/genesis/ssr-mf-about/src/entry-client.ts new file mode 100644 index 00000000000..9557fc8f5a7 --- /dev/null +++ b/genesis/ssr-mf-about/src/entry-client.ts @@ -0,0 +1 @@ +export { default } from 'ssr-mf-home/src/common/create-app-client'; diff --git a/genesis/ssr-mf-about/src/entry-server.ts b/genesis/ssr-mf-about/src/entry-server.ts new file mode 100644 index 00000000000..c55ced690f5 --- /dev/null +++ b/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); diff --git a/genesis/ssr-mf-about/src/images/logo.svg b/genesis/ssr-mf-about/src/images/logo.svg new file mode 100644 index 00000000000..74c2e0ff297 --- /dev/null +++ b/genesis/ssr-mf-about/src/images/logo.svg @@ -0,0 +1,26 @@ + + \ No newline at end of file diff --git a/genesis/ssr-mf-about/src/index.html b/genesis/ssr-mf-about/src/index.html new file mode 100644 index 00000000000..0499fb3fd2a --- /dev/null +++ b/genesis/ssr-mf-about/src/index.html @@ -0,0 +1,16 @@ + + + +
+ <%- meta %> + <%- title %> + <%- style %> + + + + <%-html %> + <%- scriptState %> + <%- script %> + + + \ No newline at end of file diff --git a/genesis/ssr-mf-about/src/routes.ts b/genesis/ssr-mf-about/src/routes.ts new file mode 100644 index 00000000000..e0e20b1c6ef --- /dev/null +++ b/genesis/ssr-mf-about/src/routes.ts @@ -0,0 +1,8 @@ +import { RouteConfig } from 'vue-router'; + +export const routes: RouteConfig[] = [ + { + path: '/about', + component: () => import('./views/about.vue').then((m) => m.default) + } +]; diff --git a/genesis/ssr-mf-about/src/shims-vue.d.ts b/genesis/ssr-mf-about/src/shims-vue.d.ts new file mode 100644 index 00000000000..1a9f5b5f195 --- /dev/null +++ b/genesis/ssr-mf-about/src/shims-vue.d.ts @@ -0,0 +1,4 @@ +declare module '*.vue' { + import Vue from 'vue'; + export default Vue; +} diff --git a/genesis/ssr-mf-about/src/views/about.vue b/genesis/ssr-mf-about/src/views/about.vue new file mode 100644 index 00000000000..82e61dbd568 --- /dev/null +++ b/genesis/ssr-mf-about/src/views/about.vue @@ -0,0 +1,19 @@ + +