@typed/ui 0.2.0 → 0.3.0

package/src/Anchor.ts

@@ -9,11 +9,11 @@ import type { DefaultEventMap, ElementSource } from "@typed/template/ElementSour
 import * as EventHandler from "@typed/template/EventHandler"
 import type { Placeholder } from "@typed/template/Placeholder"
 import type { Renderable } from "@typed/template/Renderable"
-import type { TemplateFx } from "@typed/template/RenderTemplate"
-import { html } from "@typed/template/RenderTemplate"
+import type { RenderEvent } from "@typed/template/RenderEvent"
+import { html, type RenderTemplate } from "@typed/template/RenderTemplate"
 import type { Rendered } from "@typed/wire"
 import type { ReadonlyRecord, Scope } from "effect"
-import { Effect } from "effect"
+import * as Effect from "effect/Effect"
 import { uncapitalize } from "effect/String"
 import type { HTMLAnchorElementProperties } from "./internal/dom-properties.js"
 
@@ -22,14 +22,14 @@ import type { HTMLAnchorElementProperties } from "./internal/dom-properties.js"
  */
 export type AnchorProps =
   & {
-    readonly [K in keyof HTMLAnchorElementProperties]:
+    readonly [K in keyof HTMLAnchorElementProperties]?:
       | HTMLAnchorElementProperties[K]
       | Placeholder.Any<HTMLAnchorElementProperties[K]>
-      | Directive.Directive<any, any>
+      | undefined
   }
   & {
-    readonly ref?: (ref: ElementSource<HTMLAnchorElement>) => Effect.Effect<any, any, any>
-    readonly data?: Placeholder.Any<ReadonlyRecord.ReadonlyRecord<any>>
+    readonly ref?: ((ref: ElementSource<HTMLAnchorElement>) => Effect.Effect<any, any, any>) | undefined
+    readonly data?: Placeholder.Any<ReadonlyRecord.ReadonlyRecord<any>> | undefined
   }
   & EventHandlerProps<HTMLAnchorElement>
 
@@ -58,60 +58,52 @@ export function Anchor<
 >(
   props: Props,
   ...children: Children
-): TemplateFx<
-  Placeholder.Context<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
+): Fx.Fx<
+  RenderTemplate | Scope.Scope | Placeholder.Context<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
   Placeholder.Error<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
