Feature/support-hippy-vue-next-ssr

.eslintrc.js

@@ -68,6 +68,7 @@ module.exports = {
         '@typescript-eslint/consistent-type-assertions': 'off',
         '@typescript-eslint/naming-convention': 'off',
         '@typescript-eslint/prefer-for-of': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
       },
       parserOptions: {
         project: ['./**/tsconfig.json'],
@@ -169,6 +170,8 @@ module.exports = {
           ['sfc', resolveVue('sfc')],
           ['he', path.resolve(__dirname, './packages/hippy-vue/src/util/entity-decoder')],
           ['@hippy-vue-next-style-parser', resolvePackage('hippy-vue-next-style-parser')],
+          ['@hippy-vue-next', resolvePackage('hippy-vue-next')],
+          ['@hippy-vue-next-server-renderer', resolvePackage('hippy-vue-next-server-renderer')],
         ],
       },
     },

docs/en-us/hippy-vue/vue3.md

@@ -11,7 +11,7 @@
 
 # Architecture
 
-<img src="en-us/assets/img/hippy-vue-next-arch-en.png" alt="hippy-vue-next structure" width="80%"/>
+<img src="assets/img/hippy-vue-next-arch-en.png" alt="hippy-vue-next structure" width="80%"/>
 <br />
 <br />
 
