effect-start 0.22.0 → 0.23.0

package/dist/datastar/attributes/bind.js

@@ -1,6 +1,5 @@
-import { attribute } from "../engine.js";
-import { effect, getPath, mergePaths, } from "../engine.js";
-import { aliasify, modifyCasing, } from "../utils.js";
+import { attribute, effect, getPath, mergePaths } from "../engine.js";
+import { aliasify, modifyCasing } from "../utils.js";
 const dataURIRegex = /^data:(?<mime>[^;]+);base64,(?<contents>.*)$/;
 const empty = Symbol("empty");
 const aliasedBind = aliasify("bind");
@@ -9,7 +8,7 @@ attribute({
     requirement: "exclusive",
     apply({ el, key, mods, value, error }) {
         const signalName = key != null ? modifyCasing(key, mods) : value;
-        let get = (el, type) => type === "number" ? +el.value : el.value;
+        let get = (el, type) => (type === "number" ? +el.value : el.value);
         let set = (value) => {
             ;
             el.value = `${value}`;
@@ -18,7 +17,7 @@ attribute({
             switch (el.type) {
                 case "range":
                 case "number":
-                    get = (el, type) => type === "string" ? el.value : +el.value;
+                    get = (el, type) => (type === "string" ? el.value : +el.value);
                     break;
                 case "checkbox":
                     get = (el, type) => {
@@ -49,17 +48,14 @@ attribute({
                     }
                     get = (el, type) => el.checked ? (type === "number" ? +el.value : el.value) : empty;
                     set = (value) => {
-                        el.checked = value === (typeof value === "number"
-                            ? +el.value
-                            : el.value);
+                        el.checked = value === (typeof value === "number" ? +el.value : el.value);
                     };
                     break;
                 case "file": {
                     const syncSignal = () => {
                         const files = [...(el.files || [])];
                         const signalFiles = [];
-                        Promise
-                            .all(files.map((f) => new Promise((resolve) => {
+                        Promise.all(files.map((f) => new Promise((resolve) => {
                             const reader = new FileReader();
                             reader.onload = () => {
                                 if (typeof reader.result !== "string") {
@@ -81,8 +77,7 @@ attribute({
                             };
                             reader.onloadend = () => resolve();
                             reader.readAsDataURL(f);
-                        })))
-                            .then(() => {
+                        }))).then(() => {
                             mergePaths([[signalName, signalFiles]]);
                         });
                     };
@@ -100,9 +95,7 @@ attribute({
                 const typeMap = new Map();
                 get = (el) => [...el.selectedOptions].map((option) => {
                     const type = typeMap.get(option.value);
-                    return type === "string" || type == null
-                        ? option.value
-                        : +option.value;
+                    return type === "string" || type == null ? option.value : +option.value;
                 });
                 set = (value) => {
                     for (const option of el.options) {
@@ -126,7 +119,7 @@ attribute({
         }
         else {
             // web component
-            get = (el) => "value" in el ? el.value : el.getAttribute("value");
+            get = (el) => ("value" in el ? el.value : el.getAttribute("value"));
             set = (value) => {
                 if ("value" in el) {
                     el.value = value;
@@ -139,8 +132,7 @@ attribute({
         const initialValue = getPath(signalName);
         const type = typeof initialValue;
         let path = signalName;
-        if (Array.isArray(initialValue)
-            && !(el instanceof HTMLSelectElement && el.multiple)) {
+        if (Array.isArray(initialValue) && !(el instanceof HTMLSelectElement && el.multiple)) {
             const signalNameKebab = key ? key : value;
             const inputs = document.querySelectorAll(`[${aliasedBind}\\:${CSS.escape(signalNameKebab)}],[${aliasedBind}="${CSS.escape(signalNameKebab)}"]`);
             const paths = [];

package/dist/datastar/attributes/class.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 import { modifyCasing } from "../utils.js";
 attribute({
     name: "class",
@@ -12,9 +11,7 @@ attribute({
         let classes;
         const callback = () => {
             observer.disconnect();
-            classes = key
-                ? { [key]: rx() }
-                : rx();
+            classes = key ? { [key]: rx() } : rx();
             for (const k in classes) {
                 const classNames = k.split(/\s+/).filter((cn) => cn.length > 0);
                 if (classes[k]) {

package/dist/datastar/attributes/computed.js

@@ -1,6 +1,5 @@
-import { attribute } from "../engine.js";
-import { computed, mergePatch, mergePaths, } from "../engine.js";
-import { modifyCasing, updateLeaves, } from "../utils.js";
+import { attribute, computed, mergePatch, mergePaths } from "../engine.js";
+import { modifyCasing, updateLeaves } from "../utils.js";
 attribute({
     name: "computed",
     requirement: {

package/dist/datastar/attributes/effect.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 attribute({
     name: "effect",
     requirement: {

package/dist/datastar/attributes/indicator.js

@@ -1,8 +1,6 @@
-import { DATASTAR_FETCH_EVENT } from "../engine.js";
-import { attribute } from "../engine.js";
-import { mergePaths } from "../engine.js";
+import { attribute, DATASTAR_FETCH_EVENT, mergePaths } from "../engine.js";
 import { modifyCasing } from "../utils.js";
-import { FINISHED, STARTED, } from "../actions/fetch.js";
+import { FINISHED, STARTED } from "../actions/fetch.js";
 attribute({
     name: "indicator",
     requirement: "exclusive",

package/dist/datastar/attributes/init.js

@@ -1,6 +1,5 @@
-import { attribute } from "../engine.js";
-import { beginBatch, endBatch, } from "../engine.js";
-import { delay, modifyViewTransition, tagToMs, } from "../utils.js";
+import { attribute, beginBatch, endBatch } from "../engine.js";
+import { delay, modifyViewTransition, tagToMs } from "../utils.js";
 attribute({
     name: "init",
     requirement: {

package/dist/datastar/attributes/jsonSignals.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect, filtered, } from "../engine.js";
+import { attribute, effect, filtered } from "../engine.js";
 import { jsStrToObject } from "../utils.js";
 attribute({
     name: "json-signals",

package/dist/datastar/attributes/on.js

@@ -1,47 +1,66 @@
-import { DATASTAR_FETCH_EVENT, DATASTAR_SIGNAL_PATCH_EVENT, } from "../engine.js";
-import { attribute } from "../engine.js";
-import { beginBatch, endBatch, } from "../engine.js";
-import { modifyCasing, modifyTiming, modifyViewTransition, } from "../utils.js";
+import { attribute, beginBatch, DATASTAR_FETCH_EVENT, DATASTAR_SIGNAL_PATCH_EVENT, endBatch, } from "../engine.js";
+import { modifyTiming, modifyViewTransition } from "../utils.js";
+// TODO: support leading/trailing options for debounce/throttle
+// e.g. { debounce: { ms: 500, leading: true, noTrailing: true } }
+const configToMods = (config) => {
+    const mods = new Map();
+    for (const [k, v] of Object.entries(config)) {
+        if (v === true) {
+            mods.set(k, new Set());
+        }
+        else if (typeof v === "number") {
+            mods.set(k, new Set([`${v}ms`]));
+        }
+    }
+    return mods;
+};
 attribute({
     name: "on",
     requirement: "must",
     argNames: ["evt"],
-    apply({ el, key, mods, rx }) {
+    apply({ el, key, mods, rx, value }) {
+        let userFn;
+        let effectiveMods = mods;
+        try {
+            const parts = Function(`return [${value}]`)();
+            if (typeof parts[0] === "function") {
+                userFn = parts[0];
+                if (parts[1])
+                    effectiveMods = configToMods(parts[1]);
+            }
+        }
+        catch { }
         let target = el;
-        if (mods.has("window"))
+        if (effectiveMods.has("window"))
             target = window;
         let callback = (evt) => {
             if (evt) {
-                if (mods.has("prevent")) {
+                if (effectiveMods.has("prevent"))
                     evt.preventDefault();
-                }
-                if (mods.has("stop")) {
+                if (effectiveMods.has("stop"))
                     evt.stopPropagation();
-                }
             }
             beginBatch();
-            rx(evt);
+            userFn ? userFn(evt) : rx(evt);
             endBatch();
         };
-        callback = modifyViewTransition(callback, mods);
-        callback = modifyTiming(callback, mods);
+        callback = modifyViewTransition(callback, effectiveMods);
+        callback = modifyTiming(callback, effectiveMods);
         const evtListOpts = {
-            capture: mods.has("capture"),
-            passive: mods.has("passive"),
-            once: mods.has("once"),
+            capture: effectiveMods.has("capture"),
+            passive: effectiveMods.has("passive"),
+            once: effectiveMods.has("once"),
         };
-        if (mods.has("outside")) {
+        if (effectiveMods.has("outside")) {
             target = document;
             const cb = callback;
             callback = (evt) => {
-                if (!el.contains(evt?.target)) {
+                if (!el.contains(evt?.target))
                     cb(evt);
-                }
             };
         }
-        const eventName = modifyCasing(key, mods, "kebab");
-        if (eventName === DATASTAR_FETCH_EVENT
-            || eventName === DATASTAR_SIGNAL_PATCH_EVENT) {
+        const eventName = key;
+        if (eventName === DATASTAR_FETCH_EVENT || eventName === DATASTAR_SIGNAL_PATCH_EVENT) {
             target = document;
         }
         if (el instanceof HTMLFormElement && eventName === "submit") {

package/dist/datastar/attributes/onIntersect.js

@@ -1,6 +1,5 @@
-import { attribute } from "../engine.js";
-import { beginBatch, endBatch, } from "../engine.js";
-import { clamp, modifyTiming, modifyViewTransition, } from "../utils.js";
+import { attribute, beginBatch, endBatch } from "../engine.js";
+import { clamp, modifyTiming, modifyViewTransition } from "../utils.js";
 const once = new WeakSet();
 attribute({
     name: "on-intersect",

package/dist/datastar/attributes/onInterval.js

@@ -1,6 +1,5 @@
-import { attribute } from "../engine.js";
-import { beginBatch, endBatch, } from "../engine.js";
-import { modifyViewTransition, tagHas, tagToMs, } from "../utils.js";
+import { attribute, beginBatch, endBatch } from "../engine.js";
+import { modifyViewTransition, tagHas, tagToMs } from "../utils.js";
 attribute({
     name: "on-interval",
     requirement: {

package/dist/datastar/attributes/onSignalPatch.js

@@ -1,7 +1,5 @@
-import { DATASTAR_SIGNAL_PATCH_EVENT } from "../engine.js";
-import { attribute } from "../engine.js";
-import { beginBatch, endBatch, filtered, } from "../engine.js";
-import { aliasify, isEmpty, jsStrToObject, modifyTiming, } from "../utils.js";
+import { attribute, beginBatch, DATASTAR_SIGNAL_PATCH_EVENT, endBatch, filtered, } from "../engine.js";
+import { aliasify, isEmpty, jsStrToObject, modifyTiming } from "../utils.js";
 attribute({
     name: "on-signal-patch",
     requirement: {

package/dist/datastar/attributes/ref.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { mergePaths } from "../engine.js";
+import { attribute, mergePaths } from "../engine.js";
 import { modifyCasing } from "../utils.js";
 attribute({
     name: "ref",

package/dist/datastar/attributes/show.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 const NONE = "none";
 const DISPLAY = "display";
 attribute({

package/dist/datastar/attributes/signals.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { mergePatch, mergePaths, } from "../engine.js";
+import { attribute, mergePatch, mergePaths } from "../engine.js";
 import { modifyCasing } from "../utils.js";
 attribute({
     name: "signals",

package/dist/datastar/attributes/style.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 import { kebab } from "../utils.js";
 attribute({
     name: "style",
@@ -13,14 +12,11 @@ attribute({
         const apply = (prop, value) => {
             const initial = initialStyles.get(prop);
             if (!value && value !== 0) {
-                initial !== undefined
-                    && (initial
-                        ? style.setProperty(prop, initial)
-                        : style.removeProperty(prop));
+                initial !== undefined &&
+                    (initial ? style.setProperty(prop, initial) : style.removeProperty(prop));
             }
             else {
-                initial === undefined
-                    && initialStyles.set(prop, style.getPropertyValue(prop));
+                initial === undefined && initialStyles.set(prop, style.getPropertyValue(prop));
                 style.setProperty(prop, String(value));
             }
         };
@@ -32,10 +28,8 @@ attribute({
             else {
                 const styles = rx();
                 for (const [prop, initial] of initialStyles) {
-                    prop in styles
-                        || (initial
-                            ? style.setProperty(prop, initial)
-                            : style.removeProperty(prop));
+                    prop in styles ||
+                        (initial ? style.setProperty(prop, initial) : style.removeProperty(prop));
                 }
                 for (const prop in styles) {
                     apply(kebab(prop), styles[prop]);

package/dist/datastar/attributes/text.js

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.js";
-import { effect } from "../engine.js";
+import { attribute, effect } from "../engine.js";
 attribute({
     name: "text",
     requirement: {

package/dist/datastar/engine.d.ts

@@ -8,7 +8,7 @@ export declare const DATASTAR_SIGNAL_PATCH_EVENT = "datastar-signal-patch";
 export type JSONPatch = Record<string, any> & {
     length?: never;
 };
-export type Paths = [string, any][];
+export type Paths = Array<[string, any]>;
 export type DatastarFetchEvent = {
     type: string;
     el: HTMLOrSVG;
@@ -33,7 +33,7 @@ export type Requirement = RequirementType | {
     key?: Exclude<RequirementType, "exclusive">;
     value: Exclude<RequirementType, "exclusive">;
 };
-type Rx<B extends boolean> = (...args: any[]) => B extends true ? unknown : void;
+type Rx<B extends boolean> = (...args: Array<any>) => B extends true ? unknown : void;
 type ReqField<R, K extends "key" | "value", Return> = R extends "must" | {
     [P in K]: "must";
 } ? Return : R extends "denied" | {
@@ -70,7 +70,7 @@ export type AttributePlugin<R extends Requirement = Requirement, RxReturn extend
     apply: (ctx: AttributeContext<R, RxReturn>) => void | (() => void);
     requirement?: R;
     returnsValue?: RxReturn;
-    argNames?: string[];
+    argNames?: Array<string>;
 };
 export type WatcherContext = {
     error: ErrorFn;
@@ -82,14 +82,20 @@ export type WatcherPlugin = {
 export type ActionPlugins = Record<string, ActionPlugin>;
 export type ActionPlugin<T = any> = {
     name: string;
-    apply: (ctx: ActionContext, ...args: any[]) => T;
+    apply: (ctx: ActionContext, ...args: Array<any>) => T;
 };
 export type MergePatchArgs = {
     ifMissing?: boolean;
 };
 export type HTMLOrSVG = HTMLElement | SVGElement | MathMLElement;
+export type DataEvent = Event & {
+    signals: Record<string, any>;
+    actions: Record<string, (...args: Array<any>) => any>;
+    target: HTMLOrSVG;
+    window: Window & typeof globalThis;
+};
 export type Modifiers = Map<string, Set<string>>;
-export type EventCallbackHandler = (...args: any[]) => void;
+export type EventCallbackHandler = (...args: Array<any>) => void;
 export type SignalFilter = RegExp;
 export type SignalFilterOptions = {
     include?: RegExp | string;
@@ -129,7 +135,7 @@ declare const ReactiveFlags: {
     readonly Dirty: number;
     readonly Pending: number;
 };
-type ReactiveFlags = typeof ReactiveFlags[keyof typeof ReactiveFlags];
+type ReactiveFlags = (typeof ReactiveFlags)[keyof typeof ReactiveFlags];
 export declare const beginBatch: () => void;
 export declare const endBatch: () => void;
 export declare const startPeeking: (sub?: ReactiveNode) => void;
@@ -142,7 +148,7 @@ export declare const mergePatch: (patch: JSONPatch, { ifMissing }?: MergePatchAr
 export declare const mergePaths: (paths: Paths, options?: MergePatchArgs) => void;
 export declare const filtered: ({ include, exclude }?: SignalFilterOptions, obj?: JSONPatch) => Record<string, any>;
 export declare const root: Record<string, any>;
-export declare const actions: Record<string, (ctx: ActionContext, ...args: any[]) => any>;
+export declare const actions: Record<string, (ctx: ActionContext, ...args: Array<any>) => any>;
 export declare const attribute: <R extends Requirement, B extends boolean>(plugin: AttributePlugin<R, B>) => void;
 export declare const action: <T>(plugin: ActionPlugin<T>) => void;
 export declare const watcher: (plugin: WatcherPlugin) => void;

package/dist/datastar/engine.js

@@ -1,4 +1,4 @@
-import { aliasify, hasOwn, isHTMLOrSVG, isPojo, pathToObj, snake, } from "./utils.js";
+import { aliasify, hasOwn, isHTMLOrSVG, isPojo, pathToObj, snake } from "./utils.js";
 /*********
  * consts.ts
  *********/
@@ -84,7 +84,7 @@ const flush = () => {
     while (notifyIndex < queuedEffectsLength) {
         const effect = queuedEffects[notifyIndex];
         queuedEffects[notifyIndex++] = undefined;
-        run(effect, effect.flags_ &= ~EffectFlags.Queued);
+        run(effect, (effect.flags_ &= ~EffectFlags.Queued));
     }
     notifyIndex = 0;
     queuedEffectsLength = 0;
@@ -125,8 +125,8 @@ const notify = (e) => {
     }
 };
 const run = (e, flags) => {
-    if (flags & 16
-        || (flags & 32 && checkDirty(e.deps_, e))) {
+    if (flags & 16 ||
+        (flags & 32 && checkDirty(e.deps_, e))) {
         startPeeking(e);
         startTracking(e);
         beginBatch();
@@ -148,7 +148,7 @@ const run = (e, flags) => {
         const dep = link.dep_;
         const depFlags = dep.flags_;
         if (depFlags & EffectFlags.Queued) {
-            run(dep, dep.flags_ = depFlags & ~EffectFlags.Queued);
+            run(dep, (dep.flags_ = depFlags & ~EffectFlags.Queued));
         }
         link = link.nextDep_;
     }
@@ -184,8 +184,8 @@ const signalOper = (s, ...value) => {
 };
 const computedOper = (c) => {
     const flags = c.flags_;
-    if (flags & 16
-        || (flags & 32 && checkDirty(c.deps_, c))) {
+    if (flags & 16 ||
+        (flags & 32 && checkDirty(c.deps_, c))) {
         if (updateComputed(c)) {
             const subs = c.subs_;
             if (subs) {
@@ -302,21 +302,20 @@ const propagate = (link) => {
     top: while (true) {
         const sub = link.sub_;
         let flags = sub.flags_;
-        if (!(flags
-            & 60)) {
+        if (!(flags &
+            60)) {
             sub.flags_ = flags | 32;
         }
         else if (!(flags & 12)) {
             flags = 0;
         }
         else if (!(flags & 4)) {
-            sub.flags_ = (flags & ~8)
-                | 32;
+            sub.flags_ =
+                (flags & ~8) | 32;
         }
-        else if (!(flags & 48)
-            && isValidLink(link, sub)) {
-            sub.flags_ = flags
-                | 40;
+        else if (!(flags & 48) &&
+            isValidLink(link, sub)) {
+            sub.flags_ = flags | 40;
             flags &= 1;
         }
         else {
@@ -354,9 +353,9 @@ const propagate = (link) => {
 const startTracking = (sub) => {
     version++;
     sub.depsTail_ = undefined;
-    sub.flags_ = (sub.flags_
-        & ~56)
-        | 4;
+    sub.flags_ =
+        (sub.flags_ & ~56) |
+            4;
 };
 const endTracking = (sub) => {
     const depsTail_ = sub.depsTail_;
@@ -376,8 +375,8 @@ const checkDirty = (link, sub) => {
         if (sub.flags_ & 16) {
             dirty = true;
         }
-        else if ((flags & 17)
-            === 17) {
+        else if ((flags & 17) ===
+            17) {
             if (update(dep)) {
                 const subs = dep.subs_;
                 if (subs.nextSub_) {
@@ -386,8 +385,8 @@ const checkDirty = (link, sub) => {
                 dirty = true;
             }
         }
-        else if ((flags & 33)
-            === 33) {
+        else if ((flags & 33) ===
+            33) {
             if (link.nextSub_ || link.prevSub_) {
                 stack = { value_: link, prev_: stack };
             }
@@ -439,8 +438,8 @@ const shallowPropagate = (link) => {
     do {
         const sub = link.sub_;
         const flags = sub.flags_;
-        if ((flags & 48)
-            === 32) {
+        if ((flags & 48) ===
+            32) {
             sub.flags_ = flags | 16;
             if (flags & 2) {
                 notify(sub);
@@ -598,8 +597,8 @@ export const mergePatch = (patch, { ifMissing } = {}) => {
 export const mergePaths = (paths, options) => mergePatch(pathToObj(paths), options);
 const mergeInner = (patch, target, targetParent, prefix, ifMissing) => {
     if (isPojo(patch)) {
-        if (!(hasOwn(targetParent, target)
-            && (isPojo(targetParent[target]) || Array.isArray(targetParent[target])))) {
+        if (!(hasOwn(targetParent, target) &&
+            (isPojo(targetParent[target]) || Array.isArray(targetParent[target])))) {
             targetParent[target] = {};
         }
         for (const key in patch) {
@@ -648,8 +647,7 @@ const error = (ctx, reason, metadata = {}) => {
     const r = snake(reason);
     const q = new URLSearchParams({
         metadata: JSON.stringify(metadata),
-    })
-        .toString();
+    }).toString();
     const c = JSON.stringify(metadata, null, 2);
     e.message = `${reason}\nMore info: ${url}/${r}?${q}\nContext: ${c}`;
     return e;
@@ -727,7 +725,7 @@ const applyEls = (els, onlyNew) => {
     }
 };
 const observe = (mutations) => {
-    for (const { target, type, attributeName, addedNodes, removedNodes, } of mutations) {
+    for (const { target, type, attributeName, addedNodes, removedNodes } of mutations) {
         if (type === "childList") {
             for (const node of removedNodes) {
                 if (isHTMLOrSVG(node)) {
@@ -742,10 +740,10 @@ const observe = (mutations) => {
                 }
             }
         }
-        else if (type === "attributes"
-            && attributeName.startsWith("data-")
-            && isHTMLOrSVG(target)
-            && !shouldIgnore(target)) {
+        else if (type === "attributes" &&
+            attributeName.startsWith("data-") &&
+            isHTMLOrSVG(target) &&
+            !shouldIgnore(target)) {
             const key = attributeName.slice(5);
             const value = target.getAttribute(attributeName);
             if (value === null) {
@@ -814,16 +812,12 @@ const applyAttributePlugin = (el, attrKey, value, onlyNew) => {
             },
             rx: undefined,
         };
-        const keyReq = (plugin.requirement
-            && (typeof plugin.requirement === "string"
-                ? plugin.requirement
-                : plugin.requirement.key))
-            || "allowed";
-        const valueReq = (plugin.requirement
-            && (typeof plugin.requirement === "string"
-                ? plugin.requirement
-                : plugin.requirement.value))
-            || "allowed";
+        const keyReq = (plugin.requirement &&
+            (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.key)) ||
+            "allowed";
+        const valueReq = (plugin.requirement &&
+            (typeof plugin.requirement === "string" ? plugin.requirement : plugin.requirement.value)) ||
+            "allowed";
         const keyProvided = key !== undefined && key !== null && key !== "";
         const valueProvided = value !== undefined && value !== null && value !== "";
         if (keyProvided) {
@@ -884,7 +878,43 @@ const applyAttributePlugin = (el, attrKey, value, onlyNew) => {
         elCleanups.set(rawKey, cleanups);
     }
 };
-const genRx = (value, { returnsValue = false, argNames = [], cleanups = new Map(), } = {}) => {
+const genRx = (value, { returnsValue = false, argNames = [], cleanups = new Map() } = {}) => {
+    if (/^\s*(?:async\s+)?(?:\(.*?\)\s*=>|[\w$]+\s*=>|function\s*[\w$]*\s*\()/.test(value)) {
+        const userFn = Function(`return (${value.trim()})`)();
+        return (el, ...args) => {
+            const actionsProxy = new Proxy({}, {
+                get: (_, name) => (...actionArgs) => {
+                    const err = error.bind(0, {
+                        plugin: { type: "action", name },
+                        element: { id: el.id, tag: el.tagName },
+                        expression: { fnContent: value, value },
+                    });
+                    const fn = actions[name];
+                    if (fn)
+                        return fn({ el, evt: undefined, error: err, cleanups }, ...actionArgs);
+                    throw err("UndefinedAction");
+                },
+            });
+            const dataEvt = args[0] instanceof Event ? args[0] : new Event("datastar:expression");
+            Object.defineProperties(dataEvt, {
+                target: { value: el },
+                signals: { value: root },
+                actions: { value: actionsProxy },
+                window: { value: window },
+            });
+            try {
+                return userFn(dataEvt);
+            }
+            catch (e) {
+                console.error(e);
+                throw error({
+                    element: { id: el.id, tag: el.tagName },
+                    expression: { fnContent: value, value },
+                    error: e.message,
+                }, "ExecuteExpression");
+            }
+        };
+    }
     let expr = "";
     if (returnsValue) {
         const statementRe = /(\/(\\\/|[^/])*\/|"(\\"|[^"])*"|'(\\'|[^'])*'|`(\\`|[^`])*`|\(\s*((function)\s*\(\s*\)|(\(\s*\))\s*=>)\s*(?:\{[\s\S]*?\}|[^;){]*)\s*\)\s*\(\s*\)|[^;])+/gm;
@@ -912,10 +942,8 @@ const genRx = (value, { returnsValue = false, argNames = [], cleanups = new Map(
     }
     expr = expr
         .replace(/\$\['([a-zA-Z_$\d][\w$]*)'\]/g, "$$$1")
-        .replace(/\$([a-zA-Z_\d]\w*(?:[.-]\w+)*)/g, (_, signalName) => signalName
-        .split(".")
-        .reduce((acc, part) => `${acc}['${part}']`, "$"));
-    expr = expr.replaceAll(/@([A-Za-z_$][\w$]*)\(/g, "__action(\"$1\",evt,");
+        .replace(/\$([a-zA-Z_\d]\w*(?:[.-]\w+)*)/g, (_, signalName) => signalName.split(".").reduce((acc, part) => `${acc}['${part}']`, "$"));
+    expr = expr.replaceAll(/@([A-Za-z_$][\w$]*)\(/g, '__action("$1",evt,');
     for (const [k, v] of escaped) {
         expr = expr.replace(k, v);
     }

package/dist/datastar/happydom.d.ts

@@ -0,0 +1 @@
+export {};