@oscarpalmer/atoms 0.26.0 → 0.27.0

package/dist/js/html/attribute.mjs

@@ -0,0 +1,123 @@
+// src/js/html/attribute.ts
+import {
+effect,
+isComputed,
+isSignal
+} from "../signal";
+import {addEvent} from "./event";
+import {getIndex} from "./node";
+function isBadAttribute(attribute) {
+  const { name, value } = attribute;
+  return /^on/i.test(name) || /^(href|src|xlink:href)$/i.test(name) && /(data:text\/html|javascript:)/i.test(value);
+}
+function isBooleanAttribute(name) {
+  return booleanAttributes.has(name.toLowerCase());
+}
+function mapAttributes(values, element) {
+  const attributes = Array.from(element.attributes);
+  const { length } = attributes;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const attribute = attributes[index];
+    const isBad = isBadAttribute(attribute);
+    const value = getIndex(attribute.value, true);
+    if (isBad || value === -1 || !(element instanceof HTMLElement || element instanceof SVGElement)) {
+      if (isBad) {
+        element.removeAttribute(attribute.name);
+      }
+      continue;
+    }
+    if (attribute.name.startsWith("@")) {
+      addEvent(element, attribute.name, values[value]);
+    } else {
+      setReactive(element, attribute.name, values[value]);
+    }
+  }
+}
+var setAnyAttribute = function(element, name, reactive) {
+  const isValue = /^value$/i.test(name);
+  return effect(() => {
+    const { value } = reactive;
+    if (isValue) {
+      element.value = value;
+      return;
+    }
+    if (value == null) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, value);
+    }
+  });
+};
+var setBooleanAttribute = function(element, name, reactive) {
+  return effect(() => {
+    const { value } = reactive;
+    if (value === true) {
+      element.setAttribute(name, "");
+    } else {
+      element.removeAttribute(name);
+    }
+  });
+};
+var setClassAttribute = function(element, name, reactive) {
+  const classes = name.split(".").slice(1).map((name2) => name2.trim()).filter((name2) => name2.length > 0);
+  if (classes.length === 0) {
+    return;
+  }
+  return effect(() => {
+    if (reactive.value === true) {
+      element.classList.add(...classes);
+    } else {
+      element.classList.remove(...classes);
+    }
+  });
+};
+var setReactive = function(element, name, value) {
+  element.removeAttribute(name);
+  const reactive = typeof value === "function" ? value() : value;
+  if (!(isComputed(reactive) || isSignal(reactive))) {
+    return;
+  }
+  switch (true) {
+    case isBooleanAttribute(name):
+      return setBooleanAttribute(element, name, reactive);
+    case /^class\./i.test(name):
+      return setClassAttribute(element, name, reactive);
+    case /^style\./i.test(name):
+      return setStyleAttribute(element, name, reactive);
+    default:
+      return setAnyAttribute(element, name, reactive);
+  }
+};
+var setStyleAttribute = function(element, name, reactive) {
+  const [, first, second] = name.split(".");
+  const property = first.trim();
+  const suffix = second?.trim();
+  if (property.length === 0 || suffix !== undefined && suffix.length === 0) {
+    return;
+  }
+  return effect(() => {
+    const { value } = reactive;
+    if (value == null || value === false || value === true && suffix == null) {
+      element.style.removeProperty(property);
+    } else {
+      element.style.setProperty(property, value === true ? suffix : `${value}${suffix ?? ""}`);
+    }
+  });
+};
+var booleanAttributes = new Set([
+  "checked",
+  "disabled",
+  "hidden",
+  "inert",
+  "multiple",
+  "open",
+  "readonly",
+  "required",
+  "selected"
+]);
+export {
+  mapAttributes,
+  isBooleanAttribute,
+  isBadAttribute
+};

package/dist/js/html/event.mjs

@@ -0,0 +1,9 @@
+// src/js/html/event.ts
+function addEvent(element, name, value) {
+  if (typeof value === "function") {
+    element.addEventListener(name.slice(1), value);
+  }
+}
+export {
+  addEvent
+};

package/dist/js/html/index.mjs

