effect-start 0.16.0 → 0.17.0

package/src/hyper/HyperHtml.ts

@@ -120,8 +120,13 @@ export function renderToString(
             result += ` ${esc(key)}`
           } else {
             const resolvedKey = key === "className" ? "class" : key
+            const value = props[key]
 
-            result += ` ${esc(resolvedKey)}="${esc(props[key])}"`
+            if (key.startsWith("data-") && typeof value === "object") {
+              result += ` ${esc(resolvedKey)}="${esc(JSON.stringify(value))}"`
+            } else {
+              result += ` ${esc(resolvedKey)}="${esc(value)}"`
+            }
           }
         }
       }
@@ -139,7 +144,10 @@ export function renderToString(
           result += html
         } else {
           const children = props.children
-          if (Array.isArray(children)) {
+
+          if (type === "script" && typeof children === "function") {
+            result += `(${children.toString()})(window)`
+          } else if (Array.isArray(children)) {
             for (let i = children.length - 1; i >= 0; i--) {
               stack.push(children[i])
             }

package/src/hyper/HyperNode.ts

@@ -12,6 +12,8 @@ export type Props = {
     | Primitive
     | HyperNode
     | Iterable<Primitive | HyperNode>
+    | Record<string, unknown>
+    | ((window: Window) => void)
 }
 
 export type HyperComponent = (

package/src/hyper/HyperRoute.test.tsx

@@ -0,0 +1,197 @@
+/** @jsxImportSource effect-start */
+import * as test from "bun:test"
+import * as Effect from "effect/Effect"
+import * as Entity from "../Entity.ts"
+import * as Http from "../Http.ts"
+import * as Route from "../Route.ts"
+import * as RouteHttp from "../RouteHttp.ts"
+import * as HyperRoute from "./HyperRoute.ts"
+
+test.describe("HyperRoute.html", () => {
+  test.it("renders JSX to HTML string", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          <div>
+            Hello World
+          </div>,
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(response.status).toBe(200)
+    test.expect(response.headers.get("Content-Type")).toBe("text/html; charset=utf-8")
+    test.expect(await response.text()).toBe("<div>Hello World</div>")
+  })
+
+  test.it("renders nested JSX elements", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          <div class="container">
+            <h1>
+              Title
+            </h1>
+            <p>
+              Paragraph
+            </p>
+          </div>,
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe(
+      "<div class=\"container\"><h1>Title</h1><p>Paragraph</p></div>",
+    )
+  })
+
+  test.it("renders JSX from Effect", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          Effect.succeed(
+            <span>
+              From Effect
+            </span>,
+          ),
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe("<span>From Effect</span>")
+  })
+
+  test.it("renders JSX from generator function", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          Effect.gen(function*() {
+            const name = yield* Effect.succeed("World")
+            return (
+              <div>
+                Hello {name}
+              </div>
+            )
+          }),
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe("<div>Hello World</div>")
+  })
+
+  test.it("renders JSX from handler function", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html((context) =>
+          Effect.succeed(
+            <div>
+              Request received
+            </div>,
+          )
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe("<div>Request received</div>")
+  })
+
+  test.it("renders JSX with dynamic content", async () => {
+    const items = ["Apple", "Banana", "Cherry"]
+
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          <ul>
+            {items.map((item) => (
+              <li>
+                {item}
+              </li>
+            ))}
+          </ul>,
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe(
+      "<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>",
+    )
+  })
+
+  test.it("handles Entity with JSX body", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          Entity.make(
+            <div>
+              With Entity
+            </div>,
+            { status: 201 },
+          ),
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(response.status).toBe(201)
+    test.expect(await response.text()).toBe("<div>With Entity</div>")
+  })
+
+  test.it("renders data-* attributes with object values as JSON", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          <div
+            data-signals={{
+              draft: "",
+              pendingDraft: "",
+              username: "User123",
+            }}
+          >
+            Content
+          </div>,
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+
+    test.expect(await response.text()).toBe(
+      "<div data-signals=\"{&quot;draft&quot;:&quot;&quot;,&quot;pendingDraft&quot;:&quot;&quot;,&quot;username&quot;:&quot;User123&quot;}\">Content</div>",
+    )
+  })
+
+  test.it("renders script with function child as IIFE", async () => {
+    const handler = RouteHttp.toWebHandler(
+      Route.get(
+        HyperRoute.html(
+          <script>
+            {(window) => {
+              console.log("Hello from", window.document.title)
+            }}
+          </script>,
+        ),
+      ),
+    )
+
+    const response = await Http.fetch(handler, { path: "/" })
+    const text = await response.text()
+
+    test.expect(text).toContain("<script>(")
+    test.expect(text).toContain(")(window)</script>")
+    test.expect(text).toContain("window.document.title")
+  })
+})

