effect-start 0.32.0 → 0.34.0

package/src/experimental/KeyValueStore.ts

@@ -0,0 +1,161 @@
+import * as Context from "effect/Context"
+import * as Data from "effect/Data"
+import * as Effect from "effect/Effect"
+import * as Either from "effect/Either"
+import * as Encoding from "effect/Encoding"
+import * as Function from "effect/Function"
+import * as Layer from "effect/Layer"
+import * as Predicate from "effect/Predicate"
+
+const TypeId = "effect-start/KeyValueStore" as const
+
+export interface KeyValueStore {
+  readonly [TypeId]: typeof TypeId
+  readonly get: (key: string) => Effect.Effect<string | undefined, KeyValueStoreError>
+  readonly getUint8Array: (key: string) => Effect.Effect<Uint8Array | undefined, KeyValueStoreError>
+  readonly set: (key: string, value: string | Uint8Array) => Effect.Effect<void, KeyValueStoreError>
+  readonly remove: (key: string) => Effect.Effect<void, KeyValueStoreError>
+  readonly clear: Effect.Effect<void, KeyValueStoreError>
+  readonly size: Effect.Effect<number, KeyValueStoreError>
+  readonly modify: (
+    key: string,
+    f: (value: string) => string,
+  ) => Effect.Effect<string | undefined, KeyValueStoreError>
+  readonly modifyUint8Array: (
+    key: string,
+    f: (value: Uint8Array) => Uint8Array,
+  ) => Effect.Effect<Uint8Array | undefined, KeyValueStoreError>
+  readonly has: (key: string) => Effect.Effect<boolean, KeyValueStoreError>
+  readonly isEmpty: Effect.Effect<boolean, KeyValueStoreError>
+}
+
+type MakeOptions = Partial<KeyValueStore> & {
+  readonly get: (key: string) => Effect.Effect<string | undefined, KeyValueStoreError>
+  readonly getUint8Array: (key: string) => Effect.Effect<Uint8Array | undefined, KeyValueStoreError>
+  readonly set: (key: string, value: string | Uint8Array) => Effect.Effect<void, KeyValueStoreError>
+  readonly remove: (key: string) => Effect.Effect<void, KeyValueStoreError>
+  readonly clear: Effect.Effect<void, KeyValueStoreError>
+  readonly size: Effect.Effect<number, KeyValueStoreError>
+}
+
+type MakeStringOptions = Partial<Omit<KeyValueStore, "set">> & {
+  readonly get: (key: string) => Effect.Effect<string | undefined, KeyValueStoreError>
+  readonly set: (key: string, value: string) => Effect.Effect<void, KeyValueStoreError>
+  readonly remove: (key: string) => Effect.Effect<void, KeyValueStoreError>
+  readonly clear: Effect.Effect<void, KeyValueStoreError>
+  readonly size: Effect.Effect<number, KeyValueStoreError>
+}
+
+export class KeyValueStoreError extends Data.TaggedError("KeyValueStoreError")<{
+  message: string
+  method: string
+  key?: string
+  cause?: unknown
+}> {}
+
+export const KeyValueStore: Context.Tag<KeyValueStore, KeyValueStore> = Context.GenericTag<KeyValueStore>(
+  "effect-start/KeyValueStore",
+)
+
+const make = (options: MakeOptions): KeyValueStore => ({
+  [TypeId]: TypeId,
+  has: (key) => Effect.map(options.get(key), Predicate.isNotUndefined),
+  isEmpty: Effect.map(options.size, (size) => size === 0),
+  modify: (key, f) =>
+    Effect.flatMap(options.get(key), (o) => {
+      if (o === undefined) return Effect.succeed(undefined)
+      const newValue = f(o)
+      return Effect.as(options.set(key, newValue), newValue)
+    }),
+  modifyUint8Array: (key, f) =>
+    Effect.flatMap(options.getUint8Array(key), (o) => {
+      if (o === undefined) return Effect.succeed(undefined)
+      const newValue = f(o)
+      return Effect.as(options.set(key, newValue), newValue)
+    }),
+  ...options,
+})
+
+const makeStringOnly = (options: MakeStringOptions): KeyValueStore => {
+  const encoder = new TextEncoder()
+  return make({
+    ...options,
+    getUint8Array: (key) =>
+      Effect.map(options.get(key), (value) => {
+        if (value === undefined) return undefined
+        const decoded = Encoding.decodeBase64(value)
+        return Either.isRight(decoded) ? decoded.right : encoder.encode(value)
+      }),
+    set: (key, value) =>
+      typeof value === "string"
+        ? options.set(key, value)
+        : Effect.suspend(() => options.set(key, Encoding.encodeBase64(value))),
+  })
+}
+
+export const prefix: {
+  (prefix: string): (self: KeyValueStore) => KeyValueStore
+  (self: KeyValueStore, prefix: string): KeyValueStore
+} = Function.dual(2, (self: KeyValueStore, prefix: string): KeyValueStore => ({
+  ...self,
+  get: (key) => self.get(`${prefix}${key}`),
+  getUint8Array: (key) => self.getUint8Array(`${prefix}${key}`),
+  set: (key, value) => self.set(`${prefix}${key}`, value),
+  remove: (key) => self.remove(`${prefix}${key}`),
+  has: (key) => self.has(`${prefix}${key}`),
+  modify: (key, f) => self.modify(`${prefix}${key}`, f),
+  modifyUint8Array: (key, f) => self.modifyUint8Array(`${prefix}${key}`, f),
+}))
+
+export const layerMemory: Layer.Layer<KeyValueStore> = Layer.sync(KeyValueStore, () => {
+  const store = new Map<string, string | Uint8Array>()
+  const encoder = new TextEncoder()
+
+  return make({
+    get: (key: string) =>
+      Effect.sync(() => {
+        const value = store.get(key)
+        return value === undefined ? undefined : typeof value === "string" ? value : Encoding.encodeBase64(value)
+      }),
+    getUint8Array: (key: string) =>
+      Effect.sync(() => {
+        const value = store.get(key)
+        return value === undefined ? undefined : typeof value === "string" ? encoder.encode(value) : value
+      }),
+    set: (key: string, value: string | Uint8Array) => Effect.sync(() => store.set(key, value)),
+    remove: (key: string) => Effect.sync(() => store.delete(key)),
+    clear: Effect.sync(() => store.clear()),
+    size: Effect.sync(() => store.size),
+  })
+})
+
+export const layerStorage = (evaluate: Function.LazyArg<Storage>): Layer.Layer<KeyValueStore> =>
+  Layer.sync(KeyValueStore, () => {
+    const storage = evaluate()
+    return makeStringOnly({
+      get: (key: string) =>
+        Effect.try({
+          try: () => storage.getItem(key) ?? undefined,
+          catch: () => new KeyValueStoreError({ key, method: "get", message: `Unable to get item with key ${key}` }),
+        }),
+      set: (key: string, value: string) =>
+        Effect.try({
+          try: () => storage.setItem(key, value),
+          catch: () => new KeyValueStoreError({ key, method: "set", message: `Unable to set item with key ${key}` }),
+        }),
+      remove: (key: string) =>
+        Effect.try({
+          try: () => storage.removeItem(key),
+          catch: () =>
+            new KeyValueStoreError({ key, method: "remove", message: `Unable to remove item with key ${key}` }),
+        }),
+      clear: Effect.try({
+        try: () => storage.clear(),
+        catch: () => new KeyValueStoreError({ method: "clear", message: `Unable to clear storage` }),
+      }),
+      size: Effect.try({
+        try: () => storage.length,
+        catch: () => new KeyValueStoreError({ method: "size", message: `Unable to get size` }),
+      }),
+    })
+  })