@@ -155,6 +155,106 @@ const router = createRouter({
 });
 ```
 
+# Server Side Render
+
+@hippy/vue-next is now supported SSR, the specific code can be viewed in [Demo](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)'s SSR Part
+, For the implementation and principle of Vue SSR, you can refer to the [official document](https://cn.vuejs.org/guide/scaling-up/ssr.html)。
+
+## How To Use SSR
+
+Read `How To Use SSR` in [Demo](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)
+
+## Principle
+
+### SSR Architecture
+
+<img src="assets/img/hippy-vue-next-ssr-arch-en.png" alt="hippy-vue-next SSR Architecture" width="80%"/>
+
+### Description
+
+The implementation of @hippy/vue-next SSR involves three operating environments: compile time, client runtime, and server runtime. On the basis of vue-next ssr, we developed @hippy/vue-next-server-renderer
+Used for server-side runtime node rendering, developed @hippy/vue-next-compiler-ssr for compiling vue template files at compile time. And @hippy/vue-next-style-parser for server-side rendering
+Style insertion for Native Node List. Let's illustrate what @hippy/vue-next SSR does through the compilation and runtime process of a template
+
+We have a template like `<div id="test" class="test-class"></div>`
+
+- Compiler
+
+  Through @hippy/vue-next-compiler-ssr, our template transform to render funtions like
+
+  ```javascript
+  _push(`{"id":${ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"class":"test-class","id": "test",},"children":[]},`)
+  ```
+
+- Server Side Runtime
+
+  Through @hippy/vue-next-server-renderer, render function obtained during compilation is executed to obtain the json object of the corresponding node.
+  Note that the ssrGetUniqueId method in the render function is provided in @hippy/vue-next-server-renderer, where the server-renderer will also process
+  the attribute values of the nodes, and finally get the json object of the Native Node
+
+   ```javascript
+   { "id":1,"index":0,"name":"View","tagName":"div","props":{"class":"test-class","id": "test",},"children":[] }
+   ```
+
+  > For the handwritten non-sfc template rendering function, it cannot be processed in the compiler, and it is also executed in the server-renderer
+
+- Client Side Runtime
+
+  Through @hippy/vue-next-style-parser, nodes returned by server are insert styles, and insert node props by @hippy/vue-next. Then insert native nodes to
+  native to complete rendering node on screen.
+  After the node is inserted to the screen, the asynchronous jsBundle on the client side is loaded asynchronously through the global.dynamicLoad provided
+  by the system to complete the Hydrate on the client side and execute the follow-up process.
+
+## Different
+
+There are some differences between the Demo initialization of the SSR version and the initialization of the asynchronous version. Here is a detailed description of the differences
+
+- src/main-native.ts Change
+
+1. Use createSSRApp to replace the previous createApp, createApp only supports CSR rendering, while createSSRApp supports both CSR and SSR
+2. The ssrNodeList parameter is added during initialization as the Hydrate initialization node list. Here the initialized node list returned by our server is stored in global.hippySSRNodes, and pass it as a parameter to createSSRApp when calling it.
+3. Call app.mount after router.isReady is completed, because if you don’t wait for the routing to complete, it will be different from the node rendered by the server, causing Hydrate to report an error
+
+```javascript
+- import { createApp } from '@hippy/vue-next';
++ import { createSSRApp } from '@hippy/vue-next';
+- const app: HippyApp = createApp(App, {
++ const app: HippyApp = createSSRApp(App, {
+    // ssr rendered node list, use for hydration
++   ssrNodeList: global.hippySSRNodes,
+});
++ router.isReady().then(() => {
++   // mount app
++   app.mount('#root');
++ });
+```
+
+- src/main-server.ts Add
+
+main-server.ts is the business jsBundle running on the server side, so no code splitting is required. The whole can be built as a bundle. Its core function is to complete the first-screen rendering logic on the server side, process the obtained first-screen Hippy node, insert node attributes and store (if it exists), and return.
+And return the maximum uniqueId of the currently generated node for subsequent use by the client.
+
+>Note that the server-side code is executed synchronously. If a data request is made asynchronously, the request may have been returned before the data is obtained. For this problem, Vue SSR provides a dedicated API to handle this problem:
+>[onServerPrefetch](https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch).
+>There is also an example of using onServerPrefetch in app.vue of [Demo](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/app.vue)
+
+- server.ts Add
+
+server.ts is the entry file executed by the server. Its role is to provide a Web Server, receive the SSR CGI request from the client, and return the result to the client as response data, including the rendering node list, store, and global style list.
+
+- src/main-client.ts Add
+
+main-client.ts is the entry file executed by the client. Unlike the previous pure client rendering, the client entry file of SSR only includes the request to obtain the first screen node, insert the first screen node style, and insert the node into the terminal to complete the rendering. related logic.
+
+- src/ssr-node-ops.ts Add
+
+ssr-node-ops.ts encapsulates the operation logic of inserting, updating, and deleting SSR nodes that do not depend on @hippy/vue-next runtime.
+
+- src/webpack-plugin.ts Add
+
+webpack-plugin.ts encapsulates the initialization logic of Hippy App required for SSR rendering.
+
+
 # Additional Differences
 
 @hippy/vue-next is basically functionally aligned with @hippy/vue now, but the APIs are slightly different from @hippy/vue, and there are still some problems that have not been solved, here is the description:

docs/hippy-vue/vue3.md

@@ -154,6 +154,107 @@ const router: Router = createRouter({
 });
 ```
 
+# 服务端渲染
+
+@hippy/vue-next 现已支持服务端渲染，具体代码可以查看[示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)中的 SSR
+部分，关于 Vue SSR 的实现及原理，可以参考[官方文档](https://cn.vuejs.org/guide/scaling-up/ssr.html)。
+
+## 如何使用SSR
+
+请参考[示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo)说明文档中的 How To Use SSR
+
+## 实现原理
+
+### SSR 架构图
+
+<img src="assets/img/hippy-vue-next-ssr-arch-cn.png" alt="hippy-vue-next SSR 架构图" width="80%"/>
+
+### 详细说明
+
+@hippy/vue-next SSR 的实现涉及到了编译时，客户端运行时，以及服务端运行时三个运行环境。在 vue-next ssr的基础上，我们开发了 @hippy/vue-next-server-renderer
+用于服务端运行时节点的渲染，开发了 @hippy/vue-next-compiler-ssr 用于编译时 vue 模版文件的编译。以及 @hippy/vue-next-style-parser 用于服务端渲染得到的
+Native Node List 的样式插入。下面我们通过一个模版的编译和运行时过程来说明 @hippy/vue-next SSR 做了哪些事情
+
+我们有形如`<div id="test" class="test-class"></div>`的一段模版
+
+- 编译时
+
+  模版经过 @hippy/vue-next-compiler-ssr 的处理，得到了形如
+
+  ```javascript
+  _push(`{"id":${ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"class":"test-class","id": "test",},"children":[]},`)
+  ```
+
+  的 render function
+
+- 服务端运行时
+
+  在服务端运行时，编译时得到的 render function 执行后得到了对应节点的 json object。注意 render function 中的
+  ssrGetUniqueId 方法，是在 @hippy/vue-next-server-renderer 中提供的，在这里 server-renderer 还会对
+  节点的属性值等进行处理，最后得到 Native Node 的 json object
+
+  ```javascript
+  { "id":1,"index":0,"name":"View","tagName":"div","props":{"class":"test-class","id": "test",},"children":[] }
+  ```
+
+  > 对于手写的非 sfc 模版的渲染函数，在 compiler 中无法处理，也是在 server-renderer 中执行的
+
+- 客户端运行时
+
+  在客户端运行时，通过 @hippy/vue-next-style-parser，给服务端返回的节点插入样式，并直接调用 hippy native 提供的
+  native API，将返回的 Native Node 对象作为参数传入，并完成节点的渲染上屏。 完成节点上屏之后，再通过系统提供的
+  global.dynamicLoad 异步加载客户端异步版 jsBundle，完成客户端 Hydrate 并执行后续流程。
+
+## 初始化差异
+
+SSR 版本的 Demo 初始化与异步版的初始化有一些差异部分，这里对其中的差异部分做一个详细的说明
+
+- src/main-native.ts 变更
+
+1. 使用 createSSRApp 替换之前的 createApp，createApp 仅支持 CSR 渲染，而 createSSRApp 同时支持 CSR 和 SSR
+2. 在初始化时候新增了 ssrNodeList 参数，作为 Hydrate 的初始化节点列表。这里我们服务端返回的初始化节点列表保存在了 global.hippySSRNodes 中，并将其作为参数在createSSRApp时传入
+3. 将 app.mount 放到 router.isReady 完成后调用，因为如果不等待路由完成，会与服务端渲染的节点有所不同，导致 Hydrate 时报错
+
+```javascript
+- import { createApp } from '@hippy/vue-next';
++ import { createSSRApp } from '@hippy/vue-next';
+- const app: HippyApp = createApp(App, {
++ const app: HippyApp = createSSRApp(App, {
+    // ssr rendered node list, use for hydration
++   ssrNodeList: global.hippySSRNodes,
+});
++ router.isReady().then(() => {
++   // mount app
++   app.mount('#root');
++ });
+```
+
+- src/main-server.ts 新增
+
+main-server.ts 是在服务端运行的业务 jsBundle，因此不需要做代码分割。整体构建为一个 bundle 即可。其核心功能就是在服务端完成首屏渲染逻辑，并将得到的首屏 Hippy 节点进行处理，插入节点属性和 store（如果存在）后返回，
+以及返回当前已生成节点的最大 uniqueId 供客户端后续使用。
+
+>注意，服务端代码是同步执行的，如果有数据请求走了异步方式，可能会出现还没有拿到数据，请求就已经返回了的情况。对于这个问题，Vue SSR 提供了专用 API 来处理这个问题:
+>[onServerPrefetch](https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch)。
+>在 [Demo](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/app.vue) 的 app.vue 中也有 onServerPrefetch 的使用示例
+
+- server.ts 新增
+
+server.ts 是服务端执行的入口文件，其作用是提供 Web Server，接收客户端的 SSR CGI 请求，并将结果作为响应数据返回给客户端，包括了渲染节点列表，store，以及全局的样式列表。
+
+- src/main-client.ts 新增
+
+main-client.ts 是客户端执行的入口文件，与之前纯客户端渲染不同，SSR的客户端入口文件仅包含了获取首屏节点请求、插入首屏节点样式、以及将节点插入终端完成渲染的相关逻辑。
+
+- src/ssr-node-ops.ts 新增
+
+ssr-node-ops.ts 封装了不依赖 @hippy/vue-next 运行时的 SSR 节点的插入，更新，删除等操作逻辑
+
+- src/webpack-plugin.ts 新增
+
+webpack-plugin.ts 封装了 SSR 渲染所需 Hippy App 的初始化逻辑
+
+
 # 其他差异说明
 
 目前 `@hippy/vue-next` 与 `@hippy/vue` 功能上基本对齐，不过在 API 方面与 @hippy/vue 有一些区别，以及还有一些问题还没有解决，这里做些说明：

examples/hippy-react-demo/src/components/Modal/index.jsx

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'flex-start',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   buttonView: {
     borderColor: SKIN_COLOR.mainLight,
@@ -95,18 +95,24 @@ export default class ModalExpo extends React.Component {
             <Text style={[styles.buttonText, { color: SKIN_COLOR.mainLight }]}>点击弹出浮层</Text>
           </View>
         </View>
-        <View style={{flexDirection: 'row', justifyContent: 'center', marginTop: 20}}>
+        <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20 }}>
           <Text
-            onClick={() => {this.setState({animationType: 'fade'})}}
-            style={[styles.selectionText, {backgroundColor: this.state.animationType === 'fade' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF'}]}
+            onClick={() => {
+              this.setState({ animationType: 'fade' });
+            }}
+            style={[styles.selectionText, { backgroundColor: this.state.animationType === 'fade' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF' }]}
           >fade</Text>
           <Text
-            onClick={() => {this.setState({animationType: 'slide'})}}
-            style={[styles.selectionText, {backgroundColor: this.state.animationType === 'slide' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF'}]}
+            onClick={() => {
+              this.setState({ animationType: 'slide' });
+            }}
+            style={[styles.selectionText, { backgroundColor: this.state.animationType === 'slide' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF' }]}
           >slide</Text>
           <Text
-            onClick={() => {this.setState({animationType: 'slide_fade'})}}
-            style={[styles.selectionText, {backgroundColor: this.state.animationType === 'slide_fade' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF'}]}
+            onClick={() => {
+              this.setState({ animationType: 'slide_fade' });
+            }}
+            style={[styles.selectionText, { backgroundColor: this.state.animationType === 'slide_fade' ? 'rgba(255, 0, 0, 0.5)' : '#FFFFFF' }]}
           >slide_fade</Text>
         </View>
         <Modal

examples/hippy-vue-next-demo/README.md

@@ -8,3 +8,39 @@ This package is the demo project for @hippy/vue-next. Project include most use c
 ### Usage
 Read the hippy framework [doc](https://github.com/Tencent/Hippy/blob/master/README.md#-getting-started) and learn
 how to use.
+
+### How To Use SSR
+
+we were support SSR for @hippy/vue-next. here is only how to use SSR. how to use vue-next doc is [here](https://hippyjs.org/en-us/#/hippy-vue/vue3)
+
+1. Before running vue-next-ssr-demo, you should run `npm run init` at root directory to install dependencies and build front-end sdk packages.
+2. Then run `cd examples/hippy-vue-next-demo` and `npm install --legacy-peer-deps` to install demo dependencies.
+
+Now determine which environment you want build 
+
+> Because our server listening port 8080, so if you are using android device, you should run `adb reverse tcp:8080 tcp:8080`
+> to forward mobile device port to pc port, iOS simulator doesn't need this step.
+
+ensure you were at `examples/hippy-vue-next-demo`.
+
+#### Development
+
+1. run `npm run ssr:dev-build` to build client entry & client bundle, then running hippy debug server
+2. run `npm run ssr:dev-server` to build server bundle and start SSR web server to listen port **8080**.
+3. debug your app with [reference](https://hippyjs.org/en-us/#/guide/debug)
+> You can change server listen port 8080 in `server.ts` by your self, but you also need change request port 8080 in
+> `src/main-client.ts` and modify the adb reverse port, ensure port is same at three place
+
+#### Production
+
+1. run `npm run ssr:prod-build` to build client entry, server bundle, client bundle
+2. run `npm run ssr:prod-server` to start SSR web server to listen port **8080**.
+3. test your app
+> In production, you can use process manage tool to manage your NodeJs process, like pm2.
+> 
+> And you should deploy you web server at real server with real domain, then you can request
+> SSR cgi like https://xxx.com/getFirstScreenData
+>
+
+#### Tips
+> Usage of non SSR is [here](https://hippyjs.org/en-us/#/guide/integration)

examples/hippy-vue-next-demo/package.json

@@ -5,6 +5,9 @@
   "private": true,
   "webMain": "./src/main-web.ts",
   "nativeMain": "./src/main-native.ts",
+  "serverMain": "./src/main-server.ts",
+  "serverEntry": "./server.ts",
+  "ssrMain": "./src/main-client.ts",
   "repository": "https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo",
   "license": "Apache-2.0",
   "author": "OpenHippy Team",
@@ -13,15 +16,24 @@
     "hippy:vendor": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
     "hippy:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.ios.js --config ./scripts/hippy-webpack.android.js",
     "web:dev": "npm run hippy:dev & node ./scripts/env-polyfill.js webpack serve --config ./scripts/hippy-webpack.web-renderer.dev.js",
-    "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js"
+    "web:build": "node ./scripts/env-polyfill.js webpack --config ./scripts/hippy-webpack.web-renderer.js",
+    "ssr:dev-client": "node ./scripts/env-polyfill.js hippy-dev -c ./scripts/webpack-ssr-config/client.dev.js",
+    "ssr:dev-server": "node ./scripts/env-polyfill.js && node ./scripts/webpack.ssr.dev.js",
+    "ssr:prod-build": "node ./scripts/webpack.ssr.build.js",
+    "ssr:prod-server": "node ./dist/server/index.js --mode production"
   },
   "dependencies": {
-    "@hippy/vue-next": "v2.17-latest",
     "@hippy/vue-router-next-history": "latest",
     "@hippy/web-renderer": "v2.17-latest",
-    "@vue/runtime-core": "^3.2.21",
-    "vue": "^3.2.21",
-    "vue-router": "^4.0.12"
+    "@hippy/vue-next": "v2.17-latest",
+    "@hippy/vue-next-server-renderer": "file:../../packages/hippy-vue-next-server-renderer",
+    "@hippy/vue-next-style-parser": "file:../../packages/hippy-vue-next-style-parser",
+    "@vue/runtime-core": "^3.2.46",
+    "@vue/shared": "^3.2.46",
+    "vue": "^3.2.46",
+    "vue-router": "^4.0.12",
+    "express": "^4.18.2",
+    "pinia": "2.0.30"
   },
   "devDependencies": {
     "@babel/core": "^7.12.0",
@@ -41,11 +53,16 @@
     "@hippy/rejection-tracking-polyfill": "^1.0.0",
     "@hippy/vue-css-loader": "^2.0.1",
     "@vitejs/plugin-vue": "^1.9.4",
+    "@hippy/vue-next-compiler-ssr": "file:../../packages/hippy-vue-next-compiler-ssr",
+    "@types/shelljs": "^0.8.5",
     "@vue/cli-service": "^4.5.19",
-    "@vue/compiler-sfc": "^3.2.21",
+    "@vue/compiler-sfc": "^3.2.46",
     "babel-loader": "^8.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "chokidar": "^3.5.3",
     "clean-webpack-plugin": "^4.0.0",
+    "webpack-manifest-plugin": "^4.1.1",
+    "cross-env": "^7.0.3",
     "cross-env-os": "^7.1.1",
     "esbuild": "^0.13.14",
     "esbuild-loader": "^2.18.0",
@@ -55,6 +72,7 @@
     "shelljs": "^0.8.5",
     "terser": "^4.8.0",
     "ts-loader": "^8.4.0",
+    "@types/express": "^4.17.17",
     "url-loader": "^4.0.0",
     "vue-loader": "^17.0.0",
     "webpack": "^4.46.0",

examples/hippy-vue-next-demo/scripts/hippy-webpack.dev.js

@@ -18,7 +18,7 @@ if (fs.existsSync(hippyVueCssLoaderPath)) {
 
 module.exports = {
   mode: 'development',
-  devtool: 'eval-source-map',
+  devtool: 'source-map',
   watch: true,
   watchOptions: {
     aggregateTimeout: 1500,