Use the text/html mimebundle (#27)

jtpio · web-flow · commit 035b4019203c · 2025-11-30T17:37:36.000+01:00
* Use the existing `text/html` mimebundle

* fix link

* fix readme

* defaults

* fix rendering

* bump p5
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # jupyterlite-p5-kernel
 
 [![Github Actions Status](https://github.com/jupyterlite/p5-kernel/workflows/Build/badge.svg)](https://github.com/jupyterlite/p5-kernel/actions/workflows/build.yml)
-[![JupyterLite](https://jupyterlite.rtfd.io/en/latest/_static/badge-launch.svg)](https://jupyterlite-p5-kernel.readthedocs.io/en/latest/lite/lab)
+[![JupyterLite](https://jupyterlite.rtfd.io/en/latest/_static/badge-launch.svg)](https://jupyterlite.github.io/p5-kernel)
 
 A p5.js kernel for JupyterLite.
 
@@ -23,8 +23,6 @@ pip install jupyterlite-p5-kernel
 jupyter lite build
 ```
 
-See the JupyterLite documentation for more information on how to build sites and include additional extensions: https://jupyterlite.readthedocs.io/en/latest/howto/index.html
-
 ## Uninstall
 
 ```bash
diff --git a/packages/p5-kernel-extension/src/index.ts b/packages/p5-kernel-extension/src/index.ts
@@ -19,7 +19,7 @@ import p5Logo from '../style/icons/p5js.png';
 /**
  * The default CDN fallback for p5.js
  */
-const P5_CDN_URL = 'https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js';
+const P5_CDN_URL = 'https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js';
 
 /**
  * A plugin to register the p5.js kernel.
diff --git a/packages/p5-kernel/src/kernel.ts b/packages/p5-kernel/src/kernel.ts
@@ -4,11 +4,6 @@ import { BaseKernel, type IKernel } from '@jupyterlite/services';
 
 import { PromiseDelegate } from '@lumino/coreutils';
 
-/**
- * The mimetype for mime bundle results
- */
-const MIME_TYPE = 'text/html-sandboxed';
-
 /**
  * A kernel for making p5 sketches in the browser
  */
@@ -158,7 +153,6 @@ export class P5Kernel extends BaseKernel {
       const magics = await this._magics();
       const { data, metadata } = magics;
       this._parentHeaders.forEach(h => {
-        this.clearOutput({ wait: false });
         this.updateDisplayData(
           {
             data,
@@ -290,23 +284,27 @@ export class P5Kernel extends BaseKernel {
     // add metadata
     const re = /^%show(?: (.+)\s+(.+))?\s*$/;
     const matches = code.match(re);
-    const width = matches?.[1] ?? undefined;
-    const height = matches?.[2] ?? undefined;
+    const width = matches?.[1] ?? '100%';
+    const height = matches?.[2] ?? '400px';
+    // Properly escape the srcdoc content
+    const srcdocContent = [
+      '<body style="overflow: hidden; margin: 0; padding: 0;">',
+      `<script>${script}</script>`,
+      '</body>'
+    ].join('');
+
+    // Escape the srcdoc attribute value
+    const escapedSrcdoc = srcdocContent
+      .replace(/&/g, '&amp;')
+      .replace(/'/g, '&#39;')
+      .replace(/"/g, '&quot;');
+
     return {
       execution_count: this.executionCount,
       data: {
-        [MIME_TYPE]: [
-          '<body style="overflow: hidden;">',
-          `<script>${script}</script>`,
-          '</body>'
-        ].join('\n')
+        'text/html': `<iframe width="${width}" height="${height}" frameborder="0" srcdoc="${escapedSrcdoc}"></iframe>`
       },
-      metadata: {
-        [MIME_TYPE]: {
-          width,
-          height
-        }
-      }
+      metadata: {}
     };
   }
 
