effect-start 0.9.0

package/src/bun/BunVirtualFilesPlugin.ts

@@ -0,0 +1,59 @@
+import type {
+  BunPlugin,
+  Loader,
+} from "bun"
+
+type VirtualFiles = Record<string, string>
+
+function loaderFromPath(path: string): Loader {
+  return path.slice(path.lastIndexOf(".") + 1) as Loader
+}
+
+export function make(files: VirtualFiles): BunPlugin {
+  return {
+    name: "virtual-fs",
+    setup(build) {
+      build.onResolve(
+        {
+          // change the filter so it only works for file namespace
+          filter: /.*/,
+        },
+        (args) => {
+          const resolved = resolvePath(args.path, args.resolveDir)
+          const resolvedFile = files[resolved]
+
+          if (resolvedFile) {
+            return {
+              path: resolved,
+              namespace: "virtual-fs",
+            }
+          }
+          return
+        },
+      )
+
+      build.onLoad(
+        {
+          filter: /.*/,
+          namespace: "virtual-fs",
+        },
+        (args) => {
+          const contents = files[args.path]
+
+          if (!contents) {
+            return undefined
+          }
+
+          return {
+            contents,
+            loader: loaderFromPath(args.path),
+          }
+        },
+      )
+    },
+  }
+}
+
+function resolvePath(path: string, base = process.cwd()) {
+  return Bun.resolveSync(path, base)
+}

package/src/bun/index.ts

@@ -0,0 +1,4 @@
+export * as BunBundle from "./BunBundle.ts"
+export * as BunFullstackServer from "./BunFullstackServer.ts"
+export * as BunImportTrackerPlugin from "./BunImportTrackerPlugin.ts"
+export * as BunTailwindPlugin from "./BunTailwindPlugin.ts"

package/src/client/Overlay.ts

@@ -0,0 +1,34 @@
+const OVERLAY_ID = "_bundler_error_overlay"
+
+export function getOverlay() {
+  let overlay = document.getElementById(OVERLAY_ID) as HTMLPreElement | null
+  if (!overlay) {
+    overlay = document.createElement("pre")
+    overlay.id = OVERLAY_ID
+    Object.assign(overlay.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      right: "0",
+      maxHeight: "40%",
+      overflowY: "auto",
+      margin: "0",
+      padding: "4px",
+      background: "black",
+      color: "red",
+      fontFamily: "monospace",
+      zIndex: "2147483647",
+      whiteSpace: "pre-wrap",
+    })
+    document.body.appendChild(overlay)
+  }
+  return overlay
+}
+
+export function showBuildError(message: string) {
+  const overlay = getOverlay()
+  const atBottom =
+    overlay.scrollTop + overlay.clientHeight >= overlay.scrollHeight - 1
+  overlay.textContent += message + "\n"
+  if (atBottom) overlay.scrollTop = overlay.scrollHeight
+}

package/src/client/ScrollState.ts

@@ -0,0 +1,120 @@
+const ScrollKey = "_BUNDLER_SCROLL"
+
+type Anchor = {
+  selector: string
+  offset: number
+}
+
+type ScrollState = {
+  scrollY: number
+  anchors: Anchor[]
+}
+
+/**
+ * Persist current scroll state to session storage.
+ * Scroll state is saved relatively to visible elements.
+ */
+export function persist() {
+  const anchors: Anchor[] = []
+  const step = window.innerHeight / 4
+
+  for (let i = 1; i <= 3; i++) {
+    const y = step * i
+    const element = document.elementFromPoint(0, y)
+    if (!element) continue
+    const target = element.id
+      ? element
+      : element.closest("[id]") ?? element
+
+    anchors.push({
+      selector: selectorFromElement(target),
+      offset: target.getBoundingClientRect().top,
+    })
+  }
+
+  const state: ScrollState = {
+    anchors,
+    scrollY: window.scrollY,
+  }
+
+  sessionStorage.setItem(ScrollKey, JSON.stringify(state))
+}
+
+export function restore() {
+  const timeout = 3000
+  const tick = 50
+  const raw = sessionStorage.getItem(ScrollKey)
+  if (!raw) return
+
+  sessionStorage.removeItem(ScrollKey)
+
+  const state: ScrollState = JSON.parse(raw)
+
+  const apply = () => {
+    for (const anchor of state.anchors) {
+      const element = document.querySelector(anchor.selector)
+      if (element) {
+        const rect = element.getBoundingClientRect()
+        const top = window.scrollY + rect.top - anchor.offset
+        window.scrollTo({
+          top,
+        })
+        return
+      }
+    }
+
+    window.scrollTo({
+      top: state.scrollY,
+    })
+  }
+
+  let observer: MutationObserver
+  let stableTimer: ReturnType<typeof setTimeout> | undefined
+  const deadline = setTimeout(() => {
+    observer.disconnect()
+    if (stableTimer) clearTimeout(stableTimer)
+    apply()
+  }, timeout)
+
+  observer = new MutationObserver(() => {
+    if (stableTimer) clearTimeout(stableTimer)
+    stableTimer = setTimeout(() => {
+      observer.disconnect()
+      clearTimeout(deadline)
+      apply()
+    }, tick)
+  })
+
+  observer.observe(document.body, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    characterData: true,
+  })
+
+  stableTimer = setTimeout(() => {
+    observer.disconnect()
+    clearTimeout(deadline)
+    apply()
+  }, tick)
+}
+
+function selectorFromElement(element: Element): string {
+  if (element.id) {
+    return `#${CSS.escape(element.id)}`
+  }
+  const parts: string[] = []
+  let current: Element | null = element
+
+  while (current && current !== document.body) {
+    const parent = current.parentElement
+    if (!parent) break
+    const index = Array
+      .from(parent.children)
+      .indexOf(current) + 1
+    parts.unshift(`${current.tagName.toLowerCase()}:nth-child(${index})`)
+    current = parent
+  }
+
+  return parts.join(" > ")
+}