@@ -0,0 +1,56 @@
+// src/js/html/index.ts
+import {createNodes, mapNodes} from "./node";
+var getExpression = function(values, value, expression) {
+  if (expression == null) {
+    return value;
+  }
+  if (typeof expression === "function" || expression instanceof Node || expression instanceof Templated) {
+    values.push(expression);
+    return `${value}<!--atoms.${values.length - 1}-->`;
+  }
+  if (Array.isArray(expression)) {
+    const { length } = expression;
+    let html = "";
+    let index = 0;
+    for (;index < length; index += 1) {
+      html += getExpression(values, "", expression[index]);
+    }
+    return `${value}${html}`;
+  }
+  return `${value}${expression}`;
+};
+var getHtml = function(data) {
+  const { expressions, strings, values } = data;
+  const { length } = strings;
+  let html = "";
+  let index = 0;
+  for (;index < length; index += 1) {
+    html += getExpression(values, strings[index], expressions[index]);
+  }
+  return html;
+};
+function html(strings, ...expressions) {
+  return new Templated(strings, expressions);
+}
+function isTemplated(value) {
+  return value instanceof Templated;
+}
+
+class Templated {
+  constructor(strings, expressions) {
+    this.data = {
+      expressions,
+      strings,
+      values: []
+    };
+  }
+  render() {
+    const html2 = getHtml(this.data);
+    const nodes = createNodes(html2);
+    return mapNodes(this.data.values, nodes);
+  }
+}
+export {
+  isTemplated,
+  html
+};

package/dist/js/html/models.mjs

@@ -0,0 +1,5 @@
+// src/js/html/models.ts
+var models_default = undefined;
+export {
+  models_default as default
+};

package/dist/js/html/node.mjs

@@ -0,0 +1,74 @@
+// src/js/html/node.ts
+import {isTemplated} from "../html";
+import {effect, isComputed, isSignal} from "../signal";
+import {mapAttributes} from "./attribute";
+function createNodes(html2) {
+  const template = document.createElement("template");
+  template.innerHTML = html2;
+  const cloned = template.content.cloneNode(true);
+  const scripts = Array.from(cloned.querySelectorAll("script"));
+  for (const script of scripts) {
+    script.remove();
+  }
+  cloned.normalize();
+  return cloned;
+}
+function getIndex(content, full) {
+  const [, index] = (full ? /^<!--atoms\.(\d+)-->$/ : /^atoms\.(\d+)$/).exec(content) ?? [];
+  return index == null ? -1 : Number.parseInt(index, 10);
+}
+var getNode = function(value) {
+  if (value instanceof Node) {
+    return value;
+  }
+  return isTemplated(value) ? value.render() : document.createTextNode(String(value));
+};
+function mapNodes(values, node) {
+  const children = Array.from(node.childNodes);
+  const { length } = children;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const node2 = children[index];
+    const value = node2.nodeType === 8 ? getIndex(node2.nodeValue ?? "", false) : -1;
+    if (value > -1) {
+      setNode(node2, values[value]);
+      continue;
+    }
+    if (node2 instanceof Element) {
+      mapAttributes(values, node2);
+    }
+    if (node2.hasChildNodes()) {
+      mapNodes(values, node2);
+    }
+  }
+  return node;
+}
+var setNode = function(comment, value) {
+  if (typeof value === "function") {
+    setReactive(comment, value);
+    return;
+  }
+  const node = getNode(value);
+  comment.replaceWith(...node.constructor.name === "DocumentFragment" ? Array.from(node.childNodes) : [node]);
+};
+var setReactive = function(comment, callback) {
+  const reactive = callback();
+  if (!(isComputed(reactive) || isSignal(reactive))) {
+    return;
+  }
+  const text = document.createTextNode("");
+  effect(() => {
+    const { value } = reactive;
+    text.textContent = String(value);
+    if (value == null && text.parentNode != null) {
+      text.replaceWith(comment);
+    } else if (value != null && comment.parentNode != null) {
+      comment.replaceWith(text);
+    }
+  });
+};
+export {
+  mapNodes,
+  getIndex,
+  createNodes
+};

package/dist/js/index.js