package/src/hyper/HyperRoute.ts

@@ -0,0 +1,61 @@
+import * as Effect from "effect/Effect"
+import * as Entity from "../Entity.ts"
+import * as Route from "../Route.ts"
+import type * as RouteBody from "../RouteBody.ts"
+import * as HyperHtml from "./HyperHtml.ts"
+import type { JSX } from "./jsx.d.ts"
+
+function renderValue(
+  value: JSX.Children | Entity.Entity<JSX.Children>,
+): string | Entity.Entity<string> {
+  if (Entity.isEntity(value)) {
+    return Entity.make(HyperHtml.renderToString(value.body), {
+      status: value.status,
+      url: value.url,
+      headers: value.headers,
+    })
+  }
+  return HyperHtml.renderToString(value)
+}
+
+function normalizeToEffect<B, A, E, R>(
+  handler: RouteBody.HandlerInput<B, A, E, R>,
+  context: B,
+  next: (context?: Partial<B> & Record<string, unknown>) => Entity.Entity<A>,
+): Effect.Effect<A | Entity.Entity<A>, E, R> {
+  if (Effect.isEffect(handler)) {
+    return handler
+  }
+  if (typeof handler === "function") {
+    const result = (handler as Function)(context, next)
+    if (Effect.isEffect(result)) {
+      return result as Effect.Effect<A | Entity.Entity<A>, E, R>
+    }
+    return Effect.gen(function*() {
+      return yield* result
+    }) as Effect.Effect<A | Entity.Entity<A>, E, R>
+  }
+  return Effect.succeed(handler as A | Entity.Entity<A>)
+}
+
+export function html<
+  D extends Route.RouteDescriptor.Any,
+  B extends {},
+  I extends Route.Route.Tuple,
+  E = never,
+  R = never,
+>(
+  handler: RouteBody.HandlerInput<
+    NoInfer<D & B & Route.ExtractBindings<I> & { format: "html" }>,
+    JSX.Children,
+    E,
+    R
+  >,
+) {
+  return Route.html<D, B, I, string, E, R>((context, next) =>
+    Effect.map(
+      normalizeToEffect(handler, context, next as never),
+      renderValue,
+    )
+  )
+}

package/src/hyper/index.ts

@@ -0,0 +1,4 @@
+export * as Hyper from "./Hyper.ts"
+export * as HyperHtml from "./HyperHtml.ts"
+export * as HyperNode from "./HyperNode.ts"
+export * as HyperRoute from "./HyperRoute.ts"

package/src/hyper/jsx.d.ts

@@ -1818,6 +1818,21 @@ export namespace JSX {
     event?: string | undefined
     /** @deprecated */
     language?: string | undefined
+
+    children?: Children
+  }
+
+  // Separate interface for script elements with function children.
+  // This enables TypeScript to infer the `window` parameter type.
+  //
+  // Using a union in a single interface (`children?: Function | Children`)
+  // doesn't work because TS can't infer callback parameter types from unions.
+  // By splitting into two interfaces, TS can discriminate based on children
+  interface ScriptHTMLAttributesWithHandler<T>
+    extends Omit<ScriptHTMLAttributes<T>, "children" | "type">
+  {
+    children: (window: Window) => void
+    type?: never
   }
   interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
     autocomplete?: HTMLAutocomplete | undefined

package/src/index.ts

@@ -1,4 +1,5 @@
 export * as Bundle from "./bundler/Bundle.ts"
