@typed/ui 0.1.0

package/dist/esm/Anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../src/Anchor.ts"],"names":[],"mappings":"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"}

package/dist/esm/Link.js

@@ -0,0 +1,41 @@
+import * as Fx from "@typed/fx/Fx";
+import * as RefSubject from "@typed/fx/RefSubject";
+import * as Navigation from "@typed/navigation";
+import { makeHref } from "@typed/router";
+import * as EventHandler from "@typed/template/EventHandler";
+import { Placeholder } from "@typed/template/Placeholder";
+import { Effect } from "effect";
+import { Anchor, getEventHandler } from "./Anchor";
+/**
+ * @since 1.0.0
+ */
+export function Link(props, ...children) {
+    return Fx.gen(function* (_) {
+        const onClickHandler = getEventHandler(props.onClick);
+        const to = yield* _(Placeholder.asRef(props.to));
+        const relative = yield* _(Placeholder.asRef(props.relative ?? true));
+        const replace = yield* _(Placeholder.asRef(props.replace ?? false));
+        const state = yield* _(Placeholder.asRef(props.state));
+        const reloadDocument = yield* _(Placeholder.asRef(props.reloadDocument ?? false));
+        const href = RefSubject.tuple(relative, to).mapEffect(([rel, to]) => rel ? makeHref(to) : Effect.succeed(to));
+        const navigate = Effect.gen(function* (_) {
+            const current = yield* _(Effect.all({ replace, state, reloadDocument }));
+            const url = yield* _(href);
+            yield* _(Navigation.navigate(url, {
+                history: current.replace ? "replace" : "auto",
+                state: current.state
+            }));
+            if (current.reloadDocument) {
+                yield* _(Navigation.reload({ state: current.state }));
+            }
+        });
+        const onClick = EventHandler.preventDefault((ev) => Effect.gen(function* (_) {
+            if (onClickHandler) {
+                yield* _(onClickHandler.handler(ev));
+            }
+            yield* _(navigate);
+        }), onClickHandler?.options);
+        return Anchor({ ...props, href, state, onClick }, ...children);
+    });
+}
+//# sourceMappingURL=Link.js.map

package/dist/esm/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link.ts"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -0,0 +1,12 @@
+/**
+ * @since 1.0.0
+ */
+/**
+ * @since 1.0.0
+ */
+export * from "./Anchor";
+/**
+ * @since 1.0.0
+ */
+export * from "./Link";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,cAAc,UAAU,CAAA;AACxB;;GAEG;AACH,cAAc,QAAQ,CAAA"}

package/dist/esm/internal/dom-properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dom-properties.js.map

package/dist/esm/internal/dom-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-properties.js","sourceRoot":"","sources":["../../../src/internal/dom-properties.ts"],"names":[],"mappings":""}

package/dist/esm/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "sideEffects": []
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@typed/ui",
+  "version": "0.1.0",
+  "description": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tylors/typed.git"
+  },
+  "sideEffects": [],
+  "author": "Typed contributors",
+  "dependencies": {
+    "@effect/platform": "^0.31.1",
+    "@effect/schema": "0.49.4",
+    "csstype": "^3.1.2",
+    "effect": "2.0.0-next.56",
+    "@typed/context": "0.1.0",
+    "@typed/dom": "0.1.0",
+    "@typed/environment": "0.1.0",
+    "@typed/navigation": "0.1.0",
+    "@typed/fx": "1.18.0",
+    "@typed/route": "1.0.0",
+    "@typed/router": "0.19.0",
+    "@typed/template": "0.1.0"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/dts/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/dts/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./Anchor": {
+      "types": "./dist/dts/Anchor.d.ts",
+      "import": "./dist/esm/Anchor.js",
+      "default": "./dist/cjs/Anchor.js"
+    },
+    "./Link": {
+      "types": "./dist/dts/Link.d.ts",
+      "import": "./dist/esm/Link.js",
+      "default": "./dist/cjs/Link.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "Anchor": [
+        "./dist/dts/Anchor.d.ts"
+      ],
+      "Link": [
+        "./dist/dts/Link.d.ts"
+      ]
+    }
+  }
+}

package/src/Anchor.ts

