fix: fix svg for transform

.changeset/orange-needles-report.md

@@ -0,0 +1,5 @@
+---
+'rax-compat': patch
+---
+
+fix: fix svg

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;

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<string, string>, iter: string) => {
   records[iter.toLowerCase()] = iter;
   return records;

packages/rax-compat/src/props.ts

@@ -8,7 +8,7 @@ function isEventLikeProp(key: string) {
   return key.indexOf('on') === 0;
 }
 
-function transformProps(props: ComponentProps<JSXElementConstructor<any>>): Record<string, any> {
+function transformProps(type: string, props: ComponentProps<JSXElementConstructor<any>>): Record<string, any> {
   const transformedProps: Record<string, any> = {};
   Object.keys(props).forEach((propKey: string) => {
     let key: string = propKey;
@@ -21,18 +21,23 @@ function transformProps(props: ComponentProps<JSXElementConstructor<any>>): 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 (Object.prototype.hasOwnProperty.call(possibleStandardNames, 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;

packages/rax-compat/tests/events.test.tsx

@@ -37,82 +37,85 @@ 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({
+    console.log('aaaaaa', transformProps('div', {
+      ondblclick: () => { },
+    }));
+    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);
   });

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({