+export * as Development from "./Development.ts"
 export * as Entity from "./Entity.ts"
 export * as FileRouter from "./FileRouter.ts"
 export * as Route from "./Route.ts"

package/src/node/FileSystem.ts

@@ -1,3 +1,6 @@
+/*
+ * Adapted from @effect/platform
+ */
 import { effectify } from "@effect/platform/Effectify"
 import * as Error from "@effect/platform/Error"
 import type {
@@ -715,6 +718,11 @@ const makeFileSystem = Effect.map(
 
 export const layer = Layer.effect(FileSystem.FileSystem, makeFileSystem)
 
+export {
+  Error,
+  FileSystem,
+}
+
 export function handleErrnoException(
   module: SystemError["module"],
   method: string,

package/src/FileSystemExtra.test.ts

@@ -1,242 +0,0 @@
-import * as FileSystem from "@effect/platform/FileSystem"
-import * as test from "bun:test"
-import { MemoryFileSystem } from "effect-memfs"
-import * as Chunk from "effect/Chunk"
-import * as Effect from "effect/Effect"
-import * as Fiber from "effect/Fiber"
-import * as Function from "effect/Function"
-import * as Stream from "effect/Stream"
-import * as FileSystemExtra from "./FileSystemExtra.ts"
-
-test.describe(`${FileSystemExtra.watchSource.name}`, () => {
-  test.it("emits events for file creation", () =>
-    Effect
-      .gen(function*() {
-        const fs = yield* FileSystem.FileSystem
-        const watchDir = "/watch-test"
-
-        const fiber = yield* Function.pipe(
-          FileSystemExtra.watchSource({ path: watchDir }),
-          Stream.take(1),
-          Stream.runCollect,
-          Effect.fork,
-        )
-
-        yield* Effect.sleep(1)
-
-        yield* fs.writeFileString(`${watchDir}/test.ts`, "const x = 1")
-
-        const events = yield* Fiber.join(fiber)
-
-        test
-          .expect(Chunk.size(events))
-          .toBeGreaterThan(0)
-        const first = Chunk.unsafeGet(events, 0)
-        test
-          .expect(first.path)
-          .toContain("test.ts")
-        test
-          .expect(["rename", "change"])
-          .toContain(first.eventType)
-        test
-          .expect(first.filename)
-          .toBe("test.ts")
-      })
-      .pipe(
-        Effect.scoped,
-        Effect.provide(
-          MemoryFileSystem.layerWith({ "/watch-test/.gitkeep": "" }),
-        ),
-        Effect.runPromise,
-      ))
-
-  test.it(
-    "emits change event for file modification",
-    () =>
-      Effect
-        .gen(function*() {
-          const fs = yield* FileSystem.FileSystem
-          const watchDir = "/watch-mod"
-          const filePath = `${watchDir}/file.ts`
-
-          const fiber = yield* Function.pipe(
-            FileSystemExtra.watchSource({ path: watchDir }),
-            Stream.take(1),
-            Stream.runCollect,
-            Effect.fork,
-          )
-
-          yield* Effect.sleep(1)
-          yield* fs.writeFileString(filePath, "modified")
-
-          const events = yield* Fiber.join(fiber)
-
-          test
-            .expect(Chunk.size(events))
-            .toBeGreaterThan(0)
-          test
-            .expect(Chunk.unsafeGet(events, 0).eventType)
-            .toBe("change")
-        })
-        .pipe(
-          Effect.scoped,
-          Effect.provide(
-            MemoryFileSystem.layerWith({ "/watch-mod/file.ts": "initial" }),
-          ),
-          Effect.runPromise,
-        ),
-  )
-
-  test.it("applies custom filter", () =>
-    Effect
-      .gen(function*() {
-        const fs = yield* FileSystem.FileSystem
-        const watchDir = "/watch-filter"
-
-        const fiber = yield* Function.pipe(
-          FileSystemExtra.watchSource({
-            path: watchDir,
-            filter: FileSystemExtra.filterSourceFiles,
-          }),
-          Stream.take(1),
-          Stream.runCollect,
-          Effect.fork,
-        )
-
-        yield* Effect.sleep(1)
-        yield* fs.writeFileString(`${watchDir}/ignored.txt`, "ignored")
-        yield* Effect.sleep(1)
-        yield* fs.writeFileString(`${watchDir}/included.ts`, "included")
-
-        const events = yield* Fiber.join(fiber)
-
-        test
-          .expect(Chunk.size(events))
-          .toBe(1)
-        test
-          .expect(Chunk.unsafeGet(events, 0).path)
-          .toContain("included.ts")
-      })
-      .pipe(
-        Effect.scoped,
-        Effect.provide(
-          MemoryFileSystem.layerWith({ "/watch-filter/.gitkeep": "" }),
-        ),
-        Effect.runPromise,
-      ))
-})
-
-test.describe(`${FileSystemExtra.filterSourceFiles.name}`, () => {
-  test.it("matches source file extensions", () => {
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.ts",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.tsx",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.js",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.jsx",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.json",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.css",
-        }),
-      )
-      .toBe(true)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.html",
-        }),
-      )
-      .toBe(true)
-  })
-
-  test.it("rejects non-source files", () => {
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.txt",
-        }),
-      )
-      .toBe(false)
-    test
-      .expect(
-        FileSystemExtra.filterSourceFiles({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b.md",
-        }),
-      )
-      .toBe(false)
-  })
-})
-
-test.describe(`${FileSystemExtra.filterDirectory.name}`, () => {
-  test.it("matches directories", () => {
-    test
-      .expect(
-        FileSystemExtra.filterDirectory({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b/",
-        }),
-      )
-      .toBe(true)
-  })
-
-  test.it("rejects files", () => {
-    test
-      .expect(
-        FileSystemExtra.filterDirectory({
-          eventType: "change",
-          filename: "x",
-          path: "/a/b",
-        }),
-      )
-      .toBe(false)
-  })
-})