@@ -0,0 +1,210 @@
+/**
+ * @since 1.0.0
+ */
+
+import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
+import * as Fx from "@typed/fx/Fx"
+import * as Directive from "@typed/template/Directive"
+import type { DefaultEventMap, ElementSource } from "@typed/template/ElementSource"
+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 { Rendered } from "@typed/wire"
+import type { ReadonlyRecord, Scope } from "effect"
+import { Effect } from "effect"
+import { uncapitalize } from "effect/String"
+import type { HTMLAnchorElementProperties } from "./internal/dom-properties"
+
+/**
+ * @since 1.0.0
+ */
+export type AnchorProps =
+  & {
+    readonly [K in keyof HTMLAnchorElementProperties]:
+      | HTMLAnchorElementProperties[K]
+      | Placeholder.Any<HTMLAnchorElementProperties[K]>
+      | Directive.Directive<any, any>
+  }
+  & {
+    readonly ref?: (ref: ElementSource<HTMLAnchorElement>) => Effect.Effect<any, any, any>
+    readonly data?: Placeholder.Any<ReadonlyRecord.ReadonlyRecord<any>>
+  }
+  & EventHandlerProps<HTMLAnchorElement>
+
+/**
+ * @since 1.0.0
+ */
+export type EventHandlerProps<El extends HTMLElement | SVGElement, EventMap extends {} = DefaultEventMap<El>> = {
+  readonly [K in keyof EventMap as K extends string ? `on${Capitalize<K>}` : never]?:
+    | EventHandler.EventHandler<
+      any,
+      any,
+      EventWithCurrentTarget<El, Extract<EventMap[K], Event>>
+    >
+    | Effect.Effect<any, any, unknown>
+    | null
+    | undefined
+}
+type ReturnOf<T> = T extends (...args: any) => infer R ? R : never
+
+/**
+ * @since 1.0.0
+ */
+export function Anchor<
+  const Props extends AnchorProps,
+  Children extends ReadonlyArray<Renderable<any, any>> = readonly []
+>(
+  props: Props,
+  ...children: Children
+): TemplateFx<
+  Placeholder.Context<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
+  Placeholder.Error<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
+  HTMLAnchorElement
+> {
+  const ref = Directive.ref(({ value: ref }) =>
+    Effect.gen(function*(_) {
+      yield* _(addEventListeners(props, ref))
+
+      if (props.ref) {
+        yield* _(props.ref(ref 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}"
+  >${children}</a>` as any
+}
+
+/**
+ * @since 1.0.0
+ */
+export function addEventListeners<Props extends EventHandlerProps<any>, T extends Rendered>(
+  props: Props,
+  ref: ElementSource<T>
+): Effect.Effect<Scope.Scope | GetEventHandlersContext<Props>, never, void> {
+  return Fx.forkScoped(
+    Fx.merge(
+      getEventHandlers(props).map(([type, handler]: any) => addEventListener(ref, type, handler))
+    )
+  ) as any
+}
+
+function addEventListener<T extends Rendered, R, E, Ev extends Event>(
+  ref: ElementSource<T>,
+  event: string,
+  handler: EventHandler.EventHandler<R, E, Ev>
+) {
+  return Fx.mapEffect(ref.events(event as any, handler.options), (ev) => handler.handler(ev as any))
+}
+
+type ValuesOf<T> = [T[keyof T]] extends [infer R] ? R : never
+
+type ToEventType<T> = T extends `on${infer S}` ? Uncapitalize<S> : never
+
+/**
+ * @since 1.0.0
+ */
+export type GetEventHandlersContext<T extends EventHandlerProps<any>> = ValuesOf<
+  {
+    readonly [K in keyof T as K extends `on${string}` ? K : never]: EventHandler.Context<GetEventHandler<T[K]>>
+  }
+>
+
+/**
+ * @since 1.0.0
+ */
+export type GetEventHandlers<T extends EventHandlerProps<any>> = [
+  ReadonlyArray<
+    ValuesOf<
+      {
+        readonly [K in keyof T as K extends `on${string}` ? K : never]: readonly [ToEventType<K>, GetEventHandler<T[K]>]
+      }
+    >
+  >
+] extends [ReadonlyArray<infer R>] ? ReadonlyArray<R> : never
+
+type GetEventHandler<
+  T
+> = T extends EventHandler.EventHandler<infer R, infer E, infer Ev> ? EventHandler.EventHandler<R, E, Ev>
+  : T extends Effect.Effect<infer R, infer E, infer _> ? EventHandler.EventHandler<R, E, Event>
+  : never
+
+/**
+ * @since 1.0.0
+ */
+export function getEventHandlers<Props extends EventHandlerProps<any>>(props: Props) {
+  const eventHandlers: Array<readonly [string, EventHandler.EventHandler<any, any, any>]> = Object.keys(props).filter((
+    x
+  ) => x[0] === "o" && x[1] === "n").flatMap((key) => {
+    const handler = getEventHandler(
+      props[key as keyof typeof props] as
+        | EventHandler.EventHandler<any, any, any>
+        | Effect.Effect<any, any, unknown>
+        | null
+        | undefined
+    )
+
+    if (!handler) return []
+
+    const eventType = uncapitalize(key.slice(2))
+
+    return [[eventType, handler] as const]
+  })
+
+  return eventHandlers as any as GetEventHandlers<Props>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function getEventHandler<R, E, Ev extends Event = Event>(
+  handler: EventHandler.EventHandler<R, E, Ev> | Effect.Effect<R, E, unknown> | null | undefined
+): EventHandler.EventHandler<R, E, Ev> | null {
+  if (!handler) return null
+
+  if (Effect.isEffect(handler)) {
+    return EventHandler.make(() => handler)
+  } else {
+    return handler
+  }
+}

package/src/Link.ts

@@ -0,0 +1,104 @@
+/**
+ * @since 1.0.0
+ */
+import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
+import * as Fx from "@typed/fx/Fx"
+import * as RefSubject from "@typed/fx/RefSubject"
+import * as Navigation from "@typed/navigation"
+import type { CurrentRoute } from "@typed/router"
+import { makeHref } from "@typed/router"
+import * as EventHandler from "@typed/template/EventHandler"
+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 { Anchor, type AnchorProps, getEventHandler } from "./Anchor"
+
+/**
+ * @since 1.0.0
+ */
+export type LinkProps = Omit<AnchorProps, keyof URL> & {
+  readonly to: string | Placeholder.Any<string>
+  readonly relative?: boolean | Placeholder.Any<boolean>
+  readonly replace?: boolean | Placeholder.Any<boolean>
+  readonly state?: unknown | Placeholder.Any<unknown>
+  readonly reloadDocument?: boolean | Placeholder.Any<boolean>
+}
+
+/**
+ * @since 1.0.0
+ */
+export function Link<Props extends LinkProps, Children extends ReadonlyArray<Renderable<any, any>> = readonly []>(
+  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]>,
+  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 relative = yield* _(
+      Placeholder.asRef<Placeholder.Context<Props["relative"]>, Placeholder.Error<Props["relative"]>, boolean>(
+        props.relative ?? true
+      )
+    )
+    const replace = yield* _(
+      Placeholder.asRef<Placeholder.Context<Props["replace"]>, Placeholder.Error<Props["replace"]>, boolean>(
+        props.replace ?? false
+      )
+    )
+    const state = yield* _(
+      Placeholder.asRef<Placeholder.Context<Props["state"]>, Placeholder.Error<Props["state"]>, unknown>(
+        props.state as Placeholder.Any<unknown>
+      )
+    )
+    const reloadDocument = yield* _(
+      Placeholder.asRef<
+        Placeholder.Context<Props["reloadDocument"]>,
+        Placeholder.Error<Props["reloadDocument"]>,
+        boolean
+      >(
+        props.reloadDocument ?? false
+      )
+    )
+
+    const href = RefSubject.tuple(relative, to).mapEffect(([rel, to]) => rel ? makeHref(to) : Effect.succeed(to))
+
+    const navigate = Effect.gen(function*(_) {
+      const current = yield* _(Effect.all({ replace, state, reloadDocument }))
+      const url = yield* _(href)
+
+      yield* _(Navigation.navigate(url, {
+        history: current.replace ? "replace" : "auto",
+        state: current.state
+      }))
+
+      if (current.reloadDocument) {
+        yield* _(Navigation.reload({ state: current.state }))
+      }
+    })
+
+    const onClick = EventHandler.preventDefault(
+      (ev: EventWithCurrentTarget<HTMLAnchorElement, MouseEvent>) =>
+        Effect.gen(function*(_) {
+          if (onClickHandler) {
+            yield* _(onClickHandler.handler(ev))
+          }
+          yield* _(navigate)
+        }),
+      onClickHandler?.options
+    )
+
+    return Anchor({ ...props, href, state, onClick }, ...children)
+  })
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @since 1.0.0
+ */
+
+/**
+ * @since 1.0.0
+ */
+export * from "./Anchor"
+/**
+ * @since 1.0.0
+ */
+export * from "./Link"