tjs-lang 0.8.2 → 0.8.4

package/demo/src/autocomplete.ts

@@ -5,6 +5,11 @@
  * Uses __tjs metadata for rich type information.
  */
 
+import {
+  collectScopeSymbols,
+  type ScopeSymbol,
+} from '../../editors/scope-symbols'
+
 export interface Completion {
   /** The text to insert */
   label: string
@@ -277,6 +282,40 @@ function isInTestBlock(source: string, position: number): boolean {
   return testMatches.length > 0
 }
 
+/**
+ * Completions from the scope-aware symbol model (acorn-based, destructuring-aware).
+ * Subsumes the old regex `extractFunctions`/`extractVariables`, which missed all
+ * destructuring. Falls back to the regex extractors only if parsing yields
+ * nothing (so the list never goes blank on pathological input).
+ */
+function completionsFromScope(source: string, position: number): Completion[] {
+  const symbols = collectScopeSymbols(source, position)
+  if (symbols.length === 0) {
+    return [...extractFunctions(source), ...extractVariables(source, position)]
+  }
+  return symbols.map((s) => scopeSymbolToCompletion(s))
+}
+
+function scopeSymbolToCompletion(s: ScopeSymbol): Completion {
+  const kind: Completion['kind'] =
+    s.kind === 'function' ? 'function' : 'variable'
+  // For a destructured binding, show where it came from — `h1  ∈ elements`.
+  const detail =
+    s.origin?.member && s.origin.expr
+      ? `∈ ${s.origin.expr}`
+      : s.kind === 'import' && s.origin?.module
+      ? `import '${s.origin.module}'`
+      : s.kind === 'parameter'
+      ? 'parameter'
+      : undefined
+  return {
+    label: s.name,
+    kind,
+    detail,
+    snippet: kind === 'function' ? `${s.name}($1)` : undefined,
+  }
+}
+
 /**
  * Extract function names from source
  */
@@ -418,8 +457,7 @@ export function getCompletions(ctx: CompletionContext): Completion[] {
     completions = [
       ...TJS_KEYWORDS,
       ...RUNTIME_COMPLETIONS,
-      ...extractFunctions(source),
-      ...extractVariables(source, position),
+      ...completionsFromScope(source, position),
     ]
 
     // Add metadata-based completions

package/demo/src/introspection-bridge.ts

@@ -0,0 +1,140 @@
+/**
+ * Introspection bridge — the runtime-truth half of the autocomplete plan.
+ *
+ * Chrome-console style: run the user's code in a hidden, disposable sandbox
+ * iframe and keep a live `eval` handle into its module scope. Member completion
+ * (`todoApp.items.` → the real array's members; `elements.` → tosijs's
+ * proxy-generated creators) then comes from the ACTUAL values, not a static
+ * model. The sandbox reuses the playground's run pipeline (transpile →
+ * rewriteImports → buildIframeDoc → SW-served URL) so imports resolve the same
+ * way the preview does.
+ *
+ * Lifecycle: `refresh(source)` rebuilds the sandbox (debounced by the caller, on
+ * statement boundaries) and caches the last good one — if the source doesn't
+ * transpile, the previous sandbox stays queryable. `members(path)` asks the
+ * sandbox to introspect a value, with a short timeout so the editor never hangs.
+ */
+import { tjs } from '../../src/lang'
+import { rewriteImports, registerIframeContent } from './imports'
+import { buildIframeDoc } from './playground-shared'
+import type { IntrospectMember } from '../../editors/introspect-value'
+
+export class IntrospectionBridge {
+  private iframe: HTMLIFrameElement
+  private ready = false
+  private lastSource: string | null = null
+  private pending = new Map<number, (members: IntrospectMember[]) => void>()
+  private nextId = 1
+  private readonly onMessage: (e: MessageEvent) => void
+
+  constructor() {
+    const iframe = document.createElement('iframe')
+    iframe.setAttribute('aria-hidden', 'true')
+    iframe.setAttribute('tabindex', '-1')
+    // Off-screen and inert, but still a real DOM so tosijs `elements` work.
+    iframe.style.cssText =
+      'position:absolute;width:1px;height:1px;left:-9999px;top:-9999px;border:0;visibility:hidden;pointer-events:none;'
+    document.body.appendChild(iframe)
+    this.iframe = iframe
+
+    this.onMessage = (e: MessageEvent) => {
+      const d = e.data
+      if (!d || e.source !== iframe.contentWindow) return
+      if (d.type === 'tjs-bridge-ready') {
+        this.ready = true
+      } else if (d.type === 'tjs-introspect-result') {
+        const resolve = this.pending.get(d.id)
+        if (resolve) {
+          this.pending.delete(d.id)
+          resolve(Array.isArray(d.members) ? d.members : [])
+        }
+      }
+    }
+    window.addEventListener('message', this.onMessage)
+  }
+
+  /**
+   * Rebuild the sandbox from the current source. No-op if unchanged or if the
+   * source doesn't transpile (keeps the last good sandbox). Caller should
+   * debounce this to statement boundaries.
+   */
+  async refresh(source: string): Promise<void> {
+    if (source === this.lastSource) return
+
+    let code: string
+    try {
+      const result = tjs(source)
+      code = result.code
+    } catch {
+      return // not transpilable yet — keep the last good sandbox
+    }
+    this.lastSource = source
+
+    const rewritten = rewriteImports(code)
+    const importStatements: string[] = []
+    const body = rewritten.replace(
+      /^import\s+(?:.*?from\s+)?['"][^'"]+['"];?\s*$/gm,
+      (match) => {
+        importStatements.push(match)
+        return ''
+      }
+    )
+
+    const doc = buildIframeDoc({
+      cssContent: '',
+      htmlContent: '',
+      importMapScript: '',
+      jsCode: body,
+      importStatements,
+      introspectionBridge: true,
+    })
+
+    this.ready = false
+    // Reject in-flight queries against the old sandbox.
+    for (const resolve of this.pending.values()) resolve([])
+    this.pending.clear()
+
+    const sessionId = `tjs-introspect-${Date.now()}-${Math.random()
+      .toString(36)
+      .slice(2)}`
+    const registered = await registerIframeContent(sessionId, doc)
+    if (registered) {
+      this.iframe.src = `/iframe/${sessionId}`
+    } else {
+      const blob = new Blob([doc], { type: 'text/html' })
+      this.iframe.src = URL.createObjectURL(blob)
+    }
+  }
+
+  /**
+   * Introspect a dotted path in the live sandbox scope. Resolves to the value's
+   * real members, or `undefined` if the sandbox isn't ready / times out (so the
+   * caller can fall back to static completions).
+   */
+  members(
+    path: string,
+    timeoutMs = 500
+  ): Promise<IntrospectMember[] | undefined> {
+    const win = this.iframe.contentWindow
+    if (!this.ready || !win) return Promise.resolve(undefined)
+
+    const id = this.nextId++
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        this.pending.delete(id)
+        resolve(undefined)
+      }, timeoutMs)
+      this.pending.set(id, (members) => {
+        clearTimeout(timer)
+        resolve(members)
+      })
+      win.postMessage({ type: 'tjs-introspect', id, path }, '*')
+    })
+  }
+
+  dispose(): void {
+    window.removeEventListener('message', this.onMessage)
+    this.iframe.remove()
+    this.pending.clear()
+  }
+}

