ripple 0.1.1 → 0.2.0

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

@@ -0,0 +1,72 @@
+import { TRACKED_OBJECT } from './constants.js';
+import { get_descriptor } from './utils.js';
+
+/** @type {() => Node | null} */
+var first_child_getter;
+/** @type {() => Node | null} */
+var next_sibling_getter;
+
+export var is_firefox;
+
+export function init_operations() {
+	var node_prototype = Node.prototype;
+	var element_prototype = Element.prototype;
+	var object_prototype = Object.prototype;
+	var event_target_prototype = EventTarget.prototype;
+
+	is_firefox = /Firefox/.test(navigator.userAgent);
+
+	// @ts-ignore
+	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
+	// @ts-ignore
+	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
+
+	// the following assignments improve perf of lookups on DOM nodes
+	// @ts-expect-error
+	element_prototype.__click = undefined;
+	// @ts-expect-error
+	element_prototype.__className = '';
+	// @ts-expect-error
+	element_prototype.__attributes = null;
+	// @ts-expect-error
+	element_prototype.__styles = null;
+	// @ts-expect-error
+	element_prototype.__e = undefined;
+	// @ts-expect-error
+	object_prototype[TRACKED_OBJECT] = undefined;
+	// @ts-expect-error
+	event_target_prototype.__root = undefined;
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ * @returns {Node | null}
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function first_child(node) {
+	return first_child_getter.call(node);
+}
+
+export function child_frag(node)  {
+	var child = first_child(node);
+
+	if (child.nodeType === 8 && child.data === '') {
+		return next_sibling(child);
+	}
+	return child;
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ * @returns {Node | null}
+ */
+/*@__NO_SIDE_EFFECTS__*/
+export function next_sibling(node) {
+	return next_sibling_getter.call(node);
+}
+
+export function create_text(value = '') {
+	return document.createTextNode(value);
+}

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

@@ -0,0 +1,33 @@
+import { branch, destroy_block, render } from './blocks';
+import { UNINITIALIZED } from './constants';
+import { handle_root_events } from './events';
+import { create_text } from './operations';
+import { get_property } from './runtime';
+
+export function Portal(_, props) {
+	let $target = UNINITIALIZED;
+	let children = UNINITIALIZED;
+	var b = null;
+	var anchor = null;
+
+	render(() => {
+		if ($target === ($target = get_property(props, '$target'))) return;
+		if (children === (children = get_property(props, 'children'))) return;
+
+		if (b !== null) {
+			destroy_block(b);
+		}
+
+		anchor = create_text();
+		$target.append(anchor);
+
+		const cleanup_events = handle_root_events($target);
+
+		b = branch(() => children(anchor));
+
+		return () => {
+			cleanup_events();
+			anchor.remove();
+		};
+	});
+}

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

@@ -0,0 +1,156 @@
+import { effect } from './blocks';
+import { get_descriptors, get_prototype_of } from './utils';
+
+export function set_text(text, value) {
+	// For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
+	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
+	// @ts-expect-error
+	if (str !== (text.__t ??= text.nodeValue)) {
+		// @ts-expect-error
+		text.__t = str;
+		text.nodeValue = str + '';
+	}
+}
+
+var setters_cache = new Map();
+
+function get_setters(element) {
+	var setters = setters_cache.get(element.nodeName);
+	if (setters) return setters;
+	setters_cache.set(element.nodeName, (setters = []));
+
+	var descriptors;
+	var proto = element; // In the case of custom elements there might be setters on the instance
+	var element_proto = Element.prototype;
+
+	// Stop at Element, from there on there's only unnecessary setters we're not interested in
+	// Do not use contructor.name here as that's unreliable in some browser environments
+	while (element_proto !== proto) {
+		descriptors = get_descriptors(proto);
+
+		for (var key in descriptors) {
+			if (descriptors[key].set) {
+				setters.push(key);
+			}
+		}
+
+		proto = get_prototype_of(proto);
+	}
+
+	return setters;
+}
+
+export function set_attribute(element, attribute, value) {
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
+
+	if (attributes[attribute] === (attributes[attribute] = value)) return;
+
+	if (attribute === 'style' && '__styles' in element) {
+		// reset styles to force style: directive to update
+		element.__styles = {};
+	}
+
+	if (value == null) {
+		element.removeAttribute(attribute);
+	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
+		element[attribute] = value;
+	} else {
+		element.setAttribute(attribute, value);
+	}
+}
+
+/**
+ * @template V
+ * @param {V} value
+ * @param {string} [hash]
+ * @returns {string | V}
+ */
+function to_class(value, hash) {
+	return (value == null ? '' : value) + (hash ? ' ' + hash : '');
+}
+
+/**
+ * @param {HTMLElement} dom
+ * @param {string} value
+ * @param {string} [hash]
+ * @returns {void}
+ */
+export function set_class(dom, value, hash) {
+	// @ts-expect-error need to add __className to patched prototype
+	var prev_class_name = dom.__className;
+	var next_class_name = to_class(value, hash);
+
+	if (prev_class_name !== next_class_name) {
+		// Removing the attribute when the value is only an empty string causes
+		// peformance issues vs simply making the className an empty string. So
+		// we should only remove the class if the the value is nullish.
+		if (value == null && !hash) {
+			dom.removeAttribute('class');
+		} else {
+			dom.className = next_class_name;
+		}
+
+		// @ts-expect-error need to add __className to patched prototype
+		dom.__className = next_class_name;
+	}
+}
+
+export function set_value(element, value) {
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
+
+	if (
+		attributes.value ===
+			(attributes.value =
+				// treat null and undefined the same for the initial value
+				value ?? undefined) ||
+		// @ts-expect-error
+		// `progress` elements always need their value set when it's `0`
+		(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
+	) {
+		return;
+	}
+
+	// @ts-expect-error
+	element.value = value ?? '';
+}
+
+export function set_checked(element, checked) {
+	// @ts-expect-error
+	var attributes = (element.__attributes ??= {});
+
+	if (
+		attributes.checked ===
+		(attributes.checked =
+			// treat null and undefined the same for the initial value
+			checked ?? undefined)
+	) {
+		return;
+	}
+
+	// @ts-expect-error
+	element.checked = checked;
+}
+
+export function set_selected(element, selected) {
+	if (selected) {
+		// The selected option could've changed via user selection, and
+		// setting the value without this check would set it back.
+		if (!element.hasAttribute('selected')) {
+			element.setAttribute('selected', '');
+		}
+	} else {
+		element.removeAttribute('selected');
+	}
+}
+
+export function set_ref(dom, fn) {
+	effect(() => {
+		fn(dom);
+
+		return () => {
+			fn(null);
+		};
+	});
+}