feat(web): support web renderer for 3.0 (#4043)

* feat(web-renderer): init web-renderer

* feat(web-renderer): node operate & node event logic commit

* feat(web-renderer): compatible 3.x ui module change

* feat(web-renderer): compatible 3.x event system change

* feat(web-renderer): compatible 3.x event system change

* feat(web-renderer): compatible 3.x image & input component change

* feat(web-renderer): compatible 3.x swiper component change

* feat(web-renderer): compatible 3.x event & component change

* feat(web-renderer): remove unused type

* feat(web-renderer): fix getBoundingClientRect callback issue

* feat(web-renderer): support dynamicLoad & global variable

* feat(web-renderer): simple fix list-view scroll outside range issue

* feat(web-renderer): fix nested scroll demo issue

* feat(web-renderer): fix text-input default value issue

* feat(web-renderer): fix build type mismatch issue

* feat(web-renderer): fix react demo misspelling name

* feat(web-renderer): add animation support

* feat(web-render): fix e2e test issue & update docs

* feat(web-render): remove unused code

* fix(web-renderer): fix codeReview issue

* fix(vue-next): fix vue patchProp params type issue

* feat(web): fix dymamic load for web render

---------

Co-authored-by: birdguo <[email protected]>
Co-authored-by: birdguo <[email protected]>

driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js

@@ -107,6 +107,16 @@ module.exports = {
         console.warn('* Using the @hippy/react defined in package.json');
       }
 
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },

driver/js/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx

@@ -38,6 +38,7 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
     color: '#4c9afa',