package/demo/src/introspection-doc.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'bun:test'
+
+// buildIframeDoc reads location.origin (browser global) — stub it for headless.
+;(globalThis as any).location ??= { origin: 'http://test' }
+
+import { buildIframeDoc } from './playground-shared'
+
+/**
+ * Structural guard for the introspection sandbox document. The critical
+ * invariant: user code must run at MODULE TOP LEVEL (not inside a try block) so
+ * its top-level `const`/`let` are module-scoped and the bridge's direct `eval`
+ * can see them. A regression here silently breaks `todoApp.` completion.
+ */
+describe('buildIframeDoc — introspection bridge document', () => {
+  const doc = buildIframeDoc({
+    cssContent: '',
+    htmlContent: '',
+    importMapScript: '',
+    jsCode: 'const todoApp = { items: [] }',
+    importStatements: ["import { tosi } from 'https://cdn/tosijs'"],
+    introspectionBridge: true,
+  })
+
+  it('runs user code at module top level — NOT inside a try block', () => {
+    expect(doc).toContain('const todoApp = { items: [] }')
+    // The real invariant: after the bridge is installed, the user code runs with
+    // no try-wrap between (a block would re-scope its declarations away from
+    // eval). (The injected introspector has its own internal try/catch — that's
+    // fine and lives before the ready post.)
+    const readyIdx = doc.indexOf('tjs-bridge-ready')
+    const codeIdx = doc.indexOf('const todoApp')
+    expect(codeIdx).toBeGreaterThan(readyIdx)
+    expect(doc.slice(readyIdx, codeIdx)).not.toContain('try {')
+  })
+
+  it('installs the message listener and the injected introspector', () => {
+    expect(doc).toContain("d.type !== 'tjs-introspect'")
+    expect(doc).toContain('eval(d.path)')
+    expect(doc).toContain('function introspectValue') // injected source
+  })
+
+  it('posts bridge-ready and puts imports first', () => {
+    expect(doc).toContain('tjs-bridge-ready')
+    const importIdx = doc.indexOf('import { tosi }')
+    const listenerIdx = doc.indexOf('tjs-introspect')
+    const codeIdx = doc.indexOf('const todoApp')
+    // imports → listener → user code
+    expect(importIdx).toBeGreaterThan(-1)
+    expect(importIdx).toBeLessThan(listenerIdx)
+    expect(listenerIdx).toBeLessThan(codeIdx)
+  })
+
+  it('does not install the bridge for a normal preview doc', () => {
+    const preview = buildIframeDoc({
+      cssContent: '',
+      htmlContent: '',
+      importMapScript: '',
+      jsCode: 'console.log(1)',
+    })
+    expect(preview).not.toContain('tjs-introspect')
+    expect(preview).toContain('try {') // normal preview DOES wrap in try
+  })
+})

