repl-sdk 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repl-sdk",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "exports": {
     ".": {
@@ -96,9 +96,9 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "codemirror-lang-glimdown": "^2.0.4",
     "codemirror-lang-glimmer": "^2.0.4",
-    "codemirror-lang-glimmer-js": "^2.0.4"
+    "codemirror-lang-glimmer-js": "^2.0.4",
+    "codemirror-lang-glimdown": "^2.0.4"
   },
   "volta": {
     "extends": "../../package.json"

package/src/compilers/ember.js

@@ -2,6 +2,8 @@
  * @typedef {import('../types.ts').CompilerConfig} CompilerConfig
  */
 
+import { errorMessage } from '../utils.js';
+
 /**
  * Other `@ember` (and `@glimmer`) packages are bundled in ember-source,
  * and typecilaly use a build plugin to resolve from `@ember/*` imports.
@@ -91,7 +93,7 @@ function resolve(id) {
 function onUnhandled(e, handle) {
   if (!e.reason?.message) return;
 
-  let reason = e.reason.message;
+  let reason = errorMessage(e.reason);
 
   if (reason.includes('Stack trace for the update:')) {
     reason += ' (see console)';

package/src/compilers/react.js

@@ -18,6 +18,8 @@ export const jsx = {
         return `https://esm.sh/react@19.2.3/es2022/react.development.mjs`;
       case 'react/jsx-dev-runtime':
         return `https://esm.sh/react@19.2.3/es2022/jsx-dev-runtime.development.mjs`;
+      case 'react/jsx-runtime':
+        return `https://esm.sh/react@19.2.3/es2022/jsx-runtime.mjs`;
       case 'react-dom/client':
         return `https://esm.sh/react-dom@19.2.3/es2022/client.development.mjs`;
       case '@babel/standalone':
@@ -37,6 +39,18 @@ export const jsx = {
             [
               babel.availablePresets.react,
               {
+                /**
+                 * The production automatic runtime (jsx/jsxs from
+                 * 'react/jsx-runtime') works under both dev- and
+                 * production-built hosts.
+                 *
+                 * The default (development) transform emits jsxDEV from
+                 * 'react/jsx-dev-runtime', which a production build of react
+                 * deliberately exports as undefined — every compiled demo
+                 * then throws "_jsxDEV is not a function" at evaluation.
+                 */
+                runtime: 'automatic',
+                development: false,
                 // useBuiltIns: true,
               },
             ],
@@ -53,6 +67,15 @@ export const jsx = {
 
         // Wait for react-dom to render
         await new Promise((resolve) => requestAnimationFrame(resolve));
+
+        // The return value is this render's destroy handle (see Compiler#render).
+        // Without unmounting, every rendered demo leaves a live FiberRootNode
+        // pinning its container element -- and through DOM parent/child links,
+        // the entire (detached) tree the demo was rendered into. In dev,
+        // react-refresh additionally roots every FiberRootNode globally
+        // (helpersByRoot), so nothing about an abandoned render is ever
+        // garbage-collected.
+        return () => root.unmount();
       },
     };
   },

package/src/compilers/svelte.js

@@ -99,17 +99,20 @@ export const svelte = {
 
         element.appendChild(div);
 
-        requestAnimationFrame(() => {
-          // @ts-ignore
-          svelte.mount(component, {
-            target: element,
-            props: {
-              /* no props */
-            },
-          });
+        await new Promise((resolve) => requestAnimationFrame(resolve));
 
-          api.announce('info', 'Done');
+        // @ts-ignore
+        const instance = svelte.mount(component, {
+          target: element,
+          props: {
+            /* no props */
+          },
         });
+
+        api.announce('info', 'Done');
+
+        // The return value is this render's destroy handle (see Compiler#render).
+        return () => svelte.unmount(instance);
       },
     };
   },

package/src/compilers/vue.js

@@ -50,8 +50,13 @@ export const vue = {
         element.appendChild(div);
         element.appendChild(style);
 
-        createApp(component).mount(div);
+        const app = createApp(component);
+
+        app.mount(div);
         compiler.announce('info', 'Done');
+
+        // The return value is this render's destroy handle (see Compiler#render).
+        return () => app.unmount();
       },
     };
   },

package/src/compilers.ember.onUnhandled.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+
+import { gjs } from './compilers/ember.js';
+
+function handleUnhandled(reason: unknown) {
+  let handled: string | undefined;
+
+  gjs.onUnhandled?.({ reason } as PromiseRejectionEvent, (message) => (handled = message));
+
+  return handled;
+}
+
+/**
+ * In apps, nothing awaits the compile state's promise, so compile errors
+ * also arrive via unhandledrejection — and this handler's announcement is
+ * the last one, i.e. the one the UI's error bubble shows.
+ */
+describe('gjs onUnhandled', () => {
+  it('ignores reasons without a message', () => {
+    expect(handleUnhandled(undefined)).toBe(undefined);
+    expect(handleUnhandled('boom')).toBe(undefined);
+  });
+
+  it('uses the message of a normal Error', () => {
+    expect(handleUnhandled(new Error('boom'))).toBe('boom');
+  });
+
+  it('includes the source_code of an SWC-style error (as thrown by content-tag)', () => {
+    const swcError = Object.assign(new Error('Parse Error at dynamic-repl.js:3:16: 3:33'), {
+      source_code:
+        "  × Expected 'from', got 'string literal'\n" +
+        '   ╭─[dynamic-repl.js:3:1]\n' +
+        " 2 │ import { tracked } from '@glimmer/tracking';\n" +
+        " 3 │ import { on }  '@ember/modifier';\n" +
+        '   ·                ─────────────────\n' +
+        '   ╰────',
+    });
+
+    expect(handleUnhandled(swcError)).toMatchInlineSnapshot(`
+      "Parse Error at dynamic-repl.js:3:16: 3:33
+
+        × Expected 'from', got 'string literal'
+         ╭─[dynamic-repl.js:3:1]
+       2 │ import { tracked } from '@glimmer/tracking';
+       3 │ import { on }  '@ember/modifier';
+         ·                ─────────────────
+         ╰────"
+    `);
+  });
+
+  it('points at the console for backtracking-rerender asserts', () => {
+    const message = handleUnhandled(
+      new Error('Assertion Failed: ...\n\nStack trace for the update:\n...')
+    );
+
+    expect(message).toContain('(see console)');
+  });
+});

