@remix-run/ui 0.1.1 → 0.2.0

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

@@ -1,4 +1,4 @@
-import { createMixin, renderMixinElement } from './mixin.ts'
+import { createMixin, renderMixinElement, type MixinFactory } from './mixin.ts'
 import { navigate } from '../navigation.ts'
 import { on } from './on-mixin.ts'
 import type { ElementProps } from '../jsx.ts'
@@ -21,108 +21,110 @@ const nativeLinkHostTypes = new Set(['a', 'area'])
 /**
  * Adds client-side navigation behavior to anchor-like elements.
  */
-export const link = createMixin<
+export const link: MixinFactory<
   HTMLElement,
   [href: string, options?: NavigationOptions],
   LinkCurrentProps
->((handle, hostType) => {
-  let suppressKeyboardClick = false
+> = createMixin<HTMLElement, [href: string, options?: NavigationOptions], LinkCurrentProps>(
+  (handle, hostType) => {
+    let suppressKeyboardClick = false
 
-  return (href, options, props: LinkCurrentProps) => {
-    if (nativeLinkHostTypes.has(hostType)) {
-      return renderMixinElement(handle.element, {
-        ...(props ?? {}),
-        href,
-        ...(options?.target == null ? {} : { 'rmx-target': options.target }),
-        ...(options?.src == null ? {} : { 'rmx-src': options.src }),
-        ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
-      })
-    }
-
-    let nextProps = { ...props }
-    if (nextProps.role == null) {
-      nextProps.role = 'link'
-    }
-    if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
-      nextProps['aria-disabled'] = 'true'
-    }
-    if (hostType === 'button' && nextProps.type == null) {
-      nextProps.type = 'button'
-    }
-    if (
-      hostType !== 'button' &&
-      nextProps.tabIndex == null &&
-      nextProps.tabindex == null &&
-      nextProps.contentEditable == null &&
-      nextProps.contenteditable == null
-    ) {
-      nextProps.tabIndex = 0
-    }
+    return (href, options, props: LinkCurrentProps) => {
+      if (nativeLinkHostTypes.has(hostType)) {
+        return renderMixinElement(handle.element, {
+          ...(props ?? {}),
+          href,
+          ...(options?.target == null ? {} : { 'rmx-target': options.target }),
+          ...(options?.src == null ? {} : { 'rmx-src': options.src }),
+          ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
+        })
+      }
 
-    return renderMixinElement(handle.element, {
-      ...nextProps,
-      mix: [
-        on('click', (event) => {
-          if (event.detail === 0 && suppressKeyboardClick) {
-            suppressKeyboardClick = false
-            event.preventDefault()
-            return
-          }
+      let nextProps = { ...props }
+      if (nextProps.role == null) {
+        nextProps.role = 'link'
+      }
+      if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
+        nextProps['aria-disabled'] = 'true'
+      }
+      if (hostType === 'button' && nextProps.type == null) {
+        nextProps.type = 'button'
+      }
+      if (
+        hostType !== 'button' &&
+        nextProps.tabIndex == null &&
+        nextProps.tabindex == null &&
+        nextProps.contentEditable == null &&
+        nextProps.contenteditable == null
+      ) {
+        nextProps.tabIndex = 0
+      }
 
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
-            event.preventDefault()
-            return
-          }
-          if (event.button !== 0) return
+      return renderMixinElement(handle.element, {
+        ...nextProps,
+        mix: [
+          on('click', (event) => {
+            if (event.detail === 0 && suppressKeyboardClick) {
+              suppressKeyboardClick = false
+              event.preventDefault()
+              return
+            }
 
-          event.preventDefault()
-          if (event.metaKey || event.ctrlKey) {
-            globalThis.open(href, '_blank')
-            return
-          }
+            suppressKeyboardClick = false
+            if (isDisabledElement(event.currentTarget)) {
+              event.preventDefault()
+              return
+            }
+            if (event.button !== 0) return
 
-          void navigate(href, options)
-        }),
-        on('auxclick', (event) => {
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
             event.preventDefault()
-            return
-          }
-          if (event.button !== 1) return
+            if (event.metaKey || event.ctrlKey) {
+              globalThis.open(href, '_blank')
+              return
+            }
 
-          event.preventDefault()
-          globalThis.open(href, '_blank')
-        }),
-        on('keydown', (event) => {
-          if (event.key === 'Enter') {
-            if (event.repeat) return
+            void navigate(href, options)
+          }),
+          on('auxclick', (event) => {
+            suppressKeyboardClick = false
             if (isDisabledElement(event.currentTarget)) {
               event.preventDefault()
               return
             }
+            if (event.button !== 1) return
 
-            suppressKeyboardClick = hostType === 'button'
             event.preventDefault()
-            void navigate(href, options)
-            return
-          }
+            globalThis.open(href, '_blank')
+          }),
+          on('keydown', (event) => {
+            if (event.key === 'Enter') {
+              if (event.repeat) return
+              if (isDisabledElement(event.currentTarget)) {
+                event.preventDefault()
+                return
+              }
 
-          if (hostType === 'button' && event.key === ' ') {
-            suppressKeyboardClick = true
-            event.preventDefault()
-          }
-        }),
-        on('keyup', (event) => {
-          if (hostType === 'button' && event.key === ' ') {
-            event.preventDefault()
-          }
-        }),
-      ],
-    })
-  }
-})
+              suppressKeyboardClick = hostType === 'button'
+              event.preventDefault()
+              void navigate(href, options)
+              return
+            }
+
+            if (hostType === 'button' && event.key === ' ') {
+              suppressKeyboardClick = true
+              event.preventDefault()
+            }
+          }),
+          on('keyup', (event) => {
+            if (hostType === 'button' && event.key === ' ') {
+              event.preventDefault()
+            }
+          }),
+        ],
+      })
+    }
+  },
+)
 
 function isDisabledElement(node: Element) {
   return (

package/src/runtime/mixins/mixin.ts

@@ -130,6 +130,14 @@ export type MixinDescriptor<
   readonly __node?: (node: node) => void
 }
 
+export type MixinFactory<
+  node extends EventTarget = Element,
+  args extends unknown[] = [],
+  props extends ElementProps = ElementProps,
+> = <boundNode extends node = node>(
+  ...args: RebindTuple<args, node, boundNode>
+) => MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props>
+
 type PreviousMixDepth = [0, 0, 1, 2, 3, 4]
 type FalsyMixValue = false | 0 | 0n | '' | null | undefined
 type NullableMixValue<descriptor> = descriptor | FalsyMixValue
@@ -244,7 +252,7 @@ export function createMixin<
   node extends EventTarget = Element,
   args extends unknown[] = [],
   props extends ElementProps = ElementProps,
->(type: MixinType<node, args, props>) {
+>(type: MixinType<node, args, props>): MixinFactory<node, args, props> {
   return <boundNode extends node = node>(
     ...args: RebindTuple<args, node, boundNode>
   ): MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props> => ({
@@ -598,7 +606,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 +623,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 +656,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/mixins/ref-mixin.ts

@@ -1,4 +1,4 @@
-import { createMixin } from './mixin.ts'
+import { createMixin, type MixinFactory } from './mixin.ts'
 import type { ElementProps } from '../jsx.ts'
 
 /**
@@ -9,8 +9,8 @@ export type RefCallback<node extends EventTarget> = (node: node, signal: AbortSi
 /**
  * Calls a callback when an element is inserted and aborts it when removed.
  */
-export const ref = createMixin<Element, [callback: RefCallback<Element>], ElementProps>(
-  (handle) => {
+export const ref: MixinFactory<Element, [callback: RefCallback<Element>], ElementProps> =
+  createMixin<Element, [callback: RefCallback<Element>], ElementProps>((handle) => {
     let controller: AbortController | undefined
 
     handle.addEventListener('insert', (event) => {
@@ -28,5 +28,4 @@ export const ref = createMixin<Element, [callback: RefCallback<Element>], Elemen
       callback = nextCallback
       return handle.element
     }
-  },
-)
+  })

package/src/runtime/navigation.ts

@@ -65,7 +65,11 @@ export function startNavigationListenerImpl(
   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
@@ -98,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)