effect-start 0.19.0 → 0.20.0

package/src/datastar/attributes/bind.ts

@@ -0,0 +1,220 @@
+import { attribute } from "../engine.ts"
+import {
+  effect,
+  getPath,
+  mergePaths,
+} from "../engine.ts"
+import type { Paths } from "../engine.ts"
+import {
+  aliasify,
+  modifyCasing,
+} from "../utils.ts"
+
+type SignalFile = {
+  name: string
+  contents: string
+  mime: string
+}
+
+const dataURIRegex = /^data:(?<mime>[^;]+);base64,(?<contents>.*)$/
+const empty = Symbol("empty")
+
+const aliasedBind = aliasify("bind")
+
+attribute({
+  name: "bind",
+  requirement: "exclusive",
+  apply({ el, key, mods, value, error }) {
+    const signalName = key != null ? modifyCasing(key, mods) : value
+
+    let get = (el: any, type: string) =>
+      type === "number" ? +el.value : el.value
+
+    let set = (value: any) => {
+      ;(el as HTMLInputElement).value = `${value}`
+    }
+
+    if (el instanceof HTMLInputElement) {
+      switch (el.type) {
+        case "range":
+        case "number":
+          get = (el: any, type: string) =>
+            type === "string" ? el.value : +el.value
+          break
+
+        case "checkbox":
+          get = (el: HTMLInputElement, type: string) => {
+            if (el.value !== "on") {
+              if (type === "boolean") {
+                return el.checked
+              } else {
+                return el.checked ? el.value : ""
+              }
+            } else {
+              if (type === "string") {
+                return el.checked ? el.value : ""
+              } else {
+                return el.checked
+              }
+            }
+          }
+          set = (value: string | boolean) => {
+            el.checked = typeof value === "string" ? value === el.value : value
+          }
+          break
+
+        case "radio":
+          if (!el.getAttribute("name")?.length) {
+            el.setAttribute("name", signalName)
+          }
+
+          get = (el: HTMLInputElement, type: string) =>
+            el.checked ? (type === "number" ? +el.value : el.value) : empty
+          set = (value: string | number) => {
+            el.checked = value === (typeof value === "number"
+              ? +el.value
+              : el.value)
+          }
+          break
+        case "file": {
+          const syncSignal = () => {
+            const files = [...(el.files || [])]
+            const signalFiles: SignalFile[] = []
+            Promise
+              .all(
+                files.map(
+                  (f) =>
+                    new Promise<void>((resolve) => {
+                      const reader = new FileReader()
+                      reader.onload = () => {
+                        if (typeof reader.result !== "string") {
+                          throw error("InvalidFileResultType", {
+                            resultType: typeof reader.result,
+                          })
+                        }
+                        const match = reader.result.match(dataURIRegex)
+                        if (!match?.groups) {
+                          throw error("InvalidDataUri", {
+                            result: reader.result,
+                          })
+                        }
+                        signalFiles.push({
+                          name: f.name,
+                          contents: match.groups.contents,
+                          mime: match.groups.mime,
+                        })
+                      }
+                      reader.onloadend = () => resolve()
+                      reader.readAsDataURL(f)
+                    }),
+                ),
+              )
+              .then(() => {
+                mergePaths([[signalName, signalFiles]])
+              })
+          }
+
+          el.addEventListener("change", syncSignal)
+          el.addEventListener("input", syncSignal)
+
+          return () => {
+            el.removeEventListener("change", syncSignal)
+            el.removeEventListener("input", syncSignal)
+          }
+        }
+      }
+    } else if (el instanceof HTMLSelectElement) {
+      if (el.multiple) {
+        const typeMap = new Map<string, string>()
+        get = (el: HTMLSelectElement) =>
+          [...el.selectedOptions].map((option) => {
+            const type = typeMap.get(option.value)
+            return type === "string" || type == null
+              ? option.value
+              : +option.value
+          })
+
+        set = (value: (string | number)[]) => {
+          for (const option of el.options) {
+            if (value.includes(option.value)) {
+              typeMap.set(option.value, "string")
+              option.selected = true
+            } else if (value.includes(+option.value)) {
+              typeMap.set(option.value, "number")
+              option.selected = true
+            } else {
+              option.selected = false
+            }
+          }
+        }
+      }
+    } else if (el instanceof HTMLTextAreaElement) {
+      // default case
+    } else {
+      // web component
+      get = (el: Element) => "value" in el ? el.value : el.getAttribute("value")
+      set = (value: any) => {
+        if ("value" in el) {
+          el.value = value
+        } else {
+          el.setAttribute("value", value)
+        }
+      }
+    }
+
+    const initialValue = getPath(signalName)
+    const type = typeof initialValue
+
+    let path = signalName
+    if (
+      Array.isArray(initialValue)
+      && !(el instanceof HTMLSelectElement && el.multiple)
+    ) {
+      const signalNameKebab = key ? key : value!
+      const inputs = document.querySelectorAll(
+        `[${aliasedBind}\\:${CSS.escape(signalNameKebab)}],[${aliasedBind}="${
+          CSS.escape(signalNameKebab)
+        }"]`,
+      ) as NodeListOf<HTMLInputElement>
+
+      const paths: Paths = []
+      let i = 0
+      for (const input of inputs) {
+        paths.push([`${path}.${i}`, get(input, "none")])
+
+        if (el === input) {
+          break
+        }
+        i++
+      }
+      mergePaths(paths, { ifMissing: true })
+      path = `${path}.${i}`
+    } else {
+      mergePaths([[path, get(el, type)]], {
+        ifMissing: true,
+      })
+    }
+
+    const syncSignal = () => {
+      const signalValue = getPath(path)
+      if (signalValue != null) {
+        const value = get(el, typeof signalValue)
+        if (value !== empty) {
+          mergePaths([[path, value]])
+        }
+      }
+    }
+
+    el.addEventListener("input", syncSignal)
+    el.addEventListener("change", syncSignal)
+    const cleanup = effect(() => {
+      set(getPath(path))
+    })
+
+    return () => {
+      cleanup()
+      el.removeEventListener("input", syncSignal)
+      el.removeEventListener("change", syncSignal)
+    }
+  },
+})

