fix build

.gitignore

@@ -1,4 +1,5 @@
 dist
+!docs/dist
 dist-*
 cabal-dev
 *.o

docs/dist/App.js

@@ -0,0 +1,85 @@
+import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from "../_snowpack/pkg/react.js";
+import logo from "./logo.svg.proxy.js";
+import * as strudel from "../_snowpack/link/strudel.js";
+import cx from "./cx.js";
+import * as Tone from "../_snowpack/pkg/tone.js";
+import useCycle from "./useCycle.js";
+const {Fraction, TimeSpan} = strudel;
+const fr = (v) => new Fraction(v);
+const ts = (start, end) => new TimeSpan(fr(start), fr(end));
+const parse = (code) => {
+  const {sequence, stack, pure, slowcat, slow} = strudel;
+  return eval(code);
+};
+const synth = new Tone.Synth().toDestination();
+function App() {
+  const [code, setCode] = useState("slow(sequence('c3', 'eb3', sequence('g3', 'f3')), 'g3')");
+  const [log, setLog] = useState("");
+  const logBox = useRef();
+  const [error, setError] = useState();
+  const [pattern, setPattern] = useState();
+  const logCycle = (_events, cycle2) => {
+    if (_events.length) {
+      setLog((log2) => log2 + `${log2 ? "\n\n" : ""}# cycle ${cycle2}
+` + _events.map((e) => e.show()).join("\n"));
+    }
+  };
+  const cycle = useCycle({
+    onEvent: useCallback((time, event) => {
+      synth.triggerAttackRelease(event.value, event.duration, time);
+    }, []),
+    onQuery: useCallback((span) => pattern?.query(span) || [], [pattern]),
+    onSchedule: useCallback((_events, cycle2) => {
+      logCycle(_events, cycle2);
+    }, [pattern]),
+    ready: !!pattern
+  });
+  useEffect(() => {
+    try {
+      const _pattern = parse(code);
+      setPattern(_pattern);
+      setError(void 0);
+    } catch (err) {
+      setError(err);
+    }
+  }, [code]);
+  useLayoutEffect(() => {
+    logBox.current.scrollTop = logBox.current?.scrollHeight;
+  }, [log]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "h-[100vh] bg-slate-900 flex-row"
+  }, /* @__PURE__ */ React.createElement("header", {
+    className: "px-2 flex items-center space-x-2 border-b border-gray-200 bg-white"
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: logo,
+    className: "Tidal-logo w-16 h-16",
+    alt: "logo"
+  }), /* @__PURE__ */ React.createElement("h1", {
+    className: "text-2xl"
+  }, "Strudel REPL")), /* @__PURE__ */ React.createElement("section", {
+    className: "grow p-2 text-gray-100"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "absolute right-2 bottom-2 text-red-500"
+  }, error?.message), /* @__PURE__ */ React.createElement("textarea", {
+    className: cx("w-full h-32 bg-slate-600", error ? "focus:ring-red-500" : "focus:ring-slate-800"),
+    value: code,
+    onChange: (e) => {
+      setLog((log2) => log2 + `${log2 ? "\n\n" : ""}✏️ edit
+${code}
+${e.target.value}`);
+      setCode(e.target.value);
+    }
+  })), /* @__PURE__ */ React.createElement("textarea", {
+    className: "w-full h-64 bg-slate-600",
+    value: log,
+    readOnly: true,
+    ref: logBox,
+    style: {fontFamily: "monospace"}
+  }), /* @__PURE__ */ React.createElement("button", {
+    className: "w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
+    onClick: () => cycle.toggle()
+  }, cycle.started ? "pause" : "play")));
+}
+export default App;

docs/dist/cx.js

@@ -0,0 +1,3 @@
+export default function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}

docs/dist/index.js

@@ -0,0 +1,10 @@
+import * as __SNOWPACK_ENV__ from '../_snowpack/env.js';
+import.meta.env = __SNOWPACK_ENV__;
+
+import React from "../_snowpack/pkg/react.js";
+import ReactDOM from "../_snowpack/pkg/react-dom.js";
+import App from "./App.js";
+ReactDOM.render(/* @__PURE__ */ React.createElement(React.StrictMode, null, /* @__PURE__ */ React.createElement(App, null)), document.getElementById("root"));
+if (undefined /* [snowpack] import.meta.hot */ ) {
+  undefined /* [snowpack] import.meta.hot */ .accept();
+}

docs/dist/logo.svg.proxy.js

@@ -0,0 +1 @@
+export default "/strudel/dist/logo.svg";

docs/dist/useCycle.js

@@ -0,0 +1,51 @@
+import {useEffect, useState} from "../_snowpack/pkg/react.js";
+import * as Tone from "../_snowpack/pkg/tone.js";
+import {TimeSpan} from "../_snowpack/link/strudel.js";
+function useCycle(props) {
+  const {onEvent, onQuery, onSchedule, ready = true} = props;
+  const [started, setStarted] = useState(false);
+  const cycleDuration = 1;
+  const activeCycle = () => Math.floor(Tone.Transport.seconds / cycleDuration);
+  const query = (cycle = activeCycle()) => {
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    const _events = onQuery?.(timespan) || [];
+    onSchedule?.(_events, cycle);
+    schedule(_events, cycle);
+  };
+  const schedule = (events, cycle = activeCycle()) => {
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    const cancelFrom = timespan.begin.valueOf();
+    Tone.Transport.cancel(cancelFrom);
+    const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
+    Tone.Transport.schedule(() => {
+      query(cycle + 1);
+    }, queryNextTime);
+    events?.forEach((event) => {
+      Tone.Transport.schedule((time) => {
+        const toneEvent = {
+          time: event.part.begin.valueOf(),
+          duration: event.part.end.valueOf() - event.part.begin.valueOf(),
+          value: event.value
+        };
+        onEvent(time, toneEvent);
+      }, event.part.begin.valueOf());
+    });
+  };
+  useEffect(() => {
+    ready && query();
+  }, [onEvent, onSchedule, onQuery]);
+  const start = async () => {
+    console.log("start");
+    setStarted(true);
+    await Tone.start();
+    Tone.Transport.start("+0.1");
+  };
+  const stop = () => {
+    console.log("stop");
+    setStarted(false);
+    Tone.Transport.pause();
+  };
+  const toggle = () => started ? stop() : start();
+  return {start, stop, onEvent, started, toggle, schedule, query, activeCycle};
+}
+export default useCycle;

docs/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="/global.css" />
+    <link rel="icon" href="/strudel/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="/strudel/global.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Strudel REPL" />
     <title>Strudel REPL</title>
@@ -11,6 +11,6 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/dist/index.js"></script>
+    <script type="module" src="/strudel/dist/index.js"></script>
   </body>
 </html>

repl/public/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="/global.css" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/global.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Strudel REPL" />
     <title>Strudel REPL</title>
@@ -11,6 +11,6 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="/dist/index.js"></script>
+    <script type="module" src="%PUBLIC_URL%/dist/index.js"></script>
   </body>
 </html>

repl/snowpack.config.mjs

@@ -35,5 +35,6 @@ export default {
   buildOptions: {
     /* ... */
     out: '../docs',
+    baseUrl: '/strudel',
   },
 };