🎨 Add built-in support for inline SVG (#202)

* Add built-in support for inline SVG (adds ~115b)
* Port basic SVG tests from preact-compat

Author: developit

src/dom/index.js

@@ -30,7 +30,7 @@ export function removeNode(node) {
  *	@param {any} previousValue	The last value that was set for this name/node pair
  *	@private
  */
-export function setAccessor(node, name, value) {
+export function setAccessor(node, name, value, isSvg) {
 	ensureNodeData(node)[name] = value;
 
 	if (name==='key' || name==='children') return;
@@ -44,7 +44,7 @@ export function setAccessor(node, name, value) {
 	else if (name==='dangerouslySetInnerHTML') {
 		if (value && value.__html) node.innerHTML = value.__html;
 	}
-	else if (name!=='type' && name in node) {
+	else if (!isSvg && name!=='type' && name in node) {
 		setProperty(node, name, empty(value) ? '' : value);
 		if (falsey(value)) node.removeAttribute(name);
 	}
@@ -55,11 +55,16 @@ export function setAccessor(node, name, value) {
 		else if (!value) node.removeEventListener(name, eventProxy);
 		l[name] = value;
 	}
-	else if (falsey(value)) {
-		node.removeAttribute(name);
-	}
-	else if (typeof value!=='object' && !isFunction(value)) {
-		node.setAttribute(name, value);
+	else {
+		let ns = isSvg && name.match(/^xlink\:?(.+)/);
+		if (falsey(value)) {
+			if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', ns[1]);
+			else node.removeAttribute(name);
+		}
+		else if (typeof value!=='object' && !isFunction(value)) {
+			if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', ns[1], value);
+			else node.setAttribute(name, value);
+		}
 	}
 }
 

src/dom/recycler.js

@@ -14,10 +14,9 @@ export function collectNode(node) {
 }
 
 
-export function createNode(nodeName) {
+export function createNode(nodeName, isSvg) {
 	let name = toLowerCase(nodeName),
-		list = nodes[name],
-		node = list && list.pop() || document.createElement(nodeName);
+		node = nodes[name] && nodes[name].pop() || (isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName));
 	ensureNodeData(node);
 	node.normalizedNodeName = name;
 	return node;

src/vdom/diff.js

@@ -1,5 +1,5 @@
 import { ATTR_KEY } from '../constants';
-import { empty, isString, isFunction } from '../util';
+import { toLowerCase, empty, isString, isFunction } from '../util';
 import { hook, deepHook } from '../hooks';
 import { isSameNodeType, isNamedNode } from '.';
 import { isFunctionalComponent, buildFunctionalComponent } from './functional-component';
@@ -9,6 +9,8 @@ import { createNode, collectNode } from '../dom/recycler';
 import { unmountComponent } from './component';
 
 
+let SVG_MODE = false;
+
 
 /** Apply differences in a given vnode (and it's deep children) to a real DOM Node.
  *	@param {Element} [dom=null]		A DOM node to mutate into the shape of the `vnode`
@@ -36,19 +38,26 @@ export function diff(dom, vnode, context, mountAll, unmountChildrenOnly) {
 		return document.createTextNode(vnode);
 	}
 
-	if (isFunction(vnode.nodeName)) {
+	let out = dom,
+		nodeName = vnode.nodeName,
+		svgMode;
+
+	if (isFunction(nodeName)) {
 		return buildComponentFromVNode(dom, vnode, context, mountAll);
 	}
+	if (!isString(nodeName)) {
+		nodeName = String(nodeName);
+	}
 
-	let out = dom,
-		nodeName = vnode.nodeName;
-	if (!isString(nodeName)) nodeName = String(nodeName);
+	svgMode = toLowerCase(nodeName)==='svg';
+
+	if (svgMode) SVG_MODE = true;
 
 	if (!dom) {
-		out = createNode(nodeName);
+		out = createNode(nodeName, SVG_MODE);
 	}
 	else if (!isNamedNode(dom, nodeName)) {
-		out = createNode(nodeName);
+		out = createNode(nodeName, SVG_MODE);
 		// move children into the replacement node
 		while (dom.firstChild) out.appendChild(dom.firstChild);
 		// reclaim element nodes
@@ -63,6 +72,8 @@ export function diff(dom, vnode, context, mountAll, unmountChildrenOnly) {
 		(out[ATTR_KEY].ref = originalAttributes.ref)(out);
 	}
 
+	if (svgMode) SVG_MODE = false;
+
 	return out;
 }
 
@@ -232,15 +243,15 @@ function diffAttributes(dom, attrs) {
 	// removeAttributes(dom, old, attrs || EMPTY);
 	for (let name in old) {
 		if (!attrs || !(name in attrs)) {
-			setAccessor(dom, name, null);
+			setAccessor(dom, name, null, SVG_MODE);
 		}
 	}
 
 	// new & updated
 	if (attrs) {
 		for (let name in attrs) {
 			if (!(name in old) || attrs[name]!=(name==='value' || name==='selected' || name==='checked' ? dom[name] : old[name])) {
-				setAccessor(dom, name, attrs[name]);
+				setAccessor(dom, name, attrs[name], SVG_MODE);
 			}
 		}
 	}

test/browser/svg.js

@@ -0,0 +1,45 @@
+import { h, render } from '../../src/preact';
+/** @jsx h */
+
+describe('svg', () => {
+	let scratch;
+
+	before( () => {
+		scratch = document.createElement('div');
+		(document.body || document.documentElement).appendChild(scratch);
+	});
+
+	beforeEach( () => {
+		scratch.innerHTML = '';
+	});
+
+	after( () => {
+		scratch.parentNode.removeChild(scratch);
+		scratch = null;
+	});
+
+	it('should render SVG to string', () => {
+		render((
+			<svg viewBox="0 0 360 360">
+				<path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z" />
+			</svg>
+		), scratch);
+
+		expect(scratch.innerHTML).to.equal(`
+			<svg viewBox="0 0 360 360">
+				<path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z"></path>
+			</svg>
+		`.replace(/[\n\t]+/g,''));
+	});
+
+	it('should render SVG to DOM', () => {
+		const Demo = () => (
+			<svg viewBox="0 0 360 360">
+				<path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z" />
+			</svg>
+		);
+		render(<Demo />, scratch);
+
+		expect(scratch.innerHTML).to.equal('<svg viewBox="0 0 360 360"><path stroke="white" fill="black" d="M347.1 357.9L183.3 256.5 13 357.9V1.7h334.1v356.2zM58.5 47.2v231.4l124.8-74.1 118.3 72.8V47.2H58.5z"></path></svg>');
+	});
+});