@abide/abide 0.115.0 → 0.116.1

package/src/ui/Router.ts

@@ -5,6 +5,7 @@ import { firstMatch, type Params, partsOf } from '#shared/matchRoute.ts'
 import { unmounted } from '#shared/mount.ts'
 import { NAVIGATION_HEADER } from '#shared/NAVIGATION_HEADER.ts'
 import { OFFLINE_SAVED } from '#shared/OFFLINE_CACHES.ts'
+import { REACHED_MESSAGE } from '#shared/REACHED_MESSAGE.ts'
 import type { ShareScope } from '#shared/reactive/share.ts'
 import { arrive, route } from '#shared/route.ts'
 import { rankRoutes, type Segment } from '#shared/routePattern.ts'
@@ -400,14 +401,18 @@ export class Router {
      */
     private writeAddress(target: URL, replace: boolean, left: Scroll): void {
         const full = `${target.pathname}${target.search}${target.hash}`
-        if (replace) {
-            history.replaceState(entryAt(this.index, null), '', full)
-            return
+        // A step to a fragment, or to the address standing, reaches no page the worker lacks.
+        const moved =
+            target.pathname !== location.pathname ||
+            target.search !== location.search
+        if (replace) history.replaceState(entryAt(this.index, null), '', full)
+        else {
+            this.remember(left)
+            this.index += 1
+            this.scrolls.length = this.index
+            history.pushState(entryAt(this.index, null), '', full)
         }
-        this.remember(left)
-        this.index += 1
-        this.scrolls.length = this.index
-        history.pushState(entryAt(this.index, null), '', full)
+        if (moved) reached(target)
     }
 
     /**
@@ -720,6 +725,22 @@ async function savedOffline(target: URL): Promise<boolean> {
     return saved !== undefined
 }
 
+/**
+ * Tells the service worker an address a navigation reached, for it to keep (45.24).
+ *
+ * POSTED AS THE ADDRESS IS WRITTEN, rather than heard from 30.15's ask: a step within the standing
+ * route asks nothing, the ask's redirect lands elsewhere than it asked, and a superseded one writes
+ * no address.
+ */
+function reached(at: URL): void {
+    const controller = navigator.serviceWorker?.controller
+    if (controller == null) return
+    // A page is kept by its address, which a fragment is no part of.
+    const address = new URL(at)
+    address.hash = ''
+    controller.postMessage({ [REACHED_MESSAGE]: address.href })
+}
+
 /**
  * Asks the server's `middleware` about an address; `undefined` where the fetch failed.
  *

package/src/ui/bindFiles.ts

@@ -0,0 +1,42 @@
+import { boundValue, writeBound } from '#shared/boundValue.ts'
+import type { Scope } from './Scope.ts'
+
+/**
+ * Keeps a file input's files in step with a `bind:files` value, both ways.
+ *
+ * 32.73 — A FILE INPUT'S FILES ARE A LIST, with or without `multiple`, and no markup: the server has
+ * none to write. A `FileList` cannot be built, so a list written in is handed over through a
+ * `DataTransfer`, and an empty one clears the input through `value`, the one write it takes.
+ */
+export function bindFiles(
+    element: Element,
+    operand: unknown,
+    scope: Scope,
+): void {
+    const bound = element as HTMLInputElement
+    scope.watch(() => {
+        const files = (boundValue(operand) ?? []) as readonly File[]
+        if (holdsFiles(bound.files, files)) return
+        if (files.length === 0) {
+            bound.value = ''
+            return
+        }
+        const transfer = new DataTransfer()
+        for (const file of files) transfer.items.add(file)
+        bound.files = transfer.files
+    })
+    bound.addEventListener('change', () => {
+        const picked: File[] = []
+        for (const file of bound.files ?? []) picked.push(file)
+        writeBound(operand, picked)
+    })
+}
+
+/** Whether an input already holds `files`, the same files in the same order. */
+function holdsFiles(held: FileList | null, files: readonly File[]): boolean {
+    const count = held?.length ?? 0
+    if (count !== files.length) return false
+    for (let index = 0; index < count; index++)
+        if ((held as FileList)[index] !== files[index]) return false
+    return true
+}

package/src/ui/index.ts

@@ -40,6 +40,7 @@ export {
     textHere,
 } from './adoptWalk.ts'
 export { bindElement } from './bindElement.ts'
+export { bindFiles } from './bindFiles.ts'
 export { bindGroup } from './bindGroup.ts'
 export { bindProperty } from './bindProperty.ts'
 export { bindSpread } from './bindSpread.ts'