package/src/index.d.ts

@@ -3,6 +3,13 @@ import type { EditorView } from 'codemirror';
 
 export type { ErrorMessage, InfoMessage, Message, Options } from './types.ts';
 
+/**
+ * Builds the most useful human-readable message from a thrown error,
+ * including the explanation and code-frame from SWC / content-tag
+ * parse errors (which hide those on a non-standard `source_code` property).
+ */
+export function errorMessage(error: unknown): string;
+
 export const defaultFormats: keyof Options['formats'];
 export const defaults: Options;
 

package/src/index.js

@@ -10,10 +10,12 @@ import { compilers } from './compilers.js';
 import { STABLE_REFERENCE } from './es-module-shim.js';
 import { getTarRequestId } from './request.js';
 import { getFromTarball } from './tar.js';
-import { assert, nextId, prefix_tgz, tgzPrefix, unzippedPrefix } from './utils.js';
+import { assert, errorMessage, nextId, prefix_tgz, tgzPrefix, unzippedPrefix } from './utils.js';
 
 assert(`There is no document. repl-sdk is meant to be ran in a browser`, globalThis.document);
 
+export { errorMessage } from './utils.js';
+
 export const defaultFormats = Object.keys(compilers);
 
 export const defaults = {
@@ -98,7 +100,7 @@ export class Compiler {
 
     if (handled) return;
 
-    this.#announce('error', e.reason);
+    this.#announce('error', errorMessage(e.reason));
   };
 
   /**
@@ -355,9 +357,7 @@ export class Compiler {
       return await this.#compile(format, text, options);
     } catch (e) {
       // for on.log usage
-      const message = e instanceof Error ? e.message : e;
-
-      this.#announce('error', String(message));
+      this.#announce('error', errorMessage(e));
 
       // Don't hide errors!
       this.#error(e);

package/src/utils.errorMessage.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+
+import { errorMessage } from './utils.js';
+
+describe('errorMessage', () => {
+  it('handles non-object throwables', () => {
+    expect(errorMessage('boom')).toBe('boom');
+    expect(errorMessage(undefined)).toBe('undefined');
+    expect(errorMessage(null)).toBe('null');
+    expect(errorMessage(2)).toBe('2');
+  });
+
+  it('uses the message of a normal Error', () => {
+    expect(errorMessage(new Error('boom'))).toBe('boom');
+  });
+
+  it('falls back to String() for objects without message or source_code', () => {
+    expect(errorMessage({})).toBe('[object Object]');
+  });
+
+  it('includes the source_code of an SWC-style error (as thrown by content-tag)', () => {
+    /**
+     * Real shape from content-tag's `Preprocessor#process`:
+     * an Error with extra own properties: source_code, source_code_color
+     */
+    const swcError = Object.assign(new Error('Parse Error at dynamic-repl.js:1:9: 1:10'), {
+      source_code:
+        '  × Expression expected\n' +
+        '   ╭─[dynamic-repl.js:1:1]\n' +
+        ' 1 │ let y = ;\n' +
+        '   ·         ─\n' +
+        '   ╰────',
+    });
+
+    expect(errorMessage(swcError)).toMatchInlineSnapshot(`
+      "Parse Error at dynamic-repl.js:1:9: 1:10
+
+        × Expression expected
+         ╭─[dynamic-repl.js:1:1]
+       1 │ let y = ;
+         ·         ─
+         ╰────"
+    `);
+  });
+});

package/src/utils.js

@@ -39,3 +39,36 @@ export function prefix_tgz(url) {
 export function isRecord(x) {
   return typeof x === 'object' && x !== null && !Array.isArray(x);
 }
+
+/**
+ * Builds the most useful human-readable message from a thrown error.
+ *
+ * SWC (via content-tag) throws Errors whose `message` is only
+ * "Parse Error at <file>:<line>:<column>" — the explanation of what's
+ * wrong and the code-frame live on a non-standard `source_code` property
+ * (and `stack` is nothing but wasm frames).
+ *
+ * @param {unknown} error
+ * @returns {string}
+ */
+export function errorMessage(error) {
+  if (!isRecord(error)) {
+    return String(error);
+  }
+
+  const parts = [];
+
+  if ('message' in error && error.message) {
+    parts.push(String(error.message));
+  }
+
+  if ('source_code' in error && error.source_code) {
+    parts.push(String(error.source_code));
+  }
+
+  if (parts.length === 0) {
+    return String(error);
+  }
+
+  return parts.join('\n\n');
+}