basic react package

2026-01-11 13:48:40 +00:00 · 2022-05-14 20:27:05 +02:00 · 2022-05-14 20:27:05 +02:00 · 0d63ec9146
commit 0d63ec9146
parent 9588272639
20 changed files with 977 additions and 0 deletions
--- a/packages/react/.gitignore
+++ b/packages/react/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/packages/react/README.md
+++ b/packages/react/README.md
@ -0,0 +1,2 @@
+- use react 17
+- make sure @codemirror/state is installed once (single version)
--- a/packages/react/index.html
+++ b/packages/react/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/packages/react/package.json
+++ b/packages/react/package.json
@ -0,0 +1,23 @@
+{
+  "name": "@strudel.cycles/react",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "^0.19.0",
+    "react": "^17.0.2",
+    "react-codemirror6": "^1.1.0",
+    "react-dom": "^17.0.2",
+    "react-hook-inview": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@vitejs/plugin-react": "^1.3.0",
+    "vite": "^2.9.9"
+  }
+}
--- a/packages/react/src/App.css
+++ b/packages/react/src/App.css
@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
--- a/packages/react/src/App.jsx
+++ b/packages/react/src/App.jsx
@ -0,0 +1,47 @@
+import { useState } from 'react'
+import logo from './logo.svg'
+import './App.css'
+import MiniRepl from './components/MiniRepl'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <MiniRepl tune={`"c3"`}/>
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>Hello Vite + React!</p>
+        <p>
+          <button type="button" onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.jsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@ -0,0 +1,169 @@
+import React from 'react';
+import { CodeMirror as _CodeMirror } from 'react-codemirror6';
+// import { CodeMirrorLite as _CodeMirror } from 'react-codemirror6/dist/lite';
+import { EditorView, Decoration } from '@codemirror/view';
+import { StateField, StateEffect } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+// import { materialPalenight } from 'codemirror6-themes';
+import { materialPalenight } from '../themes/material-palenight';
+
+export const setHighlights = StateEffect.define();
+const highlightField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(highlights, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setHighlights)) {
+          highlights = Decoration.set(
+            e.value
+              .flatMap((hap) =>
+                (hap.context.locations || []).map(({ start, end }) => {
+                  const color = hap.context.color || '#FFCA28';
+                  let from = tr.newDoc.line(start.line).from + start.column;
+                  let to = tr.newDoc.line(end.line).from + end.column;
+                  const l = tr.newDoc.length;
+                  if (from > l || to > l) {
+                    return; // dont mark outside of range, as it will throw an error
+                  }
+                  const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
+                  return mark.range(from, to);
+                }),
+              )
+              .filter(Boolean),
+            true,
+          );
+        }
+      }
+      return highlights;
+    } catch (err) {
+      // console.warn('highlighting error', err);
+      return highlights;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) {
+  return (
+    <>
+      <_CodeMirror
+        onViewChange={onViewChanged}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: '1 0 auto',
+        }}
+        value={value}
+        onChange={onChange}
+        extensions={[
+          javascript(),
+          materialPalenight,
+          highlightField,
+          // theme, language, ...
+        ]}
+      />
+    </>
+  );
+}
+
+let parenMark;
+export const markParens = (editor, data) => {
+  const v = editor.getDoc().getValue();
+  const marked = getCurrentParenArea(v, data);
+  parenMark?.clear();
+  parenMark = editor.getDoc().markText(...marked, { css: 'background-color: #00007720' }); //
+};
+
+// returns { line, ch } from absolute character offset
+export function offsetToPosition(offset, code) {
+  const lines = code.split('\n');
+  let line = 0;
+  let ch = 0;
+  for (let i = 0; i < offset; i++) {
+    if (ch === lines[line].length) {
+      line++;
+      ch = 0;
+    } else {
+      ch++;
+    }
+  }
+  return { line, ch };
+}
+
+// returns absolute character offset from { line, ch }
+export function positionToOffset(position, code) {
+  const lines = code.split('\n');
+  if (position.line > lines.length) {
+    // throw new Error('positionToOffset: position.line > lines.length');
+    return 0;
+  }
+  let offset = 0;
+  for (let i = 0; i < position.line; i++) {
+    offset += lines[i].length + 1;
+  }
+  offset += position.ch;
+  return offset;
+}
+
+// given code and caret position, the functions returns the indices of the parens we are in
+export function getCurrentParenArea(code, caretPosition) {
+  const caret = positionToOffset(caretPosition, code);
+  let open, i, begin, end;
+  // walk left
+  i = caret;
+  open = 0;
+  while (i > 0) {
+    if (code[i - 1] === '(') {
+      open--;
+    } else if (code[i - 1] === ')') {
+      open++;
+    }
+    if (open === -1) {
+      break;
+    }
+    i--;
+  }
+  begin = i;
+  // walk right
+  i = caret;
+  open = 0;
+  while (i < code.length) {
+    if (code[i] === '(') {
+      open--;
+    } else if (code[i] === ')') {
+      open++;
+    }
+    if (open === 1) {
+      break;
+    }
+    i++;
+  }
+  end = i;
+  return [begin, end].map((o) => offsetToPosition(o, code));
+}
+
+/* 
+export const markEvent = (editor) => (time, event) => {
+  const locs = event.context.locations;
+  if (!locs || !editor) {
+    return;
+  }
+  const col = event.context?.color || '#FFCA28';
+  // mark active event
+  const marks = locs.map(({ start, end }) =>
+    editor.getDoc().markText(
+      { line: start.line - 1, ch: start.column },
+      { line: end.line - 1, ch: end.column },
+      //{ css: 'background-color: #FFCA28; color: black' } // background-color is now used by parent marking
+      { css: 'outline: 1px solid ' + col + '; box-sizing:border-box' },
+      //{ css: `background-color: ${col};border-radius:5px` },
+    ),
+  );
+  //Tone.Transport.schedule(() => { // problem: this can be cleared by scheduler...
+  setTimeout(() => {
+    marks.forEach((mark) => mark.clear());
+    // }, '+' + event.duration * 0.5);
+  }, event.duration * 1000);
+}; */
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import useRepl from '../hooks/useRepl.mjs';
+import cx from '../cx';
+import useHighlighting from '../hooks/useHighlighting.mjs';
+import { useInView } from 'react-hook-inview';
+
+// eval stuff start
+import { extend } from '@strudel.cycles/eval';
+import * as strudel from '@strudel.cycles/core';
+import gist from '@strudel.cycles/core/gist.js';
+import { mini } from '@strudel.cycles/mini/mini.mjs';
+import { Tone } from '@strudel.cycles/tone';
+import * as toneHelpers from '@strudel.cycles/tone/tone.mjs';
+import * as voicingHelpers from '@strudel.cycles/tonal/voicings.mjs';
+import * as uiHelpers from '@strudel.cycles/tone/ui.mjs';
+import * as drawHelpers from '@strudel.cycles/tone/draw.mjs';
+import euclid from '@strudel.cycles/core/euclid.mjs';
+import '@strudel.cycles/tone/tone.mjs';
+import '@strudel.cycles/midi/midi.mjs';
+import '@strudel.cycles/tonal/voicings.mjs';
+import '@strudel.cycles/tonal/tonal.mjs';
+import '@strudel.cycles/xen/xen.mjs';
+import '@strudel.cycles/xen/tune.mjs';
+import '@strudel.cycles/core/euclid.mjs';
+import '@strudel.cycles/tone/pianoroll.mjs';
+import '@strudel.cycles/tone/draw.mjs';
+import CodeMirror6 from './CodeMirror6';
+
+extend(Tone, strudel, strudel.Pattern.prototype.bootstrap(), toneHelpers, voicingHelpers, drawHelpers, uiHelpers, {
+  gist,
+  euclid,
+  mini,
+  Tone,
+});
+// eval stuff end
+
+const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({
+  oscillator: { type: 'triangle' },
+  envelope: {
+    release: 0.01,
+  },
+});
+
+// "balanced" | "interactive" | "playback";
+// Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
+function MiniRepl({ tune, maxHeight = 500 }){
+  const { code, setCode, pattern, activateCode, error, cycle, dirty, togglePlay } = useRepl({
+    tune,
+    defaultSynth,
+    autolink: false,
+  });
+  const lines = code.split('\n').length;
+  const [view, setView] = useState();
+  const [ref, isVisible] = useInView({
+    threshold: 0.01,
+  });
+  useHighlighting({ view, pattern, active: cycle.started });
+  return (
+    <div className="rounded-md overflow-hidden bg-[#444C57]" ref={ref}>
+      <div className="flex justify-between bg-slate-700 border-t border-slate-500">
+        <div className="flex">
+          <button
+            className={cx(
+              'w-16 flex items-center justify-center p-1 bg-slate-700 border-r border-slate-500  text-white hover:bg-slate-600',
+              cycle.started ? 'animate-pulse' : '',
+            )}
+            onClick={() => togglePlay()}
+          >
+            {!cycle.started ? (
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <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"
+                />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <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"
+                />
+              </svg>
+            )}
+          </button>
+          <button
+            className={cx(
+              'w-16 flex items-center justify-center p-1 border-slate-500  hover:bg-slate-600',
+              dirty
+                ? 'bg-slate-700 border-r border-slate-500 text-white'
+                : 'bg-slate-600 text-slate-400 cursor-not-allowed',
+            )}
+            onClick={() => activateCode()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <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"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="text-right p-1 text-sm">{error && <span className="text-red-200">{error.message}</span>}</div>{' '}
+      </div>
+      <div className="flex space-y-0 overflow-auto relative">
+        {isVisible && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
+      </div>
+      {/* <div className="bg-slate-700 border-t border-slate-500 content-right pr-2 text-right">
+        <a href={`https://strudel.tidalcycles.org/#${hash}`} className="text-white items-center inline-flex">
+          <span>open in REPL</span>
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+            <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+          </svg>
+        </a>
+      </div> */}
+    </div>
+  );
+}
+
+export default MiniRepl;
--- a/packages/react/src/cx.js
+++ b/packages/react/src/cx.js
@ -0,0 +1,9 @@
+/*
+cx.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/cx.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export default function cx(...classes) { // : Array<string | undefined>
+  return classes.filter(Boolean).join(' ');
+}
--- a/packages/react/src/favicon.svg
+++ b/packages/react/src/favicon.svg
@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/packages/react/src/hooks/useCycle.mjs
+++ b/packages/react/src/hooks/useCycle.mjs
@ -0,0 +1,86 @@
+/*
+useCycle.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useCycle.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useEffect, useState } from 'react';
+import { Tone } from '@strudel.cycles/tone';
+import { State, TimeSpan } from '@strudel.cycles/core';
+
+/* export declare interface UseCycleProps {
+  onEvent: ToneEventCallback<any>;
+  onQuery?: (state: State) => Hap[];
+  onSchedule?: (events: Hap[], cycle: number) => void;
+  onDraw?: ToneEventCallback<any>;
+  ready?: boolean; // if false, query will not be called on change props
+} */
+
+// function useCycle(props: UseCycleProps) {
+function useCycle(props) {
+  // onX must use useCallback!
+  const { onEvent, onQuery, onSchedule, ready = true, onDraw } = props;
+  const [started, setStarted] = useState(false);
+  const cycleDuration = 1;
+  const activeCycle = () => Math.floor(Tone.getTransport().seconds / cycleDuration);
+
+  // pull events with onQuery + count up to next cycle
+  const query = (cycle = activeCycle()) => {
+    const timespan = new TimeSpan(cycle, cycle + 1);
+    const events = onQuery?.(new State(timespan)) || [];
+    onSchedule?.(events, cycle);
+    // cancel events after current query. makes sure no old events are player for rescheduled cycles
+    // console.log('schedule', cycle);
+    // query next cycle in the middle of the current
+    const cancelFrom = timespan.begin.valueOf();
+    Tone.getTransport().cancel(cancelFrom);
+    // const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
+    const queryNextTime = (cycle + 1) * cycleDuration - 0.5;
+
+    // if queryNextTime would be before current time, execute directly (+0.1 for safety that it won't miss)
+    const t = Math.max(Tone.getTransport().seconds, queryNextTime) + 0.1;
+    Tone.getTransport().schedule(() => {
+      query(cycle + 1);
+    }, t);
+
+    // schedule events for next cycle
+    events
+      ?.filter((event) => event.part.begin.equals(event.whole?.begin))
+      .forEach((event) => {
+        Tone.getTransport().schedule((time) => {
+          onEvent(time, event, Tone.getContext().currentTime);
+          Tone.Draw.schedule(() => {
+            // do drawing or DOM manipulation here
+            onDraw?.(time, event);
+          }, time);
+        }, event.part.begin.valueOf());
+      });
+  };
+
+  useEffect(() => {
+    ready && query();
+  }, [onEvent, onSchedule, onQuery, onDraw, ready]);
+
+  const start = async () => {
+    setStarted(true);
+    await Tone.start();
+    Tone.getTransport().start('+0.1');
+  };
+  const stop = () => {
+    Tone.getTransport().pause();
+    setStarted(false);
+  };
+  const toggle = () => (started ? stop() : start());
+  return {
+    start,
+    stop,
+    onEvent,
+    started,
+    setStarted,
+    toggle,
+    query,
+    activeCycle,
+  };
+}
+
+export default useCycle;
--- a/packages/react/src/hooks/useHighlighting.mjs
+++ b/packages/react/src/hooks/useHighlighting.mjs
@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { setHighlights } from '../components/CodeMirror6';
+import { Tone } from '@strudel.cycles/tone';
+
+let highlights = []; // actively highlighted events
+let lastEnd;
+
+function useHighlighting({ view, pattern, active }) {
+  useEffect(() => {
+    if (view) {
+      if (pattern && active) {
+        let frame = requestAnimationFrame(updateHighlights);
+
+        function updateHighlights() {
+          try {
+            const audioTime = Tone.getTransport().seconds;
+            const span = [lastEnd || audioTime, audioTime + 1 / 60];
+            lastEnd = audioTime + 1 / 60;
+            highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
+            const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
+            highlights = highlights.concat(haps); // add potential new onsets
+            view.dispatch({ effects: setHighlights.of(highlights) }); // highlight all still active + new active haps
+          } catch (err) {
+            // console.log('error in updateHighlights', err);
+            view.dispatch({ effects: setHighlights.of([]) });
+          }
+          frame = requestAnimationFrame(updateHighlights);
+        }
+
+        return () => {
+          cancelAnimationFrame(frame);
+        };
+      } else {
+        highlights = [];
+        view.dispatch({ effects: setHighlights.of([]) });
+      }
+    }
+  }, [pattern, active, view]);
+}
+
+export default useHighlighting;
--- a/packages/react/src/hooks/usePostMessage.mjs
+++ b/packages/react/src/hooks/usePostMessage.mjs
@ -0,0 +1,17 @@
+/*
+usePostMessage.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/usePostMessage.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useEffect, useCallback } from 'react';
+
+function usePostMessage(listener) {
+  useEffect(() => {
+    window.addEventListener('message', listener);
+    return () => window.removeEventListener('message', listener);
+  }, [listener]);
+  return useCallback((data) => window.postMessage(data, '*'), []);
+}
+
+export default usePostMessage;
--- a/packages/react/src/hooks/useRepl.mjs
+++ b/packages/react/src/hooks/useRepl.mjs
@ -0,0 +1,157 @@
+/*
+useRepl.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useRepl.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useCallback, useState, useMemo } from 'react';
+import { evaluate } from '@strudel.cycles/eval';
+import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
+import useCycle from './useCycle.mjs';
+import usePostMessage from './usePostMessage.mjs';
+
+let s4 = () => {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+};
+const generateHash = (code) => encodeURIComponent(btoa(code));
+
+function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawProp }) {
+  const id = useMemo(() => s4(), []);
+  const [code, setCode] = useState(tune);
+  const [activeCode, setActiveCode] = useState();
+  const [log, setLog] = useState('');
+  const [error, setError] = useState();
+  const [pending, setPending] = useState(false);
+  const [hash, setHash] = useState('');
+  const [pattern, setPattern] = useState();
+  const dirty = useMemo(() => code !== activeCode || error, [code, activeCode, error]);
+  const pushLog = useCallback((message) => setLog((log) => log + `${log ? '\n\n' : ''}${message}`), []);
+
+  // below block allows disabling the highlighting by including "strudel disable-highlighting" in the code (as comment)
+  const onDraw = useMemo(() => {
+    if (activeCode && !activeCode.includes('strudel disable-highlighting')) {
+      return (time, event) => onDrawProp?.(time, event, activeCode);
+    }
+  }, [activeCode, onDrawProp]);
+
+  // cycle hook to control scheduling
+  const cycle = useCycle({
+    onDraw,
+    onEvent: useCallback(
+      (time, event, currentTime) => {
+        try {
+          onEvent?.(event);
+          if (event.context.logs?.length) {
+            event.context.logs.forEach(pushLog);
+          }
+          const { onTrigger, velocity } = event.context;
+          if (!onTrigger) {
+            if (defaultSynth) {
+              const note = getPlayableNoteValue(event);
+              defaultSynth.triggerAttackRelease(note, event.duration.valueOf(), time, velocity);
+            } else {
+              throw new Error('no defaultSynth passed to useRepl.');
+            }
+            /* console.warn('no instrument chosen', event);
+          throw new Error(`no instrument chosen for ${JSON.stringify(event)}`); */
+          } else {
+            onTrigger(time, event, currentTime);
+          }
+        } catch (err) {
+          console.warn(err);
+          err.message = 'unplayable event: ' + err?.message;
+          pushLog(err.message); // not with setError, because then we would have to setError(undefined) on next playable event
+        }
+      },
+      [onEvent, pushLog, defaultSynth],
+    ),
+    onQuery: useCallback(
+      (state) => {
+        try {
+          return pattern?.query(state) || [];
+        } catch (err) {
+          console.warn(err);
+          err.message = 'query error: ' + err.message;
+          setError(err);
+          return [];
+        }
+      },
+      [pattern],
+    ),
+    onSchedule: useCallback((_events, cycle) => logCycle(_events, cycle), []),
+    ready: !!pattern && !!activeCode,
+  });
+
+  const broadcast = usePostMessage(({ data: { from, type } }) => {
+    if (type === 'start' && from !== id) {
+      // console.log('message', from, type);
+      cycle.setStarted(false);
+      setActiveCode(undefined);
+    }
+  });
+
+  const activateCode = useCallback(
+    async (_code = code) => {
+      if (activeCode && !dirty) {
+        setError(undefined);
+        cycle.start();
+        return;
+      }
+      try {
+        setPending(true);
+        const parsed = await evaluate(_code);
+        cycle.start();
+        broadcast({ type: 'start', from: id });
+        setPattern(() => parsed.pattern);
+        if (autolink) {
+          window.location.hash = '#' + encodeURIComponent(btoa(code));
+        }
+        setHash(generateHash(code));
+        setError(undefined);
+        setActiveCode(_code);
+        setPending(false);
+      } catch (err) {
+        err.message = 'evaluation error: ' + err.message;
+        console.warn(err);
+        setError(err);
+      }
+    },
+    [activeCode, dirty, code, cycle, autolink, id, broadcast],
+  );
+  // logs events of cycle
+  const logCycle = (_events, cycle) => {
+    if (_events.length) {
+      // pushLog(`# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
+    }
+  };
+
+  const togglePlay = () => {
+    if (!cycle.started) {
+      activateCode();
+    } else {
+      cycle.stop();
+    }
+  };
+
+  return {
+    pending,
+    code,
+    setCode,
+    pattern,
+    error,
+    cycle,
+    setPattern,
+    dirty,
+    log,
+    togglePlay,
+    setActiveCode,
+    activateCode,
+    activeCode,
+    pushLog,
+    hash,
+  };
+}
+
+export default useRepl;
--- a/packages/react/src/hooks/useWebMidi.mjs
+++ b/packages/react/src/hooks/useWebMidi.mjs
@ -0,0 +1,41 @@
+/*
+useWebMidi.js - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/repl/src/useWebMidi.js>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { useEffect, useState } from 'react';
+import { enableWebMidi, WebMidi } from '@strudel.cycles/midi'
+
+export function useWebMidi(props) {
+  const { ready, connected, disconnected } = props;
+  const [loading, setLoading] = useState(true);
+  const [outputs, setOutputs] = useState(WebMidi?.outputs || []);
+  useEffect(() => {
+    enableWebMidi()
+      .then(() => {
+        // Reacting when a new device becomes available
+        WebMidi.addListener('connected', (e) => {
+          setOutputs([...WebMidi.outputs]);
+          connected?.(WebMidi, e);
+        });
+        // Reacting when a device becomes unavailable
+        WebMidi.addListener('disconnected', (e) => {
+          setOutputs([...WebMidi.outputs]);
+          disconnected?.(WebMidi, e);
+        });
+        ready?.(WebMidi);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (err) {
+          console.error(err);
+          //throw new Error("Web Midi could not be enabled...");
+          console.warn('Web Midi could not be enabled..');
+          return;
+        }
+      });
+  }, [ready, connected, disconnected, outputs]);
+  const outputByName = (name) => WebMidi.getOutputByName(name);
+  return { loading, outputs, outputByName };
+}
--- a/packages/react/src/index.css
+++ b/packages/react/src/index.css
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/packages/react/src/logo.svg
+++ b/packages/react/src/logo.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>
--- a/packages/react/src/main.jsx
+++ b/packages/react/src/main.jsx
@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'))
--- a/packages/react/src/themes/material-palenight.js
+++ b/packages/react/src/themes/material-palenight.js
@ -0,0 +1,135 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, tags as t } from '@codemirror/highlight';
+
+/*
+  Credits for color palette:
+
+  Author:     Mattia Astorino (http://github.com/equinusocio)
+  Website:    https://material-theme.site/
+*/
+
+const ivory = '#abb2bf',
+  stone = '#7d8799', // Brightened compared to original to increase contrast
+  invalid = '#ffffff',
+  darkBackground = '#21252b',
+  highlightBackground = 'rgba(0, 0, 0, 0.5)',
+  // background = '#292d3e',
+  background = 'transparent',
+  tooltipBackground = '#353a42',
+  selection = 'rgba(128, 203, 196, 0.2)',
+  cursor = '#ffcc00';
+
+/// The editor theme styles for Material Palenight.
+export const materialPalenightTheme = EditorView.theme(
+  {
+    // done
+    '&': {
+      color: '#ffffff',
+      backgroundColor: background,
+      fontSize: '15px',
+      'z-index': 11,
+    },
+
+    // done
+    '.cm-content': {
+      caretColor: cursor,
+      lineHeight: '22px',
+    },
+    '.cm-line': {
+      background: '#2C323699',
+    },
+    // done
+    '&.cm-focused .cm-cursor': {
+      borderLeftColor: cursor,
+    },
+
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: selection,
+    },
+
+    '.cm-panels': { backgroundColor: darkBackground, color: '#ffffff' },
+    '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
+    '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
+
+    // done, use onedarktheme
+    '.cm-searchMatch': {
+      backgroundColor: '#72a1ff59',
+      outline: '1px solid #457dff',
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: '#6199ff2f',
+    },
+
+    '.cm-activeLine': { backgroundColor: highlightBackground },
+    '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+    '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: '#bad0f847',
+      outline: '1px solid #515a6b',
+    },
+
+    // done
+    '.cm-gutters': {
+      background: '#2C323699',
+      color: '#676e95',
+      border: 'none',
+    },
+
+    '.cm-activeLineGutter': {
+      backgroundColor: highlightBackground,
+    },
+
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: '#ddd',
+    },
+
+    '.cm-tooltip': {
+      border: 'none',
+      backgroundColor: tooltipBackground,
+    },
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li[aria-selected]': {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true },
+);
+
+/// The highlighting style for code in the Material Palenight theme.
+export const materialPalenightHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#c792ea' },
+  { tag: t.operator, color: '#89ddff' },
+  { tag: t.special(t.variableName), color: '#eeffff' },
+  { tag: t.typeName, color: '#f07178' },
+  { tag: t.atom, color: '#f78c6c' },
+  { tag: t.number, color: '#ff5370' },
+  { tag: t.definition(t.variableName), color: '#82aaff' },
+  { tag: t.string, color: '#c3e88d' },
+  { tag: t.special(t.string), color: '#f07178' },
+  { tag: t.comment, color: stone },
+  { tag: t.variableName, color: '#f07178' },
+  { tag: t.tagName, color: '#ff5370' },
+  { tag: t.bracket, color: '#a2a1a4' },
+  { tag: t.meta, color: '#ffcb6b' },
+  { tag: t.attributeName, color: '#c792ea' },
+  { tag: t.propertyName, color: '#c792ea' },
+  { tag: t.className, color: '#decb6b' },
+  { tag: t.invalid, color: invalid },
+]);
+
+/// Extension to enable the Material Palenight theme (both the editor theme and
+/// the highlight style).
+// : Extension
+export const materialPalenight = [materialPalenightTheme, materialPalenightHighlightStyle];
--- a/packages/react/vite.config.js
+++ b/packages/react/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})