effect-start 0.19.0 → 0.20.1

package/src/datastar/attributes/show.ts

@@ -0,0 +1,33 @@
+import { attribute } from "../engine.ts"
+import { effect } from "../engine.ts"
+
+const NONE = "none"
+const DISPLAY = "display"
+
+attribute({
+  name: "show",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  returnsValue: true,
+  apply({ el, rx }) {
+    const update = () => {
+      observer.disconnect()
+      const shouldShow = rx()
+      if (shouldShow) {
+        if (el.style.display === NONE) el.style.removeProperty(DISPLAY)
+      } else {
+        el.style.setProperty(DISPLAY, NONE)
+      }
+      observer.observe(el, { attributeFilter: ["style"] })
+    }
+    const observer = new MutationObserver(update)
+    const cleanup = effect(update)
+
+    return () => {
+      observer.disconnect()
+      cleanup()
+    }
+  },
+})

package/src/datastar/attributes/signals.ts

@@ -0,0 +1,22 @@
+import { attribute } from "../engine.ts"
+import {
+  mergePatch,
+  mergePaths,
+} from "../engine.ts"
+import { modifyCasing } from "../utils.ts"
+
+attribute({
+  name: "signals",
+  returnsValue: true,
+  apply({ key, mods, rx }) {
+    const ifMissing = mods.has("ifmissing")
+
+    if (key) {
+      key = modifyCasing(key, mods)
+      mergePaths([[key, rx?.()]], { ifMissing })
+    } else {
+      const patch = Object.assign({}, rx?.() as Record<string, any>)
+      mergePatch(patch, { ifMissing })
+    }
+  },
+})

package/src/datastar/attributes/style.ts

@@ -0,0 +1,63 @@
+import { attribute } from "../engine.ts"
+import { effect } from "../engine.ts"
+import { kebab } from "../utils.ts"
+
+attribute({
+  name: "style",
+  requirement: {
+    value: "must",
+  },
+  returnsValue: true,
+  apply({ key, el, rx }) {
+    const { style } = el
+    const initialStyles = new Map<string, string>()
+
+    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))
+      } else {
+        initial === undefined
+          && initialStyles.set(prop, style.getPropertyValue(prop))
+        style.setProperty(prop, String(value))
+      }
+    }
+
+    const update = () => {
+      observer.disconnect()
+
+      if (key) {
+        apply(key, rx())
+      } else {
+        const styles = rx() as Record<string, any>
+
+        for (const [prop, initial] of initialStyles) {
+          prop in styles
+            || (initial
+              ? style.setProperty(prop, initial)
+              : style.removeProperty(prop))
+        }
+
+        for (const prop in styles) {
+          apply(kebab(prop), styles[prop])
+        }
+      }
+
+      observer.observe(el, { attributeFilter: ["style"] })
+    }
+
+    const observer = new MutationObserver(update)
+    const cleanup = effect(update)
+
+    return () => {
+      observer.disconnect()
+      cleanup()
+      for (const [prop, initial] of initialStyles) {
+        initial ? style.setProperty(prop, initial) : style.removeProperty(prop)
+      }
+    }
+  },
+})

package/src/datastar/attributes/text.ts

@@ -0,0 +1,30 @@
+import { attribute } from "../engine.ts"
+import { effect } from "../engine.ts"
+
+attribute({
+  name: "text",
+  requirement: {
+    key: "denied",
+    value: "must",
+  },
+  returnsValue: true,
+  apply({ el, rx }) {
+    const update = () => {
+      observer.disconnect()
+      el.textContent = `${rx()}`
+      observer.observe(el, {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      })
+    }
+
+    const observer = new MutationObserver(update)
+    const cleanup = effect(update)
+
+    return () => {
+      observer.disconnect()
+      cleanup()
+    }
+  },
+})