From 01d1445b6bc745db7fc69b026268c86d6b926dc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Thu, 5 Sep 2024 19:36:41 +0800 Subject: [PATCH 1/7] fix: fix svg for transform --- .changeset/orange-needles-report.md | 5 +++++ packages/rax-compat/src/props.ts | 21 +++++++++++++-------- 2 files changed, 18 insertions(+), 8 deletions(-) create mode 100644 .changeset/orange-needles-report.md diff --git a/.changeset/orange-needles-report.md b/.changeset/orange-needles-report.md new file mode 100644 index 0000000000..47d84a6ca3 --- /dev/null +++ b/.changeset/orange-needles-report.md @@ -0,0 +1,5 @@ +--- +'rax-compat': patch +--- + +fix: fix svg diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts index 9b13b22ee0..d5d0da1dab 100644 --- a/packages/rax-compat/src/props.ts +++ b/packages/rax-compat/src/props.ts @@ -8,7 +8,7 @@ function isEventLikeProp(key: string) { return key.indexOf('on') === 0; } -function transformProps(props: ComponentProps>): Record { +function transformProps(type: string, props: ComponentProps>): Record { const transformedProps: Record = {}; Object.keys(props).forEach((propKey: string) => { let key: string = propKey; @@ -21,18 +21,23 @@ function transformProps(props: ComponentProps>): Reco // etc... if (isEventLikeProp(lowerCasedPropKey)) { if (registrationNameToReactEvent.has(lowerCasedPropKey)) { - const reactEvent: string = registrationNameToReactEvent.get(lowerCasedPropKey); + const reactEvent: string = registrationNameToReactEvent.get(lowerCasedPropKey) || ''; if (reactEvent !== propKey) { key = reactEvent; } } // eslint-disable-next-line no-prototype-builtins - } else if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) { - // Transform attribute names that make it works properly in React. - key = possibleStandardNames[lowerCasedPropKey]; - } else { - // Handles component props from rax-components like resizeMode, this causes React to throw a warning. - key = lowerCasedPropKey; + } + + const needTransform = (type !== 'svg'); + if (needTransform) { + if (possibleStandardNames.hasOwnProperty(lowerCasedPropKey)) { + // Transform attribute names that make it works properly in React. + key = possibleStandardNames[lowerCasedPropKey]; + } else { + // Handles component props from rax-components like resizeMode, this causes React to throw a warning. + key = lowerCasedPropKey; + } } transformedProps[key] = val; From 407edfe1f989390ce1140ff3bb643609f7e6e116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Thu, 5 Sep 2024 19:43:34 +0800 Subject: [PATCH 2/7] fix: modify transformProps --- packages/rax-compat/src/compat/element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rax-compat/src/compat/element.ts b/packages/rax-compat/src/compat/element.ts index f6110fbeb3..965ea5fcdb 100644 --- a/packages/rax-compat/src/compat/element.ts +++ b/packages/rax-compat/src/compat/element.ts @@ -17,7 +17,7 @@ export function createJSXElementFactory(factory: typeof ElementFactory) { // Compat for props. if (isRealDOM) { // Only the dom needs to be transformed, not the components. - rest = transformProps(rest); + rest = transformProps(type, rest); // Delete props on real dom that are not allowed in react. delete rest.onAppear; From a9314a3d928b3a316beaef855f808d40eca9fbb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Thu, 5 Sep 2024 20:17:15 +0800 Subject: [PATCH 3/7] fix: hasOwnProperty --- packages/rax-compat/src/props.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts index d5d0da1dab..72c3188c06 100644 --- a/packages/rax-compat/src/props.ts +++ b/packages/rax-compat/src/props.ts @@ -31,7 +31,7 @@ function transformProps(type: string, props: ComponentProps Date: Thu, 5 Sep 2024 20:31:17 +0800 Subject: [PATCH 4/7] test: modify test --- packages/rax-compat/tests/events.test.tsx | 34 +++++++++++------------ packages/rax-compat/tests/props.test.tsx | 14 +++++----- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/rax-compat/tests/events.test.tsx b/packages/rax-compat/tests/events.test.tsx index 48c86b0f70..532aa33ce9 100644 --- a/packages/rax-compat/tests/events.test.tsx +++ b/packages/rax-compat/tests/events.test.tsx @@ -37,82 +37,82 @@ describe('events', () => { }); it('should work with ontouchstart', () => { - expect(transformProps({ + expect(transformProps('div', { ontouchstart: () => { }, }).onTouchStart).toBeInstanceOf(Function); }); it('should work with onclick', () => { - expect(transformProps({ + expect(transformProps('div', { onclick: () => { }, }).onClick).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onclick: () => { }, }).onclick).toBe(undefined); }); it('should work with onClick', () => { - expect(transformProps({ + expect(transformProps('div', { onClick: () => { }, }).onClick).toBeInstanceOf(Function); }); it('should work with ondblclick', () => { - expect(transformProps({ + expect(transformProps('div', { ondblclick: () => { }, }).onDoubleClick).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { ondblclick: () => { }, }).ondblclick).toBe(undefined); }); it('should work with onDblclick', () => { - expect(transformProps({ + expect(transformProps('div', { onDblclick: () => { }, }).onDoubleClick).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onDblclick: () => { }, }).onDblclick).toBe(undefined); }); it('should work with onDoubleClick', () => { - expect(transformProps({ + expect(transformProps('div', { onDoubleClick: () => { }, }).onDoubleClick).toBeInstanceOf(Function); }); it('should work with onmouseenter', () => { - expect(transformProps({ + expect(transformProps('div', { onmouseenter: () => { }, }).onMouseEnter).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onmouseenter: () => { }, }).onmouseenter).toBe(undefined); }); it('should work with onpointerenter', () => { - expect(transformProps({ + expect(transformProps('div', { onpointerenter: () => { }, }).onPointerEnter).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onpointerenter: () => { }, }).onpointerenter).toBe(undefined); }); it('should work with onchange', () => { - expect(transformProps({ + expect(transformProps('div', { onchange: () => { }, }).onChange).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onchange: () => { }, }).onchange).toBe(undefined); }); it('should work with onbeforeinput', () => { - expect(transformProps({ + expect(transformProps('div', { onbeforeinput: () => { }, }).onBeforeInput).toBeInstanceOf(Function); - expect(transformProps({ + expect(transformProps('div', { onbeforeinput: () => { }, }).onbeforeinput).toBe(undefined); }); diff --git a/packages/rax-compat/tests/props.test.tsx b/packages/rax-compat/tests/props.test.tsx index ce5cba697d..49399ab234 100644 --- a/packages/rax-compat/tests/props.test.tsx +++ b/packages/rax-compat/tests/props.test.tsx @@ -7,44 +7,44 @@ import transformProps from '../src/props'; describe('props', () => { it('should work with autofocus', () => { - expect(transformProps({ + expect(transformProps('div', { autofocus: true, }).autoFocus).toBe(true); }); it('should work with autoplay', () => { - expect(transformProps({ + expect(transformProps('div', { autoplay: true, }).autoPlay).toBe(true); }); it('should work with classname', () => { - expect(transformProps({ + expect(transformProps('div', { classname: 'class', }).className).toBe('class'); }); it('should work with crossorigin', () => { - expect(transformProps({ + expect(transformProps('div', { crossorigin: 'xxx', }).crossOrigin).toBe('xxx'); }); it('should work with maxlength', () => { - expect(transformProps({ + expect(transformProps('div', { maxlength: '10', }).maxLength).toBe('10'); }); it('should work with inputmode', () => { - expect(transformProps({ + expect(transformProps('div', { inputmode: 'numeric', }).inputMode).toBe('numeric'); }); it('should work with dangerouslySetInnerHTML', () => { expect( - transformProps({ + transformProps('div', { dangerouslySetInnerHTML: { __html: 'xxx' }, }).dangerouslySetInnerHTML, ).toEqual({ From 4626528818430bea7524679e95f9f126552b1e83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Thu, 5 Sep 2024 21:48:42 +0800 Subject: [PATCH 5/7] fix: fix property transform --- packages/rax-compat/src/props.ts | 20 ++++++++++---------- packages/rax-compat/tests/events.test.tsx | 3 +++ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts index 72c3188c06..8d50207d2f 100644 --- a/packages/rax-compat/src/props.ts +++ b/packages/rax-compat/src/props.ts @@ -27,16 +27,16 @@ function transformProps(type: string, props: ComponentProps { }); it('should work with ondblclick', () => { + console.log('aaaaaa', transformProps('div', { + ondblclick: () => { }, + })); expect(transformProps('div', { ondblclick: () => { }, }).onDoubleClick).toBeInstanceOf(Function); From d9ac053a4d2a9dcdcc201681ad7e1e73e534e7bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Sat, 14 Sep 2024 00:04:55 +0800 Subject: [PATCH 6/7] feat: support svg for compat --- .../rax-compat/src/possible-standard-names.ts | 155 ++++++++++++++++++ 1 file changed, 155 insertions(+) diff --git a/packages/rax-compat/src/possible-standard-names.ts b/packages/rax-compat/src/possible-standard-names.ts index d32e4bcadd..669174f36b 100644 --- a/packages/rax-compat/src/possible-standard-names.ts +++ b/packages/rax-compat/src/possible-standard-names.ts @@ -24,6 +24,161 @@ const possibleStandardNames = [ // meta 'charSet', 'dangerouslySetInnerHTML', + 'strokeWidth', + // SVG + 'accentHeight', + 'accumulate', + 'additive', + 'alignmentBaseline', + 'allowReorder', + 'arabicForm', + 'attributeName', + 'attributeType', + 'autoReverse', + 'baseFrequency', + 'baselineShift', + 'baseProfile', + 'calcMode', + 'capHeight', + 'clipPath', + 'clipPathUnits', + 'clipRule', + 'colorInterpolation', + 'colorInterpolationFilters', + 'colorProfile', + 'colorRendering', + 'contentScriptType', + 'contentStyleType', + 'diffuseConstant', + 'dominantBaseline', + 'edgeMode', + 'enableBackground', + 'externalResourcesRequired', + 'fillOpacity', + 'fillRule', + 'filterRes', + 'filterUnits', + 'floodOpacity', + 'floodColor', + 'fontFamily', + 'fontSize', + 'fontSizeAdjust', + 'fontStretch', + 'fontStyle', + 'fontVariant', + 'fontWeight', + 'glyphName', + 'glyphOrientationHorizontal', + 'glyphOrientationVertical', + 'glyphRef', + 'gradientTransform', + 'gradientUnits', + 'hanging', + 'horizAdvX', + 'horizOriginX', + 'ideographic', + 'imageRendering', + 'kernelMatrix', + 'kernelUnitLength', + 'keyPoints', + 'keySplines', + 'keyTimes', + 'lengthAdjust', + 'letterSpacing', + 'lightingColor', + 'limitingConeAngle', + 'markerEnd', + 'markerHeight', + 'markerMid', + 'markerStart', + 'markerUnits', + 'markerWidth', + 'maskContentUnits', + 'maskUnits', + 'numOctaves', + 'overlinePosition', + 'overlineThickness', + 'paintOrder', + 'pathLength', + 'patternContentUnits', + 'patternTransform', + 'patternUnits', + 'pointerEvents', + 'pointsAtX', + 'pointsAtY', + 'pointsAtZ', + 'preserveAlpha', + 'preserveAspectRatio', + 'primitiveUnits', + 'refX', + 'refY', + 'renderingIntent', + 'repeatCount', + 'repeatDur', + 'requiredExtensions', + 'requiredFeatures', + 'shapeRendering', + 'specularConstant', + 'specularExponent', + 'spreadMethod', + 'startOffset', + 'stdDeviation', + 'stitchTiles', + 'stopColor', + 'stopOpacity', + 'strikethroughPosition', + 'strikethroughThickness', + 'strokeDasharray', + 'strokeDashoffset', + 'strokeLinecap', + 'strokeLinejoin', + 'strokeMiterlimit', + 'strokeWidth', + 'strokeOpacity', + 'suppressContentEditableWarning', + 'suppressHydrationWarning', + 'surfaceScale', + 'systemLanguage', + 'tableValues', + 'targetX', + 'targetY', + 'textAnchor', + 'textDecoration', + 'textLength', + 'textRendering', + 'underlinePosition', + 'underlineThickness', + 'unicodeBidi', + 'unicodeRange', + 'unitsPerEm', + 'vAlphabetic', + 'vectorEffect', + 'vertAdvY', + 'vertOriginX', + 'vertOriginY', + 'vHanging', + 'vIdeographic', + 'viewBox', + 'viewTarget', + 'visibility', + 'vMathematical', + 'wordSpacing', + 'writingMode', + 'xChannelSelector', + 'xHeight', + 'xlinkActuate', + 'xlinkArcrole', + 'xlinkHref', + 'xlinkRole', + 'xlinkShow', + 'xlinkTitle', + 'xlinkType', + 'xmlBase', + 'xmlLang', + 'xmlnsXlink', + 'xmlSpace', + 'yChannelSelector', + 'zoomAndPan', ].reduce((records: Record, iter: string) => { records[iter.toLowerCase()] = iter; return records; From fd659b58d06778e80c48b2c95de5b2d2d5399abd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9F=93=E9=99=8C?= Date: Sat, 14 Sep 2024 21:10:20 +0800 Subject: [PATCH 7/7] feat: remove need tranform --- packages/rax-compat/src/props.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/rax-compat/src/props.ts b/packages/rax-compat/src/props.ts index 8d50207d2f..0086e9a378 100644 --- a/packages/rax-compat/src/props.ts +++ b/packages/rax-compat/src/props.ts @@ -28,15 +28,12 @@ function transformProps(type: string, props: ComponentProps