tjs-lang 0.5.3 → 0.5.4

package/demo/src/demo-nav.ts

@@ -8,7 +8,7 @@
  * - TJS Docs (documentation that opens in floating viewer)
  */
 
-import { Component, elements, ElementCreator, vars } from 'tosijs'
+import { Component, elements, ElementCreator, vars, observe } from 'tosijs'
 import {
   xinFloat,
   XinFloat,
@@ -72,27 +72,12 @@ interface DocItem {
   requiresApi?: boolean
 }
 
-interface DemoNavEvents {
-  'select-ajs-example': {
-    example: { name: string; description: string; code: string; group?: string }
-  }
-  'select-tjs-example': {
-    example: { name: string; description: string; code: string; group?: string }
-  }
-  'select-ts-example': { example: TSExample }
-  'select-doc': { doc: DocItem }
-}
-
 export class DemoNav extends Component {
   private _docs: DocItem[] = []
-  private openSection: string | null = null
+  private _appState: any = null // boxed proxy from index.ts
   private floatViewer: XinFloat | null = null
   private mdViewer: MarkdownViewer | null = null
 
-  // Track current selection for highlighting
-  private _currentView: 'home' | 'ajs' | 'tjs' | 'ts' = 'home'
-  private _currentExample: string | null = null
-
   // Computed example arrays from docs
   private get tjsExamples(): Example[] {
     return this._docs.filter((d) => d.type === 'example' && d.section === 'tjs')
@@ -101,113 +86,59 @@ export class DemoNav extends Component {
   private get ajsExamples(): Example[] {
     return this._docs.filter((d) => d.type === 'example' && d.section === 'ajs')
   }
-  constructor() {
-    super()
-    // Initialize from URL hash
-    this.loadStateFromURL()
-    // Listen for hash changes
-    window.addEventListener('hashchange', () => this.loadStateFromURL())
-  }
-
-  get currentView() {
-    return this._currentView
+  get appState() {
+    return this._appState
   }
 
-  set currentView(value: 'home' | 'ajs' | 'tjs' | 'ts') {
-    this._currentView = value
-    // Auto-open the appropriate section
-    if (value === 'ajs') {
-      this.openSection = 'ajs-demos'
-    } else if (value === 'tjs') {
-      this.openSection = 'tjs-demos'
-    } else if (value === 'ts') {
-      this.openSection = 'ts-demos'
-    }
+  set appState(state: any) {
+    this._appState = state
+    if (!state) return
+    // Observe state changes to update nav
+    observe(/^app\.(currentView|currentExample)/, () => {
+      this.rebuildNav()
+      this.updateCurrentIndicator()
+    })
+    observe('app.openSection', () => {
+      this.rebuildNav()
+    })
+    // Initial sync
     this.rebuildNav()
-    // Update indicator after rebuild (DOM now exists)
     this.updateCurrentIndicator()
   }
 
-  get currentExample() {
-    return this._currentExample
+  private get _currentView(): string {
+    return this._appState?.currentView?.valueOf() ?? 'home'
   }
 
-  set currentExample(value: string | null) {
-    this._currentExample = value
-    this.updateCurrentIndicator()
+  private get _currentExampleName(): string | null {
+    const ex = this._appState?.currentExample?.valueOf()
+    if (!ex) return null
+    return ex.name || ex.title || null
+  }
+
+  private get _openSection(): string | null {
+    return this._appState?.openSection?.valueOf() ?? null
   }
 
   private updateCurrentIndicator() {
-    // Update .current class on nav items
+    const exName = this._currentExampleName
     const items = this.querySelectorAll('.nav-item')
     items.forEach((item) => {
       const itemName = item.textContent?.trim()
-      const isCurrent = itemName === this._currentExample
-      item.classList.toggle('current', isCurrent)
+      item.classList.toggle('current', itemName === exName)
     })
-    // Update home link
     const homeLink = this.querySelector('.home-link')
     homeLink?.classList.toggle('current', this._currentView === 'home')
   }
 
-  private loadStateFromURL() {
-    const hash = window.location.hash.slice(1) // Remove '#'
-    if (!hash) return
-
-    const params = new URLSearchParams(hash)
-    const section = params.get('section')
-    const view = params.get('view')
-    const example = params.get('example')
-
-    // Set view and open appropriate section
-    if (view === 'ajs') {
-      this._currentView = 'ajs'
-      this.openSection = 'ajs-demos'
-    } else if (view === 'tjs') {
-      this._currentView = 'tjs'
-      this.openSection = 'tjs-demos'
-    } else if (view === 'ts') {
-      this._currentView = 'ts'
-      this.openSection = 'ts-demos'
-    } else if (view === 'home') {
-      this._currentView = 'home'
-    } else if (
-      section &&
-      ['ajs-demos', 'tjs-demos', 'ts-demos', 'ajs-docs', 'tjs-docs'].includes(
-        section
-      )
-    ) {
-      this.openSection = section
-    }
-
-    // Set current example for highlighting
-    if (example) {
-      this._currentExample = example
-    }
-
-    this.rebuildNav()
-    this.updateCurrentIndicator()
-  }
-
-  private saveStateToURL() {
-    const params = new URLSearchParams(window.location.hash.slice(1))
-    if (this.openSection) {
-      params.set('section', this.openSection)
-    }
-    const newHash = params.toString()
-    if (newHash !== window.location.hash.slice(1)) {
-      window.history.replaceState(null, '', `#${newHash}`)
-    }
-  }
-
   get docs(): DocItem[] {
     return this._docs
   }
 
   set docs(value: DocItem[]) {
     this._docs = value
-    // Re-render when docs are set
     this.rebuildNav()
+    this.updateCurrentIndicator()
   }
 
   // Light DOM styles (no static styleSpec)
@@ -439,7 +370,7 @@ export class DemoNav extends Component {
       // TypeScript Examples (TS -> TJS -> JS pipeline)
       details(
         {
-          open: this.openSection === 'ts-demos',
+          open: this._openSection === 'ts-demos',
           'data-section': 'ts-demos',
           onToggle: this.handleToggle,
         },
@@ -465,7 +396,7 @@ export class DemoNav extends Component {
       // TJS Examples
       details(
         {
-          open: this.openSection === 'tjs-demos',
+          open: this._openSection === 'tjs-demos',
           'data-section': 'tjs-demos',
           onToggle: this.handleToggle,
         },
@@ -491,7 +422,7 @@ export class DemoNav extends Component {
       // AJS Examples
       details(
         {
-          open: this.openSection === 'ajs-demos',
+          open: this._openSection === 'ajs-demos',
           'data-section': 'ajs-demos',
           onToggle: this.handleToggle,
         },
@@ -517,7 +448,7 @@ export class DemoNav extends Component {
       // TJS Docs
       details(
         {
-          open: this.openSection === 'tjs-docs',
+          open: this._openSection === 'tjs-docs',
           'data-section': 'tjs-docs',
           onToggle: this.handleToggle,
         },
@@ -542,7 +473,7 @@ export class DemoNav extends Component {
       // AJS Docs
       details(
         {
-          open: this.openSection === 'ajs-docs',
+          open: this._openSection === 'ajs-docs',
           'data-section': 'ajs-docs',
           onToggle: this.handleToggle,
         },
@@ -571,16 +502,13 @@ export class DemoNav extends Component {
     const section = details.getAttribute('data-section')
 
     if (details.open) {
+      if (this._appState) this._appState.openSection.value = section
       // Close other sections (accordion behavior)
-      this.openSection = section
-      const allDetails = this.querySelectorAll('details')
-      allDetails.forEach((d) => {
+      this.querySelectorAll('details').forEach((d) => {
         if (d !== details && d.open) {
           d.open = false
         }
       })
-      // Save to URL
-      this.saveStateToURL()
     }
   }
 
@@ -605,50 +533,30 @@ export class DemoNav extends Component {
   }
 
   selectHome() {
-    this._currentView = 'home'
-    this._currentExample = null
-    this.updateCurrentIndicator()
-    this.dispatchEvent(
-      new CustomEvent('select-home', {
-        bubbles: true,
-      })
-    )
+    if (!this._appState) return
+    this._appState.currentView.value = 'home'
+    this._appState.currentExample.value = null
   }
 
   selectAjsExample(example: Example) {
-    this._currentView = 'ajs'
-    this._currentExample = example.title
-    this.updateCurrentIndicator()
-    this.dispatchEvent(
-      new CustomEvent('select-ajs-example', {
-        detail: { example: exampleToLegacy(example) },
-        bubbles: true,
-      })
-    )
+    if (!this._appState) return
+    this._appState.currentView.value = 'ajs'
+    this._appState.currentExample.value = exampleToLegacy(example)
+    this._appState.openSection.value = 'ajs-demos'
   }
 
   selectTjsExample(example: Example) {
-    this._currentView = 'tjs'
-    this._currentExample = example.title
-    this.updateCurrentIndicator()
-    this.dispatchEvent(
-      new CustomEvent('select-tjs-example', {
-        detail: { example: exampleToLegacy(example) },
-        bubbles: true,
-      })
-    )
+    if (!this._appState) return
+    this._appState.currentView.value = 'tjs'
+    this._appState.currentExample.value = exampleToLegacy(example)
+    this._appState.openSection.value = 'tjs-demos'
   }
 
   selectTsExample(example: TSExample) {
-    this._currentView = 'tjs' // Will switch to 'ts' when TS playground is wired up
-    this._currentExample = example.name
-    this.updateCurrentIndicator()
-    this.dispatchEvent(
-      new CustomEvent('select-ts-example', {
-        detail: { example: exampleToLegacy(example) },
-        bubbles: true,
-      })
-    )
+    if (!this._appState) return
+    this._appState.currentView.value = 'ts'
+    this._appState.currentExample.value = exampleToLegacy(example)
+    this._appState.openSection.value = 'ts-demos'
   }
 
   selectDoc(doc: DocItem) {

package/demo/src/index.ts

@@ -7,7 +7,7 @@
  * - Markdown content with live examples
  */
 
-import { elements, tosi, bindings, StyleSheet, bind } from 'tosijs'
+import { elements, tosi, bindings, StyleSheet, bind, observe } from 'tosijs'
 
 import {
   icons,
@@ -137,6 +137,7 @@ const { app, prefs, auth } = tosi({
     compact: false,
     currentView: 'home' as 'home' | 'ajs' | 'tjs' | 'ts',
     currentExample: null as any,
+    openSection: null as string | null,
   },
   auth: {
     user: null as {
@@ -248,35 +249,32 @@ window.addEventListener('popstate', () => {
     app.docs.find((doc: any) => doc.filename === filename) || app.docs[0]
 })
 
-// URL state management for view and example
-function loadViewStateFromURL() {
+// URL ↔ state sync (single source of truth: app state)
+let _suppressHashUpdate = false
+
+function syncURLToState() {
   const hash = window.location.hash.slice(1)
-  if (!hash) {
-    app.currentView = 'home'
-    return
-  }
+  if (!hash) return
 
+  _suppressHashUpdate = true
   const params = new URLSearchParams(hash)
   const view = params.get('view')
   const example = params.get('example')
+  const section = params.get('section')
 
-  if (view === 'home') {
-    app.currentView.xin = 'home'
-    app.currentExample = null
-  } else if (view === 'ajs' || view === 'tjs' || view === 'ts') {
-    app.currentView = view
+  if (view === 'home' || view === 'ajs' || view === 'tjs' || view === 'ts') {
+    app.currentView.value = view
   }
+  if (section) app.openSection.value = section
 
   if (example) {
-    // Find example by name in appropriate list
     if (view === 'ts') {
       const found = tsExamples.find((e: any) => e.name === example)
-      if (found) app.currentExample = found
+      if (found) app.currentExample.value = found
     } else if (view === 'tjs') {
-      // Find in docs by title
       const found = findExampleInDocs(docs, 'tjs', example)
       if (found) {
-        app.currentExample = {
+        app.currentExample.value = {
           name: found.title,
           description: found.description || found.title,
           code: found.code || '',
@@ -284,10 +282,9 @@ function loadViewStateFromURL() {
         }
       }
     } else if (view === 'ajs') {
-      // Find in docs by title
       const found = findExampleInDocs(docs, 'ajs', example)
       if (found) {
-        app.currentExample = {
+        app.currentExample.value = {
           name: found.title,
           description: found.description || found.title,
           code: found.code || '',
@@ -295,26 +292,29 @@ function loadViewStateFromURL() {
         }
       }
     }
-  }
-}
-
-function saveViewStateToURL(view: string, exampleName?: string) {
-  const params = new URLSearchParams(window.location.hash.slice(1))
-  params.set('view', view)
-  if (exampleName) {
-    params.set('example', exampleName)
   } else {
-    params.delete('example')
+    app.currentExample.value = null
   }
-  const newHash = params.toString()
-  window.history.replaceState(null, '', `#${newHash}`)
+  _suppressHashUpdate = false
 }
 
-// Load initial state from URL
-loadViewStateFromURL()
+syncURLToState()
+window.addEventListener('hashchange', syncURLToState)
 
-// Listen for hash changes
-window.addEventListener('hashchange', loadViewStateFromURL)
+// State → URL (observe changes, update hash)
+observe(/^app\.(currentView|currentExample|openSection)/, () => {
+  if (_suppressHashUpdate) return
+  const params = new URLSearchParams()
+  const view = app.currentView.valueOf() as string
+  params.set('view', view)
+  const example = app.currentExample.valueOf() as any
+  if (example) {
+    params.set('example', example.name || example.title || '')
+  }
+  const section = app.openSection.valueOf() as string | null
+  if (section) params.set('section', section)
+  window.history.replaceState(null, '', `#${params.toString()}`)
+})
 
 // Main app
 const main = document.querySelector('main') as HTMLElement
@@ -596,7 +596,7 @@ if (main) {
         },
       },
 
-      // Demo navigation with 4 accordion sections
+      // Demo navigation — shares app state directly
       (() => {
         const nav = demoNav({
           slot: 'nav',
@@ -606,41 +606,8 @@ if (main) {
           },
         }) as DemoNav
 
-        // Pass docs to the nav component
         nav.docs = docs
-
-        // Handle AJS example selection - load into AJS playground
-        nav.addEventListener('select-ajs-example', ((event: CustomEvent) => {
-          const { example } = event.detail
-          app.currentView = 'ajs'
-          app.currentExample = example
-          saveViewStateToURL('ajs', example.name)
-        }) as EventListener)
-
-        // Handle TJS example selection - load into TJS playground
-        nav.addEventListener('select-tjs-example', ((event: CustomEvent) => {
-          const { example } = event.detail
-          app.currentView = 'tjs'
-          app.currentExample = example
-          saveViewStateToURL('tjs', example.name)
-        }) as EventListener)
-
-        // Handle TS example selection - load into TS playground
-        nav.addEventListener('select-ts-example', ((event: CustomEvent) => {
-          const { example } = event.detail
-          app.currentView = 'ts'
-          app.currentExample = example
-          saveViewStateToURL('ts', example.name)
-        }) as EventListener)
-
-        // Handle Home selection - show README
-        nav.addEventListener('select-home', (() => {
-          app.currentView = 'home'
-          app.currentExample = null
-          saveViewStateToURL('home')
-        }) as EventListener)
-
-        // Nav syncs its own state from URL - no need to overwrite on initial load
+        nav.appState = app
 
         return nav
       })(),

package/demo/src/ts-playground.ts

@@ -81,6 +81,7 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
   private lastTjsCode: string = ''
   private lastJsCode: string = ''
   private consoleMessages: string[] = []
+  private _messageHandler: ((e: MessageEvent) => void) | null = null
 
   // Editor state persistence
   private currentExampleName: string | null = null
@@ -514,8 +515,13 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
         jsCode,
       })
 
+      // Clean up any previous message handler
+      if (this._messageHandler) {
+        window.removeEventListener('message', this._messageHandler)
+      }
+
       // Listen for messages from iframe
-      const messageHandler = createIframeMessageHandler({
+      this._messageHandler = createIframeMessageHandler({
         onConsole: (message) => this.log(message),
         onTiming: (execTime) => {
           this.parts.consoleHeader.textContent = `Console — executed in ${formatExecTime(
@@ -531,15 +537,19 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
           this.parts.statusBar.classList.add('error')
         },
       })
-      window.addEventListener('message', messageHandler)
+      window.addEventListener('message', this._messageHandler)
 
-      // Set iframe content
-      this.parts.previewFrame.srcdoc = iframeDoc
+      // Set iframe content using blob URL instead of srcdoc
+      // (srcdoc can cause double-execution in some browsers)
+      const iframe = this.parts.previewFrame
+      const blob = new Blob([iframeDoc], { type: 'text/html' })
+      const blobUrl = URL.createObjectURL(blob)
 
-      // Wait a bit for execution, then clean up listener
-      setTimeout(() => {
-        window.removeEventListener('message', messageHandler)
-      }, 1000)
+      if (iframe.dataset.blobUrl) {
+        URL.revokeObjectURL(iframe.dataset.blobUrl)
+      }
+      iframe.dataset.blobUrl = blobUrl
+      iframe.src = blobUrl
     } catch (e: any) {
       this.log(`Error: ${e.message}`)
       this.parts.statusBar.textContent = 'Error'