fix: issue SVG camel tag is not support #585, SVG setAttribute xmlns:xlink failed #584 (#586)

yoonthe · yoonthe · web-flow · commit 566e3bd309b6 · 2023-01-06T11:29:02.000+08:00
Co-authored-by: yoonthe &lt;yuzaiyang.yoonthe@bytedance.com&gt;
diff --git a/packages/utils/__tests__/domApis.spec.ts b/packages/utils/__tests__/domApis.spec.ts
@@ -0,0 +1,37 @@
+import { DOMApis } from '../src/domApis';
+
+describe('Garfish shared domApis', () => {
+  const domApis = new DOMApis(document);
+  it('set Attribute SVG xmlns:xlink', () => {
+    const svg = domApis.createElement({
+      type: 'element',
+      key: 'svg',
+      tagName: 'svg',
+      children: [],
+      attributes: [
+        {
+          key: 'xmlns:xlink',
+          value: 'http://www.w3.org/1999/xlink',
+        },
+      ],
+    });
+    expect(svg.outerHTML).toBe('<svg xmlns:xlink="http://www.w3.org/1999/xlink"></svg>');
+  });
+
+  it('set Attribute SVG xlink:href', () => {
+    const use = domApis.createElement({
+      type: 'element',
+      key: 'use',
+      tagName: 'use',
+      children: [],
+      attributes: [
+        {
+          key: 'xlink:href',
+          value: '#image1_1060_8858',
+        },
+      ],
+    });
+    expect(use.outerHTML).toBe('<use xlink:href="#image1_1060_8858"></use>');
+  });
+
+})
diff --git a/packages/utils/__tests__/templateParse.spec.ts b/packages/utils/__tests__/templateParse.spec.ts
@@ -0,0 +1,65 @@
+import { templateParse } from '../src/templateParse';
+
+
+function Attributes(this: any, { name, value }) {
+  this.key = name;
+  this.value = value;
+}
+
+describe('Garfish shared templateParse', () => {
+  it('parse SVG feFlood', () => {
+    const [ast] = templateParse('<head></head><body><svg xmlns="http://www.w3.org/2000/svg"><feFlood flood-opacity="0"/></svg></body>', []);
+    expect(ast).toEqual([{
+      type: 'element',
+      tagName: 'head',
+      attributes: [],
+      children: [],
+    },{
+      type: 'element',
+      tagName: 'body',
+      attributes: [],
+      children: [{
+        type: 'element',
+        tagName: 'svg',
+        attributes: [new Attributes({
+          name: 'xmlns',
+          value: 'http://www.w3.org/2000/svg',
+        })],
+        children: [
+          {
+            type: 'element',
+            tagName: 'feFlood',
+            attributes: [new Attributes({
+              name: 'flood-opacity',
+              value: '0',
+            })],
+            children: [],
+          },
+        ],
+      }],
+    }])
+  });
+
+  it('parse Uppercase DIV', () => {
+    const [ast] = templateParse('<head></head><body><DIV id="div"/></body>', []);
+    expect(ast).toEqual([{
+      type: 'element',
+      tagName: 'head',
+      attributes: [],
+      children: [],
+    },{
+      type: 'element',
+      tagName: 'body',
+      attributes: [],
+      children: [{
+        type: 'element',
+        tagName: 'div',
+        attributes: [new Attributes({
+          name: 'id',
+          value: 'div',
+        })],
+        children: [],
+      }],
+    }]);
+  });
+});
diff --git a/packages/utils/src/domApis.ts b/packages/utils/src/domApis.ts
@@ -21,6 +21,8 @@ const ns = 'http://www.w3.org/2000/svg';
 const xlinkNS = 'http://www.w3.org/1999/xlink'; // xmlns:xlink
 const xmlNS = 'http://www.w3.org/XML/1998/namespace'; // xmlns
 
+const xlinkPrefix = 'xlink';
+
 // https://developer.mozilla.org/en-US/docs/Web/SVG/Element
 const SVG_TAGS =
   'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +
@@ -36,6 +38,10 @@ const SVG_TAGS =
 
 const isSVG = makeMap(SVG_TAGS.split(','));
 
+export function changeTagNameToLowerCase(tagName: string) {
+ return isSVG(tagName) ? tagName : tagName.toLowerCase();
+}
+
 function attributesString(attributes: Node['attributes']) {
   if (!attributes || attributes.length === 0) return '';
   return attributes.reduce((total, { key, value }) => {
@@ -184,7 +190,7 @@ export class DOMApis {
             el.setAttribute(key, value);
           } else if (key.charCodeAt(3) === colonChar) {
             el.setAttributeNS(xmlNS, key, value);
-          } else if (key.charCodeAt(5) === colonChar) {
+          } else if (key.charCodeAt(5) === colonChar && key.slice(0, 5) === xlinkPrefix) {
             el.setAttributeNS(xlinkNS, key, value);
           } else {
             el.setAttribute(key, value);
diff --git a/packages/utils/src/templateParse.ts b/packages/utils/src/templateParse.ts
@@ -1,5 +1,5 @@
 import { error } from './utils';
-import { Node as VNode } from './domApis';
+import { changeTagNameToLowerCase, Node as VNode } from './domApis';
 
 enum ElementType {
   TEXT = 3,
@@ -48,7 +48,7 @@ const createElement = (el: Element, filter: (el: VNode) => VNode) => {
     case ElementType.ELEMENT:
       return filter({
         type: 'element',
-        tagName: el.tagName.toLowerCase(),
+        tagName: changeTagNameToLowerCase(el.tagName),
         attributes: generateAttributes(el),
         children: Array.from(el.childNodes).map((node) => {
           return createElement(node as Element, filter);