package/src/client/index.ts

@@ -0,0 +1,101 @@
+/**
+ * This module is intended to be imported in a browser bundle in a development.
+ * It is responsible for live reloading the page when bundle changes.
+ * When NODE_ENV=production, it does nothing.
+ */
+
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+
+import type {
+  BundleEvent,
+  BundleManifest,
+} from "../Bundle.ts"
+import { showBuildError } from "./Overlay.ts"
+import * as ScrollState from "./ScrollState.ts"
+
+const BUNDLE_URL = globalThis._BUNDLE_URL ?? "/_bundle"
+
+function reload() {
+  ScrollState.persist()
+  window.location.reload()
+}
+
+async function loadAllEntrypoints() {
+  const manifest: BundleManifest = await fetch(`/${BUNDLE_URL}/manifest.json`)
+    .then(v => v.json())
+
+  manifest
+    .artifacts
+    .filter(v => v.path.endsWith(".js"))
+    .forEach((artifact) => {
+      console.log(artifact.path)
+      const script = document.createElement("script")
+      script.src = `${BUNDLE_URL}/${artifact.path}`
+      script.type = "module"
+      script.onload = () => {
+        console.debug("Bundle reloaded")
+      }
+      document.body.appendChild(script)
+    })
+}
+
+function handleBundleEvent(event: BundleEvent) {
+  switch (event._tag) {
+    case "Change":
+      console.debug("Bundle change detected...")
+      reload()
+      break
+    case "BuildError":
+      showBuildError(event.error)
+      break
+  }
+}
+
+function listen() {
+  const eventSource = new EventSource(`${BUNDLE_URL}/events`)
+
+  eventSource.addEventListener("message", (event) => {
+    try {
+      reloadAllMetaLinks()
+      const data = JSON.parse(event.data)
+
+      handleBundleEvent(data)
+    } catch (error) {
+      console.error("Error parsing SSE event", {
+        error,
+        event,
+      })
+    }
+  })
+
+  eventSource.addEventListener("error", error => {
+    console.error("SSE connection error:", error)
+  })
+
+  return () => {
+    eventSource.close()
+  }
+}
+
+function reloadAllMetaLinks() {
+  for (const link of document.getElementsByTagName("link")) {
+    const url = new URL(link.href)
+
+    if (url.host === window.location.host) {
+      const next = link.cloneNode() as HTMLLinkElement
+      // TODO: this won't work when link already has query params
+      next.href = next.href + "?" + Math.random().toString(36).slice(2)
+      next.onload = () => link.remove()
+      link.parentNode!.insertBefore(next, link.nextSibling)
+      return
+    }
+  }
+}
+
+if (process.env.NODE_ENV !== "production") {
+  window.addEventListener("load", () => {
+    ScrollState.restore()
+    listen()
+  })
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+export * as Bundle from "./Bundle"
+export * as BundleHttp from "./BundleHttp"
+
+export * as StartHttp from "./StartHttp"
+
+export * as HttpAppExtra from "./HttpAppExtra"
+
+export * as PublicDirectory from "./PublicDirectory"
+
+export * as TestHttpClient from "./TestHttpClient"
+export {
+  effectFn,
+} from "./testing"
+
+export * as FileHttpRouter from "./FileHttpRouter"
+export * as FileRouter from "./FileRouter"
+
+export * as Route from "./Route"
+export * as Router from "./Router"
+
+export * as Start from "./Start"
+
+export * as Hyper from "./Hyper"
+export * as HyperHtml from "./HyperHtml"

package/src/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
+}

package/src/jsx-runtime.ts

@@ -0,0 +1,23 @@
+import * as HyperNode from "./HyperNode.ts"
+import type { JSX } from "./jsx.d.ts"
+
+function Fragment(props: { children: JSX.Element }) {
+  return props.children
+}
+
+function jsx<T extends HyperNode.Type>(
+  type: T,
+  props: T extends string ? HyperNode.Props
+    : T extends (props: infer P) => any ? P
+    : never,
+): HyperNode.HyperNode {
+  return HyperNode.make(type, props)
+}
+
+export {
+  Fragment,
+  type JSX,
+  jsx,
+  jsx as jsxDEV,
+  jsx as jsxs,
+}