tutuca 0.9.57 → 0.9.59

package/dist/tutuca-cli.js

@@ -3864,6 +3864,9 @@ class Step {
   enterFrame(stack, _prev, next) {
     return stack.enter(next, {}, true);
   }
+  toAbstractPathStep() {
+    return this;
+  }
 }
 
 class Path {
@@ -3876,6 +3879,15 @@ class Path {
   popStep() {
     return new Path(this.steps.slice(0, -1));
   }
+  compact() {
+    const out = [];
+    for (const step of this.steps) {
+      const s = step.toAbstractPathStep();
+      if (s !== null)
+        out.push(s);
+    }
+    return new Path(out);
+  }
   lookup(v, dval = null) {
     let curVal = v;
     for (const step of this.steps) {
@@ -3916,6 +3928,7 @@ class Path {
   }
   static fromNodeAndEventName(node, eventName, rootNode, maxDepth, comps, stopOnNoEvent = true) {
     const pathSteps = [];
+    const bubbles = BUBBLING_EVENTS.has(eventName);
     let depth = 0;
     let eventIds = [];
     let handlers = null;
@@ -3928,16 +3941,24 @@ class Path {
         if (eid !== undefined)
           eventIds.push(eid);
         if (cid !== undefined) {
-          const comp = comps.getComponentForId(+cid, vid);
-          if (isLeafComponent) {
+          const comp = comps.getComponentForId(+cid);
+          let pushStep = true;
+          if (handlers === null && (isLeafComponent || bubbles)) {
             handlers = findHandlers(comp, eventIds, vid, eventName);
-            if (handlers === null && stopOnNoEvent)
-              return NO_EVENT_INFO;
-            isLeafComponent = false;
+            if (handlers === null) {
+              if (isLeafComponent && stopOnNoEvent && !bubbles)
+                return NO_EVENT_INFO;
+            } else if (!isLeafComponent) {
+              pathSteps.length = 0;
+              pushStep = false;
+            }
+          }
+          isLeafComponent = false;
+          if (pushStep) {
+            const step = resolvePathStep(comp, nodeIds, vid);
+            if (step)
+              pathSteps.push(step);
           }
-          const step = resolvePathStep(comp, nodeIds, vid);
-          if (step)
-            pathSteps.push(step);
           eventIds = [];
           nodeIds = [];
         }
@@ -4033,13 +4054,13 @@ class PathBuilder {
     return this.add(new FieldStep(name));
   }
   index(name, index) {
-    return this.add(new SeqIndexStep(name, index));
+    return this.add(new SeqStep(name, index));
   }
   key(name, key) {
-    return this.add(new SeqKeyStep(name, key));
+    return this.add(new SeqStep(name, key));
   }
 }
-var NONE, BindStep, FieldStep, FieldSeqStep, SeqKeyStep, SeqIndexStep, SeqAccessStep, EachBindStep, EachRenderItStep, EMPTY_META, NO_EVENT_INFO;
+var NONE, BindStep, FieldStep, SeqStep, SeqAccessStep, EachBindStep, EachRenderItStep, EMPTY_META, NO_EVENT_INFO, BUBBLING_EVENTS;
 var init_path = __esm(() => {
   NONE = Symbol("NONE");
   BindStep = class BindStep extends Step {
@@ -4062,6 +4083,9 @@ var init_path = __esm(() => {
     withKey(key) {
       return new BindStep({ ...this.binds, key });
     }
+    toAbstractPathStep() {
+      return null;
+    }
   };
   FieldStep = class FieldStep extends Step {
     constructor(field) {
@@ -4075,13 +4099,13 @@ var init_path = __esm(() => {
       return root.set(this.field, v);
     }
     withIndex(i) {
-      return new SeqIndexStep(this.field, i);
+      return new SeqStep(this.field, i);
     }
     withKey(k) {
-      return new SeqKeyStep(this.field, k);
+      return new SeqStep(this.field, k);
     }
   };
-  FieldSeqStep = class FieldSeqStep extends Step {
+  SeqStep = class SeqStep extends Step {
     constructor(field, key) {
       super();
       this.field = field;
@@ -4092,16 +4116,13 @@ var init_path = __esm(() => {
       return o?.get ? o.get(this.key, dval) : dval;
     }
     setValue(root, v) {
-      return root.set(this.field, root.get(this.field).set(this.key, v));
+      const seq = root?.get(this.field, null);
+      return seq ? root.set(this.field, seq.set(this.key, v)) : root;
     }
     enterFrame(stack, _prev, next) {
       return stack.enter(next, { key: this.key }, true);
     }
   };
-  SeqKeyStep = class SeqKeyStep extends FieldSeqStep {
-  };
-  SeqIndexStep = class SeqIndexStep extends FieldSeqStep {
-  };
   SeqAccessStep = class SeqAccessStep extends Step {
     constructor(seqField, keyField) {
       super();
@@ -4135,27 +4156,21 @@ var init_path = __esm(() => {
       const item = this.seqVal.eval(stack)?.get(this.key, null);
       return stack.enter(next, { key: this.key, value: item }, false);
     }
-  };
-  EachRenderItStep = class EachRenderItStep extends Step {
-    constructor(seqField, key) {
-      super();
-      this.seqField = seqField;
-      this.key = key;
-    }
-    lookup(v, dval = null) {
-      const seq = v?.get(this.seqField, null);
-      return seq?.get ? seq.get(this.key, dval) : dval;
-    }
-    setValue(root, v) {
-      const seq = root?.get(this.seqField, null);
-      return seq ? root.set(this.seqField, seq.set(this.key, v)) : root;
+    toAbstractPathStep() {
+      return null;
     }
+  };
+  EachRenderItStep = class EachRenderItStep extends SeqStep {
     enterFrame(stack, _prev, next) {
       return stack.enter(next, { key: this.key, value: next }, false).enter(next, {}, true);
     }
+    toAbstractPathStep() {
+      return new SeqStep(this.field, this.key);
+    }
   };
   EMPTY_META = {};
   NO_EVENT_INFO = [null, null];
+  BUBBLING_EVENTS = new Set(["drop"]);
 });
 
 // src/value.js
@@ -4473,7 +4488,7 @@ var init_value = __esm(() => {
     }
     eval(stack) {
       const key = this.keyVal.eval(stack);
-      return this.seqVal.eval(stack).get(key, null);
+      return this.seqVal.eval(stack)?.get(key, null);
     }
     toString() {
       return `${this.seqVal}[${this.keyVal}]`;
@@ -8519,9 +8534,9 @@ class Transactor {
   pushSend(path, name, args = [], opts = {}, parent = null) {
     this.pushTransaction(new SendEvent(path, this, name, args, parent, opts));
   }
-  pushBubble(path, name, args = [], opts = {}, parent = null) {
+  pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
     const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
-    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts));
+    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts, targetPath));
   }
   async pushRequest(path, name, args = [], opts = {}, parent = null) {
     const curRoot = this.state.val;
@@ -8620,8 +8635,7 @@ function getValue(e) {
 }
 
 class Task {
-  constructor(info) {
-    this.info = info;
+  constructor() {
     this.deps = [];
     this.val = this.resolve = this.reject = null;
     this.promise = new Promise((res, rej) => {
@@ -8693,14 +8707,15 @@ var init_transactor = __esm(() => {
     getHandlerAndArgs(root, _instance, comps) {
       const stack = this.buildStack(root, comps);
       const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
+      const path = this.path.compact();
       let dispatcher;
       for (let i = 0;i < args.length; i++) {
         if (args[i]?.toHandlerArg) {
-          dispatcher ??= new Dispatcher(this.path, this.transactor, this);
+          dispatcher ??= new Dispatcher(path, this.transactor, this);
           args[i] = args[i].toHandlerArg(dispatcher);
         }
       }
-      args.push(new EventContext(this.path, this.transactor, this));
+      args.push(new EventContext(path, this.transactor, this));
       return [handler, args];
     }
     lookupName(name) {
@@ -8751,6 +8766,7 @@ var init_transactor = __esm(() => {
       this.name = name;
       this.args = args;
       this.opts = opts;
+      this.targetPath = path;
     }
     handlerProp = null;
     getHandlerForName(comp) {
@@ -8771,13 +8787,17 @@ var init_transactor = __esm(() => {
       return this.opts.skipSelf ? rootVal : this.updateRootValue(rootVal, comps);
     }
     afterTransaction() {
-      const { path, name, args, opts } = this;
+      const { path, name, args, opts, targetPath } = this;
       if (opts.bubbles && path.steps.length > 0)
-        this.transactor.pushBubble(path.popStep(), name, args, opts, this);
+        this.transactor.pushBubble(path.popStep(), name, args, opts, this, targetPath);
     }
   };
   BubbleEvent = class BubbleEvent extends SendEvent {
     handlerProp = "bubble";
+    constructor(path, transactor, name, args, parent, opts, targetPath) {
+      super(path, transactor, name, args, parent, opts);
+      this.targetPath = targetPath ?? path;
+    }
     stopPropagation() {
       this.opts.bubbles = false;
     }
@@ -8786,6 +8806,9 @@ var init_transactor = __esm(() => {
     get name() {
       return this.parent?.name ?? null;
     }
+    get targetPath() {
+      return this.parent.targetPath;
+    }
     stopPropagation() {
       return this.parent.stopPropagation();
     }
@@ -9163,7 +9186,7 @@ class App {
   }
   _dispatchEvent(e) {
     const { type: type3 } = e;
-    const isDrag = type3 === "dragover" || type3 === "dragstart" || type3 === "dragend";
+    const isDrag = type3 === "dragover" || type3 === "dragstart" || type3 === "dragend" || type3 === "drop";
     const { rootNode: root, maxEventNodeDepth: maxDepth, comps, transactor } = this;
     const [path, handlers] = Path.fromEvent(e, root, maxDepth, comps, !isDrag);
     if (isDrag)
@@ -9199,7 +9222,7 @@ class App {
       if (!_touch.active) {
         const dx = clientX - _touch.startX;
         const dy = clientY - _touch.startY;
-        if (dx * dx + dy * dy < TOUCH_DRAG_THRESHOLD_SQ)
+        if (dx * dx + dy * dy < 100)
           return;
         _touch.active = true;
         e.preventDefault();
@@ -9235,6 +9258,9 @@ class App {
       const dragType = e.target.dataset.dragtype ?? "?";
       const stack = path.buildStack(this.makeStack(rootValue));
       this.dragInfo = new DragInfo(path, stack, e, value, dragType, e.target);
+    } else if (type3 === "drop") {
+      e.preventDefault();
+      this._cleanDragOverAttrs();
     } else {
       if (this.dragInfo !== null) {
         delete this.dragInfo.node.dataset.dragging;
@@ -9272,11 +9298,14 @@ class App {
     }
     this._compiled = true;
   }
+  subscribeToEvents(eventNames) {
+    for (const name of eventNames)
+      this.rootNode.addEventListener(name, this, listenerOpts(name));
+  }
   start(opts) {
     if (!this._compiled)
       this.compile();
-    for (const name of this._eventNames)
-      this.rootNode.addEventListener(name, this, listenerOpts(name));
+    this.subscribeToEvents(this._eventNames);
     this.onChange((info) => {
       if (info.val !== info.old)
         this.render();
@@ -9376,7 +9405,7 @@ class DragInfo {
     return this.stack.lookupBind(name);
   }
 }
-var _evs, TOUCH_DRAG_THRESHOLD_PX = 10, TOUCH_DRAG_THRESHOLD_SQ, NOOP = () => {}, listenerOpts = (name) => name === "touchmove" ? { passive: false } : undefined;
+var _evs, NOOP = () => {}, listenerOpts = (name) => name === "touchmove" ? { passive: false } : undefined;
 var init_app = __esm(() => {
   init_components();
   init_path();
@@ -9384,7 +9413,6 @@ var init_app = __esm(() => {
   init_transactor();
   init_vdom();
   _evs = "dragstart dragover dragend touchstart touchmove touchend touchcancel".split(" ");
-  TOUCH_DRAG_THRESHOLD_SQ = TOUCH_DRAG_THRESHOLD_PX * TOUCH_DRAG_THRESHOLD_PX;
 });
 
 // deps/immutable.js
@@ -13709,7 +13737,7 @@ class Renderer {
   }
   renderRoot(stack, val, viewName = null) {
     const comp = this.comps.getCompFor(val);
-    const nid = comp.getView(viewName).anode.nodeId ?? null;
+    const nid = comp?.getView(viewName).anode.nodeId ?? null;
     return comp ? this._rValComp(stack, val, comp, nid, "ROOT", viewName) : null;
   }
   renderIt(stack, nodeId, key, viewName) {
@@ -13717,7 +13745,7 @@ class Renderer {
     return comp ? this._rValComp(stack, stack.it, comp, nodeId, key, viewName) : null;
   }
   _rValComp(stack, val, comp, nid, key, viewName) {
-    const cacheKey = `${viewName ?? stack.viewsId ?? ""}${nid}-${key}`;
+    const cacheKey = `${viewName ?? stack.viewsId ?? ""}-${nid}-${key}`;
     const cachePath = [val];
     stack._pushDynBindValuesToArray(cachePath, comp.dynamic);
     const cachedNode = this.cache.get(cachePath, cacheKey);