webR 0.1.0 release post

layouts/shortcodes/webr-editor.html

@@ -0,0 +1,78 @@
+<button class="btn btn-default btn-webr" disabled type="button"  id="webr-run-button-{{ .Ordinal }}">Loading webR...</button>
+<div id="webr-editor-{{ .Ordinal }}"></div>
+<div id="webr-code-output-{{ .Ordinal }}"><pre style="visibility: hidden"></pre></div>
+<script type="module">
+  const runButton = document.getElementById('webr-run-button-{{ .Ordinal }}');
+  const outputDiv = document.getElementById('webr-code-output-{{ .Ordinal }}');
+  const editorDiv = document.getElementById('webr-editor-{{ .Ordinal }}');
+
+  const editor = CodeMirror((elt) => {
+    elt.style.border = '1px solid #eee';
+    elt.style.height = 'auto';
+    editorDiv.append(elt);
+  },{
+    value: `{{ .Get "code" | safeJS }}`,
+    lineNumbers: true,
+    mode: 'r',
+    theme: 'light default',
+    viewportMargin: Infinity,
+  });
+
+  runButton.onclick = async () => {
+    runButton.disabled = true;
+    let canvas = undefined;
+    await globalThis.webR.init();
+    await webR.evalRVoid('canvas(width={{ .Get "width" | safeJS }}, height={{ .Get "height" | safeJS }})');
+    const result = await webRCodeShelter.captureR(editor.getValue(), {
+      withAutoprint: true,
+      captureStreams: true,
+      captureConditions: false,
+      env: webR.objs.emptyEnv,
+    });
+    try {
+      await webR.evalRVoid("dev.off()");
+      const out = result.output.filter(
+        evt => evt.type == 'stdout' || evt.type == 'stderr'
+      ).map((evt) => evt.data).join('\n');
+
+      const msgs = await webR.flush();
+      msgs.forEach(msg => {
+        if (msg.type === 'canvasExec'){
+          if (!canvas) {
+            canvas = document.createElement('canvas');
+            canvas.setAttribute('width', 2 * {{ .Get "width" | safeJS }});
+            canvas.setAttribute('height', 2 * {{ .Get "height" | safeJS }});
+            canvas.style.width="700px";
+            canvas.style.display="block";
+            canvas.style.margin="auto";
+          }
+          Function(`this.getContext('2d').${msg.data}`).bind(canvas)();
+        }
+      });
+
+      outputDiv.innerHTML = '';
+      const pre = document.createElement("pre");
+      if (/\S/.test(out)) {
+        const code = document.createElement("code");
+        code.innerText = out;
+        pre.appendChild(code);
+      } else {
+        pre.style.visibility = 'hidden';
+      }
+      outputDiv.appendChild(pre);
+
+      if (canvas) {
+        const p = document.createElement("p");
+        p.appendChild(canvas);
+        outputDiv.appendChild(p);
+      }
+    } finally {
+      webRCodeShelter.purge();
+      runButton.disabled = false;
+    }
+  }
+
+  await globalThis.webR.init();
+  runButton.innerText = 'Run code';
+  runButton.disabled = false;
+</script>

layouts/shortcodes/webr-init.html

@@ -0,0 +1,21 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
+<style>
+  .CodeMirror pre {
+    background-color: unset !important;
+  }
+  .btn-webr {
+    background-color: #EEEEEE;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+</style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/r/r.js"></script>
+<script type="module">
+  import { WebR } from 'https://webr.r-wasm.org/v0.1.0/webr.mjs';
+  globalThis.webR = new WebR({
+    SW_URL: '/'
+  });
+  await globalThis.webR.init();
+  globalThis.webRCodeShelter = await new globalThis.webR.Shelter();
+</script>

static/webr-serviceworker.js

@@ -0,0 +1 @@
+importScripts('https://webr.r-wasm.org/v0.1.0/webr-serviceworker.js');

static/webr-worker.js

@@ -0,0 +1 @@
+importScripts('https://webr.r-wasm.org/v0.1.0/webr-worker.js');