+    backgroundColor: '#fff',
   },
   itemEven: {
     height: 40,

driver/js/examples/hippy-react-demo/src/routes.js

@@ -18,7 +18,7 @@ export const Type = {
 export default [
   {
     path: '/Components',
-    name: 'Componemts',
+    name: 'Components',
     meta: {
       type: Type.TITLE,
       mapType: Type.COMPONENT,

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js

@@ -176,6 +176,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-native-components defined in package.json');
       }
 
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },

driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js

@@ -169,6 +169,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-native-components defined in package.json');
       }
 
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },

driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue

@@ -102,6 +102,7 @@ export default {
     onDropped(evt) {
       // 更细当前页码
       this.currentSlideNum = evt.currentSlide;
+      this.currentSlide = evt.currentSlide;
     },
     onStateChanged(evt) {
       // 更新当前滚屏状态

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

@@ -159,6 +159,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-next defined in package.json');
       }
 
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },

driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js

@@ -162,6 +162,16 @@ module.exports = {
         console.warn('* Using the @hippy/vue-next defined in package.json');
       }
 
+      // If @hippy/web-renderer was built exist in packages directory then make an alias
+      // Remove the section if you don't use it
+      const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist');
+      if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) {
+        console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`);
+        aliases['@hippy/web-renderer'] = webRendererPath;
+      } else {
+        console.warn('* Using the @hippy/web-renderer defined in package.json');
+      }
+
       return aliases;
     })(),
   },

driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue

@@ -79,7 +79,7 @@ export default defineComponent({
        */
     const scrollToNextPage = () => {
       console.log('scroll next', currentSlide.value, currentSlideNum.value);
-      if (currentSlide.value < max) {
+      if (currentSlide.value < max - 1) {
         currentSlide.value = currentSlideNum.value + 1;
       } else {
         currentSlide.value = 0;
@@ -120,6 +120,7 @@ export default defineComponent({
       console.log('onDropped', evt);
       // update current page number
       currentSlideNum.value = evt.currentSlide;
+      currentSlide.value = evt.currentSlide;
     };
     const onStateChanged = (evt) => {
       console.log('onStateChanged', evt);

driver/js/packages/global.d.ts

@@ -263,16 +263,19 @@ declare namespace HippyTypes {
     [key: string]: null | string | number | number[] | AnimationStyle | AnimationStyle[];
   }
 
+  export interface NativeNodeProps {
+    [key: string]: NeedToTyped;
+    attributes?: Attributes;
+  }
+
   export interface NativeNode {
     id: number;
     pId: number;
+    index?: number;
     name?: string;
     style?: NativeStyle;
     tagName?: string;
-    props?: {
-      [key: string]: NeedToTyped;
-      attributes?: Attributes;
-    }
+    props?: NativeNodeProps;
   }
 
   export enum RelativeToRef {

driver/js/packages/hippy-react-web/src/global.ts

@@ -39,5 +39,5 @@ global.Hippy = {
 };
 global.getTurboModule = () => {
   warn('getTurboModule is unsupported');
-  return {};
+  return {} as any;
 };

driver/js/packages/hippy-vue-next/src/patch-prop.ts

@@ -21,7 +21,7 @@
 /**
  * Implement the patch props method required for Vue3 VNode mount
  */
-import type { ComponentInternalInstance, VNode, ElementNamespace } from '@vue/runtime-core';
+import type { ComponentInternalInstance, ElementNamespace } from '@vue/runtime-core';
 import { isOn } from '@vue/shared';
 import type { NeedToTyped } from './types';
 
@@ -35,8 +35,8 @@ export function patchProp(
   key: string,
   prevValue: NeedToTyped,
   nextValue: NeedToTyped,
-  namespace: ElementNamespace,
-  parentComponent: ComponentInternalInstance | null,
+  namespace?: ElementNamespace,
+  parentComponent?: ComponentInternalInstance | null,
 ): void {
   // It should be noted that the values contained in prop here will have strings, numbers, arrays, objects, etc.
   switch (key) {

driver/js/packages/hippy-web-renderer/CHANGELOG.md

@@ -0,0 +1,17 @@
+## 0.0.1
+
+### Added
+* initial commit, based on  burtonsun's working.
+
+## 0.0.4
+### Added
+* support gradient text color
+* support animation bézier curve
+
+### Fix
+* refactor UIManagerModule, change style diff logic, improve performance
+* fix stack context error
+* fix tint color error
+* fix line height error
+* fix text numberOfLines no use error
+

driver/js/packages/hippy-web-renderer/README.md

@@ -0,0 +1,53 @@
+# Hippy Web Renderer
+
+> make results based on the `hippy-react` and `hippy-vue` frameworks run to the browser
+
+![Hippy Group](https://img.shields.io/badge/group-Hippy-blue.svg)
+
+## Introduction
+`@hippy/web-renderer`is equivalent to the native renderer，make results based on the `hippy-react` and `hippy-vue` frameworks run to the browser。
+
+Keeps the same interface as `hippy-react` and `hippy-vue`
+
+The project is working in progress
+
+## Feature
+* Use the same scheme as android and ios，use results based on the `hippy-react` and `hippy-vue` to render。Maintain a high degree of consistency with the native side in terms of mechanism and results
+* Support `react` and `vue`。
+* Results based on the `hippy-react` and `hippy-vue` frameworks,run directly on web、android and ios。
+
+## How to use
+
+```javascript
+import { Hippy } from '@hippy/react';
+import App from './app';
+
+new Hippy({
+  appName: 'Demo',
+  entryPage: App,
+  silent: false,
+}).start();
+
+```
+
+## Limited
+
+Due to differences in browser and native implementations,some feature not support (Javascript can't hack),at the moment developer need self-dispose。
+
+example: change statue bar color。
+
+Hippy is only a UI-Framework, you need to handle such as: url information parsing, and parameters passed to the application。
+Supplement front-end components or modules that are equivalent to developer-defined terminal components or modules.
+
+Due to `hippy-react` and `hippy-vue` have more coupling with `global OS parameters` in environment information,so the `OS` must be
+`android` or `ios`.Web-Renderer set `OS` value `android`,and all callBack and event is same as android platform
+
+## Wait to do
+
+    1. WaterfallView Component support
+    2. AnimationSet Component support
+    3. Platform-Localization Component support
+    4. List.rowShouldSticky\bounces\overScrollEnabled\showScrollIndicator\rowShouldSticky attribute support
+    5. ScrollView.scrollIndicatorInsets\showScrollIndicator\showsHorizontalScrollIndicator\showsVerticalScrollIndicator attribute support
+    6. Image.capInsets attribute support
+

driver/js/packages/hippy-web-renderer/README.zh_CN.md

@@ -0,0 +1,51 @@
+# Hippy Web Renderer
+
+> 将基于 `hippy-react` 和 `hippy-vue`框架开发完成的结果运行到浏览器上
+
+![Hippy Group](https://img.shields.io/badge/group-Hippy-blue.svg)
+
+## 介绍
+`@hippy/web-renderer`是与终端渲染层等价的方案，用以将 `hippy-react` 和 `hippy-vue`的构建产物运行到浏览器上。
+跟 `hippy-react` 和 `hippy-vue`保持了一样到接口。
+该项目目前还在持续的建设中
+
+## 特性
+* 使用更android和ios一样的方案，对`hippy-react` 和 `hippy-vue`的产物进行解析并渲染成符合预期的效果。从机制和结果上与native侧保持高度一致性
+* 可以同时支持前端的react和vue框架，甚至是未来的其它前端ui框架。
+* 使用与android和ios一样的构建产物，无需为web场景单独构建产物。在一些场景下甚至可以替代android或ios的渲染方式，如：高频ui交互的场景。
+
+## 使用方法
+
+```javascript
+import { Hippy } from '@hippy/react';
+import App from './app';
+
+new Hippy({
+  appName: 'Demo',
+  entryPage: App,
+  silent: false,
+}).start();
+
+```
+
+## 限制
+
+因为浏览器和终端的实现有所不同，部分特性无法实现（Javascript 也无法 hack），这就需要开发者进行额外的适配或者在web场景下丢弃某些特性。
+
+如：状态栏的样式颜色修改，锁定屏幕方向以及一些android或ios系统独有的特性如：ios的list子节点滑动删除
+
+hippy的方案是一个ui框架，所以在web场景下需要自己处理如：url信息的解析，参数传递给应用。补充与开发者自定义的终端组件或模块等价的前端组件或模块。
+
+因为 `hippy-react` 和 `hippy-vue`有较多的与环境信息中的OS参数耦合的，必须要是android或者是ios。所以Web-Renderer为了让这两个框架能够统一的运行下去，
+将环境信息中的OS参数设置成了android,并且所有的参数、事件分发的形式都是按照android的分发标准进行的。
+
+## 待办事宜
+
+    1. WaterfallView组件补充
+    2. AnimationSet模块的补充
+    3. Platform-Localization模块的补充
+    4. Dynamic-load能力的补充
+    5. List.rowShouldSticky\bounces\overScrollEnabled\showScrollIndicator\rowShouldSticky属性补充
+    6. ScrollView.scrollIndicatorInsets\showScrollIndicator\showsHorizontalScrollIndicator\showsVerticalScrollIndicator属性补充
+    7. Image.capInsets属性补充
+

driver/js/packages/hippy-web-renderer/e2e/.eslintrc.js

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+module.exports = {
+  globals: {
+    mocha: true,
+    it: true,
+    describe: true,
+    chai: true,
+    expect: true,
+    beforeEach: true,
+    globalThis: true,
+    snapshot: true,
+    e2e: true,
+  },
+};

driver/js/packages/hippy-web-renderer/e2e/.gitignore

@@ -0,0 +1,3 @@
+./react/src/spec/*/*.js
+./react/src/spec/*.js
+index.js

driver/js/packages/hippy-web-renderer/e2e/react/.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?

driver/js/packages/hippy-web-renderer/e2e/react/.npmrc

@@ -0,0 +1 @@
+package-lock=false