tjs-lang 0.7.7 → 0.8.0

package/demo/src/tjs-playground.ts

@@ -25,7 +25,11 @@ import {
 import { codeMirror, CodeMirror } from '../../editors/codemirror/component'
 import { tjs, generateDTS, type TJSTranspileOptions } from '../../src/lang'
 import { generateDocsMarkdown } from './docs-utils'
-import { rewriteImports, extractImports } from './imports'
+import {
+  rewriteImports,
+  extractImports,
+  registerIframeContent,
+} from './imports'
 import {
   buildIframeDoc,
   createIframeMessageHandler,
@@ -1259,8 +1263,8 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       const cssContent = this.parts.cssEditor.value
       const jsCode = this.lastTranspileResult.code
 
-      // Rewrite bare import specifiers to /tfs/ URLs
-      // The TFS service worker handles CDN resolution and caching
+      // Rewrite bare import specifiers to absolute JSDelivr /+esm URLs
+      // (sandboxed blob iframes can't reliably use the SW)
       const rewrittenCode = rewriteImports(jsCode)
 
       // Extract import statements — they must be at the top of the module
@@ -1304,18 +1308,38 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       })
       window.addEventListener('message', messageHandler)
 
-      // Set iframe content using blob URL instead of srcdoc
-      // This allows import maps to work with external URLs
+      // Load the iframe from a same-origin URL the TFS service worker
+      // serves. This makes the iframe SW-controlled, so its module imports
+      // (and future virtual-module reads) go through the SW. blob: URLs
+      // can't do this — Chrome SWs don't intercept fetches from sandboxed
+      // blob iframes.
       const iframe = this.parts.previewFrame
-      const blob = new Blob([iframeDoc], { type: 'text/html' })
-      const blobUrl = URL.createObjectURL(blob)
 
-      // Clean up previous blob URL if any
+      // Clean up previous blob URL if any (legacy fallback path)
       if (iframe.dataset.blobUrl) {
         URL.revokeObjectURL(iframe.dataset.blobUrl)
+        delete iframe.dataset.blobUrl
+      }
+
+      const sessionId = `tjs-${Date.now()}-${Math.random()
+        .toString(36)
+        .slice(2)}`
+      const registered = await registerIframeContent(sessionId, iframeDoc)
+
+      if (registered) {
+        iframe.src = `/iframe/${sessionId}`
+      } else {
+        // SW unavailable — fall back to blob: (no SW interception, but
+        // CDN imports still work via the absolute URLs in the rewritten
+        // /tfs/ paths once the SW is back).
+        console.warn(
+          '[playground] SW unavailable, falling back to blob: iframe'
+        )
+        const blob = new Blob([iframeDoc], { type: 'text/html' })
+        const blobUrl = URL.createObjectURL(blob)
+        iframe.dataset.blobUrl = blobUrl
+        iframe.src = blobUrl
       }
-      iframe.dataset.blobUrl = blobUrl
-      iframe.src = blobUrl
 
       // Wait a bit for execution, then clean up listener
       setTimeout(() => {

package/demo/src/ts-examples.ts

@@ -423,14 +423,14 @@ console.log('(2 + 3) * 4 =', calc.add(2).add(3).multiply(4).getResult())
     description:
       'Complete example showing the TS -> TJS -> JS value proposition',
     group: 'advanced',
-    code: `/**
- * THE FULL PICTURE
- *
- * TypeScript promises type safety.
- * TJS delivers it at RUNTIME.
- *
- * This is what "TS keeps its promise" means.
- */
+    code: `/*#
+## The Full Picture
+
+TypeScript promises type safety.
+TJS delivers it at RUNTIME.
+
+This is what "TS keeps its promise" means.
+*/
 
 // Define your types with standard TypeScript syntax
 interface Product {

package/demo/src/ts-playground.ts

@@ -18,7 +18,7 @@ import {
 } from 'tosijs-ui'
 import { codeMirror, CodeMirror } from '../../editors/codemirror/component'
 import { tjs } from '../../src/lang'
-import { rewriteImports } from './imports'
+import { rewriteImports, registerIframeContent } from './imports'
 import { generateDocsMarkdown } from './docs-utils'
 import {
   buildIframeDoc,
@@ -710,7 +710,7 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
       const cssContent = this.parts.cssEditor.value
       const jsCode = this.lastJsCode
 
-      // Rewrite bare imports to /tfs/ URLs
+      // Rewrite bare imports to absolute JSDelivr /+esm URLs
       const rewrittenCode = rewriteImports(jsCode)
 
       // Create iframe document
@@ -746,17 +746,33 @@ export class TSPlayground extends Component<TSPlaygroundParts> {
       })
       window.addEventListener('message', this._messageHandler)
 
-      // Set iframe content using blob URL instead of srcdoc
-      // (srcdoc can cause double-execution in some browsers)
+      // Load iframe from a SW-served same-origin URL so the SW controls
+      // the iframe's fetches. blob: URLs do not get SW interception in
+      // sandboxed contexts (Chrome quirk). See tjs-playground.ts.
       const iframe = this.parts.previewFrame
-      const blob = new Blob([iframeDoc], { type: 'text/html' })
-      const blobUrl = URL.createObjectURL(blob)
 
       if (iframe.dataset.blobUrl) {
         URL.revokeObjectURL(iframe.dataset.blobUrl)
+        delete iframe.dataset.blobUrl
+      }
+
+      const sessionId = `ts-${Date.now()}-${Math.random()
+        .toString(36)
+        .slice(2)}`
+      const registered = await registerIframeContent(sessionId, iframeDoc)
+
+      if (registered) {
+        iframe.src = `/iframe/${sessionId}`
+      } else {
+        // SW not active — fall back to blob: (no SW; CDN imports will fail)
+        console.warn(
+          '[ts-playground] SW unavailable, falling back to blob: iframe'
+        )
+        const blob = new Blob([iframeDoc], { type: 'text/html' })
+        const blobUrl = URL.createObjectURL(blob)
+        iframe.dataset.blobUrl = blobUrl
+        iframe.src = blobUrl
       }
-      iframe.dataset.blobUrl = blobUrl
-      iframe.src = blobUrl
     } catch (e: any) {
       this.log(`Error: ${e.message}`)
       this.parts.statusBar.textContent = 'Error'