build

docs/dist/App.js

@@ -1,14 +1,12 @@
-import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from "../_snowpack/pkg/react.js";
-import logo from "./logo.svg.proxy.js";
-import cx from "./cx.js";
+import React, {useCallback, useLayoutEffect, useRef} from "../_snowpack/pkg/react.js";
 import * as Tone from "../_snowpack/pkg/tone.js";
-import useCycle from "./useCycle.js";
-import * as tunes from "./tunes.js";
-import {evaluate} from "./evaluate.js";
 import CodeMirror from "./CodeMirror.js";
-import hot from "../hot.js";
-import {isNote} from "../_snowpack/pkg/tone.js";
+import cx from "./cx.js";
+import {evaluate} from "./evaluate.js";
+import logo from "./logo.svg.proxy.js";
 import {useWebMidi} from "./midi.js";
+import * as tunes from "./tunes.js";
+import useRepl from "./useRepl.js";
 const [_, codeParam] = window.location.href.split("#");
 let decoded;
 try {
@@ -16,11 +14,6 @@ try {
 } catch (err) {
   console.warn("failed to decode", err);
 }
-const getHotCode = async () => {
-  return fetch("/hot.js").then((res) => res.text()).then((src) => {
-    return src.split("export default").slice(-1)[0].trim();
-  });
-};
 const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination);
 defaultSynth.set({
   oscillator: {type: "triangle"},
@@ -35,76 +28,14 @@ function getRandomTune() {
 }
 const randomTune = getRandomTune();
 function App() {
-  const [code, setCode] = useState(decoded || randomTune);
-  const [activeCode, setActiveCode] = useState();
-  const [log, setLog] = useState("");
-  const logBox = useRef();
-  const [error, setError] = useState();
-  const [pattern, setPattern] = useState();
-  const [activePattern, setActivePattern] = useState();
-  const dirty = code !== activeCode;
-  const activateCode = (_code = code) => {
-    !cycle.started && cycle.start();
-    if (activeCode && !dirty) {
-      setError(void 0);
-      return;
-    }
-    try {
-      const parsed = evaluate(_code);
-      setPattern(() => parsed.pattern);
-      activatePattern(parsed.pattern);
-      setError(void 0);
-      setActiveCode(_code);
-    } catch (err) {
-      setError(err);
-    }
-  };
-  const activatePattern = (_pattern) => {
-    try {
-      setActivePattern(() => _pattern);
-      window.location.hash = "#" + encodeURIComponent(btoa(code));
-    } catch (err) {
-      setError(err);
-    }
-  };
-  const [isHot, setIsHot] = useState(false);
-  const pushLog = (message) => setLog((log2) => log2 + `${log2 ? "\n\n" : ""}${message}`);
-  const logCycle = (_events, cycle2) => {
-    if (_events.length) {
-      pushLog(`# cycle ${cycle2}
-` + _events.map((e) => e.show()).join("\n"));
-    }
-  };
-  const cycle = useCycle({
-    onEvent: useCallback((time, event) => {
-      try {
-        if (!event.value?.onTrigger) {
-          const note = event.value?.value || event.value;
-          if (!isNote(note)) {
-            throw new Error("not a note: " + note);
-          }
-          defaultSynth.triggerAttackRelease(note, event.duration, time);
-        } else {
-          const {onTrigger} = event.value;
-          onTrigger(time, event);
-        }
-      } catch (err) {
-        console.warn(err);
-        err.message = "unplayable event: " + err?.message;
-        pushLog(err.message);
-      }
-    }, []),
-    onQuery: useCallback((span) => {
-      try {
-        return activePattern?.query(span) || [];
-      } catch (err) {
-        setError(err);
-        return [];
-      }
-    }, [activePattern]),
-    onSchedule: useCallback((_events, cycle2) => logCycle(_events, cycle2), [activePattern]),
-    ready: !!activePattern
+  const {setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog} = useRepl({
+    tune: decoded || randomTune,
+    defaultSynth
   });
+  const logBox = useRef();
+  useLayoutEffect(() => {
+    logBox.current.scrollTop = logBox.current?.scrollHeight;
+  }, [log]);
   useLayoutEffect(() => {
     const handleKeyPress = (e) => {
       if (e.ctrlKey || e.altKey) {
@@ -121,22 +52,6 @@ function App() {
     document.addEventListener("keypress", handleKeyPress);
     return () => document.removeEventListener("keypress", handleKeyPress);
   }, [pattern, code]);
-  useEffect(() => {
-    if (isHot) {
-      if (typeof hot !== "string") {
-        getHotCode().then((_code) => {
-        });
-        activatePattern(hot);
-        return;
-      } else {
-        setCode(hot);
-        activateCode(hot);
-      }
-    }
-  }, [code, isHot]);
-  useLayoutEffect(() => {
-    logBox.current.scrollTop = logBox.current?.scrollHeight;
-  }, [log]);
   useWebMidi({
     ready: useCallback(({outputs}) => {
       pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(" | ")}) to the pattern. `);
@@ -168,15 +83,11 @@ function App() {
       console.log("tune", _code);
       setCode(_code);
       const parsed = evaluate(_code);
-      setActivePattern(parsed.pattern);
+      setPattern(parsed.pattern);
     }
-  }, "🎲 random tune"), window.location.href.includes("http://localhost:8080") && /* @__PURE__ */ React.createElement("button", {
-    onClick: () => {
-      if (isHot || confirm("Really switch? You might loose your current pattern..")) {
-        setIsHot((h) => !h);
-      }
-    }
-  }, "🔥 toggle hot mode"))), /* @__PURE__ */ React.createElement("section", {
+  }, "🎲 random tune"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
+    href: "./tutorial"
+  }, "📚 tutorial")))), /* @__PURE__ */ React.createElement("section", {
     className: "grow flex flex-col text-gray-100"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "grow relative"
@@ -184,32 +95,21 @@ function App() {
     className: cx("h-full  bg-[#2A3236]", error ? "focus:ring-red-500" : "focus:ring-slate-800")
   }, /* @__PURE__ */ React.createElement(CodeMirror, {
     value: code,
-    readOnly: isHot,
     options: {
       mode: "javascript",
       theme: "material",
       lineNumbers: true
     },
-    onChange: (_2, __, value) => {
-      if (!isHot) {
-        setCode(value);
-      }
-    }
+    onChange: (_2, __, value) => setCode(value)
   }), /* @__PURE__ */ React.createElement("span", {
     className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right"
   }, !cycle.started ? `press ctrl+enter to play
-` : !isHot && code !== activeCode ? `ctrl+enter to update
-` : "no changes\n", isHot && "🔥 hot mode: go to hot.js to edit pattern, then save")), error && /* @__PURE__ */ React.createElement("div", {
+` : dirty ? `ctrl+enter to update
+` : "no changes\n")), error && /* @__PURE__ */ React.createElement("div", {
     className: cx("absolute right-2 bottom-2", "text-red-500")
   }, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("button", {
     className: "flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
-    onClick: () => {
-      if (!cycle.started) {
-        activateCode();
-      } else {
-        cycle.stop();
-      }
-    }
+    onClick: () => togglePlay()
   }, cycle.started ? "pause" : "play"), /* @__PURE__ */ React.createElement("textarea", {
     className: "grow bg-[#283237] border-0 text-xs min-h-[200px]",
     value: log,