effect-start 0.9.0

package/src/testing.ts

@@ -0,0 +1,55 @@
+import * as Array from "effect/Array"
+import * as Effect from "effect/Effect"
+import * as Function from "effect/Function"
+import * as Layer from "effect/Layer"
+import * as Logger from "effect/Logger"
+import * as Scope from "effect/Scope"
+import type { YieldWrap } from "effect/Utils"
+
+/**
+ * Creates a scoped Effects and runs is asynchronously.
+ * Useful for testing.
+ */
+export const effectFn = <RL>(layer?: Layer.Layer<RL, any>) =>
+<
+  Eff extends YieldWrap<Effect.Effect<any, any, RE>>,
+  AEff,
+  RE extends RL | Scope.Scope,
+>(
+  f: () => Generator<Eff, AEff, never>,
+): Promise<void> =>
+  Function.pipe(
+    Effect.gen(f),
+    Effect.scoped,
+    Effect.provide(Logger.pretty),
+    Effect.provide(layer ?? Layer.empty),
+    // @ts-expect-error will have to figure out how to clear deps
+    Effect.runPromise,
+    v => v.then(() => {}, clearStackTraces),
+  )
+
+/*
+ * When effect fails, instead of throwing FiberFailure,
+ * throw a plain Error with the strack trace and hides
+ * effect internals.
+ * Otherwise, at least on Bun, the strack trace is repeated,
+ * with some junks in between taking half of the screen.
+ *
+ * Direct children that starts with a dot are excluded because
+ * some tools, like effect-start, use it to generate temporary
+ * files that are then loaded into a runtime.
+ */
+const clearStackTraces = (err: any | Error) => {
+  const ExternalStackTraceLineRegexp = /\(.*\/node_modules\/[^\.]/
+
+  const newErr = new Error(err.message)
+  const stack: string = err.stack ?? ""
+
+  newErr.stack = Function.pipe(
+    stack.split("\n"),
+    Array.takeWhile(s => !ExternalStackTraceLineRegexp.test(s)),
+    Array.join("\n"),
+  )
+
+  throw newErr
+}

package/src/x/cloudflare/CloudflareTunnel.ts

@@ -0,0 +1,110 @@
+import {
+  Command,
+  HttpServer,
+} from "@effect/platform"
+import {
+  Config,
+  Effect,
+  identity,
+  Layer,
+  LogLevel,
+  Option,
+  pipe,
+  Stream,
+  String,
+} from "effect"
+
+/**
+ * Starts Cloudflare tunnel using cloudflared cli.
+ */
+export const start = (opts: {
+  command?: string
+  tunnelName: string
+  tunnelUrl?: string
+  cleanLogs?: false
+  logLevel?: LogLevel.LogLevel
+  logPrefix?: string
+}) =>
+  Effect.gen(function*() {
+    const logPrefix = String.isString(opts.logPrefix)
+      ? opts.logPrefix
+      : "CloudflareTunnel: "
+    const args: string[] = [
+      "tunnel",
+      "run",
+      opts.tunnelUrl
+        ? [
+          "--url",
+          opts.tunnelUrl,
+        ]
+        : [],
+      opts.tunnelName,
+    ]
+      .flatMap(v => v)
+
+    const process = yield* pipe(
+      Command.make(opts.command ?? "cloudflared", ...args),
+      Command.start,
+    )
+
+    yield* Effect.logInfo(
+      `Cloudflare tunnel started name=${opts.tunnelName} pid=${process.pid} tunnelUrl=${
+        opts.tunnelUrl ?? "<empty>"
+      }`,
+    )
+
+    yield* pipe(
+      Stream.merge(
+        process.stdout,
+        process.stderr,
+      ),
+      Stream.decodeText("utf-8"),
+      Stream.splitLines,
+      opts.cleanLogs ?? true
+        ? Stream.map(v =>
+          v.replace(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z\s\w+\s/, "")
+        )
+        : identity,
+      logPrefix
+        ? Stream.map(v => logPrefix + v)
+        : identity,
+      Stream.runForEach(v =>
+        Effect.logWithLevel(opts.logLevel ?? LogLevel.Debug, v)
+      ),
+    )
+  })
+
+export const layer = () =>
+  Layer.scopedDiscard(Effect.gen(function*() {
+    const tunnelName = yield* pipe(
+      Config.string("CLOUDFLARE_TUNNEL_NAME"),
+      Config.option,
+      Effect.andThen(Option.getOrUndefined),
+    )
+    const tunnelUrl = yield* pipe(
+      Config.string("CLOUDFLARE_TUNNEL_URL"),
+      Config.option,
+      Effect.andThen(Option.getOrUndefined),
+    )
+
+    if (!tunnelName) {
+      yield* Effect.logWarning("CLOUDFLARE_TUNNEL_NAME not provided. Skipping.")
+
+      return
+    }
+
+    yield* Effect
+      .forkScoped(
+        pipe(
+          start({
+            tunnelName,
+            tunnelUrl,
+          }),
+        ),
+      )
+      .pipe(
+        Effect.catchAll(err =>
+          Effect.logError("Cloudflare tunnel failed", err)
+        ),
+      )
+  }))

package/src/x/cloudflare/index.ts

@@ -0,0 +1 @@
+export * as CloudflareTunnel from "./CloudflareTunnel.ts"

package/src/x/datastar/Datastar.test.ts

@@ -0,0 +1,267 @@
+import * as t from "bun:test"
+import * as HyperHtml from "../../HyperHtml.ts"
+import * as HyperNode from "../../HyperNode.ts"
+import { jsx } from "../../jsx-runtime.ts"
+import * as Datastar from "./Datastar.ts"
+
+t.it("data-signals object serialization", () => {
+  const node = HyperNode.make("div", {
+    "data-signals": { foo: 1, bar: { baz: "hello" } } as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe(
+      "<div data-signals=\"{&quot;foo&quot;:1,&quot;bar&quot;:{&quot;baz&quot;:&quot;hello&quot;}}\"></div>",
+    )
+})
+
+t.it("data-signals string passthrough", () => {
+  const node = HyperNode.make("div", {
+    "data-signals": "$mySignal",
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe("<div data-signals=\"$mySignal\"></div>")
+})
+
+t.it("data-signals-* object serialization", () => {
+  const node = HyperNode.make("div", {
+    "data-signals-user": { name: "John", age: 30 } as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe(
+      "<div data-signals-user=\"{&quot;name&quot;:&quot;John&quot;,&quot;age&quot;:30}\"></div>",
+    )
+})
+
+t.it("non-data attributes unchanged", () => {
+  const node = HyperNode.make("div", {
+    id: "test",
+    class: "my-class",
+    "data-text": "$count",
+    "data-signals": { count: 0 } as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toContain("id=\"test\"")
+  t
+    .expect(html)
+    .toContain("class=\"my-class\"")
+  t
+    .expect(html)
+    .toContain("data-text=\"$count\"")
+  t
+    .expect(html)
+    .toContain("data-signals=\"{&quot;count&quot;:0}\"")
+})
+
+t.it("null and undefined values ignored", () => {
+  const node = HyperNode.make("div", {
+    "data-signals": null,
+    "data-other": undefined,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe("<div></div>")
+})
+
+t.it("complex nested objects serialization", () => {
+  const complexObject = {
+    user: { name: "John Doe", preferences: { theme: "dark" } },
+    items: [1, 2, 3],
+  }
+
+  const node = HyperNode.make("div", {
+    "data-signals": complexObject as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toContain("data-signals=")
+  t
+    .expect(html)
+    .toContain("John Doe")
+})
+
+t.it("non-signals data attributes serialized", () => {
+  const node = HyperNode.make("div", {
+    "data-class": { hidden: true, visible: false } as any,
+    "data-style": { color: "red", display: "none" } as any,
+    "data-show": true as any,
+    "data-text": "$count",
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toContain(
+      "data-class=\"{&quot;hidden&quot;:true,&quot;visible&quot;:false}\"",
+    )
+  t
+    .expect(html)
+    .toContain(
+      "data-style=\"{&quot;color&quot;:&quot;red&quot;,&quot;display&quot;:&quot;none&quot;}\"",
+    )
+  t
+    .expect(html)
+    .toContain("data-show=\"true\"")
+  t
+    .expect(html)
+    .toContain("data-text=\"$count\"")
+})
+
+t.it("data-attr object serialization", () => {
+  const node = HyperNode.make("div", {
+    "data-attr": { disabled: true, tabindex: 0 } as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe(
+      "<div data-attr=\"{&quot;disabled&quot;:true,&quot;tabindex&quot;:0}\"></div>",
+    )
+})
+
+t.it("boolean attributes converted to strings", () => {
+  const node = HyperNode.make("div", {
+    "data-ignore": false as any,
+    "data-ignore-morph": true as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .not
+    .toContain("data-ignore=\"")
+  t
+    .expect(html)
+    .toContain("data-ignore-morph")
+  t
+    .expect(html)
+    .not
+    .toContain("data-ignore-morph=")
+})
+
+t.it("data-ignore attributes only present when true", () => {
+  const nodeTrue = HyperNode.make("div", {
+    "data-ignore": true as any,
+  })
+
+  const nodeFalse = HyperNode.make("div", {
+    "data-ignore": false as any,
+  })
+
+  const htmlTrue = HyperHtml.renderToString(nodeTrue, Datastar.HyperHooks)
+  const htmlFalse = HyperHtml.renderToString(nodeFalse, Datastar.HyperHooks)
+
+  t
+    .expect(htmlTrue)
+    .toContain("data-ignore")
+  t
+    .expect(htmlTrue)
+    .not
+    .toContain("data-ignore=")
+  t
+    .expect(htmlFalse)
+    .not
+    .toContain("data-ignore")
+})
+
+t.it("dynamic attributes with suffixes", () => {
+  const node = HyperNode.make("div", {
+    "data-class-active": "hidden" as any,
+    "data-attr-tabindex": "5" as any,
+    "data-style-opacity": "0.5" as any,
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toContain("data-class-active=\"hidden\"")
+  t
+    .expect(html)
+    .toContain("data-attr-tabindex=\"5\"")
+  t
+    .expect(html)
+    .toContain("data-style-opacity=\"0.5\"")
+})
+
+t.it("JSX with data-signals object", () => {
+  const node = jsx("div", {
+    "data-signals": { isOpen: false, count: 42 } as any,
+    children: "content",
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe(
+      "<div data-signals=\"{&quot;isOpen&quot;:false,&quot;count&quot;:42}\">content</div>",
+    )
+  t
+    .expect(html)
+    .not
+    .toContain("[object Object]")
+})
+
+t.it("JSX component returning element with data-signals", () => {
+  function TestComponent() {
+    return jsx("div", {
+      "data-signals": { isOpen: false } as any,
+      children: jsx("span", { children: "nested content" }),
+    })
+  }
+
+  const node = jsx(TestComponent, {})
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+
+  t
+    .expect(html)
+    .toBe(
+      "<div data-signals=\"{&quot;isOpen&quot;:false}\"><span>nested content</span></div>",
+    )
+  t
+    .expect(html)
+    .not
+    .toContain("[object Object]")
+})
+
+t.it("debug hook execution", () => {
+  const node = jsx("div", {
+    "data-signals": { isOpen: false, count: 42 } as any,
+    children: "content",
+  })
+
+  const html = HyperHtml.renderToString(node, Datastar.HyperHooks)
+  console.log("Final HTML:", html)
+
+  t
+    .expect(html)
+    .not
+    .toContain("[object Object]")
+})

package/src/x/datastar/Datastar.ts

@@ -0,0 +1,68 @@
+import * as HyperNode from "../../HyperNode.ts"
+
+export const HyperHooks = {
+  onNode,
+} as const
+
+function onNode(node: HyperNode.HyperNode) {
+  const {
+    "data-signals": dataSignals,
+    "data-class": dataClass,
+    "data-attr": dataAttr,
+    "data-style": dataStyle,
+    "data-show": dataShow,
+    "data-ignore": dataIgnore,
+    "data-ignore-morph": dataIgnoreMorph,
+  } = node.props as any
+
+  if (typeof dataSignals === "object" && dataSignals !== null) {
+    node.props["data-signals"] = JSON.stringify(dataSignals)
+  }
+
+  if (typeof dataClass === "function") {
+    node.props["data-class"] = `(${dataClass.toString()})()`
+  } else if (typeof dataClass === "object" && dataClass !== null) {
+    node.props["data-class"] = JSON.stringify(dataClass)
+  }
+
+  if (typeof dataAttr === "object" && dataAttr !== null) {
+    node.props["data-attr"] = JSON.stringify(dataAttr)
+  }
+
+  if (typeof dataStyle === "function") {
+    node.props["data-style"] = `(${dataStyle.toString()})()`
+  } else if (typeof dataStyle === "object" && dataStyle !== null) {
+    node.props["data-style"] = JSON.stringify(dataStyle)
+  }
+
+  if (typeof dataShow === "boolean") {
+    node.props["data-show"] = dataShow.toString()
+  }
+
+  if (dataIgnore !== true && dataIgnore !== undefined) {
+    delete node.props["data-ignore"]
+  }
+
+  if (dataIgnoreMorph !== true && dataIgnoreMorph !== undefined) {
+    delete node.props["data-ignore-morph"]
+  }
+
+  // Handle dynamic attributes with suffixes
+  for (const [key, value] of Object.entries(node.props)) {
+    if (
+      key.startsWith("data-signals-")
+      && typeof value === "object"
+      && value !== null
+    ) {
+      node.props[key] = JSON.stringify(value)
+    }
+
+    if (
+      key.startsWith("data-on-")
+      && typeof value === "function"
+    ) {
+      // @ts-ignore
+      node.props[key] = `(${value.toString()})()`
+    }
+  }
+}

package/src/x/datastar/index.ts

@@ -0,0 +1,4 @@
+export * as Datastar from "./Datastar.ts"
+export {
+  HyperHooks,
+} from "./Datastar.ts"

package/src/x/datastar/jsx-datastar.d.ts

@@ -0,0 +1,63 @@
+// Datastar object types for specific attributes
+type DatastarSignalsObject = Record<string, any>
+type DatastarClassObject = Record<string, boolean | string>
+type DatastarAttrObject = Record<string, string | boolean | number>
+type DatastarStyleObject = Record<
+  string,
+  string | number | boolean | null | undefined
+>
+
+/**
+ * Datastar attributes for reactive web applications
+ * @see https://data-star.dev/reference/attributes
+ */
+export interface DatastarAttributes {
+  // Core attributes that can accept objects (but also strings)
+  "data-signals"?: string | DatastarSignalsObject | undefined
+  "data-class"?: string | DatastarClassObject | undefined
+  "data-attr"?: string | DatastarAttrObject | undefined
+  "data-style"?: Function | string | DatastarStyleObject | undefined
+
+  // Boolean/presence attributes (but also strings)
+  "data-show"?: string | boolean | undefined
+  "data-ignore"?: string | boolean | undefined
+  "data-ignore-morph"?: string | boolean | undefined
+
+  // All other Datastar attributes as strings only
+  "data-bind"?: string | undefined
+  "data-computed"?: string | undefined
+  "data-effect"?: string | undefined
+  "data-indicator"?: string | undefined
+  "data-json-signals"?: string | undefined
+  "data-on"?: string | undefined
+  "data-on-intersect"?: string | undefined
+  "data-on-interval"?: string | undefined
+  "data-on-load"?: string | undefined
+  "data-on-signal-patch"?: string | undefined
+  "data-on-signal-patch-filter"?: string | undefined
+  "data-preserve-attr"?: string | undefined
+  "data-ref"?: string | undefined
+  "data-text"?: string | undefined
+
+  // Pro attributes (strings only)
+  "data-animate"?: string | undefined
+  "data-custom-validity"?: string | undefined
+  "data-on-raf"?: string | undefined
+  "data-on-resize"?: string | undefined
+  "data-persist"?: string | undefined
+  "data-query-string"?: string | undefined
+  "data-replace-url"?: string | undefined
+  "data-scroll-into-view"?: string | undefined
+  "data-view-transition"?: string | undefined
+
+  // Dynamic attributes with suffixes
+  [key: `data-signals-${string}`]: string | undefined
+  [key: `data-class-${string}`]: string | undefined
+  [key: `data-attr-${string}`]: string | undefined
+  [key: `data-style-${string}`]: string | undefined
+  [key: `data-bind-${string}`]: string | undefined
+  [key: `data-computed-${string}`]: string | undefined
+  [key: `data-indicator-${string}`]: string | undefined
+  [key: `data-ref-${string}`]: string | undefined
+  [key: `data-on-${string}`]: Function | string | undefined
+}