ripple 0.2.89 → 0.2.90

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.89",
+  "version": "0.2.90",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/phases/1-parse/index.js

@@ -455,10 +455,25 @@ function RipplePlugin(config) {
 			jsx_parseExpressionContainer() {
 				let node = this.startNode();
 				this.next();
+        let tracked = false;
+
+        if (this.value === 'html') {
+          node.html = true;
+          this.next();
+          if (this.type.label === '@') {
+            this.next(); // consume @
+            tracked = true;
+          }
+        }
 
 				node.expression =
 					this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 				this.expect(tt.braceR);
+
+        if (tracked && node.expression.type === 'Identifier') {
+          node.expression.tracked = true;
+        }
+
 				return this.finishNode(node, 'JSXExpressionContainer');
 			}
 
@@ -954,7 +969,8 @@ function RipplePlugin(config) {
 
 				if (this.type.label === '{') {
 					const node = this.jsx_parseExpressionContainer();
-					node.type = 'Text';
+					node.type = node.html ? 'Html' : 'Text';
+          delete node.html;
 					body.push(node);
 				} else if (this.type.label === '}') {
 					return;

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

@@ -133,9 +133,7 @@ function visit_title_element(node, context) {
 			),
 		);
 	} else {
-		context.state.init.push(
-			b.stmt(b.assignment('=', b.id('_$_.document.title'), result)),
-		);
+		context.state.init.push(b.stmt(b.assignment('=', b.id('_$_.document.title'), result)));
 	}
 }
 
@@ -346,7 +344,7 @@ const visitors = {
 
 			return b.new(
 				b.id('TrackedObject'),
-				b.object(node.properties.map((prop) => context.visit(prop)))
+				b.object(node.properties.map((prop) => context.visit(prop))),
 			);
 		}
 
@@ -723,9 +721,10 @@ const visitors = {
 					const metadata = { tracking: false, await: false };
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
-					const hash_arg = node.metadata.scoped && state.component.css
-						? b.literal(state.component.css.hash)
-						: undefined;
+					const hash_arg =
+						node.metadata.scoped && state.component.css
+							? b.literal(state.component.css.hash)
+							: undefined;
 					const is_html = context.state.metadata.namespace === 'html' && node.id.name !== 'svg';
 
 					if (metadata.tracking) {
@@ -1491,6 +1490,7 @@ function transform_children(children, context) {
 				node.type === 'IfStatement' ||
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
+				node.type === 'Html' ||
 				(node.type === 'Element' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
 		) ||
@@ -1585,6 +1585,14 @@ function transform_children(children, context) {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
 			} else if (node.type === 'HeadElement') {
 				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'Html') {
+				const metadata = { tracking: false, await: false };
+				const expression = visit(node.expression, { ...state, metadata });
+
+				context.state.template.push('<!>');
+
+				const id = flush_node();
+				state.update.push(b.stmt(b.call('_$_.html', id, b.thunk(expression))));
 			} else if (node.type === 'Text') {
 				const metadata = { tracking: false, await: false };
 				const expression = visit(node.expression, { ...state, metadata });
@@ -1633,7 +1641,7 @@ function transform_children(children, context) {
 		visit_head_element(head_element, context);
 	}
 
-	if (context.state.inside_head) { 
+	if (context.state.inside_head) {
 		const title_element = children.find(
 			(node) =>
 				node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'title',

package/src/runtime/internal/client/blocks.js

@@ -318,6 +318,20 @@ export function is_destroyed(target_block) {
 	return true;
 }
 
+/**
+ * @param {Node | null} node
+ * @param {Node} end
+ */
+export function remove_block_dom(node, end) {
+  while (node !== null) {
+    /** @type {Node | null} */
+    var next = node === end ? null : next_sibling(node);
+
+    /** @type {Element | Text | Comment} */ (node).remove();
+    node = next;
+  }
+}
+
 /**
  * @param {Block} block
  * @param {boolean} [remove_dom]
@@ -330,16 +344,7 @@ export function destroy_block(block, remove_dom = true) {
 
 	if ((remove_dom && (f & (BRANCH_BLOCK | ROOT_BLOCK)) !== 0) || (f & HEAD_BLOCK) !== 0) {
 		var s = block.s;
-		var node = s.start;
-		var end = s.end;
-
-		while (node !== null) {
-			var next = node === end ? null : next_sibling(node);
-
-			node.remove();
-			node = next;
-		}
-
+    remove_block_dom(s.start, s.end);
 		removed = true;
 	}
 

package/src/runtime/internal/client/html.js

@@ -0,0 +1,41 @@
+/** @import { Block } from '#client' */
+
+import { remove_block_dom, render } from './blocks.js';
+import { first_child } from './operations.js';
+import { active_block } from './runtime.js';
+import { assign_nodes, create_fragment_from_html } from './template.js';
+
+/**
+ * Renders dynamic HTML content into the DOM by inserting it before the anchor node.
+ * Manages the lifecycle of HTML blocks, removing old content and inserting new content.
+ * 
+ * TODO handle SVG/MathML
+ * 
+ * @param {ChildNode} node
+ * @param {() => string} get_html
+ * @returns {void}
+ */
+export function html(node, get_html) {
+	/** @type {ChildNode} */
+	var anchor = node;
+	/** @type {string} */
+	var html = '';
+
+	render(() => {
+		var block = /** @type {Block} */ (active_block);
+		html = get_html() + '';
+
+		if (block.s !== null && block.s.start !== null) {
+			remove_block_dom(block.s.start, /** @type {Node} */ (block.s.end));
+			block.s.start = block.s.end = null;
+		}
+
+		if (html === '') return;
+		/** @type {DocumentFragment} */
+		var node = create_fragment_from_html(html);
+
+		assign_nodes(/** @type {Node } */ (first_child(node)), /** @type {Node} */ (node.lastChild));
+
+    anchor.before(node);
+	});
+}

package/src/runtime/internal/client/index.js

@@ -64,4 +64,6 @@ export { tracked_object } from '../../object.js';
 
 export { head } from './head.js';
 
-export { script } from './script.js';
+export { script } from './script.js';
+
+export { html } from './html.js';

package/src/runtime/internal/client/template.js

@@ -35,7 +35,7 @@ export function assign_nodes(start, end) {
  * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
  * @returns {DocumentFragment}
  */
-function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
+export function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
   if (use_svg_namespace) {
     return from_namespace(html, 'svg');
   }

package/tests/client/__snapshots__/html.test.ripple.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html directive > renders dynamic html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders dynamic html 2`] = `
+<div>
+  <!---->
+  <div>
+    Updated
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders static html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/client/html.test.ripple

@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+
+describe('html directive', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+  it('renders static html', () => {
+    component App() {
+      let str = '<div>Test</div>';
+
+      {html str}
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders dynamic html', () => {
+    component App() {
+      let str = track('<div>Test</div>');
+
+      {html @str}
+
+      <button onClick={() => { @str = '<div>Updated</div>'; }}>{'Update'}</button>
+    }
+
+    render(App);
+    expect(container).toMatchSnapshot();
+
+    const button = container.querySelector('button');
+    button.click();
+    flushSync();
+
+    expect(container).toMatchSnapshot();
+  });
+});