tutuca 0.9.57 → 0.9.59

package/dist/tutuca-dev.js

@@ -3306,6 +3306,9 @@ class Step {
   enterFrame(stack, _prev, next) {
     return stack.enter(next, {}, true);
   }
+  toAbstractPathStep() {
+    return this;
+  }
 }
 
 class BindStep extends Step {
@@ -3328,6 +3331,9 @@ class BindStep extends Step {
   withKey(key) {
     return new BindStep({ ...this.binds, key });
   }
+  toAbstractPathStep() {
+    return null;
+  }
 }
 
 class FieldStep extends Step {
@@ -3342,14 +3348,14 @@ class FieldStep extends Step {
     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);
   }
 }
 
-class FieldSeqStep extends Step {
+class SeqStep extends Step {
   constructor(field, key) {
     super();
     this.field = field;
@@ -3360,19 +3366,14 @@ class FieldSeqStep extends Step {
     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);
   }
 }
 
-class SeqKeyStep extends FieldSeqStep {
-}
-
-class SeqIndexStep extends FieldSeqStep {
-}
-
 class SeqAccessStep extends Step {
   constructor(seqField, keyField) {
     super();
@@ -3407,25 +3408,18 @@ class EachBindStep extends Step {
     const item = this.seqVal.eval(stack)?.get(this.key, null);
     return stack.enter(next, { key: this.key, value: item }, false);
   }
+  toAbstractPathStep() {
+    return null;
+  }
 }
 
-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;
-  }
+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);
+  }
 }
 
 class Path {
@@ -3438,6 +3432,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) {
@@ -3478,6 +3481,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;
@@ -3490,16 +3494,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 = [];
         }
@@ -3584,6 +3596,7 @@ function resolvePathStep(comp, nodeIds, vid) {
   return null;
 }
 var NO_EVENT_INFO = [null, null];
+var BUBBLING_EVENTS = new Set(["drop"]);
 
 class PathBuilder {
   constructor() {
@@ -3597,10 +3610,10 @@ 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));
   }
 }
 
@@ -3917,7 +3930,7 @@ class SeqAccessVal extends RenderVal {
   }
   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}]`;
@@ -8645,6 +8658,8 @@ class Component {
         this.extra[key] = o[key];
   }
   compile(ParseContext2) {
+    for (const name in this.views)
+      this.views[name].compile(new ParseContext2, this.scope, this.id);
     for (const key in this._rawDynamic) {
       const dinfo = this._rawDynamic[key];
       if (isString(dinfo)) {
@@ -8657,11 +8672,9 @@ class Component {
           this.dynamic[key] = new DynamicAlias(key, val, compName, dynName);
       }
     }
-    for (const name in this.views)
-      this.views[name].compile(new ParseContext2, this.scope, this.id);
   }
   make(args, opts) {
-    return this.Class.make(args, opts);
+    return this.Class.make(args, opts ?? { scope: this.scope });
   }
   getView(name) {
     return this.views[name] ?? this.views.main;
@@ -8857,9 +8870,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;
@@ -8972,14 +8985,15 @@ class InputEvent extends Transaction {
   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) {
@@ -9031,6 +9045,7 @@ class NameArgsTransaction extends Transaction {
     this.name = name;
     this.args = args;
     this.opts = opts;
+    this.targetPath = path;
   }
   handlerProp = null;
   getHandlerForName(comp) {
@@ -9053,22 +9068,25 @@ class SendEvent extends NameArgsTransaction {
     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);
   }
 }
 
 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;
   }
 }
 
 class Task {
-  constructor(info) {
-    this.info = info;
+  constructor() {
     this.deps = [];
     this.val = this.resolve = this.reject = null;
     this.promise = new Promise((res, rej) => {
@@ -9127,6 +9145,9 @@ class EventContext extends Dispatcher {
   get name() {
     return this.parent?.name ?? null;
   }
+  get targetPath() {
+    return this.parent.targetPath;
+  }
   stopPropagation() {
     return this.parent.stopPropagation();
   }
@@ -9510,7 +9531,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)
@@ -9546,7 +9567,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();
@@ -9582,6 +9603,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;
@@ -9619,11 +9643,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();
@@ -9677,8 +9704,6 @@ function injectCss(nodeId, style, styleTarget = document.head) {
   styleNode.innerHTML = style;
   styleTarget.appendChild(styleNode);
 }
-var TOUCH_DRAG_THRESHOLD_PX = 10;
-var TOUCH_DRAG_THRESHOLD_SQ = TOUCH_DRAG_THRESHOLD_PX * TOUCH_DRAG_THRESHOLD_PX;
 var NOOP = () => {};
 function findTouch(e, id) {
   for (const t of e.changedTouches)
@@ -14427,11 +14452,10 @@ class ClassBuilder {
           const field = fields[key];
           if (compFields.has(key))
             args[key] = mkCompField(field, opts.scope, inArgs[key]);
-          else if (field === undefined) {
+          else if (field === undefined)
             console.warn("extra argument to constructor:", name, key, inArgs);
-            continue;
-          }
-          args[key] = field.coerceOrDefault(inArgs[key]);
+          else
+            args[key] = field.coerceOrDefault(inArgs[key]);
         }
         for (const key of compFields)
           if (args[key] === undefined)
@@ -14456,15 +14480,12 @@ class ClassBuilder {
     return Class;
   }
   methods(proto) {
-    return this._mergeProto(this._methods, proto, "method");
+    for (const k in proto)
+      this._methods[k] = proto[k];
   }
   statics(proto) {
-    return this._mergeProto(this._statics, proto, "static");
-  }
-  _mergeProto(target, proto, _name) {
     for (const k in proto)
-      target[k] = proto[k];
-    return this;
+      this._statics[k] = proto[k];
   }
   addField(name, dval, FieldCls) {
     const field = new FieldCls(name, dval);
@@ -14635,7 +14656,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) {
@@ -14643,7 +14664,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);