kireji 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "kireji",
- "version": "0.13.0",
+ "version": "0.14.0",
  "description": "A web framework for stateful, entropy-perfect, multi-origin web applications. Currently in alpha. Expect breaking changes for version 0. Use with caution!",
  "files": [
   "src/",

package/src/parts/abstract/part/attr-click.js

@@ -0,0 +1 @@
+return `data-onclick="${sanitizeAttr(JSON.stringify([part.host, METHOD_NAME, ...ARGS]))}"`

package/src/parts/abstract/part/part.json

@@ -73,6 +73,10 @@
    "METHOD_NAME = 'point'",
    "...ARGS"
   ],
+  "attr-click": [
+   "METHOD_NAME = 'onclick'",
+   "...ARGS"
+  ],
   "manifest-resolve-owner-of": [
    "PROPERTY_KEY"
   ],

package/src/parts/abstract/part/type.d.ts

@@ -33,8 +33,10 @@ declare interface IPart<TOwner, TSubpart>
  readonly "runtimeReference": string
  /** An optional display name for the part. */
  readonly "title"?: string
- /** Generates the attribute string that sets up an onpointerdown listener that calls `part[METHOD_NAME](event,this,...ARGS)`. */
+ /** Generates the attribute string that sets up an onpointerdown listener that calls `part[METHOD_NAME](event,this,...ARGS)`. Typically, use `pointer.handle({ ... })` within that method to react to manage complex events drag-and-drop, clicks, double clicks, etc. @remarks This approach will always use the pointer events (not click, touch or mouse events). Use `clickAttr` instead of `pointAttr` to create a traditional click event handler. */
  readonly pointAttr(METHOD_NAME: string = "point", ...ARGS: any[])
+ /** Generates the attribute string that sets up an onclick listener that calls `part[METHOD_NAME](event,this,...ARGS)`. Using `pointAttr` with `pointer.handle({ ... })` is the preferred method of reacting to clicks but this event can be used for special cases like requesting a pointerlock, where the browser requires a proper click event. */
+ readonly clickAttr(METHOD_NAME: string = "onclick", ...ARGS: any[])
  /** Registers a listener that calls RECEIVER[CALLBACK_NAME](this) after the event of the given type occurs. */
  readonly attach(EVENT_TYPE: string, RECEIVER: IPartAny, CALLBACK_NAME: string): void
  /** Unregisters the listener that calls RECEIVER[CALLBACK_NAME](this) after the event of the given type occurs. */

package/src/parts/core/address-bar/{sync-install.js → async-install.js}

@@ -1,4 +1,8 @@
+await agent.promise
+
 addressBar.define({
  throttleDuration: { value: agent.isSafari ? 350 : 75 },
  throttleStartTime: { value: _.now, writable: true }
-})
+})
+
+debug(agent.isSafari, addressBar.throttleDuration)

package/src/parts/core/client/async-install.js

@@ -61,10 +61,7 @@ logScope(0, "Finalizing Hydration", log => {
  })
 
  // Prevent normal click events to ensure the pointerdown event always takes precedence.
- document.addEventListener("click", pointerEvent => {
-  pointerEvent.preventDefault()
-  pointerEvent.stopPropagation()
- }, { capture: true })
+ document.addEventListener("click", client.blockClicks, { capture: true })
 
  log("Setting Initial State")
  // Propagate the initial state (matched to the snapshot exactly).

package/src/parts/core/client/clicks-block.js

@@ -0,0 +1,17 @@
+const clickHandler = POINTER_EVENT.target.getAttribute("data-onclick")
+
+if (clickHandler) {
+
+ const [partHost, methodName, ...args] = JSON.parse(clickHandler)
+ const part = partsByHost[partHost]
+
+ if (part[methodName] && typeof part[methodName] === "function")
+  part[methodName](...args)
+ else
+  throw new ReferenceError(`ClickAttr Error: could not find a method called "${methodName}" on part ${partHost}.`)
+
+ return
+}
+
+POINTER_EVENT.preventDefault()
+POINTER_EVENT.stopPropagation()

package/src/parts/core/client/part.json

@@ -3,6 +3,9 @@
  "methods": {
   "loop-request": [
    "REQUEST_TIME"
+  ],
+  "clicks-block": [
+   "POINTER_EVENT"
   ]
  }
 }

package/src/parts/core/client/type.d.ts

@@ -4,6 +4,8 @@ declare interface IClient
  // Serialized Properties.
  /** Requests an animation frame that distributes the loop function throughout the ecosystem and calls itself again. @remarks Can only be run on the client. */
  readonly requestLoop(REQUEST_TIME: DOMHighResTimeStamp): void
+ /** The click event handler that is used globally on the client to prevent the click event from taking precedence over pointer events. */
+ readonly blockClicks(POINTER_EVENT: PointerEvent): void
 
  // Runtime Properties.
  /** Whether or not the server-rendered page has been fully "taken over" by the client-side framework. @remarks Can only become true in the client environment. */

package/src/parts/core/server/sync-install.js

@@ -62,7 +62,7 @@ const
 
     // color.device.light = !prefersDarkMode
     _.setRoute(`https://${host}${pathname}`)
-    status = +(host in _.menuApplications ? 200 : _.applications[host].status ?? 503)
+    status = +(host in _.menuApplications ? 200 : _.applications[host].status ?? 200)
     const customHeaders = _.applications[host].customHeaders ?? {}
     head = { ...indexHeader, ...customHeaders }
     body = _['part.html']