tjs-lang 0.5.4 → 0.6.0

package/demo/src/tjs-playground.ts

@@ -23,7 +23,7 @@ import {
 // Available modules for autocomplete introspection
 // These are the actual runtime values that can be introspected
 import { codeMirror, CodeMirror } from '../../editors/codemirror/component'
-import { tjs, type TJSTranspileOptions } from '../../src/lang'
+import { tjs, generateDTS, type TJSTranspileOptions } from '../../src/lang'
 import { generateDocsMarkdown } from './docs-utils'
 import { extractImports, generateImportMap, resolveImports } from './imports'
 import {
@@ -112,7 +112,8 @@ interface TJSPlaygroundParts extends PartsMap {
   cssEditor: CodeMirror
   inputTabs: TabSelector
   outputTabs: TabSelector
-  jsOutput: HTMLElement
+  jsOutput: CodeMirror
+  typesOutput: CodeMirror
   previewFrame: HTMLIFrameElement
   docsOutput: MarkdownViewer
   testsOutput: HTMLElement
@@ -128,6 +129,7 @@ interface TJSPlaygroundParts extends PartsMap {
   debugToggle: HTMLInputElement
   safetyToggle: HTMLInputElement
   wasmToggle: HTMLInputElement
+  splitBtn: HTMLButtonElement
 }
 
 export class TJSPlayground extends Component<TJSPlaygroundParts> {
@@ -140,6 +142,11 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
   private originalCode: string = DEFAULT_TJS
   private editorCache: Map<string, string> = new Map()
 
+  // Split mode
+  private _splitMode: null | 'code' | 'output' = null
+  private _splitChannel: BroadcastChannel | null = null
+  private _splitSessionId: string = ''
+
   // Build flags state
   private buildFlags = {
     tests: true, // Run tests at transpile time
@@ -212,6 +219,229 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
     }
   }
 
+  /**
+   * Set split mode and manage BroadcastChannel.
+   * sessionId ties code+output windows together so stale windows are ignored.
+   */
+  setSplitMode = (mode: null | 'code' | 'output', sessionId?: string) => {
+    const prev = this._splitMode
+    this._splitMode = mode
+    if (sessionId) this._splitSessionId = sessionId
+
+    // Update button appearance
+    this.updateSplitButton()
+
+    // Toggle visibility of input/output panes directly
+    const input = this.querySelector('.tjs-input') as HTMLElement | null
+    const output = this.querySelector('.tjs-output') as HTMLElement | null
+    const consoleEl = this.querySelector('.tjs-console') as HTMLElement | null
+    const flags = this.querySelector('.build-flags') as HTMLElement | null
+    const toolbar = this.querySelector('.tjs-toolbar') as HTMLElement | null
+
+    if (mode === 'code') {
+      if (output) output.style.display = 'none'
+      if (consoleEl) consoleEl.style.display = 'none'
+      if (input) input.style.flex = '1 1 100%'
+    } else if (mode === 'output') {
+      if (input) input.style.display = 'none'
+      if (flags) flags.style.display = 'none'
+      if (toolbar) toolbar.style.display = 'none'
+      if (output) output.style.flex = '1 1 100%'
+    } else {
+      // Restore normal layout
+      if (input) {
+        input.style.display = ''
+        input.style.flex = ''
+      }
+      if (output) {
+        output.style.display = ''
+        output.style.flex = ''
+      }
+      if (consoleEl) consoleEl.style.display = ''
+      if (flags) flags.style.display = ''
+      if (toolbar) toolbar.style.display = ''
+    }
+
+    // Tear down previous channel, notifying partner
+    if (this._splitChannel && prev) {
+      this._splitChannel.postMessage({
+        type: 'closed',
+        mode: prev,
+        sid: this._splitSessionId,
+      })
+      this._splitChannel.close()
+      this._splitChannel = null
+    }
+
+    if (!mode) {
+      this._splitSessionId = ''
+      return
+    }
+
+    const sid = this._splitSessionId
+    const channel = new BroadcastChannel('tjs-playground')
+    this._splitChannel = channel
+
+    if (mode === 'output') {
+      channel.onmessage = (e: MessageEvent) => {
+        const msg = e.data
+        if (msg.sid !== sid) return // ignore messages from other sessions
+        if (msg.type === 'ping') {
+          channel.postMessage({ type: 'pong', sid })
+        } else if (msg.type === 'code-change' && msg.view === 'tjs') {
+          this.parts.tjsEditor.value = msg.source
+          this.transpileAndRun()
+        } else if (msg.type === 'run' && msg.view === 'tjs') {
+          this.run()
+        } else if (msg.type === 'closed' && msg.mode === 'code') {
+          this.setSplitMode(null)
+          this.dispatchEvent(
+            new CustomEvent('split-mode-change', {
+              detail: null,
+              bubbles: true,
+            })
+          )
+        }
+      }
+      // Request current source from code window
+      channel.postMessage({ type: 'request-source', view: 'tjs', sid })
+    } else if (mode === 'code') {
+      channel.onmessage = (e: MessageEvent) => {
+        const msg = e.data
+        if (msg.sid !== sid) return // ignore messages from other sessions
+        if (msg.type === 'ping') {
+          channel.postMessage({ type: 'pong', sid })
+        } else if (msg.type === 'request-source' && msg.view === 'tjs') {
+          // Output window is asking for current source — send it
+          this.broadcastSource()
+        } else if (msg.type === 'closed' && msg.mode === 'output') {
+          this.setSplitMode(null)
+          this.dispatchEvent(
+            new CustomEvent('split-mode-change', {
+              detail: null,
+              bubbles: true,
+            })
+          )
+        }
+      }
+      // Send initial source to output window immediately
+      setTimeout(() => this.broadcastSource(), 50)
+    }
+  }
+
+  /**
+   * Broadcast editor content to output window (called in code mode)
+   */
+  private broadcastSource = () => {
+    if (this._splitMode === 'code' && this._splitChannel) {
+      this._splitChannel.postMessage({
+        type: 'code-change',
+        view: 'tjs',
+        source: this.parts.tjsEditor.value,
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  /**
+   * Broadcast run command to output window
+   */
+  broadcastRun = () => {
+    if (this._splitMode === 'code' && this._splitChannel) {
+      this._splitChannel.postMessage({
+        type: 'run',
+        view: 'tjs',
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  /**
+   * Notify partner window that this window is closing
+   */
+  notifyClose = () => {
+    if (this._splitChannel && this._splitMode) {
+      this._splitChannel.postMessage({
+        type: 'closed',
+        mode: this._splitMode,
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  /**
+   * Handle split/merge button click.
+   * window.open must be called directly in the click handler to avoid popup blockers.
+   */
+  handleSplitClick = () => {
+    if (this._splitMode === 'output') {
+      // Output window — close it (partner will get 'closed' via beforeunload)
+      window.close()
+      return
+    } else if (this._splitMode === 'code') {
+      // Code window — merge back
+      this.setSplitMode(null)
+      this.dispatchEvent(
+        new CustomEvent('split-mode-change', { detail: null, bubbles: true })
+      )
+    } else {
+      // Open output in new window — must happen here in the click handler
+      const sid = crypto.randomUUID().slice(0, 8)
+      const params = new URLSearchParams(window.location.hash.slice(1))
+      params.set('mode', 'output')
+      params.set('sid', sid)
+      const url = window.location.pathname + '#' + params.toString()
+      const win = window.open(url, `tjs-output-${sid}`)
+      if (!win) return // popup blocked — do nothing
+
+      // Apply split mode directly — don't wait for event round-trip
+      this.setSplitMode('code', sid)
+
+      // Also notify parent so it can update URL state
+      this.dispatchEvent(
+        new CustomEvent('split-mode-change', {
+          detail: { mode: 'code', sid },
+          bubbles: true,
+        })
+      )
+    }
+  }
+
+  /**
+   * Update split button appearance based on current mode
+   */
+  private updateSplitButton = () => {
+    const btn = this._splitBtn
+    if (!btn) return
+
+    btn.innerHTML = ''
+    if (this._splitMode === 'output') {
+      // Output window — show x to close
+      btn.style.display = ''
+      btn.classList.remove('split-btn-flip')
+      btn.title = 'Close output window'
+      btn.append(icons.x({ size: 16 }))
+    } else if (this._splitMode === 'code') {
+      // Code window — hide (no button needed, output window has the x)
+      btn.style.display = 'none'
+    } else {
+      // Normal — show copy icon (CSS flips it)
+      btn.style.display = ''
+      btn.classList.add('split-btn-flip')
+      btn.title = 'Open output in new window'
+      btn.append(icons.copy({ size: 16 }))
+    }
+  }
+
+  // Cache the split button reference after first access
+  private get _splitBtn(): HTMLButtonElement | null {
+    try {
+      return this.parts.splitBtn
+    } catch {
+      return null
+    }
+  }
+
   content = () => [
     // Toolbar
     div(
@@ -334,13 +564,18 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
         { class: 'tjs-output' },
         tabSelector(
           { part: 'outputTabs', style: { height: '100%' } },
-          div(
-            { name: 'JS' },
-            pre(
-              { part: 'jsOutput', class: 'js-output' },
-              '// Transpiled JavaScript will appear here'
-            )
-          ),
+          codeMirror({
+            name: 'JS',
+            part: 'jsOutput',
+            mode: 'javascript',
+            disabled: true,
+          }),
+          codeMirror({
+            name: 'Types',
+            part: 'typesOutput',
+            mode: 'typescript',
+            disabled: true,
+          }),
           elements.iframe({
             name: 'Preview',
             part: 'previewFrame',
@@ -374,6 +609,16 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
               { part: 'testsOutput', class: 'tests-output' },
               'Test results will appear here'
             )
+          ),
+          button(
+            {
+              part: 'splitBtn',
+              slot: 'after-tabs',
+              class: 'split-btn split-btn-flip',
+              title: 'Open output in new window',
+              onClick: this.handleSplitClick,
+            },
+            icons.copy({ size: 16 })
           )
         )
       )
@@ -416,6 +661,7 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       debounceTimer = setTimeout(() => {
         this.transpile()
         this.updateRevertButton()
+        this.broadcastSource()
       }, 300)
 
       // Update autocomplete context more frequently
@@ -517,7 +763,15 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       this.lastTranspileTime = performance.now() - startTime
 
       this.lastTranspileResult = result
-      this.parts.jsOutput.textContent = result.code
+      this.parts.jsOutput.value = result.code
+
+      // Update .d.ts types
+      try {
+        const dts = generateDTS(result, source)
+        this.parts.typesOutput.value = dts
+      } catch {
+        this.parts.typesOutput.value = '// Could not generate types'
+      }
 
       // Update docs
       this.updateDocs(result)
@@ -545,12 +799,13 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
     } catch (e: any) {
       // Format error with location info if available
       const errorInfo = this.formatTranspileError(e, source)
-      this.parts.jsOutput.textContent = errorInfo.detailed
+      this.parts.jsOutput.value = errorInfo.detailed
       this.parts.statusBar.textContent = errorInfo.short
       this.parts.statusBar.classList.add('error')
       this.lastTranspileResult = null
       // Clear test results on error
       this.parts.testsOutput.textContent = 'Transpilation failed - no tests run'
+      this.parts.typesOutput.value = '// Transpilation failed'
 
       // Set error marker in gutter
       if (e.line) {
@@ -954,6 +1209,11 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
   }
 
   run = async () => {
+    // In code mode, broadcast run to output window instead of running locally
+    if (this._splitMode === 'code') {
+      this.broadcastRun()
+    }
+
     this.parts.runBtn.disabled = true
     this.clearConsole()
     this.transpile()
@@ -1034,6 +1294,7 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
         importStatements,
         parentBindings: true,
         autoCallTjsFunction: true,
+        darkMode: document.body.classList.contains('darkmode'),
       })
 
       // Listen for messages from iframe
@@ -1244,5 +1505,27 @@ export const tjsPlayground = TJSPlayground.elementCreator({
       display: 'flex',
       flexDirection: 'column',
     },
+
+    // Split button in tab bar
+    ':host .split-btn': {
+      display: 'flex',
+      alignItems: 'center',
+      alignSelf: 'center',
+      padding: '4px 6px',
+      marginRight: '4px',
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      color: 'var(--text-color, #6b7280)',
+      borderRadius: '4px',
+      opacity: '0.7',
+    },
+    ':host .split-btn:hover': {
+      opacity: '1',
+      background: 'var(--code-background, #f3f4f6)',
+    },
+    ':host .split-btn-flip svg': {
+      transform: 'scaleY(-1)',
+    },
   },
 }) as ElementCreator<TJSPlayground>

package/demo/src/ts-playground.ts

@@ -75,6 +75,7 @@ interface TSPlaygroundParts extends PartsMap {
   testsToggle: HTMLInputElement
   debugToggle: HTMLInputElement
   safetyToggle: HTMLInputElement
+  splitBtn: HTMLButtonElement
 }
 
 export class TSPlayground extends Component<TSPlaygroundParts> {
@@ -88,6 +89,11 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
   private originalCode: string = DEFAULT_TS
   private editorCache: Map<string, string> = new Map()
 
+  // Split mode
+  private _splitMode: null | 'code' | 'output' = null
+  private _splitChannel: BroadcastChannel | null = null
+  private _splitSessionId: string = ''
+
   // Build flags state
   private buildFlags = {
     tests: true, // Run tests at transpile time
@@ -95,6 +101,200 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
     safe: true, // Safe mode (validates inputs)
   }
 
+  /**
+   * Set split mode and manage BroadcastChannel
+   */
+  setSplitMode = (mode: null | 'code' | 'output', sessionId?: string) => {
+    const prev = this._splitMode
+    this._splitMode = mode
+    if (sessionId) this._splitSessionId = sessionId
+
+    this.updateSplitButton()
+
+    const input = this.querySelector('.ts-input') as HTMLElement | null
+    const output = this.querySelector('.ts-output') as HTMLElement | null
+    const tsConsole = this.querySelector('.ts-console') as HTMLElement | null
+    const flags = this.querySelector('.build-flags') as HTMLElement | null
+    const toolbar = this.querySelector('.ts-toolbar') as HTMLElement | null
+
+    if (mode === 'code') {
+      if (output) output.style.display = 'none'
+      if (tsConsole) tsConsole.style.display = 'none'
+      if (input) input.style.flex = '1 1 100%'
+    } else if (mode === 'output') {
+      if (input) input.style.display = 'none'
+      if (flags) flags.style.display = 'none'
+      if (toolbar) toolbar.style.display = 'none'
+      if (output) output.style.flex = '1 1 100%'
+    } else {
+      if (input) {
+        input.style.display = ''
+        input.style.flex = ''
+      }
+      if (output) {
+        output.style.display = ''
+        output.style.flex = ''
+      }
+      if (tsConsole) tsConsole.style.display = ''
+      if (flags) flags.style.display = ''
+      if (toolbar) toolbar.style.display = ''
+    }
+
+    if (this._splitChannel && prev) {
+      this._splitChannel.postMessage({
+        type: 'closed',
+        mode: prev,
+        sid: this._splitSessionId,
+      })
+      this._splitChannel.close()
+      this._splitChannel = null
+    }
+
+    if (!mode) {
+      this._splitSessionId = ''
+      return
+    }
+
+    const sid = this._splitSessionId
+    const channel = new BroadcastChannel('tjs-playground')
+    this._splitChannel = channel
+
+    if (mode === 'output') {
+      channel.onmessage = (e: MessageEvent) => {
+        const msg = e.data
+        if (msg.sid !== sid) return
+        if (msg.type === 'ping') {
+          channel.postMessage({ type: 'pong', sid })
+        } else if (msg.type === 'code-change' && msg.view === 'ts') {
+          this.parts.tsEditor.value = msg.source
+          this.transpile().then(() => this.run())
+        } else if (msg.type === 'run' && msg.view === 'ts') {
+          this.run()
+        } else if (msg.type === 'closed' && msg.mode === 'code') {
+          this.setSplitMode(null)
+          this.dispatchEvent(
+            new CustomEvent('split-mode-change', {
+              detail: null,
+              bubbles: true,
+            })
+          )
+        }
+      }
+      // Request current source from code window
+      channel.postMessage({ type: 'request-source', view: 'ts', sid })
+    } else if (mode === 'code') {
+      channel.onmessage = (e: MessageEvent) => {
+        const msg = e.data
+        if (msg.sid !== sid) return
+        if (msg.type === 'ping') {
+          channel.postMessage({ type: 'pong', sid })
+        } else if (msg.type === 'request-source' && msg.view === 'ts') {
+          // Output window is asking for current source — send it
+          this.broadcastSource()
+        } else if (msg.type === 'closed' && msg.mode === 'output') {
+          this.setSplitMode(null)
+          this.dispatchEvent(
+            new CustomEvent('split-mode-change', {
+              detail: null,
+              bubbles: true,
+            })
+          )
+        }
+      }
+      // Send initial source to output window immediately
+      setTimeout(() => this.broadcastSource(), 50)
+    }
+  }
+
+  private broadcastSource = () => {
+    if (this._splitMode === 'code' && this._splitChannel) {
+      this._splitChannel.postMessage({
+        type: 'code-change',
+        view: 'ts',
+        source: this.parts.tsEditor.value,
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  broadcastRun = () => {
+    if (this._splitMode === 'code' && this._splitChannel) {
+      this._splitChannel.postMessage({
+        type: 'run',
+        view: 'ts',
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  notifyClose = () => {
+    if (this._splitChannel && this._splitMode) {
+      this._splitChannel.postMessage({
+        type: 'closed',
+        mode: this._splitMode,
+        sid: this._splitSessionId,
+      })
+    }
+  }
+
+  handleSplitClick = () => {
+    if (this._splitMode === 'output') {
+      window.close()
+      return
+    } else if (this._splitMode === 'code') {
+      this.setSplitMode(null)
+      this.dispatchEvent(
+        new CustomEvent('split-mode-change', { detail: null, bubbles: true })
+      )
+    } else {
+      const sid = crypto.randomUUID().slice(0, 8)
+      const params = new URLSearchParams(window.location.hash.slice(1))
+      params.set('mode', 'output')
+      params.set('sid', sid)
+      const url = window.location.pathname + '#' + params.toString()
+      const win = window.open(url, `ts-output-${sid}`)
+      if (!win) return
+
+      // Apply split mode directly
+      this.setSplitMode('code', sid)
+
+      this.dispatchEvent(
+        new CustomEvent('split-mode-change', {
+          detail: { mode: 'code', sid },
+          bubbles: true,
+        })
+      )
+    }
+  }
+
+  private updateSplitButton = () => {
+    const btn = this._splitBtn
+    if (!btn) return
+
+    btn.innerHTML = ''
+    if (this._splitMode === 'output') {
+      btn.style.display = ''
+      btn.classList.remove('split-btn-flip')
+      btn.title = 'Close output window'
+      btn.append(icons.x({ size: 16 }))
+    } else if (this._splitMode === 'code') {
+      btn.style.display = 'none'
+    } else {
+      btn.style.display = ''
+      btn.classList.add('split-btn-flip')
+      btn.title = 'Open output in new window'
+      btn.append(icons.copy({ size: 16 }))
+    }
+  }
+
+  private get _splitBtn(): HTMLButtonElement | null {
+    try {
+      return this.parts.splitBtn
+    } catch {
+      return null
+    }
+  }
+
   content = () => [
     // Toolbar
     div(
@@ -251,6 +451,16 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
               { part: 'testsOutput', class: 'tests-output' },
               'Test results will appear here'
             )
+          ),
+          button(
+            {
+              part: 'splitBtn',
+              slot: 'after-tabs',
+              class: 'split-btn split-btn-flip',
+              title: 'Open output in new window',
+              onClick: this.handleSplitClick,
+            },
+            icons.copy({ size: 16 })
           )
         )
       )
@@ -284,6 +494,7 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
       debounceTimer = setTimeout(() => {
         this.transpile()
         this.updateRevertButton()
+        this.broadcastSource()
       }, 300)
     })
   }
@@ -468,6 +679,11 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
   }
 
   run = async () => {
+    // In code mode, broadcast run to output window
+    if (this._splitMode === 'code') {
+      this.broadcastRun()
+    }
+
     this.clearConsole()
     await this.transpile()
 
@@ -513,6 +729,7 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
         htmlContent,
         importMapScript,
         jsCode,
+        darkMode: document.body.classList.contains('darkmode'),
       })
 
       // Clean up any previous message handler
@@ -696,5 +913,27 @@ export const tsPlayground = TSPlayground.elementCreator({
       display: 'flex',
       flexDirection: 'column',
     },
+
+    // Split button in tab bar
+    ':host .split-btn': {
+      display: 'flex',
+      alignItems: 'center',
+      alignSelf: 'center',
+      padding: '4px 6px',
+      marginRight: '4px',
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      color: 'var(--text-color, #6b7280)',
+      borderRadius: '4px',
+      opacity: '0.7',
+    },
+    ':host .split-btn:hover': {
+      opacity: '1',
+      background: 'var(--code-background, #f3f4f6)',
+    },
+    ':host .split-btn-flip svg': {
+      transform: 'scaleY(-1)',
+    },
   },
 }) as ElementCreator<TSPlayground>