QUnit renderer

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;

packages/repl-sdk/src/compilers.js

@@ -2,6 +2,7 @@ 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 { qunit } from './compilers/qunit.js';
 import * as react from './compilers/react.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/
    */

packages/repl-sdk/src/compilers/qunit.js

@@ -0,0 +1,43 @@
+export const qunit = {
+  codemirror: {
+    lang: async () => {},
+  },
+  resolve: (id) => {
+    switch (id) {
+      case 'qunit':
+        return `https://esm.sh/[email protected]`;
+      case 'qunit.css':
+        return `https://cdn.jsdelivr.net/npm/[email protected]/qunit/qunit.min.css`;
+    }
+  },
+  compiler: async (config, api) => {
+    return {
+      compile: async (text, options) => {},
+      render: async (element, component, extras, compiler) => {
+        element.innerHTML = `
+          <div id="qunit"></div>
+          <div id="qunit-fixture"></div>
+          <link href="https://cdn.jsdelivr.net/npm/[email protected]/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?
+           * */
+        };
+      },
+    };
+  },
+};