package/demo/src/playground-shared.ts

@@ -6,6 +6,7 @@
  */
 
 import type { CodeMirror } from '../../editors/codemirror/component'
+import { INTROSPECT_VALUE_SOURCE } from '../../editors/introspect-value'
 
 // ---------------------------------------------------------------------------
 // TJS Runtime for iframe — loaded from a built file, not a hand-maintained stub.
@@ -48,6 +49,32 @@ export interface IframeDocOptions {
   autoCallTjsFunction?: boolean
   /** Whether parent is in dark mode — sets color-scheme on iframe */
   darkMode?: boolean
+  /**
+   * Install the introspection bridge: after the user's code runs, a message
+   * listener answers `{type:'tjs-introspect', id, path}` by evaluating `path` in
+   * module scope and returning the value's real members. Used by the hidden
+   * autocomplete sandbox (IntrospectionBridge), not the visible preview.
+   */
+  introspectionBridge?: boolean
+}
+
+/**
+ * Script (injected at module top-level, after the user's code) that answers
+ * member-introspection queries from the parent. `eval(path)` is a DIRECT eval in
+ * the module's lexical scope, so it sees the user's top-level `const`/`let`
+ * bindings (e.g. `todoApp.items`). Runs only in the hidden sandbox.
+ */
+function introspectionBridgeScript(): string {
+  return `
+    const __introspectValue = ${INTROSPECT_VALUE_SOURCE};
+    window.addEventListener('message', (e) => {
+      const d = e.data;
+      if (!d || d.type !== 'tjs-introspect') return;
+      let members = [];
+      try { members = __introspectValue(eval(d.path)); } catch (_e) {}
+      parent.postMessage({ type: 'tjs-introspect-result', id: d.id, members }, '*');
+    });
+    parent.postMessage({ type: 'tjs-bridge-ready' }, '*');`
 }
 
 /**
@@ -68,8 +95,34 @@ export function buildIframeDoc(options: IframeDocOptions): string {
     parentBindings = false,
     autoCallTjsFunction = false,
     darkMode = false,
+    introspectionBridge = false,
   } = options
 
+  // Introspection sandbox: run user code at MODULE TOP LEVEL (no try-wrap) so
+  // top-level `const`/`let` are module-scoped and the bridge's direct `eval` can
+  // see them. The listener is installed first; it's invoked later (at query
+  // time), by when the module — and `todoApp` — has fully initialised. Ready is
+  // posted up front so globals/imports stay introspectable even if user code
+  // throws partway. No try/catch precisely because a block would re-scope the
+  // declarations away from `eval`.
+  if (introspectionBridge) {
+    return `<!DOCTYPE html>
+<html>
+<head>
+  <style>:root { color-scheme: ${darkMode ? 'dark' : 'light dark'} }</style>
+  ${importMapScript}
+</head>
+<body>
+  ${runtimeScriptTag}
+  <script type="module">
+    ${importStatements.join('\n    ')}
+${introspectionBridgeScript()}
+    ${jsCode}
+  </script>
+</body>
+</html>`
+  }
+
   const colorScheme = darkMode ? 'dark' : 'light dark'
 
   const parentBindingsScript = parentBindings

package/demo/src/tjs-playground.ts

@@ -43,6 +43,7 @@ import {
   buildAutocompleteContext,
   type AutocompleteContext,
 } from './autocomplete-context'
+import { IntrospectionBridge } from './introspection-bridge'
 
 // Available modules for autocomplete introspection
 const AVAILABLE_MODULES: Record<string, any> = {
@@ -166,6 +167,8 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
   private autocompleteContext: AutocompleteContext | null = null
   private contextUpdateTimer: ReturnType<typeof setTimeout> | null = null
   private contextBuildPromise: Promise<void> | null = null
+  // Hidden sandbox for runtime-truth member completion (todoApp.items, …)
+  private introspectionBridge: IntrospectionBridge | null = null
 
   /**
    * Get metadata for autocomplete - returns all discovered functions
@@ -185,6 +188,15 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
     return this.autocompleteContext?.bindings
   }
 
+  /**
+   * Member completion from the introspection bridge — the user's REAL executed
+   * scope (`todoApp.items` → the live array). Returns undefined if the sandbox
+   * isn't ready, so the provider falls back to static completions.
+   */
+  private getMembers = (path: string) => {
+    return this.introspectionBridge?.members(path) ?? Promise.resolve(undefined)
+  }
+
   /**
    * Update autocomplete context (debounced)
    * Called when editor content changes.
@@ -198,6 +210,14 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
     const doBuild = async () => {
       const source = this.parts.tjsEditor.value
 
+      // Refresh the introspection sandbox (runtime-truth member completion).
+      // Independent of import-binding resolution below; failures are swallowed
+      // inside the bridge (keeps the last good sandbox).
+      if (!this.introspectionBridge) {
+        this.introspectionBridge = new IntrospectionBridge()
+      }
+      void this.introspectionBridge.refresh(source)
+
       try {
         const newContext = await buildAutocompleteContext(source)
         // Only update if we got bindings (keep last good context otherwise)
@@ -649,6 +669,7 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       this.parts.tjsEditor.autocomplete = {
         getMetadata: this.getMetadataForAutocomplete,
         getLiveBindings: this.getLiveBindings,
+        getMembers: this.getMembers,
       }
 
       // Build initial autocomplete context immediately

package/dist/experiments/predicates/css.predicates.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The CSS torture set — predicates for the exact cases where TS structural
+ * types and JSON Schema cave to `string`/`any`:
+ *   - open value grammars: var(), calc(), !important
+ *   - order-flexible shorthands: the `animation` family (tokenize + classify)
+ *   - open recursive structure: nested selectors / keyframes (recurse)
+ *
+ * Written in named-composition style — no inline arrows, no IO, no async —
+ * so it reads as "synchronous AJS" and verifies predicate-safe. `||` composition
+ * and `.every(namedPredicate)` are natural here because predicates run as native
+ * JS (the verified fast path), not through the sandboxed VM interpreter.
+ */
+export declare const CSS_PREDICATE_SOURCE: string;

