MicroRepl poc

2026-08-02 21:52:32 -04:00 · 2023-12-15 22:23:20 +01:00
parent 8e35079fd1
commit 93e8186388
6 changed files with 206 additions and 5 deletions
@@ -0,0 +1,38 @@
+export function Icon({ type }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+      {
+        {
+          refresh: (
+            <path
+              fillRule="evenodd"
+              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+              clipRule="evenodd"
+            />
+          ),
+          play: (
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+              clipRule="evenodd"
+            />
+          ),
+          pause: (
+            <path
+              fillRule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          ),
+          stop: (
+            <path
+              fillRule="evenodd"
+              d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm5-2.25A.75.75 0 017.75 7h4.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75h-4.5a.75.75 0 01-.75-.75v-4.5z"
+              clipRule="evenodd"
+            />
+          ),
+        }[type]
+      }
+    </svg>
+  );
+}
@@ -0,0 +1,91 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Icon } from './Icon';
+
+export function MicroRepl({ code, hideHeader = false }) {
+  /* const [ref, isVisible] = useInView({
+    threshold: 0.01,
+  }); */
+  const [replState, setReplState] = useState({});
+  const { started, isDirty, error } = replState;
+  const wc = useRef();
+  function togglePlay() {
+    if (wc.current) {
+      wc.current?.editor.evaluate();
+    }
+  }
+  const listener = useCallback((e) => setReplState({ ...e.detail }), []);
+  useEffect(() => {
+    return () => {
+      wc.current.removeEventListener('update', listener);
+    };
+  }, []);
+  return (
+    <div
+      className="overflow-hidden rounded-t-md bg-background border border-lineHighlight"
+      //ref={ref}
+    >
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => togglePlay()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => activateCode()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className="overflow-auto relative">
+        <strudel-editor
+          is-line-numbers-displayed="0"
+          code={code}
+          ref={(el) => {
+            if (wc.current) {
+              return;
+            }
+            wc.current = el;
+            el.addEventListener('update', listener);
+          }}
+        ></strudel-editor>
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
+      </div>
+      {/* punchcard && (
+      <canvas
+        id={canvasId}
+        className="w-full pointer-events-none"
+        height={canvasHeight}
+        ref={(el) => {
+          if (el && el.width !== el.clientWidth) {
+            el.width = el.clientWidth;
+          }
+        }}
+      ></canvas>
+    ) */}
+      {/* !!log.length && (
+      <div className="bg-gray-800 rounded-md p-2">
+        {log.map(({ message }, i) => (
+          <div key={i}>{message}</div>
+        ))}
+      </div>
+    ) */}
+    </div>
+  );
+}
+
+function cx(...classes) {
+  // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}