ripple 0.2.34 → 0.2.35

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/2-analyze/index.js

@@ -8,6 +8,7 @@ import {
 	is_ripple_import,
 	is_tracked_computed_property,
 	is_tracked_name,
+	is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
 import is_reference from 'is-reference';
@@ -432,6 +433,8 @@ const visitors = {
 		const attribute_names = new Set();
 
 		if (is_dom_element) {
+			const is_void = is_void_element(node.id.name);
+
 			if (state.elements) {
 				state.elements.push(node);
 			}
@@ -468,6 +471,14 @@ const visitors = {
 					);
 				}
 			}
+
+			if (is_void && node.children.length > 0) {
+				error(
+					`The <${node.id.name}> element is a void element and cannot have children`,
+					state.analysis.module.filename,
+					node,
+				);
+			}
 		} else {
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {

package/src/compiler/phases/3-transform/index.js

@@ -21,6 +21,7 @@ import {
 	is_inside_call_expression,
 	is_tracked_computed_property,
 	is_value_static,
+	is_void_element,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
@@ -438,6 +439,7 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			const local_updates = [];
+			const is_void = is_void_element(node.id.name);
 
 			state.template.push(`<${node.id.name}`);
 
@@ -629,7 +631,14 @@ const visitors = {
 			const init = [];
 			const update = [];
 
-			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
+			if (!is_void) {
+				transform_children(node.children, {
+					visit,
+					state: { ...state, init, update },
+					root: false,
+				});
+				state.template.push(`</${node.id.name}>`);
+			}
 
 			update.push(...local_updates);
 
@@ -640,8 +649,6 @@ const visitors = {
 			if (update.length > 0) {
 				state.init.push(b.stmt(b.call('$.render', b.thunk(b.block(update)))));
 			}
-
-			state.template.push(`</${node.id.name}>`);
 		} else {
 			const id = state.flush_node();
 

package/src/compiler/utils.js

@@ -3,6 +3,33 @@ import * as b from '../utils/builders.js';
 
 const regex_return_characters = /\r/g;
 
+const VOID_ELEMENT_NAMES = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'command',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+/**
+ * Returns `true` if `name` is of a void element
+ * @param {string} name
+ */
+export function is_void_element(name) {
+	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+}
+
 const RESERVED_WORDS = [
 	'arguments',
 	'await',