package/src/datastar/attributes/class.ts

@@ -0,0 +1,57 @@
+import { attribute } from "../engine.ts"
+import { effect } from "../engine.ts"
+import { modifyCasing } from "../utils.ts"
+
+attribute({
+  name: "class",
+  requirement: {
+    value: "must",
+  },
+  returnsValue: true,
+  apply({ key, el, mods, rx }) {
+    key &&= modifyCasing(key, mods, "kebab")
+
+    let classes: Record<string, boolean>
+    const callback = () => {
+      observer.disconnect()
+
+      classes = key
+        ? { [key]: rx() as boolean }
+        : (rx() as Record<string, boolean>)
+
+      for (const k in classes) {
+        const classNames = k.split(/\s+/).filter((cn) => cn.length > 0)
+        if (classes[k]) {
+          for (const name of classNames) {
+            if (!el.classList.contains(name)) {
+              el.classList.add(name)
+            }
+          }
+        } else {
+          for (const name of classNames) {
+            if (el.classList.contains(name)) {
+              el.classList.remove(name)
+            }
+          }
+        }
+      }
+
+      observer.observe(el, { attributeFilter: ["class"] })
+    }
+
+    const observer = new MutationObserver(callback)
+    const cleanup = effect(callback)
+
+    return () => {
+      observer.disconnect()
+      cleanup()
+
+      for (const k in classes) {
+        const classNames = k.split(/\s+/).filter((cn) => cn.length > 0)
+        for (const name of classNames) {
+          el.classList.remove(name)
+        }
+      }
+    }
+  },
+})

package/src/datastar/attributes/computed.ts

@@ -0,0 +1,33 @@
+import { attribute } from "../engine.ts"
+import {
+  computed,
+  mergePatch,
+  mergePaths,
+} from "../engine.ts"
+import {
+  modifyCasing,
+  updateLeaves,
+} from "../utils.ts"
+
+attribute({
+  name: "computed",
+  requirement: {
+    value: "must",
+  },
+  returnsValue: true,
+  apply({ key, mods, rx, error }) {
+    if (key) {
+      mergePaths([[modifyCasing(key, mods), computed(rx)]])
+    } else {
+      const patch = Object.assign({}, rx() as Record<string, () => any>)
+      updateLeaves(patch, (old) => {
+        if (typeof old === "function") {
+          return computed(old)
+        } else {
+          throw error("ComputedExpectedFunction")
+        }
+      })
+      mergePatch(patch)
+    }
+  },
+})

package/src/datastar/attributes/effect.ts

@@ -0,0 +1,11 @@
+import { attribute } from "../engine.ts"
+import { effect } from "../engine.ts"
+
+attribute({
+  name: "effect",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  apply: ({ rx }) => effect(rx),
+})

package/src/datastar/attributes/indicator.ts

