From 1d3138f0627f14c86a120f0a77fd8da6cd3bcedb Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Mon, 25 Sep 2023 15:08:30 +0800
Subject: [PATCH 01/10] feat(vue-next): commit ssr init version

---
 driver/js/.eslintrc.js                        |   3 +
 .../hippy-vue-next-ssr-demo/.gitignore        |  21 +
 .../examples/hippy-vue-next-ssr-demo/.npmrc   |   1 +
 .../hippy-vue-next-ssr-demo/README.md         |  46 ++
 .../examples/hippy-vue-next-ssr-demo/app.d.ts |  10 +
 .../hippy-vue-next-ssr-demo/package.json      |  85 +++
 .../webpack-ssr-config/client.android.js      |   3 +
 .../client.android.vendor.js                  | 108 ++++
 .../scripts/webpack-ssr-config/client.base.js | 181 ++++++
 .../scripts/webpack-ssr-config/client.dev.js  | 195 +++++++
 .../webpack-ssr-config/client.entry.js        |  97 ++++
 .../scripts/webpack-ssr-config/client.ios.js  |   3 +
 .../webpack-ssr-config/client.ios.vendor.js   | 108 ++++
 .../scripts/webpack-ssr-config/server.dev.js  | 186 ++++++
 .../webpack-ssr-config/server.entry.js        | 177 ++++++
 .../scripts/webpack.ssr.build.js              | 109 ++++
 .../scripts/webpack.ssr.dev.js                |  39 ++
 .../hippy-vue-next-ssr-demo/server.ts         |  80 +++
 .../hippy-vue-next-ssr-demo/tsconfig.json     |  35 ++
 driver/js/package.json                        |   5 +-
 .../hippy-vue-next-compiler-ssr/README.md     |   6 +
 .../__test__/component.test.ts                | 132 +++++
 .../__test__/element.test.ts                  | 245 ++++++++
 .../__test__/native-component.test.ts         |  26 +
 .../__test__/setup.ts                         |  19 +
 .../__test__/slot-out.test.ts                 |  56 ++
 .../__test__/utils.ts                         |  38 ++
 .../__test__/vue-built-in.test.ts             |  58 ++
 .../api-extractor.json                        |  38 ++
 .../package-lock.json                         | 115 ++++
 .../hippy-vue-next-compiler-ssr/package.json  |  49 ++
 .../hippy-vue-next-compiler-ssr/src/errors.ts |  54 ++
 .../hippy-vue-next-compiler-ssr/src/index.ts  | 122 ++++
 .../src/runtimeHelpers.ts                     |  70 +++
 .../src/ssrCodegenTransform.ts                | 262 +++++++++
 .../src/transforms/ssrInjectCssVars.ts        |  91 +++
 .../transforms/ssrInjectFallthroughAttrs.ts   | 111 ++++
 .../src/transforms/ssrTransformComponent.ts   | 400 +++++++++++++
 .../src/transforms/ssrTransformElement.ts     | 477 ++++++++++++++++
 .../src/transforms/ssrTransformSlotOutlet.ts  | 113 ++++
 .../src/transforms/ssrTransformSuspense.ts    | 102 ++++
 .../src/transforms/ssrTransformTeleport.ts    |  93 +++
 .../transforms/ssrTransformTransitionGroup.ts | 128 +++++
 .../src/transforms/ssrVFor.ts                 |  70 +++
 .../src/transforms/ssrVIf.ts                  | 102 ++++
 .../src/transforms/ssrVModel.ts               | 184 ++++++
 .../src/transforms/ssrVShow.ts                |  54 ++
 .../hippy-vue-next-server-renderer/README.md  |   6 +
 .../__test__/native.test.ts                   | 102 ++++
 .../__test__/render-attr.test.ts              |  51 ++
 .../__test__/render-vnode.test.ts             | 528 ++++++++++++++++++
 .../__test__/renderer.test.ts                 | 148 +++++
 .../__test__/setup.ts                         |  19 +
 .../__test__/util.test.ts                     |  33 ++
 .../api-extractor.json                        |  38 ++
 .../package-lock.json                         | 435 +++++++++++++++
 .../package.json                              |  54 ++
 .../src/index.ts                              | 117 ++++
 .../src/native.ts                             | 103 ++++
 .../src/render-attrs.ts                       | 102 ++++
 .../src/render-component.ts                   |  48 ++
 .../src/render-vnode.ts                       | 511 +++++++++++++++++
 .../src/renderer.ts                           | 490 ++++++++++++++++
 .../src/util.ts                               |  80 +++
 .../__test__/setup.ts                         |  80 +++
 .../__test__/style-match/css-append.test.ts   | 128 +++++
 .../__test__/style-match}/index.test.ts       | 119 +++-
 .../__test__/style-match}/parser.test.ts      |  12 +-
 .../style-parser/color-parser.test.ts         |  68 +++
 .../__test__/style-parser/css-parser.test.ts  | 118 ++++
 .../hippy-vue-next-style-parser/package.json  |  25 +-
 .../hippy-vue-next-style-parser/src/index.ts  |   6 +
 .../src/style-match/css-append.ts             | 386 +++++++++++++
 .../src/style-match/css-map.ts                | 247 ++++++++
 .../src/style-match}/css-selectors-match.ts   |  40 +-
 .../src/style-match}/css-selectors.ts         | 119 ++--
 .../src/style-match/index.ts                  |  71 +++
 .../src/style-match}/parser.ts                |   5 +-
 .../__test__/built-in-component.test.ts       |   8 +-
 .../__test__/native-component/index.test.ts   |  45 ++
 .../hippy-vue-next/__test__/node-ops.test.ts  |   7 +-
 .../__test__/patch-prop.test.ts               |   7 +-
 .../__test__/runtime/component/index.test.ts  |   7 +-
 .../runtime/document/hippy-document.test.ts   |   7 +-
 .../before-render-to-native-hook.test.ts      |   3 +
 .../element/hippy-comment-element.test.ts     |   3 +
 .../runtime/element/hippy-element.test.ts     |  76 ++-
 .../element/hippy-input-element.test.ts       |   3 +
 .../element/hippy-list-element.test.ts        |   3 +
 .../__test__/runtime/event/event-bus.test.ts  |   7 +-
 .../event/hippy-event-dispatcher.test.ts      |   9 +-
 .../runtime/event/hippy-event-target.test.ts  |  13 +-
 .../runtime/event/hippy-event.test.ts         |   7 +-
 .../__test__/runtime/native/index.test.ts     |   7 +-
 .../__test__/runtime/node/hipyy-node.test.ts  |  34 +-
 .../__test__/runtime/render/index.test.ts     |   8 +-
 .../__test__/runtime/text/hippy-text.test.ts  |   4 +
 .../__test__/util/event.test.ts               |   6 +-
 .../hippy-vue-next/__test__/util/i18n.test.ts |   7 +-
 .../__test__/util/index.test.ts               |  13 +-
 .../util/{node-cache.test.ts => node.test.ts} |   6 +-
 .../hippy-vue-next/__test__/util/rem.test.ts  |   7 +-
 .../__test__/util/screen.test.ts              |   7 +-
 .../js/packages/hippy-vue-next/package.json   |   7 +-
 .../hippy-vue-next/src/config/index.ts        |   6 +
 .../packages/hippy-vue-next/src/hydration.ts  |  80 +++
 .../js/packages/hippy-vue-next/src/index.ts   | 118 ++--
 .../src/native-component/animation.ts         |   8 +
 .../src/native-component/index.ts             |  27 +
 .../src/native-component/swiper.ts            |   9 +-
 .../runtime/element/hippy-comment-element.ts  |   9 +-
 .../src/runtime/element/hippy-element.ts      | 123 +++-
 .../src/runtime/native/index.ts               |  36 +-
 .../src/runtime/node/hippy-node.ts            |  47 +-
 .../src/runtime/style/css-map.ts              |  71 ---
 .../hippy-vue-next/src/runtime/style/index.ts | 136 -----
 .../src/runtime/text/hippy-text.ts            |   8 +-
 .../src/runtime/websocket/websocket.ts        |   3 +-
 .../hippy-vue-next/src/types/index.ts         |  32 ++
 .../packages/hippy-vue-next/src/util/index.ts |  25 +-
 driver/js/scripts/vue-next-configs.js         | 125 +++--
 driver/js/tsconfig.json                       |   2 +
 122 files changed, 9625 insertions(+), 547 deletions(-)
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/.gitignore
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/.npmrc
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/README.md
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/app.d.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/package.json
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.build.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.dev.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/server.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/tsconfig.json
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/README.md
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/component.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/element.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/native-component.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/setup.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/slot-out.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/utils.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/__test__/vue-built-in.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/api-extractor.json
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/package-lock.json
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/package.json
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/errors.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/index.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/runtimeHelpers.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/ssrCodegenTransform.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTeleport.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVFor.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVIf.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVModel.ts
 create mode 100644 driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVShow.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/README.md
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/native.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/render-attr.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/render-vnode.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/renderer.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/setup.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/__test__/util.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/api-extractor.json
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/package-lock.json
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/package.json
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/index.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/native.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/render-attrs.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/render-component.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
 create mode 100644 driver/js/packages/hippy-vue-next-server-renderer/src/util.ts
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/__test__/setup.ts
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/css-append.test.ts
 rename driver/js/packages/{hippy-vue-next/__test__/runtime/style => hippy-vue-next-style-parser/__test__/style-match}/index.test.ts (80%)
 rename driver/js/packages/{hippy-vue-next/__test__/runtime/style => hippy-vue-next-style-parser/__test__/style-match}/parser.test.ts (92%)
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/css-parser.test.ts
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
 rename driver/js/packages/{hippy-vue-next/src/runtime/style => hippy-vue-next-style-parser/src/style-match}/css-selectors-match.ts (84%)
 rename driver/js/packages/{hippy-vue-next/src/runtime/style => hippy-vue-next-style-parser/src/style-match}/css-selectors.ts (82%)
 create mode 100644 driver/js/packages/hippy-vue-next-style-parser/src/style-match/index.ts
 rename driver/js/packages/{hippy-vue-next/src/runtime/style => hippy-vue-next-style-parser/src/style-match}/parser.ts (98%)
 create mode 100644 driver/js/packages/hippy-vue-next/__test__/native-component/index.test.ts
 rename driver/js/packages/hippy-vue-next/__test__/util/{node-cache.test.ts => node.test.ts} (96%)
 create mode 100644 driver/js/packages/hippy-vue-next/src/hydration.ts
 delete mode 100644 driver/js/packages/hippy-vue-next/src/runtime/style/css-map.ts
 delete mode 100644 driver/js/packages/hippy-vue-next/src/runtime/style/index.ts

diff --git a/driver/js/.eslintrc.js b/driver/js/.eslintrc.js
index 99c8ddf95ee..d4ef3af80b6 100644
--- a/driver/js/.eslintrc.js
+++ b/driver/js/.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'],
@@ -171,6 +172,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')],
         ],
       },
     },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/.gitignore b/driver/js/examples/hippy-vue-next-ssr-demo/.gitignore
new file mode 100644
index 00000000000..a0dddc6fb8c
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/.npmrc b/driver/js/examples/hippy-vue-next-ssr-demo/.npmrc
new file mode 100644
index 00000000000..43c97e719a5
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/README.md b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
new file mode 100644
index 00000000000..d21b211e7a4
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
@@ -0,0 +1,46 @@
+# @hippy/vue-next demo
+
+
+### Introduction
+This package is the demo project for @hippy/vue-next. Project include most use case for
+@hippy/vue-next. Just try it.
+
+### 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/getSsrFirstScreenData
+>
+
+#### Tips
+> Usage of non SSR is [here](https://hippyjs.org/en-us/#/guide/integration)
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/app.d.ts b/driver/js/examples/hippy-vue-next-ssr-demo/app.d.ts
new file mode 100644
index 00000000000..d614236bf60
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/app.d.ts
@@ -0,0 +1,10 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}
+
+type NeedToTyped = any;
+
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/package.json b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
new file mode 100644
index 00000000000..252da99ea5a
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "hippy-vue-next-demo",
+  "version": "2.0.0",
+  "description": "A Demo Example For Hippy-Vue-Next Library To Show.",
+  "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",
+  "scripts": {
+    "hippy:dev": "node ./scripts/env-polyfill.js hippy-dev -c ./scripts/hippy-webpack.dev.js",
+    "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",
+    "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-router-next-history": "latest",
+    "@hippy/web-renderer": "latest",
+    "@hippy/vue-next": "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",
+    "core-js": "^3.20.2",
+    "vue": "^3.2.46",
+    "vue-router": "^4.0.12",
+    "express": "^4.18.2",
+    "pinia": "2.0.30"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/polyfill": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "@babel/runtime": "^7.16.0",
+    "@hippy/debug-server-next": "latest",
+    "@hippy/hippy-dynamic-import-plugin": "^2.0.0",
+    "@hippy/hippy-hmr-plugin": "^0.1.0",
+    "@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.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",
+    "file-loader": "^4.3.0",
+    "less": "^4.1.2",
+    "less-loader": "^7.1.0",
+    "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",
+    "webpack-cli": "^4.7.2"
+  },
+  "engines": {
+    "node": ">=15"
+  }
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.js
new file mode 100644
index 00000000000..bfd96dce07b
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.js
@@ -0,0 +1,3 @@
+const { getWebpackSsrBaseConfig } = require('./client.base');
+
+module.exports = getWebpackSsrBaseConfig('android', 'production');
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js
new file mode 100644
index 00000000000..85e8b860784
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.android.vendor.js
@@ -0,0 +1,108 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+
+const platform = 'android';
+
+module.exports = {
+  mode: 'production',
+  bail: true,
+  entry: {
+    vendor: [path.resolve(__dirname, '../vendor.js')],
+  },
+  output: {
+    filename: `[name].${platform}.js`,
+    path: path.resolve(`./dist/${platform}/`),
+    globalObject: '(0, eval)("this")',
+    library: 'hippyVueBase',
+  },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      __PLATFORM__: JSON.stringify(platform),
+    }),
+    new CaseSensitivePathsPlugin(),
+    new VueLoaderPlugin(),
+    new webpack.DllPlugin({
+      context: path.resolve(__dirname, '../..'),
+      path: path.resolve(__dirname, `../../dist/${platform}/[name]-manifest.json`),
+      name: 'hippyVueBase',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(js)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      chrome: 57,
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-class-properties'],
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js
new file mode 100644
index 00000000000..36b6537e19d
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.base.js
@@ -0,0 +1,181 @@
+const path = require('path');
+const fs = require('fs');
+const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const webpack = require('webpack');
+
+const pkg = require('../../package.json');
+
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+/**
+ * get webpack ssr base config
+ *
+ * @param platform build platform
+ * @param env build environment
+ */
+exports.getWebpackSsrBaseConfig = function (platform, env) {
+  // do not generate vendor at development
+  const manifest = require(`../../dist/${platform}/vendor-manifest.json`);
+  return {
+    mode: env,
+    bail: true,
+    devtool: false,
+    entry: {
+      home: [path.resolve(pkg.nativeMain)],
+    },
+    output: {
+      filename: `[name].${platform}.js`,
+      path: path.resolve(`./dist/${platform}/`),
+      globalObject: '(0, eval)("this")',
+      // CDN path can be configured to load children bundles from remote server
+      // publicPath: 'https://xxx/hippy/hippyVueNextDemo/',
+    },
+    plugins: [
+      new webpack.NamedModulesPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify(env),
+        },
+        __VUE_OPTIONS_API__: true,
+        __VUE_PROD_DEVTOOLS__: false,
+        __PLATFORM__: JSON.stringify(platform),
+      }),
+      new CaseSensitivePathsPlugin(),
+      new VueLoaderPlugin(),
+      new HippyDynamicImportPlugin(),
+      new WebpackManifestPlugin({
+        fileName: `manifest.${platform}.json`,
+      }),
+      new webpack.DllReferencePlugin({
+        context: path.resolve(__dirname, '../..'),
+        manifest,
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: 'vue-loader',
+              options: {
+                compilerOptions: {
+                  // disable vue3 dom patch flag，because hippy do not support innerHTML
+                  hoistStatic: false,
+                  // whitespace handler, default is 'condense', it can be set 'preserve'
+                  whitespace: 'condense',
+                  // do not generate html comment node
+                  comments: false,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(le|c)ss$/,
+          use: [cssLoader, 'less-loader'],
+        },
+        {
+          test: /\.t|js$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                sourceType: 'unambiguous',
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      targets: platform === 'android' ? {
+                        chrome: 57,
+                      } : {
+                        ios: 9,
+                      },
+                    },
+                  ],
+                ],
+                plugins: [
+                  ['@babel/plugin-proposal-class-properties'],
+                  ['@babel/plugin-proposal-decorators', { legacy: true }],
+                  ['@babel/plugin-transform-runtime', { regenerator: true }],
+                ],
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpe?g|gif)$/i,
+          use: [{
+            loader: 'url-loader',
+            options: {
+              // if you would like to use base64 for picture, uncomment limit: true
+              // limit: true,
+              limit: 1024,
+              fallback: 'file-loader',
+              name: '[name].[ext]',
+              outputPath: 'assets/',
+            },
+          }],
+        },
+        {
+          test: /\.(ts)$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+                appendTsSuffixTo: [/\.vue$/],
+              },
+            },
+          ],
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.js', '.vue', '.json', '.ts'],
+      alias: (() => {
+        const aliases = {
+          src: path.resolve('./src'),
+        };
+
+        // If @vue/runtime-core was built exist in packages directory then make an alias
+        // Remove the section if you don't use it
+        const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+        if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+          console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+          aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+        } else {
+          console.warn('* Using the @vue/runtime-core defined in package.json');
+        }
+
+        // If @hippy/vue-next was built exist in packages directory then make an alias
+        // Remove the section if you don't use it
+        const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+        if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+          console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+          aliases['@hippy/vue-next'] = hippyVueNextPath;
+        } else {
+          console.warn('* Using the @hippy/vue-next defined in package.json');
+        }
+
+        return aliases;
+      })(),
+    },
+  };
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
new file mode 100644
index 00000000000..f465c4ff488
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js
@@ -0,0 +1,195 @@
+const path = require('path');
+const fs = require('fs');
+const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+const webpack = require('webpack');
+
+const pkg = require('../../package.json');
+
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+/**
+ * webpack ssr client dev config
+ */
+module.exports = {
+  mode: 'development',
+  bail: true,
+  devtool: 'eval-source-map',
+  watch: true,
+  watchOptions: {
+    // file changed, rebuild delay time
+    aggregateTimeout: 1000,
+  },
+  devServer: {
+    remote: {
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 38989,
+    },
+    // support vue dev tools，default is false
+    vueDevtools: false,
+    // not support one debug server debug multiple app
+    multiple: false,
+    // ssr do not support hot replacement now
+    hot: false,
+    // default is true
+    liveReload: false,
+    client: {
+      // hippy do not support error tips layer
+      overlay: false,
+    },
+    devMiddleware: {
+      // write hot replacement file to disk
+      writeToDisk: true,
+    },
+  },
+  entry: {
+    // client async bundle
+    home: [path.resolve(pkg.nativeMain)],
+    // client ssr entry
+    index: [path.resolve(pkg.ssrMain)],
+  },
+  output: {
+    filename: '[name].bundle',
+    path: path.resolve('./dist/dev/'),
+    globalObject: '(0, eval)("this")',
+  },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+        HOST: JSON.stringify(process.env.DEV_HOST || '127.0.0.1'),
+        PORT: JSON.stringify(process.env.DEV_PORT || 38989),
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __PLATFORM__: null,
+    }),
+    new CaseSensitivePathsPlugin(),
+    new VueLoaderPlugin(),
+    new HippyDynamicImportPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+                // do not generate html comment node
+                comments: false,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      chrome: 57,
+                      ios: 9,
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-class-properties'],
+                ['@babel/plugin-proposal-decorators', { legacy: true }],
+                ['@babel/plugin-transform-runtime', { regenerator: true }],
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            // if you would like to use base64 for picture, uncomment limit: true
+            // limit: true,
+            fallback: 'file-loader',
+            name: '[name].[ext]',
+            outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
new file mode 100644
index 00000000000..f710f743a1b
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js
@@ -0,0 +1,97 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const pkg = require('../../package.json');
+
+module.exports = {
+  mode: 'production',
+  devtool: false,
+  entry: {
+    index: path.resolve(pkg.ssrMain),
+  },
+  output: {
+    filename: '[name].js',
+    strictModuleExceptionHandling: true,
+    path: path.resolve('./dist'),
+    globalObject: '(0, eval)("this")',
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __PLATFORM__: null,
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.t|js$/,
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            sourceType: 'unambiguous',
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    chrome: 57,
+                    ios: 9,
+                  },
+                },
+              ],
+            ],
+            plugins: [
+              ['@babel/plugin-proposal-class-properties'],
+              ['@babel/plugin-proposal-decorators', { legacy: true }],
+              ['@babel/plugin-transform-runtime', { regenerator: true }],
+            ],
+          },
+        },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            // comment line when production environment
+            // entry file do not have image asset
+            limit: true,
+            // limit: 8192,
+            // fallback: 'file-loader',
+            // name: '[name].[ext]',
+            // outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.json', '.ts'],
+    alias: (() => ({
+      src: path.resolve('./src'),
+    }))(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.js
new file mode 100644
index 00000000000..eec18701059
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.js
@@ -0,0 +1,3 @@
+const { getWebpackSsrBaseConfig } = require('./client.base');
+
+module.exports = getWebpackSsrBaseConfig('ios', 'production');
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js
new file mode 100644
index 00000000000..6783d5a86ba
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.ios.vendor.js
@@ -0,0 +1,108 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+
+const platform = 'ios';
+
+module.exports = {
+  mode: 'production',
+  bail: true,
+  entry: {
+    vendor: [path.resolve(__dirname, '../vendor.js')],
+  },
+  output: {
+    filename: `[name].${platform}.js`,
+    path: path.resolve(`./dist/${platform}/`),
+    globalObject: '(0, eval)("this")',
+    library: 'hippyVueBase',
+  },
+  plugins: [
+    new webpack.NamedModulesPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      __PLATFORM__: JSON.stringify(platform),
+    }),
+    new CaseSensitivePathsPlugin(),
+    new VueLoaderPlugin(),
+    new webpack.DllPlugin({
+      context: path.resolve(__dirname, '../..'),
+      path: path.resolve(__dirname, `../../dist/${platform}/[name]-manifest.json`),
+      name: 'hippyVueBase',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(js)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      ios: 9,
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-class-properties'],
+              ],
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
new file mode 100644
index 00000000000..e82008654ed
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js
@@ -0,0 +1,186 @@
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const compilerSSR = require('@hippy/vue-next-compiler-ssr');
+const { VueLoaderPlugin } = require('vue-loader');
+const pkg = require('../../package.json');
+
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+let vueNext = '@hippy/vue-next';
+const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist/index.js');
+if (fs.existsSync(hippyVueNextPath)) {
+  console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath}`);
+  vueNext = hippyVueNextPath;
+} else {
+  console.warn('* Using the @hippy/vue-next defined in package.json');
+}
+const { isNativeTag } = require(vueNext);
+
+
+module.exports = {
+  mode: 'development',
+  bail: true,
+  devtool: 'source-map',
+  target: 'node',
+  watch: true,
+  watchOptions: {
+    // file changed, rebuild delay time
+    aggregateTimeout: 1000,
+  },
+  entry: {
+    index: path.resolve(pkg.serverEntry),
+  },
+  output: {
+    filename: 'index.js',
+    strictModuleExceptionHandling: true,
+    path: path.resolve('dist/server'),
+  },
+  plugins: [
+    // only generate one chunk at server side
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+        HIPPY_SSR: true,
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new CaseSensitivePathsPlugin(),
+    new VueLoaderPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // because hippy do not support innerHTML, so we should close this feature
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+                // Vue will recognize non-HTML tags as components, so for Hippy native tags,
+                // Vue needs to be informed to render them as custom elements
+                isCustomElement: tag => isNativeTag && isNativeTag(tag),
+                // real used ssr runtime package, render vue node at server side
+                ssrRuntimeModuleName: '@hippy/vue-next-server-renderer',
+                // do not generate html comment node
+                comments: false,
+              },
+              // real used vue compiler
+              compiler: compilerSSR,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      node: '16.0',
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-nullish-coalescing-operator'],
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            // if you would like to use base64 for picture, uncomment limit: true
+            // limit: true,
+            limit: true,
+            fallback: 'file-loader',
+            name: '[name].[ext]',
+            outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+  externals: {
+    express: 'commonjs express', // this line is just to use the express dependency in a commonjs way
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
new file mode 100644
index 00000000000..3ecee4aea93
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js
@@ -0,0 +1,177 @@
+const path = require('path');
+const fs = require('fs');
+const webpack = require('webpack');
+
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const compilerSSR = require('@hippy/vue-next-compiler-ssr');
+const { VueLoaderPlugin } = require('vue-loader');
+const pkg = require('../../package.json');
+
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+let vueNext = '@hippy/vue-next';
+const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist/index.js');
+if (fs.existsSync(hippyVueNextPath)) {
+  console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath}`);
+  vueNext = hippyVueNextPath;
+} else {
+  console.warn('* Using the @hippy/vue-next defined in package.json');
+}
+const { isNativeTag } = require(vueNext);
+
+module.exports = {
+  mode: 'production',
+  bail: true,
+  devtool: false,
+  target: 'node',
+  entry: {
+    index: path.resolve(pkg.serverEntry),
+  },
+  output: {
+    filename: 'index.js',
+    strictModuleExceptionHandling: true,
+    path: path.resolve('dist/server'),
+  },
+  plugins: [
+    // only generate one chunk at server side
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+        HIPPY_SSR: true,
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new CaseSensitivePathsPlugin(),
+    new VueLoaderPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // because hippy do not support innerHTML, so we should close this feature
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+                // Vue will recognize non-HTML tags as components, so for Hippy native tags,
+                // Vue needs to be informed to render them as custom elements
+                isCustomElement: tag => isNativeTag && isNativeTag(tag),
+                // real used ssr runtime package, render vue node at server side
+                ssrRuntimeModuleName: '@hippy/vue-next-server-renderer',
+                // do not generate html comment node
+                comments: false,
+              },
+              // real used vue compiler
+              compiler: compilerSSR,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      node: '16.0',
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-nullish-coalescing-operator'],
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            // if you would like to use base64 for picture, uncomment limit: true
+            // limit: true,
+            limit: 8192,
+            fallback: 'file-loader',
+            name: '[name].[ext]',
+            outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.build.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.build.js
new file mode 100644
index 00000000000..fe0210af821
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.build.js
@@ -0,0 +1,109 @@
+/**
+ * build js script for ssr production
+ */
+const { arch } = require('os');
+const { exec, rm, cp } = require('shelljs');
+
+let envPrefixStr = 'cross-env-os os="Windows_NT,Linux,Darwin" minVersion=17 NODE_OPTIONS=--openssl-legacy-provider';
+const isArmCpu = arch()
+  .toLowerCase()
+  .includes('arm');
+if (isArmCpu) {
+  envPrefixStr = '';
+}
+
+/**
+ * get executed script
+ *
+ * @param configFile - config file name
+ */
+function getScriptCommand(configFile) {
+  return `${envPrefixStr} webpack --config scripts/webpack-ssr-config/${configFile} --mode production`;
+}
+
+/**
+ * execute script
+ *
+ * @param scriptStr - script content
+ * @param options - shelljs options
+ */
+function runScript(scriptStr, options = { silent: false }) {
+  const result = exec(scriptStr, options);
+  if (result.code !== 0) {
+    console.error(`❌ execute cmd - "${scriptStr}" error: ${result.stderr}`);
+    process.exit(1);
+  }
+}
+
+/**
+ * build ssr client entry bundle
+ */
+function buildServerEntry() {
+  // build server entry
+  runScript(getScriptCommand('server.entry.js'));
+}
+
+/**
+ * build ssr sever and client bundle
+ */
+function buildJsBundle() {
+  // build Android client bundle
+  runScript(getScriptCommand('client.android.js'));
+  // build iOS client bundle
+  runScript(getScriptCommand('client.ios.js'));
+  // 3. build client entry
+  runScript(getScriptCommand('client.entry.js'));
+}
+
+/**
+ * build js vendor for production
+ */
+function buildJsVendor() {
+  // ios
+  runScript(getScriptCommand('client.ios.vendor.js'));
+  // android
+  runScript(getScriptCommand('client.android.vendor.js'));
+}
+
+/**
+ * generate client entry js bundle for production
+ */
+function generateClientEntryForProduction() {
+  // copy js entry to every platform
+  // ios
+  cp('-f', './dist/index.js', './dist/ios/index.ios.js');
+  // android
+  cp('-f', './dist/index.js', './dist/android/index.android.js');
+}
+
+/**
+ * copy generated files to native demo
+ */
+function copyFilesToNativeDemo() {
+  cp('-Rf', './dist/ios/*', '../ios-demo/res/'); // Update the ios demo project
+  cp('-Rf', './dist/android/*', '../android-demo/res/'); // # Update the android project
+}
+
+/**
+ * build production bundle
+ */
+function buildProduction() {
+  // production, build all entry bundle, ssr server should execute by user
+  // first, remove dist directory
+  rm('-rf', './dist');
+  // second, build js vendor
+  buildJsVendor();
+  // third, build all js bundle
+  buildJsBundle();
+  // fourth, build client entry
+  buildServerEntry();
+  // fifth, build every platform's client entry
+  generateClientEntryForProduction();
+  // last, copy all files to native demo
+  copyFilesToNativeDemo();
+}
+
+// build production bundle
+buildProduction();
+
+
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.dev.js
new file mode 100644
index 00000000000..4c225478b6f
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack.ssr.dev.js
@@ -0,0 +1,39 @@
+/**
+ * build script for ssr
+ */
+
+const webpack = require('webpack');
+const { exec } = require('shelljs');
+const serverConfig = require('./webpack-ssr-config/server.dev');
+
+const compiler = webpack(serverConfig);
+let childProcess = null;
+
+/**
+ * execute script
+ *
+ * @param scriptStr - script content
+ * @param options - shelljs options
+ */
+function runScript(scriptStr, options) {
+  if (childProcess) {
+    // kill process first
+    childProcess.kill();
+  }
+  childProcess = exec(scriptStr, options, (code, stdout, stderr) => {
+    if (code) {
+      console.error(`❌ execute cmd - "${scriptStr}" error: ${stderr}`);
+      process.exit(1);
+    }
+  });
+}
+
+compiler.hooks.done.tap('DonePlugin', () => {
+  // restart node process after build success
+  setTimeout(() => {
+    runScript('node ./dist/server/index.js', { async: true, silent: false });
+  }, 0);
+});
+
+// watch server entry change
+compiler.watch({}, () => {});
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/server.ts b/driver/js/examples/hippy-vue-next-ssr-demo/server.ts
new file mode 100644
index 00000000000..db1660b26f5
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/server.ts
@@ -0,0 +1,80 @@
+import express from 'express';
+import { render, HIPPY_GLOBAL_STYLE_NAME } from 'src/main-server';
+
+interface MinifiedStyleDeclaration {
+  [key: number]: number | string;
+}
+
+/**
+ * minify css content
+ */
+function minifyStyleContent(rawStyleContent): NeedToTyped[] | MinifiedStyleDeclaration[] {
+  if (rawStyleContent?.length && Array.isArray(rawStyleContent)) {
+    const minifiedStyle: MinifiedStyleDeclaration[] = [];
+    rawStyleContent.forEach((styleContent) => {
+      // minified style is array, 0 index is selectors, 1 index is declaration, no hash
+      minifiedStyle.push([
+        styleContent.selectors,
+        // minify declarations
+        styleContent.declarations.map(declaration => [declaration.property, declaration.value]),
+      ]);
+    });
+    return minifiedStyle;
+  }
+
+  return rawStyleContent;
+}
+
+/**
+ * get ssr style content
+ *
+ * @param globalStyleName - hippy global style name
+ */
+function getSsrStyleContent(globalStyleName): NeedToTyped[] {
+  if (global.ssrStyleContentList) {
+    return global.ssrStyleContentList;
+  }
+  // cache global style sheet, then non first request could return directly, unnecessary to
+  // serialize again
+  global.ssrStyleContentList = JSON.stringify(minifyStyleContent(global[globalStyleName]));
+
+  return global.ssrStyleContentList;
+}
+
+// server listen port
+const serverPort = 8080;
+// init http server
+const server = express();
+// use json middleware
+server.use(express.json());
+
+// listen request
+server.all('/getSsrFirstScreenData', (req, rsp) => {
+  // get hippy ssr node list and other const
+  render('/', {
+    appName: 'Demo',
+  }, req.body).then(({
+    list,
+    store,
+    uniqueId,
+  }) => {
+    // send response
+    rsp.json({
+      code: 0,
+      data: list,
+      store: store.state.value,
+      uniqueId,
+      styleContent: getSsrStyleContent(HIPPY_GLOBAL_STYLE_NAME),
+    });
+  })
+    .catch((error) => {
+      rsp.json({
+        code: -1,
+        message: `get ssr data error: ${JSON.stringify(error)}`,
+      });
+    });
+});
+
+// start server
+server.listen(serverPort);
+console.log(`Server listen on:${serverPort}`);
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/tsconfig.json b/driver/js/examples/hippy-vue-next-ssr-demo/tsconfig.json
new file mode 100644
index 00000000000..c69a49e317f
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "esnext",
+    "module": "esnext",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "declaration": true,
+    "rootDir": ".",
+    "baseUrl": "./",
+    "outDir": "dist",
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "allowJs": false,
+    "esModuleInterop": true,
+    "noImplicitAny": false
+  },
+  "include": [
+    "src/*.ts",
+    "src/*.vue",
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "test",
+    "app.d.ts",
+    "server.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/dist",
+    "**/node_modules"
+  ]
+}
diff --git a/driver/js/package.json b/driver/js/package.json
index 34f52399fe8..5483b3a8a95 100644
--- a/driver/js/package.json
+++ b/driver/js/package.json
@@ -95,7 +95,10 @@
   },
   "jest": {
     "projects": [
-      "<rootDir>/packages/hippy-vue-next"
+      "<rootDir>/packages/hippy-vue-next",
+      "<rootDir>/packages/hippy-vue-next-style-parser",
+      "<rootDir>/packages/hippy-vue-next-server-renderer",
+      "<rootDir>/packages/hippy-vue-next-compiler-ssr"
     ]
   }
 }
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/README.md b/driver/js/packages/hippy-vue-next-compiler-ssr/README.md
new file mode 100644
index 00000000000..56e67cab020
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/README.md
@@ -0,0 +1,6 @@
+# @hippy/vue-next-compiler-ssr
+
+### Introduction
+
+This package is provided server renderer compiler function for @hippy/vue-next 
+
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/component.test.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/component.test.ts
new file mode 100644
index 00000000000..81937735177
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/component.test.ts
@@ -0,0 +1,132 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { compile } from '../src';
+import { getSsrRenderFunctionBody } from './utils';
+
+/**
+ * component unit test case
+ */
+describe('component.test.ts', () => {
+  describe('component should compile correct', () => {
+    it('base component compile', () => {
+      const { code } = compile('<foo />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_attrs,null,_parent))');
+    });
+    it('custom tag should compile correct', () => {
+      const { code } = compile('<foo />', {
+        isCustomElement: tag => tag === 'foo',
+      });
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"foo","tagName":"foo","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('component compile props', () => {
+      const { code } = compile('<foo id="a" :prop="b" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_mergeProps({id:"a",prop:_ctx.b},_attrs),null,_parent))');
+    });
+    it('component compile event listeners', () => {
+      const { code } = compile('<foo @click="bar" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_mergeProps({onClick:_ctx.bar},_attrs),null,_parent))');
+    });
+    it('dynamic component compile', () => {
+      let { code } = compile('<component is="foo" :prop="b" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderVNode(_push,_createVNode(_resolveDynamicComponent("foo"),_mergeProps({prop:_ctx.b},_attrs),null),_parent)');
+      code = compile('<component :is="foo" :prop="b" />').code;
+      expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderVNode(_push,_createVNode(_resolveDynamicComponent(_ctx.foo),_mergeProps({prop:_ctx.b},_attrs),null),_parent)');
+    });
+    it('v-if component compile', () => {
+      const { code } = compile('<foo v-if="ok" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  if (_ctx.ok) {_push(_ssrRenderComponent(_component_foo,_attrs,null,_parent))} else {_push(`{"id":-1,"name":"comment","props":{"text":""}},`)}');
+    });
+    it('v-for component compile', () => {
+      const { code } = compile('<foo v-for="key in names" :key="key"></foo>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(`{"id":-1,"name":"comment","props":{"text":"["}},`)  _ssrRenderList(_ctx.names,(key) => {_push(_ssrRenderComponent(_component_foo,{key:key},null,_parent))})  _push(`{"id":-1,"name":"comment","props":{"text":"]"}},`)');
+    });
+    it('nested component compile', () => {
+      const { code } = compile('<foo><bar /></foo>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  const _component_bar = _resolveComponent("bar")  _push(_ssrRenderComponent(_component_foo,_attrs,{default:_withCtx((_,_push,_parent,_scopeId) => {if (_push) {_push(_ssrRenderComponent(_component_bar,null,null,_parent,_scopeId))} else {return [          _createVNode(_component_bar)        ]}}),_:1 /* STABLE */},_parent))');
+    });
+  });
+  describe('component compile with slot', () => {
+    it('default slot', () => {
+      const { code } = compile('<foo><div></div></foo>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_attrs,{default:_withCtx((_,_push,_parent,_scopeId) => {if (_push) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},${_scopeId}"children":[]},`)} else {return [          _createVNode("div")        ]}}),_:1 /* STABLE */},_parent))');
+    });
+    it('named slot', () => {
+      const { code } = compile('<foo><template v-slot:named><div /></template></foo>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_attrs,{named:_withCtx((_,_push,_parent,_scopeId) => {if (_push) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},${_scopeId}"children":[]},`)} else {return [          _createVNode("div")        ]}}),_:1 /* STABLE */},_parent))');
+    });
+  });
+  describe('supported vue built-in component compile', () => {
+    it('keep-alive compile', () => {
+      const { code } = compile('<keep-alive><foo /></keep-alive>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_attrs,null,_parent))');
+    });
+    it('transition compile', () => {
+      const { code } = compile('<transition><div /></transition>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+  });
+  describe('inject css vars compile', () => {
+    it('base inject compile', () => {
+      const { code } = compile('<foo />', { ssrCssVars: '{ color }' });
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  const _cssVars = {style:{color:_ctx.color}}  _push(_ssrRenderComponent(_component_foo,_mergeProps(_attrs,_cssVars),null,_parent))');
+    });
+  });
+  describe('scopedId compile', () => {
+    it('single component compile', () => {
+      const { code } = compile('<foo><div /></foo>', { scopeId: 'data-v-12345' });
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _push(_ssrRenderComponent(_component_foo,_attrs,{default:_withCtx((_,_push,_parent,_scopeId) => {if (_push) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"data-v-12345":"",},${_scopeId}"children":[]},`)} else {return [          _createVNode("div")        ]}}),_:1 /* STABLE */},_parent))');
+    });
+  });
+  describe('native component compile', () => {
+    it('swiper compile', () => {
+      const { code } = compile('<swiper></swiper>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_swiper = _resolveComponent("swiper")  _push(_ssrRenderComponent(_component_swiper,_attrs,null,_parent))');
+    });
+    it('swiper-slide compile', () => {
+      const { code } = compile('<swiper-slide></swiper-slide>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_swiper_slide = _resolveComponent("swiper-slide")  _push(_ssrRenderComponent(_component_swiper_slide,_attrs,null,_parent))');
+    });
+    it('pull-header compile', () => {
+      const { code } = compile('<pull-header></pull-header>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_pull_header = _resolveComponent("pull-header")  _push(_ssrRenderComponent(_component_pull_header,_attrs,null,_parent))');
+    });
+    it('pull-footer compile', () => {
+      const { code } = compile('<pull-footer></pull-footer>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_pull_footer = _resolveComponent("pull-footer")  _push(_ssrRenderComponent(_component_pull_footer,_attrs,null,_parent))');
+    });
+    it('waterfall compile', () => {
+      const { code } = compile('<waterfall></waterfall>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_waterfall = _resolveComponent("waterfall")  _push(_ssrRenderComponent(_component_waterfall,_attrs,null,_parent))');
+    });
+    it('waterfall-item compile', () => {
+      const { code } = compile('<waterfall-item></waterfall-item>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_waterfall_item = _resolveComponent("waterfall-item")  _push(_ssrRenderComponent(_component_waterfall_item,_attrs,null,_parent))');
+    });
+    it('ul-refresh-wrapper compile', () => {
+      const { code } = compile('<ul-refresh-wrapper></ul-refresh-wrapper>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_ul_refresh_wrapper = _resolveComponent("ul-refresh-wrapper")  _push(_ssrRenderComponent(_component_ul_refresh_wrapper,_attrs,null,_parent))');
+    });
+    it('ul-refresh compile', () => {
+      const { code } = compile('<ul-refresh></ul-refresh>');
+      expect((getSsrRenderFunctionBody(code))).toEqual('const _component_ul_refresh = _resolveComponent("ul-refresh")  _push(_ssrRenderComponent(_component_ul_refresh,_attrs,null,_parent))');
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/element.test.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/element.test.ts
new file mode 100644
index 00000000000..31792315281
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/element.test.ts
@@ -0,0 +1,245 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { compile } from '../src';
+import { getSsrRenderFunctionBody } from './utils';
+
+/**
+ * element unit test case
+ */
+describe('element.test.ts', () => {
+  describe('tag should compile correct', () => {
+    it('div should compile correct', () => {
+      const { code } = compile('<div></div>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('button should compile correct', () => {
+      const { code } = compile('<button></button>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"button","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('form should compile correct', () => {
+      const { code } = compile('<form></form>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"form","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('img should compile correct', () => {
+      const { code } = compile('<img />');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Image","tagName":"img","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('ul should compile correct', () => {
+      const { code } = compile('<ul></ul>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"ListView","tagName":"ul","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('li should compile correct', () => {
+      const { code } = compile('<li></li>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"ListViewItem","tagName":"li","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('span should compile correct', () => {
+      const { code } = compile('<span></span>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"span","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('label should compile correct', () => {
+      const { code } = compile('<label></label>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"label","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('p should compile correct', () => {
+      const { code } = compile('<p></p>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"p","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('a should compile correct', () => {
+      const { code } = compile('<a></a>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"a","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('input should compile correct', () => {
+      const { code } = compile('<input />');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"input","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('textarea should compile correct', () => {
+      const { code } = compile('<textarea></textarea>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"textarea","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('iframe should compile correct', () => {
+      const { code } = compile('<iframe></iframe>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"WebView","tagName":"iframe","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-swiper should compile correct', () => {
+      const { code } = compile('<hi-swiper></hi-swiper>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"ViewPager","tagName":"hi-swiper","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-swiper-slide should compile correct', () => {
+      const { code } = compile('<hi-swiper-slide></hi-swiper-slide>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"ViewPagerItem","tagName":"hi-swiper-slide","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('pull-header should compile correct', () => {
+      const { code } = compile('<hi-pull-header></hi-pull-header>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"PullHeaderView","tagName":"hi-pull-header","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-pull-footer should compile correct', () => {
+      const { code } = compile('<hi-pull-footer></hi-pull-footer>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"PullFooterView","tagName":"hi-pull-footer","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('dialog should compile correct', () => {
+      const { code } = compile('<dialog></dialog>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Modal","tagName":"dialog","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-ul-refresh-wrapper should compile correct', () => {
+      const { code } = compile('<hi-ul-refresh-wrapper></hi-ul-refresh-wrapper>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"RefreshWrapper","tagName":"hi-ul-refresh-wrapper","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-refresh-wrapper-item should compile correct', () => {
+      const { code } = compile('<hi-refresh-wrapper-item></hi-refresh-wrapper-item>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"RefreshWrapperItemView","tagName":"hi-refresh-wrapper-item","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-waterfall should compile correct', () => {
+      const { code } = compile('<hi-waterfall></hi-waterfall>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"WaterfallView","tagName":"hi-waterfall","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('hi-waterfall-item should compile correct', () => {
+      const { code } = compile('<hi-waterfall-item></hi-waterfall-item>', { isCustomElement: () => true });
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"WaterfallItem","tagName":"hi-waterfall-item","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+  });
+  describe('nested tag should compile correct', () => {
+    it('div with child should compile correct', () => {
+      const { code } = compile('<div><div></div></div>');
+      expect(getSsrRenderFunctionBody(code))
+        .toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},]},`)');
+    });
+  });
+  describe('attrs should compile correct', () => {
+    it('props and event should compile correct', () => {
+      const { code } = compile('<div id="app" class="wrapper" @click="()=>{}" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({id:"app",class:"wrapper"},_attrs))},"onClick":true,},"children":[]},`)');
+    });
+    it('binding value should compile correct', () => {
+      const { code } = compile('<div value="test" :data="show" :text="\'text\'"  />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({value:"test",data:_ctx.show,text:\'text\'},_attrs))},},"children":[]},`)');
+    });
+    it('directive v-bind should compile correct', () => {
+      const { code } = compile('<div v-bind="data" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps(_ctx.data,_attrs))},},"children":[]},`)');
+    });
+    it('static value width dynamic value should compile correct', () => {
+      const { code } = compile('<div style="color:red;" :style="b" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({style:[{"color":"red"},_ctx.b]},_attrs))},},"children":[]},`)');
+    });
+    it('custom directive should compile correct', () => {
+      const { code } = compile('<div v-report="data" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _directive_report = _resolveDirective("report")  _push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps(_attrs,_ssrGetDirectiveProps(_ctx,_directive_report,_ctx.data)))},},"children":[]},`)');
+    });
+    it('static key/ref should compile correct', () => {
+      const { code } = compile('<div key="key" ref="ref" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({key:"key",ref:"ref"},_attrs))},},"children":[]},`)');
+    });
+    it('dynamic key/ref should compile correct', () => {
+      const { code } = compile('<div :key="key" :ref="ref" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({key:_ctx.key,ref:_ctx.ref},_attrs))},},"children":[]},`)');
+    });
+  });
+  describe('control flow compile', () => {
+    it('v-if should compile correct', () => {
+      const { code } = compile('<div v-if="ok" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('if (_ctx.ok) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)} else {_push(`{"id":-1,"name":"comment","props":{"text":""}},`)}');
+    });
+    it('v-else should compile correct', () => {
+      const { code } = compile('<div v-if="ok" /><div v-else />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('if (_ctx.ok) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)} else {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)}');
+    });
+    it('v-else-if should compile correct', () => {
+      const { code } = compile('<div v-if="ok" /><div v-else-if="not" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('if (_ctx.ok) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)} else if (_ctx.not) {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)} else {_push(`{"id":-1,"name":"comment","props":{"text":""}},`)}');
+    });
+    it('v-for should compile correct', () => {
+      const { code } = compile('<div v-for="key in names" :key="key"><span>{{ key }}</span></div>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":-1,"name":"comment","props":{"text":"["}},`)  _ssrRenderList(_ctx.names,(key) => {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"span","props":{"text":"${_ssrInterpolate(key)}",},"children":[]},]},`)})  _push(`{"id":-1,"name":"comment","props":{"text":"]"}},`)');
+    });
+    it('v-on should compile correct', () => {
+      const { code } = compile('<div v-on="foo" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('.stop should compile correct', () => {
+      const { code } = compile('<div @click.stop="foo" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},"onClick":true,},"children":[]},`)');
+    });
+    it('v-show should compile correct', () => {
+      const { code } = compile('<div v-show="ok" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps({style:(_ctx.ok) ? null :{display:"none"}},_attrs))},},"children":[]},`)');
+    });
+    it('input v-model should compile correct', () => {
+      const { code } = compile('<input v-model="bar" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"input","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+    it('input v-model number should compile correct', () => {
+      const { code } = compile('<input type="number" v-model="bar" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"input","props":{"mergedProps":${JSON.stringify(_mergeProps({type:"number",value:_ctx.bar},_attrs))},},"children":[]},`)');
+    });
+    it('input v-model password should compile correct', () => {
+      const { code } = compile('<input type="password" v-model="bar" />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"input","props":{"mergedProps":${JSON.stringify(_mergeProps({type:"password",value:_ctx.bar},_attrs))},},"children":[]},`)');
+    });
+    it('textarea v-model should compile correct', () => {
+      const { code } = compile('<textarea v-model="bar"></textarea>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"TextInput","tagName":"textarea","props":{"mergedProps":${JSON.stringify(_attrs)},},"children":[]},`)');
+    });
+  });
+  describe('inject css vars compile', () => {
+    it('base inject compile', () => {
+      const { code } = compile('<div />', { ssrCssVars: '{ color }' });
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _cssVars = {style:{color:_ctx.color}}  _push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_mergeProps(_attrs,_cssVars))},},"children":[]},`)');
+    });
+  });
+  describe('scopedId compile', () => {
+    it('single tag scopedId compile', () => {
+      const { code } = compile('<div />', { scopeId: 'data-v-12345' });
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},"data-v-12345":"",},"children":[]},`)');
+    });
+    it('nested tag scopedId compile', () => {
+      const { code } = compile('<div><div /></div>', { scopeId: 'data-v-12345' });
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"mergedProps":${JSON.stringify(_attrs)},"data-v-12345":"",},"children":[{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{"data-v-12345":"",},"children":[]},]},`)');
+    });
+  });
+  describe('fragment compile', () => {
+    it('fragment tag compile', () => {
+      const { code } = compile('<div /><div />');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":-1,"name":"comment","props":{"text":"["}},{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},{"id":-1,"name":"comment","props":{"text":"]"}},`)');
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/native-component.test.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/native-component.test.ts
new file mode 100644
index 00000000000..ccea08e86e1
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/native-component.test.ts
@@ -0,0 +1,26 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * native-component unit test case todo
+ */
+describe('native-component.test.ts', () => {
+  it('native-component test', () => {});
+});
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/setup.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/setup.ts
new file mode 100644
index 00000000000..4b99c01a9f7
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/setup.ts
@@ -0,0 +1,19 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/slot-out.test.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/slot-out.test.ts
new file mode 100644
index 00000000000..44859fb9cf0
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/slot-out.test.ts
@@ -0,0 +1,56 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { compile } from '../src';
+import { getSsrRenderFunctionBody } from './utils';
+
+/**
+ * slot-out unit test case
+ */
+describe('slot-out.test.ts', () => {
+  it('basic slot compile', () => {
+    const { code } = compile('<slot />');
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"default",{},null,_push,_parent)');
+  });
+  it('named slot compile', () => {
+    const { code } = compile('<slot name="foo" />');
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"foo",{},null,_push,_parent)');
+  });
+  it('dynamic named slot compile', () => {
+    const { code } = compile('<slot :name="foo" />');
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,_ctx.foo,{},null,_push,_parent)');
+  });
+  it('props slot compile', () => {
+    const { code } = compile('<slot :p="1" bar="2" />');
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"default",{p:1,bar:"2"},null,_push,_parent)');
+  });
+  it('fallback slot compile', () => {
+    const { code } = compile('<slot><span>{{ fallback }}</span></slot>');
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"default",{},() => {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"Text","tagName":"span","props":{"text":"${_ssrInterpolate(_ctx.fallback)}",},"children":[]},`)},_push,_parent)');
+  });
+  it('scopedId slot compile', () => {
+    const { code } = compile('<slot :p="1" bar="2" />', { scopeId: 'data-v-12345' });
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"default",{p:1,bar:"2"},null,_push,_parent,"data-v-12345-s")');
+  });
+  it('scopedId with slotted:false slot compile', () => {
+    const { code } = compile('<slot :p="1" bar="2" />', { scopeId: 'data-v-12345', slotted: false });
+    expect(getSsrRenderFunctionBody(code)).toEqual('_ssrRenderSlot(_ctx.$slots,"default",{p:1,bar:"2"},null,_push,_parent)');
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/utils.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/utils.ts
new file mode 100644
index 00000000000..b5ad74717f0
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/utils.ts
@@ -0,0 +1,38 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * parse and return render function body in compiled ast
+ *
+ * @param code
+ */
+export function getSsrRenderFunctionBody(code: string): string {
+  const start = code.indexOf('function ssrRender');
+  let str = code.substring(start);
+  str = str.substring(str.indexOf('{') + 1);
+  return str.replace(/\n/g, '')
+    .replace(/\r/g, '')
+    .replace(/\{\s+/g, '{')
+    .replace(/\s+}/g, '}')
+    .replace(/:\s+/g, ':')
+    .replace(/,\s+/g, ',')
+    .replace(/}$/, '')
+    .trim();
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/vue-built-in.test.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/vue-built-in.test.ts
new file mode 100644
index 00000000000..393b97d39ba
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/__test__/vue-built-in.test.ts
@@ -0,0 +1,58 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { compile } from '../src';
+import { getSsrRenderFunctionBody } from './utils';
+
+/**
+ * hippy-vue-next does not support these vue built-in tag now, just for test unit case
+ */
+describe('vue-built-in.test.ts', () => {
+  describe('transition-group compile', () => {
+    it('tag compile', () => {
+      const { code } = compile('<transition-group><div v-for="i in list" /></transition-group>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`{"id":-1,"name":"comment","props":{"text":"["}},`)  _ssrRenderList(_ctx.list,(i) => {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},`)})  _push(`{"id":-1,"name":"comment","props":{"text":"]"}},`)');
+    });
+    it('static tag compile', () => {
+      const { code } = compile('<transition-group tag="ul"><div v-for="i in list" /></transition-group>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`<ul${_ssrRenderAttrs(_attrs)}>`)  _ssrRenderList(_ctx.list,(i) => {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},`)})  _push(`</ul>`)');
+    });
+    it('dynamic tag compile', () => {
+      const { code } = compile('<transition-group :tag="foo"><div v-for="i in list" /></transition-group>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`<${_ctx.foo}${_ssrRenderAttrs(_attrs)}>`)  _ssrRenderList(_ctx.list,(i) => {_push(`{"id":${_ssrGetUniqueId()},"index":0,"name":"View","tagName":"div","props":{},"children":[]},`)})  _push(`</${_ctx.foo}>`)');
+    });
+    it('props compile', () => {
+      const { code } = compile('<transition-group tag="ul" class="red" id="ok"></transition-group>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('_push(`<ul${_ssrRenderAttrs(_mergeProps({class:"red",id:"ok"},_attrs))}></ul>`)');
+    });
+  });
+  describe('suspense compile', () => {
+    it('component compile', () => {
+      const { code } = compile('<suspense><foo /></suspense>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _ssrRenderSuspense(_push,{default:() => {_push(_ssrRenderComponent(_component_foo,null,null,_parent))},_:1 /* STABLE */})');
+    });
+  });
+  describe('teleport compile', () => {
+    it('component compile', () => {
+      const { code } = compile('<teleport :to="target"><foo /></teleport>');
+      expect(getSsrRenderFunctionBody(code)).toEqual('const _component_foo = _resolveComponent("foo")  _ssrRenderTeleport(_push,(_push) => {_push(_ssrRenderComponent(_component_foo,null,null,_parent))},_ctx.target,false,_parent)');
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/api-extractor.json b/driver/js/packages/hippy-vue-next-compiler-ssr/api-extractor.json
new file mode 100644
index 00000000000..946f9459d3a
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/api-extractor.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "mainEntryPointFilePath": "./dist/hippy-vue-next-compiler-ssr/src/index.d.ts",
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/index.d.ts"
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "compilerMessageReporting": {
+      "TS2374": {
+        "logLevel": "none"
+      },
+      "TS6200": {
+        "logLevel": "none"
+      },
+      "TS2403": {
+        "logLevel": "none"
+      }
+    },
+    "extractorMessageReporting": {
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      },
+      "ae-wrong-input-file-type": {
+        "logLevel": "none"
+      }
+    }
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/package-lock.json b/driver/js/packages/hippy-vue-next-compiler-ssr/package-lock.json
new file mode 100644
index 00000000000..577a33dcc77
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/package-lock.json
@@ -0,0 +1,115 @@
+{
+  "name": "@hippy/vue-next-compiler-ssr",
+  "version": "unspecified",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@hippy/vue-next-compiler-ssr",
+      "version": "unspecified",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@vue/compiler-core": "^3.2.21",
+        "@vue/compiler-dom": "^3.2.21",
+        "@vue/shared": "^3.2.21"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://mirrors.tencent.com/npm/@babel%2fparser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
+      "license": "MIT",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fshared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "license": "MIT"
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://mirrors.tencent.com/npm/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://mirrors.tencent.com/npm/@babel%2fparser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ=="
+    },
+    "@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "requires": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fshared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://mirrors.tencent.com/npm/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    }
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/package.json b/driver/js/packages/hippy-vue-next-compiler-ssr/package.json
new file mode 100644
index 00000000000..1d90a5d4e5d
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@hippy/vue-next-compiler-ssr",
+  "version": "unspecified",
+  "description": "Vue-Next server render compiler for Hippy native framework",
+  "author": "OpenHippy Team",
+  "homepage": "https://hippyjs.org",
+  "license": "Apache-2.0",
+  "entry": "./src/index.ts",
+  "repository": "https://github.com/Tencent/Hippy",
+  "bugs": {
+    "url": "https://github.com/Tencent/Hippy/issues"
+  },
+  "keywords": [
+    "hippy",
+    "hippy-vue-next",
+    "server-renderer",
+    "compiler"
+  ],
+  "main": "./dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts",
+    "README.md"
+  ],
+  "dependencies": {
+    "@vue/compiler-core": "^3.2.46",
+    "@vue/compiler-dom": "^3.2.46",
+    "@vue/shared": "^3.2.46"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^src/(.*)$": "<rootDir>/src/$1",
+      "@hippy-vue-next-server-renderer/(.*)$": "<rootDir>/../hippy-vue-next-server-renderer/src/$1"
+    },
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "preset": "ts-jest",
+    "setupFiles": [
+      "<rootDir>/__test__/setup.ts"
+    ],
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "verbose": true
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/errors.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/errors.ts
new file mode 100644
index 00000000000..4ccc84f17fd
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/errors.ts
@@ -0,0 +1,54 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type SourceLocation,
+  type CompilerError,
+  createCompilerError,
+  DOMErrorCodes,
+} from '@vue/compiler-dom';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export interface SSRCompilerError extends CompilerError {
+  code: SSRErrorCodes;
+}
+
+export function createSSRCompilerError(
+  code: SSRErrorCodes,
+  loc?: SourceLocation,
+): SSRCompilerError {
+  return createCompilerError(code, loc, SSRErrorMessages) as SSRCompilerError;
+}
+
+export const enum SSRErrorCodes {
+  // eslint-disable-next-line @typescript-eslint/prefer-literal-enum-member
+  X_SSR_UNSAFE_ATTR_NAME = DOMErrorCodes.__EXTEND_POINT__,
+  X_SSR_NO_TELEPORT_TARGET,
+  X_SSR_INVALID_AST_NODE,
+}
+
+export const SSRErrorMessages: { [code: number]: string } = {
+  [SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: 'Unsafe attribute name for SSR.',
+  [SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]:
+    'Missing the \'to\' prop on teleport element.',
+  [SSRErrorCodes.X_SSR_INVALID_AST_NODE]:
+    'Invalid AST node during SSR transform.',
+};
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/index.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/index.ts
new file mode 100644
index 00000000000..a0d0eb26bd4
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/index.ts
@@ -0,0 +1,122 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-param-reassign */
+import {
+  type CodegenResult,
+  baseParse,
+  parserOptions,
+  transform,
+  generate,
+  type CompilerOptions,
+  transformExpression,
+  trackVForSlotScopes,
+  trackSlotScopes,
+  noopDirectiveTransform,
+  transformBind,
+  transformStyle,
+  transformOn,
+} from '@vue/compiler-dom';
+
+import { ssrCodegenTransform } from './ssrCodegenTransform';
+import { ssrInjectCssVars } from './transforms/ssrInjectCssVars';
+import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttrs';
+import {
+  ssrTransformComponent,
+  rawOptionsMap,
+} from './transforms/ssrTransformComponent';
+import { ssrTransformElement } from './transforms/ssrTransformElement';
+import { ssrTransformSlotOutlet } from './transforms/ssrTransformSlotOutlet';
+import { ssrTransformFor } from './transforms/ssrVFor';
+import { ssrTransformIf } from './transforms/ssrVIf';
+import { ssrTransformModel } from './transforms/ssrVModel';
+import { ssrTransformShow } from './transforms/ssrVShow';
+
+/**
+ * ssr compile
+ *
+ * @param template - template string
+ * @param options - compile options
+ *
+ * @public
+ */
+export function compile(
+  template: string,
+  options: CompilerOptions = {},
+): CodegenResult {
+  options = {
+    ...options,
+    // apply DOM-specific parsing options
+    ...parserOptions,
+    ssr: true,
+    inSSR: true,
+    scopeId: options.mode === 'function' ? null : options.scopeId,
+    // always prefix since compiler-ssr doesn't have size concern
+    prefixIdentifiers: true,
+    // disable optimizations that are unnecessary for ssr
+    cacheHandlers: false,
+    hoistStatic: false,
+  };
+
+  const ast = baseParse(template, options);
+
+  // Save raw options for AST. This is needed when performing sub-transforms
+  // on slot vnode branches.
+  rawOptionsMap.set(ast, options);
+
+  transform(ast, {
+    ...options,
+    hoistStatic: false,
+    nodeTransforms: [
+      ssrTransformIf,
+      ssrTransformFor,
+      trackVForSlotScopes,
+      transformExpression,
+      ssrTransformSlotOutlet,
+      ssrInjectFallthroughAttrs,
+      ssrInjectCssVars,
+      ssrTransformElement,
+      ssrTransformComponent,
+      trackSlotScopes,
+      transformStyle,
+      ...(options.nodeTransforms ?? []), // user custom transforms
+    ],
+    directiveTransforms: {
+      // reusing core v-bind
+      bind: transformBind,
+      on: transformOn,
+      // model and show has dedicated SSR handling
+      model: ssrTransformModel,
+      show: ssrTransformShow,
+      // the following are ignored during SSR
+      // on: noopDirectiveTransform,
+      cloak: noopDirectiveTransform,
+      once: noopDirectiveTransform,
+      memo: noopDirectiveTransform,
+      ...(options.directiveTransforms ?? {}), // user custom transforms
+    },
+  });
+
+  // traverse the template AST and convert into SSR codegen AST
+  // by replacing ast.codegenNode.
+  ssrCodegenTransform(ast, options);
+
+  return generate(ast, options);
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/runtimeHelpers.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/runtimeHelpers.ts
new file mode 100644
index 00000000000..17eada4737b
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/runtimeHelpers.ts
@@ -0,0 +1,70 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { registerRuntimeHelpers } from '@vue/compiler-dom';
+
+export const SSR_INTERPOLATE = Symbol('ssrInterpolate');
+export const SSR_RENDER_VNODE = Symbol('ssrRenderVNode');
+export const SSR_RENDER_COMPONENT = Symbol('ssrRenderComponent');
+export const SSR_RENDER_SLOT = Symbol('ssrRenderSlot');
+export const SSR_RENDER_SLOT_INNER = Symbol('ssrRenderSlotInner');
+export const SSR_RENDER_CLASS = Symbol('ssrRenderClass');
+export const SSR_RENDER_STYLE = Symbol('ssrRenderStyle');
+export const SSR_RENDER_ATTRS = Symbol('ssrRenderAttrs');
+export const SSR_RENDER_ATTR = Symbol('ssrRenderAttr');
+export const SSR_RENDER_DYNAMIC_ATTR = Symbol('ssrRenderDynamicAttr');
+export const SSR_RENDER_LIST = Symbol('ssrRenderList');
+export const SSR_INCLUDE_BOOLEAN_ATTR = Symbol('ssrIncludeBooleanAttr');
+export const SSR_LOOSE_EQUAL = Symbol('ssrLooseEqual');
+export const SSR_LOOSE_CONTAIN = Symbol('ssrLooseContain');
+export const SSR_RENDER_DYNAMIC_MODEL = Symbol('ssrRenderDynamicModel');
+export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol('ssrGetDynamicModelProps');
+export const SSR_RENDER_TELEPORT = Symbol('ssrRenderTeleport');
+export const SSR_RENDER_SUSPENSE = Symbol('ssrRenderSuspense');
+export const SSR_GET_DIRECTIVE_PROPS = Symbol('ssrGetDirectiveProps');
+// provided by @hippy/vue-next-server-renderer
+export const SSR_GET_UNIQUEID = Symbol('ssrGetUniqueId');
+
+export const ssrHelpers = {
+  [SSR_INTERPOLATE]: 'ssrInterpolate',
+  [SSR_RENDER_VNODE]: 'ssrRenderVNode',
+  [SSR_RENDER_COMPONENT]: 'ssrRenderComponent',
+  [SSR_RENDER_SLOT]: 'ssrRenderSlot',
+  [SSR_RENDER_SLOT_INNER]: 'ssrRenderSlotInner',
+  [SSR_RENDER_CLASS]: 'ssrRenderClass',
+  [SSR_RENDER_STYLE]: 'ssrRenderStyle',
+  [SSR_RENDER_ATTRS]: 'ssrRenderAttrs',
+  [SSR_RENDER_ATTR]: 'ssrRenderAttr',
+  [SSR_RENDER_DYNAMIC_ATTR]: 'ssrRenderDynamicAttr',
+  [SSR_RENDER_LIST]: 'ssrRenderList',
+  [SSR_INCLUDE_BOOLEAN_ATTR]: 'ssrIncludeBooleanAttr',
+  [SSR_LOOSE_EQUAL]: 'ssrLooseEqual',
+  [SSR_LOOSE_CONTAIN]: 'ssrLooseContain',
+  [SSR_RENDER_DYNAMIC_MODEL]: 'ssrRenderDynamicModel',
+  [SSR_GET_DYNAMIC_MODEL_PROPS]: 'ssrGetDynamicModelProps',
+  [SSR_RENDER_TELEPORT]: 'ssrRenderTeleport',
+  [SSR_RENDER_SUSPENSE]: 'ssrRenderSuspense',
+  [SSR_GET_DIRECTIVE_PROPS]: 'ssrGetDirectiveProps',
+  [SSR_GET_UNIQUEID]: 'ssrGetUniqueId',
+};
+
+// Note: these are helpers imported from @vue/server-renderer
+// make sure the names match!
+registerRuntimeHelpers(ssrHelpers);
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/ssrCodegenTransform.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/ssrCodegenTransform.ts
new file mode 100644
index 00000000000..3aba6ca273f
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/ssrCodegenTransform.ts
@@ -0,0 +1,262 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-param-reassign */
+/* eslint-disable import/no-cycle */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type RootNode,
+  type BlockStatement,
+  type TemplateLiteral,
+  createCallExpression,
+  createTemplateLiteral,
+  NodeTypes,
+  type TemplateChildNode,
+  ElementTypes,
+  createBlockStatement,
+  type CompilerOptions,
+  type IfStatement,
+  type CallExpression,
+  isText,
+  processExpression,
+  createSimpleExpression,
+  createCompoundExpression,
+  createTransformContext,
+  createRoot,
+} from '@vue/compiler-dom';
+import { isString } from '@vue/shared';
+
+import { createSSRCompilerError, SSRErrorCodes } from './errors';
+import { ssrHelpers } from './runtimeHelpers';
+import { ssrProcessComponent } from './transforms/ssrTransformComponent';
+import { ssrProcessElement } from './transforms/ssrTransformElement';
+import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet';
+import { ssrProcessFor } from './transforms/ssrVFor';
+import { ssrProcessIf } from './transforms/ssrVIf';
+
+// Because SSR codegen output is completely different from client-side output
+// (e.g. multiple elements can be concatenated into a single template literal
+// instead of each getting a corresponding call), we need to apply an extra
+// transform pass to convert the template AST into a fresh JS AST before
+// passing it to codegen.
+
+export function ssrCodegenTransform(
+  ast: RootNode,
+  options: CompilerOptions,
+): void {
+  const context = createSSRTransformContext(ast, options);
+
+  // inject SFC <style> CSS variables
+  // we do this instead of inlining the expression to ensure the vars are
+  // only resolved once per render
+  if (options.ssrCssVars) {
+    const varsExp = processExpression(
+      createSimpleExpression(options.ssrCssVars, false),
+      createTransformContext(createRoot([]), options),
+    );
+    context.body.push(createCompoundExpression(['const _cssVars = { style: ', varsExp, '}']));
+  }
+
+  const isFragment = ast.children.length > 1 && ast.children.some(c => !isText(c));
+  processChildren(ast, context, isFragment);
+  ast.codegenNode = createBlockStatement(context.body);
+
+  // Finalize helpers.
+  // We need to separate helpers imported from 'vue' vs. '@vue/server-renderer'
+  ast.ssrHelpers = Array.from(new Set([
+    ...Array.from(ast.helpers).filter(h => h in ssrHelpers),
+    ...context.helpers,
+  ]));
+
+  ast.helpers = new Set(Array.from(ast.helpers).filter(h => !(h in ssrHelpers)));
+}
+
+export type SSRTransformContext = ReturnType<typeof createSSRTransformContext>;
+
+function createSSRTransformContext(
+  root: RootNode,
+  options: CompilerOptions,
+  helpers: Set<symbol> = new Set(),
+  withSlotScopeId = false,
+) {
+  const body: BlockStatement['body'] = [];
+  let currentString: TemplateLiteral | null = null;
+
+  return {
+    root,
+    options,
+    body,
+    helpers,
+    withSlotScopeId,
+    onError:
+      options.onError
+      ?? ((e) => {
+        throw e;
+      }),
+    helper<T extends symbol>(name: T): T {
+      helpers.add(name);
+      return name;
+    },
+    pushStringPart(part: TemplateLiteral['elements'][0]) {
+      if (!currentString) {
+        const currentCall = createCallExpression('_push');
+        body.push(currentCall);
+        currentString = createTemplateLiteral([]);
+        currentCall.arguments.push(currentString);
+      }
+      const bufferedElements = currentString.elements;
+      const lastItem = bufferedElements[bufferedElements.length - 1];
+      if (isString(part) && isString(lastItem)) {
+        bufferedElements[bufferedElements.length - 1] += part;
+      } else {
+        bufferedElements.push(part);
+      }
+    },
+    pushStatement(statement: IfStatement | CallExpression) {
+      // close current string
+      currentString = null;
+      body.push(statement);
+    },
+  };
+}
+
+function createChildContext(
+  parent: SSRTransformContext,
+  withSlotScopeId = parent.withSlotScopeId,
+): SSRTransformContext {
+  // ensure child inherits parent helpers
+  return createSSRTransformContext(
+    parent.root,
+    parent.options,
+    parent.helpers,
+    withSlotScopeId,
+  );
+}
+
+interface Container {
+  children: TemplateChildNode[];
+}
+
+// eslint-disable-next-line complexity
+export function processChildren(
+  parent: Container,
+  context: SSRTransformContext,
+  asFragment = false,
+  disableNestedFragments = false,
+): void | never {
+  if (asFragment) {
+    // use hippy comment format instead vue format, eg. <!--[-->
+    context.pushStringPart('{"id": -1,"name":"comment","props":{"text":"["}},');
+  }
+  const { children } = parent;
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    switch (child.type) {
+      case NodeTypes.ELEMENT:
+        switch (child.tagType) {
+          case ElementTypes.ELEMENT:
+            ssrProcessElement(child, context);
+            break;
+          case ElementTypes.COMPONENT:
+            ssrProcessComponent(child, context, parent);
+            break;
+          case ElementTypes.SLOT:
+            ssrProcessSlotOutlet(child, context);
+            break;
+          case ElementTypes.TEMPLATE:
+            // TODO
+            break;
+          default: {
+            context.onError(createSSRCompilerError(
+              SSRErrorCodes.X_SSR_INVALID_AST_NODE,
+              (child as any).loc,
+            ));
+            // make sure we exhaust all possible types
+            return child;
+          }
+        }
+        break;
+      case NodeTypes.TEXT:
+        // NodeTypes.TEXT like <div>content</div>. hippy do not support. just comment it,
+        // we should used like <div><span>content</span></div>. span,p,label can use to wrap
+        // text content
+        // context.pushStringPart(`"${child.content}"`);
+        break;
+      case NodeTypes.COMMENT:
+        // no need to escape comment here because the AST can only
+        // contain valid comments.
+        // hippy comment node
+        context.pushStringPart(`{"id": -1,"name":"comment","props":{"text":"${child.content
+          .replace(/\n/g, ' ')
+          .replace(/"/g, '\\"')}"}},`);
+        break;
+      case NodeTypes.INTERPOLATION:
+        // 没有用标签包裹的双花括号差值，类似纯文本，Hippy 不支持
+        // NodeTypes.INTERPOLATION like <div>{{content}}</div>. hippy do not support.
+        // just comment it like TEXT
+        // context.pushStringPart(
+        //   createCallExpression(context.helper(SSR_INTERPOLATE), [
+        //     child.content,
+        //   ]),
+        // );
+        break;
+      case NodeTypes.IF:
+        ssrProcessIf(child, context, disableNestedFragments);
+        break;
+      case NodeTypes.FOR:
+        ssrProcessFor(child, context, disableNestedFragments);
+        break;
+      case NodeTypes.IF_BRANCH:
+        // no-op - handled by ssrProcessIf
+        break;
+      case NodeTypes.TEXT_CALL:
+      case NodeTypes.COMPOUND_EXPRESSION:
+        // no-op - these two types can never appear as template child node since
+        // `transformText` is not used during SSR compile.
+        break;
+      default: {
+        context.onError(createSSRCompilerError(
+          SSRErrorCodes.X_SSR_INVALID_AST_NODE,
+          (child as any).loc,
+        ));
+        // make sure we exhaust all possible types
+        return child;
+      }
+    }
+  }
+  if (asFragment) {
+    // use hippy comment format instead vue format, eg. <!--]-->
+    context.pushStringPart('{"id": -1,"name":"comment","props":{"text":"]"}},');
+  }
+  return undefined;
+}
+
+export function processChildrenAsStatement(
+  parent: Container,
+  parentContext: SSRTransformContext,
+  asFragment = false,
+  withSlotScopeId = parentContext.withSlotScopeId,
+): BlockStatement {
+  const childContext = createChildContext(parentContext, withSlotScopeId);
+  processChildren(parent, childContext, asFragment);
+  return createBlockStatement(childContext.body);
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
new file mode 100644
index 00000000000..1f5f135ff5d
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectCssVars.ts
@@ -0,0 +1,91 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  locStub,
+  createSimpleExpression,
+  type RootNode,
+  type TemplateChildNode,
+  findDir,
+  isBuiltInType,
+} from '@vue/compiler-dom';
+
+export const ssrInjectCssVars: NodeTransform = (node, context) => {
+  if (!context.ssrCssVars) {
+    return;
+  }
+
+  // _cssVars is initialized once per render function
+  // the code is injected in ssrCodegenTransform when creating the
+  // ssr transform context
+  if (node.type === NodeTypes.ROOT) {
+    // eslint-disable-next-line no-param-reassign
+    context.identifiers._cssVars = 1;
+  }
+
+  const { parent } = context;
+  if (!parent || parent.type !== NodeTypes.ROOT) {
+    return;
+  }
+
+  if (node.type === NodeTypes.IF_BRANCH) {
+    for (const child of node.children) {
+      injectCssVars(child);
+    }
+  } else {
+    injectCssVars(node);
+  }
+};
+
+function injectCssVars(node: RootNode | TemplateChildNode) {
+  if (
+    node.type === NodeTypes.ELEMENT
+    && (node.tagType === ElementTypes.ELEMENT
+      || node.tagType === ElementTypes.COMPONENT)
+    && !findDir(node, 'for')
+  ) {
+    if (isBuiltInType(node.tag, 'Suspense')) {
+      for (const child of node.children) {
+        if (
+          child.type === NodeTypes.ELEMENT
+          && child.tagType === ElementTypes.TEMPLATE
+        ) {
+          // suspense slot
+          child.children.forEach(injectCssVars);
+        } else {
+          injectCssVars(child);
+        }
+      }
+    } else {
+      node.props.push({
+        type: NodeTypes.DIRECTIVE,
+        name: 'bind',
+        arg: undefined,
+        exp: createSimpleExpression('_cssVars', false),
+        modifiers: [],
+        loc: locStub,
+      });
+    }
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
new file mode 100644
index 00000000000..fb665b39d48
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -0,0 +1,111 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  locStub,
+  createSimpleExpression,
+  type RootNode,
+  type TemplateChildNode,
+  type ParentNode,
+  findDir,
+  isBuiltInType,
+} from '@vue/compiler-dom';
+
+const filterChild = (node: ParentNode) => node.children.filter(n => n.type !== NodeTypes.COMMENT);
+
+const hasSingleChild = (node: ParentNode): boolean => filterChild(node).length === 1;
+
+// eslint-disable-next-line complexity
+export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
+  // _attrs is provided as a function argument.
+  // mark it as a known identifier so that it doesn't get prefixed by
+  // transformExpression.
+  if (node.type === NodeTypes.ROOT) {
+    // eslint-disable-next-line no-param-reassign
+    context.identifiers._attrs = 1;
+  }
+
+  if (
+    node.type === NodeTypes.ELEMENT
+    && node.tagType === ElementTypes.COMPONENT
+    && (isBuiltInType(node.tag, 'Transition')
+      || isBuiltInType(node.tag, 'KeepAlive'))
+  ) {
+    const rootChildren = filterChild(context.root);
+    if (rootChildren.length === 1 && rootChildren[0] === node) {
+      if (hasSingleChild(node)) {
+        injectFallthroughAttrs(node.children[0]);
+      }
+      return;
+    }
+  }
+
+  const { parent } = context;
+  if (!parent || parent.type !== NodeTypes.ROOT) {
+    return;
+  }
+
+  if (node.type === NodeTypes.IF_BRANCH && hasSingleChild(node)) {
+    // detect cases where the parent v-if is not the only root level node
+    let hasEncounteredIf = false;
+    for (const c of filterChild(parent)) {
+      if (
+        c.type === NodeTypes.IF
+        || (c.type === NodeTypes.ELEMENT && findDir(c, 'if'))
+      ) {
+        // multiple root v-if
+        if (hasEncounteredIf) return;
+        hasEncounteredIf = true;
+      } else if (
+        // node before v-if
+        !hasEncounteredIf
+        // non else nodes
+        || !(c.type === NodeTypes.ELEMENT && findDir(c, /else/, true))
+      ) {
+        return;
+      }
+    }
+    injectFallthroughAttrs(node.children[0]);
+  } else if (hasSingleChild(parent)) {
+    injectFallthroughAttrs(node);
+  }
+};
+
+function injectFallthroughAttrs(node: RootNode | TemplateChildNode) {
+  if (
+    node.type === NodeTypes.ELEMENT
+    && (node.tagType === ElementTypes.ELEMENT
+      || node.tagType === ElementTypes.COMPONENT)
+    && !findDir(node, 'for')
+  ) {
+    node.props.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'bind',
+      arg: undefined,
+      exp: createSimpleExpression('_attrs', false),
+      modifiers: [],
+      loc: locStub,
+    });
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
new file mode 100644
index 00000000000..63404366c06
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -0,0 +1,400 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-param-reassign */
+/* eslint-disable @typescript-eslint/prefer-for-of */
+/* eslint-disable no-else-return */
+/* eslint-disable import/no-cycle */
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  createCallExpression,
+  resolveComponentType,
+  buildProps,
+  type ComponentNode,
+  type SlotFnBuilder,
+  createFunctionExpression,
+  buildSlots,
+  type FunctionExpression,
+  type TemplateChildNode,
+  createIfStatement,
+  createSimpleExpression,
+  getBaseTransformPreset,
+  DOMNodeTransforms,
+  DOMDirectiveTransforms,
+  createReturnStatement,
+  type ReturnStatement,
+  Namespaces,
+  locStub,
+  type RootNode,
+  type TransformContext,
+  type CompilerOptions,
+  type TransformOptions,
+  createRoot,
+  createTransformContext,
+  traverseNode,
+  type ExpressionNode,
+  type TemplateNode,
+  SUSPENSE,
+  TELEPORT,
+  TRANSITION_GROUP,
+  CREATE_VNODE,
+  type CallExpression,
+  type JSChildNode,
+  RESOLVE_DYNAMIC_COMPONENT,
+  TRANSITION,
+} from '@vue/compiler-dom';
+import { isSymbol, isObject, isArray } from '@vue/shared';
+
+import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers';
+import {
+  type SSRTransformContext,
+  processChildren,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+import { buildSSRProps } from './ssrTransformElement';
+import {
+  ssrProcessSuspense,
+  ssrTransformSuspense,
+} from './ssrTransformSuspense';
+import { ssrProcessTeleport } from './ssrTransformTeleport';
+import {
+  ssrProcessTransitionGroup,
+  ssrTransformTransitionGroup,
+} from './ssrTransformTransitionGroup';
+
+// We need to construct the slot functions in the 1st pass to ensure proper
+// scope tracking, but the children of each slot cannot be processed until
+// the 2nd pass, so we store the WIP slot functions in a weakMap during the 1st
+// pass and complete them in the 2nd pass.
+const wipMap = new WeakMap<ComponentNode, WIPSlotEntry[]>();
+
+// eslint-disable-next-line symbol-description
+const WIP_SLOT = Symbol();
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface WIPSlotEntry {
+  type: typeof WIP_SLOT;
+  fn: FunctionExpression;
+  children: TemplateChildNode[];
+  vnodeBranch: ReturnStatement;
+}
+
+const componentTypeMap = new WeakMap<
+ComponentNode,
+string | symbol | CallExpression
+>();
+
+// ssr component transform is done in two phases:
+// In phase 1. we use `buildSlot` to analyze the children of the component into
+// WIP slot functions (it must be done in phase 1 because `buildSlot` relies on
+// the core transform context).
+// In phase 2. we convert the WIP slots from phase 1 into ssr-specific codegen
+// nodes.
+export const ssrTransformComponent: NodeTransform = (node, context) => {
+  if (
+    node.type !== NodeTypes.ELEMENT
+    || node.tagType !== ElementTypes.COMPONENT
+  ) {
+    return;
+  }
+
+  const component = resolveComponentType(node, context, true /* ssr */);
+  const isDynamicComponent =    isObject(component) && component.callee === RESOLVE_DYNAMIC_COMPONENT;
+  componentTypeMap.set(node, component);
+
+  if (isSymbol(component)) {
+    if (component === SUSPENSE) {
+      return ssrTransformSuspense(node, context);
+    }
+    if (component === TRANSITION_GROUP) {
+      return ssrTransformTransitionGroup(node, context);
+    }
+    return; // other built-in components: fallthrough
+  }
+
+  // Build the fallback vnode-based branch for the component's slots.
+  // We need to clone the node into a fresh copy and use the buildSlots' logic
+  // to get access to the children of each slot. We then compile them with
+  // a child transform pipeline using vnode-based transforms (instead of ssr-
+  // based ones), and save the result branch (a ReturnStatement) in an array.
+  // The branch is retrieved when processing slots again in ssr mode.
+  const vnodeBranches: ReturnStatement[] = [];
+  const clonedNode = clone(node);
+
+  return function ssrPostTransformComponent() {
+    // Using the cloned node, build the normal VNode-based branches (for
+    // fallback in case the child is render-fn based). Store them in an array
+    // for later use.
+    if (clonedNode.children.length) {
+      buildSlots(clonedNode, context, (props, children) => {
+        vnodeBranches.push(createVNodeSlotBranch(props, children, context));
+        return createFunctionExpression(undefined);
+      });
+    }
+
+    let propsExp: string | JSChildNode = 'null';
+    if (node.props.length) {
+      // note we are not passing ssr: true here because for components, v-on
+      // handlers should still be passed
+      const { props, directives } = buildProps(
+        node,
+        context,
+        undefined,
+        true,
+        isDynamicComponent,
+      );
+      if (props || directives.length) {
+        propsExp = buildSSRProps(props, directives, context);
+      }
+    }
+
+    const wipEntries: WIPSlotEntry[] = [];
+    wipMap.set(node, wipEntries);
+
+    const buildSSRSlotFn: SlotFnBuilder = (props, children, loc) => {
+      const fn = createFunctionExpression(
+        [props ?? '_', '_push', '_parent', '_scopeId'],
+        undefined, // no return, assign body later
+        true, // newline
+        true, // isSlot
+        loc,
+      );
+      wipEntries.push({
+        type: WIP_SLOT,
+        fn,
+        children,
+        // also collect the corresponding vnode branch built earlier
+        vnodeBranch: vnodeBranches[wipEntries.length],
+      });
+      return fn;
+    };
+
+    const slots = node.children.length
+      ? buildSlots(node, context, buildSSRSlotFn).slots
+      : 'null';
+
+    if (typeof component !== 'string') {
+      // dynamic component that resolved to a `resolveDynamicComponent` call
+      // expression - since the resolved result may be a plain element (string)
+      // or a VNode, handle it with `renderVNode`.
+      node.ssrCodegenNode = createCallExpression(
+        context.helper(SSR_RENDER_VNODE),
+        [
+          '_push',
+          createCallExpression(context.helper(CREATE_VNODE), [
+            component,
+            propsExp,
+            slots,
+          ]),
+          '_parent',
+        ],
+      );
+    } else {
+      node.ssrCodegenNode = createCallExpression(
+        context.helper(SSR_RENDER_COMPONENT),
+        [component, propsExp, slots, '_parent'],
+      );
+    }
+  };
+};
+
+// eslint-disable-next-line complexity
+export function ssrProcessComponent(
+  node: ComponentNode,
+  context: SSRTransformContext,
+  parent: { children: TemplateChildNode[] },
+): void {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const component = componentTypeMap.get(node)!;
+  if (!node.ssrCodegenNode) {
+    // this is a built-in component that fell-through.
+    if (component === TELEPORT) {
+      return ssrProcessTeleport(node, context);
+    } else if (component === SUSPENSE) {
+      return ssrProcessSuspense(node, context);
+    } else if (component === TRANSITION_GROUP) {
+      return ssrProcessTransitionGroup(node, context);
+    } else {
+      // real fall-through: Transition / KeepAlive
+      // just render its children.
+      // #5352: if is at root level of a slot, push an empty string.
+      // this does not affect the final output, but avoids all-comment slot
+      // content of being treated as empty by ssrRenderSlot().
+      if ((parent as WIPSlotEntry).type === WIP_SLOT) {
+        context.pushStringPart('');
+      }
+      // #5351: filter out comment children inside transition
+      if (component === TRANSITION) {
+        node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT);
+      }
+      processChildren(node, context);
+    }
+  } else {
+    // finish up slot function expressions from the 1st pass.
+    const wipEntries = wipMap.get(node) ?? [];
+    for (let i = 0; i < wipEntries.length; i++) {
+      const { fn, vnodeBranch } = wipEntries[i];
+      // For each slot, we generate two branches: one SSR-optimized branch and
+      // one normal vnode-based branch. The branches are taken based on the
+      // presence of the 2nd `_push` argument (which is only present if the slot
+      // is called by `_ssrRenderSlot`.
+      fn.body = createIfStatement(
+        createSimpleExpression('_push', false),
+        processChildrenAsStatement(
+          wipEntries[i],
+          context,
+          false,
+          true /* withSlotScopeId */,
+        ),
+        vnodeBranch,
+      );
+    }
+
+    // component is inside a slot, inherit slot scope Id
+    if (context.withSlotScopeId) {
+      node.ssrCodegenNode.arguments.push('_scopeId');
+    }
+
+    if (typeof component === 'string') {
+      // static component
+      context.pushStatement(createCallExpression('_push', [node.ssrCodegenNode]));
+    } else {
+      // dynamic component (`resolveDynamicComponent` call)
+      // the codegen node is a `renderVNode` call
+      context.pushStatement(node.ssrCodegenNode);
+    }
+  }
+}
+
+export const rawOptionsMap = new WeakMap<RootNode, CompilerOptions>();
+
+const [baseNodeTransforms, baseDirectiveTransforms] =  getBaseTransformPreset(true);
+const vnodeNodeTransforms = [...baseNodeTransforms, ...DOMNodeTransforms];
+const vnodeDirectiveTransforms = {
+  ...baseDirectiveTransforms,
+  ...DOMDirectiveTransforms,
+};
+
+function createVNodeSlotBranch(
+  props: ExpressionNode | undefined,
+  children: TemplateChildNode[],
+  parentContext: TransformContext,
+): ReturnStatement {
+  // apply a sub-transform using vnode-based transforms.
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const rawOptions = rawOptionsMap.get(parentContext.root)!;
+
+  const subOptions = {
+    ...rawOptions,
+    // overwrite with vnode-based transforms
+    nodeTransforms: [
+      ...vnodeNodeTransforms,
+      ...(rawOptions.nodeTransforms ?? []),
+    ],
+    directiveTransforms: {
+      ...vnodeDirectiveTransforms,
+      ...(rawOptions.directiveTransforms ?? {}),
+    },
+  };
+
+  // wrap the children with a wrapper template for proper children treatment.
+  const wrapperNode: TemplateNode = {
+    type: NodeTypes.ELEMENT,
+    ns: Namespaces.HTML,
+    tag: 'template',
+    tagType: ElementTypes.TEMPLATE,
+    isSelfClosing: false,
+    // important: provide v-slot="props" on the wrapper for proper
+    // scope analysis
+    props: [
+      {
+        type: NodeTypes.DIRECTIVE,
+        name: 'slot',
+        exp: props,
+        arg: undefined,
+        modifiers: [],
+        loc: locStub,
+      },
+    ],
+    children,
+    loc: locStub,
+    codegenNode: undefined,
+  };
+  subTransform(wrapperNode, subOptions, parentContext);
+  return createReturnStatement(children);
+}
+
+function subTransform(
+  node: TemplateChildNode,
+  options: TransformOptions,
+  parentContext: TransformContext,
+) {
+  const childRoot = createRoot([node]);
+  const childContext = createTransformContext(childRoot, options);
+  // this sub transform is for vnode fallback branch so it should be handled
+  // like normal render functions
+  childContext.ssr = false;
+  // inherit parent scope analysis state
+  childContext.scopes = { ...parentContext.scopes };
+  childContext.identifiers = { ...parentContext.identifiers };
+  childContext.imports = parentContext.imports;
+  // traverse
+  traverseNode(childRoot, childContext);
+  // merge helpers/components/directives into parent context
+  (['helpers', 'components', 'directives'] as const).forEach((key) => {
+    childContext[key].forEach((value: any, helperKey: any) => {
+      if (key === 'helpers') {
+        const parentCount = parentContext.helpers.get(helperKey);
+        if (parentCount === undefined) {
+          parentContext.helpers.set(helperKey, value);
+        } else {
+          parentContext.helpers.set(helperKey, value + parentCount);
+        }
+      } else {
+        (parentContext[key] as any).add(value);
+      }
+    });
+  });
+  // imports/hoists are not merged because:
+  // - imports are only used for asset urls and should be consistent between
+  //   node/client branches
+  // - hoists are not enabled for the client branch here
+}
+
+function clone(v: any): any {
+  if (isArray(v)) {
+    return v.map(clone);
+  } else if (isObject(v)) {
+    const res: any = {};
+    // eslint-disable-next-line guard-for-in, no-restricted-syntax
+    for (const key in v) {
+      res[key] = clone(v[key]);
+    }
+    return res;
+  } else {
+    return v;
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
new file mode 100644
index 00000000000..32321b2db6a
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -0,0 +1,477 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable complexity */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-continue */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable no-undef-init */
+/* eslint-disable import/no-cycle */
+import {
+  type NodeTransform,
+  NodeTypes,
+  ElementTypes,
+  type TemplateLiteral,
+  createTemplateLiteral,
+  createCallExpression,
+  createConditionalExpression,
+  createSimpleExpression,
+  buildProps,
+  type DirectiveNode,
+  type PlainElementNode,
+  createCompilerError,
+  ErrorCodes,
+  type CallExpression,
+  createArrayExpression,
+  type ExpressionNode,
+  type JSChildNode,
+  type ArrayExpression,
+  hasDynamicKeyVBind,
+  MERGE_PROPS,
+  isStaticArgOf,
+  isStaticExp,
+  type AttributeNode,
+  buildDirectiveArgs,
+  type TransformContext,
+  type PropsExpression,
+} from '@vue/compiler-dom';
+import {
+  capitalize,
+  isBooleanAttr,
+  isBuiltInDirective,
+  isSSRSafeAttrName,
+  propsToAttrMap,
+} from '@vue/shared';
+import { getHippyNativeViewName, getHippyTagName } from '@hippy-vue-next-server-renderer/native';
+
+import { createSSRCompilerError, SSRErrorCodes } from '../errors';
+import {
+  SSR_RENDER_CLASS,
+  SSR_RENDER_STYLE,
+  SSR_RENDER_DYNAMIC_ATTR,
+  SSR_INTERPOLATE,
+  SSR_INCLUDE_BOOLEAN_ATTR,
+  SSR_GET_DIRECTIVE_PROPS,
+  SSR_GET_UNIQUEID,
+} from '../runtimeHelpers';
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform';
+
+// for directives with children overwrite (e.g. v-html & v-text), we need to
+// store the raw children so that they can be added in the 2nd pass.
+const rawChildrenMap = new WeakMap<
+PlainElementNode,
+TemplateLiteral['elements'][0]
+>();
+
+/**
+ * return tag is text or not
+ *
+ * @param tag - tag name
+ */
+function isTextTag(tag: string): boolean {
+  return ['span', 'p', 'label', 'a'].includes(tag);
+}
+
+/**
+ * get native real event listener name for binding event name
+ *
+ * @param event - event name
+ * @param tagName - event target tag name
+ */
+function getHippyEventKeyInSSR(event: string, tagName: string): string {
+  const eventMap = {
+    div: {
+      touchStart: 'onTouchDown',
+      touchstart: 'onTouchDown',
+      touchmove: 'onTouchMove',
+      touchend: 'onTouchEnd',
+      touchcancel: 'onTouchCancel',
+    },
+    ul: { listReady: 'initialListReady' },
+    li: { disappear: 'onDisappear' },
+    input: {
+      change: 'onChangeText',
+      select: 'onSelectionChange',
+    },
+    swiper: {
+      dropped: 'onPageSelected',
+      dragging: 'onPageScroll',
+      stateChanged: 'onPageScrollStateChanged',
+    },
+  };
+  let curEventMap = {};
+  switch (tagName) {
+    case 'div':
+    case 'button':
+    case 'img':
+    case 'span':
+    case 'label':
+    case 'p':
+    case 'a':
+      curEventMap = eventMap.div;
+      break;
+    case 'ul':
+      curEventMap = eventMap.ul;
+      break;
+    case 'li':
+      curEventMap = eventMap.li;
+      break;
+    case 'textarea':
+    case 'input':
+      curEventMap = eventMap.input;
+      break;
+    case 'swiper':
+      curEventMap = eventMap.swiper;
+      break;
+    default:
+      break;
+  }
+  if (curEventMap[event]) {
+    return curEventMap[event];
+  }
+  return `on${capitalize(event)}`;
+}
+
+export const ssrTransformElement: NodeTransform = (node, context) => {
+  if (
+    node.type !== NodeTypes.ELEMENT
+    || node.tagType !== ElementTypes.ELEMENT
+  ) {
+    return;
+  }
+
+  return function ssrPostTransformElement() {
+    const openTag: TemplateLiteral['elements'] = ['{"id":'];
+    // generate hippy uniqueId
+    openTag.push(createCallExpression(context.helper(SSR_GET_UNIQUEID), []));
+    // push name and tagName attr
+    openTag.push(`,"index":0,"name":"${getHippyNativeViewName(node.tag)}","tagName":"${getHippyTagName(node.tag)}","props":{`);
+    // v-bind="obj", v-bind:[key] and custom directives can potentially
+    // overwrite other static attrs and can affect final rendering result,
+    // so when they are present we need to bail out to full `renderAttrs`
+    const hasDynamicVBind = hasDynamicKeyVBind(node);
+    const hasCustomDir = node.props.some(p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name));
+    const needMergeProps = hasDynamicVBind || hasCustomDir;
+    // hippy images source, Android use src=imgUrl, iOS use source=[{"uri": imgUrl}]
+    // numberOfRows will makes Image flicker on Android, iOS only
+    // all props of hippy node(except id and class) will store in "props" and "attributes"(for debug)
+    // need merge props should merge in node props when at client runtime, not in ssr
+    if (needMergeProps) {
+      const { props, directives } = buildProps(
+        node,
+        context,
+        node.props,
+        false /* isComponent */,
+        false /* isDynamicComponent */,
+        true /* ssr */,
+      );
+      if (props || directives.length) {
+        const mergedProps = buildSSRProps(props, directives, context);
+        openTag.push('"mergedProps":');
+        openTag.push(createCallExpression('JSON.stringify', [mergedProps]));
+        openTag.push(',');
+      }
+    }
+
+    // bookkeeping static/dynamic class merging.
+    let dynamicClassBinding: CallExpression | undefined = undefined;
+    let staticClassBinding: string | undefined = undefined;
+    // all style bindings are converted to dynamic by transformStyle.
+    // but we need to make sure to merge them.
+    let dynamicStyleBinding: CallExpression | undefined = undefined;
+
+    for (let i = 0; i < node.props.length; i++) {
+      const prop = node.props[i];
+      // ignore true-value/false-value on input
+      if (node.tag === 'input' && isTrueFalseValue(prop)) {
+        continue;
+      }
+      // special cases with children override
+      if (prop.type === NodeTypes.DIRECTIVE) {
+        if (prop.name === 'on') {
+          // directive event handled for hippy.
+          // hippy event handle: at ssr for web, onXXX will ignore, so we need to add Event listener
+          // onXXX=true, so that hippy native should add event listener
+          const { arg } = prop;
+          if (arg?.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic) {
+            openTag.push(`"${getHippyEventKeyInSSR(arg.content, node.tag)}": true,`);
+          }
+        } else if (prop.name === 'html' && prop.exp) {
+          // v-html/v-text/v-textarea/ hippy do not support
+          // rawChildrenMap.set(node, prop.exp);
+        } else if (prop.name === 'text' && prop.exp) {
+          // node.children = [createInterpolation(prop.exp, prop.loc)];
+        } else if (prop.name === 'slot') {
+          context.onError(createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc));
+        } else if (isTextareaWithValue(node, prop) && prop.exp) {
+          // if (!needMergeProps) {
+          //   node.children = [createInterpolation(prop.exp, prop.loc)];
+          // }
+        } else if (!needMergeProps && prop.name !== 'on') {
+          // Directive transforms.
+          const directiveTransform = context.directiveTransforms[prop.name];
+          if (directiveTransform) {
+            const { props, ssrTagParts } = directiveTransform(
+              prop,
+              node,
+              context,
+            );
+            if (ssrTagParts) {
+              // openTag.push(...ssrTagParts);
+            }
+            for (let j = 0; j < props.length; j++) {
+              const { key, value } = props[j];
+              if (isStaticExp(key)) {
+                let attrName = key.content;
+                // static key attr
+                if (attrName === 'key' || attrName === 'ref') {
+                  continue;
+                }
+                if (attrName === 'class') {
+                  openTag.push(
+                    '"class":"',
+                    (dynamicClassBinding = createCallExpression(
+                      context.helper(SSR_RENDER_CLASS),
+                      [value],
+                    )),
+                    '",',
+                  );
+                } else if (attrName === 'style') {
+                  if (dynamicStyleBinding) {
+                    // already has style binding, merge into it.
+                    mergeCall(dynamicStyleBinding, value);
+                  } else {
+                    openTag.push(
+                      '"style":',
+                      (dynamicStyleBinding = createCallExpression(
+                        context.helper(SSR_RENDER_STYLE),
+                        [value],
+                      )),
+                      ',',
+                    );
+                  }
+                } else {
+                  attrName = node.tag.indexOf('-') > 0
+                    ? attrName // preserve raw name on custom elements
+                    : propsToAttrMap[attrName] ?? attrName.toLowerCase();
+                  if (isBooleanAttr(attrName)) {
+                    openTag.push(createConditionalExpression(
+                      createCallExpression(
+                        context.helper(SSR_INCLUDE_BOOLEAN_ATTR),
+                        [value],
+                      ),
+                      createSimpleExpression(` ${attrName}`, true),
+                      createSimpleExpression('', true),
+                      false /* no newline */,
+                    ));
+                  } else if (isSSRSafeAttrName(attrName)) {
+                    openTag.push(`"${key.content}":`);
+                    openTag.push(createCallExpression('JSON.stringify', [value]));
+                    openTag.push(',');
+                  } else {
+                    context.onError(createSSRCompilerError(
+                      SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME,
+                      key.loc,
+                    ));
+                  }
+                }
+              } else {
+                // dynamic key attr
+                // this branch is only encountered for custom directive
+                // transforms that returns properties with dynamic keys
+                const args: CallExpression['arguments'] = [key, value];
+                // if (needTagForRuntime) {
+                //   args.push(`"${node.tag}"`);
+                // }
+                openTag.push(createCallExpression(
+                  context.helper(SSR_RENDER_DYNAMIC_ATTR),
+                  args,
+                ));
+              }
+            }
+          }
+        }
+      } else {
+        // special case: value on <textarea>
+        // eslint-disable-next-line no-lonely-if
+        if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
+          rawChildrenMap.set(node, prop.value.content);
+        } else if (!needMergeProps) {
+          if (prop.name === 'key' || prop.name === 'ref') {
+            continue;
+          }
+          // static prop
+          if (prop.name === 'class' && prop.value) {
+            staticClassBinding = JSON.stringify(prop.value.content);
+          }
+
+          openTag.push(`"${prop.name}":${
+            prop.value ? `"${prop.value.content}",` : '"",'
+          }`);
+        }
+      }
+    }
+
+    // handle co-existence of dynamic + static class bindings
+    if (dynamicClassBinding && staticClassBinding) {
+      // convert hippy style, static class insert to style props. dynamic class generate getStyle function
+      mergeCall(dynamicClassBinding, staticClassBinding);
+      removeStaticBinding(openTag, 'class');
+    }
+    // span/label/p/a, these tags are text node in native, so the value store in text props
+    if (isTextTag(node.tag)) {
+      const textChild = node.children.filter(item => item.type === NodeTypes.TEXT
+        || item.type === NodeTypes.INTERPOLATION);
+      if (textChild.length) {
+        // 2(NodeTypes.TEXT),5(NodeTypes.INTERPOLATION) 2 and 5 are text node, store value in text props
+        openTag.push('"text":"');
+        textChild.forEach((child) => {
+          if (child.type === 2 /* NodeTypes.TEXT */) {
+            openTag.push(child.content);
+          }
+          if (child.type === 5 /* NodeTypes.INTERPOLATION */) {
+            openTag.push(createCallExpression(context.helper(SSR_INTERPOLATE), [
+              child.content,
+            ]));
+          }
+        });
+        openTag.push('",');
+      }
+    }
+
+    if (context.scopeId) {
+      // hippy scopeId just set props, like <div data-v-sdkfj12="true" />
+      openTag.push(`"${context.scopeId}":""`);
+      openTag.push(',');
+    }
+
+    openTag.push('},');
+    node.ssrCodegenNode = createTemplateLiteral(openTag);
+  };
+};
+
+export function buildSSRProps(
+  props: PropsExpression | undefined,
+  directives: DirectiveNode[],
+  context: TransformContext,
+): JSChildNode {
+  let mergePropsArgs: JSChildNode[] = [];
+  if (props) {
+    if (props.type === NodeTypes.JS_CALL_EXPRESSION) {
+      // already a mergeProps call
+      mergePropsArgs = props.arguments as JSChildNode[];
+    } else {
+      mergePropsArgs.push(props);
+    }
+  }
+  if (directives.length) {
+    for (const dir of directives) {
+      mergePropsArgs.push(createCallExpression(context.helper(SSR_GET_DIRECTIVE_PROPS), [
+        '_ctx',
+        ...buildDirectiveArgs(dir, context).elements,
+      ] as JSChildNode[]));
+    }
+  }
+
+  return mergePropsArgs.length > 1
+    ? createCallExpression(context.helper(MERGE_PROPS), mergePropsArgs)
+    : mergePropsArgs[0];
+}
+
+function isTrueFalseValue(prop: DirectiveNode | AttributeNode) {
+  if (prop.type === NodeTypes.DIRECTIVE) {
+    return (
+      prop.name === 'bind'
+      && prop.arg
+      && isStaticExp(prop.arg)
+      && (prop.arg.content === 'true-value' || prop.arg.content === 'false-value')
+    );
+  }
+  return prop.name === 'true-value' || prop.name === 'false-value';
+}
+
+function isTextareaWithValue(
+  node: PlainElementNode,
+  prop: DirectiveNode,
+): boolean {
+  return Boolean(node.tag === 'textarea'
+    && prop.name === 'bind'
+    && isStaticArgOf(prop.arg, 'value'));
+}
+
+function mergeCall(call: CallExpression, arg: string | JSChildNode) {
+  const existing = call.arguments[0] as ExpressionNode | ArrayExpression;
+  if (existing.type === NodeTypes.JS_ARRAY_EXPRESSION) {
+    existing.elements.push(arg);
+  } else {
+    call.arguments[0] = createArrayExpression([existing, arg]);
+  }
+}
+
+function removeStaticBinding(
+  tag: TemplateLiteral['elements'],
+  binding: string,
+) {
+  const regExp = new RegExp(`"${binding}":".*",$`);
+
+  const i = tag.findIndex(e => typeof e === 'string' && regExp.test(e));
+
+  if (i > -1) {
+    tag.splice(i, 1);
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function findVModel(node: PlainElementNode): DirectiveNode | undefined {
+  return node.props.find(p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp) as DirectiveNode | undefined;
+}
+
+export function ssrProcessElement(
+  node: PlainElementNode,
+  context: SSRTransformContext,
+): void {
+  const elementsToAdd = node.ssrCodegenNode!.elements;
+  for (let j = 0; j < elementsToAdd.length; j++) {
+    context.pushStringPart(elementsToAdd[j]);
+  }
+
+  // Handle slot scopeId
+  if (context.withSlotScopeId) {
+    context.pushStringPart(createSimpleExpression('_scopeId', false));
+  }
+
+  // hippy children open tag
+  context.pushStringPart('"children":[');
+
+  const rawChildren = rawChildrenMap.get(node);
+  if (rawChildren) {
+    context.pushStringPart(rawChildren);
+  } else if (node.children.length) {
+    processChildren(node, context);
+  }
+
+  // closing tag
+  context.pushStringPart(']},');
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
new file mode 100644
index 00000000000..4d2c5bec5df
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
@@ -0,0 +1,113 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable import/no-cycle */
+import {
+  type NodeTransform,
+  isSlotOutlet,
+  processSlotOutlet,
+  createCallExpression,
+  type SlotOutletNode,
+  createFunctionExpression,
+  NodeTypes,
+  ElementTypes,
+  resolveComponentType,
+  TRANSITION,
+} from '@vue/compiler-dom';
+
+import { SSR_RENDER_SLOT, SSR_RENDER_SLOT_INNER } from '../runtimeHelpers';
+import {
+  type SSRTransformContext,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+// eslint-disable-next-line complexity
+export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
+  if (isSlotOutlet(node)) {
+    const { slotName, slotProps } = processSlotOutlet(node, context);
+
+    const args = [
+      '_ctx.$slots',
+      slotName,
+      slotProps ?? '{}',
+      // fallback content placeholder. will be replaced in the process phase
+      'null',
+      '_push',
+      '_parent',
+    ];
+
+    // inject slot scope id if current template uses :slotted
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+    if (context.scopeId && context.slotted !== false) {
+      args.push(`"${context.scopeId}-s"`);
+    }
+
+    let method = SSR_RENDER_SLOT;
+
+    // #3989
+    // check if this is a single slot inside a transition wrapper - since
+    // transition will unwrap the slot fragment into a single vnode at runtime,
+    // we need to avoid rendering the slot as a fragment.
+    const { parent } = context;
+    if (
+      parent
+      && parent.type === NodeTypes.ELEMENT
+      && parent.tagType === ElementTypes.COMPONENT
+      && resolveComponentType(parent, context, true) === TRANSITION
+      && parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
+    ) {
+      method = SSR_RENDER_SLOT_INNER;
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+      if (!(context.scopeId && context.slotted !== false)) {
+        args.push('null');
+      }
+      args.push('true');
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    node.ssrCodegenNode = createCallExpression(context.helper(method), args);
+  }
+};
+
+export function ssrProcessSlotOutlet(
+  node: SlotOutletNode,
+  context: SSRTransformContext,
+): void {
+  const renderCall = node.ssrCodegenNode!;
+
+  // has fallback content
+  if (node.children.length) {
+    const fallbackRenderFn = createFunctionExpression([]);
+    fallbackRenderFn.body = processChildrenAsStatement(node, context);
+    // _renderSlot(slots, name, props, fallback, ...)
+    renderCall.arguments[3] = fallbackRenderFn;
+  }
+
+  // Forwarded <slot/>. Merge slot scope ids
+  if (context.withSlotScopeId) {
+    const slotScopeId = renderCall.arguments[6];
+    renderCall.arguments[6] = slotScopeId
+      ? `${slotScopeId as string} + _scopeId`
+      : '_scopeId';
+  }
+
+  context.pushStatement(node.ssrCodegenNode!);
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
new file mode 100644
index 00000000000..de03a05a1ee
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable import/no-cycle */
+import {
+  type ComponentNode,
+  type TransformContext,
+  buildSlots,
+  createFunctionExpression,
+  type FunctionExpression,
+  type TemplateChildNode,
+  createCallExpression,
+  type SlotsExpression,
+} from '@vue/compiler-dom';
+
+import { SSR_RENDER_SUSPENSE } from '../runtimeHelpers';
+import {
+  type SSRTransformContext,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+const wipMap = new WeakMap<ComponentNode, WIPEntry>();
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface WIPEntry {
+  slotsExp: SlotsExpression;
+  wipSlots: {
+    fn: FunctionExpression;
+    children: TemplateChildNode[];
+  }[];
+}
+
+// phase 1
+export function ssrTransformSuspense(
+  node: ComponentNode,
+  context: TransformContext,
+) {
+  return (): void => {
+    if (node.children.length) {
+      const wipEntry: WIPEntry = {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        slotsExp: null!, // to be immediately set
+        wipSlots: [],
+      };
+      wipMap.set(node, wipEntry);
+      wipEntry.slotsExp = buildSlots(node, context, (_props, children, loc) => {
+        const fn = createFunctionExpression(
+          [],
+          undefined, // no return, assign body later
+          true, // newline
+          false, // suspense slots are not treated as normal slots
+          loc,
+        );
+        wipEntry.wipSlots.push({
+          fn,
+          children,
+        });
+        return fn;
+      }).slots;
+    }
+  };
+}
+
+// phase 2
+export function ssrProcessSuspense(
+  node: ComponentNode,
+  context: SSRTransformContext,
+): void {
+  // complete wip slots with ssr code
+  const wipEntry = wipMap.get(node);
+  if (!wipEntry) {
+    return;
+  }
+  const { slotsExp, wipSlots } = wipEntry;
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (let i = 0; i < wipSlots.length; i++) {
+    const slot = wipSlots[i];
+    slot.fn.body = processChildrenAsStatement(slot, context);
+  }
+  // _push(ssrRenderSuspense(slots))
+  context.pushStatement(createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
+    '_push',
+    slotsExp,
+  ]));
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTeleport.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTeleport.ts
new file mode 100644
index 00000000000..ea22bce1028
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTeleport.ts
@@ -0,0 +1,93 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable import/no-cycle */
+import {
+  type ComponentNode,
+  findProp,
+  NodeTypes,
+  createSimpleExpression,
+  createFunctionExpression,
+  createCallExpression,
+  type ExpressionNode,
+} from '@vue/compiler-dom';
+
+import { createSSRCompilerError, SSRErrorCodes } from '../errors';
+import { SSR_RENDER_TELEPORT } from '../runtimeHelpers';
+import {
+  type SSRTransformContext,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+// Note: this is a 2nd-pass codegen transform.
+export function ssrProcessTeleport(
+  node: ComponentNode,
+  context: SSRTransformContext,
+): void {
+  const targetProp = findProp(node, 'to');
+  if (!targetProp) {
+    context.onError(createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc));
+    return;
+  }
+
+  let target: ExpressionNode | undefined;
+  if (targetProp.type === NodeTypes.ATTRIBUTE) {
+    target =      targetProp.value
+      && createSimpleExpression(targetProp.value.content, true);
+  } else {
+    target = targetProp.exp;
+  }
+  if (!target) {
+    context.onError(createSSRCompilerError(
+      SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET,
+      targetProp.loc,
+    ));
+    return;
+  }
+
+  const disabledProp = findProp(
+    node,
+    'disabled',
+    false,
+    true /* allow empty */,
+  );
+  // eslint-disable-next-line no-nested-ternary
+  const disabled = disabledProp
+    ? disabledProp.type === NodeTypes.ATTRIBUTE
+      ? 'true'
+      : disabledProp.exp ?? 'false'
+    : 'false';
+
+  const contentRenderFn = createFunctionExpression(
+    ['_push'],
+    undefined, // Body is added later
+    true, // newline
+    false, // isSlot
+    node.loc,
+  );
+  contentRenderFn.body = processChildrenAsStatement(node, context);
+  context.pushStatement(createCallExpression(context.helper(SSR_RENDER_TELEPORT), [
+    '_push',
+    contentRenderFn,
+    target,
+    disabled,
+    '_parent',
+  ]));
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
new file mode 100644
index 00000000000..b7368feb23d
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -0,0 +1,128 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable import/no-cycle */
+import {
+  type AttributeNode,
+  buildProps,
+  type ComponentNode,
+  createCallExpression,
+  type DirectiveNode,
+  findProp,
+  type JSChildNode,
+  NodeTypes,
+  type TransformContext,
+} from '@vue/compiler-dom';
+
+import { SSR_RENDER_ATTRS } from '../runtimeHelpers';
+import {
+  processChildren,
+  type SSRTransformContext,
+} from '../ssrCodegenTransform';
+
+import { buildSSRProps } from './ssrTransformElement';
+
+const wipMap = new WeakMap<ComponentNode, WIPEntry>();
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface WIPEntry {
+  tag: AttributeNode | DirectiveNode;
+  propsExp: string | JSChildNode | null;
+}
+
+// phase 1: build props
+export function ssrTransformTransitionGroup(
+  node: ComponentNode,
+  context: TransformContext,
+) {
+  return (): void => {
+    const tag = findProp(node, 'tag');
+    if (tag) {
+      const otherProps = node.props.filter(p => p !== tag);
+      const { props, directives } = buildProps(
+        node,
+        context,
+        otherProps,
+        true /* isComponent */,
+        false /* isDynamicComponent */,
+        true /* ssr (skip event listeners) */,
+      );
+      let propsExp;
+      if (props || directives.length) {
+        propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [
+          buildSSRProps(props, directives, context),
+        ]);
+      }
+      wipMap.set(node, {
+        tag,
+        propsExp,
+      });
+    }
+  };
+}
+
+// phase 2: process children
+export function ssrProcessTransitionGroup(
+  node: ComponentNode,
+  context: SSRTransformContext,
+): void {
+  const entry = wipMap.get(node);
+  if (entry) {
+    const { tag, propsExp } = entry;
+    if (tag.type === NodeTypes.DIRECTIVE) {
+      // dynamic :tag
+      context.pushStringPart('<');
+      context.pushStringPart(tag.exp!);
+      if (propsExp) {
+        context.pushStringPart(propsExp);
+      }
+      context.pushStringPart('>');
+
+      processChildren(
+        node,
+        context,
+        false,
+        /**
+         * TransitionGroup has the special runtime behavior of flattening and
+         * concatenating all children into a single fragment (in order for them to
+         * be patched using the same key map) so we need to account for that here
+         * by disabling nested fragment wrappers from being generated.
+         */
+        true,
+      );
+      context.pushStringPart('</');
+      context.pushStringPart(tag.exp!);
+      context.pushStringPart('>');
+    } else {
+      // static tag
+      context.pushStringPart(`<${tag.value!.content}`);
+      if (propsExp) {
+        context.pushStringPart(propsExp);
+      }
+      context.pushStringPart('>');
+      processChildren(node, context, false, true);
+      context.pushStringPart(`</${tag.value!.content}>`);
+    }
+  } else {
+    // fragment
+    processChildren(node, context, true, true);
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVFor.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVFor.ts
new file mode 100644
index 00000000000..8900b26fcf0
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVFor.ts
@@ -0,0 +1,70 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  createStructuralDirectiveTransform,
+  type ForNode,
+  processFor,
+  createCallExpression,
+  createFunctionExpression,
+  createForLoopParams,
+  NodeTypes,
+} from '@vue/compiler-dom';
+
+import { SSR_RENDER_LIST } from '../runtimeHelpers';
+// eslint-disable-next-line import/no-cycle
+import {
+  type SSRTransformContext,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+// Plugin for the first transform pass, which simply constructs the AST node
+export const ssrTransformFor = createStructuralDirectiveTransform(
+  'for',
+  processFor,
+);
+
+// This is called during the 2nd transform pass to construct the SSR-specific
+// codegen nodes.
+export function ssrProcessFor(
+  node: ForNode,
+  context: SSRTransformContext,
+  disableNestedFragments = false,
+): void {
+  const needFragmentWrapper =    !disableNestedFragments
+    && (node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT);
+  const renderLoop = createFunctionExpression(createForLoopParams(node.parseResult));
+  renderLoop.body = processChildrenAsStatement(
+    node,
+    context,
+    needFragmentWrapper,
+  );
+  // v-for always renders a fragment unless explicitly disabled
+  if (!disableNestedFragments) {
+    context.pushStringPart('{"id": -1,"name":"comment","props":{"text":"["}},');
+  }
+  context.pushStatement(createCallExpression(context.helper(SSR_RENDER_LIST), [
+    node.source,
+    renderLoop,
+  ]));
+  if (!disableNestedFragments) {
+    context.pushStringPart('{"id": -1,"name":"comment","props":{"text":"]"}},');
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVIf.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVIf.ts
new file mode 100644
index 00000000000..5cd0221d433
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVIf.ts
@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  createStructuralDirectiveTransform,
+  processIf,
+  type IfNode,
+  createIfStatement,
+  createBlockStatement,
+  createCallExpression,
+  type IfBranchNode,
+  type BlockStatement,
+  NodeTypes,
+} from '@vue/compiler-dom';
+
+// eslint-disable-next-line import/no-cycle
+import {
+  type SSRTransformContext,
+  processChildrenAsStatement,
+} from '../ssrCodegenTransform';
+
+// Plugin for the first transform pass, which simply constructs the AST node
+export const ssrTransformIf = createStructuralDirectiveTransform(
+  /^(if|else|else-if)$/,
+  processIf,
+);
+
+// This is called during the 2nd transform pass to construct the SSR-specific
+// codegen nodes.
+export function ssrProcessIf(
+  node: IfNode,
+  context: SSRTransformContext,
+  disableNestedFragments = false,
+): void {
+  const [rootBranch] = node.branches;
+  const ifStatement = createIfStatement(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    rootBranch.condition!,
+    processIfBranch(rootBranch, context, disableNestedFragments),
+  );
+  context.pushStatement(ifStatement);
+
+  let currentIf = ifStatement;
+  for (let i = 1; i < node.branches.length; i++) {
+    const branch = node.branches[i];
+    const branchBlockStatement = processIfBranch(
+      branch,
+      context,
+      disableNestedFragments,
+    );
+    if (branch.condition) {
+      // else-if
+      // eslint-disable-next-line no-multi-assign
+      currentIf = currentIf.alternate = createIfStatement(
+        branch.condition,
+        branchBlockStatement,
+      );
+    } else {
+      // else
+      currentIf.alternate = branchBlockStatement;
+    }
+  }
+
+  if (!currentIf.alternate) {
+    currentIf.alternate = createBlockStatement([
+      createCallExpression('_push', [
+        '`{"id": -1,"name":"comment","props":{"text":""}},`',
+      ]),
+    ]);
+  }
+}
+
+function processIfBranch(
+  branch: IfBranchNode,
+  context: SSRTransformContext,
+  disableNestedFragments = false,
+): BlockStatement {
+  const { children } = branch;
+  const needFragmentWrapper =    !disableNestedFragments
+    && (children.length !== 1 || children[0].type !== NodeTypes.ELEMENT)
+    // optimize away nested fragments when the only child is a ForNode
+    && !(children.length === 1 && children[0].type === NodeTypes.FOR);
+  return processChildrenAsStatement(branch, context, needFragmentWrapper);
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVModel.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVModel.ts
new file mode 100644
index 00000000000..bb146e43608
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVModel.ts
@@ -0,0 +1,184 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  type Property,
+  type TemplateLiteral,
+  type DirectiveTransform,
+  ElementTypes,
+  transformModel,
+  findProp,
+  NodeTypes,
+  createDOMCompilerError,
+  DOMErrorCodes,
+  createObjectProperty,
+  createSimpleExpression,
+  createCallExpression,
+  type PlainElementNode,
+  type ExpressionNode,
+  createConditionalExpression,
+  createInterpolation,
+  hasDynamicKeyVBind,
+} from '@vue/compiler-dom';
+
+import {
+  SSR_LOOSE_EQUAL,
+  SSR_LOOSE_CONTAIN,
+  SSR_RENDER_DYNAMIC_MODEL,
+} from '../runtimeHelpers';
+// import { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
+
+export interface DirectiveTransformResult {
+  props: Property[];
+  needRuntime?: boolean | symbol;
+  ssrTagParts?: TemplateLiteral['elements'];
+}
+
+// eslint-disable-next-line complexity
+export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
+  const model = dir.exp!;
+
+  function checkDuplicatedValue() {
+    const value = findProp(node, 'value');
+    if (value) {
+      context.onError(createDOMCompilerError(
+        DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+        value.loc,
+      ));
+    }
+  }
+
+  if (node.tagType === ElementTypes.ELEMENT) {
+    const res: DirectiveTransformResult = { props: [] };
+    const defaultProps = [
+      // default value binding for text type inputs
+      createObjectProperty('value', model),
+    ];
+    if (node.tag === 'input') {
+      const type = findProp(node, 'type');
+      if (type) {
+        const value = findValueBinding(node);
+        if (type.type === NodeTypes.DIRECTIVE) {
+          // dynamic type
+          res.ssrTagParts = [
+            createCallExpression(context.helper(SSR_RENDER_DYNAMIC_MODEL), [
+              type.exp!,
+              model,
+              value,
+            ]),
+          ];
+        } else if (type.value) {
+          // static type
+          switch (type.value.content) {
+            case 'radio':
+              res.props = [
+                createObjectProperty(
+                  'checked',
+                  createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
+                    model,
+                    value,
+                  ]),
+                ),
+              ];
+              break;
+            case 'checkbox':
+              // eslint-disable-next-line no-case-declarations
+              const trueValueBinding = findProp(node, 'true-value');
+              if (trueValueBinding) {
+                const trueValue =                  trueValueBinding.type === NodeTypes.ATTRIBUTE
+                  ? JSON.stringify(trueValueBinding.value!.content)
+                  : trueValueBinding.exp!;
+                res.props = [
+                  createObjectProperty(
+                    'checked',
+                    createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
+                      model,
+                      trueValue,
+                    ]),
+                  ),
+                ];
+              } else {
+                res.props = [
+                  createObjectProperty(
+                    'checked',
+                    createConditionalExpression(
+                      createCallExpression('Array.isArray', [model]),
+                      createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
+                        model,
+                        value,
+                      ]),
+                      model,
+                    ),
+                  ),
+                ];
+              }
+              break;
+            case 'file':
+              context.onError(createDOMCompilerError(
+                DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+                dir.loc,
+              ));
+              break;
+            default:
+              checkDuplicatedValue();
+              res.props = defaultProps;
+              break;
+          }
+        }
+      } else if (hasDynamicKeyVBind(node)) {
+        // dynamic type due to dynamic v-bind
+        // NOOP, handled in ssrTransformElement due to need to rewrite
+        // the entire props expression
+      } else {
+        // text type
+        checkDuplicatedValue();
+        res.props = defaultProps;
+      }
+    } else if (node.tag === 'textarea') {
+      checkDuplicatedValue();
+      // eslint-disable-next-line no-param-reassign
+      node.children = [createInterpolation(model, model.loc)];
+    } else if (node.tag === 'select') {
+      // NOOP
+      // select relies on client-side directive to set initial selected state.
+    } else {
+      context.onError(createDOMCompilerError(
+        DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+        dir.loc,
+      ));
+    }
+
+    return res;
+  }
+  // component v-model
+  return transformModel(dir, node, context);
+};
+
+function findValueBinding(node: PlainElementNode): ExpressionNode {
+  const valueBinding = findProp(node, 'value');
+  // eslint-disable-next-line no-nested-ternary
+  return valueBinding
+    ? valueBinding.type === NodeTypes.DIRECTIVE
+      ? valueBinding.exp!
+      : createSimpleExpression(valueBinding.value!.content, true)
+    : createSimpleExpression('null', false);
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVShow.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVShow.ts
new file mode 100644
index 00000000000..bd7aab32f0d
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrVShow.ts
@@ -0,0 +1,54 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type DirectiveTransform,
+  DOMErrorCodes,
+  createObjectProperty,
+  createSimpleExpression,
+  createConditionalExpression,
+  createObjectExpression,
+  createDOMCompilerError,
+} from '@vue/compiler-dom';
+
+export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
+  if (!dir.exp) {
+    context.onError(createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION));
+  }
+  return {
+    props: [
+      createObjectProperty(
+        'style',
+        createConditionalExpression(
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          dir.exp!,
+          createSimpleExpression('null', false),
+          createObjectExpression([
+            createObjectProperty(
+              'display',
+              createSimpleExpression('none', true),
+            ),
+          ]),
+          false /* no newline */,
+        ),
+      ),
+    ],
+  };
+};
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/README.md b/driver/js/packages/hippy-vue-next-server-renderer/README.md
new file mode 100644
index 00000000000..277bac78cf5
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/README.md
@@ -0,0 +1,6 @@
+# @hippy/vue-next-server-renderer
+
+### Introduction
+
+This package is provided server renderer function for @hippy/vue-next 
+
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/native.test.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/native.test.ts
new file mode 100644
index 00000000000..dc7cd03da70
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/native.test.ts
@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getHippyNativeViewName } from '../src/native';
+
+/**
+ * native.ts unit test case
+ */
+describe('native.ts', () => {
+  describe('getHippyNativeViewName should work correct', () => {
+    it('should return "View" for "div", "button", and "form"', () => {
+      expect(getHippyNativeViewName('div')).toBe('View');
+      expect(getHippyNativeViewName('button')).toBe('View');
+      expect(getHippyNativeViewName('form')).toBe('View');
+    });
+
+    it('should return "Image" for "img"', () => {
+      expect(getHippyNativeViewName('img')).toBe('Image');
+    });
+
+    it('should return "ListView" for "ul"', () => {
+      expect(getHippyNativeViewName('ul')).toBe('ListView');
+    });
+
+    it('should return "ListViewItem" for "li"', () => {
+      expect(getHippyNativeViewName('li')).toBe('ListViewItem');
+    });
+
+    it('should return "Text" for "span", "label", "p", and "a"', () => {
+      expect(getHippyNativeViewName('span')).toBe('Text');
+      expect(getHippyNativeViewName('label')).toBe('Text');
+      expect(getHippyNativeViewName('p')).toBe('Text');
+      expect(getHippyNativeViewName('a')).toBe('Text');
+    });
+
+    it('should return "TextInput" for "input" and "textarea"', () => {
+      expect(getHippyNativeViewName('input')).toBe('TextInput');
+      expect(getHippyNativeViewName('textarea')).toBe('TextInput');
+    });
+
+    it('should return "WebView" for "iframe"', () => {
+      expect(getHippyNativeViewName('iframe')).toBe('WebView');
+    });
+
+    it('should return "Swiper" for "swiper"', () => {
+      expect(getHippyNativeViewName('hi-swiper')).toBe('ViewPager');
+    });
+
+    it('should return "SwiperSlide" for "swiper-slide"', () => {
+      expect(getHippyNativeViewName('hi-swiper-slide')).toBe('ViewPagerItem');
+    });
+
+    it('should return "PullHeaderView" for "pull-header"', () => {
+      expect(getHippyNativeViewName('hi-pull-header')).toBe('PullHeaderView');
+    });
+
+    it('should return "PullFooterView" for "pull-footer"', () => {
+      expect(getHippyNativeViewName('hi-pull-footer')).toBe('PullFooterView');
+    });
+
+    it('should return "Modal" for "dialog"', () => {
+      expect(getHippyNativeViewName('dialog')).toBe('Modal');
+    });
+
+    it('should return "RefreshWrapper" for "hi-ul-refresh-wrapper"', () => {
+      expect(getHippyNativeViewName('hi-ul-refresh-wrapper')).toBe('RefreshWrapper');
+    });
+
+    it('should return "RefreshWrapperItemView" for "hi-refresh-wrapper-item"', () => {
+      expect(getHippyNativeViewName('hi-refresh-wrapper-item')).toBe('RefreshWrapperItemView');
+    });
+
+    it('should return "WaterfallView" for "hi-waterfall"', () => {
+      expect(getHippyNativeViewName('hi-waterfall')).toBe('WaterfallView');
+    });
+
+    it('should return "WaterfallItem" for "hi-waterfall-item"', () => {
+      expect(getHippyNativeViewName('hi-waterfall-item')).toBe('WaterfallItem');
+    });
+
+    it('should return the input tag for unknown tags', () => {
+      expect(getHippyNativeViewName('foo')).toBe('foo');
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-attr.test.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-attr.test.ts
new file mode 100644
index 00000000000..aaa15038613
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-attr.test.ts
@@ -0,0 +1,51 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ssrRenderStyle, ssrGetDirectiveProps } from '../src';
+
+/**
+ * render-attr.ts unit test case
+ */
+describe('render-attr.ts', () => {
+  describe('ssrRenderStyle should work correctly', () => {
+    it('render empty style', () => {
+      expect(ssrRenderStyle(undefined)).toEqual('{}');
+    });
+    it('render string style', () => {
+      expect(ssrRenderStyle('sfdsfsdfsf')).toEqual('{}');
+    });
+    it('render object style', () => {
+      expect(ssrRenderStyle({ flex: 1, display: 'flex' })).toEqual('{"flex":1,"display":"flex"}');
+    });
+    it('render array object style', () => {
+      expect(ssrRenderStyle([{ flex: 1, display: 'flex' }])).toEqual('{"flex":1,"display":"flex"}');
+    });
+    it('render array string style', () => {
+      expect(ssrRenderStyle(['flex:1;display:flex'])).toEqual('{"flex":"1","display":"flex"}');
+    });
+    it('render invalid type style', () => {
+      expect(ssrRenderStyle(12345)).toEqual('{}');
+    });
+  });
+  describe('ssrGetDirectiveProps should work correctly', () => {
+    it('no props rendered in ssr', () => {
+      expect(ssrGetDirectiveProps()).toEqual({});
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-vnode.test.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-vnode.test.ts
new file mode 100644
index 00000000000..63b3a8aa8a5
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/render-vnode.test.ts
@@ -0,0 +1,528 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { h, defineComponent, createSSRApp, Comment, defineAsyncComponent, Teleport, withDirectives } from 'vue';
+import * as vueRuntimeCore from '@vue/runtime-core';
+import { isPromise } from '@vue/shared';
+import { renderComponentVNode, SSRBuffer } from '../src/render-vnode';
+import { SSR_UNIQUE_ID_KEY } from '../src/renderer';
+import { getObjectNodeList } from '../src/util';
+
+let globalApp;
+jest.spyOn(vueRuntimeCore, 'getCurrentInstance').mockImplementation(() => ({
+  ...globalApp,
+  appContext: globalApp._context,
+}));
+
+/**
+ * render component to get vnode
+ *
+ * @param rootComp
+ */
+async function getRenderedVNode(rootComp) {
+  // create vnode
+  const rootVNode = h(rootComp);
+  // render component vnode
+  const nodeString = renderComponentVNode(rootVNode) as SSRBuffer;
+  let ssrNodeTree = null;
+  if (nodeString?.length) {
+    const nodeStringList: any = [];
+    for (let i = 0; i < nodeString.length; i++) {
+      const node = nodeString[i];
+      if (typeof node === 'string') {
+        nodeStringList.push(node);
+      } else if (Array.isArray(node)) {
+        nodeStringList.push(node);
+      } else if (isPromise(node)) {
+        const result = await node;
+        nodeStringList.push(result);
+      }
+    }
+    ssrNodeTree = getObjectNodeList(nodeStringList as string[]);
+  }
+  return ssrNodeTree;
+}
+
+/**
+ * render-vnode.ts unit test case
+ */
+describe('render-vnode.ts', () => {
+  beforeAll(() => {
+    const startUniqueId = 1;
+    const uniqueIdContext = { ssrUniqueId: startUniqueId };
+    globalApp = createSSRApp({
+      template: '<div></div>',
+    });
+    // An additional context needs to be provided here because ssrContext is mounted after
+    // the render function is called, but ssrGetUniqueId will be called in the render function
+    globalApp.provide(SSR_UNIQUE_ID_KEY, uniqueIdContext);
+  });
+  describe('renderComponentVNode should work correctly', () => {
+    it('render div tag work correct', async () => {
+      // root component
+      const rootComp = await defineComponent({
+        render: () => h('div', {
+          id: 'app',
+          class: 'wrapper',
+          onClick: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 2, index: 0, name: 'View', tagName: 'div', props: { id: 'app', class: 'wrapper', onClick: true } });
+    });
+    it('render button tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('button', {
+          class: 'btn',
+          onClick: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 3, index: 0, name: 'View', tagName: 'button', props: { class: 'btn', onClick: true } });
+    });
+    it('render form tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('form', {
+          class: 'form',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 4, index: 0, name: 'View', tagName: 'form', props: { class: 'form' } });
+    });
+    it('render img tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('img', {
+          alt: '',
+          class: 'img',
+          src: 'https://test.com/test.png',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 5, index: 0, name: 'Image', tagName: 'img', props: { alt: '', class: 'img', src: 'https://test.com/test.png' } });
+    });
+    it('render ul tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('ul', {
+          class: 'list',
+          onScroll: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 6, index: 0, name: 'ListView', tagName: 'ul', props: { class: 'list', onScroll: true } });
+    });
+    it('render li tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('li', {
+          class: 'list-item',
+          onAppear: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 7, index: 0, name: 'ListViewItem', tagName: 'li', props: { class: 'list-item', onAppear: true } });
+    });
+    it('render span tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('span', {
+          class: 'title',
+          onClick: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 8, index: 0, name: 'Text', tagName: 'span', props: { class: 'title', onClick: true } });
+    });
+    it('render label tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('label', {
+          class: 'title',
+          onClick: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 9, index: 0, name: 'Text', tagName: 'label', props: { class: 'title', onClick: true } });
+    });
+    it('render p tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('p', {
+          class: 'title',
+          onClick: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 11, index: 0, name: 'Text', tagName: 'p', props: { class: 'title', onClick: true } });
+    });
+    it('render input tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('input', {
+          class: 'input',
+          onChange: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 12, index: 0, name: 'TextInput', tagName: 'input', props: { class: 'input', onChange: true } });
+    });
+    it('render a tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('a', {
+          class: 'link',
+          href: 'https://hippyjs.org',
+        }, ['this is text']),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 13,
+        index: 0,
+        name: 'Text',
+        tagName: 'a',
+        props: { class: 'link', href: 'https://hippyjs.org' },
+        children: [
+          { id: 14, name: 'Text', props: { text: 'this is text' } },
+        ],
+      });
+    });
+    it('render textarea tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('textarea', {
+          class: 'textarea',
+          rows: 10,
+          onContentSizeChange: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 15, index: 0, name: 'TextInput', tagName: 'textarea', props: { rows: 10, class: 'textarea', onContentSizeChange: true } });
+    });
+    it('render iframe tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('iframe', {
+          class: 'iframe',
+          onKeyup: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 16, index: 0, name: 'WebView', tagName: 'iframe', props: { class: 'iframe', onKeyup: true } });
+    });
+    it('render dialog tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('dialog', {
+          class: 'dialog',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 17, index: 0, name: 'Modal', tagName: 'dialog', props: { class: 'dialog' } });
+    });
+    it('render RefreshWrapper tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('hi-ul-refresh-wrapper', {
+          class: 'refresh',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 18, index: 0, name: 'RefreshWrapper', tagName: 'hi-ul-refresh-wrapper', props: { class: 'refresh' } });
+    });
+    it('render RefreshWrapperItemView tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('hi-refresh-wrapper-item', {
+          class: 'refresh-item',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 19, index: 0, name: 'RefreshWrapperItemView', tagName: 'hi-refresh-wrapper-item', props: { class: 'refresh-item' } });
+    });
+    it('render Waterfall tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('hi-waterfall', {
+          class: 'waterfall',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 21, index: 0, name: 'WaterfallView', tagName: 'hi-waterfall', props: { class: 'waterfall' } });
+    });
+    it('render WaterfallItem tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('hi-waterfall-item', {
+          class: 'waterfall-item',
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: 22, index: 0, name: 'WaterfallItem', tagName: 'hi-waterfall-item', props: { class: 'waterfall-item' } });
+    });
+    it('render children tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('div', null, [
+          h('div', null, h('div')),
+          h('div'),
+        ]),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 23,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+        children: [
+          { id: 24, index: 0, name: 'View', tagName: 'div', props: {}, children: [
+            { id: 25, index: 0, name: 'View', tagName: 'div', props: {} },
+          ] },
+          { id: 26, index: 0, name: 'View', tagName: 'div', props: {} },
+        ],
+      });
+    });
+    it('render comment tag work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('div', null, [
+          h(Comment, 'this is comment node'),
+        ]),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 27,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+        children: [
+          { id: -1, name: 'comment', props: { text: 'this is comment node' } },
+        ],
+      });
+    });
+    it('render child component work correct', async () => {
+      // child component
+      const childComp = defineComponent({
+        render: () => h('div'),
+      });
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('div', null, [h(childComp)]),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 28,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+        children: [
+          {
+            id: 29,
+            index: 0,
+            name: 'View',
+            tagName: 'div',
+            props: {},
+          },
+        ],
+      });
+    });
+    it('render async component work correct', async () => {
+      // child component
+      const childComp = defineAsyncComponent(() => Promise.resolve({
+        render: () => h('div'),
+      }));
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('div', null, [h(childComp)]),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 31,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+        children: [
+          { id: 32, index: 0, name: 'View', tagName: 'div', props: {} },
+        ],
+      });
+    });
+    it('render slot work correct', async () => {
+      // child component
+      const childComp = defineComponent({
+        // @ts-ignore
+        setup: (props, { slots }) => () => h('div', slots.default()),
+      });
+      // root component
+      const rootComp = defineComponent({
+        render: () => h(childComp, null, {
+          default: () => h('div', { class: 'slot-class' }),
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 33,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+        children: [
+          { id: 34, index: 0, name: 'View', tagName: 'div', props: { class: 'slot-class' } },
+        ],
+      });
+    });
+    it('render fragment work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => [h('div'), h('div')],
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      // expect(ssrNodeTree).toEqual({ id: 2, index: 0, name: 'View', tagName: 'div',
+      // props: { id: 'app', class: 'wrapper', onClick: true } });
+      // fixme: fragment do not totally test, should fix later
+      expect(ssrNodeTree).toBeNull();
+    });
+    it('render teleport work correct', async () => {
+      const childComp = defineComponent({
+        setup() {
+          return () => {
+            h(Teleport as unknown as string);
+          };
+        },
+      });
+      // root component
+      const rootComp = defineComponent({
+        render: () => h(childComp),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      // @hippy/vue-next do not support teleport
+      expect(ssrNodeTree).toEqual({ id: -1, name: 'comment', props: { text: '' } });
+    });
+    it('render no template work correct', async () => {
+      // root component
+      const rootComp = defineComponent({});
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: -1, name: 'comment', props: { text: '' } });
+    });
+    it('ssrRender function work correct', async () => {
+      // root component
+      const rootComp = defineComponent({
+        ssrRender: (_ctx, _push) => {
+          _push('{"id": -1,"name":"comment","props":{}}');
+        },
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({ id: -1, name: 'comment', props: {} });
+    });
+    it('render directives work correct', async () => {
+      const dir = {
+        created() {},
+      };
+      // root component
+      const rootComp = defineComponent({
+        render: () => withDirectives(h('div'), [[dir]]),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 37,
+        index: 0,
+        name: 'View',
+        tagName: 'div',
+        props: {},
+      });
+    });
+    it('event map work correct for View', async () => {
+      // root component
+      const rootComp = defineComponent({
+        render: () => h('hi-swiper', {
+          class: 'swiper',
+          onDropped: () => {},
+        }),
+      });
+      const ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 38,
+        index: 0,
+        name: 'ViewPager',
+        props: {
+          class: 'swiper',
+          onDropped: true,
+        },
+        tagName: 'hi-swiper',
+      });
+    });
+    it('render text node string children work correct', async () => {
+      // root component
+      let rootComp = defineComponent({
+        render: () => h('a', {
+          class: 'link',
+          href: 'https://hippyjs.org',
+        }, ' this is a'),
+      });
+      let ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 39,
+        index: 0,
+        name: 'Text',
+        tagName: 'a',
+        props: { class: 'link', href: 'https://hippyjs.org', text: ' this is a' },
+      });
+
+      // root component
+      rootComp = defineComponent({
+        render: () => h('span', {
+          class: 'text',
+        }, ' this is span'),
+      });
+      ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 41,
+        index: 0,
+        name: 'Text',
+        tagName: 'span',
+        props: { class: 'text', text: ' this is span' },
+      });
+      // 如果节点中包含的文本还夹杂有表达式等，就会被渲染为 children array text node，如
+      // <span>123{{text}}456</span>，就会成为 ['123', text , '456']
+      rootComp = defineComponent({
+        render: () => h('span', {
+          class: 'text',
+        }, [' this is span']),
+      });
+      ssrNodeTree = await getRenderedVNode(rootComp);
+      expect(ssrNodeTree).toEqual({
+        id: 42,
+        index: 0,
+        name: 'Text',
+        tagName: 'span',
+        props: { class: 'text' },
+        children: [{
+          id: 43,
+          name: 'Text',
+          props: { text: ' this is span' },
+        }],
+      });
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/renderer.test.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/renderer.test.ts
new file mode 100644
index 00000000000..5232b467c08
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/renderer.test.ts
@@ -0,0 +1,148 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createSSRApp } from 'vue';
+import * as vueServerRender from '@vue/server-renderer';
+import * as vueRuntimeCore from '@vue/runtime-core';
+import { renderToHippyList, ssrGetUniqueId, getCurrentUniqueId } from '../src';
+import { SSR_UNIQUE_ID_KEY } from '../src/renderer';
+
+jest.spyOn(vueServerRender, 'renderToString').mockImplementation((app, options) => {
+  if (options?.isError) {
+    return Promise.resolve('');
+  }
+  const nodeString = '{"id":2,"name":"View","props":{"caret-color":"gray","underline-color-android":"gray","placeholder-text-color":"gray","break-strategy":"simple","onTouchStart":true,"onTouchstart":true,"onTouchMove":true,"onTouchend":true,"onTouchcancel":true},"children":['
+    + '{"id":3,"name":"Text","props":{"text":"hello", "style": {"fontWeight":100}},},'
+    + '{"id":4,"name":"ViewPager","props":{"attributes":{"class":"wrapper"},"onDropped":true,"onDragging":true,"onStateChanged":true},"children":['
+    + '{"id":5,"name":"ViewPagerItem","props":{"attributes":{"id":"root-item"}}},],},'
+    + '{"id":-1,"name":"comment","props":{},},'
+    + '{"id":6,"name":"WebView","props":{"src":"https://hippyjs.org"}},'
+    + '{"id":7,"name":"Modal","props":{}},'
+    + '{"id":8,"name":"TextInput","props":{"onChange":true,"onSelect":true, "placeholder": 100, "maxlength": 5, "value": "123", "disabled": true, "type": "search"}},'
+    + '{"id":9,"name":"ListView","props":{"onListReady":true,"onEndReached":true}},'
+    + '],}';
+  return Promise.resolve(nodeString);
+});
+let globalApp;
+jest.spyOn(vueRuntimeCore, 'getCurrentInstance').mockImplementation(() => ({
+  ...globalApp,
+  appContext: globalApp._context,
+}));
+
+/**
+ * renderer.ts unit test case
+ */
+describe('renderer.ts', () => {
+  describe('uniqueId logic test', () => {
+    beforeAll(() => {
+      const startUniqueId = 1;
+      const uniqueIdContext = { ssrUniqueId: startUniqueId };
+      globalApp = createSSRApp({
+        template: '<div></div>',
+      });
+      // An additional context needs to be provided here because ssrContext is mounted after
+      // the render function is called, but ssrGetUniqueId will be called in the render function
+      globalApp.provide(SSR_UNIQUE_ID_KEY, uniqueIdContext);
+    });
+    it('ssrGetUniqueId & getCurrentUniqueId should work correctly', () => {
+      expect(getCurrentUniqueId(globalApp)).toEqual(1);
+      expect(ssrGetUniqueId()).toEqual(2);
+      expect(ssrGetUniqueId()).toEqual(3);
+      expect(ssrGetUniqueId()).toEqual(4);
+      expect(ssrGetUniqueId()).toEqual(5);
+      expect(getCurrentUniqueId(globalApp)).toEqual(5);
+      expect(ssrGetUniqueId()).toEqual(6);
+      expect(ssrGetUniqueId()).toEqual(7);
+      expect(ssrGetUniqueId()).toEqual(8);
+      expect(ssrGetUniqueId()).toEqual(9);
+      expect(ssrGetUniqueId()).toEqual(11);
+      expect(getCurrentUniqueId(globalApp)).toEqual(11);
+    });
+  });
+  describe('renderToHippyList should work correctly', () => {
+    let ssrContext;
+    beforeEach(() => {
+      ssrContext = {
+        rootContainer: 'root',
+      };
+    });
+    it('render root node', async () => {
+      const app = createSSRApp({
+        template: '',
+      });
+      const result = await renderToHippyList(app, {
+        ...ssrContext,
+        isError: true,
+      });
+      expect(result).toEqual([{ id: 1, index: 0, name: 'View', pId: 0, props: { attributes: { class: '', id: 'root' }, style: { flex: 1 } }, tagName: 'div' }]);
+    });
+    it('render node list', async () => {
+      const app = createSSRApp({
+        template: '',
+      });
+      const result = await renderToHippyList(app, ssrContext);
+      const [
+        rootNode,
+        divNode,
+        textNode,
+        swiperNode,
+        swiperItemNode,
+        webviewNode,
+        modalNode,
+        inputNode,
+        ulNode,
+        commentNode,
+      ] = result!;
+      expect(rootNode.id).toEqual(1);
+      expect(rootNode.pId).toEqual(0);
+      expect(rootNode.props).toEqual({ style: { flex: 1 }, attributes: { id: 'root', class: '' } });
+      expect(divNode.pId).toEqual(1);
+      expect(divNode.props).toEqual({ attributes: { id: '', class: '' }, caretColor: 'gray', underlineColorAndroid: 'gray', placeholderTextColor: 'gray', breakStrategy: 'simple', onTouchCancel: true, onTouchDown: true, onTouchEnd: true, onTouchMove: true });
+      expect(textNode.pId).toEqual(2);
+      expect(textNode.props).toEqual({ attributes: { id: '', class: '' }, text: 'hello', style: { fontWeight: '100' } });
+      expect(swiperNode.pId).toEqual(2);
+      expect(swiperNode.index).toEqual(1);
+      expect(swiperNode.props).toEqual({ attributes: { id: '', class: 'wrapper' }, initialPage: undefined, onPageSelected: true, onPageScroll: true, onPageScrollStateChanged: true });
+      expect(swiperItemNode.pId).toEqual(4);
+      expect(swiperItemNode.props).toEqual({ attributes: { id: 'root-item', class: '' } });
+      expect(commentNode.pId).toEqual(2);
+      expect((commentNode.index)).toEqual(2);
+      expect(webviewNode.pId).toEqual(2);
+      expect(webviewNode.props).toEqual({ method: 'get', source: { uri: 'https://hippyjs.org' }, userAgent: '', attributes: { id: '', class: '' } });
+      expect(inputNode.pId).toEqual(2);
+      expect(inputNode.props).toEqual({
+        attributes: { id: '', class: '' },
+        underlineColorAndroid: 0,
+        changeText: true,
+        selectionChange: true,
+        placeholder: '100',
+        multiline: false,
+        numberOfLines: 1,
+        maxLength: 5,
+        defaultValue: '123',
+        editable: false,
+        keyboardType: 'web-search',
+      });
+      expect(modalNode.pId).toEqual(2);
+      expect(modalNode.props).toEqual({ collapsable: false, immersionStatusBar: true, transparent: true, attributes: { id: '', class: '' } });
+      expect(ulNode.pId).toEqual(2);
+      expect(ulNode.props).toEqual({ attributes: { id: '', class: '' }, numberOfRows: 0, initialListReady: true, onEndReached: true, onLoadMore: true });
+    });
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/setup.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/setup.ts
new file mode 100644
index 00000000000..4b99c01a9f7
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/setup.ts
@@ -0,0 +1,19 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/__test__/util.test.ts b/driver/js/packages/hippy-vue-next-server-renderer/__test__/util.test.ts
new file mode 100644
index 00000000000..103692d748d
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/__test__/util.test.ts
@@ -0,0 +1,33 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { unescapeHtml } from '../src/util';
+
+/**
+ * util.ts unit test case
+ */
+describe('util.ts', () => {
+  it('unescapeHtml should work correctly', () => {
+    const rawString = '&quot;1&amp;2&#39;3&lt;4&gt;5&quot;6&amp;7&#39;8&lt;9&gt;10';
+    const destString = '"1&2\'3<4>5"6&7\'8<9>10';
+    const regularString = 'fdsl1234ljkljf#%$$#$#$';
+    expect(unescapeHtml(rawString)).toEqual(destString);
+    expect(unescapeHtml(regularString)).toEqual(regularString);
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/api-extractor.json b/driver/js/packages/hippy-vue-next-server-renderer/api-extractor.json
new file mode 100644
index 00000000000..9cd28e6455b
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/api-extractor.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "mainEntryPointFilePath": "./dist/hippy-vue-next-server-renderer/src/index.d.ts",
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "./dist/index.d.ts"
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "compilerMessageReporting": {
+      "TS2374": {
+        "logLevel": "none"
+      },
+      "TS6200": {
+        "logLevel": "none"
+      },
+      "TS2403": {
+        "logLevel": "none"
+      }
+    },
+    "extractorMessageReporting": {
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      },
+      "ae-wrong-input-file-type": {
+        "logLevel": "none"
+      }
+    }
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/package-lock.json b/driver/js/packages/hippy-vue-next-server-renderer/package-lock.json
new file mode 100644
index 00000000000..2448e2c028c
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/package-lock.json
@@ -0,0 +1,435 @@
+{
+  "name": "@hippy/vue-next-server-renderer",
+  "version": "unspecified",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@hippy/vue-next-server-renderer",
+      "version": "unspecified",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@vue/runtime-core": "^3.2.21",
+        "@vue/server-renderer": "^3.2.21",
+        "@vue/shared": "^3.2.21"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://mirrors.tencent.com/npm/@babel%2fparser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ==",
+      "license": "MIT",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2freactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2freactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fruntime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fruntime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "csstype": "^2.6.8"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fserver-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
+      },
+      "peerDependencies": {
+        "vue": "3.2.47"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fshared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "2.6.21",
+      "resolved": "https://mirrors.tencent.com/npm/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://mirrors.tencent.com/npm/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://mirrors.tencent.com/npm/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://mirrors.tencent.com/npm/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://mirrors.tencent.com/npm/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://mirrors.tencent.com/npm/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://mirrors.tencent.com/npm/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/vue": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/parser": {
+      "version": "7.21.2",
+      "resolved": "https://mirrors.tencent.com/npm/@babel%2fparser/-/parser-7.21.2.tgz",
+      "integrity": "sha512-URpaIJQwEkEC2T9Kn+Ai6Xe/02iNaVCuT/PtoRz3GPVJVDpPd7mLo+VddTbhCRU9TXqW5mSrQfXZyi8kDKOVpQ=="
+    },
+    "@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "requires": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/reactivity": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2freactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "requires": {
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2freactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fruntime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "requires": {
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fruntime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "peer": true,
+      "requires": {
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "csstype": "^2.6.8"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fserver-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/@vue%2fshared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "csstype": {
+      "version": "2.6.21",
+      "resolved": "https://mirrors.tencent.com/npm/csstype/-/csstype-2.6.21.tgz",
+      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
+      "peer": true
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://mirrors.tencent.com/npm/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "peer": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://mirrors.tencent.com/npm/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "peer": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://mirrors.tencent.com/npm/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "peer": true
+    },
+    "postcss": {
+      "version": "8.4.21",
+      "resolved": "https://mirrors.tencent.com/npm/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "peer": true,
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://mirrors.tencent.com/npm/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://mirrors.tencent.com/npm/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "peer": true
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://mirrors.tencent.com/npm/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "peer": true
+    },
+    "vue": {
+      "version": "3.2.47",
+      "resolved": "https://mirrors.tencent.com/npm/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    }
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/package.json b/driver/js/packages/hippy-vue-next-server-renderer/package.json
new file mode 100644
index 00000000000..879bf6241ab
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@hippy/vue-next-server-renderer",
+  "version": "unspecified",
+  "description": "Vue-Next server renderer for Hippy native framework",
+  "author": "OpenHippy Team",
+  "homepage": "https://hippyjs.org",
+  "license": "Apache-2.0",
+  "entry": "./src/index.ts",
+  "repository": "https://github.com/Tencent/Hippy",
+  "bugs": {
+    "url": "https://github.com/Tencent/Hippy/issues"
+  },
+  "keywords": [
+    "hippy",
+    "hippy-vue-next",
+    "server-renderer"
+  ],
+
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/index.js",
+    "dist/index.esm.js",
+    "dist/index.d.ts",
+    "README.md"
+  ],
+  "dependencies": {
+    "@vue/server-renderer": "^3.2.46",
+    "@vue/runtime-core": "^3.2.46",
+    "@vue/shared": "^3.2.46"
+  },
+  "devDependencies": {
+    "vue": "^3.2.46"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^src/(.*)$": "<rootDir>/src/$1",
+      "@hippy-vue-next-style-parser/(.*)$": "<rootDir>/src/$1"
+    },
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "preset": "ts-jest",
+    "setupFiles": [
+      "<rootDir>/__test__/setup.ts"
+    ],
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "verbose": true
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/index.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/index.ts
new file mode 100644
index 00000000000..ae89c73fe3c
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/index.ts
@@ -0,0 +1,117 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * hippy vue next server renderer type，export main method from vue/server-renderer, and modify some api with hippy
+ */
+
+/**
+ * @public
+ */
+type NeedToTyped = any;
+
+/**
+ * @public
+ */
+type CallbackType = Function;
+
+/**
+ * @public
+ */
+interface CommonMapParams {
+  [key: string]: NeedToTyped;
+}
+
+// global type
+export {
+  NeedToTyped,
+  CallbackType,
+  CommonMapParams,
+};
+
+/**
+ * SSR common type
+ *
+ * @public
+ */
+export interface SsrCommonParams {
+  // props perhaps have any type, include string，number，boolean，object，function，array. etc
+  [key: string]: NeedToTyped;
+}
+
+/**
+ * SSR Node props type
+ *
+ * @public
+ */
+export type SsrNodeProps = SsrCommonParams;
+
+/**
+ * SSR Node type
+ *
+ * @public
+ */
+export interface SsrNode {
+  id: number;
+  pId?: number;
+  index: number;
+  name: string;
+  props: SsrNodeProps;
+  tagName?: string;
+  children?: SsrNode[];
+}
+
+export type {
+  SsrRequestContext,
+} from './renderer';
+
+export {
+  ssrGetUniqueId,
+  renderToHippyList,
+  getCurrentUniqueId,
+} from './renderer';
+export {
+  ssrRenderStyle,
+  ssrGetDirectiveProps,
+  ssrRenderSlot,
+} from './render-attrs';
+
+export {
+  ssrRenderTeleport,
+  ssrRenderSuspense,
+  ssrRenderList,
+  pipeToWebWritable,
+  renderToNodeStream,
+  renderToSimpleStream,
+  renderToString,
+  renderToWebStream,
+  ssrGetDynamicModelProps,
+  ssrInterpolate,
+  ssrLooseContain,
+  ssrLooseEqual,
+  ssrRenderAttr,
+  ssrRenderAttrs,
+  ssrRenderClass,
+  ssrRenderDynamicAttr,
+  ssrRenderDynamicModel,
+} from '@vue/server-renderer';
+export { includeBooleanAttr as ssrIncludeBooleanAttr } from '@vue/shared';
+export { renderVNode as ssrRenderVNode } from './render-vnode';
+export { ssrRenderComponent } from './render-component';
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/native.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/native.ts
new file mode 100644
index 00000000000..3dabf1bf3db
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/native.ts
@@ -0,0 +1,103 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable complexity */
+
+/**
+ * get hippy native view's name, map with html tag
+ *
+ * @param tag - html tag or Vue component name
+ */
+export function getHippyNativeViewName(tag: string): string {
+  // Hippy built-in native view
+  const NATIVE_COMPONENT_MAP = {
+    View: 'View',
+    Image: 'Image',
+    ListView: 'ListView',
+    ListViewItem: 'ListViewItem',
+    Text: 'Text',
+    TextInput: 'TextInput',
+    WebView: 'WebView',
+    VideoPlayer: 'VideoPlayer',
+    // native inner view, just name different with View
+    ScrollView: 'ScrollView',
+    Swiper: 'ViewPager',
+    SwiperSlide: 'ViewPagerItem',
+    PullHeaderView: 'PullHeaderView',
+    PullFooterView: 'PullFooterView',
+    Dialog: 'Modal',
+    UlRefreshWrapper: 'RefreshWrapper',
+    UlRefresh: 'RefreshWrapperItemView',
+    Waterfall: 'WaterfallView',
+    WaterfallItem: 'WaterfallItem',
+  };
+  switch (tag) {
+    case 'div':
+    case 'button':
+    case 'form':
+      return NATIVE_COMPONENT_MAP.View;
+    case 'img':
+      return NATIVE_COMPONENT_MAP.Image;
+    case 'ul':
+      return NATIVE_COMPONENT_MAP.ListView;
+    case 'li':
+      return NATIVE_COMPONENT_MAP.ListViewItem;
+    case 'span':
+    case 'label':
+    case 'p':
+    case 'a':
+      return NATIVE_COMPONENT_MAP.Text;
+    case 'textarea':
+    case 'input':
+      return NATIVE_COMPONENT_MAP.TextInput;
+    case 'iframe':
+      return NATIVE_COMPONENT_MAP.WebView;
+    case 'hi-swiper':
+      return NATIVE_COMPONENT_MAP.Swiper;
+    case 'hi-swiper-slide':
+      return NATIVE_COMPONENT_MAP.SwiperSlide;
+    case 'hi-pull-header':
+      return NATIVE_COMPONENT_MAP.PullHeaderView;
+    case 'hi-pull-footer':
+      return NATIVE_COMPONENT_MAP.PullFooterView;
+    case 'dialog':
+      return NATIVE_COMPONENT_MAP.Dialog;
+    case 'hi-ul-refresh-wrapper':
+      return NATIVE_COMPONENT_MAP.UlRefreshWrapper;
+    case 'hi-refresh-wrapper-item':
+      return NATIVE_COMPONENT_MAP.UlRefresh;
+    case 'hi-waterfall':
+      return NATIVE_COMPONENT_MAP.Waterfall;
+    case 'hi-waterfall-item':
+      return NATIVE_COMPONENT_MAP.WaterfallItem;
+    default:
+      return tag;
+  }
+}
+
+/**
+ * parse vue tag/component name to real tag name
+ *
+ * @param compName
+ */
+export function getHippyTagName(compName: string): string {
+  // do not have need parse tag name now
+  return compName;
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/render-attrs.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/render-attrs.ts
new file mode 100644
index 00000000000..9ca13c65a96
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/render-attrs.ts
@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ssrRenderSlotInner } from '@vue/server-renderer';
+import { isString, normalizeStyle } from '@vue/shared';
+import type { NeedToTyped } from './index';
+
+export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean };
+export type SSRBufferItem = string | SSRBuffer | Promise<SSRBuffer>;
+export type PushFn = (item: SSRBufferItem) => void;
+export type Props = Record<string, unknown>;
+export type SSRSlots = Record<string, SSRSlot>;
+export type SSRSlot = (
+  props: Props,
+  push: PushFn,
+  parentComponent: NeedToTyped,
+  scopeId: string | null,
+) => void;
+
+/**
+ * get hippy ssr style object
+ *
+ * @param raw - raw style
+ *
+ * @public
+ */
+export function ssrRenderStyle(raw: unknown): string {
+  if (!raw) {
+    return '{}';
+  }
+  if (isString(raw)) {
+    // hippy doesn't support string style
+    return '{}';
+  }
+
+  return JSON.stringify(normalizeStyle(raw) ?? {});
+}
+
+/**
+ * get hippy ssr directive props
+ *
+ * @public
+ */
+export function ssrGetDirectiveProps(): unknown {
+  return {};
+}
+
+/**
+ * render ssr slot.
+ * because template-compiled slots are always rendered as fragments, the vue/server-renderer wrap
+ * fragment content in html comment. like \<!--[--\>\{content\}\<!--]--\>. but hippy didn't recognize.
+ * so we use hippy comment node to replace it.
+ *
+ * @param slots - slot list
+ * @param slotName - slot name
+ * @param slotProps - slot props
+ * @param fallbackRenderFn - fallback render function
+ * @param push - push function
+ * @param parentComponent - parent component
+ * @param slotScopeId - slot scope id
+ *
+ * @public
+ */
+export function ssrRenderSlot(
+  slots: SSRSlots,
+  slotName: string,
+  slotProps: Props,
+  fallbackRenderFn: (() => void) | null,
+  push: PushFn,
+  parentComponent: NeedToTyped,
+  slotScopeId?: string,
+): void {
+  // template-compiled slots are always rendered as fragments
+  push('{"id": -1,"name":"comment","props":{"text":"["}},');
+  ssrRenderSlotInner(
+    slots,
+    slotName,
+    slotProps,
+    fallbackRenderFn,
+    push,
+    parentComponent,
+    slotScopeId,
+  );
+  push('{"id": -1,"name":"comment","props":{"text":"]"}},');
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/render-component.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/render-component.ts
new file mode 100644
index 00000000000..84790b4b912
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/render-component.ts
@@ -0,0 +1,48 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type Component, type ComponentInternalInstance, createVNode, type Slots } from '@vue/runtime-core';
+import { type SSRSlots } from './render-attrs';
+import { type Props, renderComponentVNode, type SSRBuffer } from './render-vnode';
+
+/**
+ * render component for server side
+ *
+ * @param comp - vue component
+ * @param props - component props
+ * @param children - component children
+ * @param parentComponent - parent
+ * @param slotScopeId - slot scoped id
+ *
+ * @public
+ */
+export function ssrRenderComponent(
+  comp: Component,
+  props: Props | null = null,
+  children: Slots | SSRSlots | null = null,
+  parentComponent: ComponentInternalInstance | null = null,
+  slotScopeId?: string,
+): SSRBuffer | Promise<SSRBuffer> {
+  return renderComponentVNode(
+    createVNode(comp, props, children),
+    parentComponent,
+    slotScopeId,
+  );
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
new file mode 100644
index 00000000000..651fe6f6fc8
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
@@ -0,0 +1,511 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-param-reassign */
+/* eslint-disable @typescript-eslint/prefer-for-of */
+/* eslint-disable no-bitwise */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable complexity */
+import {
+  Comment,
+  type Component,
+  type ComponentInternalInstance,
+  type DirectiveBinding,
+  Fragment,
+  type FunctionalComponent,
+  mergeProps,
+  ssrContextKey,
+  Static,
+  Text,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
+  warn,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ssrUtils,
+} from '@vue/runtime-core';
+import {
+  isFunction,
+  isPromise,
+  isString,
+  ShapeFlags,
+  isArray,
+  NOOP,
+} from '@vue/shared';
+
+import { getHippyTagName, getHippyNativeViewName } from './native';
+import { ssrGetUniqueId } from './renderer';
+import type { NeedToTyped } from './index';
+
+const {
+  createComponentInstance,
+  setCurrentRenderingInstance,
+  setupComponent,
+  renderComponentRoot,
+  normalizeVNode,
+} = ssrUtils;
+
+export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean };
+export type SSRBufferItem = string | SSRBuffer | Promise<SSRBuffer>;
+export type PushFn = (item: SSRBufferItem) => void;
+export type Props = Record<string, unknown>;
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type SSRContext = {
+  [key: string]: NeedToTyped;
+  teleports?: Record<string, string>;
+  __teleportBuffers?: Record<string, SSRBuffer>;
+};
+
+const commentNodeStr = '{"id": -1,"name":"comment","props":{"text":""}},';
+
+/**
+ * return tag is text or not
+ *
+ * @param tag - tag name
+ */
+function isTextTag(tag: string): boolean {
+  return ['span', 'p', 'label', 'a'].includes(tag);
+}
+
+export function createBuffer(): {
+  getBuffer: () => SSRBuffer;
+  push: (SSRBufferItem) => void;
+} {
+  let appendable = false;
+  const buffer: SSRBuffer = [];
+  return {
+    getBuffer(): SSRBuffer {
+      // Return static buffer and await on items during unroll stage
+      return buffer;
+    },
+    push(item: SSRBufferItem) {
+      const isStringItem = isString(item);
+      if (appendable && isStringItem) {
+        buffer[buffer.length - 1] += item;
+      } else {
+        buffer.push(item);
+      }
+      appendable = isStringItem;
+      if (isPromise(item) || (isArray(item) && item.hasAsync)) {
+        // promise, or child buffer with async, mark as async.
+        // this allows skipping unnecessary await ticks during unroll stage
+        buffer.hasAsync = true;
+      }
+    },
+  };
+}
+
+export function renderComponentVNode(
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance | null = null,
+  slotScopeId?: string,
+): SSRBuffer | Promise<SSRBuffer> {
+  const instance = createComponentInstance(vnode, parentComponent, null);
+  const res = setupComponent(instance, true /* isSSR */);
+  const hasAsyncSetup = isPromise(res);
+  const prefetches = instance.sp; /* LifecycleHooks.SERVER_PREFETCH */
+  if (hasAsyncSetup || prefetches) {
+    let p: Promise<unknown> = hasAsyncSetup
+      ? (res as Promise<void>)
+      : Promise.resolve();
+    if (prefetches) {
+      p = p
+        .then(async () => Promise.all(prefetches.map(prefetch => prefetch.call(instance.proxy))))
+        // Note: error display is already done by the wrapped lifecycle hook function.
+        .catch(() => {});
+    }
+    return p.then(() => renderComponentSubTree(instance, slotScopeId));
+  }
+  return renderComponentSubTree(instance, slotScopeId);
+}
+
+function renderComponentSubTree(
+  rawInstance: ComponentInternalInstance,
+  slotScopeId?: string,
+): SSRBuffer | Promise<SSRBuffer> {
+  const comp = rawInstance.type as Component;
+  const { getBuffer, push } = createBuffer();
+  if (isFunction(comp)) {
+    // this is functional component
+    const root = renderComponentRoot(rawInstance);
+    // #5817 scope ID attrs not falling through if functional component doesn't
+    // have props
+    if (!(comp as FunctionalComponent).props) {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in rawInstance.attrs) {
+        if (key.startsWith('data-v-')) {
+          (root.props || (root.props = {}))[key] = '';
+        }
+      }
+    }
+    renderVNode(push, (rawInstance.subTree = root), rawInstance, slotScopeId);
+  } else {
+    // pay attention please, our app do not support runtime compile, so we doesn't need ssrCompile logic
+    // if (
+    //   (!instance.render || instance.render === NOOP)
+    //   && !instance.ssrRender
+    //   && !comp.ssrRender
+    //   && isString(comp.template)
+    // ) {
+    //   comp.ssrRender = ssrCompile(comp.template, instance);
+    // }
+
+    // because some props of ComponentInternalInstance, like ssrRender,scope,setupState, and so on. was set to
+    // internal type, so we used here as any to avoid ts type error
+    const instance: NeedToTyped = rawInstance as NeedToTyped;
+    // perf: enable caching of computed getters during render
+    // since there cannot be state mutations during render.
+    for (const e of instance.scope.effects) {
+      if (e.computed) e.computed._cacheable = true;
+    }
+
+    const ssrRender = instance.ssrRender || comp.ssrRender;
+    if (ssrRender) {
+      // optimized
+      // resolve fallthrough attrs
+      let attrs = instance.inheritAttrs !== false ? instance.attrs : undefined;
+      let hasCloned = false;
+
+      let cur = instance;
+      while (true) {
+        const { scopeId } = cur.vnode;
+        if (scopeId) {
+          if (!hasCloned) {
+            attrs = { ...attrs };
+            hasCloned = true;
+          }
+          attrs![scopeId] = '';
+        }
+        const { parent } = cur;
+        if (parent?.subTree === cur.vnode) {
+          // parent is a non-SSR compiled component and is rendering this
+          // component as root. inherit its scopeId if present.
+          cur = parent;
+        } else {
+          break;
+        }
+      }
+
+      if (slotScopeId) {
+        if (!hasCloned) attrs = { ...attrs };
+        attrs![slotScopeId.trim()] = '';
+      }
+
+      // set current rendering instance for asset resolution
+      const prev = setCurrentRenderingInstance(instance);
+      try {
+        ssrRender(
+          instance.proxy,
+          push,
+          instance,
+          attrs,
+          // compiler-optimized bindings
+          instance.props,
+          instance.setupState,
+          instance.data,
+          instance.ctx,
+        );
+      } finally {
+        setCurrentRenderingInstance(prev);
+      }
+    } else if (instance.render && instance.render !== NOOP) {
+      renderVNode(
+        push,
+        (instance.subTree = renderComponentRoot(instance)),
+        instance,
+        slotScopeId,
+      );
+    } else {
+      const componentName = comp.name || comp.__file || '<Anonymous>';
+      warn(`Component ${componentName} is missing template or render function.`);
+      push(commentNodeStr);
+    }
+  }
+  return getBuffer();
+}
+
+/**
+ * render vNode
+ *
+ * @param push - push function
+ * @param vnode - vnode
+ * @param parentComponent - parent component
+ * @param slotScopeId - slot scoped id
+ *
+ * @public
+ */
+export function renderVNode(
+  push: PushFn,
+  vnode: VNode & { slotScopeIds?: string[] },
+  parentComponent: ComponentInternalInstance,
+  slotScopeId?: string,
+): void {
+  const { type, shapeFlag, children } = vnode;
+  switch (type) {
+    case Text:
+      // vue text means <div>content</div> content. hippy do not support it. should use
+      // <div><span>content</span></div>, all text content should wrap in span/p/label.
+      push(`{"id": ${ssrGetUniqueId()},"name":"Text","props":{"text":"${children as string}"}},`);
+      break;
+    case Static:
+      // hippy do not support static hoist
+      break;
+    case Comment:
+      push(children
+        ? `{"id": -1,"name":"comment","props":{"text":"${children as string}"}},`
+        : commentNodeStr);
+      break;
+    case Fragment:
+      if (vnode?.slotScopeIds) {
+        slotScopeId = (slotScopeId ? `${slotScopeId} ` : '') + vnode.slotScopeIds.join(' ');
+      }
+      // fixme: fragment do not totally test, should fixme later
+      push('{"id": -1,"name":"comment","props":{"text":"["}},'); // open
+      renderVNodeChildren(
+        push,
+        children as VNodeArrayChildren,
+        parentComponent,
+        slotScopeId,
+        true,
+      );
+      push('{"id": -1,"name":"comment","props":{"text":"]"}},'); // close
+      break;
+    default:
+      if (shapeFlag & ShapeFlags.ELEMENT) {
+        renderElementVNode(push, vnode, parentComponent, slotScopeId);
+      } else if (shapeFlag & ShapeFlags.COMPONENT) {
+        push(renderComponentVNode(vnode, parentComponent, slotScopeId));
+      } else if (shapeFlag & ShapeFlags.TELEPORT) {
+        // hippy do not support teleport
+        renderTeleportVNode(push, vnode, parentComponent, slotScopeId);
+      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
+        // do not support suspense now
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        // renderVNode(push, vnode.ssContent!, parentComponent, slotScopeId);
+      } else {
+        warn(
+          '[@vue/server-renderer] Invalid VNode type:',
+          type,
+          `(${typeof type})`,
+        );
+      }
+  }
+}
+
+function renderVNodeChildren(
+  push: PushFn,
+  children: VNodeArrayChildren,
+  parentComponent: ComponentInternalInstance,
+  slotScopeId: string | undefined,
+  asFragment = false,
+) {
+  if (!asFragment) {
+    // hippy fragment no need to insert children part
+    push('"children":[');
+  }
+  for (let i = 0; i < children.length; i++) {
+    renderVNode(
+      push,
+      normalizeVNode(children[i]),
+      parentComponent,
+      slotScopeId,
+    );
+  }
+  if (!asFragment) {
+    // hippy fragment no need to insert children part
+    push('],');
+  }
+}
+
+function renderElementVNode(
+  push: PushFn,
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance,
+  slotScopeId: string | undefined,
+) {
+  const tag = vnode.type as string;
+  const { children, shapeFlag, dirs } = vnode;
+  let openTag = `{"id":${ssrGetUniqueId()},"index":0,"name":"${getHippyNativeViewName(tag)}","tagName":"${getHippyTagName(tag)}","props":`;
+
+  let props = vnode.props ?? {};
+  if (dirs) {
+    props = applySSRDirectives(vnode, props, dirs);
+  }
+
+  // because native tag compiled as custom element, so the native tag doesn't have
+  // scopeId(scopeId generated at compiler time)
+  // we use the child scopeId or parent scopeId if exist
+  let { scopeId } = vnode;
+  if (!scopeId && children?.length) {
+    scopeId = children[0].scopeId ?? null;
+  }
+  // use parent scopedId if exist
+  if (!scopeId && parentComponent?.vnode) {
+    scopeId = parentComponent.vnode.scopeId ?? null;
+  }
+
+  if (scopeId && typeof props[scopeId] === 'undefined') {
+    // custom element do not generate scopeId, so inserted here
+    props[scopeId] = '';
+    vnode.scopeId = scopeId;
+  }
+
+
+  // span/label/p/a, these nodes are all text node in native. so we should set text prop
+  if (
+    isTextTag(tag)
+  ) {
+    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      // text node children is array
+      if (children?.length) {
+        const textChild = (children as VNodeArrayChildren).filter((item) => {
+          if (typeof item === 'object') {
+            // only VNode & VNode Children is Object， other is base type
+            const text = item as VNode;
+            return text?.shapeFlag & ShapeFlags.TEXT_CHILDREN;
+          }
+          return false;
+        });
+        if (textChild.length) {
+          const child = textChild[0] as VNode;
+          props.text = child?.children as string;
+          // if text child node has scopedId attr, need insert to props
+          if (child?.scopeId) {
+            props[child.scopeId] = '';
+          }
+        }
+      }
+    }
+    if (shapeFlag & ShapeFlags.TEXT_CHILDREN && children) {
+      // text node children is string
+      props.text = children;
+    }
+  }
+  // transform event listener
+  Object.keys(props).forEach((key) => {
+    // event listener like onClick, onTouchStart is function. hippy just used true to marked.
+    // for example: <a @click="()=>{}"></a> to { tagName: "a", onClick: true }
+    // real event listener should bind at hydration
+    if (isFunction(props[key])) {
+      props[key] = true;
+    }
+  });
+
+  openTag += `${JSON.stringify(props)},`;
+  push(`${openTag}`);
+
+  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+    renderVNodeChildren(
+      push,
+      children as VNodeArrayChildren,
+      parentComponent,
+      slotScopeId,
+    );
+  }
+
+  push('},');
+}
+
+function applySSRDirectives(
+  vnode: VNode,
+  rawProps: VNodeProps | null,
+  dirs: DirectiveBinding[],
+): VNodeProps {
+  const toMerge: VNodeProps[] = [];
+  for (let i = 0; i < dirs.length; i++) {
+    const binding = dirs[i];
+    const {
+      dir: { getSSRProps },
+    } = binding;
+    if (getSSRProps) {
+      const props = getSSRProps(binding, vnode);
+      if (props) toMerge.push(props);
+    }
+  }
+  return mergeProps(rawProps ?? {}, ...toMerge);
+}
+
+function renderTeleportVNode(
+  push: PushFn,
+  vnode: VNode,
+  parentComponent: ComponentInternalInstance,
+  slotScopeId: string | undefined,
+): void {
+  const target = vnode.props?.to;
+  const disabled = vnode.props?.disabled;
+  if (!target) {
+    if (!disabled) {
+      warn('[@vue/server-renderer] Teleport is missing target prop.');
+    }
+  }
+  if (!isString(target)) {
+    warn('[@vue/server-renderer] Teleport target must be a query selector string.');
+  }
+  ssrRenderTeleport(
+    push,
+    (_push: PushFn) => {
+      renderVNodeChildren(
+        _push,
+        vnode.children as VNodeArrayChildren,
+        parentComponent,
+        slotScopeId,
+      );
+    },
+    target,
+    disabled || disabled === '',
+    parentComponent,
+  );
+}
+
+export function ssrRenderTeleport(
+  parentPush: PushFn,
+  contentRenderFn: (push: PushFn) => void,
+  target: string,
+  disabled: boolean,
+  parentComponent: ComponentInternalInstance,
+): void {
+  parentPush('{"id": -1,"name":"comment","props":{"text":"teleport start"}},');
+
+  const context = parentComponent.appContext.provides[
+    ssrContextKey as NeedToTyped
+  ] as SSRContext;
+  const teleportBuffers =    context.__teleportBuffers ?? (context.__teleportBuffers = {});
+  const targetBuffer =    teleportBuffers[target] || (teleportBuffers[target] = []);
+  // record current index of the target buffer to handle nested teleports
+  // since the parent needs to be rendered before the child
+  const bufferIndex = targetBuffer.length;
+
+  let teleportContent: SSRBufferItem;
+
+  if (disabled) {
+    contentRenderFn(parentPush);
+    teleportContent = '{"id": -1,"name":"comment","props":{"text":"teleport anchor"}},';
+  } else {
+    const { getBuffer, push } = createBuffer();
+    contentRenderFn(push);
+    push('{"id": -1,"name":"comment","props":{"text":"teleport anchor"}},');
+    teleportContent = getBuffer();
+  }
+
+  targetBuffer.splice(bufferIndex, 0, teleportContent);
+  parentPush('{"id": -1,"name":"comment","props":{"text":"teleport end"}},');
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
new file mode 100644
index 00000000000..67d7d900aad
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
@@ -0,0 +1,490 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-param-reassign */
+
+import { getCurrentInstance, type App } from '@vue/runtime-core';
+import { renderToString } from '@vue/server-renderer';
+import type { HippyAppOptions } from '@hippy-vue-next/index';
+import { getObjectNodeList } from './util';
+import type {
+  SsrCommonParams,
+  SsrNode,
+  SsrNodeProps,
+} from './index';
+
+/**
+ * SSR Request context type
+ *
+ * @public
+ */
+export interface SsrRequestContext {
+  isIOS?: boolean;
+  dimensions?: {
+    screen: {
+      width: number;
+      height: number;
+      statusBarHeight: number;
+    }
+  }
+}
+
+/**
+ * SSR render options type
+ */
+interface SsrRenderOption {
+  rootContainer: string;
+  ssrOptions?: HippyAppOptions;
+  context?: SsrRequestContext;
+}
+
+// native text input type
+const INPUT_VALUE_MAP = {
+  number: 'numeric',
+  text: 'default',
+  search: 'web-search',
+};
+
+/**
+ * merge default props to ssr node. some native node should have default props, so we need to add
+ * to prop. the same logic with client runtime
+ *
+ * @param node - ssrNode
+ * @param nodeList - ssrNodeList
+ */
+function mergeDefaultNativeProps(
+  node: SsrNode,
+  nodeList: SsrNode[],
+): SsrNodeProps {
+  const commonProps = { id: '', class: '' };
+  let defaultNativeProps: SsrNodeProps = {};
+  let eventMap;
+
+  switch (node.name) {
+    case 'View':
+    case 'ScrollView':
+      eventMap = {
+        onTouchStart: 'onTouchDown',
+        onTouchstart: 'onTouchDown',
+        onTouchMove: 'onTouchMove',
+        onTouchend: 'onTouchEnd',
+        onTouchcancel: 'onTouchCancel',
+      };
+      Object.keys(eventMap).forEach((v) => {
+        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
+          // set hippy real native event name
+          defaultNativeProps[eventMap[v]] = true;
+          // remove vue old event listener
+          delete node.props[v];
+        }
+      });
+      break;
+    case 'ListView':
+      defaultNativeProps = {
+        // calculate child nums
+        numberOfRows: nodeList.filter(v => v.pId === node.id).length,
+      };
+      // polyFillNativeEvents
+      if (node.props.onEndReached || node.props.onLoadMore) {
+        defaultNativeProps.onEndReached = true;
+        defaultNativeProps.onLoadMore = true;
+      }
+      eventMap = {
+        onListReady: 'initialListReady',
+      };
+      Object.keys(eventMap).forEach((v) => {
+        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
+          // set hippy real native event name
+          defaultNativeProps[eventMap[v]] = true;
+          // remove vue old event listener
+          delete node.props[v];
+        }
+      });
+      break;
+    case 'Text':
+      defaultNativeProps = { text: '' };
+      break;
+    case 'TextInput':
+      defaultNativeProps = { underlineColorAndroid: 0 };
+      if (node.tagName === 'textarea') {
+        defaultNativeProps.numberOfLines = 5;
+      }
+      eventMap = {
+        onChange: 'changeText',
+        onSelect: 'selectionChange',
+      };
+      Object.keys(eventMap).forEach((v) => {
+        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
+          // set hippy real native event name
+          defaultNativeProps[eventMap[v]] = true;
+          // remove vue old event listener
+          delete node.props[v];
+        }
+      });
+      break;
+    case 'ViewPager':
+      defaultNativeProps = { initialPage: node.props.current };
+      eventMap = {
+        onDropped: 'onPageSelected',
+        onDragging: 'onPageScroll',
+        onStateChanged: 'onPageScrollStateChanged',
+      };
+      Object.keys(eventMap).forEach((v) => {
+        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
+          // set hippy real native event name
+          defaultNativeProps[eventMap[v]] = true;
+          // remove vue old event listener
+          delete node.props[v];
+        }
+      });
+      break;
+    case 'WebView':
+      defaultNativeProps = {
+        method: 'get',
+        userAgent: '',
+      };
+      break;
+    case 'Modal':
+      defaultNativeProps = {
+        transparent: true,
+        immersionStatusBar: true,
+        collapsable: false,
+      };
+      break;
+    case 'Image':
+      defaultNativeProps = {
+        backgroundColor: 0,
+      };
+      break;
+    default:
+      break;
+  }
+  return Object.assign(commonProps, defaultNativeProps);
+}
+
+/**
+ * parse text input map props
+ *
+ * @param tagName
+ * @param rawProps
+ */
+function parseTextInputProps(tagName: string, rawProps: SsrCommonParams): SsrCommonParams {
+  const props = rawProps;
+
+  // handle common input props map
+  if (props.type) {
+    props.keyboardType = INPUT_VALUE_MAP[props.type] ?? props.type;
+    delete props.type;
+  }
+  if (props.disabled) {
+    props.editable = !props.disabled;
+    delete props.disabled;
+  }
+  if (typeof props.value !== 'undefined') {
+    props.defaultValue = props.value;
+    delete props.value;
+  }
+  if (props.maxlength) {
+    props.maxLength = props.maxlength;
+    delete props.maxlength;
+  }
+
+  if (tagName === 'textarea') {
+    props.multiline = true;
+    // handle textarea props map
+    if (props.rows) {
+      props.numberOfLines = props.rows;
+      delete props.rows;
+    }
+  } else {
+    props.numberOfLines = 1;
+    props.multiline = false;
+  }
+
+  return props;
+}
+
+/**
+ * get node's props. merge all props need to merged
+ *
+ * @param node - ssr node
+ * @param nodeList - ssr node list
+ * @param isIOS - client is iOS or not
+ */
+function getNodeProps(
+  node: SsrNode,
+  nodeList: SsrNode[],
+  isIOS?: boolean,
+): SsrNodeProps {
+  let { props } = node;
+  // merge all props
+  props = {
+    ...mergeDefaultNativeProps(node, nodeList),
+    ...props,
+    ...props.mergedProps,
+  };
+  delete props.mergedProps;
+  // assign id and class to attribute props. id & class should use for devtools at client side
+  // and use for ssr
+  props.attributes = {
+    id: props?.attributes?.id ?? props.id,
+    class: props?.attributes?.class ?? props.class,
+  };
+  // delete unnecessary props
+  delete props.id;
+  delete props.class;
+  delete props.attributes.style;
+  delete props.attributes.text;
+
+  // compatible iOS image src and fontWeight
+  if (
+    isIOS && node.name === 'Image' && props.src
+  ) {
+    props.source = [{ uri: props.src }];
+    delete props.src;
+  }
+  // compatible fontWeight
+  if (props?.style?.fontWeight) {
+    props.style.fontWeight = String(props.style.fontWeight);
+  }
+  // compatible placeholder
+  if (typeof props.placeholder !== 'undefined') {
+    props.placeholder = String(props.placeholder);
+  }
+
+  if (node.name === 'TextInput') {
+    parseTextInputProps(node.tagName ?? '', props);
+  }
+
+  if (node.name === 'WebView') {
+    props.source = {
+      uri: props.src,
+    };
+    delete props.src;
+  }
+
+  return props;
+}
+
+/**
+ * convert ssr node's special kebabCase props name to camelCase name
+ *
+ * @param rawProps
+ */
+function convertSpecialKebabCaseToCamelCase(rawProps: SsrNodeProps): SsrNodeProps {
+  const props = rawProps;
+
+  if (props['caret-color']) {
+    props.caretColor = props['caret-color'];
+    delete props['caret-color'];
+  }
+
+  if (props['underline-color-android']) {
+    props.underlineColorAndroid = props['underline-color-android'];
+    delete props['underline-color-android'];
+  }
+
+  if (props['placeholder-text-color']) {
+    props.placeholderTextColor = props['placeholder-text-color'];
+    delete props['placeholder-text-color'];
+  }
+
+  if (props['break-strategy']) {
+    props.breakStrategy = props['break-strategy'];
+    delete props['break-strategy'];
+  }
+
+  return props;
+}
+
+/**
+ * convert ssr node list to hippy node list, add props for every node
+ *
+ * @param nodeList - ssr node list
+ * @param options - hippy context
+ */
+function convertToHippyNodeList(
+  nodeList: SsrNode[],
+  options: SsrRenderOption,
+): SsrNode[] {
+  return nodeList.map((item) => {
+    // add props for every node
+    const props = convertSpecialKebabCaseToCamelCase(getNodeProps(item, nodeList, options?.context?.isIOS));
+    return {
+      ...item,
+      props,
+    };
+  });
+}
+
+/**
+ * flat hippy node tree to list structure
+ *
+ * @param parentNode - parent node
+ * @param nodeList - flatted node list
+ * @param pId - parent id
+ * @param index - the index position of the current node among sibling nodes
+ */
+function treeToList(
+  parentNode: SsrNode,
+  nodeList: SsrNode[] = [],
+  pId?: number,
+  index?: number,
+): SsrNode[] {
+  // parent node
+  nodeList.push({
+    id: parentNode.id,
+    pId: parentNode.pId ?? pId ?? 0,
+    index: index ?? 0,
+    name: parentNode.name,
+    props: parentNode.props,
+    tagName: parentNode.tagName,
+  });
+  // child node
+  const { children } = parentNode;
+  children?.forEach((v, i) => {
+    // filter native do not display node
+    let insertIndex = children.filter(c => c.name !== 'comment').indexOf(v);
+    // record the comment node index as the serial number of the current
+    // insertable child node, which is convenient for rebuilding the tree structure
+    if (v.name === 'comment') {
+      insertIndex = children
+        .slice(0, i)
+        .filter(c => c.name !== 'comment').length;
+    }
+    // handle all list
+    treeToList(v, nodeList, parentNode.id, insertIndex);
+  });
+
+  return nodeList;
+}
+
+/**
+ * create ssr root node
+ *
+ * @param rootContainer - id of root node
+ */
+function createSSRRootNode(rootContainer: string): SsrNode {
+  return {
+    id: 1, // root node id hardcode to 1
+    pId: 0, // root node's parent id set to 0, reset at client side
+    index: 0,
+    name: 'View',
+    props: {
+      style: { flex: 1 },
+      attributes: { id: rootContainer, class: '' },
+    },
+    tagName: 'div',
+    children: [],
+  };
+}
+
+/**
+ * key of ssr unique id
+ */
+export const SSR_UNIQUE_ID_KEY = 'ssrUniqueIdKey';
+
+/**
+ * generate unique id base on currentId. if no currentId provide. 1 will be the default value
+ *
+ * @param currentId - current used unique Id
+ */
+function generateUniqueId(currentId?: number): number {
+  let ssrUniqueId = currentId;
+  if (!ssrUniqueId) ssrUniqueId = 1;
+  ssrUniqueId += 1;
+
+  // ids divisible by 10 are used by the native
+  if (ssrUniqueId % 10 === 0) {
+    ssrUniqueId += 1;
+  }
+
+  return ssrUniqueId;
+}
+
+/**
+ * generate hippy unique id at ssr. this is ssr helper
+ *
+ * @public
+ */
+export function ssrGetUniqueId(): number {
+  const currentInstance = getCurrentInstance();
+  const uniqueIdContext = currentInstance?.appContext?.provides[
+    SSR_UNIQUE_ID_KEY
+  ] as {
+    ssrUniqueId?: number;
+  };
+
+  // generate unique id, and save in global context
+  // unique id generated by current unique id
+  uniqueIdContext.ssrUniqueId = generateUniqueId(uniqueIdContext?.ssrUniqueId);
+  return uniqueIdContext.ssrUniqueId;
+}
+
+/**
+ * get unique id at current vue app instance
+ *
+ * @param app - vue app instance
+ *
+ * @public
+ */
+export function getCurrentUniqueId(app: App): number {
+  return app._context.provides[SSR_UNIQUE_ID_KEY].ssrUniqueId;
+}
+
+/**
+ * convert hippy node list json string to hippy native node tree
+ *
+ * @param app - vue ssr app
+ * @param options - ssr options
+ *
+ * @public
+ */
+export async function renderToHippyList(
+  app: App,
+  options: SsrRenderOption,
+): Promise<SsrNode[] | null> {
+  const startUniqueId = 1;
+  const uniqueIdContext = { ssrUniqueId: startUniqueId };
+  // An additional context needs to be provided here because ssrContext is mounted after
+  // the render function is called, but ssrGetUniqueId will be called in the render function
+  app.provide(SSR_UNIQUE_ID_KEY, uniqueIdContext);
+  const { rootContainer } = options;
+  // first, create root node with rootContainer.
+  // In the non-hydration mode of the client, the rootContainer node is created by the client
+  const rootNode = createSSRRootNode(rootContainer);
+  // second, we get hippy native node list string generated by ssr
+  const appContent = await renderToString(app, options);
+  // third, make ssr node list as children of rootContainer
+  const ssrNodeTree = getObjectNodeList([appContent], rootNode);
+  // render failure, return null
+  if (!ssrNodeTree) {
+    return null;
+  }
+  // flat node tree to array list
+  const nodeList = treeToList(ssrNodeTree);
+  // comment list append at the end
+  const commentList = nodeList.filter(v => v.name === 'comment');
+  // last, convert ssr node list to hippy node list, we add node props and return with comment list
+  return convertToHippyNodeList(
+    nodeList.filter(v => v.name !== 'comment'),
+    options,
+  ).concat(commentList);
+}
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/util.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/util.ts
new file mode 100644
index 00000000000..e4a633844b0
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/util.ts
@@ -0,0 +1,80 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { NeedToTyped, SsrNode } from './index';
+
+const unescapeRE = /&quot;|&amp;|&#39;|&lt;|&gt;/;
+
+/**
+ * unescape xss html entity
+ *
+ * @param string - html entity string
+ */
+export function unescapeHtml(string: string): string {
+  let str = string;
+  const match = unescapeRE.exec(str);
+
+  // return if non match
+  if (!match) {
+    return str;
+  }
+
+  // unescape
+  str = str.replace(/&quot;/g, '"');
+  str = str.replace(/&amp;/g, '&');
+  str = str.replace(/&#39;/g, '\'');
+  str = str.replace(/&lt;/g, '<');
+  str = str.replace(/&gt;/g, '>');
+
+  return str;
+}
+
+/**
+ * remove unnecessary punctuation in node string, and parse node string to object
+ */
+export function getObjectNodeList(nodeString: (string | string[])[], rootNode?: SsrNode): NeedToTyped {
+  // flat nested array and connect
+  // for example [
+  //       '{"id":22,"index":0,"name":"View","tagName":"div","props":{},"children":[',
+  //       [ '{"id":23,"index":0,"name":"View","tagName":"div","props":{},},' ],
+  //       '],},'
+  //     ]
+  // transform to
+  // ['{"id":22,"index":0,"name":"View","tagName":"div","props":{},"children":
+  // [','{"id":23,"index":0,"name":"View","tagName":"div","props":{},},', '],},']
+  const rawString = nodeString.flat(Infinity).join('');
+  // remove unnecessary punctuation
+  let parsedStr = rawString
+    .replace(/,}|,]/g, match => match.slice(1))
+    .replace(/,$/, '')
+    .replace(/\n/g, '\\n');
+  let ssrNodeTree: NeedToTyped;
+  try {
+    if (rootNode) {
+      const rootNodeStr = JSON.stringify(rootNode);
+      parsedStr = rootNodeStr.replace('"children":[]', `"children":[${parsedStr}]`);
+    }
+    // parse json string to json object
+    ssrNodeTree = JSON.parse(parsedStr);
+    return ssrNodeTree;
+  } catch (e) {
+    return null;
+  }
+}
diff --git a/driver/js/packages/hippy-vue-next-style-parser/__test__/setup.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/setup.ts
new file mode 100644
index 00000000000..b91d95580d6
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/setup.ts
@@ -0,0 +1,80 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// mock global Hippy
+global.Hippy = {
+  bridge: {
+    callNative: () => {},
+    callNativeWithPromise: () => {},
+    callNativeWithCallbackId: () => {},
+  },
+  device: {
+    platform: { OS: 'android' },
+    screen: {
+      width: 375,
+      height: 667,
+      scale: 1,
+      fontScale: 1,
+      statusBarHeight: 20,
+      navigatorBarHeight: 20,
+    },
+    window: {
+      width: 375,
+      height: 667,
+      scale: 1,
+      fontScale: 1,
+      statusBarHeight: 20,
+      navigatorBarHeight: 20,
+    },
+  },
+  document: {
+    //  simulate app injection
+    createNode: () => {},
+    updateNode: () => {},
+    deleteNode: () => {},
+    flushBatch: () => {},
+    setNodeTree: () => {},
+    setNodeId: () => {},
+    getNodeById: () => {},
+    getNodeIdByRef: () => {},
+    callUIFunction: () => {},
+    measureInWindow: () => {},
+    startBatch: () => {},
+    endBatch: () => {},
+    sendRenderError: () => {},
+  },
+  register: {},
+};
+
+// mock global variable
+global.__GLOBAL__ = {
+  jsModuleList: {},
+};
+
+global.__HIPPYNATIVEGLOBAL__ = {
+  OSVersion: '1.0.0.0',
+  SDKVersion: '1.0.0.0',
+  Platform: {
+    APILevel: '1.0.0.0',
+  },
+  Device: 'iPhone 12',
+};
+
+process.env.PORT = '38989';
diff --git a/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/css-append.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/css-append.test.ts
new file mode 100644
index 00000000000..985f549ad1e
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/css-append.test.ts
@@ -0,0 +1,128 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { insertStyleForSsrNodes } from '../../src/style-match/css-append';
+import type { StyleNode } from '../../src';
+
+/**
+ * style-match/append.ts unit test case
+ */
+describe('style-match/index.ts', () => {
+  it('insertStyleForSsrNodes should work correctly', () => {
+    const nodeList = [
+      { id: 1, pId: 0, index: 0, name: 'View', props: { style: { flex: 1 }, attributes: { id: 'root', class: 'rootClass' } }, tagName: 'div' },
+      { id: 2, pId: 1, index: 0, name: 'View', props: { attributes: { id: 'wrapper', class: 'wrapperClass' } }, tagName: 'div' },
+      { id: 3, pId: 2, index: 0, name: 'ListView', props: {}, tagName: 'ul' },
+      { id: 4, pId: 3, index: 0, name: 'ListViewItem', props: { }, tagName: 'li' },
+      { id: 5, pId: 4, index: 0, name: 'Image', props: { }, tagName: 'img' },
+      { id: 6, pId: 4, index: 0, name: 'Text', props: { }, tagName: 'span' },
+      { id: 7, pId: 4, index: 0, name: 'ViewPagerItem', props: { }, tagName: 'swiper-item' },
+      { id: 8, pId: 4, index: 0, name: 'Modal', props: { style: { 'margin-left': '10px' } }, tagName: 'dialog' },
+      { id: 9, pId: 4, index: 0, name: 'TextInput', props: { style: { caretColor: 'gray', underlineColorAndroid: 'gray', placeholderTextColor: 'gray' } }, tagName: 'input' },
+      { id: 11, pId: 4, index: 0, name: 'View', props: { style: {
+        overflowX: 'scroll',
+        textShadowOffset: {
+          x: 1,
+          y: 1,
+        },
+        // support declare textShadowOffsetX & textShadowOffsetY separately
+        textShadowOffsetX: 1,
+        textShadowOffsetY: 1,
+        textShadowRadius: 3,
+        textShadowColor: 'grey',
+      } }, tagName: 'div' },
+    ];
+    const styleContent = [
+      // root class
+      [
+        ['.rootClass'],
+        [
+          [
+            'width',
+            '1rem',
+          ],
+          [
+            'backgroundColor',
+            'gray',
+          ],
+        ],
+      ],
+      [
+        ['#root'],
+        [
+          [
+            'height',
+            '1rem',
+          ],
+        ],
+      ],
+      // wrapper class
+      [
+        ['.wrapperClass'],
+        [
+          [
+            'display',
+            'flex',
+          ],
+          [
+            'overflowY',
+            'scroll',
+          ],
+        ],
+      ],
+      [
+        ['span'],
+        [
+          ['fontWeight', 123],
+          ['backgroundImage', 'url("https://hippyjs.org")'],
+          ['width', '24px'],
+        ],
+      ],
+    ];
+    const nativeNodes = insertStyleForSsrNodes(nodeList as unknown as StyleNode[], styleContent);
+    // default style and css style check
+    expect(nativeNodes[0].props.style).toEqual({ width: 50, backgroundColor: 4286611584, height: 50, flex: 1 });
+    expect(nativeNodes[0].props.inlineStyle).toEqual({ flex: 1 });
+    expect(nativeNodes[1].props.style).toEqual({ display: 'flex', overflowY: 'scroll' });
+    expect(nativeNodes[2].props.style).toEqual({ flex: 1, collapsable: false });
+    expect(nativeNodes[4].props.style).toEqual({ backgroundColor: 0 });
+    expect(nativeNodes[5].props.style).toEqual({ color: 4278190080, backgroundImage: 'https://hippyjs.org', fontWeight: '123', width: 24 });
+    expect(nativeNodes[6].props.style).toEqual({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 });
+    expect(nativeNodes[7].props.style).toEqual({ position: 'absolute', marginLeft: 10 });
+    expect(nativeNodes[8].props.style).toEqual({
+      padding: 0,
+      color: 4278190080,
+      caretColor: 4286611584,
+      placeholderTextColor: 4286611584,
+      underlineColorAndroid: 4286611584,
+    });
+
+    expect(nativeNodes[9].props.style).toEqual({ overflowX: 'scroll', flexDirection: 'row', textShadowColor: 4286611584,
+      textShadowOffset: {
+        height: 1,
+        width: 1,
+        x: 1,
+        y: 1,
+      },
+      textShadowRadius: 3,
+    });
+    expect(nativeNodes[9].props.horizontal).toBeTruthy();
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/style/index.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/index.test.ts
similarity index 80%
rename from driver/js/packages/hippy-vue-next/__test__/runtime/style/index.test.ts
rename to driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/index.test.ts
index f13f6ef0232..ba6c4ecfb01 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/style/index.test.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/index.test.ts
@@ -18,17 +18,13 @@
  * limitations under the License.
  */
 
-/**
- * runtime/style/index unit test
- *
- */
-import { HIPPY_GLOBAL_DISPOSE_STYLE_NAME, HIPPY_GLOBAL_STYLE_NAME } from '../../../src/config';
-import { HippyElement } from '../../../src/runtime/element/hippy-element';
-import { fromAstNodes, SelectorsMap } from '../../../src/runtime/style';
-import { SimpleSelectorSequence } from '../../../src/runtime/style/css-selectors';
-import { getCssMap } from '../../../src/runtime/style/css-map';
-import { registerElement } from '../../../src/runtime/component';
-import { setHippyCachedInstance } from '../../../src/util/instance';
+import { HIPPY_GLOBAL_DISPOSE_STYLE_NAME, HIPPY_GLOBAL_STYLE_NAME } from '../../../hippy-vue-next/src/config';
+import { HippyElement } from '../../../hippy-vue-next/src/runtime/element/hippy-element';
+import { SelectorsMap, type StyleNode } from '../../src/style-match';
+import { SimpleSelectorSequence } from '../../src/style-match/css-selectors';
+import { getCssMap, fromAstNodes, fromSsrAstNodes } from '../../src/style-match/css-map';
+import { registerElement } from '../../../hippy-vue-next/src/runtime/component';
+import { setHippyCachedInstance } from '../../../hippy-vue-next/src/util/instance';
 
 // AST used for test
 const testAst = [
@@ -244,11 +240,9 @@ const testAst = [
 ];
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * style-match/index.ts unit test case
  */
-describe('runtime/style/index.ts', () => {
+describe('style-match/index.ts', () => {
   let cssMap;
 
   beforeAll(() => {
@@ -345,7 +339,6 @@ describe('runtime/style/index.ts', () => {
     divElement.setAttribute('id', 'id');
 
     const matchedCss = cssMap.query(divElement);
-    // chunk-2 removed, two selectors removed
     expect(matchedCss.selectors.length).toEqual(13);
   });
 
@@ -415,14 +408,14 @@ describe('runtime/style/index.ts', () => {
     const cssMap = new SelectorsMap(cssRules);
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id1');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(0);
     divElement.setAttribute('id', 'id');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'test');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
     expect(matched.selectors[0] instanceof SimpleSelectorSequence).toBeTruthy();
@@ -447,11 +440,11 @@ describe('runtime/style/index.ts', () => {
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
     divElement.setAttribute('attr', 'tes');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'test');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
   });
@@ -475,11 +468,11 @@ describe('runtime/style/index.ts', () => {
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
     divElement.setAttribute('attr', 'est');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'tes321321');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
   });
@@ -503,11 +496,11 @@ describe('runtime/style/index.ts', () => {
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
     divElement.setAttribute('attr', 'abtes');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'abtest');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
   });
@@ -531,11 +524,11 @@ describe('runtime/style/index.ts', () => {
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
     divElement.setAttribute('attr', 'testworld');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'test world');
-    matched = cssMap.query(divElement);
+    matched = cssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
   });
@@ -559,15 +552,81 @@ describe('runtime/style/index.ts', () => {
     const divElement = new HippyElement('div');
     divElement.setAttribute('id', 'id');
     divElement.setAttribute('attr', 'das');
-    let matched = cssMap.query(divElement);
+    let matched = cssMap.query(divElement as unknown as StyleNode);
+    expect(matched.selectors.length).toEqual(1);
+    expect(matched.selectors[0].match(divElement)).toBeFalsy();
+    divElement.setAttribute('attr', 'dash');
+    matched = cssMap.query(divElement as unknown as StyleNode);
+    expect(matched.selectors.length).toEqual(1);
+    expect(matched.selectors[0].match(divElement)).toBeTruthy();
+    divElement.setAttribute('attr', 'dash-world');
+    matched = cssMap.query(divElement as unknown as StyleNode);
+    expect(matched.selectors.length).toEqual(1);
+    expect(matched.selectors[0].match(divElement)).toBeTruthy();
+  });
+
+  it('getCssMap should work correctly with ssr ast', () => {
+    // remove exist css map
+    global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME] = ['chunk-1'];
+    getCssMap();
+    // add ssr css map
+    const ssrTestAst = [[
+      ['.class', '*'],
+      [
+        [
+          'ClassSelector',
+          'ClassSelector',
+        ],
+        [
+          'UniversalSelector',
+          'UniversalSelector',
+        ],
+      ],
+    ],
+    [
+      [
+        '*',
+      ],
+      [
+        [
+          'UniversalSelector-chunk-2',
+          'UniversalSelector-chunk-2',
+        ],
+      ],
+    ]];
+    const ssrCssMap = getCssMap(ssrTestAst);
+    const divElement = new HippyElement('div');
+    divElement.setAttribute('class', 'class');
+
+    const matchedCss = ssrCssMap.query(divElement as unknown as StyleNode);
+    expect(matchedCss.selectors.length).toEqual(3);
+  });
+
+  it('fromSsrAstNodes should work correctly', () => {
+    const ssrAst = [[
+      ['#id[attr|="dash"]'],
+      [
+        [
+          'AttributeSelector',
+          'AttributeSelector',
+        ],
+      ],
+    ]];
+
+    const ssrCssRules = fromSsrAstNodes(ssrAst);
+    const ssrCssMap = new SelectorsMap(ssrCssRules);
+    const divElement = new HippyElement('div');
+    divElement.setAttribute('id', 'id');
+    divElement.setAttribute('attr', 'das');
+    let matched = ssrCssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeFalsy();
     divElement.setAttribute('attr', 'dash');
-    matched = cssMap.query(divElement);
+    matched = ssrCssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
     divElement.setAttribute('attr', 'dash-world');
-    matched = cssMap.query(divElement);
+    matched = ssrCssMap.query(divElement as unknown as StyleNode);
     expect(matched.selectors.length).toEqual(1);
     expect(matched.selectors[0].match(divElement)).toBeTruthy();
   });
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/style/parser.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/parser.test.ts
similarity index 92%
rename from driver/js/packages/hippy-vue-next/__test__/runtime/style/parser.test.ts
rename to driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/parser.test.ts
index 6fb7a99b072..64cea8bc6a6 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/style/parser.test.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-match/parser.test.ts
@@ -18,18 +18,12 @@
  * limitations under the License.
  */
 
-/**
- * runtime/style/parser unit test
- *
- */
-import { parseSelector } from '../../../src/runtime/style/parser';
+import { parseSelector } from '../../src/style-match/parser';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * style-match/parser.ts unit test case
  */
-describe('runtime/style/parser.ts', () => {
+describe('style-match/parser.ts', () => {
   // id selector parser
   it('id selector should parser correctly', async () => {
     const parsedValue = {
diff --git a/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts
new file mode 100644
index 00000000000..63c80787226
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/color-parser.test.ts
@@ -0,0 +1,68 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { translateColor } from '../../src/style-parser/color-parser';
+
+/**
+ * style-parser/color-parser.ts unit test case
+ */
+describe('style-parser/color-parser.ts', () => {
+  it('color translation', () => {
+    expect(translateColor('#abc')).toEqual(4289379276);
+    expect(translateColor('#abcd')).toEqual(3718953932);
+    expect(translateColor('#abcdef')).toEqual(4289449455);
+    expect(translateColor('#11223344')).toEqual(1141973555);
+    expect(translateColor('#123')).toEqual(4279312947);
+    expect(translateColor('rgb(10, 20, 30)')).toEqual(4278850590);
+    expect(translateColor('rgb(-10, 300, 30)')).toEqual(4278255390);
+    expect(translateColor('rgba(10, 20, 30, .8)')).toEqual(3423212574);
+    expect(translateColor('rgba(10, 20, 30, -.3)')).toEqual(660510);
+    expect(translateColor('rgba(10, 20, 30, 1.8)')).toEqual(4278850590);
+    expect(translateColor('hsl(100, 20%, 30%)')).toEqual(4282866749);
+    expect(translateColor('hsl(100000, 20%, 30%)')).toEqual(4283579740);
+    expect(translateColor('hsla(100, 40%, 50%, .8)')).toEqual(3429806925);
+    expect(translateColor('hsla(100, -10%, 120%, .8)')).toEqual(3439329279);
+    expect(translateColor('transparent')).toEqual(0);
+    expect(translateColor('blueviolet')).toEqual(4287245282);
+    expect(translateColor(4287245282)).toEqual(3808397867);
+    expect(translateColor('var(-Bg)')).toEqual('var(-Bg)');
+  });
+
+  it('color translation error handle NaN', () => {
+    expect(() => translateColor(NaN)).toThrow('Bad color value: NaN');
+  });
+
+  it('color translation error handle #abz', () => {
+    expect(() => translateColor('#abz')).toThrow('Bad color value: #abz');
+  });
+
+  it('color translation error handle #abcdefz', () => {
+    expect(() => translateColor('#abcdefz')).toThrow('Bad color value: #abcdefz');
+  });
+
+  it('color translation error handle #0 and #01', () => {
+    expect(() => translateColor('#0')).toThrow('Bad color value: #0');
+    expect(() => translateColor('#01')).toThrow('Bad color value: #01');
+  });
+
+  it('color translation error handle abc', () => {
+    expect(() => translateColor('abc')).toThrow('Bad color value: abc');
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/css-parser.test.ts b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/css-parser.test.ts
new file mode 100644
index 00000000000..67d2d73da62
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/__test__/style-parser/css-parser.test.ts
@@ -0,0 +1,118 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { convertToDegree, DEGREE_UNIT, parseBackgroundImage, parseCSS } from '../../src/style-parser/css-parser';
+
+/**
+ * style-parser/css-parser.ts unit test case
+ */
+describe('style-parser/css-parser.ts', () => {
+  it('convertToDegree should work correctly', () => {
+    expect(convertToDegree('0deg', DEGREE_UNIT.DEG)).toEqual('0deg');
+    expect(convertToDegree('90deg', DEGREE_UNIT.DEG)).toEqual('90deg');
+    expect(convertToDegree('-180deg', DEGREE_UNIT.DEG)).toEqual('-180deg');
+    expect(convertToDegree('1.234deg', DEGREE_UNIT.DEG)).toEqual('1.23');
+    expect(convertToDegree('0rad', DEGREE_UNIT.RAD)).toEqual('0.00');
+    expect(convertToDegree('1rad', DEGREE_UNIT.RAD)).toEqual('57.30');
+    expect(convertToDegree('6rad', DEGREE_UNIT.RAD)).toEqual('343.77');
+    expect(convertToDegree('0turn', DEGREE_UNIT.TURN)).toEqual('0.00');
+    expect(convertToDegree('0.5turn', DEGREE_UNIT.TURN)).toEqual('180.00');
+    expect(convertToDegree('1.2turn', DEGREE_UNIT.TURN)).toEqual('432.00');
+  });
+
+  it('parseBackgroundImage should work correctly', () => {
+    const linearGradient = ['linearGradient', {
+      angle: '30', colorStopList: [
+        { color: 4278190335, ratio: 0.1 },
+        { color: 4294967040, ratio: 0.4 },
+        { color: 4294901760, ratio: 0.5 },
+      ],
+    }];
+    expect(parseBackgroundImage('backgroundImage', 'linear-gradient(30deg, blue 10%, yellow 40%, red 50%)')).toEqual(linearGradient);
+    const urlBgImg = ['backgroundImage', 'https://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'];
+    expect(parseBackgroundImage('backgroundImage', 'url(\'https://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png\')')).toEqual(urlBgImg);
+    const url = ['backgroundImage', 'https://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png'];
+    expect(parseBackgroundImage('backgroundImage', 'https://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png')).toEqual(url);
+  });
+
+  it('parseCSS should work correctly', () => {
+    const cssString = `
+      #root {
+        flex: 1;
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+      }
+      #header {
+        height: 60px;
+        background-color: #40b883;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding-horizontal: 10px;
+      }
+      #root .left-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        box-shadow-opacity: 0.6;
+        box-shadow-radius: 5;
+        box-shadow-spread: 1; /* spread attr is only supported on iOS */
+        box-shadow-offset: 10px 10px;
+      }
+      #root #back-btn {
+        height: 20px;
+        width: 24px;
+        margin-top: 18px;
+        margin-bottom: 18px;
+        transform: rotate(30deg) scale(0.5);
+      }
+      .title {
+        font-size: 0.4rem;
+        line-height: 60px;
+        margin-left: 5px;
+        margin-right: 10px;
+        font-weight: bold;
+        background-color: #40b883;
+        color: #ffffff;
+      }
+      #root .body-container {
+        flex: 1;
+        collapsable: false;
+        background-image: url('https://test.com/test.jpg');
+      }`;
+    const parsedCss = parseCSS(cssString);
+    const [root, header, leftTitle, backBtn, title, bodyContainer] = parsedCss.stylesheet.rules;
+    expect(root.selectors).toEqual(['#root']);
+    expect(root.declarations.length).toEqual(4);
+    expect(header.selectors).toEqual(['#header']);
+    expect(header.declarations.length).toEqual(7);
+    expect(leftTitle.selectors).toEqual(['#root .left-title']);
+    expect(leftTitle.declarations.length).toEqual(9);
+    expect(backBtn.selectors).toEqual(['#root #back-btn']);
+    expect(backBtn.declarations.length).toEqual(5);
+    expect(title.selectors).toEqual(['.title']);
+    expect(title.declarations.length).toEqual(7);
+    expect(bodyContainer.selectors).toEqual(['#root .body-container']);
+    expect(bodyContainer.declarations.length).toEqual(3);
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next-style-parser/package.json b/driver/js/packages/hippy-vue-next-style-parser/package.json
index 1b859727f16..e7b41b3244e 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/package.json
+++ b/driver/js/packages/hippy-vue-next-style-parser/package.json
@@ -6,13 +6,16 @@
   "homepage": "https://hippyjs.org",
   "license": "Apache-2.0",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "keywords": [
     "hippy",
     "style",
     "parser"
   ],
+  "types": "dist/index.d.ts",
   "files": [
     "dist/index.js",
+    "dist/index.esm.js",
     "dist/index.d.ts",
     "README.md"
   ],
@@ -21,7 +24,25 @@
     "url": "https://github.com/Tencent/Hippy/issues"
   },
   "dependencies": {
-    "@vue/shared": "^3.2.21"
+    "@vue/shared": "^3.2.46"
   },
-  "entry": "./src/index.ts"
+  "entry": "./src/index.ts",
+  "jest": {
+    "moduleNameMapper": {
+      "^src/(.*)$": "<rootDir>/src/$1",
+      "@hippy-vue-next-style-parser/(.*)$": "<rootDir>/src/$1"
+    },
+    "modulePaths": [
+      "<rootDir>"
+    ],
+    "preset": "ts-jest",
+    "setupFiles": [
+      "<rootDir>/__test__/setup.ts"
+    ],
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "verbose": true
+  }
 }
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/index.ts b/driver/js/packages/hippy-vue-next-style-parser/src/index.ts
index 1bd308b8e00..75de38a3a32 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/src/index.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/index.ts
@@ -18,5 +18,11 @@
  * limitations under the License.
  */
 
+/**
+ * @public
+ */
+export type NeedToTyped = any;
+
 export * from './style-parser/css-parser';
 export { translateColor } from './style-parser/color-parser';
+export * from './style-match';
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
new file mode 100644
index 00000000000..e0bf14538df
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
@@ -0,0 +1,386 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-param-reassign */
+
+/**
+ * insert hippy style for ssr nodes
+ */
+import { camelize } from '@vue/shared';
+import {
+  translateColor,
+  type NeedToTyped,
+  parseBackgroundImage,
+  PROPERTIES_MAP,
+  PropertiesMapType,
+} from '../index';
+import {
+  getCssMap,
+  type StyleNode,
+  type CommonMapParams,
+  type StyleNodeList,
+} from './index';
+
+interface OffsetMapType {
+  textShadowOffsetX: string;
+  textShadowOffsetY: string;
+}
+
+// regular expression of number format
+const numberRegEx = new RegExp('^(?=.+)[+-]?\\d{0,17}\\.?\\d{0,5}([Ee][+-]?\\d{1,5})?$');
+
+function tryConvertNumber<T extends string | number>(
+  str: T,
+): T extends number ? number : string | number;
+
+/**
+ * Convert strings to number as much as possible
+ */
+function tryConvertNumber(str: string | number): string | number {
+  if (typeof str === 'number') {
+    return str;
+  }
+
+  if (numberRegEx.test(str)) {
+    try {
+      return parseFloat(str);
+    } catch (err) {
+      // pass
+    }
+  }
+
+  return str;
+}
+
+/**
+ * covert rem style to native pt, support custom base width
+ *
+ * @param styleValue - css style value
+ * @param ratioBaseWidth - base width of design draft, default is 750px
+ */
+function convertRemValue(
+  styleValue: NeedToTyped,
+  ratioBaseWidth?: number,
+): NeedToTyped {
+  let value = styleValue;
+
+  // do not convert non rem value
+  if (typeof value !== 'string' || !value.endsWith('rem')) {
+    return value;
+  }
+  // get rem number
+  value = parseFloat(value);
+  // direct return is non number
+  if (Number.isNaN(value)) {
+    return value;
+  }
+  // default width of design draft
+  const defaultRatioBaseWidth = 750;
+  const { width } = global?.Hippy?.device?.screen;
+  if (width) {
+    const ratio = width / (ratioBaseWidth ?? defaultRatioBaseWidth);
+    return value * 100 * ratio;
+  }
+  // direct return when do not have screen size
+  return value;
+}
+
+/**
+ * get default style for native node
+ *
+ * @param node - ssr node
+ */
+function getDefaultNativeStyle(node: StyleNode): CommonMapParams {
+  if (node.name === 'Image') {
+    return { backgroundColor: 0 };
+  }
+
+  if (node.name === 'ListView') {
+    // Necessary by iOS
+    return { flex: 1 };
+  }
+
+  if (node.name === 'Text') {
+    // text node, for label,span,p. Black color(#000), necessary for Android
+    // text node, for a, Blue color(rgb(0, 0, 238), necessary for Android
+    return { color: node.tagName === 'a' ? 4278190318 : 4278190080 };
+  }
+
+  if (node.name === 'TextInput') {
+    return {
+      padding: 0, // Remove the android underline
+      color: 4278190080, // Black color(#000), necessary for Android
+    };
+  }
+
+  if (node.name === 'ViewPagerItem') {
+    // swiper-slide item
+    return {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    };
+  }
+
+  if (node.name === 'Modal') {
+    // dialog
+    return {
+      position: 'absolute',
+    };
+  }
+
+  // nothing for other
+  return {};
+}
+
+/**
+ * Handle special cases of some native node
+ *
+ * @param node - hippy node
+ * @param scrollViewContainerIdList - the id for scrollView's wrapper
+ */
+function polyfillSpecialNodeStyle(
+  node: StyleNode,
+  scrollViewContainerIdList: Record<number, number[]>,
+): StyleNode {
+  const nativeNode = node;
+  const currentScrollViewContainerIdList = scrollViewContainerIdList;
+  const style = node.props.style || {};
+  const inlineStyle = node.props.inlineStyle || {};
+  if (node.name === 'View') {
+    // View do not scroll, so we should change to ScrollView when props have overflow: scroll
+    if (style.overflowY === 'scroll') {
+      nativeNode.name = 'ScrollView';
+    } else if (style.overflowX === 'scroll') {
+      nativeNode.name = 'ScrollView';
+      // should set horizontal for horizontal scroll
+      nativeNode.props.horizontal = true;
+      // ssr default set to row, updated at client side
+      style.flexDirection = 'row';
+    }
+  }
+  // Change the ScrollView child collapsable attribute
+  if (nativeNode.name === 'ScrollView') {
+    currentScrollViewContainerIdList[nativeNode.id] = [];
+  }
+  // if parent node is ScrollView, child node must set collapsable to false
+  if (nativeNode?.pId) {
+    if (currentScrollViewContainerIdList[nativeNode.pId]) {
+      if (currentScrollViewContainerIdList[nativeNode.pId].length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn('Only one child node is acceptable for View with overflow');
+      } else {
+        currentScrollViewContainerIdList[nativeNode.pId] = [Number(nativeNode.id)];
+        nativeNode.props.style.collapsable = false;
+      }
+    }
+  }
+  // compatible v-show
+  if (inlineStyle.display) {
+    delete nativeNode.props.style.display;
+    nativeNode.props.display = inlineStyle.display;
+  }
+
+  // compatible Input
+  if (nativeNode.name === 'TextInput') {
+    ['caretColor', 'underlineColorAndroid', 'placeholderTextColor'].forEach((key) => {
+      if (nativeNode.props[key] && typeof nativeNode.props[key] !== 'number') {
+        nativeNode.props[key] = translateColor(nativeNode.props[key]);
+      }
+    });
+  }
+
+  return node;
+}
+
+/**
+ * 获取 item 匹配的 hippy css 样式
+ *
+ * @param selectors - 匹配的选择器列表
+ */
+function getItemHippyCssStyle(selectors) {
+  const style = {};
+  // if selectors exist, doing value put
+  if (selectors?.length) {
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < selectors.length; i++) {
+      const selector = selectors[i];
+      if (selector.ruleSet?.declarations?.length) {
+        const { declarations } = selector.ruleSet;
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let j = 0; j < declarations.length; j++) {
+          const declaration = declarations[j];
+          if (declaration.property) {
+            style[declaration.property] = declaration.value;
+          }
+        }
+      }
+    }
+  }
+  return style;
+}
+
+/**
+ * parse text shadow offset
+ *
+ * @param property - property name
+ * @param value - property value
+ * @param rawStyle - original style
+ *
+ */
+function parseTextShadowOffset(
+  property: keyof OffsetMapType,
+  value = 0,
+  rawStyle: CommonMapParams,
+): [string, { [key: string]: number }] {
+  const style = rawStyle;
+  const offsetMap: OffsetMapType = {
+    textShadowOffsetX: 'width',
+    textShadowOffsetY: 'height',
+  };
+
+  style.textShadowOffset = style.textShadowOffset ?? {};
+
+  Object.assign(style.textShadowOffset, {
+    [offsetMap[property]]: value,
+  });
+
+  return ['textShadowOffset', style.textShadowOffset];
+}
+
+function parseItemStyle(styleObject) {
+  const itemStyle = {};
+  for (let [styleProperty, styleValue] of Object.entries(styleObject)) {
+    // Process the specific style value
+    switch (styleProperty) {
+      case 'fontWeight':
+        if (typeof styleValue !== 'string') {
+          styleValue = (styleValue as Object).toString();
+        }
+        break;
+      case 'backgroundImage': {
+        [styleProperty, styleValue] = parseBackgroundImage(
+          styleProperty,
+          styleValue,
+        );
+        break;
+      }
+      case 'textShadowOffsetX':
+      case 'textShadowOffsetY': {
+        [styleProperty, styleValue] = parseTextShadowOffset(
+          styleProperty,
+          styleValue as number,
+          styleObject,
+        );
+        break;
+      }
+      case 'textShadowOffset': {
+        const { x = 0, width = 0, y = 0, height = 0 } = (styleValue as any) ?? {};
+        styleValue = { width: x || width, height: y || height };
+        break;
+      }
+      default: {
+        // Convert the property to W3C standard.
+        if (
+          Object.prototype.hasOwnProperty.call(PROPERTIES_MAP, styleProperty)
+        ) {
+          styleProperty = PROPERTIES_MAP[styleProperty as keyof PropertiesMapType];
+        }
+        // Convert the value
+        if (typeof styleValue === 'string') {
+          let value: string | number = styleValue.trim();
+          // Convert inline color style to int
+          if (styleProperty.toLowerCase().indexOf('color') >= 0) {
+            value = translateColor(styleValue);
+            // Convert inline length style, drop the px unit
+          } else if (styleValue.endsWith('px')) {
+            value = parseFloat(styleValue.slice(0, styleValue.length - 2));
+          } else if (styleValue.endsWith('rem')) {
+            value = convertRemValue(styleValue);
+          } else {
+            value = tryConvertNumber(styleValue);
+          }
+          styleValue = value;
+        }
+      }
+    }
+    // assign parsed style value
+    itemStyle[styleProperty] = styleValue;
+  }
+  return itemStyle;
+}
+
+/**
+ * insert style for ssr nodes
+ *
+ * @param nodeList - ssr node list
+ * @param styleContent - style content
+ *
+ * @public
+ */
+export function insertStyleForSsrNodes(
+  nodeList: StyleNode[],
+  styleContent: NeedToTyped[],
+): StyleNode[] {
+  // transform hippy node list to object.
+  // for example: [ { id: 1, name: 'a' }, { id: 2, name: 'b' } ]
+  //   => { 1: { id: 1, name: 'a' }, 2: { id: 2, name: 'b' } }
+  const ssrNodes: StyleNodeList = Object.fromEntries(nodeList.map(item => [item.id, item]));
+  // get css match map
+  const cssMap = getCssMap(styleContent);
+  // get scrollView's wrapper id, should handle later
+  const scrollViewContainerIdList: Record<number, number[]> = {};
+  // insert style for every node
+  return nodeList.map((item) => {
+    // find matched selectors
+    const matchedSelectors = cssMap.query(item, ssrNodes);
+    // parse css style sheet
+    const style = parseItemStyle(getItemHippyCssStyle(matchedSelectors.selectors));
+    // get component default style
+    const defaultNativeStyle = getDefaultNativeStyle(item);
+    // handle item style
+    const originalInnerStyle = {};
+    let hasInnerStyle = false;
+
+    if (item.props.style) {
+      const keys = Object.keys(item.props.style);
+      // parse inner style when exist
+      if (keys.length) {
+        hasInnerStyle = true;
+        keys.forEach((key) => {
+          const camelKey = camelize(key);
+          // save original inner style
+          originalInnerStyle[camelKey] = item.props.style[key];
+        });
+      }
+    }
+    // inner style is the top priority, save to use later
+    item.props.inlineStyle = hasInnerStyle
+      ? parseItemStyle(originalInnerStyle)
+      : {};
+    // current used style, include default style, style sheet and inline style
+    item.props.style = Object.assign(defaultNativeStyle, style, item.props.inlineStyle);
+
+    // polyfill special node
+    return polyfillSpecialNodeStyle(item, scrollViewContainerIdList);
+  });
+}
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
new file mode 100644
index 00000000000..1d4f0373abc
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-map.ts
@@ -0,0 +1,247 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  RuleSet,
+  InvalidSelector,
+  UniversalSelector,
+  IdSelector,
+  TypeSelector,
+  ClassSelector,
+  PseudoClassSelector,
+  AttributeSelector,
+  SimpleSelectorSequence,
+  Selector,
+} from './css-selectors';
+import type { CssAttribute } from './css-selectors-match';
+import { SelectorsMap } from './css-selectors-match';
+import { parseSelector } from './parser';
+import { HIPPY_GLOBAL_STYLE_NAME, HIPPY_GLOBAL_DISPOSE_STYLE_NAME } from './';
+
+// style load hook
+const beforeLoadStyleHook: Function = (declaration: Function): Function => declaration;
+
+function isDeclaration(node) {
+  return node.type === 'declaration';
+}
+
+function createDeclaration(beforeLoadStyle) {
+  return (decl) => {
+    const newDecl = beforeLoadStyle(decl);
+    if (process.env.NODE_ENV !== 'production') {
+      if (!newDecl) {
+        throw new Error('beforeLoadStyle hook must returns the processed style object');
+      }
+    }
+    return newDecl;
+  };
+}
+
+function createSimpleSelectorFromAst(ast) {
+  switch (ast.type) {
+    case '*':
+      return new UniversalSelector();
+    case '#':
+      return new IdSelector(ast.identifier);
+    case '':
+      return new TypeSelector(ast.identifier.replace(/-/, '').toLowerCase());
+    case '.':
+      return new ClassSelector(ast.identifier);
+    case ':':
+      return new PseudoClassSelector(ast.identifier);
+    case '[]':
+      return ast.test
+        ? new AttributeSelector(ast.property, ast.test, ast.value)
+        : new AttributeSelector(ast.property);
+    default:
+      return null;
+  }
+}
+
+function createSimpleSelectorSequenceFromAst(ast) {
+  if (ast.length === 0) {
+    return new InvalidSelector(new Error('Empty simple selector sequence.'));
+  }
+  if (ast.length === 1) {
+    return createSimpleSelectorFromAst(ast[0]);
+  }
+
+  return new SimpleSelectorSequence(ast.map(createSimpleSelectorFromAst));
+}
+
+function createSelectorFromAst(ast) {
+  if (ast.length === 0) {
+    return new InvalidSelector(new Error('Empty selector.'));
+  }
+  if (ast.length === 1) {
+    return createSimpleSelectorSequenceFromAst(ast[0][0]);
+  }
+  const simpleSelectorSequences: any[] = [];
+
+  for (const currentAst of ast) {
+    const simpleSelectorSequence = createSimpleSelectorSequenceFromAst(currentAst[0]);
+    const combinator = currentAst[1];
+    if (combinator && simpleSelectorSequence) {
+      simpleSelectorSequence.combinator = combinator;
+    }
+    simpleSelectorSequences.push(simpleSelectorSequence);
+  }
+
+  return new Selector(simpleSelectorSequences);
+}
+
+function createSelector(sel) {
+  try {
+    const parsedSelector = parseSelector(sel, 0);
+    if (!parsedSelector) {
+      return new InvalidSelector(new Error('Empty selector'));
+    }
+    return createSelectorFromAst(parsedSelector.value);
+  } catch (e) {
+    return new InvalidSelector(e as Error);
+  }
+}
+
+/**
+ * transform css ast to style rule set
+ *
+ * @param astRules - css ast list
+ * @param beforeLoadStyle
+ */
+export function fromAstNodes(
+  astRules: CssAttribute[] = [],
+  beforeLoadStyle?: Function,
+): RuleSet[] {
+  return astRules.map((rule) => {
+    const declarations = rule.declarations
+      .filter(isDeclaration)
+      // use default hook when there is no hook passed in
+      .map(createDeclaration(beforeLoadStyle ?? beforeLoadStyleHook));
+    const selectors = rule.selectors.map(createSelector);
+
+    return new RuleSet(selectors, declarations, rule.hash);
+  });
+}
+
+/**
+ * transform css ast from server side to style rule set
+ *
+ * @param ssrAstRules - css ast rule list from server
+ * @param beforeLoadStyle
+ */
+export function fromSsrAstNodes(
+  ssrAstRules: CssAttribute[] = [],
+  beforeLoadStyle?: Function,
+): RuleSet[] {
+  return ssrAstRules.map((rule) => {
+    // style from server was simplified. index '0' means attribute 'selectors', index '1' means
+    // 'declarations'
+    // ex: [['.class'], [['width', '100px']]] => { selectors: ['.class'], 'declarations': [['width', '100px']] }
+    let selectors = rule[0];
+    let declarations = rule[1];
+    // we need to revert simplified key to raw key
+    declarations = declarations
+      .map((declaration) => {
+        const [property, value] = declaration;
+        return {
+          type: 'declaration',
+          property,
+          value,
+        };
+      })
+      // use default hook when there is no hook passed in
+      .map(createDeclaration(beforeLoadStyle ?? beforeLoadStyleHook));
+    // create style class
+    selectors = selectors.map(createSelector);
+    // ssr style no hash
+    return new RuleSet(selectors, declarations, '');
+  });
+}
+
+// global css map
+let globalCssMap: SelectorsMap;
+
+/**
+ * judge css map is empty, undefined or no ruleset is empty
+ *
+ * @param cssMap
+ */
+function isEmptyCssMap(cssMap?: SelectorsMap): boolean {
+  return !cssMap || !cssMap?.ruleSets?.length;
+}
+
+/**
+ * get css map
+ *
+ * @param styles - style list
+ * @param beforeLoadStyle - before load style hook
+ * @public
+ */
+export function getCssMap(
+  styles?: any[],
+  beforeLoadStyle?: Function,
+): SelectorsMap {
+  // have styles params means ssr, so we used styles as global css map
+  if (styles) {
+    if (!isEmptyCssMap(globalCssMap)) {
+      return globalCssMap;
+    }
+    // get ssr ast nodes
+    const cssRules = fromSsrAstNodes(styles, beforeLoadStyle);
+    globalCssMap = new SelectorsMap(cssRules);
+
+    return globalCssMap;
+  }
+  // no styles params means csr, we used global css map as before
+  const styleCssMap = global[HIPPY_GLOBAL_STYLE_NAME];
+
+  /**
+   * To support dynamic import, globalCssMap can be loaded from different js file.
+   * globalCssMap should be created/appended if global[GLOBAL_STYLE_NAME] exists;
+   */
+  if (isEmptyCssMap(globalCssMap) || styleCssMap) {
+    /**
+     *  Here is a secret startup option: beforeStyleLoadHook.
+     *  Usage for process the styles while styles loading.
+     */
+    const cssRules = fromAstNodes(styleCssMap);
+    if (globalCssMap) {
+      globalCssMap.append(cssRules);
+    } else {
+      globalCssMap = new SelectorsMap(cssRules);
+    }
+
+    // after the global style processing is complete, remove the value of this object
+    global[HIPPY_GLOBAL_STYLE_NAME] = undefined;
+  }
+
+  // if there are currently expired styles, hot update style processing
+  if (global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME]) {
+    // the new css style will be generated with hash id, so it can be removed by id
+    global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME].forEach((id) => {
+      // remove outdated styles
+      globalCssMap.delete(id);
+    });
+
+    // remove saved expired styles
+    global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME] = undefined;
+  }
+
+  return globalCssMap;
+}
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors-match.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors-match.ts
similarity index 84%
rename from driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors-match.ts
rename to driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors-match.ts
index f03f1878a79..a807600543a 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors-match.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors-match.ts
@@ -22,8 +22,7 @@
 /* eslint-disable no-param-reassign */
 
 // eslint-disable-next-line max-classes-per-file
-import type { NeedToTyped, CommonMapParams } from '../../types';
-import type { HippyElement } from '../element/hippy-element';
+import type { StyleNode, CommonMapParams, StyleNodeList } from '../index';
 import type { RuleSet, SelectorCore } from './css-selectors';
 
 export type CssAttribute = CommonMapParams;
@@ -51,7 +50,7 @@ class SelectorsMatch {
    * @param node - target node
    * @param attribute - attribute name
    */
-  addAttribute(node: HippyElement, attribute: NeedToTyped): void {
+  addAttribute(node: StyleNode, attribute: any): void {
     const deps = this.properties(node);
     if (!deps.attributes) {
       deps.attributes = new Set();
@@ -65,7 +64,7 @@ class SelectorsMatch {
    * @param node - target node
    * @param pseudoClass - pseudo class
    */
-  addPseudoClass(node: HippyElement, pseudoClass: string): void {
+  addPseudoClass(node: StyleNode, pseudoClass: string): void {
     const deps = this.properties(node);
     if (!deps.pseudoClasses) {
       deps.pseudoClasses = new Set();
@@ -73,7 +72,7 @@ class SelectorsMatch {
     deps.pseudoClasses.add(pseudoClass);
   }
 
-  properties(node: HippyElement): CommonMapParams {
+  properties(node: StyleNode): CommonMapParams {
     let set = this.changeMap.get(node);
     if (!set) {
       this.changeMap.set(node, (set = {}));
@@ -82,7 +81,12 @@ class SelectorsMatch {
   }
 }
 
-
+/**
+ * selectors map class
+ *
+ * @public
+ *
+ */
 class SelectorsMap {
   /**
    * Remove the specified style from the style rules map
@@ -163,21 +167,31 @@ class SelectorsMap {
    * Find the matching style information according to the id, class, attribute of the hippy node
    *
    * @param node - target node
+   * @param ssrNodes - ssr node list
    */
-  public query(node: HippyElement): SelectorsMatch {
-    const { tagName, id, classList } = node;
-    const selectorClasses = [this.universal, this.id[id], this.type[tagName]];
-    if (classList.size) {
-      classList.forEach(c => selectorClasses.push(this.class[c]));
+  public query(node: StyleNode, ssrNodes?: StyleNodeList): SelectorsMatch {
+    const { tagName, id, classList, props } = node;
+    let domId = id;
+    let domClassList = classList;
+    if (props?.attributes) {
+      // props and attributes exist means this node is generated from server side(except development).
+      // so we need to use these props first
+      const { attributes } = props;
+      domClassList = new Set((attributes?.class || '').split(' ').filter(x => x.trim()));
+      domId = attributes.id;
+    }
+    const selectorClasses = [this.universal, this.id[domId], this.type[tagName]];
+    if (domClassList?.size) {
+      domClassList.forEach(c => selectorClasses.push(this.class[c]));
     }
     const selectors = selectorClasses
       .filter(arr => !!arr)
-      .reduce((cur, next) => cur.concat(next || []), []);
+      .reduce((cur, next) => cur.concat(next), []);
 
     const selectorsMatch = new SelectorsMatch();
 
     selectorsMatch.selectors = selectors
-      .filter(sel => sel.sel.accumulateChanges(node, selectorsMatch))
+      .filter(sel => sel.sel.accumulateChanges(node, selectorsMatch, ssrNodes))
       .sort((a, b) => a.sel.specificity - b.sel.specificity || a.pos - b.pos)
       .map(docSel => docSel.sel);
 
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors.ts
similarity index 82%
rename from driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors.ts
rename to driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors.ts
index 9850ed20b27..65dbc698751 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/style/css-selectors.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-selectors.ts
@@ -29,14 +29,17 @@
 /* eslint-disable no-continue */
 /* eslint-disable no-param-reassign */
 // eslint-disable-next-line max-classes-per-file
-import type { CssDeclarationType } from '@hippy-vue-next-style-parser/index';
-
-import type { HippyElement } from '../element/hippy-element';
-import type { HippyNode } from '../node/hippy-node';
-
-import { isNullOrUndefined } from '../../util';
+import type { CssDeclarationType, StyleNode, StyleNodeList } from '../index';
 import type { SelectorsMap, SelectorsMatch } from './css-selectors-match';
 
+/**
+ * determine if the value is null or undefined
+ *
+ * @param value - value
+ */
+export function isNullOrUndefined(value: any): boolean {
+  return typeof value === 'undefined' || value === null;
+}
 
 /**
  * wrap string text
@@ -47,6 +50,26 @@ function wrap(text: string | undefined): string {
   return text ? ` ${text}` : '';
 }
 
+/**
+ * get node's parent node, in client side, node has parentNode props. in server side, find parentNode
+ * by pId
+ *
+ * @param node - child node
+ * @param ssrNodes - ssr node list
+ *
+ * @internal
+ */
+function getParentNode(node: StyleNode, ssrNodes?: StyleNodeList): StyleNode | null {
+  if (ssrNodes) {
+    // in server side mode, find parent node with pId
+    if (node?.pId && ssrNodes[node.pId]) {
+      return ssrNodes[node.pId];
+    }
+    return null;
+  }
+  return node?.parentNode;
+}
+
 /**
  * Base classes
  */
@@ -92,7 +115,7 @@ class SimpleSelector extends SelectorCore {
 
   public combinator?: string;
 
-  public accumulateChanges(node: HippyElement, match: SelectorsMatch) {
+  public accumulateChanges(node: StyleNode, match: SelectorsMatch) {
     if (!this.dynamic) {
       return this.match(node);
     }
@@ -108,7 +131,7 @@ class SimpleSelector extends SelectorCore {
    *
    * @param node - target node
    */
-  public match(node: HippyElement): boolean {
+  public match(node: StyleNode): boolean {
     return !!node;
   }
 
@@ -117,7 +140,7 @@ class SimpleSelector extends SelectorCore {
    *
    * @param node - target node
    */
-  public mayMatch(node: HippyElement) {
+  public mayMatch(node: StyleNode) {
     return this.match(node);
   }
 
@@ -127,7 +150,7 @@ class SimpleSelector extends SelectorCore {
    * @param node - target node
    * @param match - SelectorsMatch
    */
-  public trackChanges(node?: HippyElement, match?: SelectorsMatch): void {
+  public trackChanges(node?: StyleNode, match?: SelectorsMatch): void {
     if (node && match) {
       /**
        * fixme This should be defined as an abstract method, but because some selectors do not need this method,
@@ -163,21 +186,21 @@ class SimpleSelectorSequence extends SimpleSelector {
     return `${this.selectors.join('')}${wrap(this.combinator)}`;
   }
 
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode): boolean {
     if (!node) {
       return false;
     }
     return this.selectors.every(sel => sel.match(node));
   }
 
-  mayMatch(node?: HippyElement): boolean {
+  mayMatch(node?: StyleNode): boolean {
     if (!node) {
       return false;
     }
     return this.selectors.every(sel => sel.mayMatch(node));
   }
 
-  trackChanges(node: HippyElement, match: SelectorsMatch): void {
+  trackChanges(node: StyleNode, match: SelectorsMatch): void {
     this.selectors.forEach(sel => sel.trackChanges(node, match));
   }
 
@@ -233,11 +256,12 @@ class IdSelector extends SimpleSelector {
     return `#${this.id}${wrap(this.combinator)}`;
   }
 
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode): boolean {
     if (!node) {
       return false;
     }
-    return node.id === this.id;
+    // ssr node's id is native id, the dom id is attribute's id
+    return node.props?.attributes?.id === this.id || node.id === this.id;
   }
 
   lookupSort(sorter: SelectorsMap, base: SelectorCore): void {
@@ -267,7 +291,7 @@ class TypeSelector extends SimpleSelector {
     return `${this.cssType}${wrap(this.combinator)}`;
   }
 
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode): boolean {
     if (!node) {
       return false;
     }
@@ -301,11 +325,18 @@ class ClassSelector extends SimpleSelector {
     return `.${this.className}${wrap(this.combinator)}`;
   }
 
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode): boolean {
     if (!node) {
       return false;
     }
-    return !!(node.classList.size && node.classList.has(this.className));
+    // props and attributes exist means this node is generated from server side(except development).
+    // so we need to use these props when we are ssr
+    const classList = node.classList
+      ?? new Set((node.props?.attributes?.class || '')
+        .split(' ')
+        .filter(x => x.trim()));
+
+    return !!(classList.size && classList.has(this.className));
   }
 
   lookupSort(sorter: SelectorsMap, base: SelectorCore): void {
@@ -343,7 +374,7 @@ class PseudoClassSelector extends SimpleSelector {
     return true;
   }
 
-  trackChanges(node: HippyElement, match: SelectorsMatch): void {
+  trackChanges(node: StyleNode, match: SelectorsMatch): void {
     match.addPseudoClass(node, this.cssPseudoClass);
   }
 }
@@ -356,11 +387,12 @@ class PseudoClassSelector extends SimpleSelector {
  * @returns {*}
  */
 const getNodeAttrVal = (node, attribute) => {
-  const attr = node.attributes[attribute];
+  // node.props is ssrNode's attributes list
+  const attr = node?.props?.[attribute] || node?.attributes?.[attribute];
   if (typeof attr !== 'undefined') {
     return attr;
   }
-  if (Array.isArray(node.styleScopeId) && node.styleScopeId.includes(attribute)) {
+  if (Array.isArray(node?.styleScopeId) && node?.styleScopeId?.includes(attribute)) {
     return attribute;
   }
 };
@@ -391,8 +423,10 @@ class AttributeSelector extends SimpleSelector {
 
     if (!test) {
       // HasAttribute
-      this.match = (node?: HippyElement) => {
-        if (!node || !node.attributes) {
+      this.match = (node: StyleNode) => {
+        if (!node || (!node?.attributes && !node?.props)) {
+          // in client side render, node not exist or do not have attributes props means no attribute
+          // in server side render, node do not have attribute in props means no attribute
           return false;
         }
 
@@ -406,8 +440,10 @@ class AttributeSelector extends SimpleSelector {
       return;
     }
 
-    this.match = (node?: HippyElement) => {
-      if (!node || !node.attributes) {
+    this.match = (node?: StyleNode) => {
+      // props and attributes exist means this node is generated from server side(except development).
+      // so we need to use these props when we are ssr
+      if (!node || (!node?.attributes && !node?.props[attribute])) {
         return false;
       }
       const attr = `${getNodeAttrVal(node, attribute)}`;
@@ -457,7 +493,7 @@ class AttributeSelector extends SimpleSelector {
    *
    * @param node - target node
    */
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode): boolean {
     return node ? !node : false;
   }
 
@@ -465,7 +501,7 @@ class AttributeSelector extends SimpleSelector {
     return true;
   }
 
-  trackChanges(node: HippyElement, match: SelectorsMatch): void {
+  trackChanges(node: StyleNode, match: SelectorsMatch): void {
     match.addAttribute(node, this.attribute);
   }
 }
@@ -663,7 +699,7 @@ class Selector extends SelectorCore {
     return this.selectors.join('');
   }
 
-  match(node?: HippyElement): boolean {
+  match(node?: StyleNode, ssrNodes?: StyleNodeList): boolean {
     if (!node) {
       return false;
     }
@@ -672,14 +708,12 @@ class Selector extends SelectorCore {
         node = group.match(node);
         return !!node;
       }
-      if (node?.parentNode) {
-        let ancestor: HippyNode | null = node.parentNode;
-        while (ancestor) {
-          if ((node = group.match(ancestor))) {
-            return true;
-          }
-          ancestor = ancestor.parentNode;
+      let ancestor = getParentNode(node as StyleNode, ssrNodes);
+      while (ancestor) {
+        if ((node = group.match(ancestor))) {
+          return true;
         }
+        ancestor = getParentNode(ancestor, ssrNodes);
       }
       return false;
     });
@@ -693,14 +727,14 @@ class Selector extends SelectorCore {
     this.last.removeSort(sorter, this);
   }
 
-  accumulateChanges(node: HippyElement, map: SelectorsMap): boolean {
+  accumulateChanges(node: StyleNode, map: SelectorsMap, ssrNodes?: StyleNodeList): boolean {
     if (!this.dynamic) {
-      return this.match(node);
+      return this.match(node, ssrNodes);
     }
 
     const bounds: {
-      left: HippyElement;
-      right: HippyElement | null;
+      left: StyleNode;
+      right: StyleNode | null;
     }[] = [];
     const mayMatch = this.groups.every((group, i) => {
       if (i === 0) {
@@ -709,14 +743,15 @@ class Selector extends SelectorCore {
         node = nextNode;
         return !!node;
       }
-      let ancestor = node;
-      while ((ancestor = ancestor.parentNode as HippyElement)) {
+      let ancestor = getParentNode(node, ssrNodes);
+      while (ancestor) {
         const nextNode = group.mayMatch(ancestor);
         if (nextNode) {
           bounds.push({ left: ancestor, right: null });
           node = nextNode;
           return true;
         }
+        ancestor = getParentNode(ancestor, ssrNodes);
       }
       return false;
     });
@@ -743,7 +778,7 @@ class Selector extends SelectorCore {
         }
       } while (
         node !== bound.right
-        && (node = node.parentNode as HippyElement)
+        && (node = node.parentNode as StyleNode)
       );
     }
 
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/index.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/index.ts
new file mode 100644
index 00000000000..41d322f23d6
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/index.ts
@@ -0,0 +1,71 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * style node type
+ *
+ * @public
+ */
+export interface StyleNode {
+  id: string;
+  pId?: number;
+  name?: string;
+  tagName: string;
+  classList: Set<string>;
+  parentNode: StyleNode;
+  nextSibling: StyleNode;
+  props?: any;
+  attributes?: any;
+}
+
+/**
+ * common map param type
+ *
+ * @public
+ */
+export interface CommonMapParams {
+  [key: string]: any;
+}
+
+/**
+ * style node list
+ *
+ * @public
+ */
+export interface StyleNodeList {
+  [key: string]: StyleNode;
+}
+
+/**
+ * global style name
+ *
+ * @public
+ */
+export const HIPPY_GLOBAL_STYLE_NAME = '__HIPPY_VUE_STYLES__';
+
+/**
+ * need delete style list, when we used hmr, expired style will be push to globally dispose array
+ *
+ * @public
+ */
+export const HIPPY_GLOBAL_DISPOSE_STYLE_NAME = '__HIPPY_VUE_DISPOSE_STYLES__';
+
+export { SelectorsMap } from './css-selectors-match';
+export { getCssMap } from './css-map';
+export { insertStyleForSsrNodes } from './css-append';
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/style/parser.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/parser.ts
similarity index 98%
rename from driver/js/packages/hippy-vue-next/src/runtime/style/parser.ts
rename to driver/js/packages/hippy-vue-next-style-parser/src/style-match/parser.ts
index eaffcce4530..32a76823902 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/style/parser.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/parser.ts
@@ -17,9 +17,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { NeedToTyped } from '../../types';
-
-
 export interface SelectorType {
   type: string;
   identifier?: string;
@@ -184,7 +181,7 @@ function parseSimpleSelectorSequence(text, start) {
     return null;
   }
   let { end } = simpleSelector;
-  const value: NeedToTyped[] = [];
+  const value: any[] = [];
   while (simpleSelector) {
     value.push(simpleSelector.value);
     ({ end } = simpleSelector);
diff --git a/driver/js/packages/hippy-vue-next/__test__/built-in-component.test.ts b/driver/js/packages/hippy-vue-next/__test__/built-in-component.test.ts
index d2343d7e6d3..eb633363e7b 100644
--- a/driver/js/packages/hippy-vue-next/__test__/built-in-component.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/built-in-component.test.ts
@@ -18,10 +18,6 @@
  * limitations under the License.
  */
 
-/**
- * built-in-component unit test
- */
-
 import type { NeedToTyped } from '../src/types';
 import { NATIVE_COMPONENT_MAP, HIPPY_DEBUG_ADDRESS } from '../src/config';
 import { Native } from '../src/runtime/native';
@@ -36,9 +32,7 @@ import '../src/runtime/event/hippy-event-dispatcher';
 import { preCacheNode } from '../src/util/node';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * built-in-component.ts unit test case
  */
 describe('built-in-component', () => {
   const { EventDispatcher: eventDispatcher } = global.__GLOBAL__.jsModuleList;
diff --git a/driver/js/packages/hippy-vue-next/__test__/native-component/index.test.ts b/driver/js/packages/hippy-vue-next/__test__/native-component/index.test.ts
new file mode 100644
index 00000000000..a04b07690d8
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next/__test__/native-component/index.test.ts
@@ -0,0 +1,45 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * native-component/index unit test
+ */
+import * as NativeComponent from '../../src/native-component/index';
+
+/**
+ * @author birdguo
+ * @priority P0
+ * @casetype unit
+ */
+describe('native-component/index.ts', () => {
+  it('isNativeTag should work correctly', () => {
+    const nativeTags = [
+      'animation', 'dialog', 'pull-header', 'pull-footer', 'swiper', 'swiper-slider',
+      'waterfall', 'ul-refresh-wrapper', 'ul-refresh',
+    ];
+    const nonNativeTags = ['div'];
+    for (const tag of nativeTags) {
+      expect(NativeComponent.isNativeTag(tag)).toBeTruthy();
+    }
+    for (const tag of nonNativeTags) {
+      expect(NativeComponent.isNativeTag(tag)).toBeFalsy();
+    }
+  });
+});
diff --git a/driver/js/packages/hippy-vue-next/__test__/node-ops.test.ts b/driver/js/packages/hippy-vue-next/__test__/node-ops.test.ts
index 32a647981fb..c2aadcdc296 100644
--- a/driver/js/packages/hippy-vue-next/__test__/node-ops.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/node-ops.test.ts
@@ -18,17 +18,12 @@
  * limitations under the License.
  */
 
-/**
- * node-ops  Vue custom renderer node operations unit test
- */
 import { nodeOps } from '../src/node-ops';
 import { registerElement } from '../src/runtime/component';
 import { setHippyCachedInstance } from '../src/util/instance';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * node-ops.ts unit test case
  */
 describe('node-ops.ts', () => {
   beforeAll(() => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/patch-prop.test.ts b/driver/js/packages/hippy-vue-next/__test__/patch-prop.test.ts
index 9c725258cf7..78758be4c88 100644
--- a/driver/js/packages/hippy-vue-next/__test__/patch-prop.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/patch-prop.test.ts
@@ -18,9 +18,6 @@
  * limitations under the License.
  */
 
-/**
- * patch-prop  Vue custom renderer patch prop unit case
- */
 import { patchProp } from '../src/patch-prop';
 import { nodeOps } from '../src/node-ops';
 import '../src/runtime/event/hippy-event-dispatcher';
@@ -28,9 +25,7 @@ import { preCacheNode } from '../src/util/node';
 import { registerElement, type ElementComponent } from '../src/runtime/component';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * patch-prop.ts unit test case
  */
 describe('patch-prop.ts', () => {
   it('patch class prop', () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/component/index.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/component/index.test.ts
index a7e63bebb8a..02c0b8ea832 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/component/index.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/component/index.test.ts
@@ -18,16 +18,11 @@
  * limitations under the License.
  */
 
-/**
- * runtime/component/index.ts hippyNative unit test
- */
 import type { ElementComponent } from '../../../src/runtime/component';
 import * as index from '../../../src/runtime/component';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * component/index.ts unit test case
  */
 describe('runtime/component/index.ts', () => {
   it('getTagComponent should return undefined when no register', async () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/document/hippy-document.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/document/hippy-document.test.ts
index 8f41ef301eb..d4e551d1534 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/document/hippy-document.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/document/hippy-document.test.ts
@@ -18,15 +18,10 @@
  * limitations under the License.
  */
 
-/**
- * runtime/document/hippy-document unit test
- */
 import { HippyDocument } from '../../../src/runtime/document/hippy-document';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * hippy-document.ts unit test case
  */
 describe('runtime/document/hippy-document.ts', () => {
   it('HippyDocument should contain required function', async () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/before-render-to-native-hook.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/before-render-to-native-hook.test.ts
index 7e37bdf44e8..d718205c73e 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/before-render-to-native-hook.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/before-render-to-native-hook.test.ts
@@ -22,6 +22,9 @@ import { isFunction } from '@vue/shared';
 import { HippyNode, NodeType } from '../../../src/runtime/node/hippy-node';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
 
+/**
+ * before-render-to-native-hook.ts unit test case
+ */
 describe('beforeRenderToNative hook', () => {
   beforeAll(() => {
     global.__GLOBAL__ = {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-comment-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-comment-element.test.ts
index b555bae560f..f94e3bef716 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-comment-element.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-comment-element.test.ts
@@ -20,6 +20,9 @@
 
 import { HippyCommentElement } from '../../../src/runtime/element/hippy-comment-element';
 
+/**
+ * hippy-comment-element.ts unit test case
+ */
 describe('runtime/element/hippy-comment-element', () => {
   it('should set text using the constructor param.', () => {
     const hippyCommentElement = new HippyCommentElement('this is comment');
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts
index 44dd2b151cd..523417344e5 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-element.test.ts
@@ -20,11 +20,15 @@
 
 import { registerElement, type ElementComponent } from '../../../src/runtime/component';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
-import { Native } from '../../../src/runtime/native/index';
+import { NodeType } from '../../../src/runtime/node/hippy-node';
+import { Native } from '../../../src/runtime/native';
 import * as Render from '../../../src/runtime/render';
 import { setHippyCachedInstance } from '../../../src/util/instance';
 import { setTrimWhitespace } from '../../../src/util';
 
+/**
+ * hippy-element.ts unit test case
+ */
 describe('runtime/element/hippy-element', () => {
   beforeAll(() => {
     registerElement('div', { component: { name: 'View' } });
@@ -548,12 +552,14 @@ describe('runtime/element/hippy-element', () => {
         pId: 1,
         index: 0,
         name: 'Text',
+        id: 62,
         props: {
           text: '',
           style: {},
           attributes: {
             id: '',
             class: '',
+            hippyNodeId: '62',
           },
         },
         tagName: 'span',
@@ -589,4 +595,72 @@ describe('runtime/element/hippy-element', () => {
     element.setStyleScope(12345);
     expect(element.styleScopeId).toEqual(['style-scoped-id', '[object Object]', '12345']);
   });
+
+
+  describe('ssr node should work correctly', () => {
+    it('ssr node should init correctly', () => {
+      const commentElement = new HippyElement('comment');
+      expect(commentElement.nodeType).toEqual(NodeType.CommentNode);
+      const ssrElement = new HippyElement('div', {
+        id: 1001,
+        index: 0,
+        name: 'View',
+        props: {
+          attributes: {
+            id: 'root',
+            class: 'classA  classB',
+          },
+          text: 'hello',
+          inlineStyle: {
+            fontSize: 24,
+          },
+        },
+      });
+
+      expect(ssrElement.nodeId).toEqual(1001);
+      expect(ssrElement.id).toEqual('root');
+      expect(ssrElement.classList).toEqual(new Set(['classA', 'classB']));
+      expect(ssrElement.nodeId).toEqual(1001);
+      expect(ssrElement.value).toEqual('hello');
+      expect(ssrElement.textContent).toEqual('hello');
+      expect(ssrElement.ssrInlineStyle).toEqual({
+        fontSize: 24,
+      });
+      expect(ssrElement.attributes).toEqual({
+        text: 'hello',
+      });
+    });
+    it('ssr node event handle correctly', () => {
+      const element = new HippyElement('div', {
+        id: 1001,
+        index: 0,
+        name: 'View',
+        props: {
+          attributes: {
+            id: 'root',
+            class: 'classA  classB',
+          },
+          text: 'hello',
+          innerStyle: {
+            fontSize: 24,
+          },
+          onClick: true,
+        },
+      });
+      expect(element.attributes.onClick).toBeTruthy();
+      const callUIFunctionSpy = jest.spyOn(element, 'updateNativeNode');
+      // add event listener, ssr props exist event listener, should not update native
+      element.addEventListener('click', () => {});
+      expect(callUIFunctionSpy).toHaveBeenCalledTimes(0);
+      // add event listener, new event listener, should update native
+      element.addEventListener('drop', () => {});
+      expect(callUIFunctionSpy).toHaveBeenCalledTimes(1);
+      // add event listener, new event listener, should update native
+      element.addEventListener('touchmove', () => {});
+      expect(callUIFunctionSpy).toHaveBeenCalledTimes(2);
+      // remove event listener
+      element.removeEventListener('click', () => {});
+      expect(element.attributes.onClick).toBeUndefined();
+    });
+  });
 });
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
index 84de9da25ee..52a278fb64f 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
@@ -21,6 +21,9 @@
 import { HippyInputElement } from '../../../src/runtime/element/hippy-input-element';
 import { Native } from '../../../src/runtime/native/index';
 
+/**
+ * hippy-input-element.ts unit test case
+ */
 describe('runtime/element/hippy-input-element', () => {
   it('should invoke callUIFunction when get value of the input element.', async () => {
     const getValueMock = jest
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-list-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-list-element.test.ts
index fc74bcb1b1f..0086d2dcfe2 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-list-element.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-list-element.test.ts
@@ -21,6 +21,9 @@
 import { HippyListElement } from '../../../src/runtime/element/hippy-list-element';
 import { Native } from '../../../src/runtime/native/index';
 
+/**
+ * hippy-list-element.ts unit test case
+ */
 describe('runtime/element/hippy-list-element', () => {
   it('should invoke callUIFunction when call scrollToIndex method.', () => {
     const callUIFunctionSpy = jest.spyOn(Native, 'callUIFunction');
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/event/event-bus.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/event/event-bus.test.ts
index 63d7e001ae9..a15ea1e4e7c 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/event/event-bus.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/event/event-bus.test.ts
@@ -18,16 +18,11 @@
  * limitations under the License.
  */
 
-/**
- * runtime/event/event-bus unit test
- */
 import type { NeedToTyped } from '../../../src/types';
 import { EventBus } from '../../../src/runtime/event/event-bus';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * event-bus.ts unit test case
  */
 describe('runtime/event/event-bus.ts', () => {
   it('event bus on & off function should work correctly', () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-dispatcher.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-dispatcher.test.ts
index 07a29dd4dbb..04c4cc6e08c 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-dispatcher.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-dispatcher.test.ts
@@ -18,11 +18,6 @@
  * limitations under the License.
  */
 
-/**
- * runtime/event/hippy-event-dispatcher unit test
- * event-dispatcher is mounted on global.__GLOBAL__，which can be mocked to trigger native events
- */
-
 import '../../../src/runtime/event/hippy-event-dispatcher';
 import { createRenderer } from '@vue/runtime-core';
 
@@ -42,9 +37,7 @@ import { EventsUnionType } from '../../../src/runtime/event/hippy-event';
 import BuiltInComponent from '../../../src/built-in-component';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * hippy-event-dispatcher.ts unit test case
  */
 describe('runtime/event/hippy-event-dispatcher.ts', () => {
   beforeAll(() => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-target.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-target.test.ts
index 168e0c6014e..18daeb50ca0 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-target.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event-target.test.ts
@@ -18,20 +18,19 @@
  * limitations under the License.
  */
 
-/**
- * runtime/event/hippy-event-target unit test
- * hippy-event-target is abstract class，which needs instantiation in unit test
- */
+import { registerElement } from '../../../src/runtime/component';
 import type { NeedToTyped } from '../../../src/types';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
 import { HippyEvent } from '../../../src/runtime/event/hippy-event';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * hippy-event-target.ts unit test case
  */
 describe('runtime/event/hippy-event-target.ts', () => {
+  beforeAll(() => {
+    registerElement('div', { component: { name: 'View' } });
+  });
+
   it('hippy-event-target child should contain special function', async () => {
     const divElement = new HippyElement('div');
     expect(divElement).toHaveProperty('addEventListener');
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event.test.ts
index 8757c235392..798b6f1ea75 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/event/hippy-event.test.ts
@@ -18,15 +18,10 @@
  * limitations under the License.
  */
 
-/**
- * runtime/event/hippy-event unit test
- */
 import { HippyEvent } from '../../../src/runtime/event/hippy-event';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * hippy-event.ts unit test case
  */
 describe('runtime/event/hippy-event.ts', () => {
   it('HippyEvent instance should have required function', async () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/native/index.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/native/index.test.ts
index 7985d390d45..378d1801979 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/native/index.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/native/index.test.ts
@@ -18,18 +18,13 @@
  * limitations under the License.
  */
 
-/**
- * runtime/native unit test
- */
 import type { NeedToTyped } from '../../../src/types';
 import { HippyListElement } from '../../../src/runtime/element/hippy-list-element';
 import { Native, CACHE } from '../../../src/runtime/native/index';
 import { EventBus } from '../../../src/runtime/event/event-bus';
 
 /**
- * @author mitnickliu
- * @priority P0
- * @casetype unit
+ * native/index.ts unit test case
  */
 describe('runtime/native.ts', () => {
   const nativePlatformOrigin = Object.getOwnPropertyDescriptor(
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/node/hipyy-node.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/node/hipyy-node.test.ts
index 2fd63496ec5..199905725fb 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/node/hipyy-node.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/node/hipyy-node.test.ts
@@ -17,12 +17,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { getNodeById } from '../../../src/util/node';
 import { registerElement } from '../../../src/runtime/component';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
 import { HippyNode, NodeType } from '../../../src/runtime/node/hippy-node';
 import { setHippyCachedInstance } from '../../../src/util/instance';
 
+/**
+ * hippy-node.ts unit test case
+ */
 describe('runtime/node/hippy-node', () => {
   describe('test the default value of class members.', () => {
     it('should be 1.', () => {
@@ -55,6 +58,12 @@ describe('runtime/node/hippy-node', () => {
       const hippyNode = new HippyNode(NodeType.ElementNode);
       expect(hippyNode.childNodes.length).toBe(0);
     });
+
+    it('ssr node init value test', () => {
+      const hippyNode = new HippyNode(NodeType.ElementNode, { id: 1001, index: 0, name: 'View', props: {} });
+      expect(hippyNode.nodeId).toEqual(1001);
+      expect(hippyNode.isMounted).toBeTruthy();
+    });
   });
 
   describe('test the node operation methods.', () => {
@@ -93,6 +102,16 @@ describe('runtime/node/hippy-node', () => {
         expect(childHippyNodePre.nextSibling === childHippyNodeNext).toBeTruthy();
         expect(childHippyNodeNext.prevSibling === childHippyNodePre).toBeTruthy();
       });
+
+      it('hydrate node will precache directly', () => {
+        const ssrNode = new HippyNode(NodeType.ElementNode, { id: 1001, index: 0, name: 'View', props: {} });
+        const childSsrNode = new HippyNode(NodeType.ElementNode, { id: 1002, index: 0, name: 'View', props: {} });
+        ssrNode.appendChild(childSsrNode, true);
+        let cachedNode = getNodeById(1002);
+        expect(childSsrNode).toEqual(cachedNode);
+        cachedNode = getNodeById(1001);
+        expect(cachedNode).toBeNull();
+      });
     });
 
     describe('insert before child node.', () => {
@@ -278,5 +297,18 @@ describe('runtime/node/hippy-node', () => {
         expect(node.isRootNode()).toBeFalsy();
       });
     });
+
+    describe('child nodes count check', () => {
+      it('hasChildNodes should return true when has child', () => {
+        const node = new HippyNode(NodeType.ElementNode);
+        expect(node.hasChildNodes()).toBeFalsy();
+        const childNodeOne = new HippyNode(NodeType.ElementNode);
+        node.appendChild(childNodeOne);
+        expect(node.hasChildNodes()).toBeTruthy();
+        const childNodeTwo = new HippyNode(NodeType.ElementNode);
+        childNodeOne.appendChild(childNodeTwo);
+        expect(childNodeOne.hasChildNodes()).toBeTruthy();
+      });
+    });
   });
 });
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/render/index.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/render/index.test.ts
index 69f551bc290..3f2b53bdf45 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/render/index.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/render/index.test.ts
@@ -18,10 +18,6 @@
  * limitations under the License.
  */
 
-/**
- * runtime/native unit test
- */
-
 import { nextTick } from '@vue/runtime-core';
 
 import { registerElement } from '../../../src/runtime/component';
@@ -35,9 +31,7 @@ import {
 import { setHippyCachedInstance } from '../../../src/util/instance';
 
 /**
- * @author mitnickliu
- * @priority P0
- * @casetype unit
+ * render/index.ts unit test case
  */
 describe('runtime/render.ts', () => {
   beforeAll(() => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/text/hippy-text.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/text/hippy-text.test.ts
index 758f8ed6c5f..c0276efc4b2 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/text/hippy-text.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/text/hippy-text.test.ts
@@ -21,10 +21,14 @@
 import { HippyText } from '../../../src/runtime/text/hippy-text';
 import { HippyElement } from '../../../src/runtime/element/hippy-element';
 
+/**
+ * hippy-text.ts unit test case
+ */
 describe('runtime/text/hippy-text.ts', () => {
   it('hippy text node should set correct attribute', () => {
     const textNode = new HippyText('hello');
     expect(textNode.text).toEqual('hello');
+    expect(textNode.data).toEqual('hello');
     textNode.setText('world');
     expect(textNode.text).toEqual('world');
   });
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/event.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/event.test.ts
index 01a634b683b..3442f980e01 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/event.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/event.test.ts
@@ -18,14 +18,10 @@
  * limitations under the License.
  */
 
-/**
- * util/event test
- */
 import { EventMethod } from '../../src/util/event';
 
 /**
- * @priority P0
- * @casetype unit
+ * event.ts unit test case
  */
 describe('src/util/event', () => {
   it('event method names should be valid', () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/i18n.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/i18n.test.ts
index 9435fe8f246..4707ae1d46c 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/i18n.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/i18n.test.ts
@@ -18,16 +18,11 @@
  * limitations under the License.
  */
 
-/**
- * util/index unit test
- */
 import * as i18n from '../../src/util/i18n';
 import { Native } from '../../src/runtime/native';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * i18n.ts unit test case
  */
 describe('src/util/i18n', () => {
   it('isRTL should return right value', () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/index.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/index.test.ts
index 945623f6ca5..d9bc7c95ab3 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/index.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/index.test.ts
@@ -19,11 +19,11 @@
  */
 
 /**
- * util/index unit test
+ * index.ts unit test case
  */
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import * as index from '../../src/util/index';
-import {  HIPPY_DEBUG_ADDRESS } from '../../src/config';
+import {  HIPPY_DEBUG_ADDRESS, HIPPY_UNIQUE_ID_KEY } from '../../src/config';
 import { getEventRedirects } from '../../src/util/index';
 
 /**
@@ -74,6 +74,9 @@ describe('util/index.ts', () => {
     expect(index.getUniqueId()).toEqual(9);
     // should not equal 10, id multiples of 10 is used by native
     expect(index.getUniqueId()).toEqual(11);
+
+    global[HIPPY_UNIQUE_ID_KEY] = 20;
+    expect(index.getUniqueId()).toEqual(21);
   });
 
   it('unicodeToChar', async () => {
@@ -193,4 +196,10 @@ describe('util/index.ts', () => {
     expect(newData.e).toEqual(new Set([1]));
     expect(newData.f).toEqual(new Map().set('a', 1));
   });
+
+  it('getStyleClassList should work correctly', () => {
+    expect(index.getStyleClassList('')).toEqual([]);
+    expect(index.getStyleClassList('a b c')).toEqual(['a', 'b', 'c']);
+    expect(index.getStyleClassList(' a   b c ')).toEqual(['a', 'b', 'c']);
+  });
 });
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/node-cache.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/node.test.ts
similarity index 96%
rename from driver/js/packages/hippy-vue-next/__test__/util/node-cache.test.ts
rename to driver/js/packages/hippy-vue-next/__test__/util/node.test.ts
index c465ebeadff..10e441552cf 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/node-cache.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/node.test.ts
@@ -29,11 +29,9 @@ import {
 } from '../../src/util/node';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * node.ts unit test case
  */
-describe('util/index.ts', () => {
+describe('util/node.ts', () => {
   jest.useFakeTimers();
   it('check node cache operation', async () => {
     const node = new HippyElement('div');
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/rem.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/rem.test.ts
index 71d7fd26b87..61e6275c263 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/rem.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/rem.test.ts
@@ -18,17 +18,12 @@
  * limitations under the License.
  */
 
-/**
- * util/rem unit test
- */
 import * as rem from '../../src/util/rem';
 import { setHippyCachedInstance } from '../../src/util/instance';
 import { HippyElement } from '../../src/runtime/element/hippy-element';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * rem.ts unit test case
  */
 describe('src/util/rem', () => {
   it('non rem value should return old value', () => {
diff --git a/driver/js/packages/hippy-vue-next/__test__/util/screen.test.ts b/driver/js/packages/hippy-vue-next/__test__/util/screen.test.ts
index 31c1e7e2027..8a4cbdc9b5c 100644
--- a/driver/js/packages/hippy-vue-next/__test__/util/screen.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/util/screen.test.ts
@@ -18,16 +18,11 @@
  * limitations under the License.
  */
 
-/**
- * util/screen unit test
- */
 import { setScreenSize } from '../../src/util/screen';
 import { Native } from '../../src/runtime/native';
 
 /**
- * @author birdguo
- * @priority P0
- * @casetype unit
+ * screen.ts unit test case
  */
 describe('src/util/i18n', () => {
   it('setScreenSize should work correct', () => {
diff --git a/driver/js/packages/hippy-vue-next/package.json b/driver/js/packages/hippy-vue-next/package.json
index 9fa6e1d1950..55691aeb7fc 100644
--- a/driver/js/packages/hippy-vue-next/package.json
+++ b/driver/js/packages/hippy-vue-next/package.json
@@ -7,7 +7,7 @@
   "license": "Apache-2.0",
   "entry": "./src/index.ts",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "repository": "https://github.com/Tencent/Hippy",
   "bugs": {
@@ -23,12 +23,13 @@
   ],
   "files": [
     "dist/index.js",
+    "dist/index.esm.js",
     "dist/index.d.ts",
     "README.md"
   ],
   "dependencies": {
-    "@vue/runtime-core": "^3.2.21",
-    "@vue/shared": "^3.2.21"
+    "@vue/runtime-core": "^3.2.46",
+    "@vue/shared": "^3.2.46"
   },
   "jest": {
     "moduleNameMapper": {
diff --git a/driver/js/packages/hippy-vue-next/src/config/index.ts b/driver/js/packages/hippy-vue-next/src/config/index.ts
index a3fa92ff86d..901b67fc72a 100644
--- a/driver/js/packages/hippy-vue-next/src/config/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/config/index.ts
@@ -68,6 +68,11 @@ const HIPPY_GLOBAL_DISPOSE_STYLE_NAME = '__HIPPY_VUE_DISPOSE_STYLES__';
 // eslint-disable-next-line
 const HIPPY_VUE_VERSION = process.env.HIPPY_VUE_VERSION;
 
+/**
+ * the key of generate hippy unique id
+ */
+const HIPPY_UNIQUE_ID_KEY = 'hippyUniqueId';
+
 export {
   HIPPY_DEBUG_ADDRESS,
   HIPPY_STATIC_PROTOCOL,
@@ -76,4 +81,5 @@ export {
   HIPPY_GLOBAL_STYLE_NAME,
   HIPPY_GLOBAL_DISPOSE_STYLE_NAME,
   HIPPY_VUE_VERSION,
+  HIPPY_UNIQUE_ID_KEY,
 };
diff --git a/driver/js/packages/hippy-vue-next/src/hydration.ts b/driver/js/packages/hippy-vue-next/src/hydration.ts
new file mode 100644
index 00000000000..5f7de54522f
--- /dev/null
+++ b/driver/js/packages/hippy-vue-next/src/hydration.ts
@@ -0,0 +1,80 @@
+import type { SsrNode } from './types';
+
+import { HippyCommentElement } from './runtime/element/hippy-comment-element';
+import { HippyElement } from './runtime/element/hippy-element';
+import { HippyInputElement } from './runtime/element/hippy-input-element';
+import { HippyListElement } from './runtime/element/hippy-list-element';
+import { HippyText } from './runtime/text/hippy-text';
+import { type HippyNode, NodeType } from './runtime/node/hippy-node';
+
+/**
+ * create hippy node by ssr node
+ *
+ * @param node - ssr node
+ */
+function createHippyNodeBySsrNode(node: SsrNode): HippyNode {
+  if (node.name === 'comment') {
+    // comment node
+    return new HippyCommentElement(node.props.text, node);
+  }
+  if (node.name === 'Text' && !node.tagName) {
+    // pure text node
+    const retNode = new HippyText(node.props.text, node);
+    // fix hydration
+    retNode.nodeType = NodeType.TextNode; // todo fixme TextNode or CommentNode
+    retNode.data = node.props.text;
+    return retNode;
+  }
+  // other node
+  switch (node.tagName) {
+    case 'input':
+    case 'textarea':
+      return new HippyInputElement(node.tagName, node);
+    case 'ul':
+      return new HippyListElement(node.tagName, node);
+    default:
+      return new HippyElement(node.tagName ?? '', node);
+  }
+}
+
+/**
+ * convert SSR Node List to Hippy Node Tree
+ *
+ * @param parent - parent node
+ * @param ssrNodeList - ssr node list
+ */
+function appendChildList(parent: SsrNode, ssrNodeList: SsrNode[]): HippyNode {
+  // first, create the parent node
+  const parentNode: HippyNode = createHippyNodeBySsrNode(parent);
+  // Then find out the child nodes of the current parent node from the ssr node
+  // list and sort them so that their order is consistent with the order rendered by the server
+  let childList = ssrNodeList
+    .filter(node => node.pId === parent.id)
+    .sort((v, k) => v.index - k.index);
+  // Because the comment node index rules are different, we
+  // need to re-insert the comment nodes in order to make it consistent with ssr
+  const commentNodes = childList.filter(v => v.name === 'comment');
+  if (commentNodes.length) {
+    childList = childList.filter(v => v.name !== 'comment');
+    for (let i = commentNodes.length - 1; i >= 0; i--) {
+      childList.splice(commentNodes[i].index, 0, commentNodes[i]);
+    }
+  }
+  // Recursively transform the child nodes, and append the child nodes to the parent node.
+  // Here, because the ssr node has already been rendered, there is no need to render it again
+  childList.forEach((node) => {
+    parentNode.appendChild(appendChildList(node, ssrNodeList), true);
+  });
+
+  return parentNode;
+}
+
+/**
+ * convert ssr native node list to hippy element tree, then vue can use to hydrate
+ *
+ * @param ssrNodeList
+ */
+export function convertToHippyElementTree(ssrNodeList: SsrNode[]): HippyElement {
+  const [root] = ssrNodeList;
+  return appendChildList(root, ssrNodeList) as HippyElement;
+}
diff --git a/driver/js/packages/hippy-vue-next/src/index.ts b/driver/js/packages/hippy-vue-next/src/index.ts
index e9664f1c484..f5bc254eedc 100644
--- a/driver/js/packages/hippy-vue-next/src/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/index.ts
@@ -23,20 +23,22 @@ import {
   type CssDeclarationType,
   parseCSS,
   translateColor,
+  getCssMap,
 } from '@hippy-vue-next-style-parser/index';
 import {
   type Component,
   type ComponentPublicInstance,
   type App,
   createRenderer,
+  createHydrationRenderer,
 } from '@vue/runtime-core';
 import { isFunction } from '@vue/shared';
 
-import type { NeedToTyped, CallbackType, CommonMapParams, NativeInterfaceMap } from './types';
+import type { NeedToTyped, CallbackType, CommonMapParams, NativeInterfaceMap, SsrNode, SsrNodeProps } from './types';
 import { BackAndroid } from './android-back';
 import BuiltInComponent from './built-in-component';
 import { drawIphoneStatusBar } from './iphone';
-import HippyNativeComponents from './native-component';
+import HippyNativeComponents, { isNativeTag, type AnimationInstance } from './native-component';
 import { nodeOps } from './node-ops';
 import { patchProp } from './patch-prop';
 import { getTagComponent, registerElement, type TagComponent, type ElementComponent } from './runtime/component';
@@ -46,7 +48,7 @@ import type { HippyInputElement } from './runtime/element/hippy-input-element';
 import type { HippyListElement } from './runtime/element/hippy-list-element';
 import { EventBus } from './runtime/event/event-bus';
 import { Native } from './runtime/native';
-import type { NativeApiType } from './runtime/native';
+import type { NativeApiType, MeasurePosition, DOMRect } from './runtime/native';
 import './runtime/event/hippy-event-dispatcher';
 import './runtime/websocket/websocket';
 import type { HippyNode } from './runtime/node/hippy-node';
@@ -64,6 +66,7 @@ import {
   setHippyCachedInstanceParams,
 } from './util/instance';
 import { setScreenSize } from './util/screen';
+import { convertToHippyElementTree } from './hydration';
 
 /**
  * Hippy App type, override the mount method of Vue
@@ -120,6 +123,8 @@ export interface HippyAppOptions {
   silent?: boolean;
   // set whether to trim text whitespace
   trimWhitespace?: boolean;
+  // ssr rendered node list
+  ssrNodeList?: SsrNode[],
 }
 
 // base screen width
@@ -155,7 +160,7 @@ function setIOSNativeBar(
 /**
  * create root node
  */
-function createRootNode(rootContainer: string): HippyNode {
+function createRootNode(rootContainer: string): HippyElement {
   // Create the root node as the root of the entire hippy tree
   const root: HippyElement = HippyDocument.createElement('div');
   // The id value of the root node is set to the incoming parameter rootContainer
@@ -172,22 +177,19 @@ function createRootNode(rootContainer: string): HippyNode {
 /**
  * Create Hippy Vue instance
  *
- * @param vueRootComponent - instance of vue root component
+ * @param app - instance of vue app
  * @param options - initialization parameters
  *
  * @public
  */
-export const createApp = (
-  vueRootComponent: Component,
+export const createHippyApp = (
+  app: App,
   options: HippyAppOptions,
 ): HippyApp => {
-  // Create a custom renderer and get the vue app instance
-  const app: App = createRenderer({
-    patchProp,
-    ...nodeOps,
-  }).createApp(vueRootComponent);
   // hippy app instance
   const hippyApp: HippyApp = app as HippyApp;
+  // ssrNodeList exist means we should use hydrate mode
+  const isHydrate = Boolean(options?.ssrNodeList?.length);
 
   // register built-in label components, such as div, span, etc., to enable HippyNode to support built-in labels
   // these built-in tags will be converted to component types recognized by Native,
@@ -216,16 +218,23 @@ export const createApp = (
 
   // rewrite mount method of vue
   hippyApp.mount = (rootContainer) => {
-    // cache rootContainer, used to determine whether it is the root node
+    // cache rootContainer first, used to determine whether it is the root node to insert node
     setHippyCachedInstanceParams('rootContainer', rootContainer);
     // create the root node
-    const root = createRootNode(rootContainer);
+    // return an empty node when the hydrate is false
+    // return a root node for a node tree, when the hydrate is true
+    const root = options?.ssrNodeList?.length
+      ? convertToHippyElementTree(options.ssrNodeList)
+      : createRootNode(rootContainer);
     // mount and get the instance
-    const instance = mount(root, false, false);
+    const instance = mount(root, isHydrate, false);
     // cache Vue instance
     setHippyCachedInstanceParams('instance', instance);
     // set the status bar for iOS
-    setIOSNativeBar(options, instance);
+    if (!isHydrate) {
+      // in hydrate mode, insert status bar must be async otherwise cause hydration mismatch
+      setIOSNativeBar(options, instance);
+    }
 
     return instance;
   };
@@ -275,6 +284,49 @@ export const createApp = (
   return hippyApp;
 };
 
+/**
+ * create client side render vue app instance
+ *
+ * @param vueRootComponent - vue root component
+ * @param options - hippy init options
+ *
+ * @public
+ */
+export const createApp = (
+  vueRootComponent: Component,
+  options: HippyAppOptions,
+): HippyApp => {
+  // create custom renderer and get vue app instance
+  const app: App = createRenderer({
+    patchProp,
+    ...nodeOps,
+  }).createApp(vueRootComponent);
+
+  // create hippy app
+  return createHippyApp(app, options);
+};
+
+/**
+ * create server side render vue app instance
+ *
+ * @param vueRootComponent - vue root component
+ * @param options - hippy init options
+ *
+ * @public
+ */
+export const createSSRApp = (
+  vueRootComponent: Component,
+  options: HippyAppOptions,
+): HippyApp => {
+  // create custom hydrate renderer and get vue app instance
+  const app: App = createHydrationRenderer({
+    patchProp,
+    ...nodeOps,
+  } as NeedToTyped).createApp(vueRootComponent);
+
+  return createHippyApp(app, options);
+};
+
 /*
  * used to validate beforeRenderToNative hook
  * when ElementNode or ViewNode have breaking changes, add version number to disable
@@ -305,33 +357,15 @@ export type {
   CommonMapParams,
   NeedToTyped,
   NativeInterfaceMap,
+  SsrNode,
+  SsrNodeProps,
+  MeasurePosition,
+  DOMRect,
+  AnimationInstance,
 };
 
-export {
-  HIPPY_DEBUG_ADDRESS,
-  HIPPY_STATIC_PROTOCOL,
-  NATIVE_COMPONENT_MAP,
-  IS_PROD,
-  HIPPY_GLOBAL_STYLE_NAME,
-  HIPPY_GLOBAL_DISPOSE_STYLE_NAME,
-  HIPPY_VUE_VERSION,
-} from './config';
-export {
-  HippyEvent,
-  HippyTouchEvent,
-  HippyKeyboardEvent,
-  HippyGlobalEventHandlersEventMap,
-  HippyLayoutEvent,
-  HippyLoadResourceEvent,
-  EventsUnionType,
-  ExposureEvent,
-  FocusEvent,
-  ContentSizeEvent,
-  ListViewEvent,
-  ViewPagerEvent,
-  eventIsKeyboardEvent,
-  MapToUnion,
-} from './runtime/event/hippy-event';
+export * from './config';
+export * from './runtime/event/hippy-event';
 
 export {
   EventBus,
@@ -339,7 +373,9 @@ export {
   BackAndroid,
   translateColor,
   parseCSS,
+  getCssMap,
   setScreenSize,
   getTagComponent,
   registerElement,
+  isNativeTag,
 };
diff --git a/driver/js/packages/hippy-vue-next/src/native-component/animation.ts b/driver/js/packages/hippy-vue-next/src/native-component/animation.ts
index aba914423b2..2305c2eff81 100644
--- a/driver/js/packages/hippy-vue-next/src/native-component/animation.ts
+++ b/driver/js/packages/hippy-vue-next/src/native-component/animation.ts
@@ -251,6 +251,14 @@ export function registerAnimation(vueApp: App): void {
     beforeDestroy() {
       this.destroy();
     },
+    deactivated() {
+      // for keep-alive deactivated
+      this.pause();
+    },
+    activated() {
+      // for keep-alive activated
+      this.resume();
+    },
     methods: {
       create() {
         const { actions: { transform, ...actions } } = this.$props;
diff --git a/driver/js/packages/hippy-vue-next/src/native-component/index.ts b/driver/js/packages/hippy-vue-next/src/native-component/index.ts
index a74c6ba0de9..e98cb6edc52 100644
--- a/driver/js/packages/hippy-vue-next/src/native-component/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/native-component/index.ts
@@ -27,6 +27,24 @@ import { registerSwiper } from './swiper';
 import { registerUlRefresh } from './ul-refresh';
 import { registerWaterfall } from './waterfall';
 
+// native component interface export
+export interface AnimationInstance {
+  create: () => void;
+  start: () => void;
+  reset: () => void;
+  resume: () => void;
+  pause: () => void;
+  destroy: () => void;
+  addAnimationEvent: () => void;
+  removeAnimationEvent: () => void;
+}
+
+// native tag list
+const nativeTags = [
+  'dialog', 'hi-pull-header', 'hi-pull-footer', 'hi-swiper', 'hi-swiper-slider',
+  'hi-waterfall', 'hi-waterfall-item', 'hi-ul-refresh-wrapper', 'hi-refresh-wrapper-item',
+];
+
 /**
  * install native components uniformly
  */
@@ -41,3 +59,12 @@ export default {
     registerSwiper(vueApp);
   },
 };
+
+/**
+ * return tag is native tag or not
+ *
+ * @param tag - tag name
+ */
+export function isNativeTag(tag: string): boolean {
+  return nativeTags.includes(tag);
+}
diff --git a/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts b/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
index 64b8bc916dc..5ef03ac046d 100644
--- a/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
+++ b/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
@@ -63,7 +63,7 @@ export function registerSwiper(vueApp: App): void {
   });
 
   // register swiper item tag
-  registerElement('swiper-slide', {
+  registerElement('hi-swiper-slide', {
     component: {
       name: 'ViewPagerItem',
       defaultNativeStyle: {
@@ -88,6 +88,11 @@ export function registerSwiper(vueApp: App): void {
         defaultValue: true,
       },
     },
+    data() {
+      return {
+        $initialSlide: 0,
+      };
+    },
     watch: {
       current(to) {
         if (this.$props.needAnimation) {
@@ -134,7 +139,7 @@ export function registerSwiper(vueApp: App): void {
   vueApp.component('SwiperSlide', {
     render() {
       return h(
-        'swiper-slide',
+        'hi-swiper-slide',
         {},
         this.$slots.default ? this.$slots.default() : null,
       );
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-comment-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-comment-element.ts
index f5f8adaa63f..1c98295cc1a 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-comment-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-comment-element.ts
@@ -17,7 +17,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import type { SsrNode } from '../../types';
 import { HippyElement } from './hippy-element';
 
 /**
@@ -27,11 +27,14 @@ import { HippyElement } from './hippy-element';
  */
 class HippyCommentElement extends HippyElement {
   public text: string;
+  // used to hydrate, same to vue
+  public data: string;
 
-  constructor(text: string) {
-    super(text);
+  constructor(text: string, ssrNode?: SsrNode) {
+    super('comment', ssrNode);
 
     this.text = text;
+    this.data = text;
 
     // comment nodes do not need to be inserted into Native
     this.isNeedInsertToNative = false;
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
index 808c3c0575b..baa485cab6d 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
@@ -21,12 +21,14 @@
 import {
   parseBackgroundImage,
   PROPERTIES_MAP,
+  getCssMap,
   type PropertiesMapType,
+  type StyleNode,
 } from '@hippy-vue-next-style-parser/index';
 import { toRaw } from '@vue/runtime-core';
 import { isFunction, isString } from '@vue/shared';
 
-import type { CallbackType, NeedToTyped, NativeNode, NativeNodeProps } from '../../types';
+import type { CallbackType, NeedToTyped, NativeNode, NativeNodeProps, SsrNode } from '../../types';
 import { IS_PROD, NATIVE_COMPONENT_MAP } from '../../config';
 import {
   capitalizeFirstLetter,
@@ -40,6 +42,7 @@ import {
   whitespaceFilter,
   getBeforeRenderToNative,
   getBeforeLoadStyle,
+  getStyleClassList,
 } from '../../util';
 import { isRTL } from '../../util/i18n';
 import { EventHandlerType, EventMethod } from '../../util/event';
@@ -52,7 +55,6 @@ import type { EventListenerOptions } from '../event/hippy-event-target';
 import type { convertToNativeNodesReturnedVal } from '../node/hippy-node';
 import { Native } from '../native';
 import { HippyNode, NodeType } from '../node/hippy-node';
-import { getCssMap } from '../style/css-map';
 import { HippyText } from '../text/hippy-text';
 
 interface OffsetMapType {
@@ -235,6 +237,12 @@ export class HippyElement extends HippyNode {
   // style preprocessor
   public beforeLoadStyle: CallbackType;
 
+  // vue ssr text content
+  public textContent?: string;
+
+  // ssr inline style
+  public ssrInlineStyle?: NativeNodeProps;
+
   // polyFill of native event
   protected polyfillNativeEvents?: (
     method: string,
@@ -250,16 +258,47 @@ export class HippyElement extends HippyNode {
   // style scoped id for element
   private scopedIdList: NeedToTyped[] = [];
 
-  constructor(tagName: string) {
-    super(NodeType.ElementNode);
+  constructor(tagName: string, ssrNode?: SsrNode) {
+    super(tagName === 'comment' ? NodeType.CommentNode : NodeType.ElementNode, ssrNode);
 
     // tag name should be lowercase
     this.tagName = tagName.toLowerCase();
-    this.classList = new Set();
-    this.attributes = {};
     this.style = {};
     this.events = {};
     this.beforeLoadStyle = getBeforeLoadStyle();
+
+
+    if (ssrNode) {
+      // assign ssr node exist attributes for element init
+      const { props } = ssrNode;
+      const text = props?.text ?? '';
+      // assign class name list
+      this.classList = new Set(getStyleClassList(props?.attributes?.class ?? ''));
+      // assign dom id
+      this.id = props?.attributes?.id ?? '';
+      // assign inline style
+      if (props.inlineStyle) {
+        this.ssrInlineStyle = props.inlineStyle;
+        delete props.inlineStyle;
+      }
+      // remove unnecessary attr
+      delete props.attributes;
+      delete props.style;
+      // fix iOS image source problem
+      if (props?.source?.length) {
+        props.src = props.source[0].uri;
+        delete props.source;
+      }
+      // assign element attributes
+      this.attributes = props;
+      // assign text content
+      this.value = text;
+      this.textContent = text;
+    } else {
+      this.classList = new Set();
+      this.attributes = {};
+    }
+
     // hack special problems
     this.hackSpecialIssue();
   }
@@ -279,6 +318,9 @@ export class HippyElement extends HippyNode {
     return this.tagComponent;
   }
 
+  /**
+   * determine whether the current node is the root node
+   */
   public isRootNode(): boolean {
     const { rootContainer } = getHippyCachedInstance();
     return super.isRootNode() || this.id === rootContainer;
@@ -288,13 +330,14 @@ export class HippyElement extends HippyNode {
    * append child node
    *
    * @param child - child node
+   * @param isHydrate - is hydrate or not
    */
-  public appendChild(child: HippyNode): void {
+  public appendChild(child: HippyNode, isHydrate: boolean = false): void {
     // If the node type is text node, call setText method to set the text property
     if (child instanceof HippyText) {
       this.setText(child.text, { notToNative: true });
     }
-    super.appendChild(child);
+    super.appendChild(child, isHydrate);
   }
 
   /**
@@ -392,8 +435,8 @@ export class HippyElement extends HippyNode {
       }
       switch (key) {
         case 'class': {
-          const newClassList = new Set(value.split(' ').filter((x: string) => x.trim()) as string);
-          // If classList is still the same, return directly
+          const newClassList = new Set(getStyleClassList(value));
+          // If classList is not change, return directly
           if (setsAreEqual(this.classList, newClassList)) {
             return;
           }
@@ -506,7 +549,7 @@ export class HippyElement extends HippyNode {
    *
    * @param batchStyles - batched style to set
    */
-  public setStyles(batchStyles) {
+  public setStyles(batchStyles: Record<string, NeedToTyped>) {
     if (!batchStyles || typeof batchStyles !== 'object') {
       return;
     }
@@ -654,13 +697,13 @@ export class HippyElement extends HippyNode {
     }
   }
 
-  setListenerHandledType(key, type) {
+  setListenerHandledType(key: string, type) {
     if (this.events[key]) {
       this.events[key].handledType = type;
     }
   }
 
-  isListenerHandled(key, type) {
+  isListenerHandled(key: string, type) {
     if (this.events[key] && type !== this.events[key].handledType) {
       // if handledType not equals to type params, this event needs updated
       // if handledType equals to undefined, this event needs created
@@ -670,7 +713,12 @@ export class HippyElement extends HippyNode {
     return true;
   }
 
-  getNativeEventName(eventName) {
+  /**
+   * parse vue event name to native event name and return
+   *
+   * @param eventName - vue event name
+   */
+  getNativeEventName(eventName: string) {
     let nativeEventName = `on${capitalizeFirstLetter(eventName)}`;
     if (this.component) {
       const { eventNamesMap } = this.component;
@@ -696,10 +744,20 @@ export class HippyElement extends HippyNode {
     let eventNames = rawEventNames;
     let callback = rawCallback;
     let options = rawOptions;
+    let isNeedUpdate = true;
     // Added default scrollEventThrottle when scroll event is added.
     if (eventNames === 'scroll' && !(this.getAttribute('scrollEventThrottle') > 0)) {
       this.attributes.scrollEventThrottle = 200;
     }
+
+    // get the native event name
+    const ssrEventName = this.getNativeEventName(eventNames);
+    if (this.attributes[ssrEventName]) {
+      // ssrEventName attribute exist means this is ssrNode, the native event props has been
+      // set before, unnecessary to update
+      isNeedUpdate = false;
+    }
+
     // If there is an event polyfill, override the event names, callback and options
     if (typeof this.polyfillNativeEvents === 'function') {
       ({ eventNames, callback, options } = this.polyfillNativeEvents(
@@ -724,7 +782,9 @@ export class HippyElement extends HippyNode {
       }
     });
     // update native node
-    this.updateNativeNode();
+    if (isNeedUpdate) {
+      this.updateNativeNode();
+    }
   }
 
   /**
@@ -758,6 +818,12 @@ export class HippyElement extends HippyNode {
         this.events[nativeEventName].type = EventHandlerType.REMOVE;
       }
     });
+    // get the native event insert before
+    const ssrEventName = this.getNativeEventName(eventNames);
+    if (this.attributes[ssrEventName]) {
+      // remove exist ssr native event attr
+      delete this.attributes[ssrEventName];
+    }
     // update native node
     this.updateNativeNode();
   }
@@ -815,7 +881,15 @@ export class HippyElement extends HippyNode {
      * inherit node in beforeRenderToNative hook
      */
     if (this.component.defaultNativeStyle) {
-      style = { ...this.component.defaultNativeStyle, ...style };
+      const { defaultNativeStyle } = this.component;
+      const updateStyle: NativeNodeProps = {};
+      Object.keys(defaultNativeStyle).forEach((key) => {
+        if (!this.getAttribute(key)) {
+          // save no default value style
+          updateStyle[key] = defaultNativeStyle[key];
+        }
+      });
+      style = { ...updateStyle, ...style };
     }
 
     const elementExtraAttributes: Partial<NativeNode> = {
@@ -923,7 +997,7 @@ export class HippyElement extends HippyNode {
 
     // get the styles from the global CSS stylesheet
     // rem needs to be processed here
-    const matchedSelectors = getCssMap().query(this);
+    const matchedSelectors = getCssMap(undefined, getBeforeLoadStyle()).query(this as unknown as StyleNode);
     matchedSelectors.selectors.forEach((matchedSelector) => {
       // if current element do not match style rule, return
       if (!isStyleMatched(matchedSelector, this)) {
@@ -931,13 +1005,19 @@ export class HippyElement extends HippyNode {
       }
       if (matchedSelector.ruleSet?.declarations?.length) {
         matchedSelector.ruleSet.declarations.forEach((cssStyle) => {
-          if (cssStyle) {
+          if (cssStyle.property) {
+            // comment style doesn't have property and value
             style[cssStyle.property] = cssStyle.value;
           }
         });
       }
     });
 
+    // add ssr inline style
+    if (this.ssrInlineStyle) {
+      style = { ...style, ...this.ssrInlineStyle };
+    }
+
     // finally, get the style from the style attribute of the node and process the rem unit
     style = HippyElement.parseRem({ ...style, ...this.getInlineStyle() });
 
@@ -1057,6 +1137,13 @@ export class HippyElement extends HippyNode {
       delete attributes.text;
       delete attributes.value;
 
+      Object.keys(attributes).forEach((key) => {
+        if (key.toLowerCase().includes('color')) {
+          // color value may big int that iOS do not support, should delete
+          delete attributes[key];
+        }
+      });
+
       return attributes;
     } catch (error) {
       return {};
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/native/index.ts b/driver/js/packages/hippy-vue-next/src/runtime/native/index.ts
index cb61050e48b..2865236fe0c 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/native/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/native/index.ts
@@ -18,14 +18,13 @@
  * limitations under the License.
  */
 
-import { translateColor } from '@hippy-vue-next-style-parser/index';
+import { translateColor, getCssMap, type StyleNode } from '@hippy-vue-next-style-parser/index';
 import type { NeedToTyped, CallbackType, NativeInterfaceMap } from '../../types';
 import { HIPPY_VUE_VERSION } from '../../config';
-import { isStyleMatched, trace, warn } from '../../util';
+import { isStyleMatched, trace, warn, getBeforeLoadStyle } from '../../util';
 import { type HippyElement } from '../element/hippy-element';
 import { EventBus } from '../event/event-bus';
 import { type HippyNode } from '../node/hippy-node';
-import { getCssMap } from '../style/css-map';
 
 // Extend the global interface definition
 declare global {
@@ -53,7 +52,7 @@ interface Dimensions {
 }
 
 // Element position information type
-interface MeasurePosition {
+export interface MeasurePosition {
   top: number;
   left: number;
   bottom: number;
@@ -63,7 +62,7 @@ interface MeasurePosition {
 }
 
 // DOM Bounding Rect
-interface DOMRect {
+export interface DOMRect {
   x: number | undefined;
   y: number | undefined;
   top: number | undefined;
@@ -308,6 +307,21 @@ const LOG_TYPE = ['%c[native]%c', 'color: red', 'color: auto'];
 
 export const CACHE: CacheType = {};
 
+// faked hippy global object. avoid error in server side execute
+const ssrFakeHippy = {
+  device: {
+    platform: {
+      Localization: {},
+    },
+    window: {},
+    screen: {},
+  },
+  bridge: {},
+  register: {},
+  document: {},
+  asyncStorage: {},
+};
+
 // deconstruct the required properties and methods from the native injected global Hippy object
 export const {
   bridge: { callNative, callNativeWithPromise, callNativeWithCallbackId },
@@ -318,7 +332,8 @@ export const {
   device,
   document: hippyNativeDocument,
   register: hippyNativeRegister,
-} = global.Hippy;
+  asyncStorage,
+} = global.Hippy ?? ssrFakeHippy;
 
 /**
  * Call the Native interface to measure the location information of the node
@@ -393,9 +408,7 @@ export const Native: NativeApiType = {
 
   callNativeWithCallbackId,
 
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  AsyncStorage: global.Hippy.asyncStorage,
+  AsyncStorage: asyncStorage,
 
   callUIFunction(...args) {
     const [el, funcName, ...options] = args;
@@ -756,7 +769,6 @@ export const Native: NativeApiType = {
    * Convert the color to the native corresponding int32 color value
    *
    * @param color - color string
-   * @param options - parse options
    */
   parseColor(color: string | number): number {
     if (Number.isInteger(color)) {
@@ -773,8 +785,8 @@ export const Native: NativeApiType = {
   getElemCss(element: HippyElement) {
     const style = Object.create(null);
     try {
-      getCssMap()
-        .query(element)
+      getCssMap(undefined, getBeforeLoadStyle())
+        .query(element as unknown as StyleNode)
         .selectors.forEach((matchedSelector) => {
           if (!isStyleMatched(matchedSelector, element)) {
             return;
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts b/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
index 58c6109356f..3549c49d184 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
@@ -17,7 +17,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { CallbackType, NativeNode, NativeNodeProps } from '../../types';
+import type { CallbackType, NativeNode, NativeNodeProps, SsrNode } from '../../types';
 import { getUniqueId, DEFAULT_ROOT_ID } from '../../util';
 import { getHippyCachedInstance } from '../../util/instance';
 import { findNotToSkipNode, preCacheNode, RelativeToRefType } from '../../util/node';
@@ -32,11 +32,12 @@ import {
 } from '../render';
 import { EventHandlerType } from '../../util/event';
 
+// NodeType, same with vue
 export enum NodeType {
   ElementNode = 1, // element node
-  TextNode, // text node
-  CommentNode, // comment node
-  DocumentNode, // document node
+  TextNode = 3, // text node
+  CommentNode = 8, // comment node
+  DocumentNode = 4, // document node
 }
 
 export type convertToNativeNodesReturnedVal = [
@@ -134,11 +135,17 @@ export class HippyNode extends HippyEventTarget {
   // native component information corresponding to the node
   protected tagComponent: TagComponent | null = null;
 
-  constructor(nodeType: NodeType) {
+  constructor(nodeType: NodeType, ssrNode?: SsrNode) {
     super();
-    this.nodeId = HippyNode.getUniqueNodeId();
+    // ssr node has already created node id in server side, we just used it
+    this.nodeId = ssrNode?.id ?? HippyNode.getUniqueNodeId();
     this.nodeType = nodeType;
     this.isNeedInsertToNative = needInsertToNative(nodeType);
+
+    // ssr node has been inserted to native, so we direct set isMounted true
+    if (ssrNode?.id) {
+      this.isMounted = true;
+    }
   }
 
   /**
@@ -186,6 +193,13 @@ export class HippyNode extends HippyEventTarget {
     return this.nodeId === DEFAULT_ROOT_ID;
   }
 
+  /**
+   * has child nodes or not, used for hydrate
+   */
+  public hasChildNodes(): boolean {
+    return !!this.childNodes.length;
+  }
+
   /**
    * Insert the node before the specified node
    *
@@ -342,8 +356,9 @@ export class HippyNode extends HippyEventTarget {
    * append child node
    *
    * @param rawChild - child node to be added
+   * @param isHydrate - is hydrate operate or not
    */
-  public appendChild(rawChild: HippyNode): void {
+  public appendChild(rawChild: HippyNode, isHydrate: boolean = false): void {
     const child = rawChild;
 
     if (!child) {
@@ -359,8 +374,9 @@ export class HippyNode extends HippyEventTarget {
       child.parentNode.removeChild(child);
     }
 
-    // If the node is already mounted, remove it first
-    if (child.isMounted) {
+    // If the node is already mounted, remove it first, but do not remove when is hydrate.
+    // Because hydrate node just rendered in native, but do not add to hippy node list
+    if (child.isMounted && !isHydrate) {
       this.removeChild(child);
     }
 
@@ -376,8 +392,14 @@ export class HippyNode extends HippyEventTarget {
     // add node
     this.childNodes.push(child);
 
-    // call the native interface to insert a node
-    this.insertChildNativeNode(child);
+    if (!isHydrate) {
+      // call the native interface to insert a node
+      this.insertChildNativeNode(child);
+    } else {
+      // for hydrate case, node has been inserted to native. so we do not need to insert to native
+      // just pre cache the node
+      preCacheNode(child, child.nodeId);
+    }
   }
 
   /**
@@ -498,7 +520,7 @@ export class HippyNode extends HippyEventTarget {
 
       // if the root node is not rendered on the screen, start rendering from the root node first
       // render the child node if the child node is not rendered
-      const nodesList = parentNode.convertToNativeNodes(true, refInfo);
+      renderInsertChildNativeNode(parentNode.convertToNativeNodes(true, refInfo));
       // update the isMounted flag
       parentNode.eachNode((rawNode: HippyNode) => {
         const node = rawNode;
@@ -508,7 +530,6 @@ export class HippyNode extends HippyEventTarget {
         // cache the nodes inserted into the native to improve the search speed
         preCacheNode(node, node.nodeId);
       });
-      renderInsertChildNativeNode(nodesList);
     }
   }
 
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/style/css-map.ts b/driver/js/packages/hippy-vue-next/src/runtime/style/css-map.ts
deleted file mode 100644
index af5a347bba5..00000000000
--- a/driver/js/packages/hippy-vue-next/src/runtime/style/css-map.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making
- * Hippy available.
- *
- * Copyright (C) 2022 THL A29 Limited, a Tencent company.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  HIPPY_GLOBAL_STYLE_NAME,
-  HIPPY_GLOBAL_DISPOSE_STYLE_NAME,
-} from '../../config';
-
-import { SelectorsMap } from './css-selectors-match';
-
-import { fromAstNodes } from './index';
-
-// global css map
-let globalCssMap: SelectorsMap;
-export function getCssMap(): SelectorsMap {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const styleCssMap = global[HIPPY_GLOBAL_STYLE_NAME];
-
-  /**
-   * To support dynamic import, globalCssMap can be loaded from different js file.
-   * globalCssMap should be created/appended if global[GLOBAL_STYLE_NAME] exists;
-   */
-  if (!globalCssMap || styleCssMap) {
-    /**
-     *  Here is a secret startup option: beforeStyleLoadHook.
-     *  Usage for process the styles while styles loading.
-     */
-    const cssRules = fromAstNodes(styleCssMap);
-    if (globalCssMap) {
-      globalCssMap.append(cssRules);
-    } else {
-      globalCssMap = new SelectorsMap(cssRules);
-    }
-
-    // after the global style processing is complete, remove the value of this object
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    global[HIPPY_GLOBAL_STYLE_NAME] = undefined;
-  }
-  // if there are currently expired styles, hot update style processing
-  if (global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME]) {
-    // the new css style will be generated with hash id, so it can be removed by id
-    global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME].forEach((id) => {
-      // remove outdated styles
-      globalCssMap.delete(id);
-    });
-
-    // remove saved expired styles
-    global[HIPPY_GLOBAL_DISPOSE_STYLE_NAME] = undefined;
-  }
-
-  return globalCssMap;
-}
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/style/index.ts b/driver/js/packages/hippy-vue-next/src/runtime/style/index.ts
deleted file mode 100644
index 9fac3928429..00000000000
--- a/driver/js/packages/hippy-vue-next/src/runtime/style/index.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making
- * Hippy available.
- *
- * Copyright (C) 2022 THL A29 Limited, a Tencent company.
- * All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { NeedToTyped } from '../../types';
-import { IS_PROD } from '../../config';
-import { getBeforeLoadStyle } from '../../util';
-
-import {
-  RuleSet,
-  InvalidSelector,
-  UniversalSelector,
-  IdSelector,
-  TypeSelector,
-  ClassSelector,
-  PseudoClassSelector,
-  AttributeSelector,
-  SimpleSelectorSequence,
-  Selector,
-} from './css-selectors';
-import type { CssAttribute } from './css-selectors-match';
-import { parseSelector } from './parser';
-
-function isDeclaration(node) {
-  return node.type === 'declaration';
-}
-
-function createDeclaration(beforeLoadStyle) {
-  return (decl) => {
-    const newDecl = beforeLoadStyle(decl);
-    if (!IS_PROD) {
-      if (!newDecl) {
-        throw new Error('beforeLoadStyle hook must returns the processed style object');
-      }
-    }
-    return newDecl;
-  };
-}
-
-function createSimpleSelectorFromAst(ast) {
-  switch (ast.type) {
-    case '*':
-      return new UniversalSelector();
-    case '#':
-      return new IdSelector(ast.identifier);
-    case '':
-      return new TypeSelector(ast.identifier.replace(/-/, '').toLowerCase());
-    case '.':
-      return new ClassSelector(ast.identifier);
-    case ':':
-      return new PseudoClassSelector(ast.identifier);
-    case '[]':
-      return ast.test
-        ? new AttributeSelector(ast.property, ast.test, ast.value)
-        : new AttributeSelector(ast.property);
-    default:
-      return null;
-  }
-}
-
-function createSimpleSelectorSequenceFromAst(ast) {
-  if (ast.length === 0) {
-    return new InvalidSelector(new Error('Empty simple selector sequence.'));
-  }
-  if (ast.length === 1) {
-    return createSimpleSelectorFromAst(ast[0]);
-  }
-
-  return new SimpleSelectorSequence(ast.map(createSimpleSelectorFromAst));
-}
-
-function createSelectorFromAst(ast) {
-  if (ast.length === 0) {
-    return new InvalidSelector(new Error('Empty selector.'));
-  }
-  if (ast.length === 1) {
-    return createSimpleSelectorSequenceFromAst(ast[0][0]);
-  }
-  const simpleSelectorSequences: NeedToTyped[] = [];
-
-  for (const currentAst of ast) {
-    const simpleSelectorSequence = createSimpleSelectorSequenceFromAst(currentAst[0]);
-    const combinator = currentAst[1];
-    if (combinator && simpleSelectorSequence) {
-      simpleSelectorSequence.combinator = combinator;
-    }
-    simpleSelectorSequences.push(simpleSelectorSequence);
-  }
-
-  return new Selector(simpleSelectorSequences);
-}
-
-function createSelector(sel) {
-  try {
-    const parsedSelector = parseSelector(sel, 0);
-    if (!parsedSelector) {
-      return new InvalidSelector(new Error('Empty selector'));
-    }
-    // parsedSelector.value is ast, like:
-    // [[[{type: '#', identifier: 'root'}, {type: '[]', property: 'data-v-5ef48958'}], undefined]]
-    return createSelectorFromAst(parsedSelector.value);
-  } catch (e) {
-    return new InvalidSelector(e as Error);
-  }
-}
-
-export function fromAstNodes(astRules: CssAttribute[] = []): RuleSet[] {
-  const beforeLoadStyle = getBeforeLoadStyle();
-
-  return astRules.map((rule) => {
-    const declarations = rule.declarations
-      .filter(isDeclaration)
-      .map(createDeclaration(beforeLoadStyle));
-    const selectors = rule.selectors.map(createSelector);
-
-    return new RuleSet(selectors, declarations, rule.hash);
-  });
-}
-
-export { SelectorsMap } from './css-selectors-match';
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/text/hippy-text.ts b/driver/js/packages/hippy-vue-next/src/runtime/text/hippy-text.ts
index 41d6e9188ce..2c8f6690fc8 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/text/hippy-text.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/text/hippy-text.ts
@@ -20,16 +20,20 @@
 
 import type { HippyElement } from '../element/hippy-element';
 import { HippyNode, NodeType } from '../node/hippy-node';
+import type { SsrNode } from '../../types';
 
 /**
  * hippy text node
  */
 export class HippyText extends HippyNode {
   public text: string;
+  // used to hydrate, same to vue
+  public data: string;
 
-  constructor(text: string) {
-    super(NodeType.TextNode);
+  constructor(text: string, ssrNode?: SsrNode) {
+    super(NodeType.TextNode, ssrNode);
     this.text = text;
+    this.data = text;
   }
 
   public setText(text: string): void {
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts b/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
index 53bb5906397..f4b3406681d 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
@@ -283,6 +283,5 @@ class WebSocket {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
+// assign websocket to global
 global.WebSocket = WebSocket;
diff --git a/driver/js/packages/hippy-vue-next/src/types/index.ts b/driver/js/packages/hippy-vue-next/src/types/index.ts
index d043705ec0f..4dd439d434e 100644
--- a/driver/js/packages/hippy-vue-next/src/types/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/types/index.ts
@@ -53,3 +53,35 @@ export {
   AnimationStyle,
   NativeInterfaceMap,
 } from './native-modules';
+
+/**
+ * SSR common type
+ *
+ * @public
+ */
+export interface SsrCommonParams {
+  // props could be any type，include string，number，boolean，object，function，array, etc.
+  [key: string]: NeedToTyped;
+}
+
+/**
+ * SSR Node props type
+ *
+ * @public
+ */
+export type SsrNodeProps = SsrCommonParams;
+
+/**
+ * SSR Node type
+ *
+ * @public
+ */
+export interface SsrNode {
+  id: number;
+  pId?: number;
+  index: number;
+  name: string;
+  props: SsrNodeProps;
+  tagName?: string;
+  children?: SsrNode[];
+}
diff --git a/driver/js/packages/hippy-vue-next/src/util/index.ts b/driver/js/packages/hippy-vue-next/src/util/index.ts
index 71ac2d79eae..3a77e029cce 100644
--- a/driver/js/packages/hippy-vue-next/src/util/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/util/index.ts
@@ -28,11 +28,9 @@ import type {
   CallbackType,
   NativeNodeProps,
 } from '../types';
-import { HIPPY_DEBUG_ADDRESS, HIPPY_STATIC_PROTOCOL, IS_PROD } from '../config';
+import { HIPPY_DEBUG_ADDRESS, HIPPY_STATIC_PROTOCOL, IS_PROD, HIPPY_UNIQUE_ID_KEY } from '../config';
 import { type HippyElement } from '../runtime/element/hippy-element';
 
-let uniqueId = 0;
-
 let isSilent = false;
 let isNeedTrimWhitespace = true;
 
@@ -40,13 +38,18 @@ let isNeedTrimWhitespace = true;
 export const DEFAULT_ROOT_ID = 1;
 
 export function getUniqueId(): number {
-  uniqueId += 1;
+  if (!global[HIPPY_UNIQUE_ID_KEY]) global[HIPPY_UNIQUE_ID_KEY] = 0;
+  global[HIPPY_UNIQUE_ID_KEY] += 1;
+
   // The id does not use numbers that are multiples of 10
   // because id multiples of 10 is used by native
-  if (uniqueId % 10 === 0) {
-    uniqueId += 1;
+  if (global[HIPPY_UNIQUE_ID_KEY] % 10 === 0) {
+    global[HIPPY_UNIQUE_ID_KEY] += 1;
   }
-  return uniqueId;
+  // Because of the existence of SSR nodes, the unique ID needs to take into account
+  // the unique node id that SSR has created. Subsequent unique IDs should be added
+  // on this basis, so global IDs are used for management
+  return global[HIPPY_UNIQUE_ID_KEY];
 }
 
 export function isTraceEnabled() {
@@ -409,3 +412,11 @@ export function whitespaceFilter(str: string | any): string {
   return str;
 }
 
+/**
+ * transform css class string to class array
+ *
+ * @param className
+ */
+export function getStyleClassList(className: string): Array<string> {
+  return className.split(' ').filter(c => c.trim());
+}
diff --git a/driver/js/scripts/vue-next-configs.js b/driver/js/scripts/vue-next-configs.js
index 0290b73a6d6..05a5a8850b0 100644
--- a/driver/js/scripts/vue-next-configs.js
+++ b/driver/js/scripts/vue-next-configs.js
@@ -29,35 +29,115 @@ const { apiExtractor } = require('rollup-plugin-api-extractor');
 const VueVersion = require('../packages/hippy-vue-next/node_modules/@vue/runtime-core/package.json').version;
 const hippyVueNextPackage = require('../packages/hippy-vue-next/package.json');
 const hippyStyleParserPackage = require('../packages/hippy-vue-next-style-parser/package.json');
+const hippyCompilerSsrPackage = require('../packages/hippy-vue-next-compiler-ssr/package.json');
+const hippyServerRendererPackage = require('../packages/hippy-vue-next-server-renderer/package.json');
 const { banner, resolvePackage } = require('./utils');
 const bannerStrAndHippyVueString = `\n * (Using Vue v${VueVersion} and Hippy-Vue-Next v${hippyVueNextPackage.version})`;
 
 const builds = {
-  '@hippy/hippy-vue-next-style-parser': {
+  '@hippy/hippy-vue-next-style-parser-cjs': {
     entry: resolvePackage('hippy-vue-next-style-parser', 'src/index.ts'),
     dest: resolvePackage('hippy-vue-next-style-parser', 'dist/index.js'),
     format: 'cjs',
     moduleName: 'hippy-vue-next-style-parser',
-    banner: banner('@hippy/hippy-vue-next-style-parser', hippyStyleParserPackage.version, bannerStrAndHippyVueString, 2022),
+    banner: banner('@hippy/hippy-vue-next-style-parser', hippyStyleParserPackage.version, bannerStrAndHippyVueString, 2023),
+    external: ['@vue/shared'],
   },
-  '@hippy/vue-next': {
+  '@hippy/hippy-vue-next-style-parser-esm': {
+    entry: resolvePackage('hippy-vue-next-style-parser', 'src/index.ts'),
+    dest: resolvePackage('hippy-vue-next-style-parser', 'dist/index.esm.js'),
+    format: 'es',
+    moduleName: 'hippy-vue-next-style-parser',
+    banner: banner('@hippy/hippy-vue-next-style-parser', hippyStyleParserPackage.version, bannerStrAndHippyVueString, 2023),
+    external: ['@vue/shared'],
+  },
+  '@hippy/vue-next-cjs': {
     entry: resolvePackage('hippy-vue-next', 'src/index.ts'),
     dest: resolvePackage('hippy-vue-next', 'dist/index.js'),
+    format: 'cjs',
+    banner: banner('@hippy/vue-next', hippyVueNextPackage.version, bannerStrAndHippyVueString, 2023),
+    name: 'hippy-vue-next',
+    external: ['@vue/runtime-core', '@vue/shared'],
+  },
+  '@hippy/vue-next-esm': {
+    entry: resolvePackage('hippy-vue-next', 'src/index.ts'),
+    dest: resolvePackage('hippy-vue-next', 'dist/index.esm.js'),
     format: 'es',
-    banner: banner('@hippy/vue', hippyVueNextPackage.version, bannerStrAndHippyVueString, 2022),
+    banner: banner('@hippy/vue-next', hippyVueNextPackage.version, bannerStrAndHippyVueString, 2023),
     name: 'hippy-vue-next',
-    external: ['@vue/runtime-core'],
+    external: ['@vue/runtime-core', '@vue/shared'],
+  },
+  '@hippy/vue-next-server-renderer-cjs': {
+    entry: resolvePackage('hippy-vue-next-server-renderer', 'src/index.ts'),
+    dest: resolvePackage('hippy-vue-next-server-renderer', 'dist/index.js'),
+    format: 'cjs',
+    moduleName: 'hippy-vue-next-server-renderer',
+    banner: banner('@hippy/vue-next-server-renderer', hippyServerRendererPackage.version, bannerStrAndHippyVueString, 2023),
+    external: ['@vue/server-renderer', '@vue/runtime-core', '@vue/shared'],
+  },
+  '@hippy/vue-next-server-renderer-esm': {
+    entry: resolvePackage('hippy-vue-next-server-renderer', 'src/index.ts'),
+    dest: resolvePackage('hippy-vue-next-server-renderer', 'dist/index.esm.js'),
+    format: 'es',
+    moduleName: 'hippy-vue-next-server-renderer',
+    banner: banner('@hippy/vue-next-server-renderer', hippyServerRendererPackage.version, bannerStrAndHippyVueString, 2023),
+    external: ['@vue/server-renderer', '@vue/runtime-core', '@vue/shared'],
+  },
+  '@hippy/vue-next-compiler-ssr': {
+    entry: resolvePackage('hippy-vue-next-compiler-ssr', 'src/index.ts'),
+    dest: resolvePackage('hippy-vue-next-compiler-ssr', 'dist/index.js'),
+    format: 'cjs',
+    moduleName: 'hippy-vue-next-compiler-ssr',
+    banner: banner('@hippy/vue-next-compiler-ssr', hippyCompilerSsrPackage.version, bannerStrAndHippyVueString, 2023),
+    external: ['@vue/compiler-core', '@vue/compiler-dom', '@vue/shared'],
   },
 };
 
+/**
+ * get babel config
+ *
+ * @param opts - package options
+ */
+function getBabelConfig(opts) {
+  if (opts.name === 'hippy-vue-next-style-parser') {
+    return [];
+  }
+
+  return opts.name === 'hippy-vue-next' ? [
+    babel({
+      presets: [
+        [
+          '@babel/env',
+          {
+            targets: {
+              chrome: '57',
+            },
+          },
+        ],
+      ],
+      plugins: [
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            corejs: false,
+          },
+        ],
+      ],
+      babelHelpers: 'runtime',
+    }),
+  ] : [
+    babel({
+      babelHelpers: 'runtime',
+    }),
+  ];
+}
+
+
 function genConfig(name) {
   const opts = builds[name];
   const config = {
     input: opts.entry,
     external: opts.external,
-    treeshake: {
-      moduleSideEffects: id => !id.startsWith('weex'),
-    },
     plugins: [
       replace({
         preventAssignment: true,
@@ -69,6 +149,8 @@ function genConfig(name) {
           'process.env.HIPPY_VUE_VERSION': `"${hippyVueNextPackage.version}"`,
           // enable vue-devtools if __VUE_DEVTOOLS_GLOBAL_HOOK__ exist
           'inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__': 'global.__VUE_DEVTOOLS_GLOBAL_HOOK__',
+          // set __SSR__ to true when package is server-renderer
+          __SSR__: opts.name === 'hippy-vue-next-server-renderer',
         },
       }),
       typescript({
@@ -111,32 +193,7 @@ function genConfig(name) {
       nodeResolve({
         preferBuiltins: true,
       }),
-    ].concat(opts.name === 'hippy-vue-next' ? [
-      babel({
-        presets: [
-          [
-            '@babel/env',
-            {
-              targets: {
-                chrome: '57',
-              },
-            },
-          ],
-        ],
-        plugins: [
-          [
-            '@babel/plugin-transform-runtime',
-            {
-              corejs: false,
-            },
-          ],
-        ],
-        babelHelpers: 'runtime',
-      }),
-      cjs(),
-    ] : [
-      cjs(),
-    ]).concat(opts.plugins || []),
+    ].concat(getBabelConfig(opts)).concat([cjs()]).concat(opts.plugins || []),
     output: {
       file: opts.dest,
       format: opts.format,
diff --git a/driver/js/tsconfig.json b/driver/js/tsconfig.json
index 99d73d1399f..227b0088788 100644
--- a/driver/js/tsconfig.json
+++ b/driver/js/tsconfig.json
@@ -54,6 +54,8 @@
       "sfc/*": ["node_modules/vue/src/sfc/*"],
       "he": ["packages/hippy-vue/src/util/entity-decoder"],
       "@hippy-vue-next-style-parser/*": ["packages/hippy-vue-next-style-parser/src/*"],
+      "@hippy-vue-next/*": ["packages/hippy-vue-next/src/*"],
+      "@hippy-vue-next-server-renderer/*": ["packages/hippy-vue-next-server-renderer/src/*"]
     },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */

From 576a90cd0bb6eaca0f7d6ae4176879a1800063eb Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Mon, 25 Sep 2023 16:12:00 +0800
Subject: [PATCH 02/10] feat(vue-next): remove unused method & fix ts type
 issue

---
 .../runtime/element/hippy-input-element.test.ts  | 16 +---------------
 .../src/runtime/element/hippy-input-element.ts   | 16 ----------------
 .../src/runtime/websocket/websocket.ts           |  1 +
 3 files changed, 2 insertions(+), 31 deletions(-)

diff --git a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
index 52a278fb64f..defebc0c0fa 100644
--- a/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
+++ b/driver/js/packages/hippy-vue-next/__test__/runtime/element/hippy-input-element.test.ts
@@ -19,7 +19,7 @@
  */
 
 import { HippyInputElement } from '../../../src/runtime/element/hippy-input-element';
-import { Native } from '../../../src/runtime/native/index';
+import { Native } from '../../../src/runtime/native';
 
 /**
  * hippy-input-element.ts unit test case
@@ -62,20 +62,6 @@ describe('runtime/element/hippy-input-element', () => {
     expect(callUIFunctionSpy).toHaveBeenCalled();
   });
 
-  it('should invoke callUIFunction when show input menu of the input element.', () => {
-    const callUIFunctionSpy = jest.spyOn(Native, 'callUIFunction');
-    const hippyInputElement = new HippyInputElement('input');
-    hippyInputElement.showInputMenu();
-    expect(callUIFunctionSpy).toHaveBeenCalled();
-  });
-
-  it('should invoke callUIFunction when hide input menu of the input element.', () => {
-    const callUIFunctionSpy = jest.spyOn(Native, 'callUIFunction');
-    const hippyInputElement = new HippyInputElement('input');
-    hippyInputElement.hideInputMenu();
-    expect(callUIFunctionSpy).toHaveBeenCalled();
-  });
-
   it('setText method should work correct.', () => {
     const hippyInputElement = new HippyInputElement('input');
     hippyInputElement.setText('hello');
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-input-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-input-element.ts
index 30b074b05dd..07e3e24b687 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-input-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-input-element.ts
@@ -28,22 +28,6 @@ import { HippyElement } from './hippy-element';
  * @public
  */
 export class HippyInputElement extends HippyElement {
-  /**
-   * show input menu
-   * @deprecated
-   */
-  public showInputMenu(): void {
-    // noop
-  }
-
-  /**
-   * hide input menu
-   * @deprecated
-   */
-  public hideInputMenu(): void {
-    // noop
-  }
-
   /**
    * set text content of input element
    *
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts b/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
index f4b3406681d..56291434bf5 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/websocket/websocket.ts
@@ -284,4 +284,5 @@ class WebSocket {
 }
 
 // assign websocket to global
+// @ts-ignore
 global.WebSocket = WebSocket;

From 1be327bdca297c3bfc9ae6477813e6a72664373b Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Tue, 26 Sep 2023 10:57:32 +0800
Subject: [PATCH 03/10] feat(vue-next): optimize build file types & update doc

---
 .../examples/hippy-vue-next-demo/src/main-native.ts   |  1 +
 driver/js/examples/hippy-vue-next-ssr-demo/README.md  |  4 ++--
 driver/js/scripts/vue-next-configs.js                 | 11 ++++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-demo/src/main-native.ts b/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
index 69a3e0c7e3a..89e0db5e097 100644
--- a/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
+++ b/driver/js/examples/hippy-vue-next-demo/src/main-native.ts
@@ -34,6 +34,7 @@ const app: HippyApp = createApp(App, {
       backgroundColor: 4283416717,
 
       // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
+      // background image of status bar, scale with wrapper size
       // backgroundImage: 'https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png',
     },
   },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/README.md b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
index d21b211e7a4..77dccfdfd48 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/README.md
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/README.md
@@ -14,14 +14,14 @@ how to use.
 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.
+2. Then run `cd examples/hippy-vue-next-ssr-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`.
+ensure you were at `examples/hippy-vue-next-ssr-demo`.
 
 #### Development
 
diff --git a/driver/js/scripts/vue-next-configs.js b/driver/js/scripts/vue-next-configs.js
index 05a5a8850b0..46d189091f4 100644
--- a/driver/js/scripts/vue-next-configs.js
+++ b/driver/js/scripts/vue-next-configs.js
@@ -160,7 +160,16 @@ function genConfig(name) {
             plugins: [
               // only deal with d.ts，ignore js
               // do not transform external npm package path in d.ts
-              { transform: 'typescript-transform-paths', afterDeclarations: true, exclude: ['**/@vue/runtime-core/**'] },
+              {
+                transform: 'typescript-transform-paths',
+                afterDeclarations: true,
+                exclude: [
+                  '**/@vue/runtime-core/**',
+                  '**/@vue/compiler-dom/**',
+                  '**/@vue/server-renderer/**',
+                  '**/@vue/shared/**',
+                ],
+              },
             ],
           },
         },

From 7f310ee0fea560d95ac72cf47e049b3f5f2961a7 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Tue, 26 Sep 2023 14:59:47 +0800
Subject: [PATCH 04/10] feat(vue-next): ssr support commit for library & demo

---
 .../hippy-vue-next-ssr-demo/package.json      |   6 +-
 .../hippy-vue-next-ssr-demo/src/app.vue       | 233 +++++++
 .../src/assets/defaultSource.jpg              | Bin 0 -> 42281 bytes
 .../src/assets/hippyLogoWhite.png             | Bin 0 -> 24639 bytes
 .../src/assets/logo.png                       | Bin 0 -> 6849 bytes
 .../hippy-vue-next-ssr-demo/src/back-icon.png | Bin 0 -> 2166 bytes
 .../src/components/demo/demo-button.vue       | 130 ++++
 .../src/components/demo/demo-div.vue          | 343 ++++++++++
 .../components/demo/demo-dynamicimport.vue    | 101 +++
 .../src/components/demo/demo-iframe.vue       | 125 ++++
 .../src/components/demo/demo-img.vue          | 164 +++++
 .../src/components/demo/demo-input.vue        | 268 ++++++++
 .../src/components/demo/demo-list.vue         | 322 ++++++++++
 .../src/components/demo/demo-p.vue            | 557 +++++++++++++++++
 .../src/components/demo/demo-ripple-div.vue   |  99 +++
 .../components/demo/demo-set-native-props.vue | 126 ++++
 .../src/components/demo/demo-shadow.vue       | 204 ++++++
 .../src/components/demo/demo-textarea.vue     | 129 ++++
 .../src/components/demo/demo-turbo.vue        | 130 ++++
 .../src/components/demo/demo-websocket.vue    | 201 ++++++
 .../src/components/demo/demoTurbo.ts          |  29 +
 .../dynamicImport/async-component-http.vue    |  36 ++
 .../dynamicImport/async-component-local.vue   |  33 +
 .../src/components/demo/index.ts              |  65 ++
 .../src/components/list-items/index.ts        |   5 +
 .../src/components/list-items/mock.ts         |  43 ++
 .../src/components/list-items/style1.vue      |  38 ++
 .../src/components/list-items/style2.vue      |  38 ++
 .../src/components/list-items/style5.vue      |  36 ++
 .../native-demo/animations/color-change.vue   | 104 ++++
 .../native-demo/animations/cubic-bezier.vue   | 100 +++
 .../native-demo/animations/down-vote-face.png | Bin 0 -> 341 bytes
 .../native-demo/animations/loop.vue           | 135 ++++
 .../native-demo/animations/up-vote-eye.png    | Bin 0 -> 333 bytes
 .../native-demo/animations/up-vote-mouth.png  | Bin 0 -> 598 bytes
 .../native-demo/animations/vote-down.vue      | 197 ++++++
 .../native-demo/animations/vote-up.vue        | 196 ++++++
 .../components/native-demo/demo-animation.vue | 196 ++++++
 .../components/native-demo/demo-dialog.vue    | 221 +++++++
 .../native-demo/demo-nested-scroll.vue        | 153 +++++
 .../native-demo/demo-pull-header-footer.vue   | 409 ++++++++++++
 .../components/native-demo/demo-swiper.vue    | 179 ++++++
 .../native-demo/demo-vue-native.vue           | 585 ++++++++++++++++++
 .../components/native-demo/demo-waterfall.vue | 295 +++++++++
 .../src/components/native-demo/index.ts       |  45 ++
 .../hippy-vue-next-ssr-demo/src/env.ts        |  19 +
 .../hippy-vue-next-ssr-demo/src/extend.ts     |  28 +
 .../src/main-native.ts                        | 100 +++
 .../src/main-server.ts                        |  56 ++
 .../hippy-vue-next-ssr-demo/src/main-web.ts   |  22 +
 .../hippy-vue-next-ssr-demo/src/main.ts       | 150 +++++
 .../src/pages/menu.vue                        | 141 +++++
 .../src/pages/remote-debug.vue                | 162 +++++
 .../hippy-vue-next-ssr-demo/src/routes.ts     |  38 ++
 .../src/ssr-node-ops.ts                       | 523 ++++++++++++++++
 .../hippy-vue-next-ssr-demo/src/store.ts      |  24 +
 .../hippy-vue-next-ssr-demo/src/util.ts       |  60 ++
 .../src/webpack-plugin.ts                     |  30 +
 .../src/transforms/ssrTransformElement.ts     |  70 +--
 .../src/render-vnode.ts                       |   9 -
 .../src/renderer.ts                           |  60 --
 61 files changed, 7631 insertions(+), 137 deletions(-)
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/assets/defaultSource.jpg
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/assets/hippyLogoWhite.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/assets/logo.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/back-icon.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-button.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-dynamicimport.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-input.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-ripple-div.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-turbo.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demoTurbo.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-http.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-local.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/index.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/index.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/mock.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style1.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style2.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style5.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/down-vote-face.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-eye.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-mouth.png
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-down.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-up.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-animation.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/index.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/extend.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/main-web.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/pages/menu.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/pages/remote-debug.vue
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/routes.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/store.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/util.ts
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/package.json b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
index 252da99ea5a..bd63f3d9a11 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/package.json
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
@@ -1,13 +1,13 @@
 {
   "name": "hippy-vue-next-demo",
-  "version": "2.0.0",
-  "description": "A Demo Example For Hippy-Vue-Next Library To Show.",
+  "version": "3.0.0",
+  "description": "A SSR Demo Example For Hippy-Vue-Next Library To Show.",
   "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",
+  "ssrMain": "./src/main.ts",
   "repository": "https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo",
   "license": "Apache-2.0",
   "author": "OpenHippy Team",
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
new file mode 100644
index 00000000000..4035c0b6008
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
@@ -0,0 +1,233 @@
+<template>
+  <div id="root">
+    <div id="header">
+      <div class="left-title">
+        <img
+          v-show="!['/', '/debug', '/remote-debug'].includes(currentRoute.path)"
+          id="back-btn"
+          :src="backButtonImg"
+          @click="goBack"
+        >
+        <label
+          v-if="['/', '/debug', '/remote-debug'].includes(currentRoute.path)"
+          class="title"
+        >Hippy Vue Next</label>
+      </div>
+      <label
+        class="title"
+      >{{ subTitle }}</label>
+    </div>
+    <div
+      class="body-container"
+      @click.stop="() => {}"
+    >
+      <!--  if you don't need keep-alive, just use '<router-view  />' -->
+      <router-view v-slot="{ Component, route }">
+        <keep-alive>
+          <component
+            :is="Component"
+            :key="route.path"
+          />
+        </keep-alive>
+      </router-view>
+    </div>
+    <div class="bottom-tabs">
+      <div
+        v-for="(tab, i) in tabs"
+        :key="'tab-' + i"
+        :class="['bottom-tab', i === activatedTab ? 'activated' : '']"
+        @click.stop="navigateTo(tab, i)"
+      >
+        <span class="bottom-tab-text">
+          {{ tab.text }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from '@vue/runtime-core';
+import { useRoute, useRouter } from 'vue-router';
+
+import backButtonImg from './back-icon.png';
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    const subTitle = ref('');
+    const activatedTab = ref(0);
+    const tabs = ref([
+      {
+        text: 'API',
+        path: '/',
+      },
+      {
+        text: '调试',
+        path: '/remote-debug',
+      },
+    ]);
+
+    /**
+       * go back
+       */
+    const goBack = () => {
+      router.back();
+    };
+
+    /**
+       * navigator to target tab
+       */
+    const navigateTo = (tab, i) => {
+      if (i === activatedTab.value) {
+        return;
+      }
+
+      // change tab
+      activatedTab.value = i;
+
+      // replace to target path
+      router.replace({
+        path: tab.path,
+      });
+    };
+
+    return {
+      activatedTab,
+      backButtonImg,
+      currentRoute: route,
+      subTitle,
+      tabs,
+      goBack,
+      navigateTo,
+    };
+  },
+  watch: {
+    $route(to) {
+      if (to.name === undefined) {
+        this.subTitle = '';
+        return;
+      }
+      this.subTitle = to.name;
+    },
+  },
+});
+</script>
+<style>
+#root {
+  flex: 1;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+}
+#header {
+  height: 60px;
+  background-color: #40b883;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-horizontal: 10px;
+}
+#root .left-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+#root #back-btn {
+  height: 20px;
+  width: 24px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+#root .body-container {
+  flex: 1;
+}
+.row {
+  flex-direction: row;
+}
+.column {
+  flex-direction: column;
+}
+.center {
+  justify-content: center;
+  align-content: center;
+}
+.fullscreen {
+  flex: 1;
+}
+.row {
+  flex-direction: row;
+}
+.column {
+  flex-direction: column;
+}
+.center {
+  justify-content: center;
+  align-content: center;
+}
+.fullscreen {
+  flex: 1;
+}
+.toolbar {
+  display: flex;
+  height: 40px;
+  flex-direction: row;
+}
+.toolbar .toolbar-btn {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  margin: 3px;
+  border-style: solid;
+  border-color: blue;
+  border-width: 1px;
+}
+.toolbar .toolbar-btn p,
+.toolbar .toolbar-btn span {
+  justify-content: center;
+  text-align: center;
+}
+.toolbar .toolbar-text {
+  line-height: 40px;
+}
+.title {
+  font-size: 20px;
+  line-height: 60px;
+  margin-left: 5px;
+  margin-right: 10px;
+  font-weight: bold;
+  background-color: #40b883;
+  color: #ffffff;
+}
+.feature-content {
+  background-color: #fff;
+}
+.bottom-tabs {
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-top-width: 1px;
+  border-style: solid;
+  border-top-color: #eee;
+}
+.bottom-tab {
+  height: 48px;
+  flex: 1;
+  font-size: 16px;
+  color: #242424;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.bottom-tab.activated .bottom-tab-text {
+  color: #4c9afa;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/defaultSource.jpg b/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/defaultSource.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..833417ea2fb9732e462397b44094599e2b96a56d
GIT binary patch
literal 42281
zcmbTdV{~L;+b&pfI<{>a9dvBlHY+x|(=j`?IyNe{ZQC|G#^inHoNvvXwdT(}^{3X}
zwd&css;;^(-1q15=QaREMnYNw00ssCfPFmxpKAb70L*{axBuVkvj>0*3uXsS00BS+
zfT04wQ30R*fXS~dAR)f?_@4z00SN^I00V~w1As&P=Mw&BK|p>ThJpqMd>#IOo%nhk
zBos8t*I7t#C`dRY7-;CPHwA!$K>#38(V$47(aBiZ$c06eF)-Oxj7^-J13)ko9HK72
z<KqA3)%NsWV^OM_x(3d2i6!*S>{4;6<=5TrhzHH>nHBV-eqF}bu8`p1U{L?}reNR@
zsA!Prq^!bZZ0sT!qU6fPP%0))0l#ZMR{;nRUpIsbP6`kN+<6a#V;l=Uv_XGxHYb^N
z<V7M-sl$=WkPUDYnxtP~k+^2$1(pPKTKx*A5IW=-OvxERp<}S+miLYd=7-PnKPK?$
zk)!qEdWZOzkNwJFT<GcYJ%*?cSZbF&0)Af+u_K+Pm>n}dIu6mBcPHP@jV1JxI|Oem
znAc3d{}Vu?t(VQ<08@)lWHHAS8m)fU)EDCl`9aLc5i&OcQL2#cNsjB!KDQq9ATl!&
zWg>~h;{l1J9m*r{2_T6Pfbp4P0=?B0tmWp3K93?<!g)!!qNN)xG@vU)kiEzHjV$jU
zVa|~=Bqo<<UqQmnvGb-ktl{x!=ZocGO?kKFiHG!TMu(Nl9Lbb~Z_8+~dd=VHL&Mg~
zJkfQ+61WR=Kx@JOLBeIb6oYWG`C#TSY7=3bYX*`4wRRz5etP&=9;U#(9iQxt?{{*G
zQi0|`8l_?Gvc4&j#eMk0S%^oOi`Kr$JwC;613`DKP6(_!#Ip$WjFl!AKOZg!oqQ$U
zf7z)>U%0GppAS~MBod|-HFnze9f|TMjvQwu{48Lr;xfA9FOJx@BX)JT5lKtVy;8_Z
zi|t)?R-biP1FO4HJoT)NVg!tu#wSFVv%|(u>EwH~w|oNjLR+eIcbKDD_T-J+3<6CR
zNJqRmR-S7JHizUTmQO$GyMGWBAmpB$0KnZ&fKnrxT3hJMzT|%Qd}GeD2OJpM@1*qj
z8h<nnYg^CtYuCpjk0kl{S|fvZ53s%k6_mqdpC~$uHB<ok*rdhGK;#4rdeFe=5HZA}
zr&5$tHhl32R^2mniBpvphY09_DJ&t2SnFis-+IgOa`N}u_CIgMag`Ovchf~a+E5&W
zew+jt;P=Hp)h5TftyohfI6{d9`AUlY%h8h{fuA&~5(I5_pCf(H(_o9!d>^1pc0uf2
z#-pmOof?iszZA5P(M60;23yrPeN|f}Ybg2YV9B(nX^~-`$Gt9*(fmN)gw@@@$?t#$
zSw_#eIMyngGXrnd`c!i79s*Net?)yY|AS71K9YI@9y!%;gLtJCdH|*f+Va=r`sS2z
zi^EZ8s6g1qP$oG%Ckj{FJF34}ge&o@e&8nnZ(WyYQal809>lzY$-?O#iDoo2om=H3
zzp!Bv*xGMfuT_ea$6C0728l}3n4q5LO}1R><o^>s#;-=OnLZefqD{d0Wt#6jH131_
zQo?uVpQ#?1SGPm!=HKfU=1yMRPHrX=F77`jI2s9x?tJ^?RhKqRFvGQz0~xke%T3)0
z2y-Kv%J?}B8ioxHp?5bC1jT4aT?j1pE7pri&mIBuwVpEYwx0mPxV1CJ7+fX-d<r@S
zOaTS+AWy~k$;^+X)SH8ckr$Gs%T?&a1^6G+l(`~XF#Xjtkn*M0*5O6#T*s{)dpdN_
zB&rqCyKa|uMMAC|%4&KuDiLu8@_3Adc!oAF{_|23leCrlf%~n{FwJECB^hIRN98zh
zWM<!*)M@ghWEUy5+`ge%eK3D_nT@Z;>Zo+ot&j}|Dco1Jg?2_-^uP7Z)}<@b?J+%m
zo6wCWcD;=3+j`f+GL5L+7o26Fx3&0yb8SEp-+5a8<!)W)wLMPIG7-3<f7VJ=9`mt_
z!!CsLf#P1Yrm(SRM?l}-$^w6XP_)q-s9n)yz-J%)VCEzCW1lf#CP{k2_>wDZSLaN;
z_s&Q7UDIp2|1>rMEz7HFuC9M&w60d{xewy|Bc@nte~sQulP)TwwrlT{Pt-Q9$Q(J_
zU@c$1oBqitlG99na3wq`BbE2oinnP-Ki_p_=sKE{HGZ#LkQyk&RlZ+>a|(rx98as}
zK!sTwsWegEj4KX;3|b6vP{)CtkC9@8|MmBrQ4$$vo;UCAAxE?>-uQ9(eUpq6givxH
z7rqyWE%oH|Rz4@P0ql^r!Ej8raW<ifuKAsr-3hpc+^aJT!kyY<tgV?`DOSwm;_)%m
zv><ndZ+)$UEZCttY=5Q>;Mbbcmoox}G3zWb+)7PUzSE+@+wU>;_l)i%NwPh~Mai`^
z(nmrzV)cPWV_uCPu5Qk4h=d@|>d=AfHWK1sj|?Qe_kK(3gnl{%F<F$8RJ|@lNz>aP
z{hlHb#y`Vh;jmll9p1&PNnDQ4DMEe+6MrZW_{aY2&c*DY58tjMvF(}AWRN1Nl_{G<
z4F@!AVL|btzE}2q0-}K&L!en)v6>3=LbAYmtpvodg$--Wd{_54d0?$PO>m+-ZoW;6
z*tC^cUJvDKG6P+v!=JrO1k|2r6(vj;HOCpcPTm<3j}ta}yx|PF+PYo}N&+s}{tZ-m
z{(-3NHnw@3LFSO%_#tEH#(h$V%gil2UR>s57nNW7+zA=B#F;*7hm}KINSidG_~qT-
zsYb9e?xrfqUGzz2@P?!p=t(2S$9O6F23O1S7z^?uBHEI8_V_9rrR!WD3|^EA>~_$!
zd>ra3zm=-2UU>>sAO}yp1y4mERoFjRSV#|oz~$mp5<{uhid9soNZ5Rp6C%y<U^4CN
z7&8QpNySv+h3N`NIEH}}8f9T|+H^AOqyG9S!VZwP_vHr7y%|AIFx2!X!o+#3Nj48y
z^<2ekVAl>17sRqPBSB?_z=`k8rj(lOsXl|i!03WA<GC{K@0?Suc4w9EI~cBBK>b4;
z1p?A2nGB@$U)P&+rDdrO%qv+1KgU)Avih4p0fVqSf13V$0w^HJ#;`Hdsp|72)O)Zq
z>a<|4qOmGo3>PrN!Zh_``zQ9TyB+)2_oEp-Wd-m)0V&8Tm$uW{aC6b7Pb#>yRF!8+
z307Q4*t_c8g0toip@VNMOc-x64Ls2QbPnN_4y*PWc&MEp7u(X_mXFV!FWCkL^~PXa
zr_)_(S3x~3ffHQ(BE)zzL2PX_EJMmZUI9OmpGdTHs<mdZ*Vt_A`AEwXfsfNNci4jI
zN(;cSV$p$wSvIc}sKIQr%Hveviledb*xqs7VO!ZV8e(7tWim&CC$C)?UZg2mAf|~G
zrwbM#)p0;`KzJv~LP-tE><`vH4!;IbC&IM6)o#^~BQIRrspiY1-PE^%sph<iHH3)D
zfR8IYD06qjT1_+q6$PVa-6Z(8K19RaV9e{PBPU5JJzaO`Fb)N8bM?DmG~8;lhg6(c
zP*oXIg*x;Vu4;8>B&G)oKufN@&q`;=!oZg49<@Dh)i3C{VtzL=LEX6Q`gLdER(68G
z+LkwpNw{VOdax(><MbWncG-4rnW0>dXf5?eHEW4OFJFT5ce~6my^^3^w7fJ*X{-7b
z1&2teN;0&DhFkaQ+a*+T#MKOQ*%Xd&cXfBG$jVc=*<)^kH81zDT8C%XNrPKQk~^;S
z(}L@KlNn{NKqd@)f-BJK?>KSstdcJvqQG%bziR)ta@qeei#R}(L1is9j!FeFsMYDi
ziQ}%Tx_!aWrWT@rCLpCBNh%NAra}BxqW+}REm$!+{>-0e1N?UOJJTE@^;J~YrO>5K
z;d?@yk34n!YwpjROc>&pMwMHUtTd+5F0HLfgtb-8f<wm@uWfxFBN^$2S;FZ-WYb8x
zn!%2kn&<NMq*nDQ?3N1b*h#mf%!hDOE!7hrnL8TkQO<^`yT87v`kr@4eu;VuV@5xF
zbDo_hdTy)D1uMm6=rjn!v(W3sP`Ln$dG%VYDXsqEG<Vk9Vu5NYClEz&T5v<rC{aLy
zTe+9rJ2_X8INtHU#Tnuv$~t)r@Z*f{)b+lq>IU8i^Jx-nL;9M<#-=}Ap`_3GXZ{rt
zveZ{%fR1*g%3inAU1Rf^1M85FfW{zQ%05CH{<YV_CLM=53cUvA^P-0jUrVyoxH^&Z
z&ZN<R<x3Fo+A%Z<u@jjMef$i4&w2kadAQBdj<tSc&2Rjp0vTQ%atB{^j=;$3F3ax?
zBM=c|U?X+VEImCxy~Cn%_cD*mvHK1mZ)(;(#1cuaYOT%OS1Xg&r94kNnR1EI%BFn@
zf_ch^keW;o)6m+;!1Sjb*%{Fug>l$+hMv(c`MLf8Bb%!1K2ZaWzp`!4w+fH!Pt>0N
zw6Hx7RO!>SmJmcFu5#EKKOK&2Fh`H`cG508gF?Rh4<C>scuALJi7Mx=Ybq^}-N%lK
z&5ByZam20*EtnL6SIxcC<@BsTQ_S|dNy)EXAZILq9}=5RO|{>TmF*QN;FiUq(v_7B
z02kzWTToYt87#bqM8*1DwO6HUe~%r#Z#3(j{#^+OWJ3$Dc*pY{!M1U0(}>(GuszN0
z{2LO(&a{Y2TPZA{V)f7!*9WyTlElr;iwIr2gr;8=;q#hp`*Q)RV{X+iA|G9DM^jVH
zs&Le+CR@<^@o9`Ve>r}CA&+-x$aVrq=p1Zu(_+o}!?2OKxqW$vQ$b1l`6TTzD4SEi
zHkTUCvNe`)>>{+>l>?>bUU9wdcv(tWnBp1RNbd0^;qY2QbOO(d320oloz7Qg){r6X
z=#B2!qgw5TjVh4`%^*ZOU43DI`eysn7nuEI-T```N&J4m6pWiXJwu7=AucPc!D4Au
zE5Go?`P9QklF0^+sdQBG9KumXQn33G$@Xjgamra;D-T|G#cnOZVh+gz$WEcGuL>2j
zYxvUhJ81g~Zy0`rWVextV4~?Y{^X;??0t(LZ&U*w&w;MsFH)P=6#j6==o(&sRB)%D
z5iE?d8&|Q|4^B>!wEgA`W*ApRLo7H8nHH1dia4R>EPoKX^`W@Gg56;2E@1WL)ddNw
zr5XLR;G^K{WN`7c`#E|(;*nmwk0yQx#>rYO8-ZA}&?<0H^@O{_HAAPY>enLtDp4aV
z0dh>B3m2y}uv^dovrfydtPm5$vO5uDXqj!0isStj?SowJWy^e`SWC{GL{A81)MW;{
z=SQ3h7Mt3F3BD`toP@C=a~ZX0!i<;fR|mG6XkkB;2@bQia)8HJv+@$R;D}G|z{yQH
zYOrPA)SqD*_u-y*8zs>k*?XBHbwimz36gf`WT4GiKJI5367u;OoP>5^-lS^V%yX0f
zy(7Ar9-}vl+n`y(zHR+VCk?SGGL!mk*fc)ndrbHU+h(jx^IVCsB;8zl#*UKyMK#XH
zwY#z0WCUXUKN(ec>p`gureP%T8wHqOOPXviayE4Hd)_n3O?t4uPt|GF70{oXL~Fgy
zkJ1M_(3ab4c<2MaPtle`zr7p!icWxy=l0>NUlf6D9-K;eT9^sRm!r!yXCNW@iBH{Q
zxDtfC;Cfn<Hh7_M&DdP&R@?w%EYU9e>n-4pG$|Fu@I%hCRaiz1@S>q9w16ZI>GWEN
z;vr%P5sMH!yT5}T6b<yN`JZ<z6&KXP=&GdEE78K$Bg4|prL)LO%8_QyW>Tnth{l)@
zOc)q?FS!eO8ePWz3H4h>piK=M`=IJu-jik05UT`SIeE;zenid1P$v@?^U;J^63cq2
zHL|ef@n8E~Ay-A;(o*Ak1Rk&hM!zpZt*-o9)Cn%TR4UtfEh^sZEIPq;ir;v?GjjhI
zT~3bcYsPZUu!+g2>x*$?Vru1sF+h~neK6JXYJXjW>5~;LDn&wZJyJR+uf@oB8D(kw
z*gb^QU07&9=$s#HgJlg$E9Mp){B5V`fAp6_COwoU3+v>T!sYx#-c-JHCqbiZtJHbT
zcX`Y}YnE0!+0iSXau>aYX|2{ejT*B>SgV*UeK?@`m*U@_tL@}Ziys5gd(U*buaxJg
zdVe1=Fh!!q@m2Da12exZkh4QC<$DZ@dJHs_?;`57GDd5V<A)K@?RQEw_JRh{EuYID
zyOEBdANhX5`nSW5;bTA26Dj{QakM@J9~YR+Gj5B2ZSu`>njU#@F?pnCr06F~n6=)u
zp0oNlmKq=Ba>M6-FK6uiGfXxQayn|v@3B*qIQGw8OhJ7HWPgUP{`?P{bH2KXJO6s(
z90eVMatDRoiFQw;!_Z;u6}ao4bkCbcLn&)Oe-GiSgCvCX3n4WWjy6H`%jl58{i33D
zYJB;zcwj4FPK4d8MOax)M_DDJ92+qPRA2ArSCNB#9z{bduC4~QS=z9TgD;tiMzVdE
z4JN3;GNRJQ@m7Ai$AoY0e2rOiO4d$KO#3_{LA568VzBXtyS5?6^=eOCYAW9aPoCnH
ziEEpitFk3~nW(NKz=9<ozw15}e#%t4?-Q`rh8bM)rJXemz{@Rt(ugKpo@=L_{DzH1
zUml@H_!7FFCee2{_*v@Y4rWc^Q8kk0C4-V6D=G4bktMD$!i<50wxybm>yfo%+ONgv
z8lQlP$Ekxp>4F=~AMWt|P|KBm(*$J<QSv(%MR0Q?S623|0uE9pHGus-v^x<8+3yq$
z`b8<W&(Sx&JE2W2T&UAyp8y$y&aA1sMDqUDYewtri{sypCkI?1DmEPW1zP50(0gnI
z1$xlC`>f=onKz=N(Q_x{S^a6|t$JcR>b@v&zL9=P@u_A7k=&|Uw-J@rPGnE$sm7~&
zVW$TThn6CD3DIM+vd#Z!LQG9<8@dUUGq{pYT?&}cLCymX==LxCwUh5L`}oWCZ3wxz
zwi~Fj+V)<gPbw#Une#jnE-rPR*{~P=8SErv%X#odSl7=r0>%%-J5Pp|Mz^5D#@nel
zul7vExZlt<Cj_)L4e0x;PaQO-@qajClExCpD-!G@Hg~JJ7LR2gT5ZqSlY0VMaJekp
zTdYH^XLfAxmJb`^<#0IY5WvkOdz1ehP5h4SwM0ou^n)|*cRkKb_1MaOVYf|BGH4}b
zbp<7rkr{1i`Vb5m<zrUc774)arr%-Zw3x-)j9J!>!!6UPD@S6KlR@u-2?T!vY_9+8
z>Avo{{ufGTPshz!gTl&s`Bd(~QsX_l`uZ4)qzt-*>L$<{Bo5yLS_fb+4?M(()U(;N
zKLH$nt+hfBY?t$|L(jTzaa0SRc6ZRwVlrD|GkPh-%Se{X)wG6?{Zf(*+H!Fwe+2I`
z;DjSJkH8AeFi#S9YBE}(&&d-F__%O$u^sLqW$hX_Ox%mi51wvTHB@ofP&yt>#)*Cc
z6jIamjgDreCeqtD_6V|j%^kA`ohN+%p22ipIwBG6F{=5#Udm_J#4#29JVT<cD?^zL
z&ek62Ki%NK*qNx`%VoMonX#(Zo1w)IqYSPXYaG@31_GzaIm7fWCY(_{=h&|7r9TcR
zBkNAWPaff!f!UWLTr8;!sP{N*+qSqBoVi!&qf(~L8cDai{wINJZu}#J+bh2!0g`^B
za88%`CgU>t6A+HvGHi_Fa=tqYv}>Jg_tJ>i*+8w*Qh8@aZTke25Pw)1GB=3Fg-_yp
z%ahX`2mS@t5agW!8Z6PlfRWVKZ{kA%#bOiRCZ+p@ozJ@Xx%%FQxccm915Js0*#!<S
zd+xbN4QPGIHz*y!C9Ps@Twlr);e#Hf?*N9$CKk#V158-)bMgs<+0R`0`3?PH1F$nu
z80*mM9m#{Y;)?-ZOS;w`1uWT`7OahIvn>(Zg^rJqcg-Z<6-uQJ&5GpG*sZP%r#_}f
zMcxtmHEf9&n`hx$6BhBUhtlmmN(}7ivus3G(hM|b9)+9DoMS^&uKU9%<2Vtd)}fP0
z%*g_sgu`l$J3WV0y-lv!BkL^=E9`w74t~w3yK%>q#gwVp%g~`0_8TaaaI+F=Y7`by
zSzaG@(@E5sX`(#^{4<GSnuSKMNwsQ81sm~>Bc*RGsV=DTDqT_sXleux%{&_={R1tP
zBw+To!2mSY$l4FV51u+Jh?d`Bm$+5WS+`Sq3&S>{p--agJ~R>J5XVku(0K~<am94Y
zFH;&bx2{ZkQMFw_sljth8SziDk(!922b54pzjjqg2^8#0wY4p&G#SkX$Nc_Pp7$-D
zA41CS-7)>;W=an^yUEpCpchj`>|i-w4caOFqwP`vWm)OU@}nSE`ijvzws!6*Egub?
zcVPb?ll_0_qai2hj}Sql*bIiO;2A;c=$qV;lBYtvF#IqmJnZ-KUcqRGtLVA?Qit=D
z>ioRj>l1ReCF@oaH?5-6vvk_ZqT^`SNZeceFiv1C1X=n88f{q{&P1O<v6|{h1yd;k
zadW+3C)+*gCqNCEI)SnyLG>R;&JDyTAZi<0RV8|Zo2i7RumTuS+5!x*pGA-9*v!Wg
zU!2n+lT~n_4#DfWX<-Yz(MRra5@K}C_xPCUl;61aSMgmi4EMq3V|V~bnCxS=X`Jfl
z`%2f{{k2Q|0lz!(p7Tn_buDAm2CX66Or?){=``MVIeZ36!`2``JCXC2M$JZdj`(Gw
zHmp*AOF>k}ir0%3lds3+FJh$eZ(-isdiI}@N3C!EQ8(r{q4+p8UPFL_OeYSJ!I@@F
zOQ#j;P%Cd&xdr<Pb~(ma=o$t0mYN!cI>L<ej@0Sg>YZ;!W;w&;DF5_n7Hx8Wct_-r
zL#xM^=Sp{KDyC2$zp6>^Be%JKio?G}eU-_?y?z<w!fQo0XrA?hG0qc%5z9T~X3>NF
zv8^FaE2@+lw%6$`QJUDL>XI`MMLjRIVyt;SLlwFjV9UTxX!^HyOBZb1*H%($Qhx=p
z7;lYFQcHx~ubnjpf1ND=N%;Y1e>^b$5@-*DEcsqL>+~$XM}5H$%f9W9jxl<YyN4@w
z{s!ab`~@se{6ze)of!L^){Lq>T?<Kp$PK|m44zuT0}k9Gyjdi<;TCQ#1be4yjK-g9
zu$Hbfw&S$)g=)p>?BWW|f{2Ug6NFNIG<~ud_?0Hx-1xs{`w{yQA`r!G@J}P)&{uGq
z^!xDvvcriN7>aP+^ta3}+wA1|>)DM~t=u*{**XM0O7!xwvZqP_$e4msD@RDX97{Z@
z?Nhupk^MoQE=z}n{`TRZSesZ#0NSJ8venOuPFF!i(<Ibr6Sk@CqY|$nhBWw%#>LBG
zF`r>V5LbzI$fN^gd}Gtu;rE{@V7h<35DC)VXT3Q6c|HNjf(w{W&xjKxDbnlCvdHmR
zVL=(P4pB>+{LloFhc&oHt8Ts7KPR_sa6sbM@A%wSE>K37b%l6EWLFqtveLu+zn97E
z?kEQhsphebJ*qBH4TQHin-6*CmWRLXB#5XL6;6Smmy+wNq|^9myU7`?>-PekDT{Xx
zX0L#OelkTSxF!EjTKKdfAd~zt;{8sZyL){}Ta^bbhBW7@oS$E?fq@?}&5eOC6>ZNw
zplDpG^B$K#H?F4<c|GvhdtJ(aVQ-}Fway&>FG{a(g5pbz(PHU%Uy|+^B-O^?reRti
z&y4aXFyf@L9iQhAA076kSp_rI!{Ei9H&MRQfL${-PICTgQ31C#*$>`>>*LETX_~D{
z*4Alzi_?5MxADo%=3N6C2Y7}%LroBTpg-`jxA#PifyU?3YlLL-rd7hBI!rA8mRir1
zK}pl!3Qd)HRbkxuA2Ya1jwty7ta6fm8Mf9UXoJ>+ItgyIS|=0AElVCH7eSu@>J^+}
zn+MDw*uD*Xl5^aEG6yEtE0a_L9y)>3-x)m71q4tj6E8FKgWJ^Faq02cD6l?^ol02i
z$38<DM-mmZ8-$VHkxqcbHlG0RPXHV0<T1|PZ^Dk=hzy-G;D>0J1{KymoQbD&>sb?t
zJk+FJ%Sb1mK6cl;;}k=PH#5Z;o-mbtTBz$j5x!pD??bwjZ-1ie4trY``&s550vqJ_
zQ{08Tivits5v_^@Iq~xPtA{S))}ygU^X<~eB;<oxN&begkc_gw=YSCAv*-qdX7IFw
z-@CEx9MPxpPbF9&F~&y#&40N5=3t{Zyxp7T9<a|~D$X|97dvSk-XOKpYgo2c=OOnd
zuy&BfoN!8|L(lozkZ@z+qOj3<LyOzsVwRW*!#T*p|9iz%xAR%}j(qXONO1%_u#-}N
zb3a^?A6bsQrsuLyx%t=ygSiT4(v?twEr<aNolv%wIuTAa21_!l<c>9)lE*<=bf+dj
zcgG9IaC-yD6+5H$-ix3Xj{PFQPV;Kz9jX1MLpk<8%lwc2X7Z?@#J|nt4vk*z48o4+
zWEKwS@+yQqOj{R(g`a>i8{`gf&oRbb`<))|<qP-Mi&V)6UU-W3`arbY>GRD`0Gytt
z&N@%Ss9klweO&u?&BoBws6!-JX%>ZfieJITbFMA&7*3~px#Zt^)}c0ZEwxqqJUXx1
zDc49Racq{AKLIquUVju<okmc3b<2%9SX>ib%{B7=57zfM-}E56bb{R6&KI`03q4EX
z8Yl08@%4;CEo3*aAi}n6273f;W_pHh3`hSHfS?2_xc=$Vbd*yK(UL4c)wyIjDp1zH
z1D}Y>@#-BOa`|^-0eSy{$9hB6+N_7OAYoqpvL=|n&A+10wF@)0sLU*kZ-{H?1_Ri_
z^oK6L1=&p7BT$`>*&0nJhNA(mN?mRD_oUUqxQuUDq*(WdFXeh)H)kFb4};h;?h~m$
z(y66aB$4@p#X7cUT?npHkCTJ~skPNszxoTgckvI(QaxU0`*^2T&nDMg>II^QR;`k4
zlqCPBkl@1nF>U2)Uby#fIKzcL-=;6}kkLL|e$_kuX4|r%W?RkAFvOyvYw@*3jiZ#v
zCWEV{IHDm6;w!x|K4Q#O4B4Aq&RoxD0?GZTwyUxS+Lao#MR3~InGx((+HzzIKU6q%
zj@GQ(dm?N1Ds{R+F0T?hTvt4}b?x(H%0bXEo;3ceh7YU6ob*s2e81;E<nBxOw+Vj@
z{EBD4>qfXn-dFzqi6pDs&@fi%2t*q@@?F*pQKidG?}H&Hp;b|n8w2WkT&RAfxh#J-
zO0b8t9QAt=6HIGY35_nG?@y@4Vdxf!On{k<%z<1hOqGMcg{3bS5Gd4qf)O=YoA&G6
zg|bOIt)c74*UH5w$Jh_u8gDj_q(0p#VIjk|b~>nz*NIU&`?OQaGDwmY)|g5>q&!p0
zOlVzbiQmE-Mp?Kdceoi@@Rhvz+Jw{?#VK0cV?lHOOFEbq7c;<+2P!DcPpj$fY9i;1
z=wIuX0*R!JXJ^rFkJ}3eEz|XzjDS+y3+U10bS#So4{=i?SMG}&2nCK60_q`$g!NIg
zm#TMmJdsG;RC>v71<+7Iq&5)~o@<Wx)&mYc_@jEl2mSi7y_DHTLM_q(o%8g3+0(t3
zv1e6s3ds$9DlMK9nmKnfzgFZU$($Ao3$81jPP_5nP(35#2*dV%;g}+i6nBktJ1w=_
z5DLMtva)k|e7D$L>}2wj?gOk>7gB~AB_zZkg7=hR4jjCgJg_Z!=Zo}d(g<&IEx-Ma
zO&>WomyY7K?#6FH-#>#uX0w)HIA28NK>Fpu)?^vT^nxHxkLCXV4Jux#=+G~AXW|e>
zx#|#xAC=Y|(44!j<QfNo?W(Ho&nD~r=L)V%j-ej4XKb~%t3%L$HTFY1T{or(m7MN`
zWyfGUfJ(PQ?<v<4s;A<F3RjS6&tvs0C^?|8?PLjQi@9)0hupPJ_$Itv!o*uk{BV>0
z0&`6<87d+psZrhf$1hV)XT7)lWRI;Eu>*E*#*`64RGo<ROzE8fZSjut1Qxk5qX@dv
z3)A&Z=p6(6gIW+B^%iYXX&S0qSzqbJsgYfLrAkDOoE{=%sxxO5m?IDh-};~clMf-?
z2uBuRkBTZRwjPdCORk-T@)T$!q6x=fthNa&wcb^TDxhFBsBXKg)IG<!tN)=;@GH&e
z_(c;weJdU7iaVXQtjYn-E|XEU49RkM0;%K^(7$T?u`h673!9XdJZRQX8GC!uAfGhi
zttZHlmjNZI{h~ug`TmyjaS!pOqawp6a!we6>c#^KIe#597QmDX>UKnQug&*Z)~xJ#
z)%dktIl4Je2KRSipNYoU2eF(O3=LjKMYgm})vZs0^_K@(7XTwwFx3p`%ne-iZhu{8
zp9mOvW&outF=XS;ZcOv`kWK0ArMC;9ee>l5j)oe(9l9ahxUXI$!<koz%;yHc>2Ygc
zWoY^uw?YLys@-|IZ0`kewPRzu+}>wg=J4XmbDsN$z6gUfW{P>Lj-*uC=Jgf+ZZ^>|
zaQ69H9a1CY4L7op>wL)q+$r1|APpN08w0IAvvmsVA!kVtR!4lXx)H~-=DSrBF?6AO
z7!Gh?_l+E}Md?m!7BUhzvS9C--qC*ssDOLaXpk~3@(W-9@?0^lH}(ozDj9E(KxYW0
zV6r#0bv0P_G$Gt6A2hq0m^eUr4Q&d#hSJ#X4*2OL#K(WDpi{4Nv|keN_!)}1O(CKn
zBGG4u_A;k)0sqE&7=2E4#H&ZKpO|gqK{d|!iX}N_G{>$bSI`z-_AqwoC-Ju)oehVH
zn2I|#JgYyY<xyDm$9WBIki={oO-3b#%-eBGSXdf^En6$c4=)(s#l0jC&q!>;g*qOe
zkwJ*@Rbcd}anSIulGYw9QTrH=k*Bs}9t<;45DAb3{n+rK8uo*;tCL$XzOV~q&>gxi
z-*3koM%ZumU?$NfHcB(yACWxfBxiCNffP?$S$1$7{v*gky}4Mb?I;5CJu+ka%tijs
zRaE4gc%B5?vqRz*NQc?F;Df+V3K|n*yv|@PWrV&0_@6K8w8i^0{#0MF6+U>v1*Q<!
z3)HOau~-ts_r|i9QPw(ej}M)lMSZTJKit9?$I!NkgQaI{GW_R3a^~bsMi$XoPOJ?z
zupPL%jyl#OX%a+bXclGw4o=i@y-~i>mbqSvJFRH;R;#S+tNv`280aa}YfqeQ7to#Q
zTrMUt-_nj5uo8zj1#c0Ot1eT`FXIt1stAFxpy_WFJ|7p=aiHUl$qi6_(bD0$gn2vo
zr^32<J?1Wwz}WfL-3)G8+fSp9jNn$fbMy(Y2&7?Cbq?uC4Ic-fi;r?oZC$`j;!I45
z$*s4kyr?p|VDauBZ0}i)JSrsk-BYK{GY%YV{Gg6^waP=hu&n1#EAnTY$wU|~zJc#`
zHl-9_;yJ5eNzD;+`qsHF1F`@%jbgU@Aw@yZEhmS>PL4vRp6M^FyIcIAtj3PS-SMrX
z5i7)XSC`L2+i%N<*^UWJgNY7*AcAT8C9teZ*XOI3(1?Sa_(Le*`eHbwpCZ*&kIxOL
z*~$&leZ!}|sS0&<z7#+Hoo+47Wd&CWvaUd_kESD#%Ha0OW1ZS1mv%R4tZAg;%j+Yc
z^9t+x#)&m39wH%1*7s#&1(F5o-GGPBoy;Zl_bkT24(Jh96Jfu{{8_B{Hq!FQHN0UE
zVd*de{YZU*Beku-LovoqkadOLrADs%gK{%t7P_A@-64-5iqyfU=vSH@>?Q{}sTHE{
z?(fCIjybJPOqxN23XqM#GNQ4@X*~6Wl&J}4lO|i)w6V%#I|Cr&&2TJ=5T7*~v^m~P
zA8K&<3D|K6p}eFQW}^RIDQm3CM22@dKSI0Pjlsj9MrBS}q`iWlL)gXH>@|v;Hl$^9
zk>`2I+{o;?Vus$_zur@btwtxsN9+slJ)b|XgG9Nksn=wq{Z9o&%P@?`H)zVQOc2CE
z<TU3Vdz})ENuaSzUnlz;Px3N%kDe2S8|B+Q{i|lsPrR)y{NiEVSE6qD>DLH8?you|
ziozF$zg{aJsyBnzFC#7mBr#KR!?mSP$s^Ig=@RTsq<_UG4}`OU*il@HGJnM%ewA`O
z@s$xz-fEqvAgxc7hTDQP4Yg1=`G_KiUqNgQLg3}2N=`YN3}qH`T6gx=4XhP7&zQtV
zYSgfI{CS4cJ0AXQz2a5${4FG#;0eJv+cY!qBCG#^%l`1rL~k&)C19uRNsF%?*QJ2G
z_bn!Biq%vha_YP25_EH}y|nF#R3UG1kH-9+>UnhBU;p`ES}*J%nHIFSTKicnXz&J8
zf%@tZoGuqhVJ#uK8V;8aebxhJb#g&Zux%UT($Iej8$F=QC2?Lo<#|VzP1mA=;K49#
z(AugD3Q%xz-ewOsn?=Z5Jyb`;VA<d&5!(3iz!k=x2w{8gWVnCp+MB*;oEEa<CS?$Q
z72o=y#3L8+We(=`fj~W5KuC;qE#n{Q)X0jo{N(xrSXtA}b@-5(yQ<(iURJpKr=Mz#
z^&i)`a|7Rz5q!(s(n`}r^<|5;Qk8be-hjStTC&UyZnGD>NY^M?KFb5+-2F;a)HSk*
zo$}DzZHe0f*L`GEKpo>a=RP{kmbT|sLZ`p3Qqis*Yw-*7$+~kHt}ah8m+P!E_JSK&
zI6M9vxA8~!qO2>p=ZCe%%>i)`P7u}@co7I+rDcJ<$XPhdl#xx`YGIa+$|hWW6hdo>
zp}*XEj#$jMzCAM&6p2Vmm{wA_MeE{Kv$@1|#O^XaI##pavri#vD^sRkLqjh$anMk4
zhQxXlcVg{=!r0i0^4i8vI&p1Wu++*htrETOfE}xH>TAVDl~7mF706R+-GiEjc;FJ8
zg5lufp3yuax6PK<&;}x0Jpm$FVYbmk+aje6i}Adc=L8wqW1i5RI<}zhHna(Z<xA-w
zA>VuJaz5&wOl@)^l0FEBq0&+76qt+EvB9OKU)GoIl!>Qkmbv1u8;;s81Zkk{MboF6
zEi`l~9W)LK^c?7U>$pXcSq)1`EHSOF)(sNT8<&{m|M#<ie8K$R?%Q<Z!;ioT<mSH%
zWL)@C0ZaVSh<5{A_*&6!A72exfnWb9>08`+bTiYEZibOnw%3JlL&L|Efo1fFZ=}Ub
zT11L<wi_0^0!Ox^*%hWiR7QGh7X|fwZn{;cp|_;biYGonc;Y`4S4B8)&#yz02M*2K
zGOD-_F|0BqaDIZ2n0m<-c-ax-bxKa{$$-Q0-?-BX5|Z#v8=dS)d#^{Ng|aap=38`3
z1emk-MBX^p(vI}WcqA?Lc+ADE5-h@#9jD|iWHD1?{<7~Dhfo#I<p$U9w=Rx8c}Tn*
z%e$tqrOKV}!QEMfC9R06qfwkmVV1K}M~dZd0xh&IxP~?AC+IR>b|odo``xvlz+bg|
z1966pRq)`1<hZ-t_Cn;pGwI~Jt2L`ymUl)0WOdZ;6tK<M*8Ul=?q@x(iT*SFD@g~`
z#p-k7NfR<(u%1b^`=?NJFQ%r9CR=96#cdm%GnZ)|VJ$#(45zyS?-b40`U!xM!5lAQ
zrD6+RTW5A_y{as6IUU%xpSh9`X_#@8?kN7A;BUKt)M95zQM#6i6%jeoHnmGY-T&Zf
zgkz0Qcm4;LTcmZTm^)D>A8e<+GEGa~sLcLM{;!M4yIB{NY0A0Zbyw;-U+qN4ARhx0
z6WST@8-(-tdG=V_>#`x;JkB0?R#Ok#W6(bmPrT}k*>BIHT=NYVdL@;uDTwqf*x{s=
zmhz~nL5C6YqjD#_{L2Yqb}bcX^r4=Py<QtQi*4bJEu~(@+1PuM>|y3u|4C^7!`g5W
z#l9T5NH{)uOWgQDe5ZX%jK%X%w8c{RkA;Wwkq(kfUrxE1kW%?<w)>u@Vi2LMw7jBm
zE`UNp)l65WV_TfSG=@!>tj|rE#0bXR7@wg+x^9ul!mC;v!;T8pLZ>@R8UCAvFgkA%
z<7S7F&7ws@nG5e)nT66tA0^NrV|~eglAOt-$%IGPjH#;j;Ems)!YbIcKzW^4VODfS
zr8RjYk*P*}{#}&$P4^>TY1Yb&0|IAEfsgYj%Kbt%m~EqjtgE)+3=xu5n^QKvHQDP<
zKPc#8(_HH!w+mC`!gT_BGlKO2nd9U*et3OlT0*P;xLs*fhK#J@>+b(gFd;W*iP>7C
z@P?B%7d6J=osxWsM<p|fT9>G`0@%xPR`ZtG8-3DOW5eYZ0)m9vq5o8vpUu1P^h2t!
zaY-I3mOj5J5|xiDAVMBfXn4N*AS|_<${T>K(ndUW3rPE|YNeNg=gtp|9QXJ2qXr+F
zmHj6|H~5|^KFjmz$)fg4U^j%dyYOew2k4oVM~=_!+?eOs(2tP4$q^Te8M#;*P1^n=
zlk_Uf)Yn5FdbFYYpky_jgD-5j^iiado3*vG;*j-4;kio9?lhJ6Kuh$lNFERq+cFKq
zMnu!v%(<E@9uF@N3&7?zi0P$xYi6@*E!36iLaRal5Xd2uaAr2>l~DGK05=c(Rk$oS
ztJ(F>$k3>ailww8&mQVpT))LxQgToGDL?nn77U8OMqytkf8>GbsWGSK?h{a`Q_EJ@
z2s5(Y=;6SNJzj}LMET<rfF>o=K76?Z@mscTB+~#aj(E+N&Uz{R{1<vh&q8OiYdgza
zYG!6*F+ndQQs9zDI}E%N-8Rn2x6~24;8)ox2M+jPO%{Htv~yisV;c`V-I<ukD84_%
zr*E(&nP3xpA}uL{JOdbmK9G6Q1VZ3wVDCA817O{i-8eC@WM*PW?CBRxn(1!}Fq0v%
z->1{WO{E&cn;=)5XTi}4cmB1je6_ICH0$qaSq4ANOsr?JMgFI)RcxL&3>V|eb0aa6
zC?OO~p}rBaL$^wr^e@!Xec**?2BK2{&JyS%t@Jo`B~AxB_t6@-2I4oONNrGIJo&+H
zd#+qpXVLaECa`kTiq3bC>x#RbV$B$9nCM*5ZRem?lg<~(kk|vW7S%0ajHH?5THdS#
z=aVkY60T&7K$9SH_m+=8FfKa*jPE4+ss5&kezPCOeu3aDOGJkAv&3MS%A}fA@5IT5
zpMcb_KyIER{+lLmo~2wlF2_))J$M>&cDDRY&PBDp6}#{<e(4B%x>q<HfoeoYS>K^s
zSM86kDH%2*``L971rPXCq2_Om1SmRo>4o%&s1gH&UsV^7FVfZEDS1=*e$(ok#P}Zn
z0K*}$8<wJsw<?B|C*_(pfQMhahGMlYG+c`K<>n)G&9Vb~>lV~^hcgTjl#0(?)3#sb
zxv~^-{rqM$UkQ26V}qK-3I&0j&!KR}k5ZtlWDMG5-YW-hpzPna2L)=)a&u`;5ejR!
z4k;EnY5m@?)903*6c&@82ytnC(kt%c!6-qAXghgkCAE>Ix-j)~66Q`T-%OqQtPZsK
z7;Z&y2$^~1cg9F|LTU+w^{@SkwxHo^<xynm%nzBzq_~4B*QN8Wq{j01*z{-DoKJ*O
zodlx3Q{`IAourGa7pKw`RnOrLH~4&8tAHFsmU!=e%<QZ%BmIMv<Zpfenw4c_S)o`t
zEO1@djh+=Nv@|DJgx^~M5VTn-gr@(Skr0&|l^wN~#Yg72OGsG*+2zm<R9vR~WWpG)
zDaK0nnqY|Y6lcKFxcJ-F@-cZ~-i1Z~?UpWly3yGflTqKLZARSIyJy#!kyFts@+yRf
z4jVU=c4T8$h&>0>yAqLd05>5H&8wIzv(7TidG`}w2Olh8RQ^2%^9NHU$CIIXYg5Tu
z8g*#GbCsm{X!uYnNqo=uX3>k_I|lZFlz$;mH-16^jz{c%5Bm1~E&Q`9j2}2o!@p;g
zP-c%nV`_%3q*+VhHXZ-rUjiI;9@K~w^Ac>e!vEo3Ur0a*!^K*_E-DI$2BRe*BX1yE
z&)Cs^rkp7lchzM79?6+Y%ai=^Cl6NAlI3Pcq@lP`%GnTuT*ETXfGK?S**>EM`nJuN
zs+n<I!!9-hj*all`YE@4(T>*BJ^J04*2jvQITD{tNB@@xd=lPVl5gE<zLTLcFuuEY
z|5tDy23cF!9)gs$<r_$5RTnr>n*?6{39u|I{{-m#=V#B7=pjs2IGl|vriRl7E@3LB
zW5Actw}dtkP1HIq_7L%gE>I?7iD7C46Fh-@sdyg1d5}fhryJj=FY5R&WTh3K*5r>*
zzpm1Z+9SWN_Lty*<M>~KW4X4~=Tz5+@*LK0glU!>Cu0{z8Sey*wz3~_AcX3882IHa
z8$fj3N7$4NevjOd!FZ1e^d&{bMTQSPtFZWT6Nk)$V~lT?6EheEBJzTQ64k}U8&o>3
z1ZBYbB%0#Qvq<&itm@?c$~9g&IdSP>9DBuH%qmP+-zO7?by2f3`G#v(0%Q5L5yupy
zP9z`%*N>p;-Vgg(j+Rrn2DYgKrd^C$b|It}CryNfg+gQb=O*rqiLm$UikU-GY7c$z
ztOv`=#nsiBC_^mV(&X6mWHBn-QNFs9J47Fa(Ql<KGzICNNU$_*rP*ZE#9yr99Lcbd
zpgWfo#f)~{x2d$exyqV-?ni)h=4#>%<iwstlqgK{O)UR}47SIyHvjlE5Nc+xj0e`S
ziCTYi*Y%+ifQVpYCRTf=?Q{9KnYfOvGQWv%azxtLv6OG{9&6R0M>>C!p#KKSy+I(>
z+H3oomg1>p*?Nw?jUA;Khm%gza~En*U<2C1(pc?@aWO|adliVoTN<L&Dd2j&(QpbC
zkNsJ8?1H~kIaMDVmIq>DUKa=)Vw%h)Ff;|R`{_EXXZ(u4{0Y0^5ye7KrsNSe-mu1i
z+obD!Cf3~_zy38lK!i-y`n{;;Tnt&|49Jt+d(PK&<Y(oE7&d`xl|DNJCDs=1q=7QE
zVds||`TMu+N6pZ;b1F-gQG_tOf-moQ_)CiX2Mm#R{5R+E6j~8v_KZXEUSn`mBTOad
zm9yGCY9jI{YNOnF&WT<Pwy=1G^lat-M7SO7k~;>!7r(V?J~;;IgBkVojG`CSk5^(g
zo&2_^+6z5MwS;mMN8g}D^h13m7(@4~Or|D+7CDK|Q~Vt@|G@5nonYI-rI_WDzb?3Q
zK4{<2kY_5bmeXq%t&9?$M29rNcKFM09_EMP%!=V2(LcNpWl0X&3S===Rs96I#Zku5
zGMeNfsRo6THuq$^wCq0$$Mk*6KFR5gbx$=(OE|m3l%eCksD80n{3pen43w+Ev<zwn
zl*P#eF9~B)H%P+)ktlGk^sn0gOM{Q7tgSH{yNF(L?ZT*q;mhAZJ^<5R$TBo`Ih#un
zHc)s!0bkQW@iYWnoS3%^NVAosN_&)}v2$Cp*<i02<U!0N#9u9Hrtd>K>{&h4V#vW%
zN<rtt2o+<l0!&{cCk_`95r(p7FQPxLYpNfP5$Uhk`$N7>IMd`6|8CoJf;vu&8@l;s
zN+>thog|i<rrR|chAok3ZMF%<7;+li1Z|<!5N3TSlF0)q8Mj2as2CA6fg0&Urmp8T
z(!4y1uv6z<j{iM_sWDKbet7zO$fW;-iPF(m#6H*!6^c6oucWkCN63QX)Dy&IqT{Yr
zN%hD7MSp5L5_qh=4EG;#@gTu8BSc50u1SO7&T=MMM1a6$Hc&{4-|}Xt0X^N{nJ{Xr
z2*PpK8_UEbaA1zEc&T}}JCNt*p%%C=HkISJsAG&nTqHVpY$BHv-vhl=()KlC0Mkz2
z_nFh|Oezeu*V>ug(mw&8fXQ<?a@zbm=?Wh$B<}hnNy}4xDW~z61Qvcv$okllwY4O^
zzAZQ>`W>9T^ZK_W1Y2u80r28!B_vF_Zq1sugP947rUVg?k@BX)D&r)~K<GnD6KU<@
z@`BM->h~FR#M5&%s^(_Th8zv7@vm9Ha;9wB->GY$>HEP;*g<r2byX61ek&3Aq_gon
zLphGHe32pxgCQu`q%mARx1bh_G*427vl&Mob<Qf;`0C$yUv<O9!wG@xf1@PKV)qLx
zQZ;$5YagDt`WyaF8vfF*AI$){X7Dx}@_3i|mfPP0@s~2zha0`Ww_cL|i7>#k%C>>4
z2J>J&rI>R&1Y?1|jf)5eH0bdJiVf>7I~=T3U@}%wQ7d@BxG(C0o&Q=cj(lE?t{say
zbNpr@`|)@7rWHS*S_~oRa2T|F)ueTV^%d~JTQ^13M|0xH#WX#*zu8FWpm+%?$$q7!
zk6)DOH%gWI(R!MTgpOk$5?VBrGpYJmABLYn<5%VQz3}5CN1asm@q0e5YDynfh3qr>
zazMkOKJ{Q$TCYVqE4(xaaz!?fA|&!aR=gn&0*eIWSo5Loe{9|+kU?+gy3<N?z^vFp
z&1oD=$ZilTx46yXiB@UaJa2)<-{oMFB6-wOC)+BTH3bwafiR3xI72L%?>21<dxm6|
zVgZ_)bG{U@T2SvhFE<(QF|4y$Bm_hf+8f$@F25-_R>w8K0#cxnl6U52FIh$Hk5Y^f
zc~6k`L1gEO%Xe^tQAG_gpx08T*s6(5hu2)s=#IV@3enJl&eHH`Es}4sg=7DKFVlnb
zO{EpKVztm5kqL2brRYu_MNg7$8~5LYVL)Z*az=~yS}t$RlA+HG9f@ZOXY@#zt8s4q
zMj_I(*8Ln4O5f0PyoF6c8kademIj&FZi)NTkXFfeLRI)#a*<<b*?6(Nh){)hAVo<I
zQ@XEImCja0t|j!{$N;I9!{<YjL%^dP!lp7a&KKblP40QXf7xsD2m%5DsL1S3xG5fq
zN8v+fd!LKDnAWt0wm;sgbHxRgB>X@wkW=7{Hp$Y}2*cbsH=i^0QmX|mO0;Fnj?}u@
zrQy+xHI7tmbFj1f#<IDulW64Q6ol`7&Epl!*B9KJu#IinI@!CdT&Wq(Q_|u|!q45J
z*Ym?CD}0pAZ|LvgRZK!GXAJY{IPwIt4(9kV{_b#A)~|y(hp%6aP_xB>*yN6|@v`*P
zNGEUiC*W2zjNDZT&sKV&)>6%AWXpOTO2_eho%s7-gv(4>xdmpuotQ7J&F#T5%kULR
zb7thROPrxt%}e|z7y!mWOm+@WHgD3D(d9`MC5cZ)$il6ypZtlzjDVO-vMS8B#hXqq
zIMn9xrEDv`OfoD(1w}jYV&T)jefNvaDDH--r9xOzTN1e4ky`N(Q8p(+K-_Tp1b7j_
z3NA3dtAGYcLuB5_|D&#Hi^&vH3oCUS26sphM6hP-6&6P=XUgIk`&z+Ee%ukyJpcS}
z`A`wBZ_fp8Va&jdk8ui#$QPilD8h-=5v5KGI$`%Toc1CG0NE85#}BS3age#KE80|+
zMSmeSS=U(h)rTf807Ge4C=pT4!|?TQ{wpC;|3^Z6%@<$@>;cL3#gb3*ONzMS@KH8+
zJ5aN9QA>@X#AOC8B;pM<zS21pJFDskH850eak;OK&6>;Qk*qs0o8-ZiB*BpH#OpZ5
zv@XW;Ole=TBJw>d`$1B10nN+j`Xv<Jm@Ug3+hEDh$G@J(b+a<jRs0t^WovkY{0%F)
z2RsV~>C}EmoVcJhuT9qOI|NQw!VG4N@od7AW8^r;dqq}y4`JqCCj5O@Gp|tegm04T
z820$|&EhuMVLT?YAu3aI=%PTBQL1H!3EGrkl2+<@+5AFs5>-+bUx~(zZ7ry%OV@)9
z(facAHSsFtvSW%P7_p|gL}a=|j3xkY-%No>-<J4#K}pM8Ugk|sJ=aFuk7`Dr?)ARk
zq`<z;6(r)VGxEFxP6uRZ>1Rzn^Z1r)L{mB=P0Rj`)vk0_=zX#E1h!SBp3TFWqqc<T
zkGn9v;5s_`{{1Zv8HyZKeJ$?JoVM>%NNZ*5BI-RE{`psvcb;dNEb?fpWL407bYx{=
ztrL++U{>(y#fZ}g?|=TZj?Pv{pCIrfD^a^NqTw<&&h<0VU?chFKKs$cay2M&?RO4j
zG~^@m=nft97qCQYHy)NY4wpz*fG!ygF>4sclr+QtG+k5P{Scaj3TTlpLNdd5KJ0(I
z_VQVF0z5=zz383JsKzmVgo*MMqs?=OQRb=gRw)g^-{fahoF3vycUnc8{g+p{h2ez}
zx`-icq42*J8^OecWt)zcEx9Rc#1{Le^V*(IL%wd0=s;xgheHQh>g&m8#O#ne7y3|I
zr*QtownaWR42yT~RNcl8+Q4GLbe@Q<7e}|A2nbvZ%P^sW2qLWJ+I<k(u!K|R)_@n7
zm26(7wlH_pHZ_uXcX`J+bqHZALp&+oRHF?Y6Nrd^X=g#V$J?_YEQ(_yo%hG-6H)k&
z-T?hy0P{c$zyA97sMIuq9af5qT4lO3skNTYnmQ_T?GH5*d}d>#VmiHTphV|juEx%-
zo_`h-y5mep$F=hr`_cW7Hay{{2H9b5+Tu7u!HFQM5d~2*%cBla6$uujA_n3CK83IR
zRfPWl7~F1!v)7Ei+rw}Y5UQ?enkvKf^*GKVHQ2;!aZGfX#Z1IDB=v#oPHdoaD#U78
zMy2*Z=1&#Sq7GZ4qIB*iKc`5G5@s8tt73z6-{gyGkj9slKZiIU-G<mtaSwzqUNipV
zEPQ7Umc(TlZS++X+8Qmi*@dus#zlEIqSDQ><iI#wiR30IdzBY{%sZ04lxt@34`d0v
zBNdpGHXC)8PSNO>rU!`WSwCc)74i1N4m0(jywtgA=5&Wgr<yHH<66rLWR}v4Vog{#
zq`RVb6SprG72&P?mRmE-8dA}-h`2Dx0t8Ecr6P=<Xp}`4bq2l|BMp{yYO1SMRjRFX
zSOvSDBS>^JN?iW{OkG*rdx7T1r5EUoU#~;f1r5Lsu{32@upaZ5>`2er1&mvoK$(A7
z+ku#LZs@0-9Va8HhnjWSD-Au^-`IZ|AyE27{i(x0i2ndG7F<t?fcEDLKAOK}+m_u!
zk)9ve+oR`j!!vi5)+NqtOaeMTh8fyKHWMV&raOn8pj$W5!UAo@)$kv^*|7`fJ|Rw+
z%XU^A0dS8jJVkH&esnLx_g5mMe+!#uYgR;+=uyG&RDg(K=RS!naZ6c){{RZl+K?>A
z9nVZmvy0&2ea(|7N-8}=>p<|H;e^t~xyGhtvbx=4CE@*_57vf~Eu#-hOleNJhZM!e
z9N8eW!!Y>2G@(4}QEML(!yGThhF1{MOo-O&5HcWSK*)i<XqtvoIFcDpwjhU|{g58i
z;}?otyr%yE3alsl9bZ*m^uw+m{{WlzL42j<B8nq~B9i|AdtX!{{4>bY5>@OOVg;ul
z1UYyiPrIRC%*;Gwy61?u!Fi0@e90-`uWH-=@*UI7f_+o_C774i;S&3Wb<X{P%@y@)
zNrlU<tz1MqPN=GxdSek9M^<l{o{23fR2(u?Lm{@^+cwjhFsFc<sJ)<<{xR=SsA<pk
zLfW<J^u{|%vk+CJ8^_KVraf_>KH@KfXVpkb>k6^9Z^I_-TTf8t=n#2FNMt5j!=@Zi
zTWxct<j;!hVf2+xJVP=dZXiowPxdx3Ch~jR;$K3=YojG`Na+OoDP*~-A`vJJ7oBRk
zF8BvOA{$or6F5_{O*(vJDR=tETNU@x5=<uOB=ivKGc79ERZ=lBXpK?;lt>iH^^FQs
zIHt*DNU06dGpLAdQYNi)%@)NIj4jg+7cxF*o)ylk8Lz#D_(5_(@P+HfG97G9FCf$d
z2bN^)5uSNF5^1{};^Vhs9ms_g&X<99{&i@y)^%@yVvS;TUS~*bv_lo_Aev~}a7+cu
zYiU7t7jy=m37IMW#d#E80}6*0`YLA_vwAH}Kg8!GCGc%S?lPq;cUWXK$-biXp-vy<
zli$>+CTCuqH8+h+yXD^wr>9c`1g=D%BtfEarp?h&1X3+oQ4^kskZ7KSj*@33f=$k}
zPBvgU@DXi54s7-xJi*Z0BpkC&9sO~2V#vVL+T-LH!h(k2CLieI?6-%^DH?34dayR5
z<#C)T*PJfPY;~6GJ;@YwYUMq7pmo_pY(%}b-q<2=(E7SDrXaEA1+6E;ty1?#e5LP@
zwsmMI#g)$7;ajZN{{WEh)r?>laP-RF?y;u_Y0hhg8$}N;>uzHhErgxT-%#ORC0rv+
zTma<?;S%$a3z>T0Tq>D@Ylq8rDi{eidaJoJAn5+i?OZ<Q4`YN~gM>WbwCOtAV{r<J
zfnCHlZ2lNuGSnDi4Yk`07>?_#K@6@Q51j(Qt<}`t3U{8Q#l@+XuC}|s_IyyvM>-iQ
z>pDgt@ECFqaaXJ%JnGSNDvebIYelDC=xc@Rjn9>+X*NU*h#QC*%@8*bG9Y9?>L8Bq
zKI!vX>|q1pK809Q_Bw0rR_@8I>2B(E^TAS*^Q>xcVg4uZglG&W{lP2n4X4nMoW`=W
z%)}tlLQrUCC`(S1Z)rD6bEw#11!_=r<4PqHh8T#_y;F(m?o65OY_U4{vKq;bFXcrV
z#GJ&i=J*BalCMo{52Dz}+bKOKb6bSU9jH8=_WB?`R`3vb%k+L%_{Y6Qp`QqOMF0_)
z_-Pc=(33U{HH%duMNIc+6)_qJnVEXKKz+u42Gu@lLK$5HEL9h^^BMcuK!eWObb;Ep
zt*5zqJ3d%`sJ#6U?L-a42a*bjI>ptdu`5mfh|RsS&kGhs)|JNYQf&oM3CdMbD+|^l
zB^g>;HkgY~DKe=sDs<Ydzg2$>H-~y_C^sZ@3Q-d{%(f323g_s6%&S;CM4}{RQi!nw
zw2GF)p^V6Mu|dM-o```(V|hGio3-cn#E+4ZV}vRT0=v0W_0}<%)Ej9=KA1F&v!dF&
zdx9TU7sKxv0jZ`k6KpvyLgQ{esclE4SZ^XrVa*-E@g_v3C0a8vO}k?_nu&Wv$FbG9
zX}4N#n=O(ff}36v;f4}cShunMBzW&^0%3<OCfp#*SCd5DvuqCa^qX@%lJJ~DdQ%N@
zUR>SOGUmF@hXf;mbsW=9h1ZD=eI!_LpY-Y>#4<!;V{a9TKSU7}&W`~PWYkqQhv-Nc
zIiKf>ua=(SM1tOVXY$4_t$T<Yyw|-Stponfuy6n#)J<%r<Mm)+Q@k0Mm3h9%e!ZNs
zlF{c~Zx@siGC?PiD1@krlwI)}lyeiCe@MZXOIi)$1!m7F-8=5~7tE;UetDwD<R#6M
z+2w%i`?KiAurlUFq&QoSy56-~E1Vuw3%>Z!WQoh5JBwiE(Kg^VE{U6F1<*a{g>)^%
zsf1gN3Y@B?>KU%@BIN<$kCZe$m=c@YaCIr-^nBRpIYSyitJ>TMZC(c88J8Ji1f8FN
zje23~1Pg{XM{}&U>n>gbUnDr^@(t0oFVholtE+93uxr7=!wBbfQEis>hPW?c8C=6D
zHB{aA#FnxkZmC`I191Z)21E`>g)&v<tU$zYVg&=Ik2cmXd8*sWZr@c^g#Q3zp<5mz
zg1ne~zL+nP=w0XCn8JeP{`1x1gk6d+#L|)ys<(F*>-27{EWLvViwIO%mP+^T?LjxE
zvc(^qdTR%8op4gwfKADkUI;GlLpJqtY@@hTppsN|vkRB<;9pbyk?ScnR>6_9ZsN8n
zvuGD-04sP@m=SJf+OIm&1_BO;{5>tZ-LHC$!)T(!>>*UmQi_pMc&TNXdEyl%&g4YO
zl+H0Tq)R(X)p`Ohb`em$?VOjNWg#1{;Ae@xA&1Os63Q}ayy&@eEDk-w&o*hC>l2t`
z+Ol!ITSPo5Ymn+HIy81f4a5gBp6P4PNR05X7=7kiPzBhn_P7agKu}s*4!DfO%g($S
zrW+Iy3Mh@x&H^nl-42kVZ;VOOOpTzG^1$X@6pbLQBQ121QVOI%+(x%pset2}AW>N7
zc0Y$W$LwM^2}Mu@UKDVb%2%vsCwn%cPh>E=36!-x_<6iTg)koKfv{9{q}{d^DrdzG
zU$Sv8S4lgoVX!13+2YD3B<@6=cB{VH^+D1{Jga&6h0Wr{SjO`d>=gJD^<gd<Y_BkB
z6$WwIB`UDmVS-WCQ<|wrxbAIdK@^hF*6G%X_GcR;%#E=3Fx)WSY3G2{$xgJ~e>wwp
zqi0{1di_};W~!83$rTNmolbD1ODn%RCp-@#wbxFfW}rq`x-^$z?~hq3Zml*_2R`UD
z_LM8wIzH>6s+MxgdL+^9k9~jnanN%bOJJ<YVlu9iPczGfv^1D)O;LPCZ2Hk)!RZ8-
z(q`P(x3@iZsJ311o$um>^D9ACD8v5%r4lZPa#mY^jjK4U9?^AYJdO<8_X>|J?+~wl
z45ojg%I9z8En9o0S=-#<ZY4}>D@y05BxC``?G@JAzbEIV0pX312G*B6BV+RInp^K`
zt(W45+~=6&#FMgEOE);#i%q!DC?kSGtNTlbYvRCi_ELix;MUIIw%V%QgjuE5*#hCu
zax*f)t8rT+4>Ydl_|V!REgMBmGjgj{)Sul5=UR(xYgLALUyU53Tst|Tq|Jzw*0lO#
zegk(M5h}hI&yegE)vo^lOi2eIw<UZr1GI=45E{ISr<YVld2p(m;u@+GPnak18v}VM
z!e6po5&{e|oMqLLetZyUN^LRN;}c{h@P_qu_ebFf)PYVSzpJHxhi}z{ogmf1<{v&J
z0O!wqY_nv)VT6VbcI{SRF0Yap{b_xRv}4#Z<@?w9z78|>X~=7wK~ZR}uNMf#Z7E$U
z743Ab+v(Tf>wz!eCh~rum(4xa_o&n~=R^Z&L?d1$if*YRlnG;PD_gBy-WZ|f>P-Rn
z8T=bwtaI{tbPO?Y0>h?m-KsyOAYta6FT;Xc3VP!@>P*LDXV%IcNk{X>jMPBfKzATk
zPOw#_93E?;tj`M^Cj*OQ&x>e(KQ<IdX@KdQ%q^1$BGPy^xw+ujxSvsGqoC64J;Y5?
z8;4P-A}vuDongu1t8Fx7Q%>W_VM73Nl(=rqI^$c<wDu_OqBXRN4&nyl2I4i!rueA}
z8ys`n20y+&Xdmoht`xkJe+XW@SNoc?v0OS^5te1Q#Yl4DG7gW4Y%77eK(l%?B-0N(
z1YC*m&`awW-49(L_A#dz-V=<?OSJN8TXSKu0WU`l&@4vUcPZ?#I0@~ER!_}Rf)iqS
zpJfalVXa%z&NgN$Jrds$y9DzXt`8w5-(@^3l*1*dy?C;PICV0-<)sBIbM6xkBZ1!v
z_&gBuAkyQAXb?2C3Zm```e_@E%-31b9J8fWRVuA(zkCASWk`r@X0uAIJuywuVc^Ti
zCVgLIX6+L<06$F@K8z}M1KxMt1N*b;(-RC7%lx4G-u<4BhB{U3=5BFP`6@5>#=jg}
z5IRV|@kSZ&{{W5_SWAhDcHav$*&~>+i4{iR)H&7TMtFALxun(<22S#;#OBM*w=w?!
zm~MuWLdZ%tD~(}=sb=@Z!qzmdcb~JnR||0p;u7g(qE2Dr7ZBR&9|1Yd;tkLa6-<hy
z{1RfD4l?E5KB&HF$3e`J#^m1))ZEe963l^Y?C(flDx$1R6Sr6=!2SpsmFZ$wl)H<o
znRs@~X8oQ0?+iGacSL93o6;~hgh=%cZMN7pMW0H+7(+U>TaG)wB~L6h!hCLg-N;w-
zSZyZhREyQEruuVIC_0D>wV3*10;v!-sSq1Fn_h^F@<5Uyzoi|fXJ#%dR7xYcs^pvD
zFWWAejbU8P&Mo$XsY`RED_AmZII8v#nUQ;Iuf+(q3~?kb!Iatemihb;qNvq2+74Cr
zTeqWi=L~H}sVVp6-of0}IN{Oo+P9_TLE()LBm!b;TLzXkEx%mw)P+1wxX$lFn|h(&
zo}6-;=iJ&}0k0RMW(U6K=rG3V+L;@_W73Q_z)AG~0EeaX{`&s_sMI*;MT3Y23W-`G
zEMrlj@y<Ik;4KqmkrOWrW?J<wfG@O<;M(<45X$HpV!!hD{tUjz6JB=H>5&XHn;~7f
zVzwWm3I;TGq6Xpvxdpaym8IKhmt0l7tQI`!G~TedOsy5^W#I8)O@(k1z^Q7DR8cm%
z)-yHIdk(|R8pqnho)>!@93nv-rRcBXjnRw$00zWf#3i+kGpb7LP>`=4Wy&7KeeFy^
z8wI*C18Ef@l|<hYMiN)S3XAgZNSZb!*1R_+e9;E3$!d#EuDGe}*y^D1k+t_a_2>7%
z>+fNv4!n?jDf;nW?lR$bxi{qdp>7;x3*rv@QfxJ6#m7yaZyFuCYJ*DfTuAY$x5iz~
zQ;uw%unbE0P6mo#kKt{-Rc-xH-^z6S-ue!jyu@(vlhQ8NvU?iFgj_BzQ6P72;peh>
z6D;8A)h^)W;6~w0A0?KzWkfHlmCtg~VeL94(?*q3ofCXPqHbNHc`Obk0#we4L`W{Z
z5uTD^CxXmRfv6K>Vy4Ne^Z5jzHc*rJOzQ-fHmZoJnkp)9iW;me894#+527mP6E?e{
zb9h+#F0_z)&sALLo011U_!HJNC<4j6^~l|&WxGIK6!ET(i=5tWU6$RGAQctt#`(Ml
z*A~$Bk%q5Iu+6e7raDXe#f7tb4?$)te{Ha=lFrHN+PhHfP93)>^udWedk$}NXl)_&
zu7)*90@I-8FM?ZLmfq&K-p&`!rZJ`^?qc#UKY?HzDw$A3(`O;HDcm}fy@%Z3%yCpO
ztQ5qGrUD0_7~KHOtp+pdotuK}hbd!wL$$#J;f;_vKcj8(j%rh%X{UC-!?M_IBMlT`
ziESoE+b3=oT)bTY8*>iu$`Q`B7MuOj8sQxIh%7ddL|w_?iK|_rQ{;)LWI%AvLcUml
ztuu%lhz*@w{Rt2otU&YkvLX>;6!4y2m4v@*tHQQPbLT`K&iE>Fl{FS{WTK(_Yw5Hj
zUsCxOVstz@Ti^riNKMnxUpR`6Y=V-itvANm(LTd2c9`{~t=%#lBjAGl6Y`K2kg&!A
zzW(>v+-K@O=IMsZ-q{f;D4pBlg{|sJ=|YcdrA0ScZ_yZ``~;mu{U4VeZp?esY8pif
zro7!<QHVc+jiD-z`rMyvPwYKipe=`C7XIeXs*%sisK*vJn!~1dImny{?=Wdp>+j+3
z>$PXFR_yR)(TC`QpN+MV191WF9P-P~u;`*GHsF;Dhn^rzpJd`MnV_!G5$eLWrB(t{
zrsN(cT5nWfrlLDT(u^>Bf@u3M%&Q%d%2Y%|+ADRRJBOnam((xp3Q5d9LAD%Cq4AWV
z%t1E<4(k!DyhnP)Fxkhhs&iK;kjbCulv`b-R)FE6*k3F|DBN**cRn1Te|95qf=y88
z@5k%LGJTA&G?O3gG>o&r-oEp*$+HUJ`5SO*X{@B%PD?9Jfy@$gR@AK_%O<=frDffg
z3)%wNP3WCaJVr*pg5eK=3CpwdQW-!8i2EPlk7A2DB>Qd+r)Zj4urZ66&rCE(^omYY
zf?!!GMqJ_*EAmdFgz$We-RH@SG0Zu~8!|#vDpeAdNOQt*G1$nKg-&{;O&hETq!o3|
z`96wg1V}}KwAif8gKsPKV0SZ_?Zp^r&KO87=Cn%ICQh9cj<L}`*%5H0E@)UfKHuu8
zt+Kj@>cHBp+*icaM4Up;F(MjxawzC@L&{qM#3%b{Dg`q0fvy|1g{<cB?u{_C?kxP)
zlCaa@+3K+iTXx=5M_t1U=Jp<gx!girvH1yO2P!I$Hdk6VYEOu5yX!?@_BQ5+rC3(A
z*3HvwuW&n&deCwbmwsMr6~c8d%e$x-K<smGfZ=@VV;AC}4oa>59(5kRs0Rvss1C;V
zmcz~uBiG{i;}5xk+Cz70usz%(>p*g=L6#uC-N15QHvK?>@a8y~nrl?$*SGM4Z$E|^
zL>r^(pQdiwsoYEOLV1^>%zb%PhPXFAVld)mInpQ;h#d7q2TbOR<%kQUK*)gA?k_?_
z2J5~cQ95eBuLCZNzkDbA9Uy0=b>)3+q9E^23>1u?U>d>z8zd{HI{Z+L6i<k%b_B1$
zH_r*Ij09^d0T;~_tzf%ko2AwztqdUfG9Fxa*QyQr$>ti9Ieyhk6VD3+t$&O8ahiKi
ze*}(u3T-%_e5=fs4*s+ls~2sOT1KGe7brqDjhA^cfYnfw&JSoM^8WbusMIq(lS85H
zCP_+Fa*Q`#hYUEbl5<*Ld{6DKR%inIO#Th8RU@C3VWud)(3r~ZOp#Nq6(CVPVofmf
z&YR0MFND2oVYM!0nsAm}JuAHEeuyXt+gT7XVgu|ouy%QXGEfq5ZX`>h0pO!}Tc+fr
zp7m|c4-5l&OkbUPVZ^J?I)JEKe|J<yEKL~3*^`%ODCOk&I$H?g5@eJbmDgPow+o_2
z670EPbZ#5ECNSVhH88hrDsGJft#BtiMv<5yR2nT)%Mi2Nf-X@R<<(*t)nWsdS7Cgy
zK}O?i%OAs>5B4=1g^fTfk|TtuoojmLv5dXs)fIanf|d~}YA<$6sGQof>V+`;hPP!)
zE`_gWqL+s^jSbwDdb&lz31-KOWjC(WRyJM10Vyi?%Bq>?2CbnTB+d4mp_RP?`yyP(
z!Z9fWrFL09iuFQRK1K4p!=$9CJnB-J)pDZl${p~8&rp#X-||Fk38YN{)=R=MrYuJB
zJRO4}BMsci(yR{PJ3BQf_4X*zt4#jLs&_GbEfGSy^U5nM#;RAaj24QJ2s+2np}!7%
zX;dO4RIMvfPJU<=z0le1C?_yRb&dw6Xe_qvTC!v7!@XR@Wbkm6#O0mWd+2g*GGbSJ
z&0W#9qNi}@n9_D$BWQrJ4Z>r8bmtx@UpKW%jIjwv9MXv=k+UHXLA?`YD%r&0{eu0~
z)*&F^O+UV*^Sna6`oYL|qQFUx${?+@R}!?Xb{9VkFQ4O68o<*BCYZy3+jNJP9_F@`
z1BLQziqtfN7-Qeb&lS|xY{Td$bej<ZXA74mTQ6&{;27-c&Z*IXWl&=>{Hf01*Q=Vq
z)wmlwJRK+>4%~)sX%-af8(Q=N-L@y!4JL%ZK|f1L&^FDtSvyDwd`_>$31(SiJgco*
zqI|H|1n16Ao*P83Iz=_ySZb?Oifo**&lbaofr_<=4PN5(L<Z`)#Wm-zWCxsU6}W$S
z>q4Kg(cxUHue!OBe6T{KNK|l<xoPdC^+Gg3h9sWQmbC`DmifF1z7uq93Z5@GHx98H
zPY`W_^9#!U<nUa2ZwYZooN;>~D5_Ll$<DAyw9RC(5fh`QT29qVwnOjl?Ee6V8U1GR
ziCK3qWI#^amg`0a(RMx`s-;Ih;}il8kNiC<l&`lQ`7Lf5MIHzOVRb3xj2QjrrHI<p
zq6ng=HvG~ctJ8V_=yoCe8(yq)^125Yiu*<E{p_GW(VlVkLDn3PCR)H2S6Q_k3~qH5
z8*5PmaRJnduVu4E>5OK;Y|}_ihPH$^joVh;&u_+ss#!n8TV;n7<=btxj-XBJ5yDDS
zcFY#c8t9%EhQ3mdw=jt?-AT!M-C8QHNz5_2R;*i~LMctj<f21Eu~9L(A`MQi7_eyL
zii=9~^~5f{P8ub(A{gNp>`0Q<Rx-ne3nKK!f{ez9ieb)S*Bv_7HO>R~X|5Q%0q~!S
z1DEXDEt&j2TM(9Ixq!Sz(j5F)SBFyI>Af6~YFYQ&)?UeM4MyCl;$05iFqSWg;!NT*
zPD{<c-G;oK{1B%!H7TT+{f#`6P8Al3eF%RHV)@8+@3K}mDQhl+F5gftOo#Eo@#bi!
z9n&z;={Z0-ZFgp{T`O$LF~hHwLu1&Rc&y>R*jaKW&3q8@0mTKb?tZwMw{KL)WZJJf
z1ykgLcqW}u3o_+%>+6BcC{!kMO4ol}R5ClPJRNxy^gxazZD2=PdMdurch6t41P_^1
z?5T|Z0B7nXbSi-?NBf`gjYMc)N&rVnaJnKVE}Y5V^U@d1>@@{=h@j%QS?6)g*jq)x
zsCFv>uGGdHH#<k1O{X?h8zK5Yi|awtK+DUFt}lgbGwp$J?+~@l1Ivy9pW{;)n;(@)
zsXHuFp<S|eeWG7B0mAt`z%Jk*V2)cb8z^1JTeIh0+&+Rg7?cjh!yXBSNClSdy;NL1
zu;Cj^)`4U_M{{znJBZ;9i0p$yc77xa19B@_>@o0l!caO?x+@K)d!a&0kBU`6buKF9
zMc$mt31^<GQ?lTHx++(j<%YN)Yo9;3nk+bhR9w<1?XLd-Oi2!+1BN-`*mDpyNPyMu
zFGN6Wu|Y!VvtaHvf_tdv+OVUiz(uf^8@5NI_AC&R-ZHJO64kj;^xaPMI-_0-<voad
zf>+=hgxw*v!U4iUGbq_l-)toCg0WY-gdgaK*``kUDN?5QCO^x8{ZzkrIUQ+I#>}(k
z7`=?%S4q{*!IkLj{m?3?8+AY7`F;NDchqVdMFgNqsh2bl$@~{>qp0(3Co=WKXPA1U
z*!>f*k1u;`)r2y-Mfk%%tEOyH1=Sx9k^%iS<{cxKnjAW4hz^z=#p2O7?MFhWN~2iV
zWI)_NeTFu!&&z^Rrr?fiZ`-;kE%|K^pP7@^16smTR?RODoI6}TY!8)UAYZ{|Fv;e{
z*<v9@TbnA{VxCye+kqAxt!8AOl#z9ixK7#@$i=a5Ve@^RDlVuKWzrHw9j{C`PRu_P
z-Q|t2@jS5xrf)83<yf+pXtq)yIYQ6T6n5+O#0M-Y?Rg?KN8^qry!!RW31zsHB(&p=
zElnzjRZQr$uINJfCT4Vz6QKHAO3C$Ms|Sc~{P)pVZquw?=er5wXbQ{rj^yE_baMP*
zTTYRj+xPNs64lH3)p@BL-QK22kxlAUSt97{*%ZV)+7!ksBUDmvSQ|O#pY+2x4k`9h
zOBuo~{fnIbWD|$^EUraB$&sOXVbT<c#N@LjG0BReDFV{Fw?^QT+}=|FnVb_OFa-j(
z(na6sj5OY32AyE@L{t^cP?C$ER8$G*IKp;W6z8HM{E#c2y@ZWGl<>1OR-J(Ld-eG!
zkPCa^h1!>3rXRMW!N7L(eCX&T;&Fs+$vQY|?Z&bqQszFm(*xR0C;Cx_TzB&QN#DZR
z)D+@MeYC>2S=njlcL#o~R}buE&YyYFCu+g(b325gf<SLtj$-&8$!xaoMSH`5XFUcO
ziGWKL%7c>cUjo25Un*oqwqe*@N!&WqyocQC^B)v%1i<(2{7@{a4yHg(Zv*p#oA+S?
z;hT`O+>1Jw2uaZXX~QXlFcUx0@@Z8FTV(881WTdCLAd@jC!KmMhx@9-yce=ux&6)|
zl$%w}B1wv-=%C8P2P~M1Dy~UXP0;~;Xm#Zgj)ar0EE>PX7Sm;1;-q<b{{T+k)MD4t
z>LY_sDJnvf@@VLe%Hi3wbhmSL#>#r6rGyXhOU>eh6X?NqCGII|l@n6lXq%FW%?a1s
zuT(Nm$O0-6zUrkoM$e@n<n<PunU|Wv4^+X2E<8uIyUvaMN^acD%%&MEOel$KUmdZ#
z_HkAA9(~C3#AnS$`GeaohRh3i<%x0BBEw|vs+Oy-!5FFh1)ehP1it?Oc0KC14LQsj
z9#y|8K-!p{a0%utA)+cFb0S6f5#8wR0AFf3<~8cV4zac=QjmW?dsquzchl*BYDk+A
zLe@(t-ZabPhq1ZTJQ1vj8;BEnG~Tx!!^6IrZ<-@KJxwgjcubRyyy^pP72pKCF|@#V
zu9eHa>S`H9AXT-(+T6aZEo|mJ!RN8OP2zAhVA#<L;n|H-dlm}_K*)(IDRh)liCAi-
z>To5RM#@m;*#+7$7+>-+^BQdPh^C$#{1DIo0EIYcwo)h+M@IT8(=4;!1B=AYl6aGd
z*eEWmVycN;=@+K36qYcePq?d>DB|w$$1jPAnbIKr;6ATQZ0FCI{r+?(YRM1SonlP{
z+fgL~PA#Il!5J~~=^N8*I@^MzCSC!dC&q@k`<mX6%B<6JbIdqIE+wXl7MN2lt*@;R
zAtj{7szxAWJUQJ9Z(y@Wnv|NvIYyaXTVz6pJ6C}8VT>)P&lJFL%w|A)F_d>y)0)2%
zC@v3?YrNTu$V*7R<7}dcqUD@Cj^q)NUFk@JQ5GDEPqc`%Riam_H`)m@GM1A$MRf?S
z)*b%<EDF-tM9*}*u~eOBNi>$ji4Yd6O#0&)BdP1zJkyC?lv460P%g?WT^={b3YsB7
zN?xh7w<gb<0Q-P4=>{;-d#KMol?!)}W1*rcTqj7U=P?;ZW)XuOaC_d@Kaa&5V_1$c
z+4@H=4zeO_PbdqwFAlT4xA8*R)S%9L5SH!!9V<sR4_qcc0(&u@8J970Ofa>1=E$A}
zy}(<VOLA3B=w(=7ge9k>=kZ)8vF00dvC+UF+P}G;d5yb1bOS%er3LuI+L=xfDyojr
z2=7Jfg>Wlya^jMDjZw4$?T9>3$K<#1{{X@V9X`#H!cy+$3Gr+sfaKy0$R12rvhYud
z{{W05d@2VsLo=y!YzyMUX#p?=FVjbEr*SX36wJLAW6HY4hd4JjcL@z5>zyJPtWy~g
zuJ?l1ts(}IGRZQodG3mt>!V|-+ZiJHV&Zx-&_ZE${RtWd#Tg0<PFd`XTF->~6=6yD
zx;y|@URj!<+(pewZh|IpI6#;{>VZO&9ennNa8IiRIEwp1TljE<ogjB5rp(h;1-*Ks
zWe~E-%V6uR6cs1KpTPzClgp(PdPR)=`TlQ%jQtF4+SXLtQZlHOa!N%<V$WGk=@Ot}
z($rpsqw+x1@Dg-Ov{L9rnoYe`Pc^t}!X8mqB~yM$<cy!grq49Xq@Qd`v&+<40O58a
z>@Ra`)sA*oNaGTHv5|h|rzTa)!2)c&-KMh=*o32pbB&WMkcio`e_tr*QO>3L<85R>
z+QbPQB5~OaN>*vAYZ!Q34>>CkEZO}nnZ?+)W|vfR4V!-s)GvI@+x`&^o1m*!Rcpa;
zuRT_&Pb3d%Qt}w4B-X<wLFS}a@-{}=JBd!5&Z**b#J6R2I;&m74B)mx4~UFLqM7(s
z8q04%QEfcgYYt!r>$=c|MmXHcW3WR%jgUQMI$YfljNgsO5{%-ftZaCJQ)_oW;fuw`
zS*J1>m`}~P&ZLJ{ylcX+<{bF$1W4f4+UE~%=nSz*)RK{L+pR8&(&)x(?5h-{^vJwq
zMB?!&Zd+rO`36AF+Op|lp%!W@O!unB_r=<5!Vt?Nu3VQ9CzO-H7_(h7GWJ_4J4iRu
z1_lqaH!X!sJ+2#>u&lXDVAu0>8)Hy1^W`w>Hm4~|NgGZ+sv>lt7Q)1fDLW}NP6)i(
z+`MV>r<)b*3r1TO*2%Rjbk@AdjYPa(S`WhC)_Z$YCY7>m;w}X_lb^vIN}>!Z-RVfZ
z8xkdvJzI?xX~SP8QKl>*$8cuMk;eq~Iw{hu2*J6j*+<l^Af;9+jVXuPNUKVva_Wp^
z@2Tt9M$8FFSz0z1;d3KiB_!Qd;p*pw=5)yonCJ_806U7=mdCGJD$PE5M@0vCMhx>9
ztfQLgS1o(q<^Yf8#@YV>gr>0R$$chi=NesKY=6v!zK0lMGS2>$$UUoFR;_L?8&Ywe
z8Mjrl$meCu?2x9t-ir6|(GuD!pRZ*Ssy);H02#vB)S&ZC+$M0b+r4$dsc?@nFN>6O
zoiz7Cqi$tMR;8UPne)IVW@YHjw20CU(aD`#7ZUP{B}(&LnN~KE)I3G*+F?x%HF}ij
ziEY{6TXb}IN1dLbH#E9@TsGCV92<)3wVi$g7;Vqd-i=SQHKic-tXVQ)&1TZtydE(W
zCz*OJH_SD=(>QN~?B>jjn8hTeM3mkQlC+1V1j)o=$M$Y67dB6+d1={sz(Zir^V;x5
z;mwaQ%ZB)U$rvgv)*#W+F2Q-p5H>59KKRYMwj0+YWnAgi8Vqq!#jk=cSU{38)eEN1
zw$?9kt)hzJD(}rzVO=${{s2WYBC4uLL|G<XS;1hET5;wd!h=={9@+YB2-5_!>+LB~
z5iaE4G$`nj4Y4polWUT6l?Ds39b96qJ{U^hXLcRNolsAye4ELuBZf=sokkE`e{1|W
zuc@rXn!`~muXOY1f^P6^#zku<nn0*{bhVYC3MkyU(wy)r&bCr}246w#9KP50x4lN;
zuc|1708&I!-;%8|NW>iLRW1eztiLp>r#5jI^u~ZV11RlQh=A6A6(g6MyQZCn*s6iy
z(;20@qJbIbjW5FjUkY@|+7_hDM%<TnUI^(@b%=A!by6@u$bq%r5EWs0Q1g-~)fCDY
zEiObvRj%mg-rlHn(zUco?!xf=KNiC!%$u^*O`+L8{YpAmwrp`_r>Q2oH6dVGa5&o3
zToui8s#Q7QlZvR!%ubS+Zc1IF*4R4hQ3=aZ<w(CxPZj?F1)uIEZ&JYW<n%X_Wqmn_
zyeMjdR&D<P^YLTM=jL+?7&-UF!4yIu@+YRW-vzBKQ5>xCHq%B!oya7$OKnBTDFe-g
zqE=_w9j43`+SSIydNk{T<F#>pfp@XgbT$yY=qKgeI>eiI6~Z-bxmN&%P*bL!8plI-
zI}|fTOE?J9+I15GULJTyV1#My&`P?srxI-hZii`5T57^twA+fK-k)0dc4Jm=Q~61N
zd<`2*!lH_ViLkZGiNvvqs|n&#gyY6K&0bqbN?cUjy-|4YF(A@LP2@Bigi$j`QBg^J
z9u3i}Wz(}n4L3P)ma_czRmHZjwV2kDVz1!=CgiCrZXUC3Q>hUOo^&<BQoO^fnaoOO
z5p<n=(ZkBC9a5u=YPH>;Twburgu*W+@fYlkcp?_!>-u17wvX6J<?D)w>mp-SfrPIl
zo<xCM!e*de6osFnYwZ_)6Yhn-V@xsZOfd18+1fo_zAnTv%7bvMUD>==O}ed%GT9n0
zeHV(&$yCmezby8X;l#oq`)bEB>7&b>OsS1AJ&aEaF(TTTu)NO4b}I+4U%H#cw2KyR
z5t$I1a>0GeK(_j86L}NbGmASpj7Wom&DC?1)QF#R@1q%1po`fCa9WTC?QHo$=i5w{
z5vRG;ML^4fYfCAea#f1GU6{RTZEBjd(xRqAZe2={CH7Hh+{xlNFudij>g^4Uo*!D+
z=<ts#idT563`#y?+`zp;E9fLPDz4?IjeaZ>K7Fm>cxv8bag2=HlCu}GN+)k0Q1j9`
znKR^ioQzcPFO||6skwxCT@lnZZrbtX>p?htw{qpg9mO#wre@rAs`ZjwrL?=%I-<CX
zZ(D^KXmsFF&@(|JQ6WWIF743I`gTgzcG=JVrAuUpw|`2>Mf)oq$&Djdgz71-z3jZH
z7RLxmiIV4DeyGWb5}_{sez>-}Qt_fO)#++y*AP7Yr)-<}k$@${q<=!f%SyfM7m;a2
zT&t2+kVu%4YX`Fol(rBziu<SVgjn(>#7%n&SyL`VH!p$}ToC-@$XiZ0RaNP%Z*exK
zWkDXo4(0yvJ~u`Q^e>W+g)p`SKW_IofFnOcLLFK=*t8F5*6f$^k%J0x<X+ax4L#{&
zBfw46{Xs4KW8SM!(gq+4aK=t}5)aFjriiLrUG+0a#ja|s*(^?CR#R36y0QlDr-+HZ
zJpTX_d+&GRfh4ArOm-5>TqY&NO1oD2VOnIrF!?LcA?$$mwn>t&6uQTu;c~qDsaRyK
zL=D6RSni?cMPJ(5_Yg3&B=W~UBesisL?_(U6Lp}1CjS7T5(|Rt%TCJ;xsV{*TXNrB
z{up<9T%TK#nY~a!diJ~t&j99kUzHR@9LvDxDrz;jQ9PTWYZ|*z7?jMh3W<dr8gAWc
zuUCBlM>Zrg6A~q@mes0XOzqwO0JIjlvAp7vlIMucD{YcC+`1O=*|wf{5k=P@I5x((
zCP|V@PURFOO9s@=sn-c#2F!+Xc)04{wpjK6_Plt%Ls3{pF^CJQf@E7;Db@b~tZ$ir
z>>1C!V~!E35#3d)b=D1E?TAjvQdC7srD~~OXx7+<q-WKq@acV6(^h<-`Ssre>T_8_
zlb3q85@aj%=9xsYX~V>2O~Y`9kBBY0upO3aI&yAQn&gJX5=^`ARySHS#i!=qF%dOH
zttd;gUS&j$+Oho)DUW0XZTUPf+1k~%;JKGiVhh6i)VF0~&?q9+6&J#kj*&bzUwm6U
zCgqwJ_6V)3WuKxpnY@k+^y(hig_Pn={{UJ9sTc5BrjK|kBJZq5c^KhIYe<XDMEW3C
zFpaOe0;<i?RsCM}blYE5GllK%hN|5t#JeVa(Gyc{>v#8%W}4{h->+nce=Hwj!7+Cx
zK?LhY8c8U0*>e$azwgCmVAB`GKjJ(tPMsou{{ZW`1L2RAO3zqx^EVRvq3&<q98-37
z66k%szLNfD{xgjI8MQB`QU=oYLB5XbU7{u1Nkm>~Qxmrwe;lhupVYXkN~JQQ<d92N
zY<gZP309_;k|N^E=0GovN@Nwej-1rwi`y;sGFSyq1YRqe_>g$Jvc}6!wx(`8T&JA|
z$b~%?F>Ka|NIWS|EGTY&s!EE`7S**@>#Dh`uQEie>11Ox&Pjwalb3AP?)Rk(DO|l%
zm@L7|OaZ!AT0&g^05&tfl<E0tE51(~mYi0^7mXvQi;mxSiI)b=Pa4D;dTf{i6}1+*
z)oYX*oKEc95Vdqm4|6|6I6_NpIJx4CZj@Cl`SOVq)U({N5H`}0D5hNWjM~jIl%18D
zQ`I;QYS(Iu8RnmAmeR*RT@@+B??09VaF|Rs*pd-~Dyk}Ts^q`x8>&)E8F(MU+SQfx
zc{#jLjkD~Pp7$KTz=SC2MkIu;R|0P9jgYL}tYJs1p!;Ax$Uo6PvvR~ohfCM?&wYUz
z`n0+!RVan%7{hB~x<cW06uwKtMY$kqcnrF!+D0<|_V23PH}ypmtRz&T{E#yUFy(hu
zttCR*x5obf);WA--B`2~H0v#eE?bQfo$rSz<y*U|r4$s9tuY&VK3Ku}8EFLB_MyP!
z-Q-Aig>MfwI~)s(h?P$rCp%FC79cp5PF=q_BRBR~)b|M`?Gve`QtzTUmX~#4Z-zTt
zKoJ=Zy7lhP0nGKfHVzn=CKbEQ6jF$ago>hG6z^fmUUcg!MIs?6v*6f@jX6c=Ds!(q
zZ+bU2nMHlV$V}*}ma1izUMdt-oLIMW5gm+#!aJLe*5`GGgR4NydR!v`b?i26xo4_m
zsE8?@yh>g2_^^%d>X!~m(2EXEh2<y$*f>kgw01%8@h)ah$~<TjF1us4T<EyH8tm@x
zq0IF36vjpLbV(dErARHikI@|coz^osbd-FGUF}x>cq0(czH>G2>z+%TJBsBp7F<(A
zrBgLr=!xl#+OadM3K<hp&o+9+EqGhL+f+|~N6mrh)W*`xxJ$WERdXU5j{V+rX5jK=
zhh<(-MX1+h#I2->6-kK^*nu=Q+(wGE+?9=aESyWqyj-FprK=gendSxhW=w>(8LL6=
zOLdgv*o)zp$?aA+i|X>;NQkRUlXg+lj>vdI8SQ#fEvfllkD9+^SP)=~U3ZbRPmv%q
zEQU|>`C>Gt8nhhx;_`MqL=BkrrtY{|Wr?G+0NxWcw5=4^g>7Aw%CNp)cvkP?az<RH
z7b;szcPjYv!+Qz1{{RD;!koqBHF#h!dg0{)W?;Q@f|WZkgNWm8>gC;Qv1gBzuO;2K
zpc$4AY1G~!C!`EG4mYh9hgWKFK=3mlc2TT0WOcK1Pqg`wYb<K^_`Kef6O_&3-5Zv}
z+s0)39(P<-bCXtF0`6zhve*u9jNh=1lp%IotroC$%G>+T>VzJhJ*x50GIW}3lRo+z
zqn`dmv(iAz5_S-o_B(pPxjw9CD=~YFofB|d7E5b2QL5$X^g`8j^9TV_UujaPN}JO%
ztX;Kn-zis|wSf^TnyhBD>gV07OgbvOq2?-_$=AI)qFSk1=Z#B-y~mWn2P<>wMK^Sv
z%P}lS`>wh|iQI%z>)iD27@mixhWUAZl+2Xr$(p_-l>u8<FU`<8-`3#bck>T0{8ali
zUg1(Yo_%q=d9TiLEV(RIxr0`++6$@DT7DSq;o``CZ#EoXp9~uOLYqyA_FApWO7p7h
z)2&u2*|ryy6Vlh-nUNOd)d`_4QNVFHyWS{Mi^}N3MQtNFHz6=4+s+R$2q#5XKNb?j
zpJLXc8%t+9E@563UA0p0cdT^rUwfXwguc7i<%UzyFG5T#F4?TYu6}4lCzupY)3GJW
zmnN(^_vH)K)8P}_mK&;eD}7r^zeF2ycA`NZEK?3K)im9%A#9Hw6V~yddANZ}HtUYa
z$TYIlZ*1#PLf(nj3u5Bbz8;8^#c>UR)~_gAHrv+?Z%<-h9#c69Ti0t>bY#J&UHwSL
z%6qBbRk&;FiaoKs#BxgbAa*c@NCkql%@lnW$0LdLy78xwLGch30V-X5bJsgzgJE^g
zCBjrdPW!`H&hz*;(ns6vYwd$A+o)ZuQtzCR(&2MC^5ax7)^bZxL5mO^OLuns<c#0h
zX4Bj{!d6|!EOD_cx?hGlk4F%>8ffa+7SIAv$vrfH-j0}ad5R#R-A<^g+zF)+4qA;E
z>j?yf3yXbV#LHhvytz8TyxAJ-Z%>OFN{(7$dBk&Aim2j|Q-nYff2t`>sDo10Err8c
z(Kpk<;=(q0xAzxfXvLkYhiQ3Az&9lAW}30WHB&T8E<f4-08BUhnJMlF7n>GOT9u~|
zjdxZhLIz@J+;L9jy0r9lLp2+nw&H-I?}JwvQVdvDmAf}?^ydWIf9xMm3k@1xh&TM*
zg-z+-LVmN#Jm;Be<gpJu)rq#`aOpDWwBxH_+`Bh;IksS!s%Do~jO<&PWVPyoZR%5*
zX}NnxTIdni=D@FnC$af<9G8{X8ivNs(rtOMju}g<JW;lra@NY>M9FJftaf8qh(;r#
z0JASoRB9Wfr`ReWt!YF|`jVN%o}f#EV)#_1w_NINQ=tK28JtE*<vSfhs;x3qNYz?#
zhai$F?@Hwvyv(Uc)Ii!Ie3@kc)mfbuHjX9uMA)KcxAk|hwqFfau3(sr_VzlaYq*>1
z>%JbXyC<{MB*0}+hX-66OgV5aQCr=0#ZT;4E?UXL2HSDFTqmluv2P_+O0M`{BEgL}
zlnMM!Pz8&PRk0`NsE7(lRIhwdyfYCRIdbVUq(BB^4wz-<8`U_1CS$-|_nQnkk1%H)
zk;PeeR_#SkAreAeh22qw^Xbc16l*alO)8lg@os1V#<;kWIqv<yU~6vr=BSJEE^vLs
zOJZ|%>~}_$ZLkgfU2rq){{SXSGUJr9Wazn5t})9S`ZHDv%GWjGMXqQ|)fF=_Z5&s;
zYG{YGVwOUwz6_0$?VPcN)Dk*z)58ked0Z1&qKmxgM5Iyvr|PQTbVS@VPWd|EGW7Ut
zld?LIH^^4e$W0TQB=A9LNYh#F;^OZ%$uN4tvMID&ty7<OQmRIN&M*8C1p9$B1lyY^
z&~W)VyjU*t)J%A*lPx!&2>iZSCq2=z8>AShn*hkERYRM=k*t}wn_voNVqk!QlU-4$
znKf~7+nVsj?)0@3xPgNz0xQ1V_L4yBfXHlJ9TwXYO{;6gb!(h;FuAT91Tr*1TB@xP
z61l;om5H}Os$ovKg|;pd_e+#gmnKMw(u&-@a95&p5*9{Pw!y)xZ3w8>YjruGOJ204
zdjwAkm~}-^fe}?#de)yd2@|JRB+SoL?i`0K!i7@dJ}*Y-Pl>s)!Ti%&*+C1?R;sFs
zm9LT$!P5H6qTOSv54D1%+NqYoT^*0BlgdjSph?U48z_wnxQp6ZeV^}c`mMuXR81Q@
z3|5@oa2u&q%PlzgU2ldtSu~@jnuu`eHFU!zwxfI{mh06!h)tTFs6oA4xUH&#WpdA?
zP%78_oF9n1r-w~uz0A3?r&K$`eDqH@vQ^x6+zmwr*L*-;R8-~~6z}6V_F1*}3?!R<
znS!_!vhe-ehsKU;(Znb0r52EoZ4??&2}xB~%1}A9#Px?n>m8lSIA&?EqjpJD`(QV<
zS*)iegn{82Dre2*P0&xNGFbVf5}I++U7|ImHh2*!nslI;t-QEBTDDk`o8v-FNbI@4
zapk|C<3*{|*l5zaM1W-CqJ~T1rhL#OIYGsob6ERoAbh7@&PnvZFNMRC+;TG-_JGN>
z<kxR!WMYa@_FH+RP8+Lf4-bJB0k{O5m9g>-<csvjO03#aVJ%TgQ+0f>{u$|@n#3d|
zHoynQ`{P+!Akwy*JUN0P7UmgwTRVC~ZysIrCsSEou!`%}^Zx*(7i=e?^!pEM5DhI6
zrF+z@Zikc$&P<ZpE+GbdHOu|bdeEkqm^_1$=e{*>`fAJeL^W<x1*bf*eT~9cJ?F{o
zRl;g%9Tc=_QXtVPi^;E;zhpx8LPZ-#TGIkbcp{miz{0zb{9m#Kbtsp1Wf(#6i4qmP
zk1Hcb&-EPdntc8wFOcx4rTZ#wU>XP91tMMUn5O;QTty96+ACQWVbe2B&w#&@w!EO+
zww7LWMeE#F6U5V_ZB@Nuk=)^I{H4R<#%<YqTBLDFr(C$rR755ivo*JhDv9J&^SVik
ztmFRMa+>D^cXJY=bbHug!T$h<@)}8qw)<xDi10Ud$pCRtdW1{sK=P}Gr&yMec4i!G
zS!0DWtl=AVbn{_Fkf7`DGys~rM>N<GEcfkObXt*FB>L2ZNf8kgRdd`v2$2yjw@A}d
ziP_0!j5`*b9A-T`V@M+8!gaw%X;Hg|yW=@r*Eu%(A=1_cq=!AqH+myAw!#y6qhi|^
zBTd!c6~3lC15`G$TT|t#<pI5WnyGaKD|no5#^&-s9W=YNYgh_38xeP9c6+mnHSu$_
zu~zWFc*V<zdL^71uAG1A{*#prNv#!gOMINsn^i2_Cn+h1y5XS>Yi{bN-2+1w9LU^d
z`G92*8$+tC%Sx&uXGq;*CVIBi$yu0~1iOg6tf;M<TqzB5$-BX2WhPZj%y=uY-$bq3
z-4%)Ox8|ojKZeeGnPKmQyZi`OP<JL(UTVRt%wFN6;QLLto!p=n{hMfzH+S^WNDpTb
z``IP&2HvIINpw|2eWuhCac}jbZcM%V8JafJXJf!sE;?-bJZMLVZY03ABFb$Js@2<F
zqD+z%#j}`uq6zsVPjxSlMJejXV{fI&tm<Kl%sDYE8Egd*O60j}ok<pd2*(inOwRuR
zbi3-e40uTpqE+3^7&K0ac?suO*jPu2z`ZXW1x!wz=w?<nsEAhm$sEo@t9L}??6XYC
z1J98eK8dIcldHkC1KM!5Ce@f^&U;$Fs|@hJGI_nK-aAefqJtJ7I+LemHJXmvXBo-y
znx5sGC))eNmLYS$B-uFTJvw+!ER37VhTEWvpC**HGPwelAhd{*fUC{E7uZ`K$vT?d
zR%%xwE=$F|DF*tXbH`sfN+XH2tSeTVt4yL}^ftf4Q*wQP5+z!?N{UHp2%;inD2W8M
zy(5_)+C1?9ed}DfMNxVBpbl$hvKU>KYGuVr(yP14%@<@!jKVzIh!smw2)FIk7d1#G
zI(lU{EIy-c7i*=T(1{A{ZF`xjdt}pU`l(mNhH9>a=MsdTR8OKh7<$f$S~M*pc7iHo
zw<@QV7B`WQaf!O*(_m&wrL4Dp`l9cEZ88>C-pp;Y$!@2UKDgc4Rh-k37ACe|U9vk=
z8-9|2<2{wL@@$*0>V*cbp31J|RotCX(Z}sc6qs=Y*rM8_)m5#2YzrfG>ae|#*heI=
zp7|xq{J2wx_uWjs*i|bmY!1;0d8_`|=pnd)8dfd3rzHWmNfE`^u)fHQBPoKrH+`<Q
z7Sq1|n8x9&m+(oJ%epu9qHbuT4NF@@>O@bX1(ftBiN2cl!nvTTucve=b9q|&D(16C
zrnBgusSB%BV<z}ZI!9q1>#a?$C~m4yLnQN4IJ+EUt+$WU8X2s3{Ms`z`#IGea5p6=
zgtYpxc4aJYh~kd8vW+Nmb>#??gKRD6@fUj;Qq~XSVJ7QHdX(2th;5+S7kb6Tvl=C~
zqU760Hc=|JuZy`oXa-Z$M_7v_$O_RAE)f-~R;rtoIKDJiEiKXsY0^vu?NFj3rq@3;
zBK9p?O(VG%9|K+MUbwxRQMLC=iT1T3CfXjU#7kAmT&jqdQiNMKD#h2iXS1mpvSGdJ
zf7Og-#^$!El*L(mn!9MkR^+FX<$&@Fp+^KLrlj31*xKRoV+td|^|!;FBWCE8kR>aG
zi)NeZu(nk?q#JAv+Jl8}7s<^V#P8v1nUo$)RJ-N*AkSW%iA{m8b40e4UUIAo&Tb|*
zcu8T?O|ah5Czg?0Pr`EaJbjktTOt%qp<hf|xv=Bg*;e8bh7TQ-*{#sUZ28R8*?BNw
zw+wf!5nzat#M36|ofPJVu#(PYB_;$x;S{_Mwp-DHjCBz!&dxBT*wpGgk=E3t4b$p7
zb;n18iox-^qb=NHio9baw;*dsw}K}$TXNbq_8}r_{HECSt+t3Tu39<kWT}&~vWas>
zK&W1bS7-7m;3A28!O53&&%+&8DpM4rLBgHPeOR+0+#>BWAH=!-Ts7e@CPHO$0iYsZ
z-9}n*F1?cf05ENJMjAYokx7PG%{|cAf4VvOT~+KjYe!j~Y3Y<(+XS_~^h7@qLP`QO
z-dVX>M#ZGr)W=H(H$Fv04W!6{ix3=3cXs^f&QFfUr%MU|*F3Aby-~~B?2DzP4>a3R
z^uTVVZX%GL3KK7Kmo2r5+_h|xSJqfinIW{7lp-68<>oIMH(HD6QhCsImY;FJ7TQDj
z{p=8#LQ>O+^wC!LoHAQSpfR^Mr74KYvuKNc=*X8p0_8}m8!aP1x;bGI641ZXePeE2
z3t^Ll(U{wEIyRAXk}Z?j(Yhe}U^`c;*S;L!Rm6Hjrza7sx+XMC_^G-x$+qKbAKARi
z<Zh^J<bYW(S}b%hrDD>hu%2JOH*&+N;}8}LKI|OuGavRd4&w~a3vF936EsN2>mEeY
zvof-8xXs8qvRDNG6wX}VH4;=(CCPF{&wO;T&Xv+r)(ILGv@Y+X89?Jt7uvXA@a6a+
zEFU77J&LYvR>V&QcSlCOoY06qD6@!VdOm8!vr!%h8w6ENvK*mIms*(m3?0$cnQ2v)
z9C5o;mSXLdOI1>o9JZ6C6t=*GpxJQuq^ZBDX$HuYA#o!^oGNcbx8&-DY%I659aHpr
zYVIAsRuo==MjXK94NmE&bKo%>S3fo%r3udUrzIZ3C#Ged0ane2HWP<>F3d+ow&h06
zOAul%KUF6CA;TXxch!jJ`<det2QMlnlp-=4Mx9$}Se0~T_JSM4j}f0ino<C-y^hpx
zYnzxWK#*+PIc~{)#?yeCv~9PZ1CtYLl@B`WZlWWot&PQ)qLS5jCUJ~Z*ld>9w4j|t
zB0&;ca?MjXF?Y_6lyzz~US#m1r(9^Yv1#{&rJK08OOqcKkTbIlU>_vf`^VD*%9W1;
z3z&9r#eq{WO=8pbX}ppl>jzTJ0pG6YRn_OXx}X^ajF}3|D@mFSQncQ&c9`1|HqUgC
zkhCL0L|SgHXtjm*?sZ|b9klWasUdMEU&{<uuIyS?515@mR7F}Mt$eW-=cNW^qHO8a
z_dwR?S42}Yp?aYz(?3lj+%?NiV1b-L7F~CBC#Ep;>y|cz=FCCjxOn_K;ExxJ_cbaE
z_AJfcvQiJ02;f6a0=lx+3Yi*!fcM7@(6$p|Iw3!TNu0#PuD3U;ZO{Sb8!cx<yx1Qz
z*1sy-5VDh|+h|6VB2@#+rARqzl=b&Oo#M1nwEI#9eav;nTm+(YdP)A+*2Hg+(M5ri
zA<Qm4^|plowmgOCos^cEn`>d<b&v|a;dE<DMH8H%O`Nw*+igWmhN18T)#gd_d+2)=
z-1|*&1{|AnRLI^|C(tXMV5CJ)$vY{9%L9TzbIu>dphIYRLm>iFo}LK7yqz~P&^jh9
z(=@2{#!X)9TLf(;<$;l)lk+nF05@Xqs~qgk&kKTOiD?`$;Tl`3+J#J`bjo5<c0|n#
zfSP4QLd}yeE!js`6<n6`rj`s=L=D6RSYB8><cj)%t7C@hINk>>=%&rx>>#CX>R(ni
z(&8@-Erssr-wBWf6s-{zRWe0Np!L!!xYVvxgO3iSQ=>#r8_VZIJ6nFuwIwM!!t0%Q
z8y*XIV@`ijtE(r5g|foyl})EQU)67$6|i$QpdG{}b+@q5f{Jw!5pzXtqIbQncZJBy
z&bVEekF<5VqMI;J<0q{+QdkU~yt~6~$<5A-)dc=B`of))DJ_dD?c7X)S{dyx<fD63
zrJbD48#v(+3Gj`y<~*+Wv8}8{OR!G9>D;>++n)zDeAvYo<)tN+D4BDw+Zwtb^yd^+
z)VD;=_>^GB29+n~<X^RIMh5Sf!wTd%9DZg|jACpII9x5s8pTgRZ|_AliD7J~aJaL~
zfgr?i<}W1msI6^Mh_<3;tG*?*@;t!9Oy(tJC9uoet?U-$PZAZu@~e~Bsc{*GrW~td
zM5k3Fr5z(jG(sIiJ^b+uGsEO1Zv&W}X|@Cq&fAH?9JWMlyJ|CQTy0pm6z&5jhs|OD
z!)~_onweG|9#nhlyy#I(U(1u0nZh)xU91ZhbQ)Hr!BxFdUELh-Z;Eu@n-y%ip^=v{
z8kfqoqQRX0Lo>#MHs_z$7-X$Y3z}pwS(e;hP{{4tx1x}x>HLf1>=bpNt+uUe*Xf7p
zK9uc>QaF1nF6cQ@8yxWUMJZP^bJGTd<rihgc4^VhGToO&&AQ`_655*Dj>;|84KmNZ
zx+Ph2d>2M1aT%eoOS*E7p9ubbbZO4?u8wHd8-huq0XA<wDXn?UtFqzGqZ(m(ybncY
z+g)s&p$>ciH(l`tG}RsKgQNIX81%1e>e#qDLDBfICV(d8%HXjUf&z;K^qRVno0ECw
zn?O#Me<DUrvP;P`IVQUztDjQ&cg9C5M*0yju4x)}NLVDxjrf;B`Ax9{q{cGXn~gKV
z4?06{!XEDyB@?)89e59DOMgl?%4ajOSrc2fduwh;i<<dhF<6d{nomtig1QNi)hm}&
zZ)>J4Iu*InQMfZzqEneXF;h}n(=n+D+4E<U5mYZK#qyE1YZ|un;BD%OM}Fn`V)-an
zFQ`Q&Hjg!0ZsN^p0JUD89wIF1@CVg$OuTLJJxJ%YT*%yPSs=5T-RlIcCC5IJ^2*6f
z$<t+9eT5v?dJ-%aw%R=!4>Xo*6`sW>T4})SHl;uhln(dKjAeFn6@IC-WCcj8a;<8l
zm#5*%4b5@%>T2W8lba-zttydqO4mp;F)|g_yUE+dPxXyj<*7q@UUU(nboi5*2C<%h
zp-<xzNzF^)m~`8Evo{<LMwHp{zAOWA>;C{~SxhbLa$tF0<3cRE_}?%vXfp;^stbE3
z(Hlc0O8C*L<r{a?u?$@#=TLP{IbtFoeYB~=1<RcrSS)~CIjW}HnfMYj&OY9~j=M-X
za;448k$mZ9okn<M`C*F5BX=VvE@zUJh>1_47qm^5)j2!tkP|ZQvDiFfL&g5+4=KCV
zmMw^+#H*uiDl5;sD0dyKg@FqPD<THs1I#=D$<_qYpiT|QoJ$$M$7a-b*m3}U&1v4<
z@<%gz{JOd}<<M4)(u$PY`e1&eZG-uBmb7^^BIzZ{URo?=yH1qZ5M6;%xg$Qa>e)>O
ztw3$9$&zsRQ6g)QbTo2k3|8J^UT%#eTUcUqD5<ivqAF6UT2(WR#b-jy#5dVUiCdGa
zpP3_D3%G_fO|)vrxQ>b-72=&G7(P5{+eWYn1~F#l+i?*!4J*QZKR3-N-R^8g*o>2M
zPqfQ4QPj46HSR{~Wb=E5$D!>=Xx!c-dxZTN)%<?xbP-+tkShp6VuXsB=a)5Ntr|{_
zc)U+j+17REF56dATo-rNciwfeP290?mI1aAw#bM=;R9YR`{7LM;|Xal9XR$kHf^$I
z1mfCXl7_IQbSqe9A_{)jEwCo`kvaZ16cch}g9pT#eX==MEkY99mfDNpif*IbJCT{h
zSi?IRo9tltIvfzT1+VQ_6Syqh!KjpfxrO_?r8c46$U-Ra%tQX2-<q+ep0_Oht5%$?
ztI#g5HZOAzSeck>3}#zYqM)uhbr-F6U^zdK_&<j(<1oZ$N=f-!R9kt`bkd7*(y0?-
znQza&<gOkoX65=~5gv`p9LuU{(&w)gVQiL0_DnSRHYAOziey{h8^v;$N5ad9s#Qx%
zy^7|Woh){6SR1vAQlh8d7rT3T(q@>c6U$m!sov$f4u8m<9qU#0(5=~5g)iswD%)&b
zEY4_^CnjW>RRD1YiNGh-=EZMm<c^d~>%a}d7U(zYIsy<)>84-O1=p`*p22v3JW-wH
zHO3~T@jNNeeFIwBAvW(wPyNxI;aNKH16q(CTRu?>Wpndm3h&T>O+E@cx4{|BOG-Yk
zmaliB0ejh;`AN^==Pe{tEV|{wiN1rs$#iD9H?yB1F(cNaj;c6)^?%kIF67IO$v(mX
zkX)(Y*~%jjYcOpztqO{b+*I0(ZBv*`9y_vgXDHKowoS;<?moWy-%V|RTytzjeo#VX
zEg~VJ5Y-g6x}ccJysW(0HO3AuSy8gLcIsOjVWXooMtX*(1*4_HjUBN{x@uDrxfQl1
zzrk`Sp0S=CgwD(}W3q2;iu=L9S?W6d0K}hd9uaf|cDPrBKFDT_GfWE;8JEF>GUWEI
zUWfHY)+U+{J8yL^`-A<_jf6^Je#ZppIoT89#?brC+}?Z;ZA&k)w1t~^!-w#4-~QMb
z*wA|);7zJsIXqUXd%zF*u{O79^u7m%Fl3H1H1j&mSl)sqsOfaNTQDt+FW8zrhZ6P-
zyR8}V>k1*l__i4;O&QCpZHtB%w_B=4er#`IxUcIl!|=82UM5Fv%!|(RVsg)yH>iZ}
z5cAZr>3!YukKlq=8<zJrOd5MDW`q1s_D1#;qqt5ZZp-3XF3suvF#~L1&otiKZSL=*
zCPiaddbNj49;gP^$|{4Rv4#l9fw+M84PS4|{2<1ESR9oERc}Qqu65eZ5<cT#2Nf2l
zlCF8K=-%21w9j&kn~f0w3aU|6a#gBRa&<;6T6h(_$76)-jhhgtooK%z)-x5UxrIVf
zZN=D2Eme#3f4sccNrp{0X<eSGS9+}?GoEx91BknKUAu<Zu4NPFTlzX26_7<zMOrR-
zW%5R&EfbuXKcd5gN<NBZZsg|b=8RuB^`xYvC9vdln$_~mIN9X@=VW$aAuWZ<OgPCE
zy2VlZV7Rl~nJMd9vr>({qi?WWDyX}viAqu&%aYZ_tTy%56~f@sb=~zNoB27?<df|~
zCP}Mh!YZvT1>T#tMysDOc}a#OCfF3Um&d`YFHc4#t#vlvPjd?mnN{F_(gpOz@61j|
z{D>|cGk0=x=B#g<pZ$gWZ}}ZJAw6Qy9HQl#r70J?F}XkTJqcV!)DmoHiL-GGO7oO*
z(^C@l7v<4MGPqR>f07Sf>~Qn4{{XR1nz=^7wz5OK>*k9A!YNm!XB@OW(3Whc07k(q
zNieR-!|VVni<YyZ8F5CKEDau(rCPS0YD5Uxof-or<QqQ-jj^q?PQ+70*eQ1jTR<UE
z<nOeP>vUjztYt_3inJ)ao8L)5{{R|+89Sn+>ZdAU=Y$iG3<E@FF84@p?@A{uX(Q=<
z2*e-3<y)3E$N}+igsmIsii&Do_lp^_khvvr_L`Mxqh*t|u)g39D`8cE8dsprV>+Ud
zMr9niZ|H~33u4NN!#$3km0HZrFz$OJLbfzbtxtO!yE<!jDBEq-c`*WtYB4>DB|Y;O
z`lIx0#e<RdD#6o>6ndUU`n(|%R_#BR_Bhez3jWTTFPRt|w87|xj++F_k4z9MCEHg0
zmd17tR2U9{=vaH(<^03`s4I4s9SP8n`UC#}8Sm?h-~Rw6?P_ZP(8(qV(89&TY*x|M
z5q%0#TY+}4%@AlrlM9zko|>oLQ9t@&@P>@E32q%B^FlHi*_u8zF2uujJVx?~=xedW
z@O=3UG*iWCnAZOQ`39F8!*dEr55#UL85S!gPj!HN8N}ve1YFV<8UFz4$GgQSu4pir
z(u36(>u%^IJRj|f=K$1}BodR3I_%gw+lZRYj`N1!#Tn-+olPXd)R7R%lwOQq<)TS+
zs|_F8u4&D>EAqh?^tM!LjcWw@C71NX{KoAh=9fx<CnjrkIn$mi@|(1hX>_?XypGjZ
zE26(A{4;BRq|$bxoVspB=I4p|VBEBe4kTY`rFZmxUKpR4Hj*rQNK&1LzlAdLtY790
zhU<<>68ngEMSgJDXn4CH^njNoM>0x%XrGyBZz@fT6Hoea8mC!x`O!Zz?ByCRB;u_#
zXo#r1%aSKNPt3?UNQ_!-*D&dXP{^A+{G9MyJWcPAyA`~2SkzE%AWPs3B+fG;&3mN4
zeepqeE{w|(rr9r=5U(WLzrj|tQHrY7&z3dGDf?P4Bq^G?^P;%}clbI@9+Lg%&x+&*
zj|!1#HUN*szAN$QKk$M|jIkubVfSiRS;jpNjT_{G%JbNg_F!RQ%I)nCe^gFDD%wtg
z{{YJ6exz@b!-Jcg0RI4%%8!~U6P1tsp$k0bB{FS`a!u22;;zo<$0=Ru2?U>G4FK#w
z)>*}ON;R^KO-s+t3qrxQvq8A4v;A8>Y*;!nK_5p{UfLIOA=&A6NjXui$-~9;K<&w9
z<Cig3L9}w^aBI*}KgAj5V`+BhCEg3c(6*iM{fbv46Ma9n5q54*fnI9=06czPDAw@h
zsgN4&g{ZmhK>66gb)S+@Mc21V_vsbS#tqLAk<3<Ms`=mTi|6AAx3L^6i6&a-+(rE{
zIk>@_xULiw7o2RWokev%Y)*DCWUpx3j1;}<*cojQiCj0vKPHVdoPS466kBxl)}wmC
zX5zEbL$$LQ{Gp;zoh8E=U~_(=f*c8Q(LCs%mHq>z(%ByI!}JVi@<E)&lt}hdZzC>j
z0RkmP)xYC(d|1!rH~#<~ewMIke%DbX;Y*S)@|a?}V6`Mh6D3TDk|*U^ntz5KmTX<v
z?e6RF`LRDMAU>AUnU+Nxv9TL=M&;T1z3)Z?eAgRn!_)jpRYe7~TNP`WB6xUWxwg>6
zi%sz}Y)LhBqV@B0#O7pcgwrfd8v{CR*PyXn+=HnV((G-@rRbLTqMSW>lxLffyIii6
z;_q6z<Pjx7rK$Z<T-%#thjfD)X;Gqht}d0s{aIZTn$5Cmxb8MKpJcnlzWEisyKLaG
zTvheXY2FnsGUEBMTbs5`mlMQY4|F?So|$m`*qht3UG`k~5r(nLc5AeM(-b*o_s?1d
zbDK|D(um$ub(}X9DDFb$&T%)6P1{tRd64eAy1YJgXP917X)QPoJl(EjAXHTOdQp4E
z$7e4)cm=1=`QnUk{{ScDl{_|d8Uvy26*#)LBF1^9<s@0b=E<`)9*x2`uN-HePwaBY
zGl9)Gp<exZOS{9f7tW~J{v39Z;ns<4=hyz&&pDev!F9l0*R7;H0$Z1BzKPE_D5B{4
z+RoO^OiN}5`Ay|Cx;na-w$kBN*N4-R{aDxJ{{Vr@DjGSqn@hl7bXVk#SuoMZ_IL3Q
zTu;dyukz7o?8q7H9~a#h`BY~t<!~dd#@TQU621r@<eOzlo*dS;?O#WA(XMd*GH$aj
zb`mx_D5JltbWQ5=jnRhg9gxUZnm4^2*wSrbMEDPI*&hcF^+5USQiO{PX)V3>H!jUq
z?d#&jen87kQ-<VZYKT(+l&oJq=<lL0NM)p3!KUne4D}~y!<-IWpOBVb%2quSnW%xd
zfjOfjJ-@@d-pOt#Jp+qk>_{{=klx}U4*m#JJ>8rx9scxV8eJ#~qUGn6*MPvWaSG?*
zY4l2_kxHGqsu+;3GTc1du8O}K%X#*pyvC5S1#glu`L6ySho-|UQ%T#y-etA~9wz|{
zhouGQS<AQi5K}r|He%{f0SO3gx38`P&&ccBi;`z4rgQSFqasaiv^HUmYt1ZrbBdZO
zCa6?at3gy%Pe~L_`6sh9)Y$aT60uuD8|!t}ZGTVIirtZ<S4(kHO6$oy(I4rIe<NKx
zr8uLZa!eSGNo^D5U6`-r1XCTK7ZaCwiBrD&BEOIv9NsWuiZ8rkNVMBuEj}y@oDfGi
z`zYw^Pgq2Szia14f=F>^SO&qhEuh=;`{aP~LvBr@tSL9G7i+b*ZuI;`5|nAGPB|-L
zx`Jm;wYu7;jRgMy=m_K|Q0}qf3&?U>TTb_fzJzmcVsBExN~oCLwW3i_RTX@YtY0R&
zHYQ-kc1@P$go7fY2GMN)09Vd~V#|HaMLUI?ZEIC{hT=x}elJupT;UemPdRYf;`rTO
z4j4Z5HgrC6P{vRW$1h!-=sz2Wy^M1x-Gp0^dy?35iARYu`muY>%XT<>!7x;9ax_h%
zTWwx{3}>4fjfFc>_hY(Z91dH*^RpGs8wnN~>tdH#zVXd@{4u_5S+vmG5p>m2GENb%
zk$O>k$<Vy4nNAykB!O~mYe%c>jNdRmTom?2527RD+>7}r59J%8Snx0*14mP2R0%B{
z`K!YK{JH*#%<4^y4K|ls&|YNBzos?$Y7lD#LYEFvZU-C~-{h-Wq}K!&CD{=oa?wIR
z27U+^<ey>tcq2AAB--r?ZD#}grfn%HfCFfph1*D5zug1L#T#kd&H#$~I5Pa(S#-Iw
z=Gobd{!nt}3f`d`CQ{)m>*<YtOL{qCLS2Wz3_x!M3rd{veDyh2LgNgifr~AG+_#YI
zrv=b_H{R&s@otl>9h03>xdQuA>*>~!S?qo%2lz}+;m*q8juoJKvR4MmLfG?q+<w3@
zO&j1>IjeHT?tDpJ`}$$^Io_5?%<9|`apiDrL=?-f)`8}6j9NKoP)#x`6je=gUjo8A
zuc@g9&%Z9!+i7;yg_g}y30veX@6<ip8JT&2O@6#COPjSbuj0BI+vpp|tiH*#Ct(K4
zM=_k&3q6L*u4Eh4EmdAGK}7yRyn)W)#HhN#uS&jO$i@EvDLJmjcMoZGgy8PstWV`<
zHPPajeKs5(Zf?EsJ(*j-{F}LrVf7#WK8PnPDR-Ala!7Yny&vt2@^0Pb!ylKX(+aDV
zyT7I}%DMOd0GEHHO<1;u)p|n{lVQBoab}GOoHBa#?`;tO0BmoPwmQyaROzx(jyf%u
zop;Fw$L?DeALR7~T6Oa=B^`oI-1JC(-j}tT6moz0I8$tv+e^?~@F&gMlg-<=t3vrO
z>Skj>RLy>xbH=uB@cIr4m8E@M&7XT=PM7Ak=f(b!u2md=>bSnhahfNTu2EzW3q0=2
zt7;nA{{R=yqj52Jux2@8aCK-!v(bilZ<yOG0*=WViVegG93k?S#HC&os<!BwBJNd6
z#xFWj&8&6muqWpx@x;~(cI<cDp6KQC7UrAb(hmcsCRyZ^r7PsGMg^NJO=C!HbJ{Dm
zdY`{KvUdTF*5<`2_jF)eIjGyzWcDJ1M@&~bfAd8AF}^~Tz36D<(Z29J*!)jSA7QR^
z^G(b&bX!bmbyF(!eCQ2r>t!s4CbHYvJFOdj*l%$yUZvY*1g^W9FMBo;NpjY%(*FRg
zS24Q|5>S=1&3EM(=EHWhGTREPTG2V;b7T8%*ApnAWtHLk;t?e&I=bKkU7I@klbgnc
z?}(=^gqz?<(1@MFoc#Og<3Q`H4dyU6SZ!XvSz>r@P2F%`$OO@ZeHtqGNq)?t_XNhG
zM!K;LVGCn%acx(_3;zHk4_@pcmp}yoa5lDjR&jjT5Arn8r`!!;D}<#@V1{wO{0$3_
zO}>C?tz0{I@cDD;T@b=nhp|G()f{fcq48~R^lZXc@WV80hVx*rLLeam?^3nj26flB
zbeJ=(Wp1F13!2wfw9;HgI|<C6ov6NP_Yru5y7;?0zMqX3y`10hi!4p)O=A}_=CXz6
z!TCw^P;+>bvnn9f0YI%U_3v$lIce{52df5%j9hU^&q%Fz)+r<8#YTy+h=_tU1wpBF
zzAOun)QcF42hv0(O^l&y;$yOL`@ktsE30bnuh>ycB<%CDL{$|`qge58F{GwAz&c9h
z-P44U(HK4WbMqu@#wHAour0S{?OOhJf7Us?tGAkzOkP7RXBSJQ_Coxeif%k=ep$d9
z2yCwvcV`3Hkl*@`p3+P{S;cPdQs_V84yQ|sO1mg7f~I>^QQCp>Y;C|<`Ps&m!!{Iz
z%HTSo5>s|j)4_`y*TKZ%tr2hHE>9~+`E3ep_ufK-*AB(0Y=7Nbm7i8`sgROY8|dZL
z64>{;E0-7dR!(ECzbve{;)r+1U!9n`aIPLJm!MBr=+#>Vwzl52+lL-LOsV!5Wr-qm
z-5qjJsoqu;_vB_i<Rx)KI^K4OknMbLRyFv}ovCn{ke)QTNOJGDZsGI0*afk2+}5E+
znqpqM)j=UtvuQ4}?>mY!>jH^MxnpB!t;=~TbwXFieaN7nmk^vcgK3f*OvP_4@Ym2;
zA~+z-rm>^hAwv=JrE;VLpRl~NMkR+Fj}xi!px85WTggBxt}QIv%(iNr-B9+*6J(w>
zEdHwV$;#DPB(+g1y%&ZtYtvrE+bLN<aJZC06}wJR=Y`8`2Q%i39gpIs31LgN1?I;8
z0367vndNYYX)YQqqyGTMN(+w**WqoChsV6!F{{woBs*N7k|3!L{x6FKw+ef4*m8YO
zSqH_n7TN{PNfebX+?{cUSLb5d(4&r`I8A05kkvSnFpocm<{G8b4iV6~KNO(cw`b(x
zMa@nsAvQZcH<k;F6OW3?k1ayZkpih95heXw)*r6dhqrE>4(DBb@aHzRbz5Ja`Y#X6
zwr#w=;JE3y8jA85u>sVVx|#FiAX*bo1hdE`YEc0ZGNAY)muke`1-r>{n|-kZLtBo)
zQu%U>Z0^K7)a1jii4jzU$WdvXw=PiDDpn$5Am@_FuV{6Or9vf2u2q3#^y{Nzq!*Pn
z2k1MMdZ2kdj6a-J)L*!jDzwV59DQf0p$_YZsBHRB(VAe0%utsrlP^qFnPlR&7Ku|d
zRPsWbrJD3eg%zdAGF-BNYt@^&u~2m-l5_KVV$Z53c8bvCnWEN-)eT~0k&-EV!d;$3
zl;-Dy-=t`iiIJdbrFchdU9?xLFIo}>4q@vXZtat0(k^vXT&k<+imhTakpT5^z<SX#
zqKYp600eY?fj21Wf+{65ZPZnzRcx_S?O0m%jlcZ}Lp1Y`J~xu@U!=2xZ30Xw(|P+%
zc5=(FI7dIUB{5M%b1bY;r_lk#4AN=xmU*=`w&f)6lBLYO>}zlMF)T7}V_Kl5sv=`b
z=SuHSHZ_)&+Nj;cr~-A8bJDTT`zm8Rs(>P!t6xg<#;DKj4?8sTa&J*nVMIo$RYXxr
z!x-xp$r`0(Lmk1t-n3?A(ub}>62gGNDsOSbx+X@#DrLh5?M0#?DkqY#Y;hVEd$>2;
z7Y2)wAtI+m6TuqW0WU96K~z=lYP<Xpu4=}BUnR-5E+-MuR=ysn=i~wXD|o?C!COk}
zR+(K?PH209s{;wOYO2=lqR*a??SQ8VH#MT&<zWY0b91((pPGCpNKopP1kW|i5(Ton
zwOq}<@HmJr7>Qd^MWCwDR=-4UDP6sdI*^)lh>;ZscnYm5N|Z(4cZLaC#799BGL`I?
ztO2_%(4!n;GcOAOsB2u)<V20(s+6&Wsgt5Eoi9zD$;}L9ZcEtv5CDCEQba{Z5O#Ka
z6j&Y-V#|;+`#{^uDOw>fh8=a<_SxOl<Z7s@w4h{}CR?LAIA_b3+&e(-=-R(8R7_5c
z2VIQTpierQ?Ps$R%ULOewAr#(3Ri7WX|<N@;cS*iayt=u$AL`Nq}d3H?ptVyMT238
z(A4cRa?|dv8mOgIRY6}RAX{UY=f8PK;8QPZ7izcOCFbRn1B*<&-XS$A<3P!%Au29a
z`4h!~Qxz4Vr2Zu~@heUp;6jSEN~-SXf?>y6&aitTQ(}ZWD_Ug?rDUIEJ-tmzsEeL{
zh!)bNq={X5g)aLv+$%`NKYI?|#h;aN38rO)t}OLy&GF&>Sxe#go0yFAVKBt8-gYYL
zmg{J%zWCAZ$0TK?^q7IMplV30=+@q=V{}{fqR$wcY4=+cX3%(mc@g1^<YIeAaVeSk
zml~MWm?Lf%0L60XLnNCiV5qdoYbIP3ycDP@T2p9xpf$%xiI|4Pq?%(hAnvSMmOwRB
zB-HQv&}fY-0&-p>q@7R6$<E+!%pAKw=&5ZqHvS@uqjBZBv7Z5L00lCl(!9}BncXb4
cr&DRfrWE3HS#%o@%~D^mE;`7y734qv+0#qpiU0rr

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/hippyLogoWhite.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/hippyLogoWhite.png
new file mode 100644
index 0000000000000000000000000000000000000000..20e428e2fa96062a2b0e4c06b8c379e24a36670b
GIT binary patch
literal 24639
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
ZIcDMS&LgEgX}y2tW=580o*THu{XgQR4!HmT

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/logo.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
GIT binary patch
literal 6849
zcmaKRcUV(fvo}bjDT-7nLI_nlK}sT_69H+`qzVWDA|yaU?}j417wLi^B1KB1SLsC&
zL0ag7$U(XW5YR7p&Ux?s<Na=)C)s<=p5LrlQ`Vj}i8j!?Lr2R_OGZXUr=_WGNV*Q3
zf2k=+zm;ZH`J@Y*r-qrQk(;BZj~xa<rsClC5CPOe**PH$5q1uK9)k!4GBOHYq_LT&
znXV4h-VG&gcg`d3i*hHS$;cFxeBJHrT@aqYhX^Mm8V1^F=>P$d4lvMt8C^+TcQu4F
zQqv!UF!I+kw)c0jhd6+g6oCr9P?7)?!qX1ui*iL{p}sKCAGuJ{{W)0z1pLF|=>h}&
zt(2Lr0Z`2ig8<5i%Zk}cO5Fm=LByqGWaS`oqChZdEFmc`0hSb#gg|Aap^{+WKOYcj
zHjINK)KDG%&s?Mt4CL(T=?;~U@bU2x_mLKN!#GJuK_CzbNw5SMEJorG!}_5;?R>@1
zSl)jns3WlU7^J%=(hUtfmuUCU&C3%8B5C^f5>W2Cy8jW3#{Od{lF1}|?c61##3dzA
zsPlFG;l_FzBK}8>|H_Ru_H#!_7$UH4UKo3lKOA}g1(R&|e@}GINYVzX?q=_WLZCgh
z)L|eJMce`D0EIwgRaNETDsr+?vQknSGAi=7H00r`QnI%oQnFxm`G2umXso9l+8*&Q
z7WqF|$p49js$mdzo^BXpH#gURy=UO;=IMrYc5?@+sR4y_?d*~0^YP7d+y0{}0)zBM
zIKVM(DBvICK#~7N0a+PY6)7;u=dutmNqK3AlsrUU9U`d;msiucB_|8|2kY=(7XA;G
zwDA8AR)VCA#JOkxm#6<Fk;3Qv_CIk;8vG~n5ol7lV@Ppr$`vO}M#g$eOI^j-clMjL
zOPuv5uLtX1JFT#MwySH_RJ4r>oHNS^YVuOU;8p$N)2{`;oF|rQ?B~K$%rHDxXs+_G
zF5|-uqHZvSzq}L;5Kcy_P+x0${33}Ofb6+TX&=y;;PkEOpz%<lxjl%Ocl~M2y2lP|
zbFM`Z-*dEp9W{5_I?FqgKOqcjrGzul_KvvA0B9o^)C&!8LQLB95vnvr20|)KwER)3
zg@AiPX~4f9{zIy9K63eeK%_eUy<Xj$!il}`M9Aai_i>+_bCw_<t<K-?r^}*l>{<&~
zeLV|!bP%l1qxywfVr9Z9JI+++EO^x>ZuCK);=$VIG1`kxK8F2M8AdC$iOe3cj<EWM
zKtfCf^Zg1tRdj=Xm)|^7J1pa)+-CDvXj&R?416f(tgg8|WBR8cdxDx?*Yn+_9!KKY
zYfc;GQgX!L+9q}en#aZ8FKqby@Ji7SuT!4)GFKidFyC9wMywvB3c%^>1fo(ce4l-9
z7*zKy3={MixvUk=enQE;ED~7tv%qh&3lR<0m??@w{ILF|e#QOyPkFYK!&Up7xWNtL
zOW%1QMC<3o;G9_S1;NkPB6bqbCOjeztEc6TsBM<(q9((JKiH{01+Ud=uw9B@{;(JJ
z-DxI2*{pMq`q1RQc;V8@gYAY44Z!%#W~M9pRxI(R?SJ7<UU2Y^EpY^fzuq-h_rtLL
zw8{`NN~<)$oMx`|^gGr>sy7em=Z5DbuDlr@*q|25V)($-f}9c#?D%dU^RS<(wz?{P
zFFHtCab*!rl(~j@0(Nadvwg8q|4!}L^>d?0al6}Rrv9$0M#^&@zjbfJy_n!%mVHK4
z6pLRIQ^Uq~dnyy$`ay51Us6WaP%&O;@49m&{G3z7xV3dLtt1VTOMYl3UW~Rm{Eq4m
zF?Zl_v;?7EFx1_+#WFUXxcK78IV)FO>42@cm@}2I%pVbZqQ}3;p;sDIm&knay03a^
zn$5}Q$G!@fTwD$e(x-~aWP0h+4N<q|;xEwzsU+0W)#|>Rz$Kln<bW)%U3n>O_H2c<
z(XX#lPuW_%H#Q+c&(nRyX1-Ia<yTsbNAz3PBfuh9@JU{>dKR-%$4FYC0fsCmL9ky3
zKpxyjd^JFR+vg2!=HWf}2Z?@Td`0EG`kU?{8zKrvtsm)|7>pPk9nu@2^z96aU2<#`
z2QhvH5w&V;wER?mopu+nqu*n8p~(%Q<o-E#HMmv_6Lr(S<y?zXl02$twV54+g=p_C
zbPW!;qljHcIPw~aX95_u!itzF%xKBH?y!MCRe^`1V@8<G!;_`~Q-@-mUm7r`3Jc*<
zW|jM!A9`X|osT!srEU-27h+^5j<OqNPj-EFHPokG&HB5WAG01lt!13`S9niUI^dz+
zrPE=GX-SXL@wqVGe*HT?V{#O~&~?uH#PoV2h;Vj@x`#d8)T&F})!(j^f1!z+l?Jjx
zylKosI<}}<nHbsk7I?v<<vXs6tPoozmJ}avD&{J7$vR$!Ni~Q@;tH>kwSs&*0eJwa
zMXR05`OSFpfyRb!<VB&Y0bEEVE$hSNXH(0mbzS-;?|O<AG)<R8gmLSuf>Y_+H@O%Y
z0=K^y6B8Gcbl?SA)qMP3Z+=C(?8zL@=74R=EVnE?vY!1BQy2@q*RUgRx4yJ$k}MnL
zs!?74QciNb-LcG*&o<9=DSL>1n}ZNd)w1z3-0Pd^4ED1{qd=9|!!N?xnXjM!EuylY
z5=!H>&hSofh8V?Jofyd!h`xDI1fYAuV(sZwwN~{$a}MX^=+0TH*SFp$vyxmUv7C*W
zv^3Gl0+eTFgBi3FVD;$nhcp)ka*4gSskYIqQ&+M}xP9yLAkWzBI^I%zR^l1e?bW_6
zIn{mo{dD=)9@V?s^fa55jh78rP*Ze<3`tRCN4*mpO$@7a^*2B*7N_|A(Ve2VB|)_o
z$=#_=aBkhe(ifX}MLT()@5?<tMQW)|T904`EDIN{(*~?7PZ%vrUEuUf@Om1Lh8V<U
zqvVYpe+tw_sKHyj#O-VCO5S%E1lshLO74De`Gk2E(7WE#<PpDtbvmnFnSOqG1oI3d
zYC<jZo_G~2KIE6{8;7bJFfC?E4zS>OV+~7cXC3r!%{QJxriXo9I%*3q4KT4Xxzyd{
z9;_%=W%q!Vw$Z7F3lUnY+1HZ*lO;4;VR2+i4+D(m#01OYq|L_fbnT;KN<^dkkCwtd
zF7n+O7KvAw8c`JUh6LmeIrk4`F3o|AagKSMK3))_5Cv~y2Bb2!Ibg9BO7Vkz?pAYX
zoI=B}+$R22&IL`NCYUYjrdhwjnM<dIpta11b@>x_v=-Qcx-jmtN>!Zqf|n1^SWrHy
zK|MwJ?Z#^>)rfT5YSY{qjZ&`Fjd;^vv&gF-Yj6$9-Dy$<6zeP4s+78gS2|t%Z309b
z0^fp~ue_}i`U9j!<|qF92_3oB09NqgAoehQ`)<)dSfKoJl_A6Ec#*Mx9Cpd-p#$Ez
z={AM*r-bQs6*z$!*V<pNyBZpFi*F}aPuOZk!oD1sov}{rrxFZa@)!5H(|DKR-T0B*
zk=XmkSgqtSP+yWN@0aMgOdP>A4|QE7bf@-4vb?Q+pPKLkY2{yKsw{&udv_2v8{Dbd
zm~8VAv!G~s)`O3|Q6vFUV%8%+?ZSVUa(;fhPNg#vab@J*9XE4#D%)$UU-T5`fwjz!
z6&gA^`OGu6aUk{l*h9eB?opVdrHK>Q@U>&JQ_2pR%}TyOXGq_6s56_`U(WoOaAb+K
zXQr#6H}>a-GYs9^bG<C4b$CvneP46N2fi^kmcJjoTXRGgd^g1b&uQ5spV5+b#%y`#
zrU;H~D)utn!YWIi=j;?C-zcJ^D5xZF+#(?rMdp;)?KT1xBnMkmoV;zh&S;rXW6QQx
zWTQ2K14`6wG0eo+=1oSxjIHJc9Zkw+()XT69~5<`ZtDM}Z2bxUwYy3m%<I&~-0+^1
zYtu2vJf--MIxlG~PPDn;z8t5-=$6>P2Y&hSP5gEtW+GVC4=wy0wQk=~%CSXj=GH6q
z-T#s!BV`xZVxm{~jr_ezYRpqqIcXC=Oq`b{lu`Rt(IYr4B91hhVC?yg{ol4WUr3v9
zOAk2LG>CIECZ-WIs0$N}F#eoIUEtZudc7DPYIjzGqDLWk_A4#(<oDDN)6%Ctygl~O
zyPZcr9YCj-jDP7@YK23SJG!MDFZ1)E9`{R$R<J$u)%oUM9#k)$atlYczfhesFXL-4
zvsoG-9l@uTA8QI2Z$HsSvPZlMpB!@DV{4Bs(b)t!a<<4O@H~uuN{fO$vY>LgacooD
z2K4IWs@N`Bddm-{%oy}!k0^i6Yh)uJ1S*90>|bm3TOZxcV|ywHUb(+CeX-o1|LTZM
zwU>dY3R&U)T(}5#Neh?-CWT~@{6Ke@sI)uSuzoah8COy)w)B)aslJmp`WUcjdia-0
zl2Y}&L~XfA`uYQboAJ1;J{XLhYjH){cObH3FDva+^8ioOQy%Z=xyjGLmWMrzfFoH;
zEi3AG`_v+%)&lDJE;iJWJDI@-X9K5O)LD~j*PBe(wu+|%ar~C+LK1+-+lK<ll>=t#
z+Xc+J7qp~5q=B~rD!x78)?1+KUIbYr^5rcl&tB-cTtj+e%{gpZZ4G~6r15+d|J(ky
zjg@@UzMW0k9@S#W(1H{u;Nq(7llJbq;;4t$awM;l&(2s+$l!Ay9^Ge|34CVhr7|BG
z?dAR83smef^frq9V(OH+a+ki#q&-7TkWfFM=5bsGbU(8mC;>QTCWL5ydz9s6k@?+V
zcjiH`VI=59P-(-DWXZ~5DH>B^_H~;4$)KUhnmGo*G!Tq8^LjfUDO)lASN*=#AY_yS
zqW9UX(VOCO&p@kHdUUgsBO0KhXxn1sprK5h8}+>IhX(nSXZKwlNsjk^M|RAaqmCZB
zHBol<PMLlw!1W2AX{4`0(aI-^)x1d_zq-0U*e!X=g^kk>OHYBas@&{PT=R+?d8pZu
zUHfyucQ`(umXSW7o?HQ3H21M`ZJal+%*)SH1B1j6rxTlG3hx1IGJN^M7{$j(9V;MZ
zRKybgVuxKo#XVM+?*yTy{W+XHaU5Jbt-UG33x{u(N-2wmw;zzPH&4DE103HV@ER86
z|FZEmQb|&1s5#`$4!Cm}&`^{(4V}OP$bk`}v6q6rm;P!H)W|2i^e{7lTk2W@jo_9q
z*aw|U7#+g59Fv(5qI`#O-qPj#@_P>PC#I(GSp3DLv7x-dmYK=C7lPF8a)bxb=@)B1
zUZ`EqpXV2dR}B&r`uM}N(TS99ZT0UB%IN|0H%DcVO#T%L_chrgn#m6%x4KE*IMfjX
zJ%4veCEqbXZ`H`F_+fELMC@wuy_ch%t*+Z+1I}wN#C+dRrf2X{1C8=yZ_%Pt6wL_~
zZ2NN-hXOT4P4n$QFO7yYHS-4wF1Xfr-meG9Pn;uK51?hfel`d38k{W)F*|gJLT2#T
z<~>spMu4(mul-8Q3*pf=N4DcI)zzjqAgbE2eOT7~&f1W3VsdD44Ffe;3mJp-V@8UC
z)|qnPc12o~$X-+U@L_lWqv-RtvB~%hLF($%Ew5w>^NR82qC_0F<zVqs?Raxz=2A>B
z)=hP1-OEx?lLi#jnLzH}a;Nvr@JDO-zQWd}#k^an$Kwml;MrD&)sC5b`s0ZkVyPkb
zt}-jOq^%_9>YZe7Y}PhW{a)c39G`kg(P4@kxjcYfgB4XOOcmezdUI7j-!gs7oAo2o
zx(Ph{G+YZ`a%~kzK!HTAA5NXE-7vOFRr5oqY$rH>WI6SFvWmahFav!CfRMM3%8J&c
z*p+%|-fNS_@QrFr(at!JY9jCg9F-%5{nb5Bo~z@Y9m&SHYV`49GAJjA5h~h4(G!Se
zZmK{Bo7ivCfvl}@A-ptkFGcWXAzj3xfl{evi-OG(TaCn1FAHxRc{}B|x+Ua1D=I6M
z!C^ZIvK6aS_c&(=OQDZfm>O`Nxsw{ta&yiYPA~@e#c%N>>#rq)k6Aru-qD4(D^v)y
z*>Rs;YUbD1S8^D(ps6Jbj0K3wJw>L4m)0e(6Pee3Y?gy9i0^bZO?$*sv+xKV?WBlh
zAp*;v6w!a8;A7sLB*g-^<$Z4L7|5jXxxP1}hQZ<55f9<^KJ>^mKlWSGaLcO0=$jem
zWyZkRwe~u{{tU63DlCaS9$Y4CP4f?+wwa(&1ou)b>72yd<aYLC-(YWFHR=3p2C;o@
zP>rFvm`R<qZaNijJ?9e0Ao@J0FQbg1c%wi*X&vhQIV{0-tqBevRs?R)1sbxUT&}HJ
z*KdKSzTFX7&Aa4>j-0`kBJgK@nd(*Eh!(NC{F-@=FnF&Y!q`7){YsLLHf0_B6aHc#
z>WIuHTyJwIH{BJ4)2RtEauC7Yq7Cytc|S<m;S)8!_N`GikUqEGHdRcGU-QPEbp3se
zE7LrqZLNv81NNuz!tDCc*XEM9tD}O}AA<wr-O|Mp0pzPgSb{6jitn>)4^*t8Va3HR
zg=~sN^tp9re@w=GTx$;zOWMjcg-7X3Wk^N$n;&Kf1RgVG2}2L-(0o)54C509C&77i
zrjSi{X*WV=%C17((N^6R4Ya*4#6s_L99RtQ>m(%#nQ#wrRC8Y%yxkH;d!MdY+Tw@r
zjpSnK`;C-U{ATcgaxoEpP0Gf+tx);buOM<s@Z}LbUcXA@TIG=Q@myo%l9hl^&h34x
zu6;dv<5;?t)>lK=01D|J+ROu37qc*rD(w`#O=3*O*w9?biwNoq3WN1`&Wp8TvKj3C
z3HR9ssH7a&Vr<6waJrU<Uz3;wi7<=4xfd1VLN$2P7x}BBS2io@ltlrnmzyIDtt<yX
zAPcqxp4#$=Z%yky_m)4l_cnk`*u)Ahtuv8K{6vhAKMH6ow@c&kpm#&qGLE(Nu?A^>
zdLg!ieYz%U^bmpn%;(V%%ugMk92&?_XX1K@mwnVSE6!&%P%Wdi7_h`CpScvspMx?N
zQUR>oadnG17#hNc$pkTp+9<O}Jes}mOYA)lX@8ntoYG-_HA4-;x|^l1dmnFbnH;3A
zo7RmzjAt!StB&)wt}}Vz$Tx7{+QOd#U@!|=V-Oy>lW+MBKHRZ~7<Tp{OpB;sNJVcO
zP9gJmH&Z2nt++Wk^~d|9`p`s~@#e4h2h+!@-1=fBDgb_osGReiQgZ>4XWUryd)4yd
zj98$%XmIL4(9OnoeO5Fnyn&fpQ9b0h4e6EHHw*l68j;>(ya`g^S&y2{O8U>1*>4zR
zq*WSI_2o$CHQ?x0!wl9bpx|Cm2+kFMR)oMud1%n2=qn5nE&t@Fgr#=Zv2?}wtEz^T
z9rrj=?I<GKR}2`GsAAn<o<uOC`pid<%}8(c`p&zgnk&0rnZ{7Rb)^0-DfYcASTQ0s
zKO0S&yqP5xyM1crewennx~2nl$+FH?k$&4izqT?3*7J(SmJOw`dZb5FYs=|K5XN*~
z@!QVYGRE&)UH{eRL^>H*qI5{G@Rn&}^Z{+TW}mQe<Ew(X_9Cg%_)${IZP(Sf(i}}#
zbP^Uyd)|N;rJ4rvPkN0$CN?X?Bu3o`sBkNx9e)Hk<|kZoor>b9=8b<_a`&Cm#n%n~
zU47MvCBsdXFB1+adOO)03+nczfWa#vwk<X*p?NEOGFg@VXR_YfNi3ZWGup*ZMYLrd
zivdVFWx1f#$rH$D0S;+?%}dLVO}~LftMC3)E?;ORtVD#gO@_oLGdOsk#uT@)CP$RI
z#-#zp;&|vD_rYnvw~2N0Wp+nQ+xVJ$IH9kk(&N_Uad`)ORc-o<^o9v_z)$2HD4jGQ
zI}WMPN93Rji|(>#r{o{dF)QWya9v2nv43Zp3%Ps}($lA02*_g25t;|T{A5snSY?3A
zrRQ~(Ygh_ebltHo1VC<XI}!-0hb>bJb*eOAr;4cnlXLvI>*$-#AVsGg6B1r7@;g^L
zFlJ_th0vxO7;-opU@WA<a+$A0VKV&CD~?Y9W`bM2k~*P|j8E*2CoV8)Cu!IV5;k=`
zm0lA9424u4MQ;9hkajM?rCu<5Nio0ru*d*6!O7wLB^>Fe;<}?!2q?RBrFK5U{<mA*
z;WN^+Hz{=MA9j{=Q!Qyy7=i0XTx(4nT94X=`8CIvSzRT*3@ox%j?(gLc30~Knc##R
z`(0eGu62$+sd#-(+!IS_v$FsA^Q8gK0r%Y15^&Pc`)3fzUE9X{;k8eN8;R}9b;E)`
zT8R>*ai@NLKZ^};Ul}beukveh?TQn;$%9=R+DX07m82gP$=}Uo_%&ngV`}Hyv8g{u
z3SWzTGV|cwQuFIs7ZDOqO_fGf8Q`8MwL}eUp>q?4eqCmOTcwQuXtQckPy|4F1on8l
zP*h>d+cH#XQf|+6c|S{7SF(Lg>bR~l(0uY?O{OEVlaxa5@e%T&xju=o1`=OD#qc16
zSvyH*my(dcp6~VqR;o(#@m44Lug@~_qw+HA=mS#Z^<V!az}@c{ARa+_X}NO~a$=9p
za)_Ly?(LOnFWV{rQbS?1K7hP~fC?!$z}<pP%6*k1O(nj^MX2}V?0EMJUI;+4&As(@
zxYB>4reBy8iV?H~I;{LQWk3aKK8$bLRyt$g?-<xQqj`npk`D=fcL`B%EgjfC99(LE
z!z(C4-ap+uQYSIckaE<2uA^ag^t_eaYn_Jfq@U?vzOdv%t*)||aVad7PZ((`gpV!x
rZ$0M!)qwuD?ff?h#CY04MnNVFTnmG)-+p%fr;?V2o_dw4E$;sThR3J6

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/back-icon.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/back-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe1fbf1cd1021afc4be8d05031d4127ddea28383
GIT binary patch
literal 2166
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

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-button.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-button.vue
new file mode 100644
index 00000000000..00c06a74eb8
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-button.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="button-demo">
+    <label class="button-label">按钮和状态绑定</label>
+    <button
+      :class="{ 'is-active': isClicked, 'is-pressing': isPressing }"
+      class="button-demo-1"
+      @touchstart.stop="onTouchBtnStart"
+      @touchmove.stop="onTouchBtnMove"
+      @touchend.stop="onTouchBtnEnd"
+      @click="onClickView"
+    >
+      <span
+        v-if="isClicked"
+        class="button-text"
+      >视图已经被点击了，再点一下恢复</span>
+      <span
+        v-else
+        class="button-text"
+      >视图尚未点击</span>
+    </button>
+    <img
+      v-show="isClicked"
+      alt="demo1-image"
+      src="https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png"
+      class="button-demo-1-image"
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onActivated,
+  onDeactivated,
+  ref,
+} from '@vue/runtime-core';
+
+export default defineComponent({
+  setup() {
+    const isClicked = ref(false);
+    const isPressing = ref(false);
+    const isOnceClicked = ref(false);
+
+    onActivated(() => {
+      console.log(`${Date.now()}-button-activated`);
+    });
+
+    onDeactivated(() => {
+      console.log(`${Date.now()}-button-Deactivated`);
+    });
+
+    // click to change status
+    const onClickView = () => {
+      isClicked.value = !isClicked.value;
+    };
+    // click to change status
+    const onClickViewOnce = () => {
+      isOnceClicked.value = !isOnceClicked.value;
+    };
+    const onTouchBtnStart = (evt: Event) => {
+      console.log('onBtnTouchDown', evt);
+    };
+    const onTouchBtnMove = (evt: Event) => {
+      console.log('onBtnTouchMove', evt);
+    };
+    const onTouchBtnEnd = (evt: Event) => {
+      console.log('onBtnTouchEnd', evt);
+    };
+
+    return {
+      isClicked,
+      isPressing,
+      isOnceClicked,
+      onClickView,
+      onTouchBtnStart,
+      onTouchBtnMove,
+      onTouchBtnEnd,
+      onClickViewOnce,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.button-label {
+  width: 220px;
+  height: 50px;
+  margin-top: 20px;
+  text-align: center;
+  line-height: 50px;
+  margin-bottom: 20px;
+}
+.button-demo {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.button-demo-1 {
+  height: 64px;
+  width: 240px;
+  border-style: solid;
+  border-color: #40b883;
+  border-width: 2px;
+  border-radius: 10px;
+  align-items: center;
+}
+
+.button-demo-1 .button-text {
+  line-height: 56px;
+  text-align: center;
+}
+
+.button-demo-1-image {
+  width: 216px;
+  height: 58px;
+  background-color: #40b883;
+  margin-top: 20px;
+}
+
+/*.button-demo-1.is-active {*/
+/*  color: white;*/
+/*  background-color: cornflowerblue;*/
+/*}*/
+
+/*.button-demo-1.is-pressing {*/
+/*  color: white;*/
+/*  background-color: blue;*/
+/*}*/
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
new file mode 100644
index 00000000000..fe2cf2d6179
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
@@ -0,0 +1,343 @@
+<template>
+  <div
+    id="div-demo"
+    @scroll="onOuterScroll"
+  >
+    <div>
+      <div v-if="Native.Platform !== 'ios'">
+        <label>水波纹效果: </label>
+        <div :style="{ ...imgRectangle, ...imgRectangleExtra }">
+          <demo-ripple-div
+            :position-y="offsetY"
+            :wrapper-style="imgRectangle"
+            :native-background-android="{ borderless: true, color: '#666666' }"
+          >
+            <p :style="{ color: 'white', maxWidth: 200 }">
+              外层背景图，内层无边框水波纹，受外层影响始终有边框
+            </p>
+          </demo-ripple-div>
+        </div>
+        <demo-ripple-div
+          :position-y="offsetY"
+          :wrapper-style="circleRipple"
+          :native-background-android="{ borderless: true, color: '#666666', rippleRadius: 100 }"
+        >
+          <p :style="{ color: 'black', textAlign: 'center' }">
+            无边框圆形水波纹
+          </p>
+        </demo-ripple-div>
+        <demo-ripple-div
+          :position-y="offsetY"
+          :wrapper-style="squareRipple"
+          :native-background-android="{ borderless: false, color: '#666666' }"
+        >
+          <p :style="{ color: '#fff' }">
+            带背景色水波纹
+          </p>
+        </demo-ripple-div>
+      </div>
+      <label>背景图效果:</label>
+      <div
+        :style="demo1Style"
+        :accessible="true"
+        aria-label="背景图"
+        :aria-disabled="false"
+        :aria-selected="true"
+        :aria-checked="false"
+        :aria-expanded="false"
+        :aria-busy="true"
+        role="image"
+        :aria-valuemax="10"
+        :aria-valuemin="1"
+        :aria-valuenow="5"
+        aria-valuetext="middle"
+      >
+        <p class="div-demo-1-text">
+          Hippy 背景图展示
+        </p>
+      </div>
+      <label>渐变色效果:</label>
+      <div class="div-demo-1-1">
+        <p class="div-demo-1-text">
+          Hippy 背景渐变色展示
+        </p>
+      </div>
+      <label>Transform</label>
+      <div class="div-demo-transform">
+        <p class="div-demo-transform-text">
+          Transform
+        </p>
+      </div>
+      <label>水平滚动:</label>
+      <div
+        ref="demo2"
+        class="div-demo-2"
+        :bounces="true"
+        :scrollEnabled="true"
+        :pagingEnabled="false"
+        :showsHorizontalScrollIndicator="false"
+        @scroll="onScroll"
+        @momentumScrollBegin="onMomentumScrollBegin"
+        @momentumScrollEnd="onMomentumScrollEnd"
+        @scrollBeginDrag="onScrollBeginDrag"
+        @scrollEndDrag="onScrollEndDrag"
+      >
+        <!-- div 带着 overflow 属性的，只能有一个子节点，否则终端会崩溃 -->
+        <div class="display-flex flex-row">
+          <p class="text-block">
+            A
+          </p>
+          <p class="text-block">
+            B
+          </p>
+          <p class="text-block">
+            C
+          </p>
+          <p class="text-block">
+            D
+          </p>
+          <p class="text-block">
+            E
+          </p>
+        </div>
+      </div>
+      <label>垂直滚动:</label>
+      <div
+        class="div-demo-3"
+        :showsVerticalScrollIndicator="false"
+      >
+        <div class="display-flex flex-column">
+          <p class="text-block">
+            A
+          </p>
+          <p class="text-block">
+            B
+          </p>
+          <p class="text-block">
+            C
+          </p>
+          <p class="text-block">
+            D
+          </p>
+          <p class="text-block">
+            E
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { type HippyElement, Native } from '@hippy/vue-next';
+import {
+  defineComponent,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  ref,
+} from '@vue/runtime-core';
+
+import defaultImage from '../../assets/defaultSource.jpg';
+
+import DemoRippleDiv from './demo-ripple-div.vue';
+
+const onScroll = (e: Event) => {
+  console.log('onScroll', e);
+};
+const onMomentumScrollBegin = (e: Event) => {
+  console.log('onMomentumScrollBegin', e);
+};
+const onMomentumScrollEnd = (e: Event) => {
+  console.log('onMomentumScrollEnd', e);
+};
+const onScrollBeginDrag = (e: Event) => {
+  console.log('onScrollBeginDrag', e);
+};
+const onScrollEndDrag = (e: Event) => {
+  console.log('onScrollEndDrag', e);
+};
+
+export default defineComponent({
+  components: {
+    DemoRippleDiv,
+  },
+  setup() {
+    const offsetY = ref(0);
+    const demo2 = ref(null);
+
+    /**
+     * outer scroll event
+     * @param e
+     */
+    const onOuterScroll = (e) => {
+      offsetY.value = e.offsetY;
+    };
+
+    onActivated(() => {
+      console.log(`${Date.now()}-div-activated`);
+    });
+
+    onDeactivated(() => {
+      console.log(`${Date.now()}-div-Deactivated`);
+    });
+
+    onMounted(() => {
+      if (demo2.value) {
+        (demo2.value as HippyElement).scrollTo(50, 0, 1000);
+      }
+    });
+
+    /**
+       * demo1 needs to use variable base64 DefaultImage，so inline style mode is a must.
+       * if image path is remote address, declaration style class .div-demo-1 can be used.
+       */
+    return {
+      demo2,
+      demo1Style: {
+        display: 'flex',
+        height: '40px',
+        width: '200px',
+        /**
+           *  inline style 'backgroundImage': `url(${DefaultImage})` with 'url()' syntax only supported above 2.6.1.
+           *  declaration css style supports 'background-image': `url('https://xxxx')` format and remote address only.
+           */
+        backgroundImage: `${defaultImage}`,
+        backgroundRepeat: 'no-repeat',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '10px',
+        marginBottom: '10px',
+      },
+      imgRectangle: {
+        width: '260px',
+        height: '56px',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      imgRectangleExtra: {
+        marginTop: '20px',
+        backgroundImage: `${defaultImage}`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+      },
+      circleRipple: {
+        marginTop: '30px',
+        width: '150px',
+        height: '56px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: '3px',
+        borderStyle: 'solid',
+        borderColor: '#40b883',
+      },
+      squareRipple: {
+        marginBottom: '20px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '150px',
+        height: '150px',
+        backgroundColor: '#40b883',
+        marginTop: '30px',
+        borderRadius: '12px',
+        overflow: 'hidden',
+      },
+      Native,
+      offsetY,
+      onScroll,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onOuterScroll,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#div-demo {
+  flex: 1;
+  overflow-y: scroll;
+  margin: 7px;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.text-block {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #40b883;
+  font-size: 80px;
+  margin: 20px;
+  color: #40b883;
+  text-align: center;
+}
+
+/* background-image path can only use remote address */
+/*.div-demo-1 {*/
+/*  display: flex;*/
+/*  height: 40px;*/
+/*  background-image: url('https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png');*/
+/*  background-repeat: no-repeat;*/
+/*}*/
+
+.div-demo-1-1 {
+  display: flex;
+  height: 40px;
+  width: 200px;
+  background-image: linear-gradient(30deg, blue 10%, yellow 40%, red 50%);
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+  border-radius: 2px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.div-demo-1-text {
+  color: white;
+}
+
+.div-demo-2 {
+  overflow-x: scroll;
+  margin: 10px;
+  flex-direction: row;
+}
+
+.div-demo-3 {
+  width: 150px;
+  overflow-y: scroll;
+  margin: 10px;
+  height: 320px;
+}
+
+.div-demo-transform {
+  background-color: #40b883;
+  transform: rotate(30deg) scale(.5);
+  width: 120px;
+  height: 120px;
+}
+
+.div-demo-transform-text {
+  line-height: 120px;
+  height: 120px;
+  width: 120px;
+  text-align: center;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-dynamicimport.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-dynamicimport.vue
new file mode 100644
index 00000000000..1b231d3702e
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-dynamicimport.vue
@@ -0,0 +1,101 @@
+<template>
+  <div
+    id="demo-dynamicimport"
+    @click.stop="onClickLoadAsyncComponent"
+  >
+    <div class="import-btn">
+      <p>点我异步加载</p>
+    </div>
+    <div
+      v-if="loaded"
+      class="async-com-wrapper"
+    >
+      <AsyncComponentFromLocal class="async-component-outer-local" />
+      <AsyncComponentFromHttp />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineAsyncComponent,
+  defineComponent,
+  ref,
+} from '@vue/runtime-core';
+
+export default defineComponent({
+  components: {
+    /**
+     *  In versions that support dynamic loading, you can add magic comment 'webpackMode: "lazy"'
+     *  It can also be omitted, the default mode is lazy.
+     *
+     *  In versions that do not support dynamic loading, 'webpackMode: "eager"' must be added explicitly.
+     *  Or configure the maxChunks of LimitChunkCountPlugin to 1 to prevent subcontracting.
+     *
+     *  Currently, dynamic loading supports both local and remote modes, refer to the following：
+     */
+
+    /**
+     *  Local loading reference AsyncComponentFromLocal.
+     *  Writable or not, when local chunk needs to be loaded, global publicPath cannot be configured.
+     *  When an import error occurs, the corresponding downgrade plan needs to be done in the catch.
+     */
+
+    AsyncComponentFromLocal: defineAsyncComponent(async () => import(/* webpackMode: "lazy", webpackChunkName: "asyncComponentFromLocal" */ './dynamicImport/async-component-local.vue')),
+    /**
+     *  Remote Loading Reference AsyncComponentFromHttp,
+     *  need to explicitly specify the chunk remote address, customChunkPath, chunk name and webpackChunkName.
+     *  customChunkPath will replace the globally configured publicPath at runtime.
+     *  When an import error occurs, the corresponding downgrade plan needs to be done in the catch.
+     */
+    AsyncComponentFromHttp: defineAsyncComponent(async () => (process.env.NODE_ENV === 'development'
+      ? import(/* webpackMode: "lazy", webpackChunkName: "asyncComponentFromHttp" */ './dynamicImport/async-component-http.vue')
+      : import(/* webpackMode: "lazy",customChunkPath: "https://raw.githubusercontent.com/Tencent/Hippy/master/static/hippy-vue-next/", webpackChunkName: "asyncComponentFromHttp" */ './dynamicImport/async-component-http.vue'))),
+  },
+  setup() {
+    const loaded = ref(false);
+
+    const onClickLoadAsyncComponent = () => {
+      loaded.value = true;
+    };
+
+    return {
+      loaded,
+      onClickLoadAsyncComponent,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.async-component-outer-local {
+  height: 200px;
+  width: 300px;
+}
+#demo-dynamicimport {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: white;
+}
+.import-btn {
+  margin-top: 20px;
+  width: 130px;
+  height: 40px;
+  text-align: center;
+  background-color: #40b883;
+  flex-direction: row;
+  border-radius: 5px;
+  justify-content: center;
+}
+.import-btn p{
+  color: black;
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+}
+.async-com-wrapper {
+  margin-top: 20px
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
new file mode 100644
index 00000000000..aec04f96376
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
@@ -0,0 +1,125 @@
+<template>
+  <div
+    id="iframe-demo"
+    :style="iframeStyle"
+  >
+    <label>地址栏：</label>
+    <input
+      id="address"
+      ref="input"
+      name="targetUrl"
+      returnKeyType="go"
+      :value="displayUrl"
+      @endEditing="goToUrl"
+      @keyup="onKeyUp"
+    >
+    <iframe
+      id="iframe"
+      :ref="iframe"
+      :src="targetUrl"
+      method="get"
+      @load="onLoad"
+      @loadStart="onLoadStart"
+      @loadEnd="onLoadEnd"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Native, type HippyLoadResourceEvent, type HippyKeyboardEvent } from '@hippy/vue-next';
+import { defineComponent, ref } from '@vue/runtime-core';
+
+export default defineComponent({
+  setup() {
+    const targetUrl = ref('https://hippyjs.org');
+    const displayUrl = ref('https://hippyjs.org');
+    const input = ref(null);
+    const iframe = ref(null);
+
+    /**
+       * 跳转到指定链接
+       *
+       * @param evt
+       */
+    const goToUrl = (evt: {
+      value: string;
+    }) => {
+      if (evt) {
+        targetUrl.value = evt.value;
+      }
+    };
+
+    /**
+       * 加载完成
+       *
+       * @param evt
+       */
+    const onLoad = (evt: HippyLoadResourceEvent) => {
+      let { url } = evt;
+      if (url === undefined && iframe.value) {
+        url = (iframe.value as HTMLIFrameElement).src;
+      }
+
+      if (url && url !== targetUrl.value) {
+        displayUrl.value = url;
+      }
+    };
+      // Web compatible
+    const onKeyUp = (evt: HippyKeyboardEvent) => {
+      if (evt.keyCode === 13) {
+        evt.preventDefault();
+
+        if (input.value) {
+          goToUrl({
+            value: input.value,
+          });
+        }
+      }
+    };
+
+    const onLoadStart = (evt: HippyLoadResourceEvent) => {
+      const { url } = evt;
+      console.log('onLoadStart', url);
+    };
+
+    const onLoadEnd = (evt: HippyLoadResourceEvent) => {
+      const { url, success, error } = evt;
+      console.log('onLoadEnd', url, success, error);
+    };
+
+    return {
+      targetUrl,
+      displayUrl,
+      iframeStyle: {
+        'min-height': Native ? 100 : '100vh',
+      },
+      input,
+      iframe,
+      onLoad,
+      onKeyUp,
+      goToUrl,
+      onLoadStart,
+      onLoadEnd,
+    };
+  },
+});
+</script>
+
+<style>
+#iframe-demo {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 7px;
+}
+#iframe-demo #address {
+  height: 48px;
+  border-color: #ccc;
+  border-width: 1px;
+  border-style: solid;
+}
+
+#iframe-demo #iframe {
+  flex: 1;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
new file mode 100644
index 00000000000..68f09d12b2c
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
@@ -0,0 +1,164 @@
+<template>
+  <div id="demo-img">
+    <div id="demo-img-container">
+      <label>Contain:</label>
+      <img
+        alt=""
+        src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
+        :placeholder="defaultImage"
+        class="image contain"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
+      <label>Cover:</label>
+      <img
+        alt=""
+        :placeholder="defaultImage"
+        src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
+        class="image cover"
+      >
+      <label>Center:</label>
+      <img
+        alt=""
+        :placeholder="defaultImage"
+        src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
+        class="image center"
+      >
+      <label>CapInsets:</label>
+      <img
+        :placeholder="defaultImage"
+        src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
+        class="image cover"
+        :capInsets="{
+          top: 50,
+          left: 50,
+          bottom: 50,
+          right: 50,
+        }"
+      >
+      <label>TintColor:</label>
+      <img
+        :src="hippyLogoImage"
+        class="image center tint-color"
+      >
+      <label>Gif:</label>
+      <img
+        v-if="isMounted"
+        alt=""
+        :placeholder="defaultImage"
+        src="https://user-images.githubusercontent.com/12878546/148736255-7193f89e-9caf-49c0-86b0-548209506bd6.gif"
+        class="image cover"
+        @load="onLoad"
+      >
+      <div class="img-result">
+        <p>Load Result: {{ gifLoadResult }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/runtime-core';
+
+import defaultImage from '../../assets/defaultSource.jpg';
+import hippyLogoImage from '../../assets/hippyLogoWhite.png';
+
+export default defineComponent({
+  setup() {
+    const isMounted = ref(false);
+    // img touch event is supported after hippy-vue 2.6.2
+    const onTouchStart = (evt: Event) => {
+      console.log('onTouchDown', evt);
+      evt.stopPropagation();
+    };
+      // img touch event is supported after hippy-vue 2.6.2
+    const onTouchMove = (evt: Event) => {
+      console.log('onTouchMove', evt);
+      evt.stopPropagation();
+      console.log(evt);
+    };
+      // img touch event is supported after hippy-vue 2.6.2
+    const onTouchEnd = (evt: Event) => {
+      console.log('onTouchEnd', evt);
+      evt.stopPropagation();
+      console.log(evt);
+    };
+    const onLoad = (evt: Event) => {
+      console.log('onLoad', evt);
+      const { width, height, url } = evt;
+      gifLoadResult.value = {
+        width,
+        height,
+        url,
+      };
+    };
+
+    const gifLoadResult = ref({});
+
+    onMounted(() => {
+      // In SSR, node event will be bind at client bundle side, you should make img load
+      // in mounted lifecycle.
+      // You don't need this if you don't want to use SSR.
+      isMounted.value = true;
+    });
+
+    return {
+      defaultImage,
+      hippyLogoImage,
+      gifLoadResult,
+      isMounted,
+      onTouchEnd,
+      onTouchMove,
+      onTouchStart,
+      onLoad,
+    };
+  },
+});
+</script>
+<style scoped>
+#demo-img {
+  overflow-y: scroll;
+  flex: 1;
+  margin: 7px;
+}
+
+#demo-img #demo-img-container {
+  display: flex;
+  flex-direction: column;
+}
+
+#demo-img .image {
+  width: 300px;
+  height: 180px;
+  margin: 30px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #40b883;
+}
+
+#demo-img .img-result {
+  width: 300px;
+  height: 150px;
+  margin-top: -30px;
+  margin-horizontal: 30px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #40b883;
+}
+
+#demo-img .contain {
+  resize-mode: contain;
+}
+
+#demo-img .cover {
+  resize-mode: cover;
+}
+
+#demo-img .center {
+  resize-mode: center;
+}
+
+#demo-img .tint-color {
+  tint-color: #40b88399
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-input.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-input.vue
new file mode 100644
index 00000000000..1118d446906
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-input.vue
@@ -0,0 +1,268 @@
+<template>
+  <div
+    ref="inputDemo"
+    class="demo-input"
+    @click.stop="blurAllInput"
+  >
+    <label>文本:</label>
+    <input
+      ref="input"
+      placeholder="Text"
+      caret-color="yellow"
+      underline-color-android="grey"
+      placeholder-text-color="#40b883"
+      :editable="true"
+      class="input"
+      :value="text"
+      @change="text = $event.value"
+      @click="stopPropagation"
+      @keyboardWillShow="onKeyboardWillShow"
+      @keyboardWillHide="onKeyboardWillHide"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+    <div>
+      <span>文本内容为：</span>
+      <span>{{ text }}</span>
+    </div>
+    <div><span>{{ `事件: ${event} | isFocused: ${isFocused}` }}</span></div>
+    <button
+      class="input-button"
+      @click.stop="clearTextContent"
+    >
+      <span>清空文本内容</span>
+    </button>
+    <button
+      class="input-button"
+      @click.stop="focus"
+    >
+      <span>Focus</span>
+    </button>
+    <button
+      class="input-button"
+      @click.stop="blur"
+    >
+      <span>Blur</span>
+    </button>
+    <label>数字:</label>
+    <input
+      type="number"
+      caret-color="yellow"
+      underline-color-android="grey"
+      placeholder-text-color="#40b883"
+      placeholder="Number"
+      class="input"
+      @change="textChange"
+      @click="stopPropagation"
+    >
+    <label>密码:</label>
+    <input
+      type="password"
+      caret-color="yellow"
+      underline-color-android="grey"
+      placeholder-text-color="#40b883"
+      placeholder="Password"
+      class="input"
+      @change="textChange"
+      @click="stopPropagation"
+    >
+    <label>文本（限制5个字符）:</label>
+    <input
+      :maxlength="5"
+      caret-color="yellow"
+      underline-color-android="grey"
+      placeholder-text-color="#40b883"
+      placeholder="5 个字符"
+      class="input"
+      @change="textChange"
+      @click="stopPropagation"
+    >
+  </div>
+</template>
+<script lang="ts">
+import {
+  type HippyEvent,
+  type HippyElement,
+  type HippyInputElement,
+  type HippyKeyboardEvent,
+} from '@hippy/vue-next';
+import { defineComponent, nextTick, ref, onMounted } from '@vue/runtime-core';
+
+/**
+   * When the input box is clicked, the click event bubbles up to the top View, so stopPropagation here
+   */
+const stopPropagation = (evt: HippyEvent) => {
+  evt.stopPropagation();
+};
+
+/**
+   * print content when text changes
+   */
+const textChange = (evt: HippyKeyboardEvent) => {
+  console.log(evt.value);
+};
+
+/**
+   * keyboard event
+   *
+   * @param evt
+   */
+const onKeyboardWillShow = (evt: HippyEvent) => {
+  console.log('onKeyboardWillShow', evt);
+};
+
+/**
+ * keyboard event
+ */
+const onKeyboardWillHide = () => {
+  console.log('onKeyboardWillHide');
+};
+
+export default defineComponent({
+  setup() {
+    const inputDemo = ref(null);
+    const input = ref(null);
+    const text = ref('');
+    const event = ref('');
+    const isFocused = ref(false);
+    /**
+       * Get all current input elements
+       */
+    const getChildInputElements = (): HippyInputElement[] => {
+      if (inputDemo.value) {
+        const inputWrapper: HippyElement = inputDemo.value as HippyElement;
+
+        if (inputWrapper.childNodes.length) {
+          let inputItems: HippyElement[] = inputWrapper.childNodes as HippyElement[];
+
+          inputItems = inputItems.filter((element: HippyElement) => element.tagName === 'input');
+
+          return inputItems as HippyInputElement[];
+        }
+      }
+
+      return [];
+    };
+
+    /**
+       * Click to make all input boxes out of focus
+       */
+    const blurAllInput = () => {
+      const inputItems = getChildInputElements();
+
+      if (inputItems.length) {
+        inputItems.map((inputItem) => {
+          inputItem.blur();
+
+          return true;
+        });
+      }
+    };
+
+    /**
+       * clear content
+       */
+    const clearTextContent = () => {
+      text.value = '';
+    };
+
+    const focus = (evt: HippyEvent) => {
+      evt.stopPropagation();
+      if (input.value) {
+        (input.value as HippyInputElement).focus();
+      }
+    };
+
+    const blur = (evt: HippyEvent) => {
+      evt.stopPropagation();
+      if (input.value) {
+        (input.value as HippyInputElement).blur();
+      }
+    };
+
+    onMounted(() => {
+      nextTick(() => {
+        // make the first input focus
+        const inputItems = getChildInputElements();
+
+        if (inputItems.length) {
+          inputItems[0].focus();
+        }
+      });
+    });
+
+    /**
+       * Change the content of the input box
+       *
+       * @param event
+       */
+    const onChange = (event) => {
+      if (event?.value) {
+        text.value = event.value;
+      }
+    };
+
+    const onFocus = async () => {
+      if (input.value) {
+        isFocused.value = await (input.value as HippyInputElement).isFocused();
+        event.value = 'onFocus';
+      }
+    };
+
+    const onBlur = async () => {
+      if (input.value) {
+        isFocused.value = await (input.value as HippyInputElement).isFocused();
+        event.value = 'onBlur';
+      }
+    };
+
+    return {
+      input,
+      inputDemo,
+      text,
+      event,
+      isFocused,
+      blur,
+      clearTextContent,
+      focus,
+      blurAllInput,
+      onKeyboardWillShow,
+      onKeyboardWillHide,
+      stopPropagation,
+      textChange,
+      onChange,
+      onBlur,
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.demo-input {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-direction: column;
+  margin: 7px;
+}
+.demo-input .input {
+  width: 300px;
+  height: 48px;
+  color: #242424;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+  font-size: 16px;
+  margin: 20px;
+}
+.demo-input .input-button {
+  border-color: #4c9afa;
+  border-width: 1px;
+  border-style: solid;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
new file mode 100644
index 00000000000..ffd20bfbb70
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
@@ -0,0 +1,322 @@
+<template>
+  <div id="demo-list">
+    <ul
+      id="list"
+      ref="list"
+      :style="horizontal && { height: 50, flex: 0 }"
+      :horizontal="horizontal"
+      :exposureEventEnabled="true"
+      :delText="delText"
+      :editable="true"
+      :bounces="true"
+      :rowShouldSticky="true"
+      :overScrollEnabled="true"
+      :scrollEventThrottle="1000"
+      @endReached="onEndReached"
+      @delete="onDelete"
+      @scroll="onScroll"
+      @momentumScrollBegin="onMomentumScrollBegin"
+      @momentumScrollEnd="onMomentumScrollEnd"
+      @scrollBeginDrag="onScrollBeginDrag"
+      @scrollEndDrag="onScrollEndDrag"
+    >
+      <li
+        v-for="(ui, index) in dataSource"
+        :key="index"
+        :class="horizontal && 'item-horizontal-style'"
+        :type="ui.style"
+        :sticky="index === 1"
+        @appear="onAppear(index)"
+        @disappear="onDisappear(index)"
+        @willAppear="onWillAppear(index)"
+        @willDisappear="onWillDisappear(index)"
+      >
+        <div
+          v-if="ui.style === 1"
+          class="container"
+        >
+          <div class="item-container">
+            <p :numberOfLines="1">
+              {{ `${index}: Style 1 UI` }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-else-if="ui.style === 2"
+          class="container"
+        >
+          <div class="item-container">
+            <p :numberOfLines="1">
+              {{ `${index}: Style 2 UI` }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-else-if="ui.style === 5"
+          class="container"
+        >
+          <div class="item-container">
+            <p :numberOfLines="1">
+              {{ `${index}: Style 5 UI` }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-else
+          class="container"
+        >
+          <div class="item-container">
+            <p id="loading">
+              {{ loadingState }}
+            </p>
+          </div>
+        </div>
+        <div
+          v-if="index !== dataSource.length - 1"
+          class="separator-line"
+        />
+      </li>
+    </ul>
+    <div
+      v-if="Platform === 'android'"
+      :style="{
+        position: 'absolute',
+        right: 20,
+        bottom: 20,
+        width: 67,
+        height: 67,
+        borderRadius: 30,
+        boxShadowOpacity: 0.6,
+        boxShadowRadius: 5,
+        boxShadowOffsetX: 3,
+        boxShadowOffsetY: 3,
+        boxShadowColor: '#40b883',
+      }"
+      @click="changeDirection"
+    >
+      <div
+        :style="{
+          width: 60,
+          height: 60,
+          borderRadius: 30,
+          backgroundColor: '#40b883',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }"
+      >
+        <p :style="{ color: 'white' }">
+          切换方向
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { type ListViewEvent, Native } from '@hippy/vue-next';
+import { defineComponent, ref, onMounted, type Ref } from '@vue/runtime-core';
+
+const STYLE_LOADING = 100;
+const mockDataArray = [
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+  { style: 1 },
+  { style: 2 },
+  { style: 5 },
+];
+
+/**
+   * 获取 mock 数据
+   */
+const mockFetchData = async () => new Promise((resolve) => {
+  setTimeout(() => resolve(mockDataArray), 600);
+});
+
+// item fully exposed
+const onAppear = (index: number) => {
+  console.log('onAppear', index);
+};
+  // item is completely hidden
+const onDisappear = (index: number) => {
+  console.log('onDisappear', index);
+};
+  // item at least one pixel exposure
+const onWillAppear = (index: number) => {
+  console.log('onWillAppear', index);
+};
+  // item is hidden by at least one pixel
+const onWillDisappear = (index: number) => {
+  console.log('onWillDisappear', index);
+};
+
+const onMomentumScrollBegin = (event) => {
+  console.log('momentumScrollBegin', event);
+};
+
+const onMomentumScrollEnd = (event) => {
+  console.log('momentumScrollEnd', event);
+};
+
+const onScrollBeginDrag = (event) => {
+  console.log('onScrollBeginDrag', event);
+};
+
+const onScrollEndDrag = (event) => {
+  console.log('onScrollEndDrag', event);
+};
+
+export default defineComponent({
+  setup() {
+    const loadingState = ref('');
+    const dataSource: Ref<any[]> = ref([]);
+    const list = ref(null);
+    const horizontal = ref(false);
+    const delText = 'Delete';
+    let isLoading = false;
+
+    /**
+       * scroll to the end of the list, trigger the event, you can load the next page
+       *
+       * @param evt
+       */
+    const onEndReached = async (evt) => {
+      console.log('endReached', evt);
+
+      if (isLoading) {
+        return;
+      }
+
+      const data = dataSource.value;
+      isLoading = true;
+      loadingState.value = 'Loading now...';
+      dataSource.value = [...data, [{ style: STYLE_LOADING }]];
+      // get data
+      const newData: any = await mockFetchData();
+      dataSource.value = [...data, ...newData];
+      // release lock
+      isLoading = false;
+    };
+
+    /**
+       * delete data
+       */
+    const onDelete = (event: ListViewEvent) => {
+      if (typeof event.index !== 'undefined') {
+        dataSource.value.splice(event.index, 1);
+      }
+    };
+
+    /**
+       * change direction
+       */
+    const changeDirection = () => {
+      horizontal.value = !horizontal.value;
+    };
+
+    let topReached = false;
+    const onScroll = (event) => {
+      console.log('onScroll', event.offsetY);
+      if (event.offsetY <= 0) {
+        if (!topReached) {
+          topReached = true;
+          console.log('onTopReached');
+        }
+      } else {
+        topReached = false;
+      }
+    };
+
+    onMounted(() => {
+      /**
+       * isLoading is a loading lock, just copy
+       * onEndReach fires multiple times when at the bottom of the screen,
+       * so a lock needs to be added, and secondary loading is not performed when the unloading is completed.
+       */
+      isLoading = false;
+      dataSource.value = [...mockDataArray];
+    });
+
+    return {
+      loadingState,
+      dataSource,
+      delText,
+      list,
+      STYLE_LOADING,
+      horizontal,
+      Platform: Native.Platform,
+      onAppear,
+      onDelete,
+      onDisappear,
+      onEndReached,
+      onWillAppear,
+      onWillDisappear,
+      changeDirection,
+      onScroll,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#demo-list {
+  collapsable: false;
+  flex: 1;
+}
+#demo-list #loading {
+  font-size: 11px;
+  color: #aaa;
+  align-self: center;
+}
+
+#demo-list .container {
+  background-color: #fff;
+  collapsable: false;
+}
+
+#demo-list .item-container {
+  padding: 12px;
+}
+
+#demo-list .separator-line {
+  margin-left: 12px;
+  margin-right: 12px;
+  height: 1px;
+  background-color: #e5e5e5;
+}
+
+/* configure li style if horizontal ul is set*/
+#demo-list .item-horizontal-style {
+  height: 50px;
+  width: 100px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
new file mode 100644
index 00000000000..ace06a4d971
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
@@ -0,0 +1,557 @@
+<template>
+  <div class="p-demo">
+    <div>
+      <label>不带样式：</label>
+      <p
+        class="p-demo-content"
+        @touchstart.stop="onTouchTextStart"
+        @touchmove.stop="onTouchTextMove"
+        @touchend.stop="onTouchTextEnd"
+      >
+        这是最普通的一行文字
+      </p>
+      <p
+        class="p-demo-content-status"
+      >
+        当前touch状态: {{ labelTouchStatus }}
+      </p>
+      <label>颜色：</label>
+      <p class="p-demo-1 p-demo-content">
+        这行文字改变了颜色
+      </p>
+      <label>尺寸：</label>
+      <p class="p-demo-2 p-demo-content">
+        这行改变了大小
+      </p>
+      <label>粗体：</label>
+      <p class="p-demo-3 p-demo-content">
+        这行加粗了
+      </p>
+      <label>下划线：</label>
+      <p class="p-demo-4 p-demo-content">
+        这里有条下划线
+      </p>
+      <label>删除线：</label>
+      <p class="p-demo-5 p-demo-content">
+        这里有条删除线
+      </p>
+      <label>自定义字体：</label>
+      <p class="p-demo-6 p-demo-content">
+        腾讯字体 Hippy
+      </p>
+      <p
+        class="p-demo-6 p-demo-content"
+        style="font-weight: bold"
+      >
+        腾讯字体 Hippy 粗体
+      </p>
+      <p
+        class="p-demo-6 p-demo-content"
+        style="font-style: italic"
+      >
+        腾讯字体 Hippy 斜体
+      </p>
+      <p
+        class="p-demo-6 p-demo-content"
+        style="font-weight: bold; font-style: italic"
+      >
+        腾讯字体 Hippy 粗斜体
+      </p>
+      <label>文字阴影：</label>
+      <p
+        class="p-demo-7 p-demo-content"
+        :style="textShadow"
+        @click="changeTextShadow"
+      >
+        这里是文字灰色阴影，点击可改变颜色
+      </p>
+      <label>文本字符间距</label>
+      <p
+        class="p-demo-8 p-demo-content"
+        style="margin-bottom: 5px"
+      >
+        Text width letter-spacing -1
+      </p>
+      <p
+        class="p-demo-9 p-demo-content"
+        style="margin-top: 5px"
+      >
+        Text width letter-spacing 5
+      </p>
+      <label>字体 style：</label>
+      <div class="p-demo-content">
+        <p style="font-style: normal">
+          font-style: normal
+        </p>
+        <p style="font-style: italic">
+          font-style: italic
+        </p>
+        <p>font-style: [not set]</p>
+      </div>
+      <label>numberOfLines={{ textMode.numberOfLines }} | ellipsizeMode={{
+        textMode.ellipsizeMode
+      }}</label>
+      <div class="p-demo-content">
+        <p
+          :numberOfLines="textMode.numberOfLines"
+          :ellipsizeMode="textMode.ellipsizeMode"
+          :style="{
+            backgroundColor: '#40b883',
+            marginBottom: 10,
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+          }"
+        >
+          <span
+            style="font-size: 19px; color: white"
+          >先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。</span>
+          <span>然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。</span>
+        </p>
+        <p
+          :numberOfLines="textMode.numberOfLines"
+          :ellipsizeMode="textMode.ellipsizeMode"
+          :style="{
+            backgroundColor: '#40b883',
+            marginBottom: 10,
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+          }"
+        >
+          {{ 'line 1\n\nline 3\n\nline 5' }}
+        </p>
+        <p
+          :numberOfLines="textMode.numberOfLines"
+          :ellipsizeMode="textMode.ellipsizeMode"
+          :style="{
+            backgroundColor: '#40b883',
+            marginBottom: 10,
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+            fontSize: 14,
+          }"
+        >
+          <img
+            :style="{ width: 24, height: 24 }"
+            :src="img1"
+          >
+          <img
+            :style="{ width: 24, height: 24 }"
+            :src="img2"
+          >
+        </p>
+        <div class="button-bar">
+          <button
+            class="button"
+            @click="incrementLine"
+          >
+            <span>加一行</span>
+          </button>
+          <button
+            class="button"
+            @click="decrementLine"
+          >
+            <span>减一行</span>
+          </button>
+        </div>
+        <div class="button-bar">
+          <button
+            class="button"
+            @click="() => changeMode('clip')"
+          >
+            <span>clip</span>
+          </button>
+          <button
+            class="button"
+            @click="() => changeMode('head')"
+          >
+            <span>head</span>
+          </button>
+          <button
+            class="button"
+            @click="() => changeMode('middle')"
+          >
+            <span>middle</span>
+          </button>
+          <button
+            class="button"
+            @click="() => changeMode('tail')"
+          >
+            <span>tail</span>
+          </button>
+        </div>
+      </div>
+      <label v-if="Platform === 'android'">break-strategy={{ breakStrategy }}</label>
+      <div
+        v-if="Platform === 'android'"
+        class="p-demo-content"
+      >
+        <p
+          :break-strategy="breakStrategy"
+          :style="{ borderWidth: 1, borderColor: 'gray' }"
+        >
+          {{ longText }}
+        </p>
+        <div class="button-bar">
+          <button
+            class="button"
+            @click.stop="() => changeBreakStrategy('simple')"
+          >
+            <span>simple</span>
+          </button>
+          <button
+            class="button"
+            @click.stop="() => changeBreakStrategy('high_quality')"
+          >
+            <span>high_quality</span>
+          </button>
+          <button
+            class="button"
+            @click.stop="() => changeBreakStrategy('balanced')"
+          >
+            <span>balanced</span>
+          </button>
+        </div>
+      </div>
+      <label>vertical-align</label>
+      <div class="p-demo-content">
+        <p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
+          <img
+            style="width: 24; height: 24; vertical-align: top;"
+            :src="img2"
+          >
+          <img
+            style="width: 18; height: 12; vertical-align: middle;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 12; vertical-align: baseline;"
+            :src="img2"
+          >
+          <img
+            style="width: 36; height: 24; vertical-align: bottom;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: top;"
+            :src="img3"
+          >
+          <img
+            style="width: 18; height: 12; vertical-align: middle;"
+            :src="img3"
+          >
+          <img
+            style="width: 24; height: 12; vertical-align: baseline;"
+            :src="img3"
+          >
+          <img
+            style="width: 36; height: 24; vertical-align: bottom;"
+            :src="img3"
+          >
+          <span style="font-size: 16; vertical-align: top;">字</span>
+          <span style="font-size: 16; vertical-align: middle;">字</span>
+          <span style="font-size: 16; vertical-align: baseline;">字</span>
+          <span style="font-size: 16; vertical-align: bottom;">字</span>
+        </p>
+        <p v-if="Platform === 'android'">
+          legacy mode:
+        </p>
+        <p
+          v-if="Platform === 'android'"
+          style="lineHeight: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
+        >
+          <img
+            style="width: 24; height: 24; vertical-alignment: 0;"
+            :src="img2"
+          >
+          <img
+            style="width: 18; height: 12; vertical-alignment: 1;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 12; vertical-alignment: 2;"
+            :src="img2"
+          >
+          <img
+            style="width: 36; height: 24; vertical-alignment: 3;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; top: -10;"
+            :src="img3"
+          >
+          <img
+            style="width: 18; height: 12; top: -5;"
+            :src="img3"
+          >
+          <img
+            style="width: 24; height: 12;"
+            :src="img3"
+          >
+          <img
+            style="width: 36; height: 24; top: 5;"
+            :src="img3"
+          >
+          <span style="font-size: 16;">字</span>
+          <span style="font-size: 16;">字</span>
+          <span style="font-size: 16;">字</span>
+          <span style="font-size: 16;">字</span>
+        </p>
+      </div>
+      <label>tint-color & background-color</label>
+      <div class="p-demo-content">
+        <p style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
+          <img
+            style="width: 24; height: 24; vertical-align: middle; tint-color: orange;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: middle; tint-color: orange; background-color: #ccc;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: middle; background-color: #ccc;"
+            :src="img2"
+          >
+          <span style="vertical-align: middle; background-color: #99f;">text</span>
+        </p>
+        <p v-if="Platform === 'android'">
+          legacy mode:
+        </p>
+        <p
+          v-if="Platform === 'android'"
+          style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
+        >
+          <img
+            style="width: 24; height: 24; tint-color: orange;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; tint-color: orange; background-color: #ccc;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; background-color: #ccc;"
+            :src="img2"
+          >
+        </p>
+      </div>
+      <label>margin</label>
+      <div class="p-demo-content">
+        <p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
+          <img
+            style="width: 24; height: 24; vertical-align: top; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: middle; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: baseline; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-align: bottom; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+        </p>
+        <p v-if="Platform === 'android'">
+          legacy mode:
+        </p>
+        <p
+          v-if="Platform === 'android'"
+          style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
+        >
+          <img
+            style="width: 24; height: 24; vertical-alignment: 0; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-alignment: 1; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-alignment: 2; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+          <img
+            style="width: 24; height: 24; vertical-alignment: 3; background-color: #ccc; margin: 5;"
+            :src="img2"
+          >
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/runtime-core';
+import { Native } from '@hippy/vue-next';
+
+export default defineComponent({
+  setup() {
+    const labelTouchStatus = ref('');
+    const textShadowIndex = ref(0);
+    const textMode = ref({
+      numberOfLines: 2,
+      ellipsizeMode: 'tail',
+    });
+    const textShadow = ref({
+      textShadowOffset: {
+        x: 1,
+        y: 1,
+      },
+      // support declare textShadowOffsetX & textShadowOffsetY separately
+      textShadowOffsetX: 1,
+      textShadowOffsetY: 1,
+      textShadowRadius: 3,
+      textShadowColor: 'grey',
+    });
+    const breakStrategy = ref('simple');
+
+    // text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
+    const onTouchTextStart = (evt: Event) => {
+      labelTouchStatus.value = 'touch start';
+      console.log('onTextTouchDown', evt);
+    };
+      // text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
+    const onTouchTextMove = (evt: Event) => {
+      labelTouchStatus.value = 'touch move';
+      console.log('onTextTouchMove', evt);
+      console.log(evt);
+    };
+      // text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
+    const onTouchTextEnd = (evt: Event) => {
+      labelTouchStatus.value = 'touch end';
+      console.log('onTextTouchEnd', evt);
+      console.log(evt);
+    };
+
+    const incrementLine = () => {
+      if (textMode.value.numberOfLines < 6) {
+        textMode.value.numberOfLines += 1;
+      }
+    };
+
+    const decrementLine = () => {
+      if (textMode.value.numberOfLines > 1) {
+        textMode.value.numberOfLines -= 1;
+      }
+    };
+
+    const changeMode = (mode) => {
+      textMode.value.ellipsizeMode = mode;
+    };
+
+    const changeTextShadow = () => {
+      textShadow.value.textShadowOffsetX =          textShadowIndex.value % 2 === 1 ? 10 : 1;
+      textShadow.value.textShadowColor =          textShadowIndex.value % 2 === 1 ? 'red' : 'grey';
+
+      textShadowIndex.value += 1;
+    };
+
+    const changeBreakStrategy = (strategy: string) => {
+      breakStrategy.value = strategy;
+    };
+
+    return {
+      img1: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3dmhyAAAAEXRSTlMA9QlZEMPc2Mmmj2VkLEJ4Rsx+pEgAAAChSURBVCjPjVLtEsMgCDOAdbbaNu//sttVPes+zvGD8wgQCLp/TORbUGMAQtQ3UBeSAMlF7/GV9Cmb5eTJ9R7H1t4bOqLE3rN2UCvvwpLfarhILfDjJL6WRKaXfzxc84nxAgLzCGSGiwKwsZUB8hPorZwUV1s1cnGKw+yAOrnI+7hatNIybl9Q3OkBfzopCw6SmDVJJiJ+yD451OS0/TNM7QnuAAbvCG0TSAAAAABJRU5ErkJggg==',
+      img2: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAA
+        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3dmhyAAAAEnRSTlMA/QpX7WQU2m27pi3Ej9KEQXaD5HhjAAAAqklEQVQoz41
+        SWxLDIAh0RcFXTHL/yzZSO01LMpP9WJEVUNA9gfdXTioCSKE/kQQTQmf/ArRYva+xAcuPP37seFII2L7FN4BmXdHzlEPIpDHiZ0A7eIViPc
+        w2QwqipkvMSdNEFBUE1bmMNOyE7FyFaIkAP4jHhhG80lvgkzBODTKpwhRMcexuR7fXzcp08UDq6GRbootp4oRtO3NNpd4NKtnR9hB6oaefw
+        eIFQU0EfnGDRoQAAAAASUVORK5CYII=`,
+      img3: 'https://user-images.githubusercontent.com/12878546/148736255-7193f89e-9caf-49c0-86b0-548209506bd6.gif',
+      longText: 'The 58-letter name Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch is the name of a town on Anglesey, an island of Wales.',
+      labelTouchStatus,
+      textMode,
+      textShadow,
+      textShadowIndex,
+      Platform: Native.Platform,
+      breakStrategy,
+      onTouchTextEnd,
+      onTouchTextMove,
+      onTouchTextStart,
+      decrementLine,
+      incrementLine,
+      changeMode,
+      changeTextShadow,
+      changeBreakStrategy,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.p-demo {
+  margin: 7px;
+  overflow-y: scroll;
+  flex: 1;
+  flex-direction: column;
+}
+
+.p-demo .p-demo-content {
+  margin: 20px;
+}
+
+.p-demo .p-demo-content-status {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+
+.p-demo .p-demo-1 {
+  color: #f44837;
+}
+.p-demo .p-demo-2 {
+  font-size: 30px;
+}
+.p-demo .p-demo-3 {
+  font-weight: bold;
+}
+
+.p-demo .p-demo-4 {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+}
+
+.p-demo .p-demo-5 {
+  text-decoration-line: line-through;
+  text-decoration-color: red;
+}
+
+.p-demo .p-demo-6 {
+  color: #0052d9;
+  font-family: TTTGB;
+  font-size: 32px;
+}
+
+.p-demo .p-demo-7 {
+  /*text-shadow-offset: 1px 1px; !* not support declared separately *!*/
+  /*text-shadow-radius: 3;*/
+  /*text-shadow-color: grey;*/
+}
+
+.p-demo .p-demo-8 {
+  letter-spacing: -1px;
+}
+
+.p-demo .p-demo-9 {
+  letter-spacing: 5px;
+}
+
+.p-demo .button-bar {
+  flex-direction: row;
+}
+
+.p-demo .button {
+  width: 100px;
+  margin: 2px;
+  background-color: #eee;
+  border-style: solid;
+  border-color: black;
+  border-width: 1px;
+  align-items: center;
+  flex-shrink: 1;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-ripple-div.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-ripple-div.vue
new file mode 100644
index 00000000000..bfe0e51d7ec
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-ripple-div.vue
@@ -0,0 +1,99 @@
+<template>
+  <div
+    ref="ripple1"
+    :style="wrapperStyle"
+    :nativeBackgroundAndroid="{ ...nativeBackgroundAndroid }"
+    @layout="onLayout"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { type HippyElement, Native } from '@hippy/vue-next';
+import { defineComponent, watch, ref, toRefs } from '@vue/runtime-core';
+
+import defaultImage from '../../assets/defaultSource.jpg';
+
+const defaultRippleConfig = {
+  borderless: false,
+};
+
+const demo1Style = {
+  display: 'flex',
+  height: '40px',
+  width: '200px',
+  backgroundImage: `${defaultImage}`,
+  backgroundRepeat: 'no-repeat',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: '10px',
+  marginBottom: '10px',
+};
+
+export default defineComponent({
+  name: 'DemoRippleDiv',
+  props: {
+    nativeBackgroundAndroid: {
+      default: defaultRippleConfig,
+    },
+    wrapperStyle: {
+      type: Object,
+      default: () => demo1Style,
+    },
+    positionY: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup(props) {
+    const { positionY } = toRefs(props);
+    const ripple1 = ref(null);
+    const scrollOffsetY = ref(positionY.value);
+    let viewX = 0;
+    let viewY = 0;
+
+    watch(positionY, (to) => {
+      scrollOffsetY.value = to;
+    });
+
+    const onLayout = () => {
+      if (ripple1.value) {
+        Native.measureInAppWindow(ripple1.value).then((rect) => {
+          viewX = rect.left;
+          viewY = rect.top;
+        });
+      }
+    };
+
+    const onTouchStart = (e) => {
+      const t = e.touches[0];
+      if (ripple1.value) {
+        (ripple1.value as HippyElement).setHotspot(
+          t.clientX - viewX,
+          t.clientY + scrollOffsetY.value - viewY,
+        );
+        (ripple1.value as HippyElement).setPressed(true);
+      }
+    };
+
+    const onTouchEnd = () => {
+      if (ripple1.value) {
+        (ripple1.value as HippyElement).setPressed(false);
+      }
+    };
+
+    return {
+      scrollOffsetY: props.positionY,
+      demo1Style,
+      ripple1,
+      onLayout,
+      onTouchStart,
+      onTouchEnd,
+    };
+  },
+});
+</script>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
new file mode 100644
index 00000000000..9a41c0dfba2
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="set-native-props-demo">
+    <label>setNativeProps实现拖动效果</label>
+    <div
+      class="native-demo-1-drag"
+      :style="{ width: screenWidth }"
+      @touchstart.stop="onTouchDown1"
+      @touchmove.stop="onTouchMove1"
+    >
+      <div
+        ref="demoOnePointRef"
+        class="native-demo-1-point"
+      />
+    </div>
+    <div class="splitter" />
+    <label>普通渲染实现拖动效果</label>
+    <div
+      class="native-demo-2-drag"
+      :style="{ width: screenWidth }"
+      @touchstart.stop="onTouchDown2"
+      @touchmove.stop="onTouchMove2"
+    >
+      <div
+        class="native-demo-2-point"
+        :style="{ left: demon2Left + 'px' }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { type HippyElement, Native } from '@hippy/vue-next';
+import { defineComponent, ref, onMounted } from '@vue/runtime-core';
+
+export default defineComponent({
+  setup() {
+    const demoOnePointRef = ref(null);
+    const demon2Left = ref(0);
+    const screenWidth = ref(0);
+
+    onMounted(() => {
+      screenWidth.value = Native.Dimensions.screen.width;
+    });
+
+    const onTouchDown1 = (evt) => {
+      const position = evt.touches[0].clientX - 40;
+      console.log('touchdown x', position, screenWidth.value);
+      if (demoOnePointRef.value) {
+        (demoOnePointRef.value as HippyElement).setNativeProps({
+          style: {
+            left: position,
+          },
+        });
+      }
+    };
+    const onTouchMove1 = (evt) => {
+      const position = evt.touches[0].clientX - 40;
+      console.log('touchmove x', position, screenWidth.value);
+      if (demoOnePointRef.value) {
+        (demoOnePointRef.value as HippyElement).setNativeProps({
+          style: {
+            left: position,
+          },
+        });
+      }
+    };
+    const onTouchDown2 = (evt) => {
+      demon2Left.value = evt.touches[0].clientX - 40;
+      console.log('touchdown x', demon2Left.value, screenWidth.value);
+    };
+    const onTouchMove2 = (evt) => {
+      demon2Left.value = evt.touches[0].clientX - 40;
+      console.log('touchmove x', demon2Left.value, screenWidth.value);
+    };
+
+    return {
+      demoOnePointRef,
+      demon2Left,
+      screenWidth,
+      onTouchDown1,
+      onTouchDown2,
+      onTouchMove1,
+      onTouchMove2,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.set-native-props-demo {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.native-demo-1-drag {
+  height: 80px;
+  background-color: #40b883;
+  position: relative;
+  marginTop: 10px
+}
+.native-demo-1-point {
+  height: 80px;
+  width: 80px;
+  color: #40ee94;
+  background-color: #40ee94;
+  position: absolute;
+  left: 0;
+}
+.native-demo-2-drag {
+  height: 80px;
+  background-color: #40b883;
+  position: relative;
+  marginTop: 10px;
+}
+.native-demo-2-point {
+  height: 80px;
+  width: 80px;
+  color: #40ee94;
+  background-color: #40ee94;
+  position: absolute;
+  left: 0;
+}
+.splitter{
+  marginTop: 50px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
new file mode 100644
index 00000000000..551bdb73e2e
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="shadow-demo">
+    <div
+      v-if="Platform === 'android'"
+      class="no-offset-shadow-demo-cube-android"
+    >
+      <div class="no-offset-shadow-demo-content-android">
+        <p>没有偏移阴影样式</p>
+      </div>
+    </div>
+    <div
+      v-if="Platform === 'ios'"
+      class="no-offset-shadow-demo-cube-ios"
+    >
+      <div class="no-offset-shadow-demo-content-ios">
+        <p>没有偏移阴影样式</p>
+      </div>
+    </div>
+    <div
+      v-if="Platform === 'android'"
+      class="offset-shadow-demo-cube-android"
+    >
+      <div class="offset-shadow-demo-content-android">
+        <p>偏移阴影样式</p>
+      </div>
+    </div>
+    <div
+      v-if="Platform === 'ios'"
+      class="offset-shadow-demo-cube-ios"
+    >
+      <div class="offset-shadow-demo-content-ios">
+        <p>偏移阴影样式</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Native } from '@hippy/vue-next';
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  setup() {
+    return {
+      Platform: Native.Platform,
+    };
+  },
+});
+</script>
+<style scoped>
+#shadow-demo {
+  flex: 1;
+}
+
+/**
+ * P.S. Android shadow size is based on the container size
+ * and a solid shadow background exists.
+ * You should make content fully cover the solid shadow background
+ * whose size is determined by container size, shadowRadius and shadowOffset,
+ * so Android container with shadow(170*170) should be bigger than content(160*160),
+ * and set some offset(e.g. top or left) for content to cover shadow background.
+ *
+ * boxShadow consists attrs as follow：boxShadowOpacity，boxShadowRadius，boxShadowColor，
+ * boxShadowOffsetX，boxShadowOffsetY，boxShadowSpread(iOS only).
+ *
+ * 注意: Android的阴影大小根据容器体积大小来决定，通过在容器上对矩形view做阴影来实现，阴影会有一个实体的背景色。
+ * 因此必须用content内容去遮挡住阴影的实体背景，该背景由容器大小、阴影圆角和阴影偏移共同决定。
+ * Android带有阴影的Container容器大小(170*170)必须大于Content内容的大小(160*160)，
+ * 同时要将Content内容做一定的偏移（如top或者left）来遮盖阴影背景。
+ *
+ * boxShadow支持以下属性：box-shadow-opacity，box-shadow-radius，box-shadow-color，
+ * box-shadow-offset, box-shadow-offset-x，box-shadow-offset-y，box-shadow-spread(仅iOS).
+ *
+ * if you use border-radius, Android container & content both should be set.
+ * 如果设置了border-radius，在Android上必须同时在Container容器和Content内容同时设置该属性。
+ */
+#shadow-demo .no-offset-shadow-demo-cube-android {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  width: 170px;
+  height: 170px;
+  box-shadow-opacity: 0.6;
+  box-shadow-radius: 5;
+  box-shadow-color: #098a29;
+  /* container & content should both set radius */
+  /* 容器和内容都要设置border-radius */
+  border-radius: 5px;
+}
+
+#shadow-demo .no-offset-shadow-demo-content-android {
+  position: absolute;
+  /* android set left & top offset to cover shadow solid background */
+  /* android 设置left和top偏移来遮挡阴影实体背景 */
+  left: 5px;
+  top: 5px;
+  width: 160px;
+  height: 160px;
+  background-color: grey;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#shadow-demo .no-offset-shadow-demo-content-android p {
+  color: white;
+}
+
+#shadow-demo .no-offset-shadow-demo-cube-ios {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  width: 160px;
+  height: 160px;
+  box-shadow-opacity: 0.6;
+  box-shadow-radius: 5;
+  /* spread attr is only supported on iOS */
+  /* spread 属性仅适用于iOS */
+  box-shadow-spread: 1;
+  box-shadow-color: #098a29;
+  /* container & content should both set radius */
+  /* 容器和内容都要设置border-radius */
+  border-radius: 5px;
+}
+
+#shadow-demo .no-offset-shadow-demo-content-ios {
+  width: 160px;
+  height: 160px;
+  background-color: grey;
+  border-radius: 5px;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#shadow-demo .no-offset-shadow-demo-content-ios p {
+  color: white;
+}
+
+/**
+ * P.S. Android shadow size is based on the container size
+ * and a solid shadow background exists.
+ * Shadow offset is not fully supported on Android.
+ * if you have to use boxShadowOffset,
+ * the tricky methods below is for reference on both Android and iOS.
+ *
+ * 注意: Android 的阴影大小根据容器体积大小来决定，通过在容器上对矩形view做阴影来实现，阴影会有一个实体的背景色。
+ * 在Android上shadow offset没有很好地支持。
+ * 如果你必须要使用boxShadowOffset，可以通过以下的小技巧来调整适配。
+ */
+#shadow-demo .offset-shadow-demo-cube-android {
+  position: absolute;
+  left: 50px;
+  top: 300px;
+  width: 175px;
+  height: 175px;
+  box-shadow-opacity: 0.6;
+  box-shadow-radius: 5;
+  box-shadow-color: #098a29;
+  box-shadow-offset: 15px 15px;
+  /*box-shadow-offset-x: 15px;*/ /* it is supported by setting offset separately
+    /*box-shadow-offset-y: 15px;*/
+}
+
+#shadow-demo .offset-shadow-demo-content-android {
+  width: 160px;
+  height: 160px;
+  background-color: grey;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#shadow-demo .offset-shadow-demo-content-android p {
+  color: white
+}
+
+#shadow-demo .offset-shadow-demo-cube-ios {
+  position: absolute;
+  left: 50px;
+  top: 300px;
+  width: 160px;
+  height: 160px;
+  box-shadow-opacity: 0.6;
+  box-shadow-radius: 5;
+  box-shadow-spread: 1; /* spread attr is only supported on iOS */
+  box-shadow-offset: 10px 10px;
+  /*box-shadow-offset-x: 10px;*/ /* it is supported by setting offset separately
+    /*box-shadow-offset-y: 10px;*/
+  box-shadow-color: #098a29;
+}
+
+#shadow-demo .offset-shadow-demo-content-ios {
+  width: 160px;
+  height: 160px;
+  background-color: grey;
+  justify-content: center;
+  align-items: center;
+}
+
+#shadow-demo .offset-shadow-demo-content-ios p {
+  color: white;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
new file mode 100644
index 00000000000..dcab6818797
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
@@ -0,0 +1,129 @@
+<template>
+  <div id="demo-textarea">
+    <label>多行文本:</label>
+    <textarea
+      :value="content"
+      :defaultValue="content"
+      :rows="10"
+      placeholder="多行文本编辑器"
+      class="textarea"
+      @change="content = $event.value"
+      @contentSizeChange="contentSizeChange"
+    />
+    <div class="output-container">
+      <p class="output">
+        输入的文本为：{{ content }}
+      </p>
+    </div>
+    <label v-if="Platform === 'android'">break-strategy={{ breakStrategy }}</label>
+    <div v-if="Platform === 'android'">
+      <textarea
+        class="textarea"
+        :defaultValue="longText"
+        :break-strategy="breakStrategy"
+      />
+      <div class="button-bar">
+        <button
+          class="button"
+          @click="() => changeBreakStrategy('simple')"
+        >
+          <span>simple</span>
+        </button>
+        <button
+          class="button"
+          @click="() => changeBreakStrategy('high_quality')"
+        >
+          <span>high_quality</span>
+        </button>
+        <button
+          class="button"
+          @click="() => changeBreakStrategy('balanced')"
+        >
+          <span>balanced</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Native } from '@hippy/vue-next';
+import { defineComponent, ref } from '@vue/runtime-core';
+
+export default defineComponent({
+  setup() {
+    const content = ref('The quick brown fox jumps over the lazy dog，快灰狐狸跳过了懒 🐕。');
+    const breakStrategy = ref('simple');
+
+    /**
+       * After listening to the size change of the text box, output event info
+       *
+       * @param evt
+       */
+    const contentSizeChange = (evt: Event) => {
+      console.log(evt);
+    };
+
+    const changeBreakStrategy = (strategy: string) => {
+      breakStrategy.value = strategy;
+    };
+
+    return {
+      content,
+      breakStrategy,
+      Platform: Native.Platform,
+      longText: 'The 58-letter name Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch is the name of a town on Anglesey, an island of Wales.',
+      contentSizeChange,
+      changeBreakStrategy,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#demo-textarea {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 7px;
+}
+
+#demo-textarea label {
+  align-self: flex-start;
+  font-weight: bold;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+#demo-textarea .textarea {
+  width: 300px;
+  height: 150px;
+  color: #242424;
+  text-align: left;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+  underline-color-android: #40b883;
+  placeholder-text-color: #666;
+  align-self: center;
+}
+
+#demo-textarea .output {
+  word-break: break-all;
+}
+
+#demo-textarea .button-bar {
+  flex-direction: row;
+}
+
+#demo-textarea .button {
+  width: 100px;
+  margin: 2px;
+  backgroundColor: #eee;
+  border-style: solid;
+  border-color: black;
+  border-width: 1px;
+  align-items: center;
+  flex-shrink: 1;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-turbo.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-turbo.vue
new file mode 100644
index 00000000000..e0d1fc2ca2d
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-turbo.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="demo-turbo">
+    <span class="result"> {{ result }} </span>
+    <ul style="flex: 1">
+      <li
+        v-for="funcName in funList"
+        :key="funcName"
+        class="cell"
+      >
+        <div class="contentView">
+          <div class="func-info">
+            <span :numberOfLines="0">函数名：{{ funcName }}</span>
+          </div>
+          <span
+            class="action-button"
+            @click.stop="() => onTurboFunc(funcName)"
+          >运行</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/runtime-core';
+
+import {
+  getArray,
+  getBoolean,
+  getMap,
+  getNum,
+  getObject,
+  getString,
+  getTurboConfig,
+  nativeWithPromise,
+  printTurboConfig,
+} from './demoTurbo';
+
+export default defineComponent({
+  setup() {
+    let config = null;
+    const result = ref('');
+
+    const onTurboFunc = async (funcName) => {
+      if (funcName === 'nativeWithPromise') {
+        result.value = await nativeWithPromise('aaa');
+      } else if (funcName === 'getTurboConfig') {
+        config = getTurboConfig();
+        result.value = '获取到config对象';
+      } else if (funcName === 'printTurboConfig') {
+        result.value = printTurboConfig(config ?? getTurboConfig());
+      } else if (funcName === 'getInfo') {
+        result.value = (config ?? getTurboConfig()).getInfo();
+      } else if (funcName === 'setInfo') {
+        (config ?? getTurboConfig()).setInfo('Hello World');
+        result.value = '设置config信息成功';
+      } else {
+        const basicFuncs = {
+          getString: () => getString('123'),
+          getNum: () => getNum(1024),
+          getBoolean: () => getBoolean(true),
+          getMap: () => getMap(new Map([
+            ['a', '1'],
+            ['b', '2'],
+          ])),
+          getObject: () => getObject({ c: '3', d: '4' }),
+          getArray: () => getArray(['a', 'b', 'c']),
+        };
+        result.value = basicFuncs[funcName]();
+      }
+    };
+
+    return {
+      result,
+      funList: [
+        'getString',
+        'getNum',
+        'getBoolean',
+        'getMap',
+        'getObject',
+        'getArray',
+        'nativeWithPromise',
+        'getTurboConfig',
+        'printTurboConfig',
+        'getInfo',
+        'setInfo',
+      ],
+      onTurboFunc,
+    };
+  },
+});
+</script>
+
+<style>
+.demo-turbo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo-turbo .cell .contentView {
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #ccc;
+  margin-bottom: 1px;
+}
+
+.demo-turbo .func-info {
+  justify-content: center;
+
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.demo-turbo .action-button {
+  background-color: #4c9afa;
+  color: white;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  width: 80px;
+  border-radius: 6px;
+}
+
+.demo-turbo .result {
+  background-color: darkseagreen;
+  min-height: 150px;
+  padding: 15px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
new file mode 100644
index 00000000000..15335de1a87
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
@@ -0,0 +1,201 @@
+<template>
+  <div id="websocket-demo">
+    <div>
+      <p class="demo-title">
+        Url:
+      </p>
+      <input
+        ref="inputUrl"
+        value="wss://echo.websocket.org"
+      >
+      <div class="row">
+        <button @click.stop="connect">
+          <span>Connect</span>
+        </button>
+        <button @click.stop="disconnect">
+          <span>Disconnect</span>
+        </button>
+      </div>
+    </div>
+    <div>
+      <p class="demo-title">
+        Message:
+      </p>
+      <input
+        ref="inputMessage"
+        value="Rock it with Hippy WebSocket"
+      >
+      <button @click.stop="sendMessage">
+        <span>Send</span>
+      </button>
+    </div>
+    <div>
+      <p class="demo-title">
+        Log:
+      </p>
+      <div class="output fullscreen">
+        <div>
+          <p
+            v-for="(line, index) in output"
+            :key="index"
+          >
+            {{ line }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type Ref } from '@vue/runtime-core';
+
+export interface DemoWebsocketData {
+    output: string[];
+    ws: WebSocket | null;
+  }
+
+  interface HippyInput {
+    getValue: () => Promise<string>;
+  }
+
+// websocket instance
+let wsInstance: WebSocket | null = null;
+// output content
+const output: Ref<string[]> = ref([]);
+
+/**
+   * Add content to the output area
+   *
+   * @param message
+   */
+const appendOutput = (message: string) => {
+  output.value.unshift(message);
+};
+
+/**
+   * disconnect websocket connection
+   */
+const wsDisconnect = () => {
+  // If the current state is connected, close the connection
+  if (wsInstance && wsInstance.readyState === 1) {
+    wsInstance.close();
+  }
+};
+
+/**
+   * Establish a websocket connection
+   *
+   * @param url
+   */
+const wsConnect = (url: string) => {
+  // First close the existing connection
+  wsDisconnect();
+  // Create instance and bind event callback
+  wsInstance = new WebSocket(url);
+  wsInstance.onopen = () => appendOutput(`[Opened] ${wsInstance?.url}`);
+  wsInstance.onclose = () => appendOutput(`[Closed] ${wsInstance?.url}`);
+  wsInstance.onerror = (error) => {
+    const newError: Event & { reason?: string } = error;
+    appendOutput(`[Error] ${newError.reason}`);
+  };
+  wsInstance.onmessage = message => appendOutput(`[Received] ${message.data}`);
+};
+
+/**
+   * Send websocket message
+   */
+const wsSendMessage = (message) => {
+  appendOutput(`[Sent] ${message}`);
+  if (wsInstance) {
+    wsInstance.send(message);
+  }
+};
+
+export default defineComponent({
+  setup() {
+    const inputUrl = ref(null);
+    const inputMessage = ref(null);
+
+    /**
+       * Click to establish a websocket connection
+       */
+    const connect = () => {
+      // Get the url of the input box and establish a websocket connection
+      const wsUrlInput = inputUrl.value;
+
+      if (wsUrlInput) {
+        (wsUrlInput as HippyInput).getValue().then((url) => {
+          wsConnect(url);
+        });
+      }
+    };
+
+    /**
+       * Click to close the websocket connection
+       */
+    const disconnect = () => {
+      wsDisconnect();
+    };
+
+    /**
+       * Click to send the content of the input box to websocket
+       */
+    const sendMessage = () => {
+      const messageInput = inputMessage.value;
+
+      if (messageInput) {
+        (messageInput as HippyInput).getValue().then((message) => {
+          wsSendMessage(message);
+        });
+      }
+    };
+    return {
+      output,
+      inputUrl,
+      inputMessage,
+      connect,
+      disconnect,
+      sendMessage,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#websocket-demo .demo-title {
+  color: #ccc;
+}
+
+#websocket-demo .output {
+  overflow-y: scroll;
+}
+
+#websocket-demo button {
+  background-color: #40b883;
+  border-color: #5dabfb;
+  border-style: solid;
+  border-width: 1px;
+  padding-horizontal: 20px;
+  font-size: 16px;
+  color: #fff;
+  margin: 10px;
+}
+
+#websocket-demo button span {
+  height: 56px;
+  line-height: 56px;
+}
+
+#websocket-demo input {
+  color: black;
+  flex: 1;
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  border-bottom-color: #40b883;
+  border-bottom-width: 1px;
+  border-style: solid;
+  padding: 0;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demoTurbo.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demoTurbo.ts
new file mode 100644
index 00000000000..0225bd54827
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demoTurbo.ts
@@ -0,0 +1,29 @@
+const getString = (strVal: NeedToTyped): string => global.getTurboModule('demoTurbo').getString(strVal);
+
+const getNum = (numVal: NeedToTyped): number => global.getTurboModule('demoTurbo').getNum(numVal);
+
+const getBoolean = (boolVal: NeedToTyped): boolean => global.getTurboModule('demoTurbo').getBoolean(boolVal);
+
+const getMap = (mapVal: NeedToTyped): Map<string, string> => global.getTurboModule('demoTurbo').getMap(mapVal);
+
+const getObject = (jsonVal: NeedToTyped): NeedToTyped => global.getTurboModule('demoTurbo').getObject(jsonVal);
+
+const getArray = (arrayVal: NeedToTyped): NeedToTyped => global.getTurboModule('demoTurbo').getArray(arrayVal);
+
+const nativeWithPromise = async (value: NeedToTyped): Promise<NeedToTyped> => global.turboPromise(global.getTurboModule('demoTurbo').nativeWithPromise)(value);
+
+const getTurboConfig = (): NeedToTyped => global.getTurboModule('demoTurbo').getTurboConfig();
+
+const printTurboConfig = (config: NeedToTyped): NeedToTyped => global.getTurboModule('demoTurbo').printTurboConfig(config);
+
+export {
+  getArray,
+  getBoolean,
+  getNum,
+  getMap,
+  getObject,
+  getString,
+  getTurboConfig,
+  nativeWithPromise,
+  printTurboConfig,
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-http.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-http.vue
new file mode 100644
index 00000000000..eb29222dc69
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-http.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    id="async-component-http"
+    class="local-local"
+  >
+    <p class="async-txt">
+      我是远程异步组件
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  name: 'DynamicImportHttp',
+});
+</script>
+
+<style>
+  #async-component-http {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 200px;
+    width: 300px;
+    background-color: #50ca92;
+    border-radius: 10px;
+    margin-bottom: 10px;
+  }
+  .async-txt {
+    color: black;
+  }
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-local.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-local.vue
new file mode 100644
index 00000000000..177114c5427
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/dynamicImport/async-component-local.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    class="async-component-local"
+  >
+    <p class="async-txt">
+      我是本地异步组件
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  name: 'DynamicImportLocal',
+});
+</script>
+
+<style scoped>
+  .async-component-local {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background-color: #50ca92;
+    border-radius: 10px;
+    margin-bottom: 10px;
+  }
+  .async-txt {
+    color: black;
+  }
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/index.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/index.ts
new file mode 100644
index 00000000000..fcbe5787b94
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/index.ts
@@ -0,0 +1,65 @@
+import demoButton from './demo-button.vue';
+import demoDiv from './demo-div.vue';
+import demoDynamicImport from './demo-dynamicimport.vue';
+import demoIFrame from './demo-iframe.vue';
+import demoImg from './demo-img.vue';
+import demoInput from './demo-input.vue';
+import demoList from './demo-list.vue';
+import demoP from './demo-p.vue';
+import demoShadow from './demo-shadow.vue';
+import demoTextarea from './demo-textarea.vue';
+import demoTurbo from './demo-turbo.vue';
+import demoWebSocket from './demo-websocket.vue';
+
+const demos = {
+  demoDiv: {
+    name: 'div 组件',
+    component: demoDiv,
+  },
+  demoShadow: {
+    name: 'box-shadow',
+    component: demoShadow,
+  },
+  demoP: {
+    name: 'p 组件',
+    component: demoP,
+  },
+  demoButton: {
+    name: 'button 组件',
+    component: demoButton,
+  },
+  demoImg: {
+    name: 'img 组件',
+    component: demoImg,
+  },
+  demoInput: {
+    name: 'input 组件',
+    component: demoInput,
+  },
+  demoTextarea: {
+    name: 'textarea 组件',
+    component: demoTextarea,
+  },
+  demoUl: {
+    name: 'ul/li 组件',
+    component: demoList,
+  },
+  demoIFrame: {
+    name: 'iframe 组件',
+    component: demoIFrame,
+  },
+  demoWebSocket: {
+    name: 'WebSocket',
+    component: demoWebSocket,
+  },
+  demoDynamicImport: {
+    name: 'DynamicImport',
+    component: demoDynamicImport,
+  },
+  demoTurbo: {
+    name: 'Turbo',
+    component: demoTurbo,
+  },
+};
+
+export default demos;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/index.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/index.ts
new file mode 100644
index 00000000000..b6eb3a12475
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/index.ts
@@ -0,0 +1,5 @@
+import Style1 from './style1.vue';
+import Style2 from './style2.vue';
+import Style5 from './style5.vue';
+
+export { Style1, Style2, Style5 };
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/mock.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/mock.ts
new file mode 100644
index 00000000000..09b301d16fb
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/mock.ts
@@ -0,0 +1,43 @@
+const MOCK_IMG =  'https://user-images.githubusercontent.com/12878546/148736841-59ce5d1c-8010-46dc-8632-01c380159237.jpg';
+const MOCK_IMG2 =  'https://user-images.githubusercontent.com/12878546/148736850-4fc13304-25d4-4b6a-ada3-cbf0745666f5.jpg';
+const MOCK_COVER =  'https://user-images.githubusercontent.com/12878546/148736859-29e3a5b2-612a-4fdd-ad21-dc5d29fa538f.jpg';
+
+const STYLE_1 = {
+  style: 1,
+  itemBean: {
+    title: '非洲总统出行真大牌，美制武装直升机和中国潜艇为其保驾',
+    picList: [MOCK_IMG, MOCK_IMG, MOCK_IMG],
+    subInfo: ['三图评论', '11评'],
+  },
+};
+const STYLE_2 = {
+  style: 2,
+  itemBean: {
+    title: '彼得·泰尔：认知未来是投资人的谋生之道',
+    picUrl: MOCK_IMG2,
+    subInfo: ['左文右图'],
+  },
+};
+const STYLE_5 = {
+  style: 5,
+  itemBean: {
+    title: '愤怒！美官员扬言：“不让中国拿走南海的岛屿，南海岛礁不属于中国”？',
+    picUrl: MOCK_COVER,
+    subInfo: ['六眼神魔  5234播放'],
+  },
+};
+
+// mock data
+const MOCK_DATA = [
+  STYLE_5,
+  STYLE_1,
+  STYLE_2,
+  STYLE_1,
+  STYLE_2,
+  STYLE_1,
+  STYLE_2,
+  STYLE_5,
+  STYLE_1,
+];
+
+export default MOCK_DATA;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style1.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style1.vue
new file mode 100644
index 00000000000..2f3407c63b7
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style1.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="list-view-item style-one">
+    <p
+      :numberOfLines="2"
+      :enableScale="true"
+      class="article-title"
+    >
+      {{ itemBean.title }}
+    </p>
+    <div class="style-one-image-container">
+      <img
+        v-for="(pic, index) in itemBean.picList"
+        :key="index"
+        :src="pic"
+        alt=""
+        class="image style-one-image"
+      >
+    </div>
+    <div :style="{ alignSelf: 'flex-start', marginTop: '5px' }">
+      <p class="normal-text">
+        {{ itemBean.subInfo.join('') }}
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    itemBean: {
+      type: Object,
+      default: () => {},
+    },
+  },
+});
+</script>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style2.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style2.vue
new file mode 100644
index 00000000000..3fe963e63a5
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style2.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="list-view-item style-two">
+    <div class="style-two-left-container">
+      <p
+        class="article-title"
+        :numberOfLines="2"
+        :enableScale="true"
+      >
+        {{ itemBean.title }}
+      </p>
+      <div :style="{ alignSelf: 'flex-start', marginTop: '5px' }">
+        <p class="normal-text">
+          {{ itemBean.subInfo.join('') }}
+        </p>
+      </div>
+    </div>
+    <div class="style-two-image-container">
+      <img
+        :src="itemBean.picUrl"
+        alt=""
+        class="image style-two-image"
+      >
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    itemBean: {
+      type: Object,
+      default: () => {},
+    },
+  },
+});
+</script>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style5.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style5.vue
new file mode 100644
index 00000000000..a9adb0e8681
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/list-items/style5.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="list-view-item style-five">
+    <p
+      :numberOfLines="2"
+      :enableScale="true"
+      class="article-title"
+    >
+      {{ itemBean.title }}
+    </p>
+    <div class="style-five-image-container">
+      <img
+        :src="itemBean.picUrl"
+        alt=""
+        class="image"
+      >
+    </div>
+    <div :style="{ alignSelf: 'flex-start', marginTop: '5px' }">
+      <p class="normal-text">
+        {{ itemBean.subInfo.join(' ') }}
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    itemBean: {
+      type: Object,
+      default: () => {},
+    },
+  },
+});
+</script>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
new file mode 100644
index 00000000000..ea405d9116d
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <animation
+      ref="animationView"
+      :playing="playing"
+      :actions="colorActions"
+      class="color-green"
+      @actionsDidUpdate="actionsDidUpdate"
+    >
+      <div class="color-white">
+        <slot />
+      </div>
+    </animation>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type Ref, onMounted, nextTick } from '@vue/runtime-core';
+import { type AnimationInstance } from '@hippy/vue-next';
+import { IS_SSR_MODE } from '../../../env';
+
+const backgroundColorAnimation = {
+  backgroundColor: [
+    {
+      startValue: '#40b883',
+      toValue: 'yellow',
+      valueType: 'color', // Color animation needs to explicitly specify valueType as color
+      duration: 1000,
+      delay: 0,
+      mode: 'timing',
+      timingFunction: 'linear',
+    },
+    {
+      startValue: 'yellow',
+      toValue: '#40b883',
+      duration: 1000,
+      valueType: 'color', // Color animation needs to explicitly specify valueType as color
+      delay: 0,
+      mode: 'timing',
+      timingFunction: 'linear',
+      repeatCount: -1,
+    },
+  ],
+};
+
+export default defineComponent({
+  props: {
+    playing: Boolean,
+  },
+  setup() {
+    const animationView: Ref<null | AnimationInstance> = ref(null);
+    const colorActions: Ref = ref('');
+
+    if (!IS_SSR_MODE) {
+      colorActions.value = backgroundColorAnimation;
+    }
+
+    const actionsDidUpdate = () => {
+      // pay attention pls, animate operate should execute
+      // after dom render finished
+      nextTick().then(() => {
+        console.log('color-change actions updated & startAnimation');
+        if (animationView.value) {
+          animationView.value.start();
+        }
+      });
+    };
+
+    onMounted(async () => {
+      if (IS_SSR_MODE) {
+        colorActions.value = '';
+        await nextTick();
+        colorActions.value = backgroundColorAnimation;
+      }
+    });
+
+    return {
+      animationView,
+      colorActions,
+      actionsDidUpdate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.color-green {
+  margin-top: 10px;
+  justify-content: center;
+  align-items: center;
+  background-color: #40b883;
+  width: 200px;
+  height: 80px;
+  margin-left: 5px;
+}
+
+.color-white {
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  width: 100px;
+  height: 35px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
new file mode 100644
index 00000000000..83e91dfe0d0
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <animation
+      ref="animationView"
+      :playing="playing"
+      :actions="loopActions"
+      class="loop-green"
+      @actionsDidUpdate="actionsDidUpdate"
+    >
+      <div class="loop-white">
+        <slot />
+      </div>
+    </animation>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref, type Ref } from '@vue/runtime-core';
+import { type AnimationInstance } from '@hippy/vue-next';
+import { IS_SSR_MODE } from '../../../env';
+
+const horizonAnimation = {
+  transform: {
+    translateX: [
+      {
+        startValue: 50,
+        toValue: 150,
+        duration: 1000,
+        timingFunction: 'cubic-bezier(  0.45,2.84, 000.38,.5)',
+      },
+      {
+        startValue: 150,
+        toValue: 50,
+        duration: 1000,
+        repeatCount: -1,
+        timingFunction: 'cubic-bezier(  0.45,2.84, 000.38,.5)',
+      },
+    ],
+  },
+};
+
+export default defineComponent({
+  props: {
+    playing: Boolean,
+  },
+  setup() {
+    const animationView: Ref<null | AnimationInstance> = ref(null);
+    const loopActions: Ref = ref('');
+
+    if (!IS_SSR_MODE) {
+      loopActions.value = horizonAnimation;
+    }
+
+    const actionsDidUpdate = () => {
+      // pay attention pls, animate operate should execute
+      // after dom render finished
+      nextTick().then(() => {
+        console.log('cubic-bezier actions updated & startAnimation');
+        if (animationView.value) {
+          animationView.value.start();
+        }
+      });
+    };
+
+    onMounted(async () => {
+      if (IS_SSR_MODE) {
+        // ssr mode should update action to start animation
+        loopActions.value = '';
+        await nextTick();
+        loopActions.value = horizonAnimation;
+      }
+    });
+
+    return {
+      animationView,
+      loopActions: horizonAnimation,
+      actionsDidUpdate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.loop-green {
+  margin-top: 10px;
+  justify-content: center;
+  align-items: center;
+  background-color: #40b883;
+  width: 200px;
+  height: 80px;
+}
+
+.loop-white {
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  width: 160px;
+  height: 50px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/down-vote-face.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/down-vote-face.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cbdf74961d9fa36e668b0d3192912580170c191
GIT binary patch
literal 341
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaGJY=BRQE0A86p|B!TX=%Cwh>@kZ
zC0`lLR$QK`1Qc18t^ko*mZ`8QUkAj^Pz0jo84AlY6_;lL6)UYMP(3r#cv*(h@(d-Q
zvZd*YE5N$WC#5_CS|C>v<QL5FQvbp>Grk|;o{#R#%uQo|dwfHqjissx>x9DiIDh@z
zxwb%+ot`d^ArhCjPH-1GY{21aueI&!9dE7g_GvAPPO9Aet^43(J1g@X)`FMp2_8Eg
zELG-BTP;6PQd6%@ScH4COK~8p#LF-x?X*oMZ7ZD@Dx3LkEMHs2rkAB8JAeLxtaUA0
z<1RmIY?^+of79hn@Ax+UeKvEuj<BW3DfcMe6&oIR_li`t%3rhQ`*U#*gU4MC|Kf}d
R$AOMw@O1TaS?83{1OU<$fm8qh

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
new file mode 100644
index 00000000000..f5c21ea9dc8
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <animation
+      ref="animationLoop"
+      :playing="playing"
+      :actions="loopActions"
+      class="loop-green"
+      @actionsDidUpdate="actionsDidUpdate"
+    >
+      <div class="loop-white">
+        <slot />
+      </div>
+    </animation>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  toRefs,
+  watch,
+  ref,
+  onMounted,
+  nextTick,
+  type Ref,
+} from '@vue/runtime-core';
+import { type AnimationInstance } from '@hippy/vue-next';
+import { IS_SSR_MODE } from '../../../env';
+
+const horizonAnimation = {
+  transform: {
+    translateX: {
+      startValue: 0,
+      toValue: 200,
+      duration: 2000,
+      repeatCount: -1,
+    },
+  },
+};
+
+const verticalAnimation = {
+  transform: {
+    translateY: {
+      startValue: 0,
+      toValue: 50,
+      duration: 2000,
+      repeatCount: -1,
+    },
+  },
+};
+
+export default defineComponent({
+  props: {
+    playing: Boolean,
+    direction: {
+      type: String,
+      default: '',
+    },
+
+  },
+  setup(props) {
+    const { direction } = toRefs(props);
+    const loopActions: Ref = ref('');
+    const animationLoop: Ref<null | AnimationInstance> = ref(null);
+
+    const setActions = (direction: string) => {
+      switch (direction) {
+        case 'horizon':
+          loopActions.value = horizonAnimation;
+          break;
+        case 'vertical':
+          loopActions.value = verticalAnimation;
+          break;
+        default:
+          throw new Error('direction must be defined in props');
+      }
+    };
+
+    watch(
+      direction,
+      (newVal) => {
+        setActions(newVal);
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    const actionsDidUpdate = () => {
+      // pay attention pls, animate operate should execute
+      // after dom render finished
+      nextTick().then(() => {
+        console.log('loop actions updated & startAnimation');
+        if (animationLoop.value) {
+          animationLoop.value.start();
+        }
+      });
+    };
+
+    onMounted(async () => {
+      if (IS_SSR_MODE) {
+        // ssr mode should update action to start animation
+        loopActions.value = '';
+        await nextTick();
+        setActions(props.direction);
+      }
+    });
+
+    return {
+      loopActions,
+      animationLoop,
+      actionsDidUpdate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.loop-green {
+  margin-top: 10px;
+  justify-content: center;
+  align-items: center;
+  background-color: #40b883;
+  width: 200px;
+  height: 80px;
+}
+
+.loop-white {
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  width: 160px;
+  height: 50px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-eye.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..12ae5f7028cc6f50be3fc4ba98783b7bc8b8afd6
GIT binary patch
literal 333
zcmV-T0kZyyP)<h;3K|Lk000e1NJLTq000sI000FD1^@s6NFBU%00001b5ch_0Itp)
z=>Px$2T4RhR2Ug!WB`Iy<x2d&KmKoG{QuvSfsyf;Fb{9Nd(Wk>AUSlfvqX>k?U&Du
z4FCUI{byu6&C1VM7uI?2BjcHw#;iBby*&lgU;xv^$jERkQX;{Yv7zA~ObkT-Z)jjz
z{$j!5|Nj}Rki;*j8wr~+JIZh*|7T!GMUnt9WiNldd}H02_g9d`)ifT516@*xECyst
zynpfIG0VUI|2-HP7=Qg|WZ2HgzyQ?vUl}Or&%p4{14yqx*2D-D`_I7mn~~xFR$vfZ
z1-eWHsNNT31`87t)7t-R|Ffbe-hT<xw5(W7gyHKSdl(-^11;Oi!NE}(JmLCtnAoa9
fZK2=af4Bhv>BVB#L|k+800000NkvXXu0mjfhCr9(

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-mouth.png b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/up-vote-mouth.png
new file mode 100644
index 0000000000000000000000000000000000000000..56e0fadcbbec9ec31a5833fbcc5fbdb0395b8bcd
GIT binary patch
literal 598
zcmeAS@N?(olHy`uVBq!ia0vp^3P3E#!3-q3o8ry^sfPhRA+A7rMUL8rBAqSu&dV~D
zmt`s~%}`jDuCOdaab>phwieHod0N|By*E@^ttm193WB846+mi$C{uAohSLB4|JRpW
zfTS{%K-$xR3=molLqPF01*-cS91hRQ+}j_yt1DzV$Rfp61v)^*s|$3%1_IRswJWU3
z(q5LY2sCqPy29lx6K)+?bb5K+^<6VJ)!P62_xHv1qxVm4IJvmu;MC+lzrO$Y{O0Ss
zr|%zMdv)jZw+}Bry}0}F`JLN`mR{OC;lhTlv#XkRw);0u`;`Usq)|zbUogX8?my2S
zEbM7k{rmUNpWi>uty@0b&w%mw*H4#sZ>=dwj&>7d0oro=+WINobva4)65{uEZ2k$<
z{mIkCF+}5h>80aghY|$Z9_lY)e#sfTYVYjEFBjh2`_Fn(|5fLVJ>8ME>0-rfm${$+
zDqD1|Ai#I8G=J(#F4IRHR|S2%i&9)C%APc8<=ZG_!qBt5Vz2Mv?;4M8|KcmIn%%!h
z!DsUFrRzN#Cj5+N<u-d>Y$o2gzkhP0T|BRu30vEiRV<2kndO#FeXxXmfvVZ+18sd9
zvRyn`E#CP_&glG_s_AiqX_|MWWW|;9_3u^({E%NWD^~RW)*P-!%pcZB3O@+f2sz)a
zQ2msJ|7gs_AJf0e9l5>7@f-6$GwHd4najWS@42aP_*1~7s^st0i!67PaNqyPDU$2)
U!J4)CAkg;=p00i_>zopr0RKKApa1{>

literal 0
HcmV?d00001

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-down.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-down.vue
new file mode 100644
index 00000000000..5bb6603eb26
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-down.vue
@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <animation
+      ref="animationRef"
+      :actions="animations.face"
+      class="vote-face"
+      playing
+      @start="animationStart"
+      @end="animationEnd"
+      @repeat="animationRepeat"
+      @cancel="animationCancel"
+    />
+    <animation
+      tag="img"
+      class="vote-down-face"
+      playing
+      :props="{ src: imgs.downVoteFace }"
+      :actions="animations.downVoteFace"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  watch,
+  ref,
+  type Ref,
+  toRefs,
+} from '@vue/runtime-core';
+import { type AnimationInstance } from '@hippy/vue-next';
+import downVoteFace from './down-vote-face.png';
+
+const face1 = {
+  transform: {
+    scale: [
+      {
+        startValue: 1,
+        toValue: 1.2,
+        duration: 250,
+        timingFunction: 'linear',
+      },
+      {
+        startValue: 1.2,
+        toValue: 1,
+        duration: 250,
+        delay: 750,
+        timingFunction: 'linear',
+      },
+    ],
+  },
+};
+const face2 = {
+  transform: {
+    translateX: [
+      {
+        startValue: 10,
+        toValue: 1,
+        duration: 250,
+        timingFunction: 'linear',
+      },
+      {
+        startValue: 1,
+        toValue: 10,
+        duration: 250,
+        delay: 750,
+        timingFunction: 'linear',
+        repeatCount: -1,
+      },
+    ],
+  },
+};
+
+export default defineComponent({
+  props: {
+    isChanged: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props) {
+    const animationRef: Ref<null | AnimationInstance> = ref(null);
+    const animations: Ref = ref({
+      face: face1,
+      downVoteFace: {
+        left: [
+          {
+            startValue: 16,
+            toValue: 10,
+            delay: 250,
+            duration: 125,
+          },
+          {
+            startValue: 10,
+            toValue: 24,
+            duration: 250,
+          },
+          {
+            startValue: 24,
+            toValue: 10,
+            duration: 250,
+          },
+          {
+            startValue: 10,
+            toValue: 16,
+            duration: 125,
+          },
+        ],
+        transform: {
+          scale: [
+            {
+              startValue: 1,
+              toValue: 1.3,
+              duration: 250,
+              timingFunction: 'linear',
+            },
+            {
+              startValue: 1.3,
+              toValue: 1,
+              delay: 750,
+              duration: 250,
+              timingFunction: 'linear',
+            },
+          ],
+        },
+      },
+    });
+    const { isChanged } = toRefs(props);
+
+    const animationStart = () => {
+      console.log('animation-start callback');
+    };
+    const animationEnd = () => {
+      console.log('animation-end callback');
+    };
+    const animationRepeat = () => {
+      console.log('animation-repeat callback');
+    };
+    const animationCancel = () => {
+      console.log('animation-cancel callback');
+    };
+
+    watch(isChanged, (to, from) => {
+      if (!from && to) {
+        console.log('changed to face2');
+        animations.value.face = face2;
+      } else if (from && !to) {
+        console.log('changed to face1');
+        animations.value.face = face1;
+      }
+      /**
+       * After the actions are switched, start the animation manually.
+       * Since the creation of animation requires communication with the terminal,
+       * delay 10ms to ensure that the animation has been created
+       */
+      setTimeout(() => {
+        if (animationRef.value) {
+          animationRef.value.start();
+        }
+      }, 10);
+    });
+
+    return {
+      animationRef,
+      imgs: {
+        downVoteFace,
+      },
+      animations,
+      animationStart,
+      animationEnd,
+      animationRepeat,
+      animationCancel,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.vote-face {
+  width: 40px;
+  height: 40px;
+  background-color: #ffdb00;
+  border-color: #e9b156;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 20px;
+}
+
+.vote-down-face {
+  position: absolute;
+  top: 15px;
+  left: 16px;
+  width: 18px;
+  height: 18px;
+  resize-mode: stretch;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-up.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-up.vue
new file mode 100644
index 00000000000..6c46e5a0839
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/vote-up.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <animation
+      :actions="animations.face"
+      class="vote-face"
+      playing
+    />
+    <animation
+      tag="img"
+      class="vote-up-eye"
+      playing
+      :props="{ src: imgs.upVoteEye }"
+      :actions="animations.upVoteEye"
+    />
+    <animation
+      tag="img"
+      class="vote-up-mouth"
+      playing
+      :props="{ src: imgs.upVoteMouth }"
+      :actions="animations.upVoteMouth"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/runtime-core';
+
+import upVoteEye from './up-vote-eye.png';
+import upVoteMouth from './up-vote-mouth.png';
+
+export default defineComponent({
+  setup() {
+    return {
+      imgs: {
+        upVoteEye,
+        upVoteMouth,
+      },
+      animations: {
+        face: {
+          transform: {
+            scale: [
+              {
+                startValue: 1,
+                toValue: 1.2,
+                duration: 250,
+                timingFunction: 'linear',
+              },
+              {
+                startValue: 1.2,
+                toValue: 1,
+                duration: 250,
+                delay: 750,
+                timingFunction: 'linear',
+              },
+            ],
+          },
+        },
+        upVoteEye: {
+          top: [
+            {
+              startValue: 14,
+              toValue: 8,
+              delay: 250,
+              duration: 125,
+            },
+            {
+              startValue: 8,
+              toValue: 14,
+              duration: 250,
+            },
+            {
+              startValue: 14,
+              toValue: 8,
+              duration: 250,
+            },
+            {
+              startValue: 8,
+              toValue: 14,
+              duration: 125,
+            },
+          ],
+          transform: {
+            scale: [
+              {
+                startValue: 1.2,
+                toValue: 1.4,
+                duration: 250,
+                timingFunction: 'linear',
+              },
+              {
+                startValue: 1.4,
+                toValue: 1.2,
+                delay: 750,
+                duration: 250,
+                timingFunction: 'linear',
+              },
+            ],
+          },
+        },
+        upVoteMouth: {
+          bottom: [
+            {
+              startValue: 9,
+              toValue: 14,
+              delay: 250,
+              duration: 125,
+            },
+            {
+              startValue: 14,
+              toValue: 9,
+              duration: 250,
+            },
+            {
+              startValue: 9,
+              toValue: 14,
+              duration: 250,
+            },
+            {
+              startValue: 14,
+              toValue: 9,
+              duration: 125,
+            },
+          ],
+          transform: {
+            scale: [
+              {
+                startValue: 1,
+                toValue: 1.2,
+                duration: 250,
+                timingFunction: 'linear',
+              },
+              {
+                startValue: 1.2,
+                toValue: 1,
+                delay: 750,
+                duration: 250,
+                timingFunction: 'linear',
+              },
+            ],
+            scaleY: [
+              {
+                startValue: 0.725,
+                delay: 250,
+                toValue: 1.45,
+                duration: 125,
+              },
+              {
+                startValue: 1.45,
+                toValue: 0.87,
+                duration: 250,
+              },
+              {
+                startValue: 0.87,
+                toValue: 1.45,
+                duration: 250,
+              },
+              {
+                startValue: 1.45,
+                toValue: 1,
+                duration: 125,
+              },
+            ],
+          },
+        },
+      },
+    };
+  },
+});
+</script>
+
+<style scoped>
+.vote-face {
+  width: 40px;
+  height: 40px;
+  background-color: #ffdb00;
+  border-color: #e9b156;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 20px;
+}
+
+.vote-up-eye {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: 18px;
+  height: 4px;
+}
+.vote-up-mouth {
+  position: absolute;
+  bottom: 9px;
+  left: 9px;
+  width: 32px;
+  height: 16px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-animation.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-animation.vue
new file mode 100644
index 00000000000..c09fff47597
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-animation.vue
@@ -0,0 +1,196 @@
+<template>
+  <ul id="animation-demo">
+    <li>
+      <label>控制动画</label>
+      <div class="toolbar">
+        <button
+          class="toolbar-btn"
+          @click="toggleLoopPlaying"
+        >
+          <span v-if="loopPlaying">暂停</span>
+          <span v-else>播放</span>
+        </button>
+        <button
+          class="toolbar-btn"
+          @click="toggleDirection"
+        >
+          <span v-if="direction === 'horizon'">切换为纵向</span>
+          <span v-else>切换为横向</span>
+        </button>
+      </div>
+      <div style="height: 150px">
+        <loop
+          :playing="loopPlaying"
+          :direction="direction"
+        >
+          <p>I'm a looping animation</p>
+        </loop>
+      </div>
+    </li>
+    <li>
+      <div style="margin-top: 10px" />
+      <label>点赞笑脸动画:</label>
+      <div class="toolbar">
+        <button
+          class="toolbar-btn"
+          @click="voteUp"
+        >
+          <span>点赞 👍</span>
+        </button>
+        <button
+          class="toolbar-btn"
+          @click="voteDown"
+        >
+          <span>踩 👎</span>
+        </button>
+      </div>
+      <div class="vote-face-container center">
+        <component
+          :is="voteComponent"
+          class="vote-icon"
+          :is-changed="isChanged"
+        />
+      </div>
+    </li>
+    <li>
+      <div style="margin-top: 10px" />
+      <label>渐变色动画</label>
+      <div class="toolbar">
+        <button
+          class="toolbar-btn"
+          @click="toggleColorPlaying"
+        >
+          <span v-if="colorPlaying">暂停</span>
+          <span v-else>播放</span>
+        </button>
+      </div>
+      <div>
+        <color-component :playing="colorPlaying">
+          <p>背景色渐变</p>
+        </color-component>
+      </div>
+    </li>
+    <li>
+      <div style="margin-top: 10px" />
+      <label>贝塞尔曲线动画</label>
+      <div class="toolbar">
+        <button
+          class="toolbar-btn"
+          @click="toggleCubicPlaying"
+        >
+          <span v-if="cubicPlaying">暂停</span>
+          <span v-else>播放</span>
+        </button>
+      </div>
+      <div>
+        <cubic-bezier :playing="cubicPlaying">
+          <p>cubic-bezier(.45,2.84,.38,.5)</p>
+        </cubic-bezier>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+/**
+   * Animation parameters and their default values
+   *
+   * playing：
+   *   true                      // play animation
+   *   false                     // stop animation
+   *
+   * actions：
+   *   valueType: undefined,     // unit type of startValue and toValue， can be set to rad, deg, color
+   *   delay: 0,                 // the time the animation delay starts, in milliseconds
+   *   startValue: 0,            // the value at the beginning of the animation
+   *   toValue: 0,               // the value at the end of the animation
+   *   duration: 0,              // animation runtime
+   *   direction: 'center',      // animation running direction
+   *   timingFunction: 'linear', // Optional values are: linear, ease-in, ease-out,
+   *                             // ease-in-out, ease_bezier, cubic-bezier(minimum supported version 2.9.0)
+   *   repeatCount: 0,           // number of repetitions of animation. 0: not repeating; -1: loop.
+   *                             // the number is based on the value of the first animation.
+   * After the actions are replaced, the animation needs to be started manually
+   *
+   */
+import { defineComponent, ref, type Ref, shallowRef } from '@vue/runtime-core';
+
+import colorComponent from './animations/color-change.vue';
+import CubicBezier from './animations/cubic-bezier.vue';
+import Loop from './animations/loop.vue';
+import VoteDown from './animations/vote-down.vue';
+import VoteUp from './animations/vote-up.vue';
+
+export default defineComponent({
+  components: {
+    Loop,
+    colorComponent,
+    CubicBezier,
+  },
+  setup() {
+    const loopPlaying = ref(true);
+    const colorPlaying = ref(true);
+    const cubicPlaying = ref(true);
+    const direction = ref('horizon');
+    const isChanged = ref(true);
+    const voteComponent: Ref = shallowRef(VoteUp);
+
+    const voteDown = () => {
+      voteComponent.value = VoteDown;
+      // toggle isChanged to change actions
+      isChanged.value = !isChanged.value;
+    };
+    const voteUp = () => {
+      voteComponent.value = VoteUp;
+    };
+
+    const toggleLoopPlaying = () => {
+      loopPlaying.value = !loopPlaying.value;
+    };
+    const toggleColorPlaying = () => {
+      colorPlaying.value = !colorPlaying.value;
+    };
+    const toggleCubicPlaying = () => {
+      cubicPlaying.value = !cubicPlaying.value;
+    };
+    const toggleDirection = () => {
+      direction.value = direction.value === 'horizon' ? 'vertical' : 'horizon';
+    };
+
+    return {
+      loopPlaying,
+      colorPlaying,
+      cubicPlaying,
+      direction,
+      voteComponent,
+      colorComponent,
+      isChanged,
+      voteUp,
+      voteDown,
+      toggleLoopPlaying,
+      toggleColorPlaying,
+      toggleCubicPlaying,
+      toggleDirection,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#animation-demo {
+  overflow: scroll;
+  margin: 7px;
+}
+
+#animation-demo .vote-icon {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  align-items: center;
+  justify-content: center;
+}
+
+#animation-demo .vote-face-container {
+  height: 60px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
new file mode 100644
index 00000000000..ee1a6dfcbf5
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
@@ -0,0 +1,221 @@
+<template>
+  <div id="dialog-demo">
+    <label>显示或者隐藏对话框:</label>
+    <button
+      class="dialog-demo-button-1"
+      @click.stop="() => onClickView('slide')"
+    >
+      <span class="button-text">显示对话框--slide</span>
+    </button>
+    <button
+      class="dialog-demo-button-1"
+      @click.stop="() => onClickView('fade')"
+    >
+      <span class="button-text">显示对话框--fade</span>
+    </button>
+    <button
+      class="dialog-demo-button-1"
+      @click.stop="() => onClickView('slide_fade')"
+    >
+      <span class="button-text">显示对话框--slide_fade</span>
+    </button>
+    <!-- dialog can't support v-show, can only use v-if for explicit switching -->
+
+    <dialog
+      v-if="dialogIsVisible"
+      :animationType="dialogAnimationType"
+      :transparent="true"
+      :supportedOrientations="supportedOrientations"
+      @show="onShow"
+      @requestClose="onClose"
+    >
+      <!-- dialog on iOS platform can only have one child node -->
+      <div class="dialog-demo-wrapper">
+        <div
+          class="fullscreen center row"
+          @click="onClickView"
+        >
+          <div
+            class="dialog-demo-close-btn center column"
+            @click="stopPropagation"
+          >
+            <p class="dialog-demo-close-btn-text">
+              点击空白区域关闭
+            </p>
+            <button
+              class="dialog-demo-button-2"
+              @click="onClickOpenSecond"
+            >
+              <span class="button-text">点击打开二级全屏弹窗</span>
+            </button>
+          </div>
+          <dialog
+            v-if="dialog2IsVisible"
+            :animationType="dialogAnimationType"
+            :transparent="true"
+            @requestClose="onClose"
+          >
+            <div
+              class="dialog-2-demo-wrapper center column row"
+              @click="onClickOpenSecond"
+            >
+              <p
+                class="dialog-demo-close-btn-text"
+                style="color: white"
+              >
+                Hello 我是二级全屏弹窗，点击任意位置关闭。
+              </p>
+            </div>
+          </dialog>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/runtime-core';
+import { onBeforeRouteLeave } from 'vue-router';
+
+const supportedOrientations = [
+  'portrait',
+  'portrait-upside-down',
+  'landscape',
+  'landscape-left',
+  'landscape-right',
+];
+
+export default defineComponent({
+  setup() {
+    // dialog 1 是否展示
+    const dialogIsVisible = ref(false);
+    // dialog 2 是否展示
+    const dialog2IsVisible = ref(false);
+    // dialog 动画效果
+    const dialogAnimationType = ref('fade');
+
+    const onClickView = (type = '') => {
+      dialogIsVisible.value = !dialogIsVisible.value;
+      dialogAnimationType.value = type;
+    };
+    const onClickOpenSecond = (evt) => {
+      evt.stopPropagation();
+      dialog2IsVisible.value = !dialog2IsVisible.value;
+    };
+
+    const onShow = () => {
+      console.log('Dialog is opening');
+    };
+
+    const onClose = (evt) => {
+      evt.stopPropagation();
+      /**
+       * Dialog will respond to the hardware back button, so you need to close the popup here.
+       * If the second layer popup window is expanded,
+       * only the second layer popup window is closed, otherwise the first layer popup window is closed
+       */
+      if (dialog2IsVisible.value) {
+        dialog2IsVisible.value = false;
+      } else {
+        dialogIsVisible.value = false;
+      }
+      console.log('Dialog is closing');
+    };
+
+    const stopPropagation = (evt) => {
+      evt.stopPropagation();
+    };
+
+    // The hook before the route leaves, you can return when there is no pop-up window
+    onBeforeRouteLeave((to, from, next) => {
+      // If the popup is not open, go back to the previous page
+      if (!dialogIsVisible.value) {
+        next();
+      }
+    });
+
+    return {
+      supportedOrientations,
+      dialogIsVisible,
+      dialog2IsVisible,
+      dialogAnimationType,
+      stopPropagation,
+      onClose,
+      onShow,
+      onClickView,
+      onClickOpenSecond,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#dialog-demo {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex: 1;
+  margin: 7px;
+}
+
+.dialog-demo-button-1 {
+  height: 64px;
+  width: 200px;
+  border-style: solid;
+  border-color: #40b883;
+  border-width: 2px;
+  border-radius: 10px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dialog-demo-button-1 .button-text {
+  line-height: 56px;
+  text-align: center;
+}
+
+.dialog-demo-button-2 {
+  height: 64px;
+  width: 200px;
+  border-style: solid;
+  border-color: white;
+  border-width: 2px;
+  border-radius: 10px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dialog-demo-button-2 .button-text {
+  line-height: 56px;
+  text-align: center;
+}
+
+.dialog-demo-wrapper {
+  flex: 1;
+  background-color: #40b88377;
+}
+
+.dialog-2-demo-wrapper {
+  flex: 1;
+  background-color: #444444ee;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-demo-close-btn {
+  width: 210px;
+  height: 200px;
+  margin-top: 300px;
+  background-color: #40b883;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-demo-close-btn-text {
+  width: 200px;
+  font-size: 22px;
+  line-height: 40px;
+  flex-direction: column;
+  text-align: center;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
new file mode 100644
index 00000000000..a1ff0d15af7
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
@@ -0,0 +1,153 @@
+<template>
+  <div
+    id="demo-wrap"
+    ref="demoRef"
+    :collapsable="false"
+  >
+    <div id="demo-content">
+      <div id="banner" />
+      <div id="tabs">
+        <p
+          v-for="n in 2"
+          :key="('tab' + n)"
+          :class="(currentSlide === n - 1) ? 'selected' : ''"
+          @click="onTabClick(n)"
+        >
+          tab {{ n }} {{ n === 1 ? '(parent first)' : '(self first)' }}
+        </p>
+      </div>
+      <swiper
+        v-if="showNestedList"
+        id="swiper"
+        ref="swiper"
+        need-animation
+        :current="currentSlide"
+        :style="{ height: layoutHeight }"
+        @dropped="onDropped"
+      >
+        <swiper-slide key="slide1">
+          <ul nestedScrollTopPriority="parent">
+            <li
+              v-for="n in 30"
+              :key="('item' + n)"
+              :class="(n % 2) ? 'item-even' : 'item-odd'"
+            >
+              <p>Item {{ n }}</p>
+            </li>
+          </ul>
+        </swiper-slide>
+        <swiper-slide key="slide2">
+          <ul nestedScrollTopPriority="self">
+            <li
+              v-for="n in 30"
+              :key="('item' + n)"
+              :class="(n % 2) ? 'item-even' : 'item-odd'"
+            >
+              <p>Item {{ n }}</p>
+            </li>
+          </ul>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/runtime-core';
+import { Native } from '@hippy/vue-next';
+
+export default defineComponent({
+  setup() {
+    const demoRef = ref(null);
+    const layoutHeight = ref(0);
+    const currentSlide = ref(0);
+    const showNestedList = ref(false);
+    const onTabClick = (i) => {
+      currentSlide.value = i - 1;
+    };
+    const onDropped = (e) => {
+      currentSlide.value = e.currentSlide;
+    };
+
+    onMounted(async () => {
+      if (demoRef.value) {
+        // get wrap position
+        const position = await Native.getBoundingClientRect(demoRef.value);
+        if (position.height) {
+          // wrap height - banner height - tab height
+          layoutHeight.value = position.height - 150 - 30;
+        }
+      }
+      showNestedList.value = true;
+    });
+
+    return {
+      demoRef,
+      layoutHeight,
+      currentSlide,
+      showNestedList,
+      onTabClick,
+      onDropped,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#demo-wrap {
+    overflow-y: scroll;
+    flex: 1;
+}
+
+#demo-content {
+    flex-direction: column;
+}
+
+#banner {
+    background-image: url('https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png');
+    background-size: cover;
+    height: 150px;
+    justify-content: flex-end;
+}
+
+#tabs {
+    flex-direction: row;
+    height: 30px;
+}
+
+#tabs p {
+    flex: 1;
+    text-align: center;
+    background-color: #eee;
+    color: coral;
+    height: 30px;
+    line-height: 30px;
+}
+
+#tabs .selected {
+    background-color: white;
+    color: #40b883;
+}
+
+.item-even {
+    height: 40px;
+}
+
+.item-even p {
+    line-height: 40;
+    font-size: 20px;
+    text-align: center;
+}
+
+.item-odd {
+    height: 40px;
+    background-color: gray;
+}
+
+.item-odd p {
+    line-height: 40px;
+    color: white;
+    font-size: 20px;
+    text-align: center;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
new file mode 100644
index 00000000000..0d0982e3f4f
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
@@ -0,0 +1,409 @@
+<template>
+  <div
+    id="demo-pull-header-footer"
+    specital-attr="pull-header-footer"
+  >
+    <div class="toolbar">
+      <button
+        class="toolbar-btn"
+        @click="scrollToNextPage"
+      >
+        <span>翻到下一页</span>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click="scrollToBottom"
+      >
+        <span>翻动到底部</span>
+      </button>
+      <p class="toolbar-text">
+        列表元素数量：{{ dataSource.length }}
+      </p>
+    </div>
+    <ul
+      id="list"
+      ref="list"
+      :numberOfRows="dataSource.length"
+      :rowShouldSticky="true"
+      @scroll="onScroll"
+    >
+      <!--
+      * 下拉组件
+      *
+      * 事件：
+      *   idle: 滑动距离在 pull-header 区域内触发一次，参数 contentOffset，滑动距离
+      *   pulling: 滑动距离超出 pull-header 后触发一次，参数 contentOffset，滑动距离
+      *   refresh: 滑动超出距离，松手后触发一次
+      *-->
+      <pull-header
+        ref="pullHeader"
+        class="ul-refresh"
+        @idle="onHeaderIdle"
+        @pulling="onHeaderPulling"
+        @released="onHeaderReleased"
+      >
+        <p class="ul-refresh-text">
+          {{ headerRefreshText }}
+        </p>
+      </pull-header>
+      <li
+        v-for="(ui, index) in dataSource"
+        :key="index"
+        class="item-style"
+        :type="'row-' + ui.style"
+        :sticky="index === 0"
+      >
+        <style-one
+          v-if="ui.style === 1"
+          :item-bean="ui.itemBean"
+        />
+        <style-two
+          v-if="ui.style === 2"
+          :item-bean="ui.itemBean"
+        />
+        <style-five
+          v-if="ui.style === 5"
+          :item-bean="ui.itemBean"
+        />
+      </li>
+      <!--
+      * 上拉组件
+      *   > 如果不需要显示加载情况，可以直接使用 ul 的 onEndReached 实现一直加载
+      *
+      * 事件：
+      *   idle: 滑动距离在 pull-footer 区域内触发一次，参数 contentOffset，滑动距离
+      *   pulling: 滑动距离超出 pull-footer 后触发一次，参数 contentOffset，滑动距离
+      *   released: 滑动超出距离，松手后触发一次
+      *-->
+      <pull-footer
+        ref="pullFooter"
+        class="pull-footer"
+        @idle="onFooterIdle"
+        @pulling="onFooterPulling"
+        @released="onEndReached"
+      >
+        <p class="pull-footer-text">
+          {{ footerRefreshText }}
+        </p>
+      </pull-footer>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Native, type HippyListElement } from '@hippy/vue-next';
+import type { Ref } from '@vue/runtime-core';
+import { defineComponent, onMounted, ref } from '@vue/runtime-core';
+
+import mockData from '../list-items/mock';
+import StyleOne from '../list-items/style1.vue';
+import StyleTwo from '../list-items/style2.vue';
+import StyleFive from '../list-items/style5.vue';
+import { getScreenSize } from '../../util';
+
+// Viewport height
+let $windowHeight = 0;
+// current scroll position
+const scrollPos = ref({
+  top: 0,
+  left: 0,
+});
+
+/**
+   * mock fetch data
+   */
+const mockFetchData = async (): Promise<any> => new Promise((resolve) => {
+  setTimeout(() => resolve(mockData), 800);
+});
+
+export default defineComponent({
+  components: {
+    StyleOne,
+    StyleTwo,
+    StyleFive,
+  },
+  setup() {
+    const list = ref(null);
+    const pullHeader = ref(null);
+    const pullFooter = ref(null);
+    const dataSource: Ref<any[]> = ref([...mockData]);
+
+    let loadMoreDataFlag = false;
+    let fetchingDataFlag = false;
+    const loadingState = ref('');
+
+    const headerRefreshText = ref('继续下拉触发刷新');
+    const footerRefreshText = ref('正在加载...');
+
+    const onHeaderReleased = async () => {
+      if (fetchingDataFlag) {
+        return;
+      }
+      fetchingDataFlag = true;
+      console.log('onHeaderReleased');
+      // retrieve data
+      headerRefreshText.value = '刷新数据中，请稍等';
+      dataSource.value = await mockFetchData();
+      dataSource.value = dataSource.value.reverse();
+      fetchingDataFlag = false;
+      headerRefreshText.value = '2秒后收起';
+
+      /**
+       * You need to actively call collapsePullHeader to close the pullHeader,
+       * otherwise the released event may not be triggered again
+       */
+      if (pullHeader.value) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        pullHeader.value.collapsePullHeader({ time: 2000 });
+      }
+    };
+
+    /**
+       * Swipe to the end of the list, trigger the event, you can load the next page
+       *
+       * @param evt
+       */
+    const onEndReached = async (evt) => {
+      console.log('endReached', evt);
+
+      /**
+       * Check the lock, if it is loading,
+       * return directly to prevent the data from being loaded twice
+       */
+      if (loadMoreDataFlag) {
+        return;
+      }
+      loadMoreDataFlag = true;
+      footerRefreshText.value = '加载更多...';
+      const newData: any = await mockFetchData();
+
+      if (newData.length === 0) {
+        footerRefreshText.value = '没有更多数据';
+      }
+      dataSource.value = [...dataSource.value, ...newData];
+      loadMoreDataFlag = false;
+
+      /**
+       * You need to actively call collapsePullHeader to close pullFooter,
+       * otherwise the released event may not be triggered again
+       */
+      if (pullFooter.value) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        pullFooter.value.collapsePullFooter();
+      }
+    };
+
+    const onHeaderIdle = () => {};
+    const onFooterIdle = () => {};
+    const onFooterPulling = (evt) => {
+      console.log('onFooterPulling', evt);
+    };
+    const onHeaderPulling = (evt) => {
+      if (fetchingDataFlag) {
+        return;
+      }
+      console.log('onHeaderPulling', evt.contentOffset);
+      if (evt.contentOffset > 30) {
+        headerRefreshText.value = '松手，即可触发刷新';
+      } else {
+        headerRefreshText.value = '继续下拉，触发刷新';
+      }
+    };
+
+    const onScroll = (evt) => {
+      // This event is triggered more frequently, and it is best to prevent bubbling.
+      evt.stopPropagation();
+      scrollPos.value = {
+        top: evt.offsetY,
+        left: evt.offsetX,
+      };
+    };
+
+    /**
+       * scroll to next page
+       */
+    const scrollToNextPage = () => {
+      if (!Native) {
+        /* eslint-disable-next-line no-alert */
+        alert('This method is only supported in Native environment.');
+        return;
+      }
+      if (list.value) {
+        const ul = list.value as HippyListElement;
+
+        console.log('scroll to next page', list, scrollPos.value, $windowHeight);
+
+        const top = scrollPos.value.top + $windowHeight - 200;
+        // CSSOM View standard - ScrollToOptions
+        // https://www.w3.org/TR/cssom-view-1/#extensions-to-the-window-interface
+        ul.scrollTo({
+          left: scrollPos.value.left,
+          top,
+          behavior: 'auto',
+          duration: 200,
+        });
+      }
+    };
+
+    /**
+       * scroll to bottom
+       */
+    const scrollToBottom = () => {
+      if (!Native) {
+        /* eslint-disable-next-line no-alert */
+        alert('This method is only supported in Native environment.');
+        return;
+      }
+
+      if (list.value) {
+        const ul = list.value as HippyListElement;
+        ul.scrollToIndex(0, ul.childNodes.length - 1);
+      }
+    };
+
+    onMounted(() => {
+      /**
+       * loadMoreDataFlag is a load lock, please just copy.
+       * Because onEndReach fires multiple times when it is at the bottom of the screen,
+       * Therefore, a lock needs to be added, and secondary loading is not performed when the unloading is completed.
+       */
+      loadMoreDataFlag = false;
+      fetchingDataFlag = false;
+      dataSource.value = [...mockData];
+
+      // Save the screen height, it will be used later when calculating the exposure
+      $windowHeight = getScreenSize().height;
+
+      /**
+       * You need to actively call collapsePullHeader to close the pullHeader,
+       * otherwise the released event may not be triggered again
+       */
+      if (pullHeader.value) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        pullHeader.value.collapsePullHeader({ time: 2000 });
+      }
+    });
+
+    return {
+      loadingState,
+      dataSource,
+      headerRefreshText,
+      footerRefreshText,
+      list,
+      pullHeader,
+      pullFooter,
+      onEndReached,
+      onHeaderReleased,
+      onHeaderIdle,
+      onHeaderPulling,
+      onFooterIdle,
+      onFooterPulling,
+      onScroll,
+      scrollToNextPage,
+      scrollToBottom,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#demo-pull-header-footer {
+  flex: 1;
+  padding: 12px;
+}
+
+#demo-pull-header-footer .ul-refresh {
+  background-color: #40b883;
+}
+
+#demo-pull-header-footer .ul-refresh-text {
+  color: white;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+
+#demo-pull-header-footer .pull-footer {
+  background-color: #40b883;
+  height: 40px;
+}
+
+#demo-pull-header-footer .pull-footer-text {
+  color: white;
+  line-height: 40px;
+  text-align: center;
+}
+
+#demo-pull-header-footer #list {
+  flex: 1;
+  background-color: white;
+}
+
+#demo-pull-header-footer .item-style {
+  background-color: white;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e5e5;
+  border-style: solid;
+}
+
+[specital-attr='pull-header-footer'] :deep(.article-title) {
+  font-size: 17px;
+  line-height: 24px;
+  color: #242424;
+}
+
+[specital-attr='pull-header-footer'] :deep(.normal-text) {
+  font-size: 11px;
+  color: #aaa;
+  align-self: center;
+}
+
+[specital-attr='pull-header-footer'] :deep(.image) {
+  flex: 1;
+  height: 160px;
+  resize-mode: cover;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-one-image-container) {
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 8px;
+  flex: 1;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-one-image) {
+  height: 120px;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-two) {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-two-left-container) {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-two-image-container) {
+  flex: 1;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-two-image) {
+  height: 140px;
+}
+
+[specital-attr='pull-header-footer'] :deep(.style-five-image-container) {
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 8px;
+  flex: 1;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
new file mode 100644
index 00000000000..7e59f62b589
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
@@ -0,0 +1,179 @@
+<template>
+  <div id="demo-swiper">
+    <div class="toolbar">
+      <button
+        class="toolbar-btn"
+        @click="scrollToPrevPage"
+      >
+        <span>翻到上一页</span>
+      </button>
+      <button
+        class="toolbar-btn"
+        @click="scrollToNextPage"
+      >
+        <span>翻到下一页</span>
+      </button>
+      <p class="toolbar-text">
+        当前第 {{ currentSlideNum + 1 }} 页
+      </p>
+    </div>
+    <!--
+      swiper 组件参数
+      @param {Number} currentSlide 当前页面，也可以直接修改它改变当前页码，默认 0
+      @param {Boolean} needAnimation 是否需要动画，如果切换时不要动画可以设置为 :needAnimation="false"，默认为 true
+      @param {Function} dragging 当拖拽时执行回调，参数是个 Event，包含 offset 拖拽偏移值和 nextSlide 将进入的页码
+      @param {Function} dropped 结束拖拽时回调，参数是个 Event，包含 currentSlide 最后选择的页码
+    -->
+    <swiper
+      id="swiper"
+      ref="swiper"
+      need-animation
+      :current="currentSlide"
+      @dragging="onDragging"
+      @dropped="onDropped"
+      @stateChanged="onStateChanged"
+    >
+      <!-- slides -->
+      <swiper-slide
+        v-for="n in dataSource"
+        :key="n"
+        :style="{ backgroundColor: 4278222848 + 100 * n }"
+      >
+        <p>I'm Slide {{ n + 1 }}</p>
+      </swiper-slide>
+    </swiper>
+    <!-- A Demo of dots -->
+    <div id="swiper-dots">
+      <div
+        v-for="n in dataSource"
+        :key="n"
+        class="dot"
+        :class="{ hightlight: currentSlideNum === n }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/runtime-core';
+
+const max = 7;
+
+export default defineComponent({
+  setup() {
+    // current state
+    const state = ref('idle');
+    // the index of the currently displayed slide
+    const currentSlide = ref(2);
+    /**
+     * Because the communication performance of the Android is limited,
+     * if the dropped event is clicked quickly, it will be triggered multiple times,
+     * causes a push-pull effect similar to a drawer.
+     * So here is a separate variable to save the value currently being displayed,
+     * to distinguish it from the value of currentSlide
+     */
+    const currentSlideNum = ref(2);
+
+    /**
+       * scroll to next page
+       */
+    const scrollToNextPage = () => {
+      console.log('scroll next', currentSlide.value, currentSlideNum.value);
+      if (currentSlide.value < max) {
+        currentSlide.value = currentSlideNum.value + 1;
+      } else {
+        currentSlide.value = 0;
+      }
+    };
+
+    /**
+       * scroll to previous page
+       */
+    const scrollToPrevPage = () => {
+      console.log('scroll prev', currentSlide.value, currentSlideNum.value);
+      if (currentSlide.value === 0) {
+        currentSlide.value = max - 1;
+      } else {
+        currentSlide.value = currentSlideNum.value - 1;
+      }
+    };
+
+    /**
+       * dragging
+       *
+       * @param evt
+       */
+    const onDragging = (evt) => {
+      /**
+       * FIXME: There is a bug in this event on Android,
+       * scrolling back nextSlide is still the current index, scrolling forward is normal
+       */
+      /* eslint-disable-next-line no-console */
+      console.log(
+        'Current offset is',
+        evt.offset,
+        'and will into slide',
+        evt.nextSlide + 1,
+      );
+    };
+    const onDropped = (evt) => {
+      console.log('onDropped', evt);
+      // update current page number
+      currentSlideNum.value = evt.currentSlide;
+    };
+    const onStateChanged = (evt) => {
+      console.log('onStateChanged', evt);
+      // update state
+      state.value = evt.state;
+    };
+
+    return {
+      /**
+       * If it is dynamically loaded data, it is recommended to add v-if to the <swiper>
+       *   to judge that the data is loaded before rendering.
+       */
+      dataSource: new Array(max).fill(0)
+        .map((n, i) => i),
+      currentSlide,
+      currentSlideNum,
+      state,
+      scrollToNextPage,
+      scrollToPrevPage,
+      onDragging,
+      onDropped,
+      onStateChanged,
+    };
+  },
+});
+</script>
+
+<style>
+#demo-swiper {
+  flex: 1;
+}
+
+#demo-swiper #swiper {
+  flex: 1;
+  height: 400px;
+}
+
+#demo-swiper #swiper-dots {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+
+#demo-swiper .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: darkgray;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+#demo-swiper .dot.hightlight {
+  background-color: limegreen;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
new file mode 100644
index 00000000000..446740a2018
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
@@ -0,0 +1,585 @@
+<template>
+  <div
+    v-if="isMounted"
+    id="demo-vue-native"
+    ref="rectRef"
+  >
+    <div>
+      <!-- platform -->
+      <div
+        v-if="Native.Platform"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.Platform</label>
+        <p>{{ Native.Platform }}</p>
+      </div>
+
+      <!-- device name -->
+      <div class="native-block">
+        <label class="vue-native-title">Native.Device</label>
+        <p>{{ Native.Device }}</p>
+      </div>
+
+      <!-- Is it an iPhone X -->
+      <div
+        v-if="Native.isIOS()"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.isIPhoneX</label>
+        <p>{{ Native.isIPhoneX }}</p>
+      </div>
+
+      <!-- OS version, currently only available for iOS, other platforms return null -->
+      <div
+        v-if="Native.isIOS()"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.OSVersion</label>
+        <p>{{ Native.OSVersion || 'null' }}</p>
+      </div>
+
+      <!-- Internationalization related information -->
+      <div class="native-block">
+        <label class="vue-native-title">Native.Localization</label>
+        <p>{{ `国际化相关信息` }}</p>
+        <p>{{ `国家 ${Native.Localization?.country}` }}</p>
+        <p>{{ `语言 ${Native.Localization?.language}` }}</p>
+        <p>
+          {{ `方向 ${Native.Localization.direction === 1 ? 'RTL' : 'LTR'}` }}
+        </p>
+      </div>
+
+      <!-- API version, currently only available for Android, other platforms return null -->
+      <div
+        v-if="Native.isAndroid()"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.APILevel</label>
+        <p>{{ Native.APILevel || 'null' }}</p>
+      </div>
+
+      <!-- Whether the screen is vertically displayed -->
+      <div class="native-block">
+        <label class="vue-native-title">Native.screenIsVertical</label>
+        <p>{{ Native.screenIsVertical }}</p>
+      </div>
+
+      <!-- width of window -->
+      <div
+        v-if="Native.Dimensions.window.width"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.Dimensions.window.width</label>
+        <p>{{ Native.Dimensions.window.width }}</p>
+      </div>
+
+      <!-- The height of the window, it should be noted that both platforms include the status bar. -->
+      <!-- Android will start drawing from the first pixel below the status bar. -->
+      <div
+        v-if="Native.Dimensions.window.height"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.Dimensions.window.height</label>
+        <p>{{ Native.Dimensions.window.height }}</p>
+      </div>
+
+      <!-- width of screen -->
+      <div
+        v-if="Native.Dimensions.screen.width"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.Dimensions.screen.width</label>
+        <p>{{ Native.Dimensions.screen.width }}</p>
+      </div>
+
+      <!-- height of screen -->
+      <div
+        v-if="Native.Dimensions.screen.height"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.Dimensions.screen.height</label>
+        <p>{{ Native.Dimensions.screen.height }}</p>
+      </div>
+
+      <!-- the pt value of a pixel -->
+      <div class="native-block">
+        <label class="vue-native-title">Native.OnePixel</label>
+        <p>{{ Native.OnePixel }}</p>
+      </div>
+
+      <!-- Android Navigation Bar Height -->
+      <div
+        v-if="Native.Dimensions.screen.navigatorBarHeight"
+        class="native-block"
+      >
+        <label
+          class="vue-native-title"
+        >Native.Dimensions.screen.navigatorBarHeight</label>
+        <p>{{ Native.Dimensions.screen.navigatorBarHeight }}</p>
+      </div>
+
+      <!-- height of status bar -->
+      <div
+        v-if="Native.Dimensions.screen.statusBarHeight"
+        class="native-block"
+      >
+        <label
+          class="vue-native-title"
+        >Native.Dimensions.screen.statusBarHeight</label>
+        <p>{{ Native.Dimensions.screen.statusBarHeight }}</p>
+      </div>
+
+      <!-- android virtual navigation bar height -->
+      <div
+        v-if="
+          Native.isAndroid() &&
+            Native.Dimensions.screen.navigatorBarHeight !== undefined
+        "
+        class="native-block"
+      >
+        <label
+          class="vue-native-title"
+        >Native.Dimensions.screen.navigatorBarHeight(Android only)</label>
+        <p>{{ Native.Dimensions.screen.navigatorBarHeight }}</p>
+      </div>
+
+      <!-- The startup parameters passed from the native -->
+      <div
+        v-if="superProps"
+        class="native-block"
+      >
+        <label
+          class="vue-native-title"
+        >afterCallback of $start method contain superProps</label>
+        <p>{{ superProps }}</p>
+      </div>
+
+      <!-- A demo of Native Event，Just show how to use -->
+      <div
+        class="native-block"
+      >
+        <label class="vue-native-title">App event</label>
+        <div>
+          <button
+            class="event-btn"
+            @click="triggerAppEvent"
+          >
+            <span class="event-btn-text">Trigger app event</span>
+          </button>
+          <div class="event-btn-result">
+            <p>Event triggered times: {{ eventTriggeredTimes }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- example of measuring the size of an element -->
+      <div
+        ref="measure-block"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.getBoundingClientRect</label>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="() => getBoundingClientRect(false)"
+          >
+            <span>relative to App</span>
+          </button>
+          <span style="max-width: 200px">{{ rect1 }}</span>
+        </div>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="() => getBoundingClientRect(true)"
+          >
+            <span>relative to Container</span>
+          </button>
+          <span style="max-width: 200px">{{ rect2 }}</span>
+        </div>
+      </div>
+
+      <!-- local storage -->
+      <div
+        v-if="Native.AsyncStorage"
+        class="native-block"
+      >
+        <label class="vue-native-title">AsyncStorage 使用</label>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="setItem"
+          >
+            <span>setItem</span>
+          </button>
+          <span>{{ storageSetStatus }}</span>
+        </div>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="removeItem"
+          >
+            <span>removeItem</span>
+          </button>
+          <span>{{ storageSetStatus }}</span>
+        </div>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="getItem"
+          >
+            <span>getItem</span>
+          </button>
+          <span>{{ storageValue }}</span>
+        </div>
+      </div>
+
+      <!-- ImageLoader -->
+      <div
+        v-if="Native.ImageLoader"
+        class="native-block"
+      >
+        <label class="vue-native-title">ImageLoader 使用</label>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="getSize"
+          >
+            <span>getSize</span>
+          </button>
+          <span>{{ imageSize }}</span>
+        </div>
+      </div>
+
+      <!-- Fetch -->
+      <div class="native-block">
+        <label class="vue-native-title">Fetch 使用</label>
+        <div class="item-wrapper">
+          <span>{{ fetchText }}</span>
+        </div>
+      </div>
+
+      <!-- network info -->
+      <div
+        v-if="Native.NetInfo"
+        class="native-block"
+      >
+        <label class="vue-native-title">NetInfo 使用</label>
+        <div class="item-wrapper">
+          <span>{{ netInfoText }}</span>
+        </div>
+      </div>
+
+      <!-- Cookie -->
+      <div
+        v-if="Native.Cookie"
+        class="native-block"
+      >
+        <label class="vue-native-title">Cookie 使用</label>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="setCookie"
+          >
+            <span>setCookie</span>
+          </button>
+          <span>{{ cookieString }}</span>
+        </div>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="getCookie"
+          >
+            <span>getCookie</span>
+          </button>
+          <span>{{ cookiesValue }}</span>
+        </div>
+      </div>
+      <!-- Clipboard -->
+      <div
+        v-if="Native.Clipboard"
+        class="native-block"
+      >
+        <label class="vue-native-title">Clipboard 使用</label>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="setString"
+          >
+            <span>setString</span>
+          </button>
+          <span>{{ clipboardString }}</span>
+        </div>
+        <div class="item-wrapper">
+          <button
+            class="item-button"
+            @click="getString"
+          >
+            <span>getString</span>
+          </button>
+          <span>{{ clipboardValue }}</span>
+        </div>
+      </div>
+
+      <!-- iOS platform  -->
+      <div
+        v-if="Native.isIOS()"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.isIOS</label>
+        <p>{{ Native.isIOS() }}</p>
+      </div>
+
+      <!-- Android platform  -->
+      <div
+        v-if="Native.isAndroid()"
+        class="native-block"
+      >
+        <label class="vue-native-title">Native.isAndroid</label>
+        <p>{{ Native.isAndroid() }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Native, type HippyNode, EventBus } from '@hippy/vue-next';
+import { defineComponent, onMounted, ref } from '@vue/runtime-core';
+
+import { getGlobalInitProps } from '../../util';
+
+let networkListener;
+const TEST_EVENT_NAME = 'testEvent';
+
+export default defineComponent({
+  setup() {
+    const clipboardString = ref('ready to set');
+    const clipboardValue = ref('');
+    const storageSetStatus = ref('ready to set');
+    const storageValue = ref('');
+    const imageSize = ref('');
+    const netInfoText = ref('正在获取...');
+    const rect1 = ref('');
+    const rect2 = ref('');
+    const superProps = ref('');
+    const rectRef = ref(null);
+    const fetchText = ref('请求网址中...');
+    const cookieString = ref('ready to set');
+    const cookiesValue = ref('');
+    const eventTriggeredTimes = ref(0);
+    const isMounted = ref(false);
+
+    /**
+       * set local storage
+       */
+    const setItem = () => {
+      Native.AsyncStorage.setItem('itemKey', 'hippy');
+      storageSetStatus.value = 'set "hippy" value succeed';
+    };
+
+    /**
+       * remove local storage
+       */
+    const removeItem = () => {
+      Native.AsyncStorage.removeItem('itemKey');
+      storageSetStatus.value = 'remove "hippy" value succeed';
+    };
+
+    /**
+       * get local storage
+       */
+    const getItem = async () => {
+      const cacheValue = await Native.AsyncStorage.getItem('itemKey');
+      if (cacheValue) {
+        storageValue.value = cacheValue;
+      } else {
+        storageValue.value = 'undefined';
+      }
+    };
+
+    /**
+       * gei size of image
+       */
+    const getSize = async () => {
+      const result = await Native.ImageLoader.getSize('https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png');
+      console.log('ImageLoader getSize', result);
+      imageSize.value = `${result.width}x${result.height}`;
+    };
+
+    const setCookie = () => {
+      Native.Cookie.set('https://hippyjs.org', 'name=hippy;network=mobile');
+      cookieString.value = '\'name=hippy;network=mobile\' is set';
+    };
+    const getCookie = () => {
+      Native.Cookie.getAll('https://hippyjs.org').then((cookies) => {
+        cookiesValue.value = cookies;
+      });
+    };
+
+    /**
+       * set content to clipboard
+       */
+    const setString = () => {
+      Native.Clipboard.setString('hippy');
+      clipboardString.value = 'clipboard set "hippy" value succeed';
+    };
+
+    /**
+       * get content of clipboard
+       */
+    const getString = async () => {
+      const value = await Native.Clipboard.getString();
+      if (value) {
+        clipboardValue.value = value;
+      } else {
+        clipboardValue.value = 'undefined';
+      }
+    };
+
+    const getBoundingClientRect = async (relToContainer = false) => {
+      try {
+        const rect = await Native.getBoundingClientRect(rectRef.value as HippyNode, { relToContainer });
+        if (!relToContainer) {
+          rect1.value = `${JSON.stringify(rect)}`;
+        } else {
+          rect2.value = `${JSON.stringify(rect)}`;
+        }
+      } catch (err) {
+        console.error('getBoundingClientRect error', err);
+      }
+    };
+
+    const triggerAppEvent = () => {
+      EventBus.$emit(TEST_EVENT_NAME);
+    };
+
+    onMounted(() => {
+      // native props and native api only can call at client side
+      isMounted.value = true;
+
+      superProps.value = JSON.stringify(getGlobalInitProps());
+
+      Native.NetInfo.fetch().then((netInfo) => {
+        netInfoText.value = netInfo;
+      });
+      networkListener = Native.NetInfo.addEventListener('change', (info) => {
+        netInfoText.value = `收到通知: ${info.network_info}`;
+      });
+
+      fetch('https://hippyjs.org', {
+        mode: 'no-cors', // 2.14.0 or above supports other options(not only method/headers/url/body)
+      })
+        .then((responseJson) => {
+          fetchText.value = `成功状态: ${responseJson.status}`;
+        })
+        .catch((error) => {
+          fetchText.value = `收到错误: ${error}`;
+        });
+
+      EventBus.$on(TEST_EVENT_NAME, () => {
+        eventTriggeredTimes.value += 1;
+      });
+    });
+
+    return {
+      Native,
+      rect1,
+      rect2,
+      rectRef,
+      storageValue,
+      storageSetStatus,
+      clipboardString,
+      clipboardValue,
+      imageSize,
+      netInfoText,
+      superProps,
+      fetchText,
+      cookieString,
+      cookiesValue,
+      getSize,
+      setItem,
+      getItem,
+      removeItem,
+      setString,
+      getString,
+      setCookie,
+      getCookie,
+      getBoundingClientRect,
+      triggerAppEvent,
+      eventTriggeredTimes,
+      isMounted,
+    };
+  },
+  beforeDestroy() {
+    if (networkListener) {
+      Native.NetInfo.removeEventListener('change', networkListener);
+    }
+    EventBus.$off(TEST_EVENT_NAME);
+  },
+});
+</script>
+
+<style scoped>
+#demo-vue-native {
+  flex: 1;
+  padding: 12px;
+  overflow-y: scroll;
+}
+
+.native-block {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.native-block p {
+  margin-vertical: 5px;
+}
+
+.vue-native-title {
+  text-decoration: underline;
+  color: #40b883
+}
+
+.event-btn {
+  background-color: #40b883;
+  flex: 1;
+  flex-direction: column;
+  width: 120px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.event-btn-result {
+  flex: 1;
+  flex-direction: column;
+}
+
+.event-btn .event-btn-text {
+  color: white;
+}
+.item-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+}
+.item-button {
+  width: 80px;
+  height: 40px;
+  background-color: #40b883;
+  border-radius: 3px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px
+}
+.item-button span {
+  color: white;
+  text-align: center;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
new file mode 100644
index 00000000000..112a199c1b4
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
@@ -0,0 +1,295 @@
+<template>
+  <div id="demo-waterfall">
+    <ul-refresh-wrapper
+      ref="header"
+      style="flex:1;"
+      @refresh="onRefresh"
+    >
+      <ul-refresh class="refresh-header">
+        <p class="refresh-text">
+          {{ refreshText }}
+        </p>
+      </ul-refresh>
+      <waterfall
+        ref="gridView"
+        :content-inset="contentInset"
+        :column-spacing="columnSpacing"
+        :contain-banner-view="true"
+        :contain-pull-footer="true"
+        :inter-item-spacing="interItemSpacing"
+        :number-of-columns="numberOfColumns"
+        :preload-item-number="0"
+        :style="{flex: 1}"
+        @endReached="onEndReached"
+        @scroll="onScroll"
+      >
+        <div
+          class="banner-view"
+        >
+          <span>BannerView</span>
+        </div>
+        <waterfall-item
+          v-for="(ui, index) in dataSource"
+          :key="index"
+          :style="{width: itemWidth}"
+          :type="ui.style"
+          @click.stop="() => onClickItem(index)"
+        >
+          <style-one
+            v-if="ui.style === 1"
+            :item-bean="ui.itemBean"
+          />
+          <style-two
+            v-if="ui.style === 2"
+            :item-bean="ui.itemBean"
+          />
+          <style-five
+            v-if="ui.style === 5"
+            :item-bean="ui.itemBean"
+          />
+        </waterfall-item>
+        <pull-footer>
+          <div class="pull-footer">
+            <span
+              style="
+                color: white;
+                text-align: center;
+                height: 40px;
+                line-height: 40px;
+              "
+            >{{ loadingState }}</span>
+          </div>
+        </pull-footer>
+      </waterfall>
+    </ul-refresh-wrapper>
+  </div>
+</template>
+
+<script lang="ts">
+import type { Ref } from '@vue/runtime-core';
+import { defineComponent, ref, computed } from '@vue/runtime-core';
+
+import mockData from '../list-items/mock';
+import StyleOne from '../list-items/style1.vue';
+import StyleTwo from '../list-items/style2.vue';
+import StyleFive from '../list-items/style5.vue';
+import { getScreenSize } from '../../util';
+
+const STYLE_LOADING = 100;
+const MAX_FETCH_TIMES = 50;
+// number of current requests
+let fetchTimes = 0;
+// horizontal space between columns
+const columnSpacing = 6;
+// vertical spacing between items
+const interItemSpacing = 6;
+// the number of waterfall flow columns, the default is 2
+const numberOfColumns = 2;
+// inner content padding
+const contentInset = { top: 0, left: 5, bottom: 0, right: 5 };
+
+const mockFetchData = async (): Promise<any> => new Promise((resolve) => {
+  setTimeout(() => {
+    fetchTimes += 1;
+    if (fetchTimes >= MAX_FETCH_TIMES) {
+      return resolve([]);
+    }
+    return resolve([...mockData, ...mockData]);
+  }, 600);
+});
+
+export default defineComponent({
+  components: {
+    StyleOne,
+    StyleTwo,
+    StyleFive,
+  },
+  setup() {
+    // 数据源
+    const dataSource: Ref<any[]> = ref([
+      ...mockData,
+      ...mockData,
+      ...mockData,
+      ...mockData,
+    ]);
+
+    let isLoading = false;
+    const isRefreshing = ref(false);
+    const loadingState = ref('正在加载...');
+    const refreshText = computed(() => (isRefreshing.value ? '正在刷新' : '下拉刷新'));
+    const gridView = ref(null);
+    const header = ref(null);
+    const itemWidth = computed(() => {
+      const screenWidth = getScreenSize().width;
+      const width = screenWidth - contentInset.left - contentInset.right;
+      return (
+        (width - (numberOfColumns - 1) * columnSpacing) / numberOfColumns
+      );
+    });
+
+    // refresh event callback
+    const onRefresh = async () => {
+      isRefreshing.value = true;
+      const data = await mockFetchData();
+      isRefreshing.value = false;
+      dataSource.value = data.reverse();
+      if (header.value) {
+        // Notify refresh completed
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        header.value.refreshCompleted();
+      }
+    };
+
+    // scroll to bottom callback
+    const onEndReached = async () => {
+      console.log('end Reached');
+
+      if (isLoading) {
+        return;
+      }
+
+      isLoading = true;
+      loadingState.value = '正在加载...';
+
+      const newData = await mockFetchData();
+      if (!newData) {
+        loadingState.value = '没有更多数据';
+        isLoading = false;
+        return;
+      }
+
+      dataSource.value = [...dataSource.value, ...newData];
+      isLoading = false;
+    };
+
+    const onClickItem = (index) => {
+      if (gridView.value) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        gridView.value.scrollToIndex({ index, animation: true });
+      }
+    };
+
+    /**
+       * scroll listener event
+       *
+       * @param evt
+       */
+    const onScroll = (evt) => {
+      console.log('waterfall onScroll', evt);
+    };
+
+    return {
+      dataSource,
+      isRefreshing,
+      refreshText,
+      STYLE_LOADING,
+
+      loadingState,
+      header,
+      gridView,
+
+      contentInset,
+      columnSpacing,
+      interItemSpacing,
+      numberOfColumns,
+      itemWidth,
+      onScroll,
+      onRefresh,
+      onEndReached,
+      onClickItem,
+    };
+  },
+});
+</script>
+
+<style scoped>
+#demo-waterfall {
+  flex: 1;
+}
+
+#demo-waterfall .refresh-header {
+  background-color: #40b883;
+}
+
+#demo-waterfall .refresh-text {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  color: white;
+}
+
+#demo-waterfall .banner-view {
+  background-color: grey;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#demo-waterfall .pull-footer {
+  flex: 1;
+  height: 40px;
+  background-color: #40b883;
+  justify-content: center;
+  align-items: center;
+}
+
+#demo-waterfall :deep(.list-view-item) {
+  background-color: #eeeeee;
+}
+
+#demo-waterfall :deep(.article-title) {
+  font-size: 12px;
+  line-height: 16px;
+  color: #242424;
+}
+
+#demo-waterfall :deep(.normal-text) {
+  font-size: 10px;
+  color: #aaa;
+  align-self: center;
+}
+
+#demo-waterfall :deep(.image) {
+  flex: 1;
+  height: 120px;
+  resize: both;
+}
+
+#demo-waterfall :deep(.style-one-image-container) {
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 8px;
+  flex: 1;
+}
+
+#demo-waterfall :deep(.style-one-image) {
+  height: 60px;
+}
+
+#demo-waterfall :deep(.style-two) {
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#demo-waterfall :deep(.style-two-left-container) {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+#demo-waterfall :deep(.style-two-image-container) {
+  flex: 1;
+}
+
+#demo-waterfall :deep(.style-two-image) {
+  height: 80px;
+}
+
+#demo-waterfall :deep(.refresh) {
+  background-color: #40b883;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/index.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/index.ts
new file mode 100644
index 00000000000..09244e69a3a
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/index.ts
@@ -0,0 +1,45 @@
+import demoSetNativeProps from '../demo/demo-set-native-props.vue';
+import demoAnimation from './demo-animation.vue';
+import demoDialog from './demo-dialog.vue';
+import demoVueNative from './demo-vue-native.vue';
+import demoPullHeaderFooter from './demo-pull-header-footer.vue';
+import demoSwiper from './demo-swiper.vue';
+import demoWaterfall from './demo-waterfall.vue';
+import demoNestedScroll from './demo-nested-scroll.vue';
+
+const demos = {
+  demoNative: {
+    name: 'Native 能力',
+    component: demoVueNative,
+  },
+  demoAnimation: {
+    name: 'animation 组件',
+    component: demoAnimation,
+  },
+  demoDialog: {
+    name: 'dialog 组件',
+    component: demoDialog,
+  },
+  demoSwiper: {
+    name: 'swiper 组件',
+    component: demoSwiper,
+  },
+  demoPullHeaderFooter: {
+    name: 'pull header/footer 组件',
+    component: demoPullHeaderFooter,
+  },
+  demoWaterfall: {
+    name: 'waterfall 组件',
+    component: demoWaterfall,
+  },
+  demoNestedScroll: {
+    name: 'nested scroll 示例',
+    component: demoNestedScroll,
+  },
+  demoSetNativeProps: {
+    name: 'setNativeProps',
+    component: demoSetNativeProps,
+  },
+};
+
+export default demos;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
new file mode 100644
index 00000000000..9cd4cbe943b
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
@@ -0,0 +1,19 @@
+/**
+ * is running in server side
+ */
+export const IS_SSR = !!global.process?.env?.HIPPY_SSR;
+
+/**
+ * is ssr mode in client
+ */
+export const IS_SSR_MODE = !!global.hippySSRNodes;
+
+/**
+ * current platform is iOS or not
+ */
+export const IS_IOS = global.Hippy?.device?.platform.OS === 'ios';
+
+/**
+ * determine current environment is development or not
+ */
+export const isDev = process.env.NODE_ENV === 'development';
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/extend.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/extend.ts
new file mode 100644
index 00000000000..054428eb642
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/extend.ts
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+/**
+ *  extend custom nativeapis and components demo
+ */
+
+import { HippyTouchEvent } from '@hippy/vue-next';
+
+
+declare module '@hippy/vue-next' {
+  export interface NativeInterfaceMap {
+    customModule: {
+      customMethod: (arg1: string, arg2: number) => void;
+      customMethodWithPromise: (arg1: string, arg2: number) => boolean;
+    };
+  }
+}
+
+declare module '@hippy/vue-next' {
+  export interface HippyGlobalEventHandlersEventMap {
+    // extend new event name and related event interface
+    onTest: HippyTouchEvent;
+    // extend existing event interface
+    onAnotherTest: HippyEvent;
+  }
+  export interface HippyEvent {
+    testProp: number;
+  }
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
new file mode 100644
index 00000000000..89e0db5e097
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
@@ -0,0 +1,100 @@
+import {
+  createApp,
+  type HippyApp,
+  EventBus,
+  setScreenSize,
+  BackAndroid,
+} from '@hippy/vue-next';
+
+import App from './app.vue';
+import { createRouter } from './routes';
+import { setGlobalInitProps } from './util';
+
+global.Hippy.on('uncaughtException', (err) => {
+  console.log('uncaughtException error', err.stack, err.message);
+});
+
+// only supported in iOS temporarily
+global.Hippy.on('unhandledRejection', (reason) => {
+  console.log('unhandledRejection reason', reason);
+});
+
+// create hippy app instance
+const app: HippyApp = createApp(App, {
+  // hippy native module name
+  appName: 'Demo',
+  iPhone: {
+    // config of statusBar
+    statusBar: {
+      // disable status bar autofill
+      // disabled: true,
+
+      // Status bar background color, if not set, it will use 4282431619, as #40b883, Vue default green
+      // hippy-vue-css-loader/src/compiler/style/color-parser.js
+      backgroundColor: 4283416717,
+
+      // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
+      // background image of status bar, scale with wrapper size
+      // backgroundImage: 'https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png',
+    },
+  },
+  // do not print trace info when set to true
+  // silent: true,
+  /**
+   * whether to trim whitespace on text element,
+   * default is true, if set false, it will follow vue-loader compilerOptions whitespace setting
+   */
+  trimWhitespace: true,
+});
+// create router
+const router = createRouter();
+app.use(router);
+
+// Monitor screen size and update size data
+EventBus.$on('onSizeChanged', (newScreenSize) => {
+  if (newScreenSize.width && newScreenSize.height) {
+    setScreenSize({
+      width: newScreenSize.width,
+      height: newScreenSize.height,
+    });
+  }
+});
+
+// init callback
+const initCallback = ({ superProps, rootViewId }) => {
+  setGlobalInitProps({
+    superProps,
+    rootViewId,
+  });
+  /**
+   * Because the memory history of vue-router is now used,
+   * the initial position needs to be pushed manually, otherwise the router will not be ready.
+   * On the browser, it is matched by vue-router according to location.href, and the default push root path '/'
+   */
+  router.push('/');
+
+  // listen android native back press, must before router back press inject
+  BackAndroid.addListener(() => {
+    console.log('backAndroid');
+    // set true interrupts native back
+    return true;
+  });
+
+  // mount first， you can do something before mount
+  app.mount('#root');
+
+  /**
+   * You can also mount the app after the route is ready, However,
+   * it is recommended to mount first, because it can render content on the screen as soon as possible
+   */
+  // router.isReady().then(() => {
+  //   // mount app
+  //   app.mount('#root');
+  // });
+};
+
+// start hippy app
+app.$start().then(initCallback);
+
+// you can also use callback to start app like @hippy/vue before
+// app.$start(initCallback);
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
new file mode 100644
index 00000000000..b2e30c72aeb
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
@@ -0,0 +1,56 @@
+import {
+  createSSRApp,
+  type HippyApp,
+  type HippyAppOptions,
+  HIPPY_GLOBAL_STYLE_NAME,
+} from '@hippy/vue-next';
+import { type SsrNode, renderToHippyList, getCurrentUniqueId, type SsrRequestContext } from '@hippy/vue-next-server-renderer';
+import { type Pinia, createPinia } from 'pinia';
+import App from './app.vue';
+import { createRouter } from './routes';
+
+export { HIPPY_GLOBAL_STYLE_NAME };
+
+/**
+ * render hippy ssr node list
+ *
+ * @param url - request url
+ * @param hippyOptions - hippy init options
+ * @param context - request context
+ */
+export async function render(url: string, hippyOptions: HippyAppOptions, context: SsrRequestContext = {}): Promise<{
+  list: SsrNode[] | null,
+  modules: Set<string>,
+  store: Pinia,
+  uniqueId: number,
+}> {
+  const app: HippyApp = createSSRApp(App, hippyOptions);
+  // create router
+  const router = createRouter();
+  // create store
+  const store = createPinia();
+  app.use(router);
+  app.use(store);
+
+  // push request url into router(ps: include uri and url params, for example, indexPage?a=1&b=2).
+  await router.push(url);
+  // wait router ready
+  await router.isReady();
+  // ssr context, vue will append some extra data when render finished. ex. modules means this request
+  // matched modules
+  const ssrContext = {
+    rootContainer: '#root',
+    modules: new Set(),
+    ssrOptions: hippyOptions,
+    context,
+  };
+  // get ssr render hippy node list
+  const hippyNodeList = await renderToHippyList(app, ssrContext);
+  return {
+    list: hippyNodeList,
+    // modules
+    modules: ssrContext.modules as Set<string>,
+    store,
+    uniqueId: getCurrentUniqueId(app),
+  };
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-web.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-web.ts
new file mode 100644
index 00000000000..74568003e91
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-web.ts
@@ -0,0 +1,22 @@
+import {
+  HippyWebEngine,
+} from '@hippy/web-renderer';
+
+import './main-native';
+
+const engine = HippyWebEngine.create({
+  modules: {},
+  components: {},
+});
+
+engine.start({
+  id: 'app',
+  name: 'Demo',
+  params: {
+    path: '/home',
+    business: 'Demo',
+    data: {
+      username: 'test', // Example of passing parameters
+    },
+  },
+});
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
new file mode 100644
index 00000000000..a90464bbd1d
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
@@ -0,0 +1,150 @@
+import { type StyleNode, insertStyleForSsrNodes } from '@hippy/vue-next-style-parser';
+import type { SsrNode } from '@hippy/vue-next-server-renderer';
+import { renderNativeNodesByCache, renderSsrNodes, deleteNativeNodes, SSR_UNIQUE_ID_KEY } from './ssr-node-ops';
+import { IS_IOS, isDev } from './env';
+import { ssrEntry } from './webpack-plugin';
+
+// hippy bundle name
+const bundleName = 'Demo';
+
+/**
+ * execute async js bundle
+ */
+async function executionAsyncResource() {
+  const platform = IS_IOS ? 'ios' : 'android';
+  // this is async js name, write in client.base.js config file for production
+  // in client.dev.js config file for development
+  const fileName = `home.${isDev ? 'bundle' : `${platform}.js`}`;
+  const url = `${isDev ? `http://${process.env.HOST}:${process.env.PORT}/` : ''}${fileName}`;
+  // @ts-ignore
+  global.dynamicLoad(url, (ret) => {
+    if (ret) {
+      console.log('dynamic load error:', ret);
+    }
+  });
+}
+
+/**
+ * generate ssr request params
+ */
+function getSsrRequestParams() {
+  const HippyDevice = global.Hippy.device;
+  return {
+    isIOS: HippyDevice?.platform?.OS === 'ios',
+    dimensions: {
+      screen: HippyDevice.screen,
+    },
+  };
+}
+
+/**
+ * handle ssr render exception
+ *
+ * @param rootViewId - native root id
+ * @param renderedNodes - rendered native node list
+ * @param cachedUniqueId - cached uniqueId
+ */
+function errorHandle(
+  rootViewId: number,
+  renderedNodes: SsrNode[],
+  cachedUniqueId: number,
+) {
+  // if use cached noe list render, should delete
+  if (renderedNodes?.length) {
+    deleteNativeNodes(rootViewId, renderedNodes);
+  }
+  // clear uniqueId
+  global[SSR_UNIQUE_ID_KEY] = cachedUniqueId ?? 0;
+  // clear store
+  global.__INITIAL_STATE__ = undefined;
+  // clear global ssr node list
+  global.hippySSRNodes = undefined;
+}
+
+/**
+ * execute ssr init logic
+ */
+function ssr(): void {
+  // register hippy instance
+  global.Hippy.register.regist(bundleName, async (initParams) => {
+    // now hippy init success, we can call native api now
+    // save hippy native root node id
+    const rootViewId = initParams.__instanceId__;
+    const pageCacheKey = `${bundleName}_index`;
+    // first, use cache nodes render
+    const [cacheNodes, backNodes, cacheUniqueId] = await renderNativeNodesByCache(rootViewId, pageCacheKey);
+    console.log('cache', cacheNodes, backNodes, cacheUniqueId);
+    // second, send ssr first screen request and use server node list insert/update
+    fetch('http://localhost:8080/getSsrFirstScreenData', {
+      mode: 'no-cors', // 2.14.0 or above supports other options(not only method/headers/url/body),
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(getSsrRequestParams()),
+    })
+      .then(async (rspJson) => {
+        if (rspJson.ok && rspJson.status === 200 && rspJson.body) {
+          let rsp: {[key: string]: NeedToTyped} = {};
+          try {
+            rsp = JSON.parse(rspJson.body as unknown as string);
+          } catch (e) {}
+          if (rsp?.code === 0 && rsp?.data) {
+            // replace store
+            if (rsp?.store) {
+              global.__INITIAL_STATE__ = rsp.store ?? {};
+            }
+            // prepare to insert style
+            const nodeList = rsp.data as StyleNode[];
+            if (nodeList.length) {
+              // set parent id for root node
+              nodeList[0].pId = rootViewId;
+              // filter all comment node, comment node unnecessary to insert style
+              const commentList = nodeList.filter(v => v.name === 'comment');
+              let nodes;
+              try {
+                // insert hippy style for non comment nodes
+                // after insert style, concat comment nodes
+                nodes = insertStyleForSsrNodes(
+                  nodeList.filter(v => v.name !== 'comment'),
+                  JSON.parse(rsp?.styleContent ?? ''),
+                ).concat(commentList);
+              } catch (e) {}
+              // insert nodes to native
+              if (nodes?.length) {
+                const result = await renderSsrNodes(
+                  rootViewId,
+                  nodes,
+                  rsp?.uniqueId ?? 0,
+                  true,
+                  pageCacheKey,
+                  cacheNodes,
+                  backNodes,
+                  cacheUniqueId,
+                );
+                if (!result) {
+                  // exception happen, clear all cached status
+                  errorHandle(rootViewId, cacheNodes, cacheUniqueId);
+                }
+              }
+            }
+          } else {
+            console.log('response decode error:', rspJson);
+          }
+        } else {
+          console.log('response wrong:', rspJson);
+        }
+        // execute client bundle
+        await executionAsyncResource();
+      })
+      .catch((error) => {
+        console.log('response error: ', error);
+        // execute client bundle
+        executionAsyncResource();
+      });
+  });
+}
+
+// execute ssr logic
+ssrEntry('Demo', ssr);
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/menu.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/menu.vue
new file mode 100644
index 00000000000..0cd40adb689
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/menu.vue
@@ -0,0 +1,141 @@
+<template>
+  <ul class="feature-list">
+    <li>
+      <div id="version-info">
+        <p class="feature-title">
+          Vue: {{ version }}
+        </p>
+        <p
+          v-if="Native"
+          class="feature-title"
+        >
+          Hippy-Vue-Next: {{ Native.version !== 'unspecified' ? Native.version : 'master' }}
+        </p>
+      </div>
+    </li>
+    <li>
+      <p class="feature-title">
+        浏览器组件 Demos
+      </p>
+    </li>
+    <li
+      v-for="feature in featureList"
+      :key="feature.id"
+      class="feature-item"
+    >
+      <router-link
+        :to="{ path: `/demo/${feature.id}` }"
+        class="button"
+      >
+        {{ feature.name }}
+      </router-link>
+    </li>
+    <li v-if="nativeFeatureList.length">
+      <p class="feature-title">
+        终端组件 Demos
+      </p>
+    </li>
+    <li
+      v-for="feature in nativeFeatureList"
+      :key="feature.id"
+      class="feature-item"
+    >
+      <router-link
+        :to="{ path: `/demo/${feature.id}` }"
+        class="button"
+      >
+        {{ feature.name }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+<script lang="ts">
+import { defineComponent, onMounted, version } from '@vue/runtime-core';
+import { Native } from '@hippy/vue-next';
+
+import Demos from '../components/demo';
+import NativeDemos from '../components/native-demo';
+
+/** 路由类型 */
+interface RouterList {
+  [key: string]: {
+    name: string;
+  };
+}
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    // list of currently supported feature routes
+    const featureList = Object.keys(Demos).map(demoId => ({
+      id: demoId,
+      name: (Demos as RouterList)[demoId].name,
+    }));
+
+    // native function routing list
+    const nativeFeatureList = Object.keys(NativeDemos).map(demoId => ({
+      id: demoId,
+      name: (NativeDemos as RouterList)[demoId].name,
+    }));
+
+    onMounted(() => {
+      /**
+       * In some scenarios, for example, when passing data to Native,
+       * it is necessary to convert the ref object to the original object.
+       * Otherwise, the native js code does not have the logic to parse ref, which will cause logic errors.
+       */
+      // console.log('data', testData, toRaw(testData));
+    });
+
+    return {
+      featureList,
+      nativeFeatureList,
+      version,
+      Native,
+    };
+  },
+});
+</script>
+<style scoped>
+.feature-list {
+  overflow: scroll;
+}
+
+.feature-item {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.feature-title {
+  color: #555;
+  text-align: center;
+}
+
+.feature-item .button {
+  display: block;
+  border-style: solid;
+  border-color: #40b883;
+  border-width: 2px;
+  border-radius: 10px;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: 56px;
+  line-height: 56px;
+  font-size: 16px;
+  color: #40b883;
+  text-align: center;
+}
+
+#version-info {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-bottom-color: gainsboro;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/remote-debug.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/remote-debug.vue
new file mode 100644
index 00000000000..5e1d399f87b
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/pages/remote-debug.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    ref="inputDemo"
+    class="demo-remote-input"
+    @click.stop="blurInput"
+  >
+    <div class="tips-wrap">
+      <p
+        v-for="(tip, i) in tips"
+        :key="i"
+        class="tips-item"
+        :style="styles.tipText"
+      >
+        {{ i + 1 }}. {{ tip }}
+      </p>
+    </div>
+    <input
+      ref="inputRef"
+      :value="bundleUrl"
+      caret-color="yellow"
+      placeholder="please input bundleUrl"
+      :multiple="true"
+      numberOfLines="4"
+      class="remote-input"
+      @click.stop="() => {}"
+      @change="bundleUrl = $event.value"
+    >
+    <div
+      class="buttonContainer"
+      :style="styles.buttonContainer"
+    >
+      <button
+        :style="styles.button"
+        class="input-button"
+        @click.stop="openBundle"
+      >
+        <span :style="styles.buttonText">开始</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { type HippyInputElement, Native } from '@hippy/vue-next';
+import { defineComponent, ref } from '@vue/runtime-core';
+
+import { getGlobalInitProps } from '../util';
+
+export default defineComponent({
+  setup() {
+    const tips = [
+      '安装远程调试依赖： npm i -D @hippy/debug-server-next@latest',
+      '修改 webpack 配置，添加远程调试地址',
+      '运行 npm run hippy:dev 开始编译，编译结束后打印出 bundleUrl 及调试首页地址',
+      '粘贴 bundleUrl 并点击开始按钮',
+      '访问调试首页开始远程调试，远程调试支持热更新（HMR）',
+    ];
+    const styles = {
+      tipText: {
+        color: '#242424',
+        marginBottom: 12,
+      },
+      button: {
+        width: 200,
+        height: 40,
+        borderRadius: 8,
+        backgroundColor: '#4c9afa',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      buttonText: {
+        fontSize: 16,
+        textAlign: 'center',
+        lineHeight: 40,
+        color: '#fff',
+      },
+      buttonContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    };
+    const bundleUrl = ref('http://127.0.0.1:38989/index.bundle?debugUrl=ws%3A%2F%2F127.0.0.1%3A38989%2Fdebugger-proxy');
+    const inputRef = ref(null);
+
+    /**
+       * blur input
+       *
+       * @type {Event}
+       */
+    const blurInput = () => {
+      if (inputRef.value) {
+        (inputRef.value as HippyInputElement).blur();
+      }
+    };
+
+    /**
+       * open debug bundle
+       */
+    const openBundle = () => {
+      if (bundleUrl.value) {
+        const { rootViewId } = getGlobalInitProps();
+
+        Native.callNative(
+          'TestModule',
+          'remoteDebug',
+          rootViewId,
+          bundleUrl.value,
+        );
+      }
+    };
+
+    return {
+      bundleUrl,
+      styles,
+      tips,
+      inputRef,
+      blurInput,
+      openBundle,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.demo-remote-input {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.input-label {
+  margin: 20px;
+  margin-bottom: 0;
+}
+.demo-remote-input .remote-input {
+  width: 350px;
+  height: 80px;
+  color: #242424;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ccc;
+  font-size: 16px;
+  margin: 20px;
+  placeholder-text-color: #aaa;
+}
+.demo-remote-input .input-button {
+  border-color: #4c9afa;
+  border-width: 1px;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-style: solid;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.tips-wrap {
+  margin-top: 20px;
+  padding: 10px;
+}
+</style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/routes.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/routes.ts
new file mode 100644
index 00000000000..6942be9ec27
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/routes.ts
@@ -0,0 +1,38 @@
+import { type Router } from 'vue-router';
+import { createHippyRouter } from '@hippy/vue-router-next-history';
+
+import Demos from './components/demo';
+import NativeDemos from './components/native-demo';
+import Menu from './pages/menu.vue';
+import RemoteDebug from './pages/remote-debug.vue';
+
+const routes = [
+  {
+    path: '/',
+    component: Menu,
+  },
+  {
+    path: '/remote-debug',
+    component: RemoteDebug,
+    name: 'Debug',
+  },
+  ...Object.keys(Demos).map(demoId => ({
+    path: `/demo/${demoId}`,
+    name: Demos[demoId].name,
+    component: Demos[demoId].component,
+  })),
+  ...Object.keys(NativeDemos).map(demoId => ({
+    path: `/demo/${demoId}`,
+    name: NativeDemos[demoId].name,
+    component: NativeDemos[demoId].component,
+  })),
+];
+
+/**
+ * create HippyRouter instance
+ */
+export function createRouter(): Router {
+  return createHippyRouter({
+    routes,
+  });
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
new file mode 100644
index 00000000000..af115a9ff82
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
@@ -0,0 +1,523 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { SsrNode } from '@hippy/vue-next-server-renderer';
+import { IS_IOS } from './env';
+
+/**
+ * offer ssr node operates, without hippy-vue-next runtime
+ */
+
+/* eslint-disable no-param-reassign */
+
+// key of ssr uniqueId
+export const SSR_UNIQUE_ID_KEY = 'hippyUniqueId';
+
+// SSR render tree type
+interface SsrTreeNode {
+  id: number;
+  pId?: number;
+  node: SsrNode;
+  children: SsrTreeNode[];
+}
+
+// native operate node type
+interface OperateNodeType {
+  create: SsrNode[];
+  update: SsrNode[];
+  delete: SsrNode[];
+  newNodeList: SsrNode[];
+}
+
+/**
+ * Encapsulate the JSON.parse method and handle the catch block uniformly
+ *
+ * @param jsonStr - input json string
+ */
+function jsonParse(jsonStr: string): NeedToTyped {
+  try {
+    return JSON.parse(jsonStr);
+  } catch (e) {
+    return {};
+  }
+}
+
+/**
+ * get the cache data
+ *
+ * @param key - cache key
+ */
+async function getStorageItem(key: string): Promise<NeedToTyped> {
+  return jsonParse(await global.Hippy.asyncStorage.getItem(key));
+}
+
+/**
+ * set cache data
+ *
+ * @param key - cache key
+ * @param data - cache data
+ */
+async function setStorageItem(key: string, data: NeedToTyped): Promise<void> {
+  await global.Hippy.asyncStorage.setItem(key, JSON.stringify(data));
+}
+
+/**
+ * set global uniqueId，ensure uniqueId is the max one, won't repeat with rendered nodes
+ *
+ * @param svrUniqueId - server returned unique ID
+ * @param cachedUniqueId - cached unique ID
+ */
+export function setGlobalUniqueId(svrUniqueId = 0, cachedUniqueId = 0): void {
+  global[SSR_UNIQUE_ID_KEY] = svrUniqueId > cachedUniqueId ? svrUniqueId : cachedUniqueId;
+}
+
+/**
+ * get uniqueId
+ */
+function getUniqueId(): number {
+  if (!global[SSR_UNIQUE_ID_KEY]) global[SSR_UNIQUE_ID_KEY] = 0;
+  global[SSR_UNIQUE_ID_KEY] += 1;
+
+  // The id does not use numbers that are multiples of 10
+  // because id multiples of 10 is used by native
+  if (global[SSR_UNIQUE_ID_KEY] % 10 === 0) {
+    global[SSR_UNIQUE_ID_KEY] += 1;
+  }
+
+  return global[SSR_UNIQUE_ID_KEY];
+}
+
+/**
+ * determine two object is equal
+ *
+ * @param object - to compare object
+ * @param other - compare object
+ */
+function equalObjects(object: {}, other: {}): boolean {
+  const objProps = Object.keys(object);
+  const objLength = objProps.length;
+  const othProps = Object.keys(other);
+  const othLength = othProps.length;
+
+  if (objLength !== othLength) {
+    return false;
+  }
+
+  let key;
+  let index = objLength;
+  while (index -= 1) {
+    key = objProps[index];
+    if (!Object.prototype.hasOwnProperty.call(other, key)) {
+      return false;
+    }
+  }
+
+  let result = true;
+  index += 1;
+  while (index < objLength) {
+    key = objProps[index];
+    const objValue = object[key];
+    const othValue = other[key];
+    const objType = typeof objValue;
+    const othType = typeof othValue;
+    if (objType !== othType) {
+      result = false;
+      break;
+    }
+
+    // Recursively compare objects (susceptible to call stack limits).
+    if (
+      !(
+        objValue === othValue
+        || (objType === 'object'
+          && objValue !== null
+          && equalObjects(objValue, othValue))
+      )
+    ) {
+      result = false;
+      break;
+    }
+    index += 1;
+  }
+  return result;
+}
+
+/**
+ * filter don't render nodes
+ *
+ * @param nodes - native node list
+ */
+function filterUnUsedNodes(nodes: SsrNode[]): SsrNode[] {
+  // comment node and text node do not have tagName no need render
+  return nodes.filter(v => v.name !== 'comment' && v.tagName);
+}
+
+/**
+ * compare node is same, without id and pId attr
+ *
+ * @param lNode - to compare node
+ * @param rNode - compare node
+ */
+function isSameNode(lNode: SsrNode, rNode: SsrNode): {
+  isSameType: boolean;
+  isSameNode: boolean;
+} {
+  const result = { isSameType: false, isSameNode: false };
+  if (lNode.name !== rNode.name || lNode.tagName !== rNode.tagName) {
+    return result;
+  }
+  // name or tagName is same, type is same
+  result.isSameType = true;
+
+  // this feature used to optimize image render, if img has noRenderSsrCache props,
+  // we use default base64 image to instead img src when used cache. so we need
+  // update img when insert cgi ssr node
+  if (rNode.tagName === 'img' && rNode.props.noRenderSsrCache === true) {
+    result.isSameNode = false;
+    return result;
+  }
+
+  // if the index and props is same, the node is same
+  if (lNode.index === rNode.index && equalObjects(lNode.props, rNode.props)) {
+    result.isSameNode = true;
+  }
+  return result;
+}
+
+/**
+ * plat node tree to node list
+ *
+ * @param tree - ssr node tree
+ * @param list - ssr node list
+ * @param parentId - parent node id
+ */
+function treeToList(tree: SsrTreeNode, list: SsrNode[] = [], parentId = 0): SsrNode[] {
+  if (parentId) {
+    tree.pId = parentId;
+    tree.id = getUniqueId();
+  }
+  list.push({ ...tree.node, id: tree.id, pId: tree.pId });
+  const { children } = tree;
+  children.forEach((v) => {
+    treeToList(v, list, parentId ? tree.id : 0);
+  });
+  return list;
+}
+
+/**
+ * convert node list to node tree
+ *
+ * @param node - ssr node tree
+ * @param list - ssr node list
+ */
+function listToTree(node: SsrNode, list: SsrNode[]): SsrTreeNode {
+  let childrens = list
+    .filter(v => v.pId === node.id)
+    .sort((v, k) => v.index - k.index);
+  const commentNodes = childrens.filter(v => v.name === 'comment');
+  if (commentNodes.length) {
+    // comment node index rule is different, re insert comment nodes by sequence
+    childrens = childrens.filter(v => v.name !== 'comment');
+    for (let i = commentNodes.length - 1; i >= 0; i--) {
+      childrens.splice(commentNodes[i].index, 0, commentNodes[i]);
+    }
+  }
+  const childrenNodes: NeedToTyped[] = [];
+  childrens.forEach((v) => {
+    childrenNodes.push(listToTree(v, list));
+  });
+  return {
+    id: node.id,
+    pId: node.pId,
+    node,
+    children: childrenNodes,
+  };
+}
+
+/**
+ * add diff nodes
+ *
+ * @param chunkNodes - all nodes
+ * @param type - operate type
+ * @param list - to add node list
+ */
+function addDiffNodes(chunkNodes: OperateNodeType, type: string, list: SsrNode[]): OperateNodeType {
+  if (type === 'create') {
+    chunkNodes.newNodeList = chunkNodes.newNodeList.concat(list);
+    chunkNodes.create = chunkNodes.create.concat(list.filter(v => v.name !== 'comment'));
+  }
+  if (type === 'update') {
+    chunkNodes.newNodeList = chunkNodes.newNodeList.concat(list);
+    chunkNodes.update = chunkNodes.update.concat(list.filter(v => v.name !== 'comment'));
+  }
+  if (type === 'delete') {
+    chunkNodes.delete = chunkNodes.delete.concat(list.filter(v => v.name !== 'comment'));
+  }
+  return chunkNodes;
+}
+
+/**
+ * diff node tree
+ *
+ * @param cacheTree - cached node tree
+ * @param serverTree - server returned node tree
+ * @param chunkNodes - operate node chunk
+ */
+function diffNodeTree(cacheTree: SsrTreeNode, serverTree: SsrTreeNode, chunkNodes: OperateNodeType): OperateNodeType {
+  const oldChildren = cacheTree.children;
+  const { children } = serverTree;
+  const commonLen = Math.min(oldChildren.length, children.length);
+
+  // handle parent node first
+  const cRes = isSameNode(cacheTree.node, serverTree.node);
+  if (cRes.isSameNode) {
+    chunkNodes.newNodeList.push(cacheTree.node);
+  } else if (cRes.isSameType) {
+    // node type is same, node id use cached, update other props
+    const newNode = {
+      ...serverTree.node,
+      id: cacheTree.id,
+      pId: cacheTree.pId,
+    };
+    chunkNodes = addDiffNodes(chunkNodes, 'update', [newNode]);
+  } else {
+    // node type id different, delete cached node, insert new node
+    const newId = getUniqueId();
+    const newNode = { ...serverTree.node, id: newId, pId: cacheTree.pId };
+    chunkNodes = addDiffNodes(chunkNodes, 'delete', [cacheTree.node]);
+    chunkNodes = addDiffNodes(chunkNodes, 'create', [newNode]);
+    // child node also rebuild, delete old node's children
+    oldChildren.forEach((v) => {
+      chunkNodes = addDiffNodes(chunkNodes, 'delete', treeToList(v));
+    });
+    // child node also rebuild, create new node's children
+    children.forEach((v) => {
+      chunkNodes = addDiffNodes(chunkNodes, 'create', treeToList(v, [], newId));
+    });
+    return chunkNodes;
+  }
+  // compare common length children first
+  for (let i = 0; i < commonLen; i++) {
+    chunkNodes = diffNodeTree(oldChildren[i], children[i], chunkNodes);
+  }
+  // then, if old children still have, just delete
+  if (oldChildren.length > commonLen) {
+    oldChildren.slice(commonLen).forEach((v) => {
+      chunkNodes = addDiffNodes(chunkNodes, 'delete', treeToList(v));
+    });
+  }
+  // old children do not have but new children have, just create
+  if (children.length > commonLen) {
+    children.slice(commonLen).forEach((v) => {
+      chunkNodes = addDiffNodes(
+        chunkNodes,
+        'create',
+        treeToList(v, [], cacheTree.id),
+      );
+    });
+  }
+  return chunkNodes;
+}
+
+/**
+ * compare cache tree and server tree, refresh native node tree, because cache node is rendered.
+ * so native node id is cached first, but props is server first
+ *
+ * @param cacheList - cached node list
+ * @param serverList - server returned node list
+ */
+export function diffSsrNodes(
+  cacheList: SsrNode[],
+  serverList: SsrNode[],
+): OperateNodeType {
+  const chunkNodes: OperateNodeType = {
+    // merged node list
+    newNodeList: [],
+    create: [],
+    update: [],
+    delete: [],
+  };
+  const cacheTree = listToTree(cacheList[0], cacheList);
+  const serverTree = listToTree(serverList[0], serverList);
+  return diffNodeTree(cacheTree, serverTree, chunkNodes);
+}
+
+/**
+ * insert native nodes
+ *
+ * @param rootViewId - native root id
+ * @param nodes - prepare insert nodes
+ */
+export function insertNativeNodes(
+  rootViewId: number,
+  nodes: SsrNode[],
+): void {
+  // create Scene Builder with rootView id
+  const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
+  sceneBuilder.create(filterUnUsedNodes(nodes));
+  sceneBuilder.build();
+}
+
+/**
+ * delete native nodes
+ *
+ * @param rootViewId - native root id
+ * @param nodes - prepare delete nodes
+ */
+export function deleteNativeNodes(
+  rootViewId: number,
+  nodes: SsrNode[],
+): void {
+  // create Scene Builder with rootView id
+  const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
+  sceneBuilder.delete(filterUnUsedNodes(nodes));
+  sceneBuilder.build();
+}
+
+/**
+ * update native nodes
+ *
+ * @param rootViewId - native root id
+ * @param nodes - prepare update nodes
+ */
+export function updateNativeNodes(
+  rootViewId: number,
+  nodes: SsrNode[],
+): void {
+  // create Scene Builder with rootView id
+  const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
+  sceneBuilder.update(filterUnUsedNodes(nodes));
+  sceneBuilder.build();
+}
+
+/**
+ * handle diff nodes, include create, update, and delete. create, update, delete must by sequence.
+ * because delete op may delete new node, but node do not create
+ *
+ * @param rootViewId - native root id
+ * @param unHandleNodes - un handled nodes
+ */
+export function handleDifferentNodes(
+  rootViewId: number,
+  unHandleNodes: OperateNodeType,
+): void {
+  if (unHandleNodes.create.length) {
+    insertNativeNodes(rootViewId, unHandleNodes.create);
+  }
+  if (unHandleNodes.update.length) {
+    updateNativeNodes(rootViewId, unHandleNodes.update);
+  }
+  if (unHandleNodes.delete.length) {
+    deleteNativeNodes(rootViewId, unHandleNodes.delete);
+  }
+}
+
+/**
+ * use cache to render native nodes
+ *
+ * @param rootViewId - native root id
+ * @param cacheKey - cached key
+ *
+ * @public
+ */
+export async function renderNativeNodesByCache(
+  rootViewId: number,
+  cacheKey: string,
+): Promise<[SsrNode[], SsrNode[], number]> {
+  const cacheData = await getStorageItem(cacheKey);
+
+  // cache exist and valid
+  if (cacheData?.list?.length) {
+    const cacheNodes = cacheData.list;
+    // deep copy origin cached nodes, because node insert to native will change some props that
+    // should cause hydrate mismatch, so we need cache origin nodes
+    const backNodes = JSON.parse(JSON.stringify(cacheNodes));
+    // root Node should be child of native rootView, so set root node's pId(parent Id) to
+    // rootViewId(native view id)
+    cacheNodes[0].pId = rootViewId;
+    backNodes[0].pId = rootViewId;
+    // use cache nodes to render
+    insertNativeNodes(rootViewId, cacheNodes);
+    // return all list
+    return [cacheNodes, backNodes, cacheData.uniqueId];
+  }
+  // no cache data or exception, return empty
+  return [[], [], 0];
+}
+
+/**
+ * render ssrNodes to native, cache rendered nodes when useCache is true.
+ * return value is boolean, false should clear cached nodes
+ *
+ * @param rootViewId - native root id
+ * @param ssrNodes - server render nodes
+ * @param uniqueId - server render unique id
+ * @param cacheNodes - cached nodes
+ * @param backNodes - backup cached nodes, use to diff
+ * @param cacheUniqueId - cached unique id
+ * @param useCache - use cache or not
+ * @param cacheKey - cache key
+ *
+ * @public
+ */
+export async function renderSsrNodes(
+  rootViewId: number,
+  ssrNodes: SsrNode[],
+  uniqueId: number,
+  useCache?: boolean,
+  cacheKey?: string,
+  cacheNodes?: SsrNode[],
+  backNodes?: SsrNode[],
+  cacheUniqueId?: number,
+): Promise<boolean> {
+  if (ssrNodes.length) {
+    // deep copy to cached, because node insert to native will change node props that
+    // cause mismatch
+    const ssrCacheNodes = JSON.parse(JSON.stringify(ssrNodes));
+    // handle global uniqueId，compare with uniqueId, use the max one
+    setGlobalUniqueId(uniqueId, cacheUniqueId);
+    if (cacheNodes?.length && backNodes?.length) {
+      // used cache, we should diff nodes
+      try {
+        // find different nodes, use origin server node list diff with origin cached node list
+        const chunkNodes = diffSsrNodes(backNodes, ssrNodes);
+        // update different nodes
+        handleDifferentNodes(rootViewId, chunkNodes);
+        // save rendered nodes to hydrate
+        global.hippySSRNodes = chunkNodes.newNodeList;
+      } catch (e) {
+        // diff exception happens
+        return false;
+      }
+    } else {
+      // no cache, insert ssrNodes directly
+      insertNativeNodes(rootViewId, ssrNodes);
+      // save rendered nodes to hydrate
+      global.hippySSRNodes = ssrNodes;
+    }
+    if (useCache && cacheKey) {
+      await setStorageItem(cacheKey, {
+        // current global unique Id
+        uniqueId: global[SSR_UNIQUE_ID_KEY] ?? 0,
+        list: ssrCacheNodes,
+      });
+    }
+  }
+  return true;
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/store.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/store.ts
new file mode 100644
index 00000000000..23dbd9e897e
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/store.ts
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const storeKey = 'src/pages/app';
+
+/**
+ * app store
+ */
+export const useAppStore = defineStore(storeKey, () => {
+  const ssrMsg = ref('');
+
+  // simulate async function
+  const getSsrMsg = (): Promise<void> => new Promise((resolve) => {
+    setTimeout(() => {
+      ssrMsg.value = 'with SSR';
+      resolve();
+    }, 300);
+  });
+
+  return {
+    ssrMsg,
+    getSsrMsg,
+  };
+});
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/util.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/util.ts
new file mode 100644
index 00000000000..fe947e12288
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/util.ts
@@ -0,0 +1,60 @@
+import { Native } from '@hippy/vue-next';
+import { useSSRContext } from 'vue';
+import { IS_SSR } from './env';
+
+let globalProps: NeedToTyped;
+
+/**
+ * Save hippy global initialization parameters
+ *
+ * @param props - superProps
+ */
+export function setGlobalInitProps(props: NeedToTyped): void {
+  globalProps = props;
+}
+
+/**
+ * Get hippy global initialization parameters
+ */
+export function getGlobalInitProps(): NeedToTyped {
+  return globalProps;
+}
+
+/**
+ * get screen size
+ */
+export function getScreenSize(): {
+  width: number;
+  height: number;
+  statusBarHeight: number;
+} {
+  if (IS_SSR) {
+    const ssrContext = useSSRContext();
+    if (ssrContext?.context) {
+      const { dimensions } = ssrContext.context;
+      if (dimensions?.screen) {
+        return dimensions.screen;
+      }
+    }
+    return {
+      width: 0,
+      height: 0,
+      statusBarHeight: 0,
+    };
+  }
+  return Native.Dimensions.screen;
+}
+
+/**
+ * current platform is iOS or not
+ */
+export function isIOS(): boolean {
+  if (IS_SSR) {
+    const ssrContext = useSSRContext();
+    if (ssrContext?.context) {
+      return Boolean(ssrContext.context?.isIOS);
+    }
+    return false;
+  }
+  return Native.isIOS();
+}
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
new file mode 100644
index 00000000000..1f40cefb093
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
@@ -0,0 +1,30 @@
+/**
+ * ssr entry
+ */
+import { type CallbackType } from '@hippy/vue-next';
+
+/**
+ * register hippy instance and execute entry function
+ *
+ * @param bundleName - bundle name
+ * @param entryCallback - entry function
+ */
+export function ssrEntry(bundleName: string, entryCallback?: CallbackType): void {
+  let params = null;
+  // save raw register function
+  const { regist } = global.Hippy.register;
+  global.Hippy.register.regist = (bundleName, callback) => {
+    // hijack raw register, avoid multiple execution
+    if (callback) {
+      callback(params);
+    }
+  };
+  // register hippy instance
+  regist.call(global.Hippy.register, bundleName, (superProps) => {
+    params = superProps;
+    // execute entry function
+    if (entryCallback) {
+      entryCallback();
+    }
+  });
+}
diff --git a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
index 32321b2db6a..d034b07353c 100644
--- a/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/driver/js/packages/hippy-vue-next-compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -55,7 +55,6 @@ import {
   type PropsExpression,
 } from '@vue/compiler-dom';
 import {
-  capitalize,
   isBooleanAttr,
   isBuiltInDirective,
   isSSRSafeAttrName,
@@ -94,66 +93,6 @@ function isTextTag(tag: string): boolean {
   return ['span', 'p', 'label', 'a'].includes(tag);
 }
 
-/**
- * get native real event listener name for binding event name
- *
- * @param event - event name
- * @param tagName - event target tag name
- */
-function getHippyEventKeyInSSR(event: string, tagName: string): string {
-  const eventMap = {
-    div: {
-      touchStart: 'onTouchDown',
-      touchstart: 'onTouchDown',
-      touchmove: 'onTouchMove',
-      touchend: 'onTouchEnd',
-      touchcancel: 'onTouchCancel',
-    },
-    ul: { listReady: 'initialListReady' },
-    li: { disappear: 'onDisappear' },
-    input: {
-      change: 'onChangeText',
-      select: 'onSelectionChange',
-    },
-    swiper: {
-      dropped: 'onPageSelected',
-      dragging: 'onPageScroll',
-      stateChanged: 'onPageScrollStateChanged',
-    },
-  };
-  let curEventMap = {};
-  switch (tagName) {
-    case 'div':
-    case 'button':
-    case 'img':
-    case 'span':
-    case 'label':
-    case 'p':
-    case 'a':
-      curEventMap = eventMap.div;
-      break;
-    case 'ul':
-      curEventMap = eventMap.ul;
-      break;
-    case 'li':
-      curEventMap = eventMap.li;
-      break;
-    case 'textarea':
-    case 'input':
-      curEventMap = eventMap.input;
-      break;
-    case 'swiper':
-      curEventMap = eventMap.swiper;
-      break;
-    default:
-      break;
-  }
-  if (curEventMap[event]) {
-    return curEventMap[event];
-  }
-  return `on${capitalize(event)}`;
-}
-
 export const ssrTransformElement: NodeTransform = (node, context) => {
   if (
     node.type !== NodeTypes.ELEMENT
@@ -214,10 +153,11 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
           // directive event handled for hippy.
           // hippy event handle: at ssr for web, onXXX will ignore, so we need to add Event listener
           // onXXX=true, so that hippy native should add event listener
-          const { arg } = prop;
-          if (arg?.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic) {
-            openTag.push(`"${getHippyEventKeyInSSR(arg.content, node.tag)}": true,`);
-          }
+          // const { arg } = prop;
+          // if (arg?.type === NodeTypes.SIMPLE_EXPRESSION && arg.isStatic) {
+            // hippy 3.x no need to set event name props
+            // openTag.push(`"${getHippyEventKeyInSSR(arg.content, node.tag)}": true,`);
+          // }
         } else if (prop.name === 'html' && prop.exp) {
           // v-html/v-text/v-textarea/ hippy do not support
           // rawChildrenMap.set(node, prop.exp);
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
index 651fe6f6fc8..3f76524bb32 100644
--- a/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/render-vnode.ts
@@ -400,15 +400,6 @@ function renderElementVNode(
       props.text = children;
     }
   }
-  // transform event listener
-  Object.keys(props).forEach((key) => {
-    // event listener like onClick, onTouchStart is function. hippy just used true to marked.
-    // for example: <a @click="()=>{}"></a> to { tagName: "a", onClick: true }
-    // real event listener should bind at hydration
-    if (isFunction(props[key])) {
-      props[key] = true;
-    }
-  });
 
   openTag += `${JSON.stringify(props)},`;
   push(`${openTag}`);
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
index 67d7d900aad..9417934e201 100644
--- a/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
@@ -75,48 +75,13 @@ function mergeDefaultNativeProps(
 ): SsrNodeProps {
   const commonProps = { id: '', class: '' };
   let defaultNativeProps: SsrNodeProps = {};
-  let eventMap;
 
   switch (node.name) {
-    case 'View':
-    case 'ScrollView':
-      eventMap = {
-        onTouchStart: 'onTouchDown',
-        onTouchstart: 'onTouchDown',
-        onTouchMove: 'onTouchMove',
-        onTouchend: 'onTouchEnd',
-        onTouchcancel: 'onTouchCancel',
-      };
-      Object.keys(eventMap).forEach((v) => {
-        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
-          // set hippy real native event name
-          defaultNativeProps[eventMap[v]] = true;
-          // remove vue old event listener
-          delete node.props[v];
-        }
-      });
-      break;
     case 'ListView':
       defaultNativeProps = {
         // calculate child nums
         numberOfRows: nodeList.filter(v => v.pId === node.id).length,
       };
-      // polyFillNativeEvents
-      if (node.props.onEndReached || node.props.onLoadMore) {
-        defaultNativeProps.onEndReached = true;
-        defaultNativeProps.onLoadMore = true;
-      }
-      eventMap = {
-        onListReady: 'initialListReady',
-      };
-      Object.keys(eventMap).forEach((v) => {
-        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
-          // set hippy real native event name
-          defaultNativeProps[eventMap[v]] = true;
-          // remove vue old event listener
-          delete node.props[v];
-        }
-      });
       break;
     case 'Text':
       defaultNativeProps = { text: '' };
@@ -126,34 +91,9 @@ function mergeDefaultNativeProps(
       if (node.tagName === 'textarea') {
         defaultNativeProps.numberOfLines = 5;
       }
-      eventMap = {
-        onChange: 'changeText',
-        onSelect: 'selectionChange',
-      };
-      Object.keys(eventMap).forEach((v) => {
-        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
-          // set hippy real native event name
-          defaultNativeProps[eventMap[v]] = true;
-          // remove vue old event listener
-          delete node.props[v];
-        }
-      });
       break;
     case 'ViewPager':
       defaultNativeProps = { initialPage: node.props.current };
-      eventMap = {
-        onDropped: 'onPageSelected',
-        onDragging: 'onPageScroll',
-        onStateChanged: 'onPageScrollStateChanged',
-      };
-      Object.keys(eventMap).forEach((v) => {
-        if (Object.prototype.hasOwnProperty.call(node.props, v)) {
-          // set hippy real native event name
-          defaultNativeProps[eventMap[v]] = true;
-          // remove vue old event listener
-          delete node.props[v];
-        }
-      });
       break;
     case 'WebView':
       defaultNativeProps = {

From 98c102b137ddd7b51fa0cede011fdec870a1f418 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Tue, 26 Sep 2023 15:06:33 +0800
Subject: [PATCH 05/10] fix(vue-next): fix eslint issue

---
 .../src/components/demo/demo-p.vue            | 76 +++++++++----------
 .../src/ssr-node-ops.ts                       |  1 -
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
index ace06a4d971..ea319c2bb2d 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
@@ -216,41 +216,41 @@
       <div class="p-demo-content">
         <p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
           <img
-            style="width: 24; height: 24; vertical-align: top;"
+            style="width: 24px; height: 24px; vertical-align: top;"
             :src="img2"
           >
           <img
-            style="width: 18; height: 12; vertical-align: middle;"
+            style="width: 18px; height: 12px; vertical-align: middle;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 12; vertical-align: baseline;"
+            style="width: 24px; height: 12px; vertical-align: baseline;"
             :src="img2"
           >
           <img
-            style="width: 36; height: 24; vertical-align: bottom;"
+            style="width: 36px; height: 24px; vertical-align: bottom;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: top;"
+            style="width: 24px; height: 24px; vertical-align: top;"
             :src="img3"
           >
           <img
-            style="width: 18; height: 12; vertical-align: middle;"
+            style="width: 18px; height: 12px; vertical-align: middle;"
             :src="img3"
           >
           <img
-            style="width: 24; height: 12; vertical-align: baseline;"
+            style="width: 24px; height: 12px; vertical-align: baseline;"
             :src="img3"
           >
           <img
-            style="width: 36; height: 24; vertical-align: bottom;"
+            style="width: 36px; height: 24px; vertical-align: bottom;"
             :src="img3"
           >
-          <span style="font-size: 16; vertical-align: top;">字</span>
-          <span style="font-size: 16; vertical-align: middle;">字</span>
-          <span style="font-size: 16; vertical-align: baseline;">字</span>
-          <span style="font-size: 16; vertical-align: bottom;">字</span>
+          <span style="font-size: 16px; vertical-align: top;">字</span>
+          <span style="font-size: 16px; vertical-align: middle;">字</span>
+          <span style="font-size: 16px; vertical-align: baseline;">字</span>
+          <span style="font-size: 16px; vertical-align: bottom;">字</span>
         </p>
         <p v-if="Platform === 'android'">
           legacy mode:
@@ -260,56 +260,56 @@
           style="lineHeight: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
-            style="width: 24; height: 24; vertical-alignment: 0;"
+            style="width: 24px; height: 24px; vertical-alignment: 0;"
             :src="img2"
           >
           <img
-            style="width: 18; height: 12; vertical-alignment: 1;"
+            style="width: 18px; height: 12px; vertical-alignment: 1;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 12; vertical-alignment: 2;"
+            style="width: 24px; height: 12px; vertical-alignment: 2;"
             :src="img2"
           >
           <img
-            style="width: 36; height: 24; vertical-alignment: 3;"
+            style="width: 36px; height: 24px; vertical-alignment: 3;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; top: -10;"
+            style="width: 24px; height: 24px; top: -10px;"
             :src="img3"
           >
           <img
-            style="width: 18; height: 12; top: -5;"
+            style="width: 18px; height: 12px; top: -5px;"
             :src="img3"
           >
           <img
-            style="width: 24; height: 12;"
+            style="width: 24px; height: 12px;"
             :src="img3"
           >
           <img
-            style="width: 36; height: 24; top: 5;"
+            style="width: 36px; height: 24px; top: 5px;"
             :src="img3"
           >
-          <span style="font-size: 16;">字</span>
-          <span style="font-size: 16;">字</span>
-          <span style="font-size: 16;">字</span>
-          <span style="font-size: 16;">字</span>
+          <span style="font-size: 16px;">字</span>
+          <span style="font-size: 16px;">字</span>
+          <span style="font-size: 16px;">字</span>
+          <span style="font-size: 16px;">字</span>
         </p>
       </div>
       <label>tint-color & background-color</label>
       <div class="p-demo-content">
         <p style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
           <img
-            style="width: 24; height: 24; vertical-align: middle; tint-color: orange;"
+            style="width: 24px; height: 24px; vertical-align: middle; tint-color: orange;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: middle; tint-color: orange; background-color: #ccc;"
+            style="width: 24px; height: 24px; vertical-align: middle; tint-color: orange; background-color: #ccc;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: middle; background-color: #ccc;"
+            style="width: 24px; height: 24px; vertical-align: middle; background-color: #ccc;"
             :src="img2"
           >
           <span style="vertical-align: middle; background-color: #99f;">text</span>
@@ -322,15 +322,15 @@
           style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
-            style="width: 24; height: 24; tint-color: orange;"
+            style="width: 24px; height: 24px; tint-color: orange;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; tint-color: orange; background-color: #ccc;"
+            style="width: 24px; height: 24px; tint-color: orange; background-color: #ccc;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; background-color: #ccc;"
+            style="width: 24px; height: 24px; background-color: #ccc;"
             :src="img2"
           >
         </p>
@@ -339,19 +339,19 @@
       <div class="p-demo-content">
         <p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
           <img
-            style="width: 24; height: 24; vertical-align: top; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-align: top; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: middle; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-align: middle; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: baseline; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-align: baseline; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-align: bottom; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-align: bottom; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
         </p>
@@ -363,19 +363,19 @@
           style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
-            style="width: 24; height: 24; vertical-alignment: 0; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-alignment: 0; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-alignment: 1; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-alignment: 1; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-alignment: 2; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-alignment: 2; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
           <img
-            style="width: 24; height: 24; vertical-alignment: 3; background-color: #ccc; margin: 5;"
+            style="width: 24px; height: 24px; vertical-alignment: 3; background-color: #ccc; margin: 5px;"
             :src="img2"
           >
         </p>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
index af115a9ff82..8a3cf27b2b1 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
@@ -18,7 +18,6 @@
  * limitations under the License.
  */
 import type { SsrNode } from '@hippy/vue-next-server-renderer';
-import { IS_IOS } from './env';
 
 /**
  * offer ssr node operates, without hippy-vue-next runtime

From 8bfd6b0a9751baf0f0fd8c5d58325160163e4da5 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Tue, 26 Sep 2023 19:37:10 +0800
Subject: [PATCH 06/10] fix(vue-next): compatible hippy 3.x node operate method
 & ui

---
 .../hippy-vue-next-ssr-demo/package.json      |   2 -
 .../scripts/env-polyfill.js                   |  61 ++++++
 .../scripts/hippy-webpack.dev.js              | 179 ++++++++++++++++++
 .../scripts/hippy-webpack.web-renderer.dev.js | 165 ++++++++++++++++
 .../scripts/hippy-webpack.web-renderer.js     | 166 ++++++++++++++++
 .../hippy-vue-next-ssr-demo/server.ts         |   3 +
 .../hippy-vue-next-ssr-demo/src/app.vue       |  16 +-
 .../src/components/demo/demo-div.vue          |   1 +
 .../src/components/demo/demo-iframe.vue       |   1 +
 .../src/components/demo/demo-img.vue          |   1 +
 .../src/components/demo/demo-list.vue         |   1 +
 .../src/components/demo/demo-p.vue            |   1 +
 .../src/components/demo/demo-shadow.vue       |   1 +
 .../src/components/demo/demo-websocket.vue    |   1 +
 .../components/native-demo/demo-dialog.vue    |   2 +
 .../native-demo/demo-nested-scroll.vue        |   2 +
 .../native-demo/demo-pull-header-footer.vue   |   7 +
 .../components/native-demo/demo-swiper.vue    |   2 +
 .../native-demo/demo-vue-native.vue           |   3 +
 .../components/native-demo/demo-waterfall.vue |   6 +
 .../src/main-native.ts                        |  36 ++--
 .../src/main-server.ts                        |   4 +-
 .../src/ssr-node-ops.ts                       |  17 +-
 .../src/webpack-plugin.ts                     |   1 +
 .../src/renderer.ts                           |   2 +-
 .../src/style-match/css-append.ts             |   8 +-
 .../js/packages/hippy-vue-next/src/index.ts   |   3 +-
 .../src/runtime/element/hippy-element.ts      |   3 +-
 .../src/runtime/node/hippy-node.ts            |   2 +-
 29 files changed, 658 insertions(+), 39 deletions(-)
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/env-polyfill.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.dev.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.dev.js
 create mode 100644 driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.js

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/package.json b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
index bd63f3d9a11..367d4bffe81 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/package.json
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/package.json
@@ -13,8 +13,6 @@
   "author": "OpenHippy Team",
   "scripts": {
     "hippy:dev": "node ./scripts/env-polyfill.js hippy-dev -c ./scripts/hippy-webpack.dev.js",
-    "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",
     "ssr:dev-client": "node ./scripts/env-polyfill.js hippy-dev -c ./scripts/webpack-ssr-config/client.dev.js",
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/env-polyfill.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/env-polyfill.js
new file mode 100644
index 00000000000..11a413eef85
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/env-polyfill.js
@@ -0,0 +1,61 @@
+const { exec } = require('shelljs');
+
+const runScript = (scriptStr) => {
+  console.log(`Full command execute: "${scriptStr}"`);
+  const result = exec(scriptStr, { stdio: 'inherit' });
+  if (result.code !== 0) {
+    console.error(`❌ Execute cmd - "${scriptStr}" error: ${result.stderr}`);
+    process.exit(1);
+  }
+};
+
+const toNum = (originalNum) => {
+  const num = `${originalNum}`;
+  const versionList = num.split('.');
+  const currentSplitLength = versionList.length;
+  if (currentSplitLength !== 4) {
+    let index = currentSplitLength;
+    while (index < 4) {
+      versionList.push('0');
+      index += 1;
+    }
+  }
+  const r = ['0000', '000', '00', '0', ''];
+  for (let i = 0; i < versionList.length; i += 1) {
+    let len = versionList[i].length;
+    if (len > 4) {
+      len = 4;
+      versionList[i] = versionList[i].slice(0, 4);
+    }
+    versionList[i] = r[len] + versionList[i];
+  }
+  return versionList.join('');
+};
+
+const versionCompare = (targetVer, currentVer) => {
+  if (!targetVer || !currentVer) return 1;
+  const numA = toNum(currentVer);
+  const numB = toNum(targetVer);
+  if (numA === numB) {
+    return 0;
+  }
+  return numA < numB ? -1 : 1;
+};
+
+const LEGACY_OPENSSL_VERSION = '3.0.0';
+const scriptString = process.argv.slice(2).join(' ');
+let envPrefixStr = '';
+
+console.log(`Start to execute cmd: "${scriptString}"`);
+console.log(`Current openssl version: ${process.versions.openssl}`);
+
+const result = /^(\d+\.\d+\.\d+).*$/.exec(process.versions.openssl.toString().trim());
+if (result && result[1]) {
+  const currentVersion = result[1];
+  const compareResult = versionCompare(LEGACY_OPENSSL_VERSION, currentVersion);
+  if (compareResult >= 0) {
+    envPrefixStr += 'NODE_OPTIONS=--openssl-legacy-provider';
+  }
+}
+
+runScript(`${envPrefixStr} ${scriptString}`); // start to execute cmd
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.dev.js
new file mode 100644
index 00000000000..1d5a65f07a7
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.dev.js
@@ -0,0 +1,179 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+
+const pkg = require('../package.json');
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+
+module.exports = {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  watch: true,
+  watchOptions: {
+    aggregateTimeout: 1500,
+  },
+  devServer: {
+    // remote debug server address
+    remote: {
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 38989,
+    },
+    // support inspect vue components, store and router, by default is disabled
+    vueDevtools: false,
+    // support debug multiple project with only one debug server, by default is set false.
+    multiple: false,
+    // by default hot and liveReload option are true, you could set only liveReload to true
+    // to use live reload
+    hot: true,
+    liveReload: true,
+    client: {
+      overlay: false,
+    },
+    devMiddleware: {
+      writeToDisk: true,
+    },
+  },
+  entry: {
+    index: ['@hippy/rejection-tracking-polyfill', path.resolve(pkg.nativeMain)],
+  },
+  output: {
+    filename: 'index.bundle',
+    // chunkFilename: '[name].[chunkhash].js',
+    strictModuleExceptionHandling: true,
+    path: path.resolve('./dist/dev/'),
+    globalObject: '(0, eval)("this")',
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+        HOST: JSON.stringify(process.env.DEV_HOST || '127.0.0.1'),
+        PORT: JSON.stringify(process.env.DEV_PORT || 38989),
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __PLATFORM__: null,
+    }),
+    new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
+    // use SourceMapDevToolPlugin can generate sourcemap file while setting devtool to false
+    // new webpack.SourceMapDevToolPlugin({
+    //   test: /\.(js|jsbundle|css|bundle)($|\?)/i,
+    //   filename: '[file].map',
+    // }),
+    new CleanWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'esbuild-loader',
+            options: {
+              target: 'es2015',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: true,
+            // limit: 8192,
+            // fallback: 'file-loader',
+            // name: '[name].[ext]',
+            // outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.dev.js
new file mode 100644
index 00000000000..7fc0ec81035
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.dev.js
@@ -0,0 +1,165 @@
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
+
+const pkg = require('../package.json');
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+const platform = 'web';
+module.exports = {
+  mode: 'development',
+  bail: true,
+  devServer: {
+    port: 3000,
+    hot: true,
+    liveReload: true,
+  },
+  devtool: 'source-map',
+  entry: {
+    index: ['regenerator-runtime', path.resolve(pkg.webMain)],
+  },
+  output: {
+    // filename: `[name].${platform}.js`,
+    filename: 'index.bundle.js',
+    path: path.resolve(`./dist/${platform}/`),
+    strictModuleExceptionHandling: true,
+    globalObject: '(0, eval)("this")',
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      inject: true,
+      scriptLoading: 'blocking',
+      template: path.resolve('./public/web-renderer.html'),
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
+        HOST: JSON.stringify(process.env.DEV_HOST || '127.0.0.1'),
+        PORT: JSON.stringify(process.env.DEV_PORT || 38989),
+      },
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+      __PLATFORM__: platform,
+    }),
+    // new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
+    // use SourceMapDevToolPlugin can generate sourcemap file while setting devtool to false
+    // new webpack.SourceMapDevToolPlugin({
+    //   test: /\.(js|jsbundle|css|bundle)($|\?)/i,
+    //   filename: '[file].map',
+    // }),
+    new CleanWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'esbuild-loader',
+            options: {
+              target: 'es2015',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: true,
+            // limit: 8192,
+            // fallback: 'file-loader',
+            // name: '[name].[ext]',
+            // outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.js
new file mode 100644
index 00000000000..4e2636dfde5
--- /dev/null
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/hippy-webpack.web-renderer.js
@@ -0,0 +1,166 @@
+const path = require('path');
+const fs = require('fs');
+const { VueLoaderPlugin } = require('vue-loader');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');
+const pkg = require('../package.json');
+
+let cssLoader = '@hippy/vue-css-loader';
+const hippyVueCssLoaderPath = path.resolve(__dirname, '../../../packages/hippy-vue-css-loader/dist/css-loader.js');
+if (fs.existsSync(hippyVueCssLoaderPath)) {
+  console.warn(`* Using the @hippy/vue-css-loader in ${hippyVueCssLoaderPath}`);
+  cssLoader = hippyVueCssLoaderPath;
+} else {
+  console.warn('* Using the @hippy/vue-css-loader defined in package.json');
+}
+
+const platform = 'web';
+module.exports = {
+  mode: 'production',
+  bail: true,
+  entry: {
+    index: ['regenerator-runtime', path.resolve(pkg.webMain)],
+  },
+  output: {
+    filename: '[name].[contenthash:8].js',
+    path: path.resolve(`./dist/${platform}/`),
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      inject: true,
+      scriptLoading: 'blocking',
+      template: path.resolve('./public/web-renderer.html'),
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production'),
+      },
+      __PLATFORM__: null,
+    }),
+    // new HippyDynamicImportPlugin(),
+    // LimitChunkCountPlugin can control dynamic import ability
+    // Using 1 will prevent any additional chunks from being added
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
+    // use SourceMapDevToolPlugin can generate sourcemap file
+    // new webpack.SourceMapDevToolPlugin({
+    //   test: /\.(js|jsbundle|css|bundle)($|\?)/i,
+    //   filename: '[file].map',
+    // }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {
+              compilerOptions: {
+                // disable vue3 dom patch flag，because hippy do not support innerHTML
+                hoistStatic: false,
+                // whitespace handler, default is 'condense', it can be set 'preserve'
+                whitespace: 'condense',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(le|c)ss$/,
+        use: [cssLoader, 'less-loader'],
+      },
+      {
+        test: /\.t|js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      chrome: 57,
+                    },
+                  },
+                ],
+              ],
+              plugins: [
+                ['@babel/plugin-proposal-class-properties'],
+                ['@babel/plugin-proposal-decorators', { legacy: true }],
+                ['@babel/plugin-transform-runtime', { regenerator: true }],
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: true,
+            // TODO local path not supported on defaultSource/backgroundImage
+            // limit: 8192,
+            // fallback: 'file-loader',
+            // name: '[name].[ext]',
+            // outputPath: 'assets/',
+          },
+        }],
+      },
+      {
+        test: /\.(ts)$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json', '.ts'],
+    alias: (() => {
+      const aliases = {
+        src: path.resolve('./src'),
+      };
+
+      // If @vue/runtime-core was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueRuntimeCorePath = path.resolve(__dirname, '../../../packages/hippy-vue-next/node_modules/@vue/runtime-core');
+      if (fs.existsSync(path.resolve(hippyVueRuntimeCorePath, 'index.js'))) {
+        console.warn(`* Using the @vue/runtime-core in ${hippyVueRuntimeCorePath} as vue alias`);
+        aliases['@vue/runtime-core'] = hippyVueRuntimeCorePath;
+      } else {
+        console.warn('* Using the @vue/runtime-core defined in package.json');
+      }
+
+      // If @hippy/vue-next was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const hippyVueNextPath = path.resolve(__dirname, '../../../packages/hippy-vue-next/dist');
+      if (fs.existsSync(path.resolve(hippyVueNextPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/vue-next in ${hippyVueNextPath} as @hippy/vue-next alias`);
+        aliases['@hippy/vue-next'] = hippyVueNextPath;
+      } else {
+        console.warn('* Using the @hippy/vue-next defined in package.json');
+      }
+
+      return aliases;
+    })(),
+  },
+};
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/server.ts b/driver/js/examples/hippy-vue-next-ssr-demo/server.ts
index db1660b26f5..d92fd6ae8ca 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/server.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/server.ts
@@ -53,6 +53,9 @@ server.all('/getSsrFirstScreenData', (req, rsp) => {
   // get hippy ssr node list and other const
   render('/', {
     appName: 'Demo',
+    iPhone: {
+      statusBar: { disabled: true },
+    },
   }, req.body).then(({
     list,
     store,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
index 4035c0b6008..bb96e1b1097 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue
@@ -143,6 +143,7 @@ export default defineComponent({
   margin-bottom: 18px;
 }
 #root .body-container {
+  display: flex;
   flex: 1;
 }
 .row {
@@ -156,21 +157,10 @@ export default defineComponent({
   align-content: center;
 }
 .fullscreen {
+  display: flex;
   flex: 1;
 }
-.row {
-  flex-direction: row;
-}
-.column {
-  flex-direction: column;
-}
-.center {
-  justify-content: center;
-  align-content: center;
-}
-.fullscreen {
-  flex: 1;
-}
+
 .toolbar {
   display: flex;
   height: 40px;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
index fe2cf2d6179..24453b81060 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
@@ -257,6 +257,7 @@ export default defineComponent({
 
 <style scoped>
 #div-demo {
+  display: flex;
   flex: 1;
   overflow-y: scroll;
   margin: 7px;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
index aec04f96376..36a57aeeae0 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-iframe.vue
@@ -120,6 +120,7 @@ export default defineComponent({
 }
 
 #iframe-demo #iframe {
+  display: flex;
   flex: 1;
 }
 </style>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
index 68f09d12b2c..43e85f351b3 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-img.vue
@@ -117,6 +117,7 @@ export default defineComponent({
 </script>
 <style scoped>
 #demo-img {
+  display: flex;
   overflow-y: scroll;
   flex: 1;
   margin: 7px;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
index ffd20bfbb70..2a18037cf06 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
@@ -289,6 +289,7 @@ export default defineComponent({
 
 <style scoped>
 #demo-list {
+  display: flex;
   collapsable: false;
   flex: 1;
 }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
index ea319c2bb2d..217b2c43e27 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
@@ -484,6 +484,7 @@ export default defineComponent({
 
 <style scoped>
 .p-demo {
+  display: flex;
   margin: 7px;
   overflow-y: scroll;
   flex: 1;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
index 551bdb73e2e..8bb1f8d2125 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
@@ -48,6 +48,7 @@ export default defineComponent({
 </script>
 <style scoped>
 #shadow-demo {
+  display: flex;
   flex: 1;
 }
 
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
index 15335de1a87..936347caecc 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-websocket.vue
@@ -188,6 +188,7 @@ export default defineComponent({
 }
 
 #websocket-demo input {
+  display: flex;
   color: black;
   flex: 1;
   height: 36px;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
index ee1a6dfcbf5..0e04157e95a 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-dialog.vue
@@ -191,11 +191,13 @@ export default defineComponent({
 }
 
 .dialog-demo-wrapper {
+  display: flex;
   flex: 1;
   background-color: #40b88377;
 }
 
 .dialog-2-demo-wrapper {
+  display: flex;
   flex: 1;
   background-color: #444444ee;
   justify-content: center;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
index a1ff0d15af7..b3438908752 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
@@ -95,6 +95,7 @@ export default defineComponent({
 
 <style scoped>
 #demo-wrap {
+    display: flex;
     overflow-y: scroll;
     flex: 1;
 }
@@ -116,6 +117,7 @@ export default defineComponent({
 }
 
 #tabs p {
+    display: flex;
     flex: 1;
     text-align: center;
     background-color: #eee;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
index 0d0982e3f4f..26c3f1e6585 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-pull-header-footer.vue
@@ -311,6 +311,7 @@ export default defineComponent({
 
 <style scoped>
 #demo-pull-header-footer {
+  display: flex;
   flex: 1;
   padding: 12px;
 }
@@ -338,6 +339,7 @@ export default defineComponent({
 }
 
 #demo-pull-header-footer #list {
+  display: flex;
   flex: 1;
   background-color: white;
 }
@@ -364,12 +366,14 @@ export default defineComponent({
 }
 
 [specital-attr='pull-header-footer'] :deep(.image) {
+  display: flex;
   flex: 1;
   height: 160px;
   resize-mode: cover;
 }
 
 [specital-attr='pull-header-footer'] :deep(.style-one-image-container) {
+  display: flex;
   flex-direction: row;
   justify-content: center;
   margin-top: 8px;
@@ -386,6 +390,7 @@ export default defineComponent({
 }
 
 [specital-attr='pull-header-footer'] :deep(.style-two-left-container) {
+  display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: center;
@@ -393,6 +398,7 @@ export default defineComponent({
 }
 
 [specital-attr='pull-header-footer'] :deep(.style-two-image-container) {
+  display: flex;
   flex: 1;
 }
 
@@ -401,6 +407,7 @@ export default defineComponent({
 }
 
 [specital-attr='pull-header-footer'] :deep(.style-five-image-container) {
+  display: flex;
   flex-direction: row;
   justify-content: center;
   margin-top: 8px;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
index 7e59f62b589..ca094f3fd79 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-swiper.vue
@@ -149,10 +149,12 @@ export default defineComponent({
 
 <style>
 #demo-swiper {
+  display: flex;
   flex: 1;
 }
 
 #demo-swiper #swiper {
+  display: flex;
   flex: 1;
   height: 400px;
 }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
index 446740a2018..dd2ea6e26dc 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-vue-native.vue
@@ -520,6 +520,7 @@ export default defineComponent({
 
 <style scoped>
 #demo-vue-native {
+  display: flex;
   flex: 1;
   padding: 12px;
   overflow-y: scroll;
@@ -540,6 +541,7 @@ export default defineComponent({
 }
 
 .event-btn {
+  display: flex;
   background-color: #40b883;
   flex: 1;
   flex-direction: column;
@@ -553,6 +555,7 @@ export default defineComponent({
 }
 
 .event-btn-result {
+  display: flex;
   flex: 1;
   flex-direction: column;
 }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
index 112a199c1b4..540dc454764 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
@@ -206,6 +206,7 @@ export default defineComponent({
 
 <style scoped>
 #demo-waterfall {
+  display: flex;
   flex: 1;
 }
 
@@ -229,6 +230,7 @@ export default defineComponent({
 }
 
 #demo-waterfall .pull-footer {
+  display: flex;
   flex: 1;
   height: 40px;
   background-color: #40b883;
@@ -253,12 +255,14 @@ export default defineComponent({
 }
 
 #demo-waterfall :deep(.image) {
+  display: flex;
   flex: 1;
   height: 120px;
   resize: both;
 }
 
 #demo-waterfall :deep(.style-one-image-container) {
+  display: flex;
   flex-direction: row;
   justify-content: center;
   margin-top: 8px;
@@ -275,6 +279,7 @@ export default defineComponent({
 }
 
 #demo-waterfall :deep(.style-two-left-container) {
+  display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: center;
@@ -282,6 +287,7 @@ export default defineComponent({
 }
 
 #demo-waterfall :deep(.style-two-image-container) {
+  display: flex;
   flex: 1;
 }
 
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
index 89e0db5e097..44a756cec3f 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-native.ts
@@ -1,11 +1,13 @@
 import {
-  createApp,
+  createSSRApp,
   type HippyApp,
   EventBus,
   setScreenSize,
   BackAndroid,
+  type ScreenSize,
 } from '@hippy/vue-next';
 
+import { createPinia } from 'pinia';
 import App from './app.vue';
 import { createRouter } from './routes';
 import { setGlobalInitProps } from './util';
@@ -20,20 +22,22 @@ global.Hippy.on('unhandledRejection', (reason) => {
 });
 
 // create hippy app instance
-const app: HippyApp = createApp(App, {
+// pay attention: createSSRApp can both used for client side render & server side render, createApp
+// only support client side render, but if you only used in CSR, just use createApp.
+const app: HippyApp = createSSRApp(App, {
   // hippy native module name
   appName: 'Demo',
   iPhone: {
     // config of statusBar
     statusBar: {
       // disable status bar autofill
-      // disabled: true,
+      disabled: true,
 
       // Status bar background color, if not set, it will use 4282431619, as #40b883, Vue default green
       // hippy-vue-css-loader/src/compiler/style/color-parser.js
-      backgroundColor: 4283416717,
+      // backgroundColor: 4283416717,
 
-      // 状态栏背景图，要注意这个会根据容器尺寸拉伸。
+      // status background image, image will auto-scale by screen size
       // background image of status bar, scale with wrapper size
       // backgroundImage: 'https://user-images.githubusercontent.com/12878546/148737148-d0b227cb-69c8-4b21-bf92-739fb0c3f3aa.png',
     },
@@ -45,13 +49,23 @@ const app: HippyApp = createApp(App, {
    * default is true, if set false, it will follow vue-loader compilerOptions whitespace setting
    */
   trimWhitespace: true,
+  // ssr rendered node list, use for hydration
+  ssrNodeList: global.hippySSRNodes,
 });
 // create router
 const router = createRouter();
 app.use(router);
 
+// create store
+const store = createPinia();
+app.use(store);
+// if server side return store，then use server store replace
+if (global.__INITIAL_STATE__) {
+  store.state.value = global.__INITIAL_STATE__;
+}
+
 // Monitor screen size and update size data
-EventBus.$on('onSizeChanged', (newScreenSize) => {
+EventBus.$on('onSizeChanged', (newScreenSize: ScreenSize) => {
   if (newScreenSize.width && newScreenSize.height) {
     setScreenSize({
       width: newScreenSize.width,
@@ -81,16 +95,16 @@ const initCallback = ({ superProps, rootViewId }) => {
   });
 
   // mount first， you can do something before mount
-  app.mount('#root');
+  // app.mount('#root');
 
   /**
    * You can also mount the app after the route is ready, However,
    * it is recommended to mount first, because it can render content on the screen as soon as possible
    */
-  // router.isReady().then(() => {
-  //   // mount app
-  //   app.mount('#root');
-  // });
+  router.isReady().then(() => {
+    // mount app
+    app.mount('#root');
+  });
 };
 
 // start hippy app
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
index b2e30c72aeb..51c0cc65fa4 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main-server.ts
@@ -45,12 +45,12 @@ export async function render(url: string, hippyOptions: HippyAppOptions, context
     context,
   };
   // get ssr render hippy node list
-  const hippyNodeList = await renderToHippyList(app, ssrContext);
+  const hippyNodeList = await renderToHippyList(app as NeedToTyped, ssrContext);
   return {
     list: hippyNodeList,
     // modules
     modules: ssrContext.modules as Set<string>,
     store,
-    uniqueId: getCurrentUniqueId(app),
+    uniqueId: getCurrentUniqueId(app as NeedToTyped),
   };
 }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
index 8a3cf27b2b1..cfe35505e60 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/ssr-node-ops.ts
@@ -44,6 +44,8 @@ interface OperateNodeType {
   newNodeList: SsrNode[];
 }
 
+type NativeNode = [SsrNode, Record<string, SsrNode>];
+
 /**
  * Encapsulate the JSON.parse method and handle the catch block uniformly
  *
@@ -334,6 +336,15 @@ function diffNodeTree(cacheTree: SsrTreeNode, serverTree: SsrTreeNode, chunkNode
   return chunkNodes;
 }
 
+/**
+ * convert ssr node to native node format
+ *
+ * @param nodes
+ */
+function convertToNativeNodes(nodes: SsrNode[]): NativeNode[] {
+  return nodes.map(node => [node, {}]);
+}
+
 /**
  * compare cache tree and server tree, refresh native node tree, because cache node is rendered.
  * so native node id is cached first, but props is server first
@@ -369,7 +380,7 @@ export function insertNativeNodes(
 ): void {
   // create Scene Builder with rootView id
   const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
-  sceneBuilder.create(filterUnUsedNodes(nodes));
+  sceneBuilder.create(convertToNativeNodes(filterUnUsedNodes(nodes)));
   sceneBuilder.build();
 }
 
@@ -385,7 +396,7 @@ export function deleteNativeNodes(
 ): void {
   // create Scene Builder with rootView id
   const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
-  sceneBuilder.delete(filterUnUsedNodes(nodes));
+  sceneBuilder.delete(convertToNativeNodes(filterUnUsedNodes(nodes)));
   sceneBuilder.build();
 }
 
@@ -401,7 +412,7 @@ export function updateNativeNodes(
 ): void {
   // create Scene Builder with rootView id
   const sceneBuilder = new global.Hippy.SceneBuilder(rootViewId);
-  sceneBuilder.update(filterUnUsedNodes(nodes));
+  sceneBuilder.update(convertToNativeNodes(filterUnUsedNodes(nodes)));
   sceneBuilder.build();
 }
 
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
index 1f40cefb093..42fd41029b8 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
@@ -22,6 +22,7 @@ export function ssrEntry(bundleName: string, entryCallback?: CallbackType): void
   // register hippy instance
   regist.call(global.Hippy.register, bundleName, (superProps) => {
     params = superProps;
+    console.log('registered', superProps);
     // execute entry function
     if (entryCallback) {
       entryCallback();
diff --git a/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
index 9417934e201..12ebc590408 100644
--- a/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
+++ b/driver/js/packages/hippy-vue-next-server-renderer/src/renderer.ts
@@ -328,7 +328,7 @@ function createSSRRootNode(rootContainer: string): SsrNode {
     index: 0,
     name: 'View',
     props: {
-      style: { flex: 1 },
+      style: { flex: 1, display: 'flex' },
       attributes: { id: rootContainer, class: '' },
     },
     tagName: 'div',
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
index e0bf14538df..83fb038c155 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
@@ -195,10 +195,10 @@ function polyfillSpecialNodeStyle(
     }
   }
   // compatible v-show
-  if (inlineStyle.display) {
-    delete nativeNode.props.style.display;
-    nativeNode.props.display = inlineStyle.display;
-  }
+  // if (inlineStyle.display) {
+    // delete nativeNode.props.style.display;
+    // nativeNode.props.display = inlineStyle.display;
+  // }
 
   // compatible Input
   if (nativeNode.name === 'TextInput') {
diff --git a/driver/js/packages/hippy-vue-next/src/index.ts b/driver/js/packages/hippy-vue-next/src/index.ts
index f5bc254eedc..e949e083132 100644
--- a/driver/js/packages/hippy-vue-next/src/index.ts
+++ b/driver/js/packages/hippy-vue-next/src/index.ts
@@ -65,7 +65,7 @@ import {
   setHippyCachedInstance,
   setHippyCachedInstanceParams,
 } from './util/instance';
-import { setScreenSize } from './util/screen';
+import { type ScreenSize, setScreenSize } from './util/screen';
 import { convertToHippyElementTree } from './hydration';
 
 /**
@@ -362,6 +362,7 @@ export type {
   MeasurePosition,
   DOMRect,
   AnimationInstance,
+  ScreenSize,
 };
 
 export * from './config';
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
index baa485cab6d..276fd188a83 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/element/hippy-element.ts
@@ -1194,7 +1194,8 @@ export class HippyElement extends HippyNode {
    *
    */
   private fixVShowDirectiveIssue(): void {
-    let display;
+    // use current value if exists
+    let display = this.style.display ?? undefined;
     // watch the modification of this.style.display and update it with the modified value
     // fixme If the user here actively sets the display by means of setStyle,
     // the updateNode may be triggered one more time, here's how to deal with it
diff --git a/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts b/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
index 3549c49d184..3589cd4468f 100644
--- a/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
+++ b/driver/js/packages/hippy-vue-next/src/runtime/node/hippy-node.ts
@@ -358,7 +358,7 @@ export class HippyNode extends HippyEventTarget {
    * @param rawChild - child node to be added
    * @param isHydrate - is hydrate operate or not
    */
-  public appendChild(rawChild: HippyNode, isHydrate: boolean = false): void {
+  public appendChild(rawChild: HippyNode, isHydrate = false): void {
     const child = rawChild;
 
     if (!child) {

From 86fe86b56bc57c35b1585d4a6bee106709ea69db Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Tue, 26 Sep 2023 19:42:09 +0800
Subject: [PATCH 07/10] fix(vue-next): remove unused code

---
 driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts      | 1 -
 .../examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts  | 1 -
 .../src/style-match/css-append.ts                           | 6 ------
 3 files changed, 8 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
index a90464bbd1d..97c844e5e00 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts
@@ -73,7 +73,6 @@ function ssr(): void {
     const pageCacheKey = `${bundleName}_index`;
     // first, use cache nodes render
     const [cacheNodes, backNodes, cacheUniqueId] = await renderNativeNodesByCache(rootViewId, pageCacheKey);
-    console.log('cache', cacheNodes, backNodes, cacheUniqueId);
     // second, send ssr first screen request and use server node list insert/update
     fetch('http://localhost:8080/getSsrFirstScreenData', {
       mode: 'no-cors', // 2.14.0 or above supports other options(not only method/headers/url/body),
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
index 42fd41029b8..1f40cefb093 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/webpack-plugin.ts
@@ -22,7 +22,6 @@ export function ssrEntry(bundleName: string, entryCallback?: CallbackType): void
   // register hippy instance
   regist.call(global.Hippy.register, bundleName, (superProps) => {
     params = superProps;
-    console.log('registered', superProps);
     // execute entry function
     if (entryCallback) {
       entryCallback();
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
index 83fb038c155..6002beaffbd 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
@@ -165,7 +165,6 @@ function polyfillSpecialNodeStyle(
   const nativeNode = node;
   const currentScrollViewContainerIdList = scrollViewContainerIdList;
   const style = node.props.style || {};
-  const inlineStyle = node.props.inlineStyle || {};
   if (node.name === 'View') {
     // View do not scroll, so we should change to ScrollView when props have overflow: scroll
     if (style.overflowY === 'scroll') {
@@ -194,11 +193,6 @@ function polyfillSpecialNodeStyle(
       }
     }
   }
-  // compatible v-show
-  // if (inlineStyle.display) {
-    // delete nativeNode.props.style.display;
-    // nativeNode.props.display = inlineStyle.display;
-  // }
 
   // compatible Input
   if (nativeNode.name === 'TextInput') {

From f0dc9fb767bc8b6e1efdd52b94bc895740a3372e Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Wed, 27 Sep 2023 11:17:29 +0800
Subject: [PATCH 08/10] fix(vue-next): fix ssr demo issue

---
 .../src/components/demo/demo-div.vue          | 47 ++++++-------------
 .../src/components/demo/demo-list.vue         | 11 ++---
 .../src/components/demo/demo-p.vue            | 20 ++++----
 .../src/components/demo/demo-shadow.vue       | 12 ++---
 .../src/components/demo/demo-textarea.vue     |  8 ++--
 .../native-demo/animations/color-change.vue   |  4 +-
 .../native-demo/animations/cubic-bezier.vue   |  6 +--
 .../native-demo/animations/loop.vue           |  2 +-
 .../native-demo/demo-nested-scroll.vue        |  2 +-
 .../components/native-demo/demo-waterfall.vue |  3 +-
 .../hippy-vue-next-ssr-demo/src/env.ts        |  2 +-
 .../src/native-component/swiper.ts            |  2 +-
 12 files changed, 50 insertions(+), 69 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
index 24453b81060..eefcd3953a2 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
@@ -4,7 +4,7 @@
     @scroll="onOuterScroll"
   >
     <div>
-      <div v-if="Native.Platform !== 'ios'">
+      <div v-if="!isIOS">
         <label>水波纹效果: </label>
         <div :style="{ ...imgRectangle, ...imgRectangleExtra }">
           <demo-ripple-div
@@ -84,21 +84,11 @@
       >
         <!-- div 带着 overflow 属性的，只能有一个子节点，否则终端会崩溃 -->
         <div class="display-flex flex-row">
-          <p class="text-block">
-            A
-          </p>
-          <p class="text-block">
-            B
-          </p>
-          <p class="text-block">
-            C
-          </p>
-          <p class="text-block">
-            D
-          </p>
-          <p class="text-block">
-            E
-          </p>
+          <span class="text-block">A</span>
+          <span class="text-block">B</span>
+          <span class="text-block">C</span>
+          <span class="text-block">D</span>
+          <span class="text-block">E</span>
         </div>
       </div>
       <label>垂直滚动:</label>
@@ -107,21 +97,11 @@
         :showsVerticalScrollIndicator="false"
       >
         <div class="display-flex flex-column">
-          <p class="text-block">
-            A
-          </p>
-          <p class="text-block">
-            B
-          </p>
-          <p class="text-block">
-            C
-          </p>
-          <p class="text-block">
-            D
-          </p>
-          <p class="text-block">
-            E
-          </p>
+          <span class="text-block">A</span>
+          <span class="text-block">B</span>
+          <span class="text-block">C</span>
+          <span class="text-block">D</span>
+          <span class="text-block">E</span>
         </div>
       </div>
     </div>
@@ -129,7 +109,7 @@
 </template>
 
 <script lang="ts">
-import { type HippyElement, Native } from '@hippy/vue-next';
+import { type HippyElement } from '@hippy/vue-next';
 import {
   defineComponent,
   onActivated,
@@ -137,6 +117,7 @@ import {
   onMounted,
   ref,
 } from '@vue/runtime-core';
+import { isIOS } from '../../util';
 
 import defaultImage from '../../assets/defaultSource.jpg';
 
@@ -242,7 +223,7 @@ export default defineComponent({
         borderRadius: '12px',
         overflow: 'hidden',
       },
-      Native,
+      isIOS: isIOS(),
       offsetY,
       onScroll,
       onMomentumScrollBegin,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
index 2a18037cf06..249acab15c6 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-list.vue
@@ -78,7 +78,7 @@
       </li>
     </ul>
     <div
-      v-if="Platform === 'android'"
+      v-if="!isIOS"
       :style="{
         position: 'absolute',
         right: 20,
@@ -105,17 +105,16 @@
           alignItems: 'center',
         }"
       >
-        <p :style="{ color: 'white' }">
-          切换方向
-        </p>
+        <span :style="{ color: 'white' }">切换方向</span>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { type ListViewEvent, Native } from '@hippy/vue-next';
+import { type ListViewEvent } from '@hippy/vue-next';
 import { defineComponent, ref, onMounted, type Ref } from '@vue/runtime-core';
+import { isIOS } from '../../util';
 
 const STYLE_LOADING = 100;
 const mockDataArray = [
@@ -269,7 +268,7 @@ export default defineComponent({
       list,
       STYLE_LOADING,
       horizontal,
-      Platform: Native.Platform,
+      isIOS: isIOS(),
       onAppear,
       onDelete,
       onDisappear,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
index 217b2c43e27..0067b7a9e6d 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
@@ -180,9 +180,9 @@
           </button>
         </div>
       </div>
-      <label v-if="Platform === 'android'">break-strategy={{ breakStrategy }}</label>
+      <label v-if="!isIOS">break-strategy={{ breakStrategy }}</label>
       <div
-        v-if="Platform === 'android'"
+        v-if="!isIOS"
         class="p-demo-content"
       >
         <p
@@ -252,11 +252,11 @@
           <span style="font-size: 16px; vertical-align: baseline;">字</span>
           <span style="font-size: 16px; vertical-align: bottom;">字</span>
         </p>
-        <p v-if="Platform === 'android'">
+        <p v-if="!isIOS">
           legacy mode:
         </p>
         <p
-          v-if="Platform === 'android'"
+          v-if="!isIOS"
           style="lineHeight: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
@@ -314,11 +314,11 @@
           >
           <span style="vertical-align: middle; background-color: #99f;">text</span>
         </p>
-        <p v-if="Platform === 'android'">
+        <p v-if="!isIOS">
           legacy mode:
         </p>
         <p
-          v-if="Platform === 'android'"
+          v-if="!isIOS"
           style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
@@ -355,11 +355,11 @@
             :src="img2"
           >
         </p>
-        <p v-if="Platform === 'android'">
+        <p v-if="!isIOS">
           legacy mode:
         </p>
         <p
-          v-if="Platform === 'android'"
+          v-if="!isIOS"
           style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;"
         >
           <img
@@ -386,7 +386,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from '@vue/runtime-core';
-import { Native } from '@hippy/vue-next';
+import { isIOS } from '../../util';
 
 export default defineComponent({
   setup() {
@@ -467,7 +467,7 @@ export default defineComponent({
       textMode,
       textShadow,
       textShadowIndex,
-      Platform: Native.Platform,
+      isIOS: isIOS(),
       breakStrategy,
       onTouchTextEnd,
       onTouchTextMove,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
index 8bb1f8d2125..be776d5e974 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-shadow.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="shadow-demo">
     <div
-      v-if="Platform === 'android'"
+      v-if="!isIOS"
       class="no-offset-shadow-demo-cube-android"
     >
       <div class="no-offset-shadow-demo-content-android">
@@ -9,7 +9,7 @@
       </div>
     </div>
     <div
-      v-if="Platform === 'ios'"
+      v-if="isIOS"
       class="no-offset-shadow-demo-cube-ios"
     >
       <div class="no-offset-shadow-demo-content-ios">
@@ -17,7 +17,7 @@
       </div>
     </div>
     <div
-      v-if="Platform === 'android'"
+      v-if="!isIOS"
       class="offset-shadow-demo-cube-android"
     >
       <div class="offset-shadow-demo-content-android">
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      v-if="Platform === 'ios'"
+      v-if="isIOS"
       class="offset-shadow-demo-cube-ios"
     >
       <div class="offset-shadow-demo-content-ios">
@@ -35,13 +35,13 @@
   </div>
 </template>
 <script lang="ts">
-import { Native } from '@hippy/vue-next';
 import { defineComponent } from '@vue/runtime-core';
+import { isIOS } from '../../util';
 
 export default defineComponent({
   setup() {
     return {
-      Platform: Native.Platform,
+      isIOS: isIOS(),
     };
   },
 });
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
index dcab6818797..df1e94200b0 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-textarea.vue
@@ -15,8 +15,8 @@
         输入的文本为：{{ content }}
       </p>
     </div>
-    <label v-if="Platform === 'android'">break-strategy={{ breakStrategy }}</label>
-    <div v-if="Platform === 'android'">
+    <label v-if="!isIOS">break-strategy={{ breakStrategy }}</label>
+    <div v-if="!isIOS">
       <textarea
         class="textarea"
         :defaultValue="longText"
@@ -47,8 +47,8 @@
 </template>
 
 <script lang="ts">
-import { Native } from '@hippy/vue-next';
 import { defineComponent, ref } from '@vue/runtime-core';
+import { isIOS } from '../../util';
 
 export default defineComponent({
   setup() {
@@ -71,7 +71,7 @@ export default defineComponent({
     return {
       content,
       breakStrategy,
-      Platform: Native.Platform,
+      isIOS: isIOS(),
       longText: 'The 58-letter name Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch is the name of a town on Anglesey, an island of Wales.',
       contentSizeChange,
       changeBreakStrategy,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
index ea405d9116d..5b46726ffd7 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/color-change.vue
@@ -49,7 +49,7 @@ export default defineComponent({
   },
   setup() {
     const animationView: Ref<null | AnimationInstance> = ref(null);
-    const colorActions: Ref = ref('');
+    const colorActions: Ref = ref({});
 
     if (!IS_SSR_MODE) {
       colorActions.value = backgroundColorAnimation;
@@ -68,7 +68,7 @@ export default defineComponent({
 
     onMounted(async () => {
       if (IS_SSR_MODE) {
-        colorActions.value = '';
+        colorActions.value = {};
         await nextTick();
         colorActions.value = backgroundColorAnimation;
       }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
index 83e91dfe0d0..c3b938d4551 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/cubic-bezier.vue
@@ -45,7 +45,7 @@ export default defineComponent({
   },
   setup() {
     const animationView: Ref<null | AnimationInstance> = ref(null);
-    const loopActions: Ref = ref('');
+    const loopActions: Ref = ref({});
 
     if (!IS_SSR_MODE) {
       loopActions.value = horizonAnimation;
@@ -65,7 +65,7 @@ export default defineComponent({
     onMounted(async () => {
       if (IS_SSR_MODE) {
         // ssr mode should update action to start animation
-        loopActions.value = '';
+        loopActions.value = {};
         await nextTick();
         loopActions.value = horizonAnimation;
       }
@@ -73,7 +73,7 @@ export default defineComponent({
 
     return {
       animationView,
-      loopActions: horizonAnimation,
+      loopActions,
       actionsDidUpdate,
     };
   },
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
index f5c21ea9dc8..3ca18801b94 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/animations/loop.vue
@@ -100,7 +100,7 @@ export default defineComponent({
     onMounted(async () => {
       if (IS_SSR_MODE) {
         // ssr mode should update action to start animation
-        loopActions.value = '';
+        loopActions.value = {};
         await nextTick();
         setActions(props.direction);
       }
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
index b3438908752..16c52bf309c 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-nested-scroll.vue
@@ -72,7 +72,7 @@ export default defineComponent({
     onMounted(async () => {
       if (demoRef.value) {
         // get wrap position
-        const position = await Native.getBoundingClientRect(demoRef.value);
+        const position = await Native.measureInAppWindow(demoRef.value);
         if (position.height) {
           // wrap height - banner height - tab height
           layoutHeight.value = position.height - 150 - 30;
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
index 540dc454764..ad65979e162 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/native-demo/demo-waterfall.vue
@@ -19,7 +19,7 @@
         :inter-item-spacing="interItemSpacing"
         :number-of-columns="numberOfColumns"
         :preload-item-number="0"
-        :style="{flex: 1}"
+        :style="{display: 'flex', flex: 1}"
         @endReached="onEndReached"
         @scroll="onScroll"
       >
@@ -121,6 +121,7 @@ export default defineComponent({
     const header = ref(null);
     const itemWidth = computed(() => {
       const screenWidth = getScreenSize().width;
+      console.log('screenWidth', getScreenSize());
       const width = screenWidth - contentInset.left - contentInset.right;
       return (
         (width - (numberOfColumns - 1) * columnSpacing) / numberOfColumns
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts b/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
index 9cd4cbe943b..975ef1615bf 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/env.ts
@@ -1,7 +1,7 @@
 /**
  * is running in server side
  */
-export const IS_SSR = !!global.process?.env?.HIPPY_SSR;
+export const IS_SSR = process.env.HIPPY_SSR;
 
 /**
  * is ssr mode in client
diff --git a/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts b/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
index 5ef03ac046d..ffc2e1e119b 100644
--- a/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
+++ b/driver/js/packages/hippy-vue-next/src/native-component/swiper.ts
@@ -128,7 +128,7 @@ export function registerSwiper(vueApp: App): void {
         {
           ...on,
           ref: 'swiper',
-          initialPage: this.$initialSlide,
+          initialPage: this.$data.$initialSlide,
         },
         this.$slots.default ? this.$slots.default() : null,
       );

From b782ba2d54b1760d9019b17e71da02f679201742 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Sat, 7 Oct 2023 15:22:31 +0800
Subject: [PATCH 09/10] fix(vue-next): fix div demo issue & native background
 android issue

---
 .../src/components/demo/demo-div.vue                  |  1 -
 .../src/components/demo/demo-p.vue                    | 10 +++-------
 .../src/components/demo/demo-set-native-props.vue     | 11 ++++-------
 .../src/style-match/css-append.ts                     |  5 +++++
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
index eefcd3953a2..f0a3aa4ea1e 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-div.vue
@@ -82,7 +82,6 @@
         @scrollBeginDrag="onScrollBeginDrag"
         @scrollEndDrag="onScrollEndDrag"
       >
-        <!-- div 带着 overflow 属性的，只能有一个子节点，否则终端会崩溃 -->
         <div class="display-flex flex-row">
           <span class="text-block">A</span>
           <span class="text-block">B</span>
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
index 0067b7a9e6d..42259bf97de 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-p.vue
@@ -299,7 +299,7 @@
       </div>
       <label>tint-color & background-color</label>
       <div class="p-demo-content">
-        <p style="background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
+        <p style="background-color: #40b883; padding-horizontal: 10px; padding-vertical: 5px;">
           <img
             style="width: 24px; height: 24px; vertical-align: middle; tint-color: orange;"
             :src="img2"
@@ -337,7 +337,7 @@
       </div>
       <label>margin</label>
       <div class="p-demo-content">
-        <p style="line-height: 50; background-color: #40b883; padding-horizontal: 10; padding-vertical: 5;">
+        <p style="line-height: 50px; background-color: #40b883; padding-horizontal: 10px; padding-vertical: 5px;">
           <img
             style="width: 24px; height: 24px; vertical-align: top; background-color: #ccc; margin: 5px;"
             :src="img2"
@@ -456,11 +456,7 @@ export default defineComponent({
 
     return {
       img1: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3dmhyAAAAEXRSTlMA9QlZEMPc2Mmmj2VkLEJ4Rsx+pEgAAAChSURBVCjPjVLtEsMgCDOAdbbaNu//sttVPes+zvGD8wgQCLp/TORbUGMAQtQ3UBeSAMlF7/GV9Cmb5eTJ9R7H1t4bOqLE3rN2UCvvwpLfarhILfDjJL6WRKaXfzxc84nxAgLzCGSGiwKwsZUB8hPorZwUV1s1cnGKw+yAOrnI+7hatNIybl9Q3OkBfzopCw6SmDVJJiJ+yD451OS0/TNM7QnuAAbvCG0TSAAAAABJRU5ErkJggg==',
-      img2: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAA
-        AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3dmhyAAAAEnRSTlMA/QpX7WQU2m27pi3Ej9KEQXaD5HhjAAAAqklEQVQoz41
-        SWxLDIAh0RcFXTHL/yzZSO01LMpP9WJEVUNA9gfdXTioCSKE/kQQTQmf/ArRYva+xAcuPP37seFII2L7FN4BmXdHzlEPIpDHiZ0A7eIViPc
-        w2QwqipkvMSdNEFBUE1bmMNOyE7FyFaIkAP4jHhhG80lvgkzBODTKpwhRMcexuR7fXzcp08UDq6GRbootp4oRtO3NNpd4NKtnR9hB6oaefw
-        eIFQU0EfnGDRoQAAAAASUVORK5CYII=`,
+      img2: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3dmhyAAAAEnRSTlMA/QpX7WQU2m27pi3Ej9KEQXaD5HhjAAAAqklEQVQoz41SWxLDIAh0RcFXTHL/yzZSO01LMpP9WJEVUNA9gfdXTioCSKE/kQQTQmf/ArRYva+xAcuPP37seFII2L7FN4BmXdHzlEPIpDHiZ0A7eIViPcw2QwqipkvMSdNEFBUE1bmMNOyE7FyFaIkAP4jHhhG80lvgkzBODTKpwhRMcexuR7fXzcp08UDq6GRbootp4oRtO3NNpd4NKtnR9hB6oaefweIFQU0EfnGDRoQAAAAASUVORK5CYII=',
       img3: 'https://user-images.githubusercontent.com/12878546/148736255-7193f89e-9caf-49c0-86b0-548209506bd6.gif',
       longText: 'The 58-letter name Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch is the name of a town on Anglesey, an island of Wales.',
       labelTouchStatus,
diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
index 9a41c0dfba2..6c369622236 100644
--- a/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
+++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/components/demo/demo-set-native-props.vue
@@ -29,18 +29,15 @@
 </template>
 
 <script lang="ts">
-import { type HippyElement, Native } from '@hippy/vue-next';
-import { defineComponent, ref, onMounted } from '@vue/runtime-core';
+import { type HippyElement } from '@hippy/vue-next';
+import { defineComponent, ref } from '@vue/runtime-core';
+import { getScreenSize } from '../../util';
 
 export default defineComponent({
   setup() {
     const demoOnePointRef = ref(null);
     const demon2Left = ref(0);
-    const screenWidth = ref(0);
-
-    onMounted(() => {
-      screenWidth.value = Native.Dimensions.screen.width;
-    });
+    const screenWidth = ref(getScreenSize().width);
 
     const onTouchDown1 = (evt) => {
       const position = evt.touches[0].clientX - 40;
diff --git a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
index 6002beaffbd..d6c260a703b 100644
--- a/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
+++ b/driver/js/packages/hippy-vue-next-style-parser/src/style-match/css-append.ts
@@ -176,6 +176,11 @@ function polyfillSpecialNodeStyle(
       // ssr default set to row, updated at client side
       style.flexDirection = 'row';
     }
+    // compatible nativeBackgroundAndroid style props
+    const { nativeBackgroundAndroid } = nativeNode.props;
+    if (nativeBackgroundAndroid && typeof nativeBackgroundAndroid.color !== 'undefined') {
+      nativeNode.props.nativeBackgroundAndroid.color = translateColor(nativeBackgroundAndroid.color);
+    }
   }
   // Change the ScrollView child collapsable attribute
   if (nativeNode.name === 'ScrollView') {

From d6615a481e8e02c594e43843272625a4065a4cf9 Mon Sep 17 00:00:00 2001
From: birdguo <birdguo@tencent.com>
Date: Sat, 7 Oct 2023 15:38:18 +0800
Subject: [PATCH 10/10] docs(vue-next): add new vue-next ssr docs

---
 docs/api/hippy-vue/vue3.md                    | 108 +++++++++++++++++-
 .../assets/img/hippy-vue-next-ssr-arch-cn.png | Bin 0 -> 125756 bytes
 2 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 docs/assets/img/hippy-vue-next-ssr-arch-cn.png

diff --git a/docs/api/hippy-vue/vue3.md b/docs/api/hippy-vue/vue3.md
index cc199bb8215..f16edd989bd 100644
--- a/docs/api/hippy-vue/vue3.md
+++ b/docs/api/hippy-vue/vue3.md
@@ -154,6 +154,106 @@ const router: Router = createRouter({
 });
 ```
 
+# 服务端渲染
+
+@hippy/vue-next 现已支持服务端渲染，具体代码可以查看[示例项目](https://github.com/Tencent/Hippy/tree/main/examples/hippy-vue-next-ssr-demo)中的 SSR
+部分，关于 Vue SSR 的实现及原理，可以参考[官方文档](https://cn.vuejs.org/guide/scaling-up/ssr.html)。
+
+## 如何使用SSR
+
+请参考[示例项目](https://github.com/Tencent/Hippy/tree/main/examples/hippy-vue-next-ssr-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/main/examples/hippy-vue-next-ssr-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 有一些区别，以及还有一些问题还没有解决，这里做些说明：
@@ -266,7 +366,7 @@ const router: Router = createRouter({
       }
     ```
 
-    更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-next-demo/src/extend.ts).
+    更多信息可以参考 demo 里的 [extend.ts](https://github.com/Tencent/Hippy/blob/main/examples/hippy-vue-next-demo/src/extend.ts).
   
 - whitespace 处理
 
@@ -305,6 +405,10 @@ const router: Router = createRouter({
 
   `<dialog>` 组件的第一个子元素不能设置  `{ position: absolute }` 样式，如果想将 `<dialog>` 内容铺满全屏，可以给第一个子元素设置 `{ flex: 1 }` 样式或者显式设置 width 和 height 数值。这与 Hippy3.0 的逻辑保持一致。
 
+- 书写 SSR 友好的代码 
+
+  因 SSR 的渲染方式和生命周期等与客户端渲染方式有一些差异，因此需要在代码编写过程中注意，这里可以参考[Vue官方的SSR指引](https://cn.vuejs.org/guide/scaling-up/ssr.html#writing-ssr-friendly-code)
+
 # 示例
 
-更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/master/examples/hippy-vue-next-demo).
+更多使用请参考 [示例项目](https://github.com/Tencent/Hippy/tree/main/examples/hippy-vue-next-demo).
diff --git a/docs/assets/img/hippy-vue-next-ssr-arch-cn.png b/docs/assets/img/hippy-vue-next-ssr-arch-cn.png
new file mode 100644
index 0000000000000000000000000000000000000000..df95922560ea28ca27da9e9d024a30964e48eed4
GIT binary patch
literal 125756
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
E0#*XwZ~y=R

literal 0
HcmV?d00001