-  HTMLAnchorElement
+  RenderEvent
 > {
-  const ref = Directive.ref(({ value: ref }) =>
+  const {
+    data,
+    hash,
+    host,
+    hostname,
+    href,
+    hreflang,
+    pathname,
+    port,
+    protocol,
+    ref,
+    scrollLeft,
+    scrollTop,
+    search,
+    ...rest
+  } = props
+
+  const refDirective = Directive.ref(({ value }) =>
     Effect.gen(function*(_) {
-      yield* _(addEventListeners(props, ref))
+      yield* _(addEventListeners(props, value))
 
-      if (props.ref) {
-        yield* _(props.ref(ref as any))
+      if (ref) {
+        yield* _(ref(value as any))
       }
     })
   )
   return html`<a 
-    ref="${ref}"
-    .data="${props.data}"
-    ?hidden="${props.hidden}"
-    ?hidefocus="${props.hideFocus}"
-    ?spellcheck="${props.spellcheck}"
-    .scrollLeft="${props.scrollLeft}"
-    .scrollTop="${props.scrollTop}"
-    accesskey="${props.accessKey}"
-    charset="${props.charset}"
-    class="${props.className}"
-    contenteditable="${props.contentEditable}"
-    coords="${props.coords}"
-    dir="${props.dir}"
-    download="${props.download}"
-    draggable="${props.draggable}"
-    .hash="${props.hash}"
-    .host="${props.host}"
-    .hostname="${props.hostname}"
-    .href="${props.href}"
-    hreflang="${props.hreflang}"
-    id="${props.id}"
-    id="${props.id}" 
-    lang="${props.lang}"
-    Methods="${props.Methods}"
-    name="${props.name}"
-    .pathname="${props.pathname}"
-    .port="${props.port}"
-    .protocol="${props.protocol}"
-    rel="${props.rel}"
-    rev="${props.rev}"
-    .search="${props.search}"
-    shape="${props.shape}"
-    slot="${props.slot}"
-    tabindex="${props.tabIndex}"
-    target="${props.target}"
-    text="${props.text}"
-    title="${props.title}"
-    type="${props.type}"
-    urn="${props.urn}"
+    ref="${refDirective}"
+    .props="${rest}"
+    .data="${data}"
+    .scrollLeft="${scrollLeft}"
+    .scrollTop="${scrollTop}"
+    .hash="${hash}"
+    .host="${host}"
+    .hostname="${hostname}"
+    .href="${href}"
+    .hreflang="${hreflang}"
+    .pathname="${pathname}"
+    .port="${port}"
+    .protocol="${protocol}"
+    .search="${search}"
   >${children}</a>` as any
 }
 
@@ -123,7 +115,7 @@ export function addEventListeners<Props extends EventHandlerProps<any>, T extend
   ref: ElementSource<T>
 ): Effect.Effect<Scope.Scope | GetEventHandlersContext<Props>, never, void> {
   return Fx.forkScoped(
-    Fx.merge(
+    Fx.mergeAll(
       getEventHandlers(props).map(([type, handler]: any) => addEventListener(ref, type, handler))
     )
   ) as any

package/src/Link.ts

@@ -12,7 +12,8 @@ import { Placeholder } from "@typed/template/Placeholder"
 import type { Renderable } from "@typed/template/Renderable"
 import type { RenderEvent } from "@typed/template/RenderEvent"
 import type { RenderTemplate } from "@typed/template/RenderTemplate"
-import { Effect, type Scope } from "effect"
+import * as Effect from "effect/Effect"
+import type * as Scope from "effect/Scope"
 import { Anchor, type AnchorProps, getEventHandler } from "./Anchor.js"
 
 /**
@@ -30,36 +31,36 @@ export type LinkProps = Omit<AnchorProps, keyof URL> & {
  * @since 1.0.0
  */
 export function Link<Props extends LinkProps, Children extends ReadonlyArray<Renderable<any, any>> = readonly []>(
-  props: Props,
+  { onClick, ref, relative, replace, state, to, ...props }: Props,
   ...children: Children
 ): Fx.Fx<
   | Navigation.Navigation
   | CurrentRoute
   | RenderTemplate
   | Scope.Scope
-  | Location
-  | Placeholder.Context<Props[keyof Props] | Children[number]>,
-  Placeholder.Error<Props[keyof Props] | Children[number]>,
+  | Placeholder.Context<Props[keyof Props] | Children[number]>
+  | Fx.Context<Props[keyof Props] | Children[number]>,
+  Placeholder.Error<Props[keyof Props] | Children[number]> | Fx.Error<Props[keyof Props] | Children[number]>,
   RenderEvent
 > {
   return Fx.gen(function*(_) {
-    const onClickHandler = getEventHandler(props.onClick)
-    const to = yield* _(
-      Placeholder.asRef<Placeholder.Context<Props["to"]>, Placeholder.Error<Props["to"]>, string>(props.to)
+    const onClickHandler = getEventHandler(onClick)
+    const toRef = yield* _(
+      Placeholder.asRef<Placeholder.Context<Props["to"]>, Placeholder.Error<Props["to"]>, string>(to)
     )
-    const relative = yield* _(
+    const relativeRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["relative"]>, Placeholder.Error<Props["relative"]>, boolean>(
-        props.relative ?? true
+        relative ?? true
       )
     )
-    const replace = yield* _(
+    const replaceRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["replace"]>, Placeholder.Error<Props["replace"]>, boolean>(
-        props.replace ?? false
+        replace ?? false
       )
     )
-    const state = yield* _(
+    const stateRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["state"]>, Placeholder.Error<Props["state"]>, unknown>(
-        props.state as Placeholder.Any<unknown>
+        state as Placeholder.Any<unknown>
       )
     )
     const reloadDocument = yield* _(
@@ -72,10 +73,13 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       )
     )
 
-    const href = RefSubject.tuple(relative, to).mapEffect(([rel, to]) => rel ? makeHref(to) : Effect.succeed(to))
+    const href = RefSubject.mapEffect(
+      RefSubject.tuple([relativeRef, toRef]),
+      ([rel, to]) => rel ? makeHref(to) : Effect.succeed(to)
+    )
 
     const navigate = Effect.gen(function*(_) {
-      const current = yield* _(Effect.all({ replace, state, reloadDocument }))
+      const current = yield* _(Effect.all({ replace: replaceRef, state: stateRef, reloadDocument }))
       const url = yield* _(href)
 
       yield* _(Navigation.navigate(url, {
@@ -88,7 +92,7 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       }
     })
 
-    const onClick = EventHandler.preventDefault(
+    const onClickEventHandler = EventHandler.preventDefault(
       (ev: EventWithCurrentTarget<HTMLAnchorElement, MouseEvent>) =>
         Effect.gen(function*(_) {
           if (onClickHandler) {
@@ -99,6 +103,11 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       onClickHandler?.options
     )
 
-    return Anchor({ ...props, href, state, onClick }, ...children)
+    const allProps = { ...props, ref, href, state: stateRef, onClick: onClickEventHandler }
+
+    return Anchor(
+      allProps as any as AnchorProps,
+      ...children
+    )
   })
 }

package/src/internal/addEventListener.ts

@@ -1,19 +1,22 @@
 import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
 import * as Fx from "@typed/fx/Fx"
 import type { DefaultEventMap } from "@typed/template/ElementSource"
+import type { Scope } from "effect"
 import * as Effect from "effect/Effect"
 
 export function addEventListeners<T extends EventTarget, Events extends ReadonlyArray<keyof DefaultEventMap<T>>>(
   target: T,
   ...events: Events
 ) {
-  return Fx.fromEmitter<never, never, EventWithCurrentTarget<T, DefaultEventMap<T>[Events[number]]>>((emitter) => {
-    events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
+  return Fx.withEmitter<never, EventWithCurrentTarget<T, DefaultEventMap<T>[Events[number]]>, Scope.Scope>(
+    (emitter) => {
+      events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
 
-    return Effect.addFinalizer(() =>
-      Effect.sync(() => {
-        events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
-      })
-    )
-  })
+      return Effect.addFinalizer(() =>
+        Effect.sync(() => {
+          events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
+        })
+      )
+    }
+  )
 }

package/src/internal/dom-properties.ts

@@ -1,50 +1,50 @@
 export type ElementProperties = {
-  className?: string
-  id?: string
-  scrollLeft?: number
-  scrollTop?: number
-  slot?: string
+  className?: string | undefined
+  id?: string | undefined
+  scrollLeft?: number | undefined
+  scrollTop?: number | undefined
+  slot?: string | undefined
 }
 
 export type HTMLElementProperties =
   & ElementProperties
   & {
-    accessKey?: string
-    contentEditable?: string
-    dir?: string
-    draggable?: boolean
-    hidden?: boolean
-    hideFocus?: boolean
-    lang?: string
-    spellcheck?: boolean
-    tabIndex?: boolean
-    title?: string
+    accessKey?: string | undefined
+    contentEditable?: string | undefined
+    dir?: string | undefined
+    draggable?: boolean | undefined
+    hidden?: boolean | undefined
+    hideFocus?: boolean | undefined
+    lang?: string | undefined
+    spellcheck?: boolean | undefined
+    tabIndex?: boolean | undefined
+    title?: string | undefined
   }
 
 export type HTMLAnchorElementProperties =
   & HTMLElementProperties
   & {
-    Methods?: string
-    charset?: string
-    coords?: string
-    download?: string
-    hash?: string
-    host?: string
-    hostname?: string
-    href?: string
-    hreflang?: string
-    name?: string
-    pathname?: string
-    port?: string
-    protocol?: string
-    rel?: string
-    rev?: string
-    search?: string
-    shape?: string
-    target?: string
-    text?: string
-    type?: string
-    urn?: string
+    Methods?: string | undefined
+    charset?: string | undefined
+    coords?: string | undefined
+    download?: string | undefined
+    hash?: string | undefined
+    host?: string | undefined
+    hostname?: string | undefined
+    href?: string | undefined
+    hreflang?: string | undefined
+    name?: string | undefined
+    pathname?: string | undefined
+    port?: string | undefined
+    protocol?: string | undefined
+    rel?: string | undefined
+    rev?: string | undefined
+    search?: string | undefined
+    shape?: string | undefined
+    target?: string | undefined
+    text?: string | undefined
+    type?: string | undefined
+    urn?: string | undefined
   }
 
 export type HTMLAppletElementProperties =

package/src/useClickAway.ts

@@ -8,8 +8,8 @@ import * as Fx from "@typed/fx/Fx"
 import type * as ElementRef from "@typed/template/ElementRef"
 import { getElements } from "@typed/template/ElementSource"
 import type { Rendered } from "@typed/wire"
-import type { Fiber, Scope } from "effect"
-import { Effect, Option } from "effect"
+import type { Effect, Fiber, Scope } from "effect"
+import * as Option from "effect/Option"
 import { addEventListeners } from "./internal/addEventListener"
 
 /**
@@ -28,11 +28,11 @@ export function useClickAway<Refs extends ReadonlyArray<ElementRef.ElementRef<an
 export function onClickAway<Refs extends ReadonlyArray<ElementRef.ElementRef<any>>, R2, E2, B>(
   refs: Refs,
   f: (event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>) => Effect.Effect<R2, E2, B>
-): Fx.Fx<Document | R2, E2, B> {
+): Fx.Fx<Document | R2 | Scope.Scope, E2, B> {
   return Fx.fromFxEffect(Document.with((document) => {
     const events = addEventListeners(document, "click", "touchend", "contextmenu")
     const elements = Fx.map(
-      Fx.combine(refs as ReadonlyArray<Fx.Fx<never, never, Rendered>>),
+      Fx.tuple(refs as ReadonlyArray<Fx.Fx<Scope.Scope, never, Rendered>>),
       (els) => els.flatMap(getElements)
     )
 
@@ -43,20 +43,22 @@ export function onClickAway<Refs extends ReadonlyArray<ElementRef.ElementRef<any
   }))
 }
 
-const containsRefs = (event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>, refs: ReadonlyArray<Element>) =>
-  Effect.sync(() => {
-    const target = event.target
+const containsRefs = (
+  event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>,
+  refs: ReadonlyArray<Element>
+): Option.Option<EventWithCurrentTarget<Document, MouseEvent | TouchEvent>> => {
+  const target = event.target
 
-    if (
-      target === null ||
-      refs.some(
-        (c) =>
-          c === target ||
-          c.contains(target as Element)
-      )
-    ) {
-      return Option.none()
-    } else {
-      return Option.some(event)
-    }
-  })
+  if (
+    target === null ||
+    refs.some(
+      (c) =>
+        c === target ||
+        c.contains(target as Element)
+    )
+  ) {
+    return Option.none()
+  } else {
+    return Option.some(event)
+  }
+}

package/src/usePagination.ts

@@ -2,10 +2,9 @@
  * @since 1.0.0
  */
 
-import * as Computed from "@typed/fx/Computed"
 import * as RefSubject from "@typed/fx/RefSubject"
 import type { Scope } from "effect"
-import { Effect } from "effect"
+import * as Effect from "effect/Effect"
 
 /**
  * @since 1.0.0
@@ -19,12 +18,12 @@ export type PaginationOptions = {
  * @since 1.0.0
  */
 export interface Pagination<E, A> {
-  readonly page: Computed.Computed<never, never, number>
-  readonly pageSize: Computed.Computed<never, never, number>
-  readonly canGoBack: Computed.Computed<never, never, boolean>
-  readonly canGoForward: Computed.Computed<never, E, boolean>
-  readonly paginated: Computed.Computed<never, E, ReadonlyArray<A>>
-  readonly viewing: Computed.Computed<never, E, Viewing>
+  readonly page: RefSubject.Computed<never, never, number>
+  readonly pageSize: RefSubject.Computed<never, never, number>
+  readonly canGoBack: RefSubject.Computed<never, never, boolean>
+  readonly canGoForward: RefSubject.Computed<never, E, boolean>
+  readonly paginated: RefSubject.Computed<never, E, ReadonlyArray<A>>
+  readonly viewing: RefSubject.Computed<never, E, Viewing>
 
   readonly goBack: Effect.Effect<never, never, number>
   readonly goForward: Effect.Effect<never, E, number>
@@ -45,19 +44,20 @@ export interface Viewing {
  * @since 1.0.0
  */
 export function usePagination<R, E, A>(
-  items: Computed.Computed<R, E, ReadonlyArray<A>>,
+  items: RefSubject.Computed<R, E, ReadonlyArray<A>>,
   options: PaginationOptions = {}
 ): Effect.Effect<R | Scope.Scope, never, Pagination<E, A>> {
   return Effect.gen(function*(_) {
     const ctx = yield* _(Effect.context<R>())
     const page: RefSubject.RefSubject<never, never, number> = yield* _(RefSubject.of(options.initialPage ?? 0))
     const pageSize: RefSubject.RefSubject<never, never, number> = yield* _(RefSubject.of(options.initialPageSize ?? 10))
-    const canGoBack: Computed.Computed<never, never, boolean> = page.map((x) => x > 0)
-    const combined: Computed.Computed<never, E, readonly [number, number, ReadonlyArray<A>]> = Computed.provide(
-      Computed.combine([page, pageSize, items] as const),
+    const canGoBack: RefSubject.Computed<never, never, boolean> = RefSubject.map(page, (x) => x > 0)
+    const combined: RefSubject.Computed<never, E, readonly [number, number, ReadonlyArray<A>]> = RefSubject.provide(
+      RefSubject.tuple([page, pageSize, items] as const),
       ctx
     )
-    const canGoForward: Computed.Computed<never, E, boolean> = combined.map(
+    const canGoForward: RefSubject.Computed<never, E, boolean> = RefSubject.map(
+      combined,
       ([page, pageSize, results]) => page < Math.ceil(results.length / pageSize - 1)
     )
 
@@ -70,39 +70,42 @@ export function usePagination<R, E, A>(
       }),
       ctx
     )
-    const goBack: Effect.Effect<never, never, number> = page.update((x) => Math.max(x - 1, 0))
-    const goForward: Effect.Effect<never, E, number> = page.updateEffect((currentPage) =>
-      Effect.gen(function*($) {
-        const totalPages = yield* $(getTotalPages)
-        const nextPage = Math.min(currentPage + 1, totalPages)
+    const goBack: Effect.Effect<never, never, number> = RefSubject.update(page, (x) => Math.max(x - 1, 0))
+    const goForward: Effect.Effect<never, E, number> = RefSubject.updateEffect(
+      page,
+      (currentPage) =>
+        Effect.gen(function*($) {
+          const totalPages = yield* $(getTotalPages)
+          const nextPage = Math.min(currentPage + 1, totalPages)
 
-        return nextPage
-      })
+          return nextPage
+        })
     )
-    const goToStart: Effect.Effect<never, never, number> = page.set(0)
-    const goToEnd: Effect.Effect<never, E, number> = page.updateEffect(() => getTotalPages)
-
-    const paginated: Computed.Computed<never, E, ReadonlyArray<A>> = combined.map(([page, pageSize, results]) => {
-      const start = page * pageSize
-      const end = start + pageSize
-
-      return results.slice(start, end)
-    })
+    const goToStart: Effect.Effect<never, never, number> = RefSubject.set(page, 0)
+    const goToEnd: Effect.Effect<never, E, number> = RefSubject.updateEffect(page, () => getTotalPages)
 
-    const viewing: Computed.Computed<never, E, Viewing> = combined.map(
+    const paginated: RefSubject.Computed<never, E, ReadonlyArray<A>> = RefSubject.map(
+      combined,
       ([page, pageSize, results]) => {
         const start = page * pageSize
         const end = start + pageSize
-        const total = results.length
 
-        return {
-          from: start + 1,
-          to: Math.min(end, total),
-          total
-        }
+        return results.slice(start, end)
       }
     )
 
+    const viewing: RefSubject.Computed<never, E, Viewing> = RefSubject.map(combined, ([page, pageSize, results]) => {
+      const start = page * pageSize
+      const end = start + pageSize
+      const total = results.length
+
+      return {
+        from: start + 1,
+        to: Math.min(end, total),
+        total
+      }
+    })
+
     return {
       page,
       pageSize,