feat(svg): props and toVNode support by default

EgorKazachenko · Jan 21, 2022 · 97d2fe2 · 97d2fe2
1 parent f90af9f
commit 97d2fe2
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 25 deletions.
diff --git a/benchmarks/index.html b/benchmarks/index.html
@@ -16,6 +16,7 @@
   <body class="markdown-body">
     <a
       href="https://github.com/aidenybai/million/tree/main/benchmarks#readme"
+      target="_blank"
       class="github-corner"
       aria-label="View source on GitHub"
       ><svg

diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "build": "zx scripts/build.mjs",
     "lint": "eslint src/**",
     "cleanup": "prettier --write src --parser typescript",
-    "test": "c8 --reporter=lcov vitest --coverage",
+    "test": "vitest --coverage",
     "bench": "vite --config benchmarks/vite.config.ts",
     "release": "zx scripts/release.mjs",
     "bump": "np && zx scripts/citation.mjs",
@@ -79,7 +79,7 @@
     "@types/virtual-dom": "^2.1.1",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "@vitest/ui": "^0.1.25",
+    "@vitest/ui": "^0.1.26",
     "benchmark": "^2.1.4",
     "c8": "^7.11.0",
     "canvas-confetti": "^1.4.0",
@@ -101,11 +101,11 @@
     "snabbdom": "^3.3.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "unbuild": "^0.6.7",
+    "unbuild": "^0.6.8",
     "virtual-dom": "^2.1.1",
     "vite": "^2.7.13",
     "vite-plugin-legacy": "^2.1.0",
-    "vitest": "^0.1.25",
+    "vitest": "^0.1.26",
     "zx": "^4.3.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/createElement.ts b/src/createElement.ts
@@ -1,4 +1,14 @@
-import { DOMNode, OLD_VNODE_FIELD, VElement, VEntity, VNode } from './types/base';
+import {
+  COLON_CHAR,
+  DOMNode,
+  OLD_VNODE_FIELD,
+  VElement,
+  VEntity,
+  VNode,
+  XLINK_NS,
+  XML_NS,
+  X_CHAR,
+} from './types/base';
 
 /**
  * Creates an Element from a VNode
@@ -23,6 +33,12 @@ export const createElement = (vnode?: VNode | VEntity | null, attachField = true
       if (propName.startsWith('on')) {
         const eventPropName = propName.slice(2).toLowerCase();
         el.addEventListener(eventPropName, <EventListener>propValue);
+      } else if (propName.charCodeAt(0) === X_CHAR) {
+        if (propName.charCodeAt(3) === COLON_CHAR) {
+          el.setAttributeNS(XML_NS, propName, String(propValue));
+        } else if (propName.charCodeAt(5) === COLON_CHAR) {
+          el.setAttributeNS(XLINK_NS, propName, String(propValue));
+        }
       } else if (el[propName] !== undefined && !(el instanceof SVGElement)) {
         el[propName] = propValue;
       } else {

diff --git a/src/drivers/useProps.ts b/src/drivers/useProps.ts
@@ -1,4 +1,12 @@
-import { DOMOperation, Driver, VElement } from '../types/base';
+import {
+  COLON_CHAR,
+  DOMOperation,
+  Driver,
+  VElement,
+  XLINK_NS,
+  XML_NS,
+  X_CHAR,
+} from '../types/base';
 
 export const updateProp = (
   el: HTMLElement | SVGElement,
@@ -14,6 +22,12 @@ export const updateProp = (
       if (oldPropValue) el.removeEventListener(eventPropName, <EventListener>oldPropValue);
       el.addEventListener(eventPropName, <EventListener>newPropValue);
     });
+  } else if (propName.charCodeAt(0) === X_CHAR) {
+    if (propName.charCodeAt(3) === COLON_CHAR) {
+      el.setAttributeNS(XML_NS, propName, String(newPropValue));
+    } else if (propName.charCodeAt(5) === COLON_CHAR) {
+      el.setAttributeNS(XLINK_NS, propName, String(newPropValue));
+    }
   } else if (el[propName] !== undefined && !(el instanceof SVGElement)) {
     if (newPropValue) {
       effects.push(() => (el[propName] = newPropValue));

diff --git a/src/m.ts b/src/m.ts
@@ -101,14 +101,15 @@ export const m = (
     key = <string | undefined>props.key;
     delete props.key;
   }
-  return {
+  const vnode = {
     tag,
     props,
     children,
     key,
     flag,
     delta,
   };
+  return vnode.tag.toLowerCase() === 'svg' ? svg(vnode) : vnode;
 };
 
 /**

diff --git a/src/types/base.ts b/src/types/base.ts
@@ -7,6 +7,11 @@ export const OLD_VNODE_FIELD = '__m_old_vnode';
  */
 export const NODE_OBJECT_POOL_FIELD = '__m_node_object_pool';
 
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const XML_NS = 'http://www.w3.org/XML/1998/namespace';
+export const COLON_CHAR = 58;
+export const X_CHAR = 120;
+
 export type VProps = Record<string, string | boolean | EventListener>;
 export type DOMNode = HTMLElement | SVGElement | Text | Comment;
 export type VNode = VElement | string;

diff --git a/test/createElement.test.ts b/test/createElement.test.ts
@@ -44,8 +44,6 @@ describe.concurrent('createElement', () => {
     const svg = <HTMLElement>createElement(m('svg', { ns: 'http://www.w3.org/2000/svg' }));
     expect(svg.namespaceURI).toEqual('http://www.w3.org/2000/svg');
     expect(svg instanceof SVGElement).toBeTruthy();
-    const el = <HTMLElement>createElement(m('svg'));
-    expect(el.namespaceURI).toEqual('http://www.w3.org/1999/xhtml');
   });
 
   it('should create event listener', () => {

diff --git a/vite.config.ts b/vite.config.ts
@@ -16,5 +16,8 @@ export default defineConfig({
   test: {
     watch: false,
     environment: 'jsdom',
+    coverage: {
+      reporter: ['lcov'],
+    },
   },
 });