better titles

Author: Dominique Chuo

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
+    "@reifydb/core": "^0.2.0",
     "lucide-react": "^0.555.0",
     "monaco-editor": "^0.55.1",
     "react": "^19.2.0",

pnpm-lock.yaml

@@ -5,8 +5,9 @@ import type { editor } from 'monaco-editor';
 import { rqlLanguageDefinition, rqlLanguageConfiguration } from '@/lib/rql-language';
 import { brutalistLightTheme } from '@/lib/monaco-themes';
 import { cn } from '@/lib';
-import type { WasmDB } from '@/lib/wasm/reifydb_webassembly';
+import { createWasmDB, type WasmDB } from '@/lib/wasm-db';
 import { seedCommand } from '@/lib/seed-data';
+import { UNDEFINED_VALUE, Value } from '@reifydb/core';
 
 let languageRegistered = false;
 
@@ -60,9 +61,8 @@ export function ExecutableSnippet({
 
     async function initDb() {
       try {
-        const { WasmDB } = await import('@/lib/wasm/reifydb_webassembly');
+        const instance = await createWasmDB();
         if (mounted) {
-          const instance = new WasmDB();
           // Run seed command to populate tables for documentation examples
           try {
             instance.command(seedCommand);
@@ -349,7 +349,10 @@ export function ExecutableSnippet({
 
 function formatValue(value: unknown): string {
   if (value === null || value === undefined) {
-    return 'null';
+    return UNDEFINED_VALUE;
+  }
+  if (value instanceof Value) {
+    return value.toString();
   }
   if (typeof value === 'object') {
     return JSON.stringify(value);

src/components/ui/executable-snippet.tsx

@@ -0,0 +1,38 @@
+import { decode } from '@reifydb/core';
+import type { WasmDB as RawWasmDB } from './wasm/reifydb_webassembly';
+
+function transformToValueInstances(result: unknown): unknown {
+  if (result === null || result === undefined) return result;
+  if (typeof result !== 'object') return result;
+  if (Array.isArray(result)) {
+    return result.map(transformToValueInstances);
+  }
+  // Check if it's a TypeValuePair
+  const obj = result as Record<string, unknown>;
+  if ('type' in obj && 'value' in obj && Object.keys(obj).length === 2) {
+    return decode(obj as { type: string; value: string });
+  }
+  // Transform object properties
+  const transformed: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    transformed[key] = transformToValueInstances(value);
+  }
+  return transformed;
+}
+
+export async function createWasmDB(): Promise<WasmDB> {
+  const { WasmDB: RawDB } = await import('./wasm/reifydb_webassembly');
+  return new WasmDB(new RawDB());
+}
+
+export class WasmDB {
+  constructor(private db: RawWasmDB) {}
+
+  command(rql: string): unknown {
+    return transformToValueInstances(this.db.command(rql));
+  }
+
+  query(rql: string): unknown {
+    return transformToValueInstances(this.db.query(rql));
+  }
+}

src/lib/wasm-db.ts

@@ -71,18 +71,21 @@ export function DateAddPage() {
 
           <h3 className="text-lg font-bold mb-3">Calculate expiration date</h3>
           <ExecutableSnippet
+            title="Calculate expiration date"
             initialCode={`from app.subscriptions
 extend { expires: date::add(start_date, days: 30) }`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Add days to current date</h3>
           <ExecutableSnippet
+            title="Add days to current date"
             initialCode={`from app.events
 extend { deadline: date::add(date::now(), days: 7) }`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Subtract days</h3>
           <ExecutableSnippet
+            title="Subtract days"
             initialCode={`from app.records
 extend { one_week_ago: date::add(date::now(), days: -7) }`}
           />

src/pages/docs/functions/date/add.tsx

@@ -66,12 +66,14 @@ export function DateDayPage() {
 
           <h3 className="text-lg font-bold mb-3">Filter by first day of month</h3>
           <ExecutableSnippet
+            title="Filter by first day of month"
             initialCode={`from app.logs
 filter date::day(timestamp) == 1`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Extract day component</h3>
           <ExecutableSnippet
+            title="Extract day component"
             initialCode={`from app.events
 extend { day_of_month: date::day(created_at) }`}
           />

src/pages/docs/functions/date/day.tsx

@@ -76,18 +76,21 @@ export function DateDiffPage() {
 
           <h3 className="text-lg font-bold mb-3">Calculate days since creation</h3>
           <ExecutableSnippet
+            title="Calculate days since creation"
             initialCode={`from app.orders
 extend { days_since: date::diff(date::now(), created_at, unit: "days") }`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Filter by age</h3>
           <ExecutableSnippet
+            title="Filter by age"
             initialCode={`from app.records
 filter date::diff(date::now(), created_at, unit: "days") > 30`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Calculate hours between events</h3>
           <ExecutableSnippet
+            title="Calculate hours between events"
             initialCode={`from app.sessions
 extend { duration_hours: date::diff(end_time, start_time, unit: "hours") }`}
           />

src/pages/docs/functions/date/diff.tsx

@@ -71,18 +71,21 @@ export function DateFormatPage() {
 
           <h3 className="text-lg font-bold mb-3">Format as ISO date</h3>
           <ExecutableSnippet
+            title="Format as ISO date"
             initialCode={`from app.events
 extend { formatted: date::format(created_at, "%Y-%m-%d") }`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Include time</h3>
           <ExecutableSnippet
+            title="Include time"
             initialCode={`from app.logs
 extend { timestamp_str: date::format(timestamp, "%Y-%m-%d %H:%M:%S") }`}
           />
 
           <h3 className="text-lg font-bold mt-6 mb-3">Custom format</h3>
           <ExecutableSnippet
+            title="Custom format"
             initialCode={`from app.orders
 extend { order_date: date::format(created_at, "%B %d, %Y") }`}
           />

src/pages/docs/functions/date/format.tsx

@@ -66,6 +66,7 @@ export function DateHourPage() {
 
           <h3 className="text-lg font-bold mb-3">Extract time components</h3>
           <ExecutableSnippet
+            title="Extract time components"
             initialCode={`from app.events
 extend {
   hour: date::hour(timestamp),
@@ -75,6 +76,7 @@ extend {
 
           <h3 className="text-lg font-bold mt-6 mb-3">Filter by business hours</h3>
           <ExecutableSnippet
+            title="Filter by business hours"
             initialCode={`from app.requests
 filter date::hour(timestamp) >= 9 and date::hour(timestamp) < 17`}
           />

src/pages/docs/functions/date/hour.tsx

@@ -21,6 +21,7 @@ export function DateModuleOverviewPage() {
         <section>
           <h2 className="text-2xl font-black tracking-tight mb-4">Quick Example</h2>
           <ExecutableSnippet
+            title="Quick Example"
             initialCode={`from app.events
 filter date::year(created_at) == 2024
 extend {