roqa 0.0.1

package/src/runtime/cell.js

@@ -0,0 +1,37 @@
+// Create a cell (reactive value container)
+// Compiler will inline as { v: v, e: [] }
+export const cell = (v) => ({ v, e: [] });
+
+// Get cell value
+// Compiler can inline as s.v
+export const get = (s) => s.v;
+
+// Set cell value with notification (reactive update)
+// Compiler will inline as s.v = v and notification code and/or loop
+export const set = (cell, v) => {
+	cell.v = v;
+	for (let i = 0; i < cell.e.length; i++) cell.e[i](v);
+};
+
+// Set cell value without notification
+// Compiler will inline as s.v = v
+export const put = (s, v) => {
+	s.v = v;
+};
+
+// Bind an effect to a cell (for reactive DOM updates)
+// Calls the effect immediately with the current value, then on each change
+// Returns an unsubscribe function for cleanup
+export const bind = (cell, fn) => {
+	fn(cell.v); // Run immediately with current value
+	cell.e.push(fn);
+	return () => {
+		const idx = cell.e.indexOf(fn);
+		if (idx > -1) cell.e.splice(idx, 1);
+	};
+};
+
+// Notify all effects bound to a cell
+export const notify = (cell) => {
+	for (let i = 0; i < cell.e.length; i++) cell.e[i](cell.v);
+};

package/src/runtime/component.js