package/src/FileSystemExtra.ts

@@ -1,66 +0,0 @@
-import * as Error from "@effect/platform/Error"
-import * as FileSystem from "@effect/platform/FileSystem"
-import * as Effect from "effect/Effect"
-import * as Function from "effect/Function"
-import * as Stream from "effect/Stream"
-import * as NPath from "node:path"
-
-const SOURCE_FILENAME = /\.(tsx?|jsx?|html?|css|json)$/
-
-export type WatchEvent = {
-  eventType: "rename" | "change"
-  filename: string
-  path: string
-}
-
-export const filterSourceFiles = (event: WatchEvent): boolean => {
-  return SOURCE_FILENAME.test(event.path)
-}
-
-export const filterDirectory = (event: WatchEvent): boolean => {
-  return event.path.endsWith("/")
-}
-
-export const watchSource = (
-  opts?: {
-    path?: string
-    recursive?: boolean
-    filter?: (event: WatchEvent) => boolean
-  },
-): Stream.Stream<WatchEvent, Error.PlatformError, FileSystem.FileSystem> => {
-  const baseDir = opts?.path ?? process.cwd()
-  const customFilter = opts?.filter
-
-  return Function.pipe(
-    Stream.unwrap(
-      Effect.map(
-        FileSystem.FileSystem,
-        fs => fs.watch(baseDir, { recursive: opts?.recursive ?? true }),
-      ),
-    ),
-    Stream.mapEffect(e =>
-      Effect.gen(function*() {
-        const fs = yield* FileSystem.FileSystem
-        const relativePath = NPath.relative(baseDir, e.path)
-        const eventType: "change" | "rename" = e._tag === "Update"
-          ? "change"
-          : "rename"
-        const info = yield* Effect.either(fs.stat(e.path))
-        const isDir = info._tag === "Right" && info.right.type === "Directory"
-        return {
-          eventType,
-          filename: relativePath,
-          path: isDir ? `${e.path}/` : e.path,
-        }
-      })
-    ),
-    customFilter ? Stream.filter(customFilter) : Function.identity,
-    Stream.rechunk(1),
-    Stream.throttle({
-      units: 1,
-      cost: () => 1,
-      duration: "400 millis",
-      strategy: "enforce",
-    }),
-  )
-}