effect-start 0.16.0 → 0.17.1

package/src/Values.ts

@@ -4,16 +4,18 @@ type JsonPrimitives =
   | boolean
   | null
 
+export type JsonObject = {
+  [key: string]:
+    | Json
+    // undefined won't be included in JSON objects but this will allow
+    // to use Json type in functions that return object of multiple shapes
+    | undefined
+}
+
 export type Json =
   | JsonPrimitives
   | Json[]
-  | {
-    [key: string]:
-      | Json
-      // undefined won't be included in JSON objects but this will allow
-      // to use Json type in functions that return object of multiple shapes
-      | undefined
-  }
+  | JsonObject
 
 export function isPlainObject(
   value: unknown,

package/src/bun/BunBundle.ts

@@ -9,10 +9,7 @@ import {
   Iterable,
   Layer,
   pipe,
-  PubSub,
   Record,
-  Stream,
-  SynchronizedRef,
 } from "effect"
 import * as NPath from "node:path"
 import type {
@@ -20,7 +17,6 @@ import type {
   BundleManifest,
 } from "../bundler/Bundle.ts"
 import * as Bundle from "../bundler/Bundle.ts"
-import * as FileSystemExtra from "../FileSystemExtra.ts"
 import { BunImportTrackerPlugin } from "./index.ts"
 
 export type BuildOptions = Omit<
@@ -125,75 +121,6 @@ export function layer<T>(
   return Layer.effect(tag, build(config))
 }
 
-export function layerDev<T>(
-  tag: Context.Tag<T, BundleContext>,
-  config: BuildOptions,
-) {
-  return Layer.scoped(
-    tag,
-    Effect.gen(function*() {
-      const loadRefKey = "_loadRef"
-      const sharedBundle = yield* build(config)
-
-      const loadRef = yield* SynchronizedRef.make(null)
-      sharedBundle[loadRefKey] = loadRef
-      sharedBundle.events = yield* PubSub.unbounded<Bundle.BundleEvent>()
-
-      yield* Effect.fork(
-        pipe(
-          FileSystemExtra.watchSource({
-            filter: FileSystemExtra.filterSourceFiles,
-          }),
-          Stream.map(v =>
-            ({
-              _tag: "Change",
-              path: v.path,
-            }) as Bundle.BundleEvent
-          ),
-          Stream.onError(err =>
-            Effect.logError("Error while watching files", err)
-          ),
-          Stream.runForEach((v) =>
-            pipe(
-              Effect.gen(function*() {
-                yield* Effect.logDebug("Updating bundle: " + tag.key)
-
-                const newBundle = yield* build(config)
-
-                Object.assign(sharedBundle, newBundle)
-
-                // Clean old loaded bundle
-                yield* SynchronizedRef.update(loadRef, () => null)
-
-                // publish event after the built
-                if (sharedBundle.events) {
-                  yield* PubSub.publish(sharedBundle.events, v)
-                }
-              }),
-              Effect.catchAll(err =>
-                Effect.gen(function*() {
-                  yield* Effect.logError(
-                    "Error while updating bundle",
-                    err,
-                  )
-                  if (sharedBundle.events) {
-                    yield* PubSub.publish(sharedBundle.events, {
-                      _tag: "BuildError",
-                      error: String(err),
-                    })
-                  }
-                })
-              ),
-            )
-          ),
-        ),
-      )
-
-      return sharedBundle
-    }),
-  )
-}
-
 /**
  * Finds common path prefix across provided paths.
  */

package/src/bun/BunRoute.ts

@@ -162,8 +162,6 @@ export function htmlBundle(
   }
 }
 
-
-
 type BunServerFetchHandler = (
   request: Request,
   server: Bun.Server<unknown>,

package/src/hyper/HyperHtml.test.ts

@@ -88,3 +88,122 @@ test.it("mixed boolean and string attributes", () => {
     .expect(html)
     .toBe("<input type=\"checkbox\" checked name=\"test\" value=\"on\">")
 })
+
+test.it("data-* attributes with object values are JSON stringified", () => {
+  const node = HyperNode.make("div", {
+    "data-signals": {
+      draft: "",
+      pendingDraft: "",
+      username: "User123",
+    },
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe(
+      "<div data-signals=\"{&quot;draft&quot;:&quot;&quot;,&quot;pendingDraft&quot;:&quot;&quot;,&quot;username&quot;:&quot;User123&quot;}\"></div>",
+    )
+})
+
+test.it("data-* attributes with array values are JSON stringified", () => {
+  const node = HyperNode.make("div", {
+    "data-items": [1, 2, 3],
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe("<div data-items=\"[1,2,3]\"></div>")
+})
+
+test.it("data-* attributes with nested object values", () => {
+  const node = HyperNode.make("div", {
+    "data-config": {
+      user: { name: "John", active: true },
+      settings: { theme: "dark" },
+    },
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe(
+      "<div data-config=\"{&quot;user&quot;:{&quot;name&quot;:&quot;John&quot;,&quot;active&quot;:true},&quot;settings&quot;:{&quot;theme&quot;:&quot;dark&quot;}}\"></div>",
+    )
+})
+
+test.it("data-* string values are not JSON stringified", () => {
+  const node = HyperNode.make("div", {
+    "data-value": "hello world",
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe("<div data-value=\"hello world\"></div>")
+})
+
+test.it("non-data attributes with object values are not JSON stringified", () => {
+  const node = HyperNode.make("div", {
+    style: "color: red",
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe("<div style=\"color: red\"></div>")
+})
+
+test.it("script with function child renders as IIFE", () => {
+  const handler = (window: Window) => {
+    console.log("Hello from", window.document.title)
+  }
+
+  const node = HyperNode.make("script", {
+    children: handler,
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe(`<script>(${handler.toString()})(window)</script>`)
+})
+
+test.it("script with arrow function child renders as IIFE", () => {
+  const node = HyperNode.make("script", {
+    children: (window: Window) => {
+      window.alert("test")
+    },
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toContain("<script>(")
+  test
+    .expect(html)
+    .toContain(")(window)</script>")
+  test
+    .expect(html)
+    .toContain("window.alert")
+})
+
+test.it("script with string child renders normally", () => {
+  const node = HyperNode.make("script", {
+    children: "console.log('hello')",
+  })
+
+  const html = HyperHtml.renderToString(node)
+
+  test
+    .expect(html)
+    .toBe("<script>console.log(&apos;hello&apos;)</script>")
+})

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,199 @@
+/** @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/x/tailwind/compile.ts

@@ -88,13 +88,19 @@ async function ensureSourceDetectionRootExists(compiler: {
   }
 }
 
-export async function compileAst(ast: AstNode[], options: CompileOptions) {
+export async function compileAst(
+  ast: AstNode[],
+  options: CompileOptions,
+): ReturnType<typeof _compileAst> {
   let compiler = await _compileAst(ast, createCompileOptions(options))
   await ensureSourceDetectionRootExists(compiler)
   return compiler
 }
 
-export async function compile(css: string, options: CompileOptions) {
+export async function compile(
+  css: string,
+  options: CompileOptions,
+): ReturnType<typeof _compile> {
   let compiler = await _compile(css, createCompileOptions(options))
   await ensureSourceDetectionRootExists(compiler)
   return compiler