From 2084b30f5f149fbe1b23e9fade5c07b6a44173ad Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sun, 19 Oct 2025 19:25:19 -0400
Subject: [PATCH 1/2] Begin QUnit renderer

---
 packages/repl-sdk/src/compilers.js       |  5 +++++
 packages/repl-sdk/src/compilers/qunit.js | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 packages/repl-sdk/src/compilers/qunit.js

diff --git a/packages/repl-sdk/src/compilers.js b/packages/repl-sdk/src/compilers.js
index efabc1a4a..ebcc09206 100644
--- a/packages/repl-sdk/src/compilers.js
+++ b/packages/repl-sdk/src/compilers.js
@@ -3,6 +3,7 @@ import { js } from './compilers/js.js';
 import * as markdown from './compilers/markdown.js';
 import { mermaid } from './compilers/mermaid.js';
 import * as react from './compilers/react.js';
+import { qunit } from './compilers/qunit.js';
 import { svelte } from './compilers/svelte.js';
 import { vue } from './compilers/vue.js';
 
@@ -97,6 +98,10 @@ export const compilers = {
    * https://mermaid.js.org/
    */
   mermaid,
+  /**
+   * https://qunitjs.com/
+   */
+  qunit,
   /**
    * https://svelte.dev/
    */
diff --git a/packages/repl-sdk/src/compilers/qunit.js b/packages/repl-sdk/src/compilers/qunit.js
new file mode 100644
index 000000000..8ba204c42
--- /dev/null
+++ b/packages/repl-sdk/src/compilers/qunit.js
@@ -0,0 +1,19 @@
+export const qunit = {
+  codemirror: {
+    lang: async () => {},
+  },
+  resolve: (id) => {
+    switch (id) {
+      case 'qunit':
+        return `https://esm.sh/qunit@3.0.0-alpha.4`;
+      case 'qunit.css':
+        return `https://cdn.jsdelivr.net/npm/qunit@2.24.2/qunit/qunit.min.css`;
+    }
+  },
+  compiler: async (config, api) => {
+    return {
+      compile: async (text, options) => {},
+      render: async (element, component, extras, compiler) => {},
+    };
+  },
+};

From 072a127263687b6460b361ed481be57bc6630888 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sun, 19 Oct 2025 20:22:24 -0400
Subject: [PATCH 2/2] Questions need answered before proceeding -- APIs are
 needed before proceeding

---
 packages/repl-sdk/example/samples.js     |  9 ++++++++
 packages/repl-sdk/src/compilers.js       |  2 +-
 packages/repl-sdk/src/compilers/qunit.js | 26 +++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/repl-sdk/example/samples.js b/packages/repl-sdk/example/samples.js
index 03186c623..9ad3a2d0b 100644
--- a/packages/repl-sdk/example/samples.js
+++ b/packages/repl-sdk/example/samples.js
@@ -1,3 +1,12 @@
+export const qunit = `
+import { module, test } from 'qunit';
+
+module('Suite name', function () {
+  test('test name', function (assert) {
+    assert.strictEqual(2, 2, '2 === 2');
+  });
+}); 
+`;
 export const mermaid = `
 graph TD;
   A-->B;
diff --git a/packages/repl-sdk/src/compilers.js b/packages/repl-sdk/src/compilers.js
index ebcc09206..78dc36952 100644
--- a/packages/repl-sdk/src/compilers.js
+++ b/packages/repl-sdk/src/compilers.js
@@ -2,8 +2,8 @@ import * as ember from './compilers/ember.js';
 import { js } from './compilers/js.js';
 import * as markdown from './compilers/markdown.js';
 import { mermaid } from './compilers/mermaid.js';
-import * as react from './compilers/react.js';
 import { qunit } from './compilers/qunit.js';
+import * as react from './compilers/react.js';
 import { svelte } from './compilers/svelte.js';
 import { vue } from './compilers/vue.js';
 
diff --git a/packages/repl-sdk/src/compilers/qunit.js b/packages/repl-sdk/src/compilers/qunit.js
index 8ba204c42..499654541 100644
--- a/packages/repl-sdk/src/compilers/qunit.js
+++ b/packages/repl-sdk/src/compilers/qunit.js
@@ -13,7 +13,31 @@ export const qunit = {
   compiler: async (config, api) => {
     return {
       compile: async (text, options) => {},
-      render: async (element, component, extras, compiler) => {},
+      render: async (element, component, extras, compiler) => {
+        element.innerHTML = `
+          <div id="qunit"></div>
+          <div id="qunit-fixture"></div>
+          <link href="https://cdn.jsdelivr.net/npm/qunit@2.23.1/qunit/qunit.min.css " rel="stylesheet">
+          <style>
+             [data-test-compiled-output] {
+               padding: 0 !important;
+             }
+             #qunit {
+               position: static;
+             }
+          </styl>
+        `;
+
+        requestAnimationFrame(() => {
+          globalThis.QUnit.start();
+        });
+
+        return () => {
+          /* How do we cleanup?
+           * - Can we assure than cleanup happens before the next completion of render?
+           * */
+        };
+      },
     };
   },
 };