creo 0.2.6 → 0.2.7

package/dist/index.js

@@ -23,9 +23,6 @@ function hasScStructuralChange(prev, next) {
   return false;
 }
 
-// src/public/primitive.ts
-var $primitive = Symbol("primitive");
-
 // src/internal/orchestrator.ts
 class Orchestrator {
   #currentEngine;
@@ -39,6 +36,14 @@ class Orchestrator {
 var orchestrator = new Orchestrator;
 
 // src/public/view.ts
+function applyRef(ref, value) {
+  if (!ref)
+    return;
+  if (typeof ref === "function")
+    ref(value);
+  else
+    ref.current = value;
+}
 function view(body) {
   return (props, slot) => {
     orchestrator.currentEngine().view(body, props, slot, maybeGetUserKey(props));
@@ -50,6 +55,9 @@ function maybeGetUserKey(params) {
   }
 }
 
+// src/public/primitive.ts
+var $primitive = Symbol("primitive");
+
 // src/public/primitives/primitives.ts
 function html(tag) {
   const fn = ({
@@ -348,6 +356,12 @@ function lis(arr) {
 }
 
 // src/internal/engine.ts
+function getConsumerRef(view2) {
+  if (view2.flags & F_PRIMITIVE)
+    return;
+  return view2.props?.ref;
+}
+
 class Engine {
   renderer;
   #dirtyQueue = new Set;
@@ -376,7 +390,8 @@ class Engine {
       unsubscribe: null,
       parent,
       scHost: null,
-      pos: -1
+      pos: -1,
+      publicRef: null
     };
     if (slot2) {
       if (typeof slot2 === "string") {
@@ -432,6 +447,10 @@ class Engine {
           child.parent = this.#collectFor ?? view2;
           this.#collector?.push(child);
         }
+      },
+      ref: (value) => {
+        view2.publicRef = value;
+        applyRef(getConsumerRef(view2), value);
       }
     });
   }
@@ -485,6 +504,14 @@ class Engine {
     return collector;
   }
   nextProps(view2, nextProps, nextSlot, preCollectedSc) {
+    const prevRef = getConsumerRef(view2);
+    const nextRef = nextProps?.ref;
+    if (prevRef !== nextRef) {
+      if (prevRef)
+        applyRef(prevRef, null);
+      if (nextRef && view2.publicRef != null)
+        applyRef(nextRef, view2.publicRef);
+    }
     const prevSc = view2.sc;
     view2.slot = nextSlot;
     if (preCollectedSc) {
@@ -758,6 +785,8 @@ class Engine {
         }
       }
     }
+    view2.body?.dispose?.();
+    applyRef(getConsumerRef(view2), null);
     if (view2.unsubscribe)
       for (const unsub of view2.unsubscribe)
         unsub();
@@ -773,6 +802,8 @@ class Engine {
       for (const child of view2.children)
         this.#disposeVirtual(child);
     }
+    view2.body?.dispose?.();
+    applyRef(getConsumerRef(view2), null);
     if (view2.unsubscribe)
       for (const unsub of view2.unsubscribe)
         unsub();
@@ -839,45 +870,6 @@ function createApp(slot2, renderer, options) {
   };
 }
 // src/render/html_render.ts
-function isEventProp(key) {
-  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
-}
-var DOM_EVENT = {
-  Click: "click",
-  Dblclick: "dblclick",
-  PointerDown: "pointerdown",
-  PointerUp: "pointerup",
-  PointerMove: "pointermove",
-  Input: "input",
-  Change: "change",
-  KeyDown: "keydown",
-  KeyUp: "keyup",
-  Focus: "focus",
-  Blur: "blur",
-  MouseEnter: "mouseenter",
-  MouseLeave: "mouseleave",
-  PointerEnter: "pointerenter",
-  PointerLeave: "pointerleave",
-  Scroll: "scroll",
-  Load: "load",
-  Error: "error",
-  Toggle: "toggle",
-  VolumeChange: "volumechange",
-  Play: "play",
-  Pause: "pause",
-  Ended: "ended",
-  TimeUpdate: "timeupdate",
-  LoadedMetadata: "loadedmetadata",
-  LoadedData: "loadeddata",
-  CanPlay: "canplay",
-  CanPlayThrough: "canplaythrough",
-  DurationChange: "durationchange",
-  RateChange: "ratechange",
-  Seeking: "seeking",
-  Seeked: "seeked",
-  Stalled: "stalled",
-  Waiting: "waiting"
-};
 var $EV = Symbol.for("creo.ev");
 var containerState = new WeakMap;
 function getState(container) {
@@ -894,7 +886,7 @@ function getState(container) {
           if (evObj) {
             const handler = evObj[domEvent];
             if (handler) {
-              handler(mapEventData(domEvent, e));
+              handler(mapEventData(domEvent, e, dom));
               if (e.cancelBubble)
                 return;
             }
@@ -912,8 +904,6 @@ function getState(container) {
 var CAPTURE_EVENTS = new Set([
   "focus",
   "blur",
-  "mouseenter",
-  "mouseleave",
   "pointerenter",
   "pointerleave",
   "scroll",
@@ -937,8 +927,6 @@ var CAPTURE_EVENTS = new Set([
   "waiting"
 ]);
 var NO_WALK_EVENTS = new Set([
-  "mouseenter",
-  "mouseleave",
   "pointerenter",
   "pointerleave"
 ]);
@@ -974,8 +962,7 @@ var POINTER_EVENTS = new Set([
   "pointerdown",
   "pointerup",
   "pointermove",
-  "mouseenter",
-  "mouseleave",
+  "pointercancel",
   "pointerenter",
   "pointerleave"
 ]);
@@ -996,11 +983,32 @@ var MEDIA_EVENTS = new Set([
   "stalled",
   "waiting"
 ]);
-function mapEventData(domEvent, e) {
+function mapEventData(domEvent, e, currentTarget) {
   let data2;
   if (POINTER_EVENTS.has(domEvent)) {
     const pe = e;
-    data2 = { x: pe.clientX, y: pe.clientY };
+    const pointerId = typeof pe.pointerId === "number" ? pe.pointerId : -1;
+    data2 = {
+      x: pe.clientX,
+      y: pe.clientY,
+      pointerId,
+      pointerType: typeof pe.pointerType === "string" ? pe.pointerType : "",
+      button: typeof pe.button === "number" ? pe.button : 0,
+      buttons: typeof pe.buttons === "number" ? pe.buttons : 0,
+      target: e.target,
+      currentTarget,
+      capture: () => {
+        if (pointerId >= 0 && currentTarget.setPointerCapture) {
+          currentTarget.setPointerCapture(pointerId);
+        }
+      },
+      release: () => {
+        if (pointerId >= 0 && currentTarget.releasePointerCapture) {
+          currentTarget.releasePointerCapture(pointerId);
+        }
+      },
+      nativeEvent: e
+    };
   } else if (domEvent === "input" || domEvent === "change") {
     const target = e.target;
     data2 = { value: target.value, checked: !!target.checked };
@@ -1081,6 +1089,9 @@ class HtmlRender {
           if (props != null && props.autofocus === true && typeof element.focus === "function") {
             element.focus();
           }
+          if (props != null) {
+            applyRef(props.ref, element);
+          }
         }
       } else {
         view2.renderRef = true;
@@ -1188,59 +1199,88 @@ class HtmlRender {
     return this.findInsertionPoint(parent);
   }
   setAttributes(element, props) {
+    if (props == null)
+      return;
     for (const key in props) {
       const value = props[key];
-      if (key === "key" || value == null)
+      if (key === "key" || key === "ref" || key === "on" || value == null)
         continue;
-      if (isEventProp(key)) {
-        this.bindEvent(element, key, value);
-        continue;
-      }
       this.setAttribute(element, key, value);
     }
+    const on = props.on;
+    if (on) {
+      for (const ev in on) {
+        const handler = on[ev];
+        if (handler)
+          this.bindEvent(element, ev, handler);
+      }
+    }
   }
   diffAttributes(element, prev, next) {
-    for (const key in prev) {
-      if (key === "key")
-        continue;
-      if (!(key in next) || next[key] == null) {
-        if (isEventProp(key)) {
-          this.unbindEvent(element, key);
-        } else {
+    if (prev) {
+      for (const key in prev) {
+        if (key === "key" || key === "ref" || key === "on")
+          continue;
+        if (next == null || !(key in next) || next[key] == null) {
           this.removeAttribute(element, key);
         }
       }
     }
-    for (const key in next) {
-      const value = next[key];
-      if (key === "key" || value == null)
-        continue;
-      if (prev[key] === value && !DOM_PROPERTIES.has(key))
-        continue;
-      if (isEventProp(key)) {
-        const creoName = key.slice(2);
-        const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+    if (next) {
+      for (const key in next) {
+        const value = next[key];
+        if (key === "key" || key === "ref" || key === "on" || value == null)
+          continue;
+        if (prev && prev[key] === value && !DOM_PROPERTIES.has(key))
+          continue;
+        this.setAttribute(element, key, value);
+      }
+    }
+    const prevOn = prev?.on;
+    const nextOn = next?.on;
+    if (prevOn !== nextOn) {
+      this.diffEvents(element, prevOn, nextOn);
+    }
+    const prevRef = prev?.ref;
+    const nextRef = next?.ref;
+    if (prevRef !== nextRef) {
+      applyRef(prevRef, null);
+      applyRef(nextRef, element);
+    }
+  }
+  diffEvents(element, prev, next) {
+    if (prev) {
+      for (const ev in prev) {
+        if (!next || next[ev] == null) {
+          this.unbindEvent(element, ev);
+        }
+      }
+    }
+    if (next) {
+      for (const ev in next) {
+        const value = next[ev];
+        if (value == null)
+          continue;
+        if (prev && prev[ev] === value)
+          continue;
+        const domEvent = ev.toLowerCase();
         const evObj = element[$EV];
         if (evObj && domEvent in evObj) {
           evObj[domEvent] = value;
         } else {
-          this.bindEvent(element, key, value);
+          this.bindEvent(element, ev, value);
         }
-      } else {
-        this.setAttribute(element, key, value);
       }
     }
   }
-  bindEvent(element, prop, handler) {
-    const creoName = prop.slice(2);
-    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+  bindEvent(element, eventName, handler) {
+    const domEvent = eventName.toLowerCase();
     const evObj = element[$EV] ?? (element[$EV] = {});
     evObj[domEvent] = handler;
     ensureDelegated(this.container, domEvent);
   }
-  unbindEvent(element, prop) {
-    const creoName = prop.slice(2);
-    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+  unbindEvent(element, eventName) {
+    const domEvent = eventName.toLowerCase();
     const evObj = element[$EV];
     if (evObj) {
       delete evObj[domEvent];
@@ -1314,6 +1354,9 @@ class HtmlRender {
       }
       delete ref.element[$EV];
     }
+    const prevProps = ref.prevProps;
+    if (prevProps)
+      applyRef(prevProps.ref, null);
     ref.element.parentNode?.removeChild(ref.element);
   }
 }
@@ -1398,9 +1441,6 @@ var VOID_TAGS = new Set([
   "wbr"
 ]);
 var DOM_PROPERTIES2 = new Set(["value", "checked", "selected", "indeterminate", "muted"]);
-function isEventProp2(key) {
-  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
-}
 function escapeHtml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -1437,12 +1477,14 @@ class HtmlStringRender {
     return this.buildChildren(rec);
   }
   buildAttrs(props) {
+    if (props == null)
+      return "";
     let result = "";
     for (const key in props) {
       const value = props[key];
       if (key === "key" || value == null)
         continue;
-      if (isEventProp2(key))
+      if (key === "on" || key === "ref")
         continue;
       if (DOM_PROPERTIES2.has(key))
         continue;
@@ -1605,6 +1647,7 @@ export {
   aside,
   article,
   area,
+  applyRef,
   address,
   abbr,
   a,
@@ -1618,4 +1661,4 @@ export {
   $primitive
 };
 
-//# debugId=403015234A66157064756E2164756E21
+//# debugId=020C6F0F4AB24D1164756E2164756E21