@@ -597,15 +597,33 @@ class Manager {
 var cloned = new Map;
 var frames = new Map;
 // src/js/signal.ts
-var _getter = function(instance) {
-  const last = running[running.length - 1];
+function computed(callback) {
+  return new Computed(callback);
+}
+function effect(callback) {
+  return new Effect(callback);
+}
+var getValue = function(instance) {
+  const last = effects[effects.length - 1];
   if (last !== undefined) {
     instance._effects.add(last);
     last._values.add(instance);
   }
   return instance._value;
 };
-var _setter = function(instance, value2, run) {
+function isComputed(value2) {
+  return value2 instanceof Computed;
+}
+function isEffect(value2) {
+  return value2 instanceof Effect;
+}
+function isReactive(value2) {
+  return value2 instanceof Reactive;
+}
+function isSignal(value2) {
+  return value2 instanceof Signal;
+}
+var setValue = function(instance, value2, run) {
   if (!run && Object.is(value2, instance._value)) {
     return;
   }
@@ -615,32 +633,17 @@ var _setter = function(instance, value2, run) {
     return;
   }
   instance._frame = requestAnimationFrame(() => {
-    for (const effect of instance._effects) {
-      effect._callback();
+    for (const effect2 of instance._effects) {
+      effect2._callback();
     }
     instance._frame = undefined;
   });
 };
-function computed(callback) {
-  return new Computed(callback);
-}
-function effect(callback) {
-  return new Effect(callback);
-}
-function isComputed(value2) {
-  return value2 instanceof Computed;
-}
-function isEffect(value2) {
-  return value2 instanceof Effect;
-}
-function isSignal(value2) {
-  return value2 instanceof Signal;
-}
 function signal(value2) {
   return new Signal(value2);
 }
 
-class Value {
+class Reactive {
   _active = true;
   _effects = new Set;
   _frame;
@@ -655,16 +658,14 @@ class Value {
   }
 }
 
-class Computed extends Value {
+class Computed extends Reactive {
   _effect;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   constructor(callback) {
     super();
-    this._effect = effect(() => {
-      _setter(this, callback(), false);
-    });
+    this._effect = effect(() => setValue(this, callback(), false));
   }
   run() {
     this._effect.run();
@@ -687,9 +688,9 @@ class Effect {
       return;
     }
     this._active = true;
-    const index = running.push(this) - 1;
+    const index = effects.push(this) - 1;
     this._callback();
-    running.splice(index, 1);
+    effects.splice(index, 1);
   }
   stop() {
     if (!this._active) {
@@ -703,13 +704,13 @@ class Effect {
   }
 }
 
-class Signal extends Value {
+class Signal extends Reactive {
   _value;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   set value(value2) {
-    _setter(this, value2, false);
+    setValue(this, value2, false);
   }
   constructor(_value) {
     super();
@@ -720,13 +721,13 @@ class Signal extends Value {
       return;
     }
     this._active = true;
-    _setter(this, this._value, true);
+    setValue(this, this._value, true);
   }
   stop() {
     this._active = false;
   }
 }
-var running = [];
+var effects = [];
 // src/js/timer.ts
 function repeat(callback, options) {
   const count = typeof options?.count === "number" ? options.count : Infinity;
@@ -823,6 +824,7 @@ export {
   proxy,
   merge,
   isSignal,
+  isReactive,
   isEffect,
   isComputed,
   insert,

package/dist/js/signal.js

@@ -1,13 +1,31 @@
 // src/js/signal.ts
-var _getter = function(instance) {
-  const last = running[running.length - 1];
+function computed(callback) {
+  return new Computed(callback);
+}
+function effect(callback) {
+  return new Effect(callback);
+}
+var getValue = function(instance) {
+  const last = effects[effects.length - 1];
   if (last !== undefined) {
     instance._effects.add(last);
     last._values.add(instance);
   }
   return instance._value;
 };
-var _setter = function(instance, value, run) {
+function isComputed(value) {
+  return value instanceof Computed;
+}
+function isEffect(value) {
+  return value instanceof Effect;
+}
+function isReactive(value) {
+  return value instanceof Reactive;
+}
+function isSignal(value) {
+  return value instanceof Signal;
+}
+var setValue = function(instance, value, run) {
   if (!run && Object.is(value, instance._value)) {
     return;
   }
@@ -17,32 +35,17 @@ var _setter = function(instance, value, run) {
     return;
   }
   instance._frame = requestAnimationFrame(() => {
-    for (const effect of instance._effects) {
-      effect._callback();
+    for (const effect2 of instance._effects) {
+      effect2._callback();
     }
     instance._frame = undefined;
   });
 };
-function computed(callback) {
-  return new Computed(callback);
-}
-function effect(callback) {
-  return new Effect(callback);
-}
-function isComputed(value) {
-  return value instanceof Computed;
-}
-function isEffect(value) {
-  return value instanceof Effect;
-}
-function isSignal(value) {
-  return value instanceof Signal;
-}
 function signal(value) {
   return new Signal(value);
 }
 
-class Value {
+class Reactive {
   _active = true;
   _effects = new Set;
   _frame;
@@ -57,16 +60,14 @@ class Value {
   }
 }
 
-class Computed extends Value {
+class Computed extends Reactive {
   _effect;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   constructor(callback) {
     super();
-    this._effect = effect(() => {
-      _setter(this, callback(), false);
-    });
+    this._effect = effect(() => setValue(this, callback(), false));
   }
   run() {
     this._effect.run();
@@ -89,9 +90,9 @@ class Effect {
       return;
     }
     this._active = true;
-    const index = running.push(this) - 1;
+    const index = effects.push(this) - 1;
     this._callback();
-    running.splice(index, 1);
+    effects.splice(index, 1);
   }
   stop() {
     if (!this._active) {
@@ -105,13 +106,13 @@ class Effect {
   }
 }
 
-class Signal extends Value {
+class Signal extends Reactive {
   _value;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   set value(value) {
-    _setter(this, value, false);
+    setValue(this, value, false);
   }
   constructor(_value) {
     super();
@@ -122,16 +123,17 @@ class Signal extends Value {
       return;
     }
     this._active = true;
-    _setter(this, this._value, true);
+    setValue(this, this._value, true);
   }
   stop() {
     this._active = false;
   }
 }
-var running = [];
+var effects = [];
 export {
   signal,
   isSignal,
+  isReactive,
   isEffect,
   isComputed,
   effect,

package/dist/js/signal.mjs

@@ -1,13 +1,31 @@
 // src/js/signal.ts
-var _getter = function(instance) {
-  const last = running[running.length - 1];
+function computed(callback) {
+  return new Computed(callback);
+}
+function effect(callback) {
+  return new Effect(callback);
+}
+var getValue = function(instance) {
+  const last = effects[effects.length - 1];
   if (last !== undefined) {
     instance._effects.add(last);
     last._values.add(instance);
   }
   return instance._value;
 };
-var _setter = function(instance, value, run) {
+function isComputed(value) {
+  return value instanceof Computed;
+}
+function isEffect(value) {
+  return value instanceof Effect;
+}
+function isReactive(value) {
+  return value instanceof Reactive;
+}
+function isSignal(value) {
+  return value instanceof Signal;
+}
+var setValue = function(instance, value, run) {
   if (!run && Object.is(value, instance._value)) {
     return;
   }
@@ -17,32 +35,17 @@ var _setter = function(instance, value, run) {
     return;
   }
   instance._frame = requestAnimationFrame(() => {
-    for (const effect of instance._effects) {
-      effect._callback();
+    for (const effect2 of instance._effects) {
+      effect2._callback();
     }
     instance._frame = undefined;
   });
 };
-function computed(callback) {
-  return new Computed(callback);
-}
-function effect(callback) {
-  return new Effect(callback);
-}
-function isComputed(value) {
-  return value instanceof Computed;
-}
-function isEffect(value) {
-  return value instanceof Effect;
-}
-function isSignal(value) {
-  return value instanceof Signal;
-}
 function signal(value) {
   return new Signal(value);
 }
 
-class Value {
+class Reactive {
   _active = true;
   _effects = new Set;
   _frame;
@@ -57,16 +60,14 @@ class Value {
   }
 }
 
-class Computed extends Value {
+class Computed extends Reactive {
   _effect;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   constructor(callback) {
     super();
-    this._effect = effect(() => {
-      _setter(this, callback(), false);
-    });
+    this._effect = effect(() => setValue(this, callback(), false));
   }
   run() {
     this._effect.run();
@@ -89,9 +90,9 @@ class Effect {
       return;
     }
     this._active = true;
-    const index = running.push(this) - 1;
+    const index = effects.push(this) - 1;
     this._callback();
-    running.splice(index, 1);
+    effects.splice(index, 1);
   }
   stop() {
     if (!this._active) {
@@ -105,13 +106,13 @@ class Effect {
   }
 }
 
-class Signal extends Value {
+class Signal extends Reactive {
   _value;
   get value() {
-    return _getter(this);
+    return getValue(this);
   }
   set value(value) {
-    _setter(this, value, false);
+    setValue(this, value, false);
   }
   constructor(_value) {
     super();
@@ -122,16 +123,17 @@ class Signal extends Value {
       return;
     }
     this._active = true;
-    _setter(this, this._value, true);
+    setValue(this, this._value, true);
   }
   stop() {
     this._active = false;
   }
 }
-var running = [];
+var effects = [];
 export {
   signal,
   isSignal,
+  isReactive,
   isEffect,
   isComputed,
   effect,

package/package.json

@@ -111,5 +111,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.26.0"
+	"version": "0.27.0"
 }

package/src/js/signal.ts

@@ -1,16 +1,19 @@
 type InternalEffect = {
 	_callback: () => void;
-	_values: Set<InternalValue>;
+	_values: Set<InternalReactive>;
 };
 
-type InternalValue = {
+type InternalReactive = {
 	_active: boolean;
 	_effects: Set<InternalEffect>;
 	_frame: number | undefined;
 	_value: unknown;
 };
 
-abstract class Value<T = unknown> {
+/**
+ * The base class for reactive values
+ */
+abstract class Reactive<T = unknown> {
 	protected _active = true;
 	protected _effects = new Set<InternalEffect>();
 	protected _frame: number | undefined;
@@ -56,22 +59,20 @@ abstract class Value<T = unknown> {
 /**
  * A computed, reactive value
  */
-class Computed<T> extends Value<T> {
+class Computed<T> extends Reactive<T> {
 	private readonly _effect: Effect;
 
 	/**
 	 * @inheritdoc
 	 */
 	get value(): T {
-		return _getter(this as never) as T;
+		return getValue(this as never) as T;
 	}
 
 	constructor(callback: () => T) {
 		super();
 
-		this._effect = effect(() => {
-			_setter(this as never, callback(), false);
-		});
+		this._effect = effect(() => setValue(this as never, callback(), false));
 	}
 
 	/**
@@ -94,7 +95,7 @@ class Computed<T> extends Value<T> {
  */
 class Effect {
 	private _active = false;
-	private readonly _values = new Set<InternalValue>();
+	private readonly _values = new Set<InternalReactive>();
 
 	constructor(private readonly _callback: () => void) {
 		this.run();
@@ -110,11 +111,11 @@ class Effect {
 
 		this._active = true;
 
-		const index = running.push(this as never) - 1;
+		const index = effects.push(this as never) - 1;
 
 		this._callback();
 
-		running.splice(index, 1);
+		effects.splice(index, 1);
 	}
 
 	/**
@@ -138,19 +139,19 @@ class Effect {
 /**
  * A reactive value
  */
-class Signal<T> extends Value<T> {
+class Signal<T> extends Reactive<T> {
 	/**
 	 * @inheritdoc
 	 */
 	get value(): T {
-		return _getter(this as never) as T;
+		return getValue(this as never) as T;
 	}
 
 	/**
 	 * Sets the value
 	 */
 	set value(value: T) {
-		_setter(this as never, value, false);
+		setValue(this as never, value, false);
 	}
 
 	constructor(protected readonly _value: T) {
@@ -167,7 +168,7 @@ class Signal<T> extends Value<T> {
 
 		this._active = true;
 
-		_setter(this as never, this._value, true);
+		setValue(this as never, this._value, true);
 	}
 
 	/**
@@ -178,40 +179,7 @@ class Signal<T> extends Value<T> {
 	}
 }
 
-const running: InternalEffect[] = [];
-
-function _getter(instance: InternalValue): unknown {
-	const last = running[running.length - 1];
-
-	if (last !== undefined) {
-		instance._effects.add(last);
-		last._values.add(instance);
-	}
-
-	return instance._value;
-}
-
-function _setter<T>(instance: InternalValue, value: T, run: boolean): void {
-	if (!run && Object.is(value, instance._value)) {
-		return;
-	}
-
-	instance._value = value;
-
-	cancelAnimationFrame(instance._frame as never);
-
-	if (!instance._active) {
-		return;
-	}
-
-	instance._frame = requestAnimationFrame(() => {
-		for (const effect of instance._effects) {
-			effect._callback();
-		}
-
-		instance._frame = undefined;
-	});
-}
+const effects: InternalEffect[] = [];
 
 /**
  * Creates a computed, reactive value
@@ -227,6 +195,17 @@ export function effect(callback: () => void): Effect {
 	return new Effect(callback);
 }
 
+function getValue(instance: InternalReactive): unknown {
+	const last = effects[effects.length - 1];
+
+	if (last !== undefined) {
+		instance._effects.add(last);
+		last._values.add(instance);
+	}
+
+	return instance._value;
+}
+
 /**
  * Is the value a computed, reactive value?
  */
@@ -241,6 +220,10 @@ export function isEffect(value: unknown): value is Effect {
 	return value instanceof Effect;
 }
 
+export function isReactive(value: unknown): value is Reactive<unknown> {
+	return value instanceof Reactive;
+}
+
 /**
  * Is the value a reactive value?
  */
@@ -248,6 +231,28 @@ export function isSignal(value: unknown): value is Signal<unknown> {
 	return value instanceof Signal;
 }
 
+function setValue<T>(instance: InternalReactive, value: T, run: boolean): void {
+	if (!run && Object.is(value, instance._value)) {
+		return;
+	}
+
+	instance._value = value;
+
+	cancelAnimationFrame(instance._frame as never);
+
+	if (!instance._active) {
+		return;
+	}
+
+	instance._frame = requestAnimationFrame(() => {
+		for (const effect of instance._effects) {
+			effect._callback();
+		}
+
+		instance._frame = undefined;
+	});
+}
+
 /**
  * Creates a reactive value
  */
@@ -255,4 +260,4 @@ export function signal<T>(value: T): Signal<T> {
 	return new Signal(value);
 }
 
-export type {Computed, Effect, Signal};
+export type {Computed, Effect, Reactive, Signal};

package/types/signal.d.ts

@@ -1,14 +1,17 @@
 type InternalEffect = {
     _callback: () => void;
-    _values: Set<InternalValue>;
+    _values: Set<InternalReactive>;
 };
-type InternalValue = {
+type InternalReactive = {
     _active: boolean;
     _effects: Set<InternalEffect>;
     _frame: number | undefined;
     _value: unknown;
 };
-declare abstract class Value<T = unknown> {
+/**
+ * The base class for reactive values
+ */
+declare abstract class Reactive<T = unknown> {
     protected _active: boolean;
     protected _effects: Set<InternalEffect>;
     protected _frame: number | undefined;
@@ -41,7 +44,7 @@ declare abstract class Value<T = unknown> {
 /**
  * A computed, reactive value
  */
-declare class Computed<T> extends Value<T> {
+declare class Computed<T> extends Reactive<T> {
     private readonly _effect;
     /**
      * @inheritdoc
@@ -77,7 +80,7 @@ declare class Effect {
 /**
  * A reactive value
  */
-declare class Signal<T> extends Value<T> {
+declare class Signal<T> extends Reactive<T> {
     protected readonly _value: T;
     /**
      * @inheritdoc
@@ -113,6 +116,7 @@ export declare function isComputed(value: unknown): value is Computed<unknown>;
  * Is the value a reactive effect?
  */
 export declare function isEffect(value: unknown): value is Effect;
+export declare function isReactive(value: unknown): value is Reactive<unknown>;
 /**
  * Is the value a reactive value?
  */
@@ -121,4 +125,4 @@ export declare function isSignal(value: unknown): value is Signal<unknown>;
  * Creates a reactive value
  */
 export declare function signal<T>(value: T): Signal<T>;
-export type { Computed, Effect, Signal };
+export type { Computed, Effect, Reactive, Signal };