fixes

Author: jtpio

packages/javascript-kernel-extension/package.json

@@ -39,12 +39,12 @@
     "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.5.0",
+    "@jupyterlab/application": "^4.5.5",
     "@jupyterlite/javascript-kernel": "^0.4.0-alpha.0",
     "@jupyterlite/services": "^0.7.0"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^4.5.0",
+    "@jupyterlab/builder": "^4.5.5",
     "npm-run-all2": "^7.0.1",
     "rimraf": "~5.0.1",
     "typescript": "~5.0.2"

packages/javascript-kernel/package.json

@@ -43,8 +43,10 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
+    "@jupyterlab/coreutils": "^6.5.5",
+    "@jupyterlab/nbformat": "^4.5.0",
     "@jupyterlite/services": "^0.7.0",
-    "@lumino/coreutils": "^2.0.0",
+    "@lumino/coreutils": "^2.2.2",
     "astring": "^1.9.0",
     "comlink": "^4.3.1",
     "meriyah": "^4.3.9"

packages/javascript-kernel/src/display.ts

@@ -2,13 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import type { KernelMessage } from '@jupyterlab/services';
-
-/**
- * MIME bundle for rich display.
- */
-export interface IMimeBundle {
-  [key: string]: any;
-}
+import type { IMimeBundle } from '@jupyterlab/nbformat';
 
 /**
  * Display request from display().
@@ -78,7 +72,12 @@ export class DisplayHelper {
    * display('my-id').html('<div>...</div>')
    */
   display(id?: string): DisplayHelper {
-    return new DisplayHelper(id);
+    const child = new DisplayHelper(id);
+    child.setCallbacks({
+      onDisplay: this._displayCallback,
+      onClear: this._clearCallback
+    });
+    return child;
   }
 
   /**

packages/javascript-kernel/src/executor.ts

@@ -6,14 +6,9 @@ import type { KernelMessage } from '@jupyterlab/services';
 import { parseScript } from 'meriyah';
 import { generate } from 'astring';
 
-import { IMimeBundle } from './display';
+import type { IMimeBundle } from '@jupyterlab/nbformat';
 
-export {
-  IMimeBundle,
-  IDisplayData,
-  IDisplayCallbacks,
-  DisplayHelper
-} from './display';
+export { IDisplayData, IDisplayCallbacks, DisplayHelper } from './display';
 
 /**
  * Configuration for magic imports.
@@ -501,8 +496,10 @@ export class JavaScriptExecutor {
 
     // Handle primitives
     if (typeof value === 'string') {
-      // Check if it looks like HTML
-      if (value.trim().startsWith('<') && value.trim().endsWith('>')) {
+      // Check if it looks like HTML (must start with a valid tag: <div>, <p class="...">,
+      // <!DOCTYPE>, <!-- -->, <br/>, etc.). Rejects non-HTML like "<a, b>".
+      const trimmed = value.trim();
+      if (/^<(?:[a-zA-Z][a-zA-Z0-9-]*[\s\/>]|!(?:DOCTYPE|--))/.test(trimmed) && trimmed.endsWith('>')) {
         return {
           'text/html': value,
           'text/plain': value
@@ -746,23 +743,17 @@ export class JavaScriptExecutor {
 
     const codeLine = lines[lineIndex];
 
-    // Only match if cursor is at the end of the line
-    if (cursorPosInLine !== codeLine.length) {
-      return {
-        matches: [],
-        cursorStart: cursorPos,
-        cursorEnd: cursorPos
-      };
-    }
-
-    const lineRes = this.completeLine(codeLine);
+    const codePrefix = codeLine.slice(0, cursorPosInLine);
+    const lineRes = this.completeLine(codePrefix);
     const matches = lineRes.matches;
     const inLineCursorStart = lineRes.cursorStart;
+    const tail = codeLine.slice(cursorPosInLine);
+    const cursorTail = tail.match(/^[\w$]*/)?.[0] ?? '';
 
     return {
       matches,
       cursorStart: lineBegin + inLineCursorStart,
-      cursorEnd: cursorPos,
+      cursorEnd: cursorPos + cursorTail.length,
       status: lineRes.status || 'ok'
     };
   }
