@remix-run/ui 0.1.0 → 0.1.2

package/src/runtime/mixins/mixin.ts

@@ -598,7 +598,6 @@ class MixinHandleImpl
     this.#activeScope = scope
     if (!scope) return
     if (this.#scopeTargets.has(scope)) return
-    this.#scopeSignals.set(scope, new AbortController())
     this.#scopeTargets.set(scope, new TypedEventTarget<MixinHandleEventMap<Element>>())
     this.#scopePhaseCounts.set(scope, { beforeUpdate: 0, commit: 0 })
   }
@@ -616,8 +615,11 @@ class MixinHandleImpl
       this.#decrementGlobalPhaseCount('beforeUpdate', scopePhaseCounts.beforeUpdate)
       this.#decrementGlobalPhaseCount('commit', scopePhaseCounts.commit)
     }
-    this.#scopeSignals.get(scope)?.abort()
-    this.#scopeSignals.delete(scope)
+    let controller = this.#scopeSignals.get(scope)
+    if (controller) {
+      controller.abort()
+      this.#scopeSignals.delete(scope)
+    }
     this.#scopePhaseCounts.delete(scope)
     this.#scopeTargets.delete(scope)
     if (this.#activeScope === scope) {
@@ -646,7 +648,10 @@ class MixinHandleImpl
 
   #getScopeSignal(scope: symbol) {
     let controller = this.#scopeSignals.get(scope)
-    invariant(controller)
+    if (!controller) {
+      controller = new AbortController()
+      this.#scopeSignals.set(scope, controller)
+    }
     return controller.signal
   }
 

package/src/runtime/mixins/on-mixin.ts

@@ -1,28 +1,28 @@
-import { createMixin } from './mixin.ts'
+import { createMixin, type MixinType } from './mixin.ts'
 import type { ElementProps } from '../jsx.ts'
 import type { MixinDescriptor } from './mixin.ts'
-import type {
-  EventType as AddEventType,
-  ListenerFor as AddEventListenerFor,
-} from '../event-listeners.ts'
-
-export type { Dispatched } from '../event-listeners.ts'
+import type { EnsureEvent, EventMap } from '../event-listeners.ts'
 
 type SignaledListener<event extends Event> = (
   event: event,
   signal: AbortSignal,
 ) => void | Promise<void>
 
-type EventType<target extends Element> = Extract<AddEventType<target>, string>
+type EventType<target extends Element> = string & keyof EventMap<target>
+
 type ListenerFor<target extends Element, type extends EventType<target>> = SignaledListener<
-  Parameters<AddEventListenerFor<target, type>>[0]
+  EnsureEvent<EventMap<target>[type], target>
 >
+export type OnMixinDescriptor = {
+  type: typeof onMixinType
+  args: [type: string, handler: SignaledListener<Event>, captureBoolean?: boolean]
+}
 
-const onMixin = createMixin<
+const onMixinType: MixinType<
   Element,
   [type: string, handler: SignaledListener<Event>, captureBoolean?: boolean],
   ElementProps
->((handle) => {
+> = (handle) => {
   let currentHandler: SignaledListener<Event> = () => {}
   let currentType = ''
   let currentCapture = false
@@ -61,7 +61,15 @@ const onMixin = createMixin<
 
     return handle.element
   }
-})
+}
+
+const onMixin = createMixin(onMixinType)
+
+export function isOnMixinDescriptor(descriptor: unknown): descriptor is OnMixinDescriptor {
+  if (!descriptor || typeof descriptor !== 'object') return false
+  let candidate = descriptor as { type?: unknown; args?: unknown }
+  return candidate.type === onMixinType && Array.isArray(candidate.args)
+}
 
 /**
  * Attaches a typed DOM event handler through the mixin system.

package/src/runtime/navigation.ts

@@ -42,8 +42,20 @@ export async function navigate(href: string, options?: NavigationOptions) {
  * Starts listening for Navigation API transitions and routes them through frame reloads.
  *
  * @param signal Abort signal used to remove the listener.
+ * @returns void
  */
 export function startNavigationListener(signal: AbortSignal) {
+  return startNavigationListenerImpl(signal, { getTopFrame, getNamedFrame })
+}
+
+// Internal version used by unit tests so we can inject stub frames
+export function startNavigationListenerImpl(
+  signal: AbortSignal,
+  options: {
+    getTopFrame: typeof getTopFrame
+    getNamedFrame: typeof getNamedFrame
+  },
+) {
   let navigation = window.navigation
 
   navigation.updateCurrentEntry({
@@ -53,13 +65,17 @@ export function startNavigationListener(signal: AbortSignal) {
   navigation.addEventListener(
     'navigate',
     (event) => {
-      if (!event.canIntercept) return
+      // Safari seems to incorrectly set canIntercept to true for sub-domain navigations, so
+      // we do a host check ourselves/. The spec is clear that a different host should prevent
+      // interception so this is likely a bug in Safari:
+      // https://html.spec.whatwg.org/multipage/nav-history-apis.html#can-have-its-url-rewritten
+      if (!event.canIntercept || isCrossOriginDestination(event)) return
 
       let state = getRuntimeNavigationState(event)
       if (!state) return
 
-      let topFrame = getTopFrame()
-      let namedFrame = state.target ? getNamedFrame(state.target) : undefined
+      let topFrame = options.getTopFrame()
+      let namedFrame = state.target ? options.getNamedFrame(state.target) : undefined
       let frame = namedFrame ?? topFrame
 
       event.intercept({
@@ -86,6 +102,11 @@ function isRuntimeNavigation(info: unknown): info is NavigationState {
   return typeof info === 'object' && info != null && '$rmx' in info
 }
 
+function isCrossOriginDestination(event: NavigateEvent): boolean {
+  let destination = new URL(event.destination.url)
+  return destination.origin !== window.location.origin
+}
+
 function getRuntimeNavigationState(event: NavigateEvent): NavigationState | undefined {
   if (event.navigationType === 'traverse') {
     return getTraverseNavigationState(event)