@@ -0,0 +1,241 @@
+import { handleRootEvents } from "./events.js";
+
+// Register event delegation once at module load
+handleRootEvents(document);
+
+// WeakMap to store props for elements before they're upgraded
+const elementProps = new WeakMap();
+
+// Set of known element property names to exclude when collecting props
+const EXCLUDED_PROPS = new Set([
+	// Standard HTMLElement properties
+	"accessKey",
+	"autocapitalize",
+	"autofocus",
+	"className",
+	"contentEditable",
+	"dir",
+	"draggable",
+	"enterKeyHint",
+	"hidden",
+	"id",
+	"inert",
+	"innerText",
+	"inputMode",
+	"lang",
+	"nonce",
+	"outerText",
+	"popover",
+	"spellcheck",
+	"style",
+	"tabIndex",
+	"title",
+	"translate",
+	// Common DOM properties
+	"innerHTML",
+	"outerHTML",
+	"textContent",
+	"nodeValue",
+]);
+
+/**
+ * Set a prop on an element (works before or after upgrade)
+ */
+export function setProp(element, propName, value) {
+	let props = elementProps.get(element);
+	if (!props) {
+		props = {};
+		elementProps.set(element, props);
+	}
+	props[propName] = value;
+}
+
+/**
+ * Get all props for an element
+ * Merges props from WeakMap with any properties set directly on the element
+ */
+export function getProps(element) {
+	const weakMapProps = elementProps.get(element);
+	const ownKeys = Object.keys(element);
+	// Fast path: No props at all
+	if (!weakMapProps && ownKeys.length === 0) return {};
+	// Collect own properties set directly on the element (not inherited)
+	const directProps = {};
+	for (let i = 0; i < ownKeys.length; i++) {
+		const key = ownKeys[i];
+		if (!EXCLUDED_PROPS.has(key) && key[0] !== "_") {
+			directProps[key] = element[key];
+		}
+	}
+	// Direct props take precedence (they're set closer to usage time)
+	return weakMapProps ? { ...weakMapProps, ...directProps } : directProps;
+}
+
+/**
+ * Base class for Roqa components with shared methods
+ */
+class RoqaElement extends HTMLElement {
+	_connectedCallbacks = [];
+	_disconnectedCallbacks = [];
+	_abortController = null;
+	_attrCallbacks = null;
+	connected(fn) {
+		this._connectedCallbacks.push(fn);
+	}
+	disconnected(fn) {
+		this._disconnectedCallbacks.push(fn);
+	}
+	on(eventName, handler) {
+		// Lazy initialization of AbortController
+		if (!this._abortController) {
+			this._abortController = new AbortController();
+		}
+		this.addEventListener(eventName, handler, { signal: this._abortController.signal });
+	}
+	emit(eventName, detail = undefined, options = {}) {
+		const { bubbles = true, composed = false } = options;
+		this.dispatchEvent(new CustomEvent(eventName, { detail, bubbles, composed }));
+	}
+	/**
+	 * Toggle a boolean attribute based on a condition.
+	 * When true, the attribute is present (empty string value).
+	 * When false, the attribute is removed.
+	 *
+	 * @param {string} name - The attribute name
+	 * @param {boolean} condition - Whether the attribute should be present
+	 *
+	 * @example
+	 * this.toggleAttr('disabled', isDisabled);
+	 * // true  -> <my-element disabled>
+	 * // false -> <my-element>
+	 */
+	toggleAttr(name, condition) {
+		if (condition) {
+			this.setAttribute(name, "");
+		} else {
+			this.removeAttribute(name);
+		}
+	}
+	/**
+	 * Set a state attribute with mutually exclusive on/off variants.
+	 * Creates a pair of attributes where only one is present at a time.
+	 *
+	 * @param {string} name - The base attribute name
+	 * @param {boolean} condition - The state value
+	 *
+	 * @example
+	 * this.stateAttr('checked', isChecked);
+	 * // true  -> <my-element checked>
+	 * // false -> <my-element unchecked>
+	 */
+	stateAttr(name, condition) {
+		const offName = "un" + name;
+		if (condition) {
+			this.setAttribute(name, "");
+			this.removeAttribute(offName);
+		} else {
+			this.removeAttribute(name);
+			this.setAttribute(offName, "");
+		}
+	}
+	/**
+	 * Register a callback for when an observed attribute changes.
+	 * The attribute must be declared in the `observedAttributes` option of defineComponent.
+	 *
+	 * @param {string} name - The attribute name (must be in observedAttributes)
+	 * @param {(newValue: string | null, oldValue: string | null) => void} callback - Called when attribute changes
+	 *
+	 * @example
+	 * // In defineComponent:
+	 * defineComponent("my-switch", MySwitch, { observedAttributes: ["checked"] });
+	 *
+	 * // In component:
+	 * this.attrChanged("checked", (newValue, oldValue) => {
+	 *   console.log("checked changed from", oldValue, "to", newValue);
+	 * });
+	 */
+	attrChanged(name, callback) {
+		if (!this._attrCallbacks) {
+			this._attrCallbacks = new Map();
+		}
+		let callbacks = this._attrCallbacks.get(name);
+		if (!callbacks) {
+			callbacks = [];
+			this._attrCallbacks.set(name, callbacks);
+		}
+		callbacks.push(callback);
+	}
+}
+
+/**
+ * Define a custom element component.
+ *
+ * @param {string} tagName - The custom element tag name (must contain a hyphen)
+ * @param {Function} fn - The component function
+ * @param {Object} [options] - Optional configuration
+ * @param {string[]} [options.observedAttributes] - Attributes to observe for changes
+ * @param {boolean} [options.formAssociated] - Whether the element participates in form submission
+ */
+export function defineComponent(tagName, fn, options = {}) {
+	if (customElements.get(tagName)) return;
+	const observedAttrs = options.observedAttributes || [];
+	const formAssociated = options.formAssociated || false;
+
+	customElements.define(
+		tagName,
+		class extends RoqaElement {
+			static get observedAttributes() {
+				return observedAttrs;
+			}
+			static get formAssociated() {
+				return formAssociated;
+			}
+			constructor() {
+				super();
+				// Initialize ElementInternals for form-associated elements
+				if (formAssociated) {
+					this.internals = this.attachInternals();
+				}
+			}
+			connectedCallback() {
+				const props = getProps(this);
+				fn.call(this, props);
+				const cbs = this._connectedCallbacks;
+				for (let i = 0; i < cbs.length; i++) {
+					const cleanup = cbs[i]();
+					if (typeof cleanup === "function") {
+						this._disconnectedCallbacks.push(cleanup);
+					}
+				}
+			}
+			disconnectedCallback() {
+				const cbs = this._disconnectedCallbacks;
+				for (let i = 0; i < cbs.length; i++) cbs[i]();
+				if (this._abortController) this._abortController.abort();
+			}
+			attributeChangedCallback(name, oldValue, newValue) {
+				// Only fire callbacks if value actually changed
+				if (oldValue === newValue) return;
+				const callbacks = this._attrCallbacks?.get(name);
+				if (callbacks) {
+					for (let i = 0; i < callbacks.length; i++) {
+						callbacks[i](newValue, oldValue);
+					}
+				}
+			}
+			// Form-associated lifecycle callbacks
+			formResetCallback() {
+				// Dispatch event so components can handle form reset
+				this.dispatchEvent(new Event("form-reset"));
+			}
+			formDisabledCallback(disabled) {
+				// Dispatch event so components can handle form disabled state
+				this.dispatchEvent(new CustomEvent("form-disabled", { detail: { disabled } }));
+			}
+			formStateRestoreCallback(state, mode) {
+				// Dispatch event so components can restore form state
+				this.dispatchEvent(new CustomEvent("form-state-restore", { detail: { state, mode } }));
+			}
+		},
+	);
+}

package/src/runtime/events.js