package/src/{sql → experimental}/SqlCache.ts

@@ -3,7 +3,7 @@ import * as Context from "effect/Context"
 import type * as Duration from "effect/Duration"
 import * as Effect from "effect/Effect"
 import * as Layer from "effect/Layer"
-import type * as SqlClient from "./SqlClient.ts"
+import type * as SqlClient from "../sql/SqlClient.ts"
 
 type SqlCacheInstance = Cache.Cache<string, ReadonlyArray<any>>
 

package/src/{sql → experimental}/SqlIntrospect.ts

@@ -1,6 +1,6 @@
 import * as Effect from "effect/Effect"
 import * as Schema from "effect/Schema"
-import * as SqlClient from "./SqlClient.ts"
+import * as SqlClient from "../sql/SqlClient.ts"
 
 export interface Column {
   readonly tableSchema: string

package/src/index.ts

@@ -8,3 +8,4 @@ export * as Route from "./Route.ts"
 export * as Start from "./Start.ts"
 export * as System from "./System.ts"
 export * as Unique from "./Unique.ts"
+export * as Cookies from "./Cookies.ts"

package/src/jsx-runtime.ts

@@ -1,5 +1,5 @@
 import * as Html from "./Html.ts"
-import type { JSX } from "./jsx.d.ts"
+import type { JSX } from "../src/jsx.d.ts"
 
 function Fragment(props: { children: JSX.Element }) {
   return props.children

package/src/jsx.d.ts

@@ -1,4 +1,3 @@
-import type * as Html from "./Html.ts"
 import type { DatastarAttributes } from "./datastar/jsx.d.ts"
 
 /**
@@ -16,8 +15,24 @@ import type { DatastarAttributes } from "./datastar/jsx.d.ts"
  */
 type DOMElement = never
 
+type HtmlPrimitive = string | number | boolean | null | undefined
+export type HtmlElementType = string | HtmlComponent
+export type HtmlElemenetProps = {
+  [key: string]:
+    | HtmlPrimitive
+    | HtmlElement
+    | Iterable<HtmlPrimitive | HtmlElement>
+    | Record<string, unknown>
+    | ((window: Window) => void)
+}
+export type HtmlComponent = (props: HtmlElemenetProps) => HtmlElement | HtmlPrimitive
+export interface HtmlElement {
+  type: HtmlElementType
+  props: HtmlElemenetProps
+}
+
 export namespace JSX {
-  type Element = Html.Element
+  type Element = HtmlElement
   type Child = Element | string | number | bigint
   type Children = Child | SilentChild | Iterable<Children>
 

package/src/lint/plugin.js

@@ -146,35 +146,39 @@ export default {
       },
     },
 
-    // this doens't work reliably and may cause runtime errors
-    "export-default-before-functions": {
+    "schema-type-helpers": {
       meta: {
         type: "suggestion",
         docs: {
-          description: "Enforce export default appears before any function declarations",
+          description:
+            "Prefer `typeof User.Type` over `Schema.Schema.Type<typeof User>`",
         },
+        fixable: "code",
         schema: [],
         messages: {
-          defaultAfterFunction: "export default should appear before function declarations",
+          preferTypeof:
+            'Use `typeof {{name}}.Type` instead of `Schema.Schema.Type<typeof {{name}}>`',
         },
       },
       create(context) {
+        function walk(node) {
+          if (!node || typeof node !== "object") return
+          if (Array.isArray(node)) {
+            for (const child of node) walk(child)
+            return
+          }
+          if (node.type === "TSTypeReference") {
+            checkTypeRef(context, node)
+            return
+          }
+          for (const key of Object.keys(node)) {
+            if (key === "parent") continue
+            walk(node[key])
+          }
+        }
         return {
-          Program(node) {
-            let seenFunction = false
-
-            for (const stmt of node.body) {
-              if (!seenFunction && isFunction(stmt)) {
-                seenFunction = true
-              }
-
-              if (seenFunction && stmt.type === "ExportDefaultDeclaration") {
-                context.report({
-                  node: stmt,
-                  messageId: "defaultAfterFunction",
-                })
-              }
-            }
+          TSTypeAliasDeclaration(node) {
+            walk(node.typeAnnotation)
           },
         }
       },
@@ -579,6 +583,37 @@ export default {
   },
 }
 
+function checkTypeRef(context, node) {
+  const typeName = node.typeName
+  if (typeName.type !== "TSQualifiedName") return
+  if (typeName.right.type !== "Identifier" || typeName.right.name !== "Type") return
+
+  const mid = typeName.left
+  if (mid.type !== "TSQualifiedName") return
+  if (mid.right.type !== "Identifier" || mid.right.name !== "Schema") return
+  if (mid.left.type !== "Identifier" || mid.left.name !== "Schema") return
+
+  const args = node.typeArguments
+  if (!args || args.params.length !== 1) return
+
+  const param = args.params[0]
+  if (param.type !== "TSTypeQuery") return
+
+  const exprName = param.exprName
+  if (exprName.type !== "Identifier") return
+
+  const name = exprName.name
+
+  context.report({
+    node,
+    messageId: "preferTypeof",
+    data: { name },
+    fix(fixer) {
+      return fixer.replaceTextRange(node.range, "typeof " + name + ".Type")
+    },
+  })
+}
+
 function getBaseName(source) {
   // Handle node: and bun: protocols
   if (source.startsWith("node:")) {

package/src/sql/index.ts

@@ -1,3 +1 @@
-export * as SqlCache from "./SqlCache.ts"
 export * as SqlClient from "./SqlClient.ts"
-export * as SqlIntrospect from "./SqlIntrospect.ts"

package/src/studio/StudioLogger.ts

@@ -5,6 +5,7 @@ import * as HashMap from "effect/HashMap"
 import * as List from "effect/List"
 import * as Logger from "effect/Logger"
 import * as PubSub from "effect/PubSub"
+import * as Pretty from "./_Pretty.ts"
 import * as StudioStore from "./StudioStore.ts"
 
 const studioLogger = Logger.make((options) => {
@@ -32,7 +33,7 @@ const studioLogger = Logger.make((options) => {
     const log: StudioStore.StudioLog = {
       id: StudioStore.nextLogId(),
       level,
-      message: String(options.message),
+      message: Pretty.formatLogMessage(options.message),
       fiberId: FiberId.threadName(options.fiberId),
       cause: causeStr,
       spans: spanNames,

package/src/studio/StudioStore.ts

@@ -32,6 +32,24 @@ export const nextSpanId = () => nextPackedId()
 
 export const nextTraceId = () => nextPackedId()
 
+export const studioTraceAttribute = "effect-start.studio.internal"
+
+export function isStudioTrace(spans: Array<StudioSpan>): boolean {
+  return spans.some((span) => span.attributes[studioTraceAttribute] === true)
+}
+
+export function filterOutStudioSpans(spans: Array<StudioSpan>): Array<StudioSpan> {
+  const hiddenTraceIds = new Set<bigint>()
+
+  for (const span of spans) {
+    if (span.attributes[studioTraceAttribute] === true) {
+      hiddenTraceIds.add(span.traceId)
+    }
+  }
+
+  return spans.filter((span) => !hiddenTraceIds.has(span.traceId))
+}
+
 export interface StudioSpan {
   readonly spanId: bigint
   readonly traceId: bigint

package/src/studio/_Pretty.ts

@@ -0,0 +1,59 @@
+function jsonReplacer() {
+  const seen = new WeakSet<object>()
+
+  return (_key: string, value: unknown): unknown => {
+    if (typeof value === "bigint") return String(value)
+    if (value instanceof Error) {
+      return {
+        name: value.name,
+        message: value.message,
+        stack: value.stack,
+      }
+    }
+    if (value !== null && typeof value === "object") {
+      if (seen.has(value)) return "[Circular]"
+      seen.add(value)
+    }
+    return value
+  }
+}
+
+export function isStructuredValue(value: unknown): value is object {
+  return value !== null && typeof value === "object"
+}
+
+export function prettyPrintJson(value: unknown): string {
+  try {
+    const json = JSON.stringify(value, jsonReplacer(), 2)
+    return json ?? String(value)
+  } catch {
+    return String(value)
+  }
+}
+
+export function formatLogMessage(message: unknown): string {
+  if (!Array.isArray(message)) {
+    return isStructuredValue(message) ? prettyPrintJson(message) : String(message)
+  }
+
+  const lines: Array<string> = []
+  let inlineParts: Array<string> = []
+
+  for (const part of message) {
+    if (isStructuredValue(part)) {
+      if (inlineParts.length > 0) {
+        lines.push(inlineParts.join(" "))
+        inlineParts = []
+      }
+      lines.push(prettyPrintJson(part))
+    } else {
+      inlineParts.push(String(part))
+    }
+  }
+
+  if (inlineParts.length > 0) {
+    lines.push(inlineParts.join(" "))
+  }
+
+  return lines.join("\n")
+}

package/src/studio/routes/layout.html

@@ -261,21 +261,12 @@
       }
       .tl-row {
         border-bottom: 1px solid #1e293b;
+        color: inherit;
+        text-decoration: none;
       }
-      .tl-row[open] {
+      .tl-row:hover {
         background: #111827;
       }
-      .tl-summary {
-        cursor: pointer;
-        user-select: none;
-        list-style: none;
-      }
-      .tl-summary::-webkit-details-marker {
-        display: none;
-      }
-      .tl-summary:hover {
-        background: #1e293b;
-      }
       .tl-cell {
         padding: 6px 8px;
         display: flex;

package/src/studio/routes/layout.tsx

@@ -1,4 +1,12 @@
+import * as Effect from "effect/Effect"
 import * as BunRoute from "../../bun/BunRoute.ts"
 import * as Route from "../../Route.ts"
+import * as StudioStore from "../StudioStore.ts"
 
-export default Route.use(BunRoute.htmlBundle(() => import("./layout.html")))
+export default Route.use(
+  Route.filter(function* () {
+    yield* Effect.annotateCurrentSpan(StudioStore.studioTraceAttribute, true)
+    return { context: {} }
+  }),
+  BunRoute.htmlBundle(() => import("./layout.html")),
+)

package/src/studio/routes/traces/route.tsx

@@ -12,7 +12,7 @@ export default Route.get(
   Route.html(function* (ctx) {
     const url = new URL(ctx.request.url)
     const search = url.searchParams.get("traceSearch") || ""
-    const allSpans = yield* StudioStore.allSpans()
+    const allSpans = StudioStore.filterOutStudioSpans(yield* StudioStore.allSpans())
     const names = Array.from(new Set(allSpans.map((s) => s.name))).sort()
     let spans = allSpans
     if (search) {
@@ -56,6 +56,9 @@ export default Route.get(
       Stream.mapEffect((e) =>
         Effect.gen(function* () {
           const traceSpans = yield* StudioStore.spansByTraceId(e.traceId)
+          if (StudioStore.isStudioTrace(traceSpans)) {
+            return undefined
+          }
           const traceHtml = Html.renderToString(
             <Traces.TraceGroup id={e.traceId} spans={traceSpans} />,
           )
@@ -66,6 +69,7 @@ export default Route.get(
           }
         }),
       ),
+      Stream.filter((event): event is { event: string; data: string } => event !== undefined),
     ),
   ),
 )

package/src/studio/ui/Errors.tsx

@@ -31,7 +31,7 @@ export function ErrorLine(options: { error: StudioStore.StudioError }) {
                 <span style="color:#64748b">tag </span>
                 <span
                   style="color:#fca5a5;text-decoration:underline;cursor:copy"
-                  data-on:click={`(e) => { e.signals.errorTag.value = '${t}'; e.actions.get(location.href, { contentType: 'form' }) }`}
+                  data-on:click={`(e) => { e.signals.errorTag = '${t}'; e.actions.get(location.href, { contentType: 'form' }) }`}
                 >
                   {t}
                 </span>

package/src/studio/ui/Fibers.tsx

@@ -1,6 +1,7 @@
 import * as Unique from "../../Unique.ts"
 import * as StudioStore from "../StudioStore.ts"
 import * as Logs from "./Logs.tsx"
+import * as PrettyValue from "./_PrettyValue.tsx"
 
 function formatDuration(ms: number | undefined): string {
   if (ms == null) return "..."
@@ -9,14 +10,20 @@ function formatDuration(ms: number | undefined): string {
   return `${(ms / 1000).toFixed(2)}s`
 }
 
-function KeyValue(options: { label: string; value: string | number | bigint | undefined | null }) {
+function KeyValue(options: { label: string; value: unknown }) {
   if (options.value == null) return null
   return (
-    <div style="display:flex;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px">
+    <div
+      style="display:flex;align-items:flex-start;gap:8px;padding:4px 0;border-bottom:1px solid #1e293b;font-size:12px"
+    >
       <span style="color:#64748b;min-width:120px">{options.label}</span>
-      <span style="color:#e2e8f0;font-family:monospace;word-break:break-all">
-        {String(options.value)}
-      </span>
+      <div style="flex:1;min-width:0">
+        <PrettyValue.PrettyValue
+          value={options.value}
+          style="color:#e2e8f0;font-family:monospace;word-break:break-all"
+          preStyle="color:#e2e8f0;font-family:monospace;word-break:break-all;white-space:pre-wrap;margin:0"
+        />
+      </div>
     </div>
   )
 }
@@ -276,10 +283,7 @@ export function FiberDetail(options: {
                   </div>
                 )}
                 {Object.entries(options.context.annotations).map(([k, v]) => (
-                  <KeyValue
-                    label={k}
-                    value={typeof v === "object" ? JSON.stringify(v) : String(v)}
-                  />
+                  <KeyValue label={k} value={v} />
                 ))}
               </div>
             </div>
@@ -310,7 +314,7 @@ export function FiberDetail(options: {
                   {Object.entries(s.attributes)
                     .filter(([k]) => k !== "code.stacktrace")
                     .map(([k, v]) => (
-                      <KeyValue label={k} value={String(v)} />
+                      <KeyValue label={k} value={v} />
                     ))}
                 </div>
               )

package/src/studio/ui/Logs.tsx

@@ -1,5 +1,6 @@
 import * as Unique from "../../Unique.ts"
 import * as StudioStore from "../StudioStore.ts"
+import * as PrettyValue from "./_PrettyValue.tsx"
 
 function levelColor(level: string): string {
   if (level === "DEBUG") return "#94a3b8"
@@ -25,26 +26,30 @@ export function LogLine(options: { log: StudioStore.StudioLog }) {
   return (
     <div
       id={`log-${options.log.id}`}
-      style="padding:3px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:baseline"
+      style="padding:6px 8px;border-bottom:1px solid #1f2937;font-family:monospace;font-size:12px;display:flex;align-items:flex-start;gap:8px"
     >
       <span style="color:#6b7280;white-space:nowrap">{time}</span>
       <span style={`color:${color};font-weight:600;width:56px;text-align:center;flex-shrink:0`}>
         {options.log.level}
       </span>
-      <span style="color:#e5e7eb;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis">
-        {options.log.message}
-      </span>
+      <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
+        <PrettyValue.PreformattedText
+          text={options.log.message}
+          style="color:#e5e7eb;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit"
+        />
+        {options.log.cause && (
+          <PrettyValue.PreformattedText
+            text={options.log.cause}
+            style="color:#ef4444;font-size:11px;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit"
+          />
+        )}
+      </div>
       <a
         href={`${StudioStore.store.prefix}/fibers/${options.log.fiberId.replace("#", "")}`}
-        style="color:#6b7280;white-space:nowrap;margin-left:8px;text-decoration:none"
+        style="color:#6b7280;white-space:nowrap;text-decoration:none;flex-shrink:0"
       >
         {options.log.fiberId}
       </a>
-      {options.log.cause && (
-        <div style="color:#ef4444;font-size:11px;padding:2px 0 0 0;white-space:pre-wrap;width:100%">
-          {options.log.cause}
-        </div>
-      )}
     </div>
   )
 }