diff --git a/packages/remax/src/Container.ts b/packages/remax/src/Container.ts index c3ab81c63e..ff6652a6d5 100644 --- a/packages/remax/src/Container.ts +++ b/packages/remax/src/Container.ts @@ -3,7 +3,7 @@ import { generate } from './instanceId'; import { generate as generateActionId } from './actionId'; import { FiberRoot } from 'react-reconciler'; import Platform from './Platform'; -import propsAlias from './propsAlias'; +import propsAlias, { isHostComponent } from './propsAlias'; function stringPath(path: Path) { return path.join('.'); @@ -12,7 +12,7 @@ function stringPath(path: Path) { function transformRawNode(item: RawNode): RawNode { return { ...item, - props: propsAlias(item.props), + props: propsAlias(item.props, !isHostComponent(item.type)), children: item.children ? item.children.map(transformRawNode) : item.children, diff --git a/packages/remax/src/VNode.ts b/packages/remax/src/VNode.ts index 9ca84aa0a2..1e1d96bc52 100644 --- a/packages/remax/src/VNode.ts +++ b/packages/remax/src/VNode.ts @@ -3,7 +3,7 @@ import Container from './Container'; export interface RawNode { id?: number; - type: string | symbol; + type: string; props?: any; children?: RawNode[]; text?: string; @@ -16,7 +16,7 @@ export default class VNode { container: Container; children: VNode[]; mounted = false; - type: string | symbol; + type: string; props?: any; parent: VNode | null = null; text?: string; @@ -28,7 +28,7 @@ export default class VNode { container, }: { id: number; - type: string | symbol; + type: string; props?: any; container: any; }) { diff --git a/packages/remax/src/__tests__/propsAlias.test.ts b/packages/remax/src/__tests__/propsAlias.test.ts index 88bb747ea6..f1e24afc9d 100644 --- a/packages/remax/src/__tests__/propsAlias.test.ts +++ b/packages/remax/src/__tests__/propsAlias.test.ts @@ -1,4 +1,5 @@ -import propsAlias, { getAlias } from '../propsAlias'; +import propsAlias, { getAlias, isHostComponent } from '../propsAlias'; +import { TYPE_TEXT } from '../constants'; describe('propsAlias', () => { it('transform className prop correctly', () => { @@ -32,4 +33,34 @@ describe('propsAlias', () => { }) ).toMatchSnapshot(); }); + + describe('check host components', () => { + afterEach(() => { + process.env['REMAX_PLATFORM'] = undefined; + }); + + it('wechat', () => { + process.env['REMAX_PLATFORM'] = 'wechat'; + require('../adapters/wechat/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + + it('alipay', () => { + process.env['REMAX_PLATFORM'] = 'alipay'; + require('../adapters/alipay/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + + it('toutiao', () => { + process.env['REMAX_PLATFORM'] = 'toutiao'; + require('../adapters/toutiao/components/Button'); + expect(isHostComponent(TYPE_TEXT)).toBeTruthy(); + expect(isHostComponent('button')).toBeTruthy(); + expect(isHostComponent('foo')).toBeFalsy(); + }); + }); }); diff --git a/packages/remax/src/adapters/alipay/components/factory.ts b/packages/remax/src/adapters/alipay/components/factory.ts index 0b8995790a..5a859455bb 100644 --- a/packages/remax/src/adapters/alipay/components/factory.ts +++ b/packages/remax/src/adapters/alipay/components/factory.ts @@ -1,6 +1,13 @@ import React, { forwardRef } from 'react'; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + return hostComponent.has(name); +} + export default function factory

(component: string) { + hostComponent.add(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/adapters/toutiao/components/factory.ts b/packages/remax/src/adapters/toutiao/components/factory.ts index 85aee38e35..b162db2343 100644 --- a/packages/remax/src/adapters/toutiao/components/factory.ts +++ b/packages/remax/src/adapters/toutiao/components/factory.ts @@ -6,7 +6,14 @@ type defaultProps = { style?: React.CSSProperties; }; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + return hostComponent.has(name); +} + export default function factory

(component: string) { + hostComponent.add(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/adapters/wechat/components/factory.ts b/packages/remax/src/adapters/wechat/components/factory.ts index 0b8995790a..cf7354b127 100644 --- a/packages/remax/src/adapters/wechat/components/factory.ts +++ b/packages/remax/src/adapters/wechat/components/factory.ts @@ -1,6 +1,14 @@ import React, { forwardRef } from 'react'; +const hostComponent = new Set(); + +export function isHostComponent(name: string) { + console.log(name, hostComponent.size); + return hostComponent.has(name); +} + export default function factory

(component: string) { + hostComponent.add(component); const Component: React.FC

= (props, ref: any) => { const { children = [] } = props; return React.createElement(component, { ...props, ref }, children); diff --git a/packages/remax/src/propsAlias.ts b/packages/remax/src/propsAlias.ts index f7f4ef4d39..a9b3a52da0 100644 --- a/packages/remax/src/propsAlias.ts +++ b/packages/remax/src/propsAlias.ts @@ -1,6 +1,27 @@ +import { TYPE_TEXT } from './constants'; import kebabCase from 'lodash.kebabcase'; import Platform from './Platform'; import plainStyle from './utils/plainStyle'; +import { isHostComponent as isWechatHostComponent } from './adapters/wechat/components/factory'; +import { isHostComponent as isAlipayHostComponent } from './adapters/alipay/components/factory'; +import { isHostComponent as isToutiaoHostComponent } from './adapters/toutiao/components/factory'; + +export function isHostComponent(name: string) { + if (name === TYPE_TEXT) { + return true; + } + + switch (Platform.current) { + case 'wechat': + return isWechatHostComponent(name); + case 'alipay': + return isAlipayHostComponent(name); + case 'toutiao': + return isToutiaoHostComponent(name); + } + + return false; +} function functionPropAlias(prop: string, platform?: string) { prop = prop.replace(/Click$/, 'Tap');