@@ -1151,35 +1142,103 @@ export class JavaScriptExecutor {
    * Transform import source with magic imports.
    */
   private _transformImportSource(source: string): string {
-    const noMagicStarts = ['http://', 'https://', 'data:', 'file://', 'blob:'];
-    const noEmsEnds = ['.js', '.mjs', '.cjs', '.wasm', '+esm'];
-
     if (!this._config.magicImports.enabled) {
       return source;
     }
 
-    const baseUrl = this._config.magicImports.baseUrl.endsWith('/')
-      ? this._config.magicImports.baseUrl
-      : this._config.magicImports.baseUrl + '/';
-
-    const addEms = !noEmsEnds.some(end => source.endsWith(end));
-    const emsExtraEnd = addEms ? (source.endsWith('/') ? '+esm' : '/+esm') : '';
-
-    // If the source starts with http/https, don't transform
-    if (noMagicStarts.some(start => source.startsWith(start))) {
+    // Keep absolute, relative and import-map style specifiers unchanged.
+    if (this._isDirectImportSource(source)) {
       return source;
     }
 
-    // If it starts with npm/ or gh/, or auto npm is disabled
-    if (
-      ['npm/', 'gh/'].some(start => source.startsWith(start)) ||
+    const { path: sourcePath, suffix } = this._splitImportSourceSuffix(source);
+
+    const transformedPath =
+      ['npm/', 'gh/'].some(start => sourcePath.startsWith(start)) ||
       !this._config.magicImports.enableAutoNpm
-    ) {
-      return `${baseUrl}${source}${emsExtraEnd}`;
+        ? sourcePath
+        : `npm/${sourcePath}`;
+
+    let transformedSource = `${this._joinBaseAndPath(
+      this._config.magicImports.baseUrl,
+      transformedPath
+    )}${suffix}`;
+
+    if (this._shouldAppendEsmSuffix(sourcePath)) {
+      transformedSource = this._appendEsmSuffix(transformedSource);
+    }
+
+    return transformedSource;
+  }
+
+  /**
+   * Whether an import source should bypass magic import transformation.
+   */
+  private _isDirectImportSource(source: string): boolean {
+    return (
+      /^(?:[a-zA-Z][a-zA-Z\d+.-]*:|\/\/)/.test(source) ||
+      source.startsWith('./') ||
+      source.startsWith('../') ||
+      source.startsWith('/') ||
+      source.startsWith('#')
+    );
+  }
+
+  /**
+   * Whether a transformed import should include the jsDelivr `+esm` suffix.
+   */
+  private _shouldAppendEsmSuffix(sourcePath: string): boolean {
+    const noEsmEnds = ['.js', '.mjs', '.cjs', '.wasm', '+esm'];
+    return !noEsmEnds.some(end => sourcePath.endsWith(end));
+  }
+
+  /**
+   * Append `+esm` before query/hash suffixes.
+   */
+  private _appendEsmSuffix(source: string): string {
+    const { path, suffix } = this._splitImportSourceSuffix(source);
+    const esmSuffix = path.endsWith('/') ? '+esm' : '/+esm';
+    return `${path}${esmSuffix}${suffix}`;
+  }
+
+  /**
+   * Split an import source into path and query/hash suffix.
+   */
+  private _splitImportSourceSuffix(source: string): {
+    path: string;
+    suffix: string;
+  } {
+    const queryIndex = source.indexOf('?');
+    const hashIndex = source.indexOf('#');
+    const splitIndex =
+      queryIndex === -1
+        ? hashIndex
+        : hashIndex === -1
+          ? queryIndex
+          : Math.min(queryIndex, hashIndex);
+
+    if (splitIndex === -1) {
+      return { path: source, suffix: '' };
     }
 
-    // Auto-prefix with npm/
-    return `${baseUrl}npm/${source}${emsExtraEnd}`;
+    return {
+      path: source.slice(0, splitIndex),
+      suffix: source.slice(splitIndex)
+    };
+  }
+
+  /**
+   * Join a base URL and import path while preserving origin semantics.
+   */
+  private _joinBaseAndPath(baseUrl: string, path: string): string {
+    const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+    const normalizedPath = path.replace(/^\/+/, '');
+
+    try {
+      return new URL(normalizedPath, normalizedBase).toString();
+    } catch {
+      return `${normalizedBase}${normalizedPath}`;
+    }
   }
 
   /**
@@ -1659,7 +1718,7 @@ export class JavaScriptExecutor {
     expression: string,
     value: any,
     detailLevel: number
-  ): IMimeBundle {
+  ): IInspectResult['data'] {
     const lines: string[] = [];
 
     // Type information

packages/javascript-kernel/src/runtime_backends.ts

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import type { KernelMessage } from '@jupyterlab/services';
+import { PageConfig } from '@jupyterlab/coreutils';
 
 import { PromiseDelegate } from '@lumino/coreutils';
 
@@ -22,6 +23,7 @@ import type {
  */
 export interface IRuntimeBackendOptions {
   onOutput: RuntimeOutputHandler;
+  baseUrl?: string;
 }
 
 /**
@@ -189,20 +191,41 @@ export class IFrameRuntimeBackend extends AbstractRuntimeBackend {
 <body></body>
 </html>`;
 
-      this._container.appendChild(this._iframe);
+      const iframe = this._iframe;
+      const iframeLoad = new Promise<void>((resolve, reject) => {
+        let settled = false;
 
-      await new Promise<void>((resolve, reject) => {
-        if (!this._iframe) {
-          reject(new Error('IFrame runtime is not initialized'));
-          return;
-        }
+        const cleanup = (): void => {
+          iframe.onload = null;
+          iframe.onerror = null;
+        };
 
-        this._iframe.onload = () => resolve();
-        this._iframe.onerror = () => {
+        iframe.onload = () => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          cleanup();
+          resolve();
+        };
+        iframe.onerror = () => {
+          if (settled) {
+            return;
+          }
+          settled = true;
+          cleanup();
           reject(new Error('IFrame runtime failed to load'));
         };
       });
 
+      this._container.appendChild(iframe);
+
+      await withTimeout(
+        iframeLoad,
+        IFrameRuntimeBackend.STARTUP_TIMEOUT_MS,
+        'IFrame runtime failed to load'
+      );
+
       if (!this._iframe?.contentWindow) {
         throw new Error('IFrame window not available');
       }
@@ -242,7 +265,12 @@ export class IFrameRuntimeBackend extends AbstractRuntimeBackend {
       }
 
       await withTimeout(
-        remote.initialize(activeOutputProxy),
+        remote.initialize(
+          {
+            baseUrl: resolveBaseUrl(this._options.baseUrl)
+          },
+          activeOutputProxy
+        ),
         IFrameRuntimeBackend.STARTUP_TIMEOUT_MS,
         'IFrame runtime failed to initialize'
       );
@@ -392,7 +420,12 @@ export class WorkerRuntimeBackend extends AbstractRuntimeBackend {
 
     try {
       await withTimeout(
-        remote.initialize(outputProxy),
+        remote.initialize(
+          {
+            baseUrl: resolveBaseUrl(this._options.baseUrl)
+          },
+          outputProxy
+        ),
         WorkerRuntimeBackend.STARTUP_TIMEOUT_MS,
         'Worker runtime failed to initialize'
       );
@@ -479,3 +512,18 @@ async function withTimeout<T>(
     );
   });
 }
+
+/**
+ * Resolve the runtime base URL with JupyterLab PageConfig fallback.
+ */
+function resolveBaseUrl(baseUrl?: string): string {
+  if (typeof baseUrl === 'string' && baseUrl.length > 0) {
+    return baseUrl;
+  }
+
+  try {
+    return PageConfig.getBaseUrl();
+  } catch {
+    return '/';
+  }
+}

packages/javascript-kernel/src/runtime_evaluator.ts

@@ -164,7 +164,23 @@ export class JavaScriptRuntimeEvaluator {
       warn: scopeConsole.warn
     };
 
-    const toText = (args: any[]) => args.join(' ') + '\n';
+    const toText = (args: any[]) => {
+      const text = args
+        .map(arg => {
+          if (typeof arg === 'string') {
+            return arg;
+          }
+
+          try {
+            return String(arg);
+          } catch {
+            return '[Unprintable value]';
+          }
+        })
+        .join(' ');
+
+      return `${text}\n`;
+    };
 
     scopeConsole.log = (...args: any[]) => {
       this._onOutput({