package/dist/experiments/predicates/verify.d.ts

@@ -0,0 +1,39 @@
+export interface PredicateDiagnostic {
+    predicate: string;
+    message: string;
+    line: number;
+    column: number;
+}
+export interface VerifyResult {
+    safe: boolean;
+    predicates: string[];
+    diagnostics: PredicateDiagnostic[];
+}
+/**
+ * Build the effectful-name set from a VM atom registry: every atom tagged
+ * `effects: 'io'` (plus the non-atom globals). This is how the predicate
+ * verifier consumes the atom-effects classification.
+ */
+export declare function effectfulFrom(atoms: Record<string, {
+    op?: string;
+    effects?: 'pure' | 'io';
+}>): Set<string>;
+/**
+ * Verify every top-level function in `source` is predicate-safe. Because safety
+ * is a closure property, the whole cluster is safe iff each function is — so the
+ * transitive check is automatic: a call to another function in the set is fine,
+ * a call to anything effectful/unknown is not.
+ */
+export declare function verifyPredicates(source: string, opts?: {
+    effectful?: Set<string>;
+}): VerifyResult;
+/** Format diagnostics for a thrown error / log. */
+export declare function formatDiagnostics(d: PredicateDiagnostic[]): string;
+/**
+ * Verify, then compile the predicate cluster to native synchronous JS functions.
+ * Throws (with located diagnostics) at "definition time" if not predicate-safe —
+ * so an IO-using "predicate" never even compiles.
+ */
+export declare function compilePredicates(source: string, exports: string[], opts?: {
+    effectful?: Set<string>;
+}): Record<string, (...args: any[]) => any>;