@@ -0,0 +1,39 @@
+import { DATASTAR_FETCH_EVENT } from "../engine.ts"
+import { attribute } from "../engine.ts"
+import { mergePaths } from "../engine.ts"
+import type { DatastarFetchEvent } from "../engine.ts"
+import { modifyCasing } from "../utils.ts"
+import {
+  FINISHED,
+  STARTED,
+} from "../actions/fetch.ts"
+
+attribute({
+  name: "indicator",
+  requirement: "exclusive",
+  apply({ el, key, mods, value }) {
+    const signalName = key != null ? modifyCasing(key, mods) : value
+
+    mergePaths([[signalName, false]])
+
+    const watcher = ((event: CustomEvent<DatastarFetchEvent>) => {
+      const { type, el: elt } = event.detail
+      if (elt !== el) {
+        return
+      }
+      switch (type) {
+        case STARTED:
+          mergePaths([[signalName, true]])
+          break
+        case FINISHED:
+          mergePaths([[signalName, false]])
+          break
+      }
+    }) as EventListener
+    document.addEventListener(DATASTAR_FETCH_EVENT, watcher)
+    return () => {
+      mergePaths([[signalName, false]])
+      document.removeEventListener(DATASTAR_FETCH_EVENT, watcher)
+    }
+  },
+})

package/src/datastar/attributes/init.ts

@@ -0,0 +1,35 @@
+import { attribute } from "../engine.ts"
+import {
+  beginBatch,
+  endBatch,
+} from "../engine.ts"
+import {
+  delay,
+  modifyViewTransition,
+  tagToMs,
+} from "../utils.ts"
+
+attribute({
+  name: "init",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  apply({ rx, mods }) {
+    let callback = () => {
+      beginBatch()
+      rx()
+      endBatch()
+    }
+    callback = modifyViewTransition(callback, mods)
+    let wait = 0
+    const delayArgs = mods.get("delay")
+    if (delayArgs) {
+      wait = tagToMs(delayArgs)
+      if (wait > 0) {
+        callback = delay(callback, wait)
+      }
+    }
+    callback()
+  },
+})

package/src/datastar/attributes/jsonSignals.ts

@@ -0,0 +1,38 @@
+import { attribute } from "../engine.ts"
+import {
+  effect,
+  filtered,
+} from "../engine.ts"
+import type { SignalFilterOptions } from "../engine.ts"
+import { jsStrToObject } from "../utils.ts"
+
+attribute({
+  name: "json-signals",
+  requirement: {
+    key: "denied",
+  },
+  apply({ el, value, mods }) {
+    const spaces = mods.has("terse") ? 0 : 2
+    let filters: SignalFilterOptions = {}
+    if (value) {
+      filters = jsStrToObject(value)
+    }
+
+    const callback = () => {
+      observer.disconnect()
+      el.textContent = JSON.stringify(filtered(filters), null, spaces)
+      observer.observe(el, {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      })
+    }
+    const observer = new MutationObserver(callback)
+    const cleanup = effect(callback)
+
+    return () => {
+      observer.disconnect()
+      cleanup()
+    }
+  },
+})

package/src/datastar/attributes/on.ts

@@ -0,0 +1,71 @@
+import {
+  DATASTAR_FETCH_EVENT,
+  DATASTAR_SIGNAL_PATCH_EVENT,
+} from "../engine.ts"
+import { attribute } from "../engine.ts"
+import {
+  beginBatch,
+  endBatch,
+} from "../engine.ts"
+import {
+  modifyCasing,
+  modifyTiming,
+  modifyViewTransition,
+} from "../utils.ts"
+
+attribute({
+  name: "on",
+  requirement: "must",
+  argNames: ["evt"],
+  apply({ el, key, mods, rx }) {
+    let target: Element | Window | Document = el
+    if (mods.has("window")) target = window
+    let callback = (evt?: Event) => {
+      if (evt) {
+        if (mods.has("prevent")) {
+          evt.preventDefault()
+        }
+        if (mods.has("stop")) {
+          evt.stopPropagation()
+        }
+      }
+      beginBatch()
+      rx(evt)
+      endBatch()
+    }
+    callback = modifyViewTransition(callback, mods)
+    callback = modifyTiming(callback, mods)
+    const evtListOpts: AddEventListenerOptions = {
+      capture: mods.has("capture"),
+      passive: mods.has("passive"),
+      once: mods.has("once"),
+    }
+    if (mods.has("outside")) {
+      target = document
+      const cb = callback
+      callback = (evt?: Event) => {
+        if (!el.contains(evt?.target as HTMLElement)) {
+          cb(evt)
+        }
+      }
+    }
+    const eventName = modifyCasing(key, mods, "kebab")
+    if (
+      eventName === DATASTAR_FETCH_EVENT
+      || eventName === DATASTAR_SIGNAL_PATCH_EVENT
+    ) {
+      target = document
+    }
+    if (el instanceof HTMLFormElement && eventName === "submit") {
+      const cb = callback
+      callback = (evt?: Event) => {
+        evt?.preventDefault()
+        cb(evt)
+      }
+    }
+    target.addEventListener(eventName, callback, evtListOpts)
+    return () => {
+      target.removeEventListener(eventName, callback)
+    }
+  },
+})

package/src/datastar/attributes/onIntersect.ts

