Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/support webrenderer for 3.0 #3472

Closed
wants to merge 21 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f0a3970
feat(web-renderer): init web-renderer
gguoyu Jul 4, 2023
c52d724
feat(web-renderer): node operate & node event logic commit
gguoyu Jul 7, 2023
68c122d
feat(web-renderer): compatible 3.x ui module change
gguoyu Jul 7, 2023
7cf49df
feat(web-renderer): compatible 3.x event system change
gguoyu Jul 10, 2023
8e22ac9
feat(web-renderer): compatible 3.x event system change
gguoyu Jul 10, 2023
3b868a1
feat(web-renderer): compatible 3.x image & input component change
gguoyu Jul 11, 2023
088d05b
feat(web-renderer): compatible 3.x swiper component change
gguoyu Jul 11, 2023
64810a9
feat(web-renderer): compatible 3.x event & component change
gguoyu Jul 12, 2023
f944211
feat(web-renderer): remove unused type
gguoyu Jul 12, 2023
8355f69
feat(web-renderer): fix getBoundingClientRect callback issue
gguoyu Jul 12, 2023
bb38f27
feat(web-renderer): support dynamicLoad & global variable
gguoyu Jul 13, 2023
cd82947
feat(web-renderer): simple fix list-view scroll outside range issue
gguoyu Jul 13, 2023
a9f9e26
feat(web-renderer): fix nested scroll demo issue
gguoyu Jul 14, 2023
be170a4
feat(web-renderer): fix text-input default value issue
gguoyu Jul 14, 2023
9151c03
feat(web-renderer): fix build type mismatch issue
gguoyu Jul 14, 2023
7b48a68
feat(web-renderer): fix react demo misspelling name
gguoyu Jul 14, 2023
dd69b5c
feat(web-renderer): add animation support
gguoyu Jul 27, 2023
d57f68c
Merge branch 'Tencent:main' into feature/support-webrenderer-for-3.0
gguoyu Aug 30, 2023
2737544
feat(web-render): fix e2e test issue & update docs
gguoyu Aug 30, 2023
9237ee0
feat(web-render): remove unused code
gguoyu Aug 30, 2023
696f203
fix(web-renderer): fix codeReview issue
gguoyu Sep 22, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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;
})(),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const styles = StyleSheet.create({
flex: 1,
textAlign: 'center',
color: '#4c9afa',
backgroundColor: '#fff',
},
itemEven: {
height: 40,
Expand Down
2 changes: 1 addition & 1 deletion driver/js/examples/hippy-react-demo/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const Type = {
export default [
{
path: '/Components',
name: 'Componemts',
name: 'Components',
meta: {
type: Type.TITLE,
mapType: Type.COMPONENT,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
})(),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
})(),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export default {
onDropped(evt) {
// 更细当前页码
this.currentSlideNum = evt.currentSlide;
this.currentSlide = evt.currentSlide;
},
onStateChanged(evt) {
// 更新当前滚屏状态
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
})(),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,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;
})(),
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
11 changes: 7 additions & 4 deletions driver/js/packages/global.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion driver/js/packages/hippy-react-web/src/global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,5 @@ global.Hippy = {
};
global.getTurboModule = () => {
warn('getTurboModule is unsupported');
return {};
return {} as any;
};
17 changes: 17 additions & 0 deletions driver/js/packages/hippy-web-renderer/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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

53 changes: 53 additions & 0 deletions driver/js/packages/hippy-web-renderer/README.md
Original file line number Diff line number Diff line change
@@ -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

51 changes: 51 additions & 0 deletions driver/js/packages/hippy-web-renderer/README.zh_CN.md
Original file line number Diff line number Diff line change
@@ -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属性补充

32 changes: 32 additions & 0 deletions driver/js/packages/hippy-web-renderer/e2e/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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,
},
};
3 changes: 3 additions & 0 deletions driver/js/packages/hippy-web-renderer/e2e/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
./react/src/spec/*/*.js
./react/src/spec/*.js
index.js
21 changes: 21 additions & 0 deletions driver/js/packages/hippy-web-renderer/e2e/react/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
1 change: 1 addition & 0 deletions driver/js/packages/hippy-web-renderer/e2e/react/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
Loading
Loading