feat: Add support for prop: & attr: directives

babel.config.js

@@ -31,7 +31,7 @@ module.exports = function (api) {
 		],
 		plugins: [
 			'@babel/plugin-proposal-object-rest-spread',
-			'@babel/plugin-transform-react-jsx',
+			['@babel/plugin-transform-react-jsx', { throwIfNamespace: false }],
 			'babel-plugin-transform-async-to-promises',
 			['babel-plugin-transform-rename-properties', { rename }]
 		],

src/diff/props.js

@@ -35,7 +35,11 @@ let eventClock = 0;
  * @param {string} namespace Whether or not this DOM node is an SVG node or not
  */
 export function setProperty(dom, name, value, oldValue, namespace) {
-	let useCapture;
+	let useCapture, prefix;
+	if ((name[0] == 'a' || name[0] == 'p') && name[4] == ':') {
+		prefix = name.slice(0, 4);
+		name = name.slice(5);
+	}
 
 	o: if (name === 'style') {
 		if (typeof value == 'string') {
@@ -104,20 +108,22 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 			// - className --> class
 			name = name.replace(/xlink(H|:h)/, 'h').replace(/sName$/, 's');
 		} else if (
-			name != 'width' &&
-			name != 'height' &&
-			name != 'href' &&
-			name != 'list' &&
-			name != 'form' &&
-			// Default value in browsers is `-1` and an empty string is
-			// cast to `0` instead
-			name != 'tabIndex' &&
-			name != 'download' &&
-			name != 'rowSpan' &&
-			name != 'colSpan' &&
-			name != 'role' &&
-			name != 'popover' &&
-			name in dom
+			(prefix != 'attr' &&
+				name != 'width' &&
+				name != 'height' &&
+				name != 'href' &&
+				name != 'list' &&
+				name != 'form' &&
+				// Default value in browsers is `-1` and an empty string is
+				// cast to `0` instead
+				name != 'tabIndex' &&
+				name != 'download' &&
+				name != 'rowSpan' &&
+				name != 'colSpan' &&
+				name != 'role' &&
+				name != 'popover' &&
+				name in dom) ||
+			prefix == 'prop'
 		) {
 			try {
 				dom[name] = value == null ? '' : value;

test/browser/render.test.js

@@ -631,6 +631,17 @@ describe('render()', () => {
 		expect(links[3].hasAttribute('href')).to.equal(true);
 	});
 
+	it('should support using `prop:` directive to set properties', () => {
+		render(<input prop:foo="bar" />, scratch);
+		expect(scratch.firstChild.foo).to.equal('bar');
+		expect(scratch.firstChild.getAttribute('foo')).to.equal(null);
+	});
+
+	it('should support using `attr:` directive to set attributes', () => {
+		render(<input attr:value="foo" />, scratch);
+		expect(scratch.firstChild.getAttribute('value')).to.equal('foo');
+	});
+
 	describe('dangerouslySetInnerHTML', () => {
 		it('should support dangerouslySetInnerHTML', () => {
 			let html = '<b>foo &amp; bar</b>';