@@ -0,0 +1,65 @@
+import { attribute } from "../engine.ts"
+import {
+  beginBatch,
+  endBatch,
+} from "../engine.ts"
+import type { HTMLOrSVG } from "../engine.ts"
+import {
+  clamp,
+  modifyTiming,
+  modifyViewTransition,
+} from "../utils.ts"
+
+const once = new WeakSet<HTMLOrSVG>()
+
+attribute({
+  name: "on-intersect",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  apply({ el, mods, rx }) {
+    let callback = () => {
+      beginBatch()
+      rx()
+      endBatch()
+    }
+    callback = modifyViewTransition(callback, mods)
+    callback = modifyTiming(callback, mods)
+    const options = { threshold: 0 }
+    if (mods.has("full")) {
+      options.threshold = 1
+    } else if (mods.has("half")) {
+      options.threshold = 0.5
+    } else if (mods.get("threshold")) {
+      options.threshold = clamp(Number(mods.get("threshold")), 0, 100) / 100
+    }
+    const exit = mods.has("exit")
+    let observer: IntersectionObserver | null = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting !== exit) {
+            callback()
+            if (observer && once.has(el)) {
+              observer.disconnect()
+            }
+          }
+        }
+      },
+      options,
+    )
+    observer.observe(el)
+    if (mods.has("once")) {
+      once.add(el)
+    }
+    return () => {
+      if (!mods.has("once")) {
+        once.delete(el)
+      }
+      if (observer) {
+        observer.disconnect()
+        observer = null
+      }
+    }
+  },
+})

package/src/datastar/attributes/onInterval.ts

@@ -0,0 +1,39 @@
+import { attribute } from "../engine.ts"
+import {
+  beginBatch,
+  endBatch,
+} from "../engine.ts"
+import {
+  modifyViewTransition,
+  tagHas,
+  tagToMs,
+} from "../utils.ts"
+
+attribute({
+  name: "on-interval",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  apply({ mods, rx }) {
+    let callback = () => {
+      beginBatch()
+      rx()
+      endBatch()
+    }
+    callback = modifyViewTransition(callback, mods)
+    let duration = 1000
+    const durationArgs = mods.get("duration")
+    if (durationArgs) {
+      duration = tagToMs(durationArgs)
+      const leading = tagHas(durationArgs, "leading", false)
+      if (leading) {
+        callback()
+      }
+    }
+    const intervalId = setInterval(callback, duration)
+    return () => {
+      clearInterval(intervalId)
+    }
+  },
+})

package/src/datastar/attributes/onSignalPatch.ts

@@ -0,0 +1,63 @@
+import { DATASTAR_SIGNAL_PATCH_EVENT } from "../engine.ts"
+import { attribute } from "../engine.ts"
+import {
+  beginBatch,
+  endBatch,
+  filtered,
+} from "../engine.ts"
+import type {
+  JSONPatch,
+  SignalFilterOptions,
+} from "../engine.ts"
+import {
+  aliasify,
+  isEmpty,
+  jsStrToObject,
+  modifyTiming,
+} from "../utils.ts"
+
+attribute({
+  name: "on-signal-patch",
+  requirement: {
+    value: "must",
+  },
+  argNames: ["patch"],
+  returnsValue: true,
+  apply({ el, key, mods, rx, error }) {
+    if (!!key && key !== "filter") {
+      throw error("KeyNotAllowed")
+    }
+
+    const filterAttr = aliasify(`${this.name}-filter`)
+    const filtersRaw = el.getAttribute(filterAttr)
+    let filters: SignalFilterOptions = {}
+    if (filtersRaw) {
+      filters = jsStrToObject(filtersRaw)
+    }
+
+    let running = false
+
+    const callback: EventListener = modifyTiming(
+      (evt: CustomEvent<JSONPatch>) => {
+        if (running) return
+        const watched = filtered(filters, evt.detail)
+        if (!isEmpty(watched)) {
+          running = true
+          beginBatch()
+          try {
+            rx(watched)
+          } finally {
+            endBatch()
+            running = false
+          }
+        }
+      },
+      mods,
+    )
+
+    document.addEventListener(DATASTAR_SIGNAL_PATCH_EVENT, callback)
+    return () => {
+      document.removeEventListener(DATASTAR_SIGNAL_PATCH_EVENT, callback)
+    }
+  },
+})

package/src/datastar/attributes/ref.ts

@@ -0,0 +1,12 @@
+import { attribute } from "../engine.ts"
+import { mergePaths } from "../engine.ts"
+import { modifyCasing } from "../utils.ts"
+
+attribute({
+  name: "ref",
+  requirement: "exclusive",
+  apply({ el, key, mods, value }) {
+    const signalName = key != null ? modifyCasing(key, mods) : value
+    mergePaths([[signalName, el]])
+  },
+})