effect-start 0.21.0 → 0.22.0

package/src/datastar/attributes/bind.ts

@@ -1,14 +1,5 @@
-import { attribute } from "../engine.ts"
-import {
-  effect,
-  getPath,
-  mergePaths,
-} from "../engine.ts"
-import type { Paths } from "../engine.ts"
-import {
-  aliasify,
-  modifyCasing,
-} from "../utils.ts"
+import { attribute, effect, getPath, mergePaths, type Paths } from "../engine.ts"
+import { aliasify, modifyCasing } from "../utils.ts"
 
 type SignalFile = {
   name: string
@@ -27,8 +18,7 @@ attribute({
   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 get = (el: any, type: string) => (type === "number" ? +el.value : el.value)
 
     let set = (value: any) => {
       ;(el as HTMLInputElement).value = `${value}`
@@ -38,8 +28,7 @@ attribute({
       switch (el.type) {
         case "range":
         case "number":
-          get = (el: any, type: string) =>
-            type === "string" ? el.value : +el.value
+          get = (el: any, type: string) => (type === "string" ? el.value : +el.value)
           break
 
         case "checkbox":
@@ -71,47 +60,43 @@ attribute({
           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)
+            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,
+            const signalFiles: Array<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,
                         })
                       }
-                      reader.onloadend = () => resolve()
-                      reader.readAsDataURL(f)
-                    }),
-                ),
-              )
-              .then(() => {
-                mergePaths([[signalName, signalFiles]])
-              })
+                      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)
@@ -129,12 +114,10 @@ attribute({
         get = (el: HTMLSelectElement) =>
           [...el.selectedOptions].map((option) => {
             const type = typeMap.get(option.value)
-            return type === "string" || type == null
-              ? option.value
-              : +option.value
+            return type === "string" || type == null ? option.value : +option.value
           })
 
-        set = (value: (string | number)[]) => {
+        set = (value: Array<string | number>) => {
           for (const option of el.options) {
             if (value.includes(option.value)) {
               typeMap.set(option.value, "string")
@@ -152,7 +135,7 @@ attribute({
       // default case
     } else {
       // web component
-      get = (el: Element) => "value" in el ? el.value : el.getAttribute("value")
+      get = (el: Element) => ("value" in el ? el.value : el.getAttribute("value"))
       set = (value: any) => {
         if ("value" in el) {
           el.value = value
@@ -166,15 +149,12 @@ attribute({
     const type = typeof initialValue
 
     let path = signalName
-    if (
-      Array.isArray(initialValue)
-      && !(el instanceof HTMLSelectElement && el.multiple)
-    ) {
+    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)
-        }"]`,
+        `[${aliasedBind}\\:${CSS.escape(signalNameKebab)}],[${aliasedBind}="${CSS.escape(
+          signalNameKebab,
+        )}"]`,
       ) as NodeListOf<HTMLInputElement>
 
       const paths: Paths = []

package/src/datastar/attributes/class.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { effect } from "../engine.ts"
+import { attribute, effect } from "../engine.ts"
 import { modifyCasing } from "../utils.ts"
 
 attribute({
@@ -15,9 +14,7 @@ attribute({
     const callback = () => {
       observer.disconnect()
 
-      classes = key
-        ? { [key]: rx() as boolean }
-        : (rx() as Record<string, boolean>)
+      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)

package/src/datastar/attributes/computed.ts

@@ -1,13 +1,5 @@
-import { attribute } from "../engine.ts"
-import {
-  computed,
-  mergePatch,
-  mergePaths,
-} from "../engine.ts"
-import {
-  modifyCasing,
-  updateLeaves,
-} from "../utils.ts"
+import { attribute, computed, mergePatch, mergePaths } from "../engine.ts"
+import { modifyCasing, updateLeaves } from "../utils.ts"
 
 attribute({
   name: "computed",

package/src/datastar/attributes/effect.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { effect } from "../engine.ts"
+import { attribute, effect } from "../engine.ts"
 
 attribute({
   name: "effect",

package/src/datastar/attributes/indicator.ts

@@ -1,12 +1,6 @@
-import { DATASTAR_FETCH_EVENT } from "../engine.ts"
-import { attribute } from "../engine.ts"
-import { mergePaths } from "../engine.ts"
-import type { DatastarFetchEvent } from "../engine.ts"
+import { attribute, DATASTAR_FETCH_EVENT, mergePaths, type DatastarFetchEvent } from "../engine.ts"
 import { modifyCasing } from "../utils.ts"
-import {
-  FINISHED,
-  STARTED,
-} from "../actions/fetch.ts"
+import { FINISHED, STARTED } from "../actions/fetch.ts"
 
 attribute({
   name: "indicator",

package/src/datastar/attributes/init.ts

@@ -1,13 +1,5 @@
-import { attribute } from "../engine.ts"
-import {
-  beginBatch,
-  endBatch,
-} from "../engine.ts"
-import {
-  delay,
-  modifyViewTransition,
-  tagToMs,
-} from "../utils.ts"
+import { attribute, beginBatch, endBatch } from "../engine.ts"
+import { delay, modifyViewTransition, tagToMs } from "../utils.ts"
 
 attribute({
   name: "init",

package/src/datastar/attributes/jsonSignals.ts

@@ -1,9 +1,4 @@
-import { attribute } from "../engine.ts"
-import {
-  effect,
-  filtered,
-} from "../engine.ts"
-import type { SignalFilterOptions } from "../engine.ts"
+import { attribute, effect, filtered, type SignalFilterOptions } from "../engine.ts"
 import { jsStrToObject } from "../utils.ts"
 
 attribute({

package/src/datastar/attributes/on.ts

@@ -1,17 +1,11 @@
 import {
+  attribute,
+  beginBatch,
   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"
+import { modifyCasing, modifyTiming, modifyViewTransition } from "../utils.ts"
 
 attribute({
   name: "on",
@@ -50,10 +44,7 @@ attribute({
       }
     }
     const eventName = modifyCasing(key, mods, "kebab")
-    if (
-      eventName === DATASTAR_FETCH_EVENT
-      || eventName === DATASTAR_SIGNAL_PATCH_EVENT
-    ) {
+    if (eventName === DATASTAR_FETCH_EVENT || eventName === DATASTAR_SIGNAL_PATCH_EVENT) {
       target = document
     }
     if (el instanceof HTMLFormElement && eventName === "submit") {

package/src/datastar/attributes/onIntersect.ts

@@ -1,14 +1,5 @@
-import { attribute } from "../engine.ts"
-import {
-  beginBatch,
-  endBatch,
-} from "../engine.ts"
-import type { HTMLOrSVG } from "../engine.ts"
-import {
-  clamp,
-  modifyTiming,
-  modifyViewTransition,
-} from "../utils.ts"
+import { attribute, beginBatch, endBatch, type HTMLOrSVG } from "../engine.ts"
+import { clamp, modifyTiming, modifyViewTransition } from "../utils.ts"
 
 const once = new WeakSet<HTMLOrSVG>()
 
@@ -35,19 +26,16 @@ attribute({
       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()
-            }
+    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,
-    )
+      }
+    }, options)
     observer.observe(el)
     if (mods.has("once")) {
       once.add(el)

package/src/datastar/attributes/onInterval.ts

@@ -1,13 +1,5 @@
-import { attribute } from "../engine.ts"
-import {
-  beginBatch,
-  endBatch,
-} from "../engine.ts"
-import {
-  modifyViewTransition,
-  tagHas,
-  tagToMs,
-} from "../utils.ts"
+import { attribute, beginBatch, endBatch } from "../engine.ts"
+import { modifyViewTransition, tagHas, tagToMs } from "../utils.ts"
 
 attribute({
   name: "on-interval",

package/src/datastar/attributes/onSignalPatch.ts

@@ -1,20 +1,13 @@
-import { DATASTAR_SIGNAL_PATCH_EVENT } from "../engine.ts"
-import { attribute } from "../engine.ts"
 import {
+  attribute,
   beginBatch,
+  DATASTAR_SIGNAL_PATCH_EVENT,
   endBatch,
   filtered,
+  type JSONPatch,
+  type SignalFilterOptions,
 } from "../engine.ts"
-import type {
-  JSONPatch,
-  SignalFilterOptions,
-} from "../engine.ts"
-import {
-  aliasify,
-  isEmpty,
-  jsStrToObject,
-  modifyTiming,
-} from "../utils.ts"
+import { aliasify, isEmpty, jsStrToObject, modifyTiming } from "../utils.ts"
 
 attribute({
   name: "on-signal-patch",
@@ -37,23 +30,20 @@ attribute({
 
     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
-          }
+    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,
-    )
+      }
+    }, mods)
 
     document.addEventListener(DATASTAR_SIGNAL_PATCH_EVENT, callback)
     return () => {

package/src/datastar/attributes/ref.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { mergePaths } from "../engine.ts"
+import { attribute, mergePaths } from "../engine.ts"
 import { modifyCasing } from "../utils.ts"
 
 attribute({

package/src/datastar/attributes/show.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { effect } from "../engine.ts"
+import { attribute, effect } from "../engine.ts"
 
 const NONE = "none"
 const DISPLAY = "display"

package/src/datastar/attributes/signals.ts

@@ -1,8 +1,4 @@
-import { attribute } from "../engine.ts"
-import {
-  mergePatch,
-  mergePaths,
-} from "../engine.ts"
+import { attribute, mergePatch, mergePaths } from "../engine.ts"
 import { modifyCasing } from "../utils.ts"
 
 attribute({

package/src/datastar/attributes/style.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { effect } from "../engine.ts"
+import { attribute, effect } from "../engine.ts"
 import { kebab } from "../utils.ts"
 
 attribute({
@@ -15,13 +14,10 @@ attribute({
     const apply = (prop: string, value: any) => {
       const initial = initialStyles.get(prop)
       if (!value && value !== 0) {
-        initial !== undefined
-          && (initial
-            ? style.setProperty(prop, initial)
-            : style.removeProperty(prop))
+        initial !== undefined &&
+          (initial ? style.setProperty(prop, initial) : style.removeProperty(prop))
       } else {
-        initial === undefined
-          && initialStyles.set(prop, style.getPropertyValue(prop))
+        initial === undefined && initialStyles.set(prop, style.getPropertyValue(prop))
         style.setProperty(prop, String(value))
       }
     }
@@ -35,10 +31,8 @@ attribute({
         const styles = rx() as Record<string, any>
 
         for (const [prop, initial] of initialStyles) {
-          prop in styles
-            || (initial
-              ? style.setProperty(prop, initial)
-              : style.removeProperty(prop))
+          prop in styles ||
+            (initial ? style.setProperty(prop, initial) : style.removeProperty(prop))
         }
 
         for (const prop in styles) {

package/src/datastar/attributes/text.ts

@@ -1,5 +1,4 @@
-import { attribute } from "../engine.ts"
-import { effect } from "../engine.ts"
+import { attribute, effect } from "../engine.ts"
 
 attribute({
   name: "text",