Merge pull request #99 from jviide/native-object-spread

Add native object spread support to babel-plugin-htm

Author: jviide

packages/babel-plugin-htm/index.mjs

@@ -7,11 +7,13 @@ import htm from 'htm';
  * @param {string} [options.tag=html]  The tagged template "tag" function name to process.
  * @param {boolean} [options.monomorphic=false]  Output monomorphic inline objects instead of using String literals.
  * @param {boolean} [options.useBuiltIns=false]  Use the native Object.assign instead of trying to polyfill it.
+ * @param {boolean} [options.useNativeSpread=false]  Use the native { ...a, ...b } syntax for prop spreads.
  * @param {boolean} [options.variableArity=true] If `false`, always passes exactly 3 arguments to the pragma function.
  */
 export default function htmBabelPlugin({ types: t }, options = {}) {
 	const pragma = options.pragma===false ? false : dottedIdentifier(options.pragma || 'h');
 	const useBuiltIns = options.useBuiltIns;
+	const useNativeSpread = options.useNativeSpread;
 	const inlineVNodes = options.monomorphic || pragma===false;
 
 	const symbol = Symbol();
@@ -31,7 +33,11 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 		const end = parts.pop() || '';
 		return new RegExp(parts.join('/'), end);
 	}
-  
+	
+	function propertyValue(valueOrNode) {
+		return t.isNode(valueOrNode) ? valueOrNode : t.valueToNode(valueOrNode);
+	}
+	
 	function propertyName(key) {
 		if (key.match(/(^\d|[^a-z0-9_$])/i)) return t.stringLiteral(key);
 		return t.identifier(key);
@@ -99,21 +105,32 @@ export default function htmBabelPlugin({ types: t }, options = {}) {
 		if (args.length === 2 && !t.isNode(args[0]) && Object.keys(args[0]).length === 0) {
 			return propsNode(args[1]);
 		}
+
+		if (useNativeSpread) {
+			const properties = [];
+			args.forEach(arg => {
+				if (t.isNode(arg)) {
+					properties.push(t.spreadElement(arg));
+				}
+				else {
+					Object.keys(arg).forEach(key => {
+						const value = arg[key];
+						properties.push(t.objectProperty(propertyName(key), propertyValue(value)));
+					});
+				}
+			});
+			return t.objectExpression(properties);
+		}
+		
 		const helper = useBuiltIns ? dottedIdentifier('Object.assign') : state.addHelper('extends');
 		return t.callExpression(helper, args.map(propsNode));
 	}
 
 	function propsNode(props) {
 		return t.isNode(props) ? props : t.objectExpression(
 			Object.keys(props).map(key => {
-				let value = props[key];
-				if (typeof value==='string') {
-					value = t.stringLiteral(value);
-				}
-				else if (typeof value==='boolean') {
-					value = t.booleanLiteral(value);
-				}
-				return t.objectProperty(propertyName(key), value);
+				const value = props[key];
+				return t.objectProperty(propertyName(key), propertyValue(value));
 			})
 		);
 	}

test/babel.test.mjs

@@ -46,6 +46,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",Object.assign({b:2},{c:3}),"d: ",4);`);
+		
+		expect(
+			transform('html`<a b=${2} ...${{ c: 3 }}>d: ${4}</a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",{b:2,...{c:3}},"d: ",4);`);
 	});
 
 	test('spread a single variable', () => {
@@ -57,6 +68,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",foo);`);
+		
+		expect(
+			transform('html`<a ...${foo}></a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",foo);`);
 	});
 
 	test('spread two variables', () => {
@@ -70,6 +92,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",Object.assign({},foo,bar));`);
+		
+		expect(
+			transform('html`<a ...${foo} ...${bar}></a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",{...foo,...bar});`);
 	});
 
 	test('property followed by a spread', () => {
@@ -83,6 +116,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",Object.assign({b:"1"},foo));`);
+		
+		expect(
+			transform('html`<a b="1" ...${foo}></a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",{b:"1",...foo});`);
 	});
 
 	test('spread followed by a property', () => {
@@ -96,6 +140,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",Object.assign({},foo,{b:"1"}));`);
+		
+		expect(
+			transform('html`<a ...${foo} b="1"></a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",{...foo,b:"1"});`);
 	});
 
 	test('mix-and-match spreads', () => {
@@ -109,6 +164,17 @@ describe('htm/babel', () => {
 				]
 			}).code
 		).toBe(`h("a",Object.assign({b:"1"},foo,{c:2},{d:3}));`);
+		
+		expect(
+			transform('html`<a b="1" ...${foo} c=${2} ...${{d:3}}></a>`;', {
+				...options,
+				plugins: [
+					[htmBabelPlugin, {
+						useNativeSpread: true
+					}]
+				]
+			}).code
+		).toBe(`h("a",{b:"1",...foo,c:2,...{d:3}});`);
 	});
 
 	describe('{variableArity:false}', () => {