@@ -0,0 +1,156 @@
+// Event delegation primitives
+//
+// Instead of attaching listeners to every element, we attach one listener
+// per event type to the document (or shadow root). When an event fires, we
+// walk up the DOM path looking for elements with __eventname properties.
+//
+// Handlers are stored as:
+//   - __click = fn                -> fn.call(element, event)
+//   - __click = [fn, arg1, arg2]  -> fn.call(element, arg1, arg2, event)
+//
+// The array form avoids closure allocation in loops (e.g., <For> items).
+//
+// Heavily based on Ripple's event delegation system: https://github.com/Ripple-TS/ripple/blob/main/packages/ripple/src/runtime/internal/client/events.js
+
+// Touch events should be passive for scroll performance
+const PASSIVE_EVENTS = new Set(["touchstart", "touchmove"]);
+
+// Global registry of event types that need delegation (e.g., "click", "input")
+const allRegisteredEvents = new Set();
+
+// Callbacks to notify when new event types are registered
+const rootEventHandles = new Set();
+
+/**
+ * Core delegation handler - attached to document/shadow roots.
+ * Walks the composed path manually to find and invoke __eventname handlers.
+ */
+function handleEventPropagation(event) {
+	const handlerElement = this; // The root we're attached to (document or shadow root)
+	const path = event.composedPath();
+	let currentTarget = path[0] || event.target;
+	let pathIdx = 0;
+	const handledAt = event.__root;
+
+	// Prevent double-handling when event crosses shadow boundaries.
+	// __root marks where we've already processed this event.
+	if (handledAt) {
+		const atIdx = path.indexOf(handledAt);
+		if (atIdx !== -1 && handlerElement === document) {
+			event.__root = handlerElement;
+			return;
+		}
+		const handlerIdx = path.indexOf(handlerElement);
+		if (handlerIdx === -1) return;
+		if (atIdx <= handlerIdx) pathIdx = atIdx;
+	}
+
+	if ((currentTarget = path[pathIdx] || event.target) === handlerElement) return;
+
+	// Override currentTarget to reflect the element we're currently processing
+	Object.defineProperty(event, "currentTarget", {
+		configurable: true,
+		get: () => currentTarget || handlerElement.ownerDocument,
+	});
+
+	const eventKey = "__" + event.type;
+
+	try {
+		// Walk up the DOM tree, checking each element for a delegated handler
+		for (; currentTarget; ) {
+			const parentElement =
+				currentTarget.assignedSlot || currentTarget.parentNode || currentTarget.host || null;
+			const delegated = currentTarget[eventKey];
+			try {
+				if (delegated && !currentTarget.disabled) {
+					if (Array.isArray(delegated)) {
+						// Array form: [fn, ...args] - used in loops to avoid closures
+						const fn = delegated[0];
+						const len = delegated.length;
+						// Optimized paths for common arities (1-3 args + event)
+						if (len === 2) {
+							fn.call(currentTarget, delegated[1], event);
+						} else if (len === 3) {
+							fn.call(currentTarget, delegated[1], delegated[2], event);
+						} else if (len === 4) {
+							fn.call(currentTarget, delegated[1], delegated[2], delegated[3], event);
+						} else {
+							// Fallback for rare cases with many args
+							const args = [];
+							for (let i = 1; i < len; i++) args.push(delegated[i]);
+							args.push(event);
+							fn.apply(currentTarget, args);
+						}
+					} else {
+						// Simple form: a function
+						delegated.call(currentTarget, event);
+					}
+				}
+			} catch (error) {
+				// Don't let handler errors break propagation - report async
+				queueMicrotask(() => {
+					throw error;
+				});
+			}
+			// Stop if propagation was cancelled or we've reached the root
+			if (event.cancelBubble || parentElement === handlerElement || parentElement === null) {
+				break;
+			}
+			currentTarget = parentElement;
+		}
+	} finally {
+		event.__root = handlerElement;
+		delete event.currentTarget;
+	}
+}
+
+/**
+ * Register event types for delegation. Called by compiled code.
+ * e.g., delegate(["click", "input"]) at the end of a component file.
+ */
+export function delegate(events) {
+	for (let i = 0; i < events.length; i++) {
+		allRegisteredEvents.add(events[i]);
+	}
+	// Notify all registered roots (document + any shadow roots) about new events
+	for (const fn of rootEventHandles) {
+		fn(events);
+	}
+}
+
+// Track which roots already have delegation set up
+const handledRoots = new WeakSet();
+
+/**
+ * Set up event delegation on a root element (document or shadow root).
+ * Called once per root. Returns a cleanup function.
+ */
+export function handleRootEvents(target) {
+	if (handledRoots.has(target)) return;
+	handledRoots.add(target);
+
+	const controller = new AbortController();
+	const registeredEvents = new Set();
+
+	// Handler to add listeners for new event types
+	const eventHandle = (events) => {
+		for (const eventName of events) {
+			if (registeredEvents.has(eventName)) continue;
+			registeredEvents.add(eventName);
+			target.addEventListener(eventName, handleEventPropagation, {
+				passive: PASSIVE_EVENTS.has(eventName),
+				signal: controller.signal,
+			});
+		}
+	};
+
+	// Register for already-known events and future ones
+	eventHandle(allRegisteredEvents);
+	rootEventHandles.add(eventHandle);
+
+	// Cleanup: Abort removes all listeners, then unregister from future events
+	return () => {
+		controller.abort();
+		rootEventHandles.delete(eventHandle);
+	};
+}