elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 12:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

MiniRepl: add punchcard flag for implicit vis

Browse Source 
+ reintroduce editPattern
+ add punchcards to mini-notation.mdx
This commit is contained in:
Felix Roos 2023-01-13 15:13:39 +01:00
parent e4f538b674
commit b2c6d87633
10 changed files with 323 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/repl.mjs
View File

@ -13,7 +13,7 @@ export function repl({
getTime, getTime,
transpiler, transpiler,
onToggle, onToggle,
drawContext, editPattern,
}) { }) {
const scheduler = new Cyclist({ const scheduler = new Cyclist({
interval, interval,
@ -45,6 +45,7 @@ export function repl({
let { pattern } = await _evaluate(code, transpiler); let { pattern } = await _evaluate(code, transpiler);
logger(`[eval] code updated`); logger(`[eval] code updated`);
pattern = editPattern?.(pattern) || pattern;
scheduler.setPattern(pattern, autostart); scheduler.setPattern(pattern, autostart);
afterEval?.({ code, pattern }); afterEval?.({ code, pattern });
return pattern; return pattern;

2
packages/react/dist/index.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

542
packages/react/dist/index.es.js vendored
View File

@ -1,15 +1,15 @@
import l, { useCallback as w, useRef as A, useEffect as k, useMemo as $, useState as _, useLayoutEffect as Y } from "react"; import d, { useCallback as w, useRef as N, useEffect as k, useMemo as G, useState as M, useLayoutEffect as T } from "react";
import ie from "@uiw/react-codemirror"; import le from "@uiw/react-codemirror";
import { Decoration as M, EditorView as Z } from "@codemirror/view"; import { Decoration as A, EditorView as ee } from "@codemirror/view";
import { StateEffect as ee, StateField as te } from "@codemirror/state"; import { StateEffect as te, StateField as re } from "@codemirror/state";
import { javascript as le } from "@codemirror/lang-javascript"; import { javascript as ue } from "@codemirror/lang-javascript";
import { tags as i } from "@lezer/highlight"; import { tags as u } from "@lezer/highlight";
import { createTheme as ue } from "@uiw/codemirror-themes"; import { createTheme as de } from "@uiw/codemirror-themes";
import { webaudioOutput as de, getAudioContext as fe } from "@strudel.cycles/webaudio"; import { webaudioOutput as fe, getAudioContext as me } from "@strudel.cycles/webaudio";
import { useInView as me } from "react-hook-inview"; import { useInView as he } from "react-hook-inview";
import { repl as he, logger as ge } from "@strudel.cycles/core"; import { repl as ge, logger as pe } from "@strudel.cycles/core";
import { transpiler as pe } from "@strudel.cycles/transpiler"; import { transpiler as ve } from "@strudel.cycles/transpiler";
const ve = ue({ const be = de({
theme: "dark", theme: "dark",
settings: { settings: {
background: "#222", background: "#222",
@ -22,413 +22,417 @@ const ve = ue({
gutterForeground: "#8a919966" gutterForeground: "#8a919966"
}, },
styles: [ styles: [
{ tag: i.keyword, color: "#c792ea" }, { tag: u.keyword, color: "#c792ea" },
{ tag: i.operator, color: "#89ddff" }, { tag: u.operator, color: "#89ddff" },
{ tag: i.special(i.variableName), color: "#eeffff" }, { tag: u.special(u.variableName), color: "#eeffff" },
{ tag: i.typeName, color: "#c3e88d" }, { tag: u.typeName, color: "#c3e88d" },
{ tag: i.atom, color: "#f78c6c" }, { tag: u.atom, color: "#f78c6c" },
{ tag: i.number, color: "#c3e88d" }, { tag: u.number, color: "#c3e88d" },
{ tag: i.definition(i.variableName), color: "#82aaff" }, { tag: u.definition(u.variableName), color: "#82aaff" },
{ tag: i.string, color: "#c3e88d" }, { tag: u.string, color: "#c3e88d" },
{ tag: i.special(i.string), color: "#c3e88d" }, { tag: u.special(u.string), color: "#c3e88d" },
{ tag: i.comment, color: "#7d8799" }, { tag: u.comment, color: "#7d8799" },
{ tag: i.variableName, color: "#c792ea" }, { tag: u.variableName, color: "#c792ea" },
{ tag: i.tagName, color: "#c3e88d" }, { tag: u.tagName, color: "#c3e88d" },
{ tag: i.bracket, color: "#525154" }, { tag: u.bracket, color: "#525154" },
{ tag: i.meta, color: "#ffcb6b" }, { tag: u.meta, color: "#ffcb6b" },
{ tag: i.attributeName, color: "#c792ea" }, { tag: u.attributeName, color: "#c792ea" },
{ tag: i.propertyName, color: "#c792ea" }, { tag: u.propertyName, color: "#c792ea" },
{ tag: i.className, color: "#decb6b" }, { tag: u.className, color: "#decb6b" },
{ tag: i.invalid, color: "#ffffff" } { tag: u.invalid, color: "#ffffff" }
] ]
}); });
const G = ee.define(), be = te.define({ const J = te.define(), Ee = re.define({
create() { create() {
return M.none; return A.none;
}, },
update(e, r) { update(e, r) {
try { try {
for (let t of r.effects) for (let t of r.effects)
if (t.is(G)) if (t.is(J))
if (t.value) { if (t.value) {
const o = M.mark({ attributes: { style: "background-color: #FFCA2880" } }); const n = A.mark({ attributes: { style: "background-color: #FFCA2880" } });
e = M.set([o.range(0, r.newDoc.length)]); e = A.set([n.range(0, r.newDoc.length)]);
} else } else
e = M.set([]); e = A.set([]);
return e; return e;
} catch (t) { } catch (t) {
return console.warn("flash error", t), e; return console.warn("flash error", t), e;
} }
}, },
provide: (e) => Z.decorations.from(e) provide: (e) => ee.decorations.from(e)
}), Ee = (e) => { }), ye = (e) => {
e.dispatch({ effects: G.of(!0) }), setTimeout(() => { e.dispatch({ effects: J.of(!0) }), setTimeout(() => {
e.dispatch({ effects: G.of(!1) }); e.dispatch({ effects: J.of(!1) });
}, 200); }, 200);
}, O = ee.define(), ye = te.define({ }, B = te.define(), we = re.define({
create() { create() {
return M.none; return A.none;
}, },
update(e, r) { update(e, r) {
try { try {
for (let t of r.effects) for (let t of r.effects)
if (t.is(O)) { if (t.is(B)) {
const o = t.value.map( const n = t.value.map(
(u) => (u.context.locations || []).map(({ start: m, end: d }) => { (c) => (c.context.locations || []).map(({ start: m, end: s }) => {
const a = u.context.color || "#FFCA28"; const a = c.context.color || "#FFCA28";
let c = r.newDoc.line(m.line).from + m.column, h = r.newDoc.line(d.line).from + d.column; let i = r.newDoc.line(m.line).from + m.column, g = r.newDoc.line(s.line).from + s.column;
const g = r.newDoc.length; const b = r.newDoc.length;
return c > g || h > g ? void 0 : M.mark({ attributes: { style: `outline: 1.5px solid ${a};` } }).range(c, h); return i > b || g > b ? void 0 : A.mark({ attributes: { style: `outline: 1.5px solid ${a};` } }).range(i, g);
}) })
).flat().filter(Boolean) || []; ).flat().filter(Boolean) || [];
e = M.set(o, !0); e = A.set(n, !0);
} }
return e; return e;
} catch { } catch {
return M.set([]); return A.set([]);
} }
}, },
provide: (e) => Z.decorations.from(e) provide: (e) => ee.decorations.from(e)
}), we = [le(), ve, ye, be]; }), ke = [ue(), be, we, Ee];
function ke({ value: e, onChange: r, onViewChanged: t, onSelectionChange: o, options: u, editorDidMount: m }) { function Fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: n, options: c, editorDidMount: m }) {
const d = w( const s = w(
(h) => { (g) => {
r?.(h); r?.(g);
}, },
[r] [r]
), a = w( ), a = w(
(h) => { (g) => {
t?.(h); t?.(g);
}, },
[t] [t]
), c = w( ), i = w(
(h) => { (g) => {
h.selectionSet && o && o?.(h.state.selection); g.selectionSet && n && n?.(g.state.selection);
}, },
[o] [n]
); );
return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(ie, { return /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement(le, {
value: e, value: e,
onChange: d, onChange: s,
onCreateEditor: a, onCreateEditor: a,
onUpdate: c, onUpdate: i,
extensions: we extensions: ke
})); }));
} }
function T(...e) { function Y(...e) {
return e.filter(Boolean).join(" "); return e.filter(Boolean).join(" ");
} }
function Fe({ view: e, pattern: r, active: t, getTime: o }) { function _e({ view: e, pattern: r, active: t, getTime: n }) {
const u = A([]), m = A(); const c = N([]), m = N();
k(() => { k(() => {
if (e) if (e)
if (r && t) { if (r && t) {
let d = requestAnimationFrame(function a() { let s = requestAnimationFrame(function a() {
try { try {
const c = o(), g = [Math.max(m.current || c, c - 1 / 10, 0), c + 1 / 60]; const i = n(), b = [Math.max(m.current || i, i - 1 / 10, 0), i + 1 / 60];
m.current = g[1], u.current = u.current.filter((p) => p.whole.end > c); m.current = b[1], c.current = c.current.filter((h) => h.whole.end > i);
const n = r.queryArc(...g).filter((p) => p.hasOnset()); const l = r.queryArc(...b).filter((h) => h.hasOnset());
u.current = u.current.concat(n), e.dispatch({ effects: O.of(u.current) }); c.current = c.current.concat(l), e.dispatch({ effects: B.of(c.current) });
} catch { } catch {
e.dispatch({ effects: O.of([]) }); e.dispatch({ effects: B.of([]) });
} }
d = requestAnimationFrame(a); s = requestAnimationFrame(a);
}); });
return () => { return () => {
cancelAnimationFrame(d); cancelAnimationFrame(s);
}; };
} else } else
u.current = [], e.dispatch({ effects: O.of([]) }); c.current = [], e.dispatch({ effects: B.of([]) });
}, [r, t, e]); }, [r, t, e]);
} }
function _e(e, r = !1) { function Me(e, r = !1) {
const t = A(), o = A(), u = (a) => { const t = N(), n = N(), c = (a) => {
if (o.current !== void 0) { if (n.current !== void 0) {
const c = a - o.current; const i = a - n.current;
e(a, c); e(a, i);
} }
o.current = a, t.current = requestAnimationFrame(u); n.current = a, t.current = requestAnimationFrame(c);
}, m = () => { }, m = () => {
t.current = requestAnimationFrame(u); t.current = requestAnimationFrame(c);
}, d = () => { }, s = () => {
t.current && cancelAnimationFrame(t.current), delete t.current; t.current && cancelAnimationFrame(t.current), delete t.current;
}; };
return k(() => { return k(() => {
t.current && (d(), m()); t.current && (s(), m());
}, [e]), k(() => (r && m(), d), []), { }, [e]), k(() => (r && m(), s), []), {
start: m, start: m,
stop: d stop: s
}; };
} }
function Me({ pattern: e, started: r, getTime: t, onDraw: o, drawTime: u = [-2, 2] }) { function Ae({ pattern: e, started: r, getTime: t, onDraw: n, drawTime: c = [-2, 2] }) {
let [m, d] = u; let [m, s] = c;
m = Math.abs(m); m = Math.abs(m);
let a = A([]), c = A(null); let a = N([]), i = N(null);
k(() => { k(() => {
if (e) { if (e) {
const n = t(), p = e.queryArc(n, n + d); const l = t(), h = e.queryArc(l, l + s + 0.1);
a.current = a.current.filter((b) => b.whole.begin < n), a.current = a.current.concat(p); a.current = a.current.filter((v) => v.whole.begin < l), a.current = a.current.concat(h);
} }
}, [e]); }, [e]);
const { start: h, stop: g } = _e( const { start: g, stop: b } = Me(
w(() => { w(() => {
const n = t() + d; const l = t() + s;
if (c.current === null) { if (i.current === null) {
c.current = n; i.current = l;
return; return;
} }
const p = e.queryArc(Math.max(c.current, n - 1 / 10), n); const h = e.queryArc(Math.max(i.current, l - 1 / 10), l);
c.current = n, a.current = (a.current || []).filter((b) => b.whole.end >= n - m - d).concat(p.filter((b) => b.hasOnset())), o(e, n - d, a.current, u); i.current = l, a.current = (a.current || []).filter((v) => v.whole.end >= l - m - s).concat(h.filter((v) => v.hasOnset())), n(e, l - s, a.current, c);
}, [e]) }, [e])
); );
return k(() => { return k(() => {
r ? h() : (a.current = [], g()); r ? g() : (a.current = [], b());
}, [r]), { }, [r]), {
clear: () => { clear: () => {
a.current = []; a.current = [];
} }
}; };
} }
function Ae(e) { function Ne(e) {
return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), w((r) => window.postMessage(r, "*"), []); return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), w((r) => window.postMessage(r, "*"), []);
} }
function Ne({ function De({
defaultOutput: e, defaultOutput: e,
interval: r, interval: r,
getTime: t, getTime: t,
evalOnMount: o = !1, evalOnMount: n = !1,
initialCode: u = "", initialCode: c = "",
autolink: m = !1, autolink: m = !1,
beforeEval: d, beforeEval: s,
afterEval: a, editPattern: a,
onEvalError: c, afterEval: i,
onToggle: h, onEvalError: g,
canvasId: g, onToggle: b,
drawContext: n, canvasId: l,
drawTime: p = [-2, 2] drawContext: h,
drawTime: v = [-2, 2]
}) { }) {
const b = $(() => De(), []); const F = G(() => Ce(), []);
g = g || `canvas-${b}`; l = l || `canvas-${F}`;
const [q, x] = _(), [C, z] = _(), [E, D] = _(u), [H, B] = _(), [N, P] = _(), [R, S] = _(!1), I = E !== H, { scheduler: s, evaluate: v, start: J, stop: V, pause: re } = $( const [x, z] = M(), [R, H] = M(), [E, C] = M(c), [P, I] = M(), [D, S] = M(), [L, V] = M(!1), K = E !== P, { scheduler: o, evaluate: p, start: Q, stop: O, pause: ne } = G(
() => he({ () => ge({
interval: r, interval: r,
defaultOutput: e, defaultOutput: e,
onSchedulerError: x, onSchedulerError: z,
onEvalError: (f) => { onEvalError: (f) => {
z(f), c?.(f); H(f), g?.(f);
}, },
getTime: t, getTime: t,
drawContext: n, drawContext: h,
transpiler: pe, transpiler: ve,
editPattern: a,
beforeEval: ({ code: f }) => { beforeEval: ({ code: f }) => {
D(f), d?.(); C(f), s?.();
}, },
afterEval: ({ pattern: f, code: y }) => { afterEval: ({ pattern: f, code: y }) => {
B(y), P(f), z(), x(), m && (window.location.hash = "#" + encodeURIComponent(btoa(y))), a?.(); I(y), S(f), H(), z(), m && (window.location.hash = "#" + encodeURIComponent(btoa(y))), i?.();
}, },
onToggle: (f) => { onToggle: (f) => {
S(f), h?.(f); V(f), b?.(f);
} }
}), }),
[e, r, t] [e, r, t]
), ne = Ae(({ data: { from: f, type: y } }) => { ), oe = Ne(({ data: { from: f, type: y } }) => {
y === "start" && f !== b && V(); y === "start" && f !== F && O();
}), K = w( }), j = w(
async (f = !0) => { async (f = !0) => {
const y = await v(E, f); const y = await p(E, f);
return ne({ type: "start", from: b }), y; return oe({ type: "start", from: F }), y;
}, },
[v, E] [p, E]
), L = w( ), q = w(
(f, y, U, W) => { (f, y, W, $) => {
const { onPaint: ce } = f.context || {}, se = typeof n == "function" ? n(g) : n; const { onPaint: se } = f.context || {}, ie = typeof h == "function" ? h(l) : h;
ce?.(se, y, U, W); se?.(ie, y, W, $);
}, },
[n, g] [h, l]
), j = w( ), U = w(
(f) => { (f) => {
if (n && L) { if (h && q) {
const [y, U] = p, W = f.queryArc(0, U); const [y, W] = v, $ = f.queryArc(0, W);
L(f, 0, W, p); q(f, 0, $, v);
} }
}, },
[p, L] [v, q]
), Q = A(); ), X = N();
k(() => { k(() => {
!Q.current && n && L && o && E && (Q.current = !0, v(E, !1).then((f) => j(f))); !X.current && h && q && n && E && (X.current = !0, p(E, !1).then((f) => U(f)));
}, [K, o, E, j]), k(() => () => { }, [j, n, E, U]), k(() => () => {
s.stop(); o.stop();
}, [s]); }, [o]);
const oe = async () => { const ae = async () => {
R ? (s.stop(), j(N)) : await K(); L ? (o.stop(), U(D)) : await j();
}, ae = q || C; }, ce = x || R;
return Me({ return Ae({
pattern: N, pattern: D,
started: n && R, started: h && L,
getTime: () => s.now(), getTime: () => o.now(),
drawTime: p, drawTime: v,
onDraw: L onDraw: q
}), { }), {
id: b, id: F,
canvasId: g, canvasId: l,
code: E, code: E,
setCode: D, setCode: C,
error: ae, error: ce,
schedulerError: q, schedulerError: x,
scheduler: s, scheduler: o,
evalError: C, evalError: R,
evaluate: v, evaluate: p,
activateCode: K, activateCode: j,
activeCode: H, activeCode: P,
isDirty: I, isDirty: K,
pattern: N, pattern: D,
started: R, started: L,
start: J, start: Q,
stop: V, stop: O,
pause: re, pause: ne,
togglePlay: oe togglePlay: ae
}; };
} }
function De() { function Ce() {
return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1); return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
} }
function X({ type: e }) { function Z({ type: e }) {
return /* @__PURE__ */ l.createElement("svg", { return /* @__PURE__ */ d.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg", xmlns: "http://www.w3.org/2000/svg",
className: "sc-h-5 sc-w-5", className: "sc-h-5 sc-w-5",
viewBox: "0 0 20 20", viewBox: "0 0 20 20",
fill: "currentColor" fill: "currentColor"
}, { }, {
refresh: /* @__PURE__ */ l.createElement("path", { refresh: /* @__PURE__ */ d.createElement("path", {
fillRule: "evenodd", 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", 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" clipRule: "evenodd"
}), }),
play: /* @__PURE__ */ l.createElement("path", { play: /* @__PURE__ */ d.createElement("path", {
fillRule: "evenodd", 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", 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" clipRule: "evenodd"
}), }),
pause: /* @__PURE__ */ l.createElement("path", { pause: /* @__PURE__ */ d.createElement("path", {
fillRule: "evenodd", 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", 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" clipRule: "evenodd"
}), }),
stop: /* @__PURE__ */ l.createElement("path", { stop: /* @__PURE__ */ d.createElement("path", {
fillRule: "evenodd", 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", 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" clipRule: "evenodd"
}) })
}[e]); }[e]);
} }
const Ce = "_container_3i85k_1", Re = "_header_3i85k_5", Le = "_buttons_3i85k_9", qe = "_button_3i85k_9", xe = "_buttonDisabled_3i85k_17", ze = "_error_3i85k_21", He = "_body_3i85k_25", F = { const Re = "_container_3i85k_1", Le = "_header_3i85k_5", qe = "_buttons_3i85k_9", xe = "_button_3i85k_9", ze = "_buttonDisabled_3i85k_17", He = "_error_3i85k_21", Pe = "_body_3i85k_25", _ = {
container: Ce, container: Re,
header: Re, header: Le,
buttons: Le, buttons: qe,
button: qe, button: xe,
buttonDisabled: xe, buttonDisabled: ze,
error: ze, error: He,
body: He body: Pe
}, Pe = () => fe().currentTime; }, Se = () => me().currentTime;
function Te({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: o, canvasHeight: u = 200 }) { function Ye({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, drawTime: n, punchcard: c, canvasHeight: m = 200 }) {
n = n || (c ? [0, 4] : void 0);
const { const {
code: m, code: s,
setCode: d, setCode: a,
evaluate: a, evaluate: i,
activateCode: c, activateCode: g,
error: h, error: b,
isDirty: g, isDirty: l,
activeCode: n, activeCode: h,
pattern: p, pattern: v,
started: b, started: F,
scheduler: q, scheduler: x,
togglePlay: x, togglePlay: z,
stop: C, stop: R,
canvasId: z, canvasId: H,
id: E id: E
} = Ne({ } = De({
initialCode: e, initialCode: e,
defaultOutput: de, defaultOutput: fe,
getTime: Pe, editPattern: (o) => c ? o.punchcard() : o,
evalOnMount: !!o, getTime: Se,
drawContext: o ? (s) => document.querySelector("#" + s)?.getContext("2d") : null, evalOnMount: !!n,
drawTime: o drawContext: n ? (o) => document.querySelector("#" + o)?.getContext("2d") : null,
}), [D, H] = _(), [B, N] = me({ drawTime: n
}), [C, P] = M(), [I, D] = he({
threshold: 0.01 threshold: 0.01
}), P = A(), R = $(() => ((N || !r) && (P.current = !0), N || P.current), [N, r]); }), S = N(), L = G(() => ((D || !r) && (S.current = !0), D || S.current), [D, r]);
Fe({ _e({
view: D, view: C,
pattern: p, pattern: v,
active: b && !n?.includes("strudel disable-highlighting"), active: F && !h?.includes("strudel disable-highlighting"),
getTime: () => q.now() getTime: () => x.now()
}), Y(() => { }), T(() => {
if (t) { if (t) {
const s = async (v) => { const o = async (p) => {
(v.ctrlKey || v.altKey) && (v.code === "Enter" ? (v.preventDefault(), Ee(D), await c()) : v.code === "Period" && (C(), v.preventDefault())); (p.ctrlKey || p.altKey) && (p.code === "Enter" ? (p.preventDefault(), ye(C), await g()) : p.code === "Period" && (R(), p.preventDefault()));
}; };
return window.addEventListener("keydown", s, !0), () => window.removeEventListener("keydown", s, !0); return window.addEventListener("keydown", o, !0), () => window.removeEventListener("keydown", o, !0);
} }
}, [t, p, m, a, C, D]); }, [t, v, s, i, R, C]);
const [S, I] = _([]); const [V, K] = M([]);
return Se( return Ve(
w((s) => { w((o) => {
const { data: v } = s.detail; const { data: p } = o.detail;
v?.hap?.context?.id === E && I((V) => V.concat([s.detail]).slice(-10)); p?.hap?.context?.id === E && K((O) => O.concat([o.detail]).slice(-10));
}, []) }, [])
), /* @__PURE__ */ l.createElement("div", { ), /* @__PURE__ */ d.createElement("div", {
className: F.container, className: _.container,
ref: B ref: I
}, /* @__PURE__ */ l.createElement("div", { }, /* @__PURE__ */ d.createElement("div", {
className: F.header className: _.header
}, /* @__PURE__ */ l.createElement("div", { }, /* @__PURE__ */ d.createElement("div", {
className: F.buttons className: _.buttons
}, /* @__PURE__ */ l.createElement("button", { }, /* @__PURE__ */ d.createElement("button", {
className: T(F.button, b ? "sc-animate-pulse" : ""), className: Y(_.button, F ? "sc-animate-pulse" : ""),
onClick: () => x() onClick: () => z()
}, /* @__PURE__ */ l.createElement(X, { }, /* @__PURE__ */ d.createElement(Z, {
type: b ? "stop" : "play" type: F ? "stop" : "play"
})), /* @__PURE__ */ l.createElement("button", { })), /* @__PURE__ */ d.createElement("button", {
className: T(g ? F.button : F.buttonDisabled), className: Y(l ? _.button : _.buttonDisabled),
onClick: () => c() onClick: () => g()
}, /* @__PURE__ */ l.createElement(X, { }, /* @__PURE__ */ d.createElement(Z, {
type: "refresh" type: "refresh"
}))), h && /* @__PURE__ */ l.createElement("div", { }))), b && /* @__PURE__ */ d.createElement("div", {
className: F.error className: _.error
}, h.message)), /* @__PURE__ */ l.createElement("div", { }, b.message)), /* @__PURE__ */ d.createElement("div", {
className: F.body className: _.body
}, R && /* @__PURE__ */ l.createElement(ke, { }, L && /* @__PURE__ */ d.createElement(Fe, {
value: m, value: s,
onChange: d, onChange: a,
onViewChanged: H onViewChanged: P
})), o && /* @__PURE__ */ l.createElement("canvas", { })), n && /* @__PURE__ */ d.createElement("canvas", {
id: z, id: H,
className: "w-full pointer-events-none", className: "w-full pointer-events-none",
height: u, height: m,
ref: (s) => { ref: (o) => {
s && s.width !== s.clientWidth && (s.width = s.clientWidth); o && o.width !== o.clientWidth && (o.width = o.clientWidth);
} }
}), !!S.length && /* @__PURE__ */ l.createElement("div", { }), !!V.length && /* @__PURE__ */ d.createElement("div", {
className: "sc-bg-gray-800 sc-rounded-md sc-p-2" className: "sc-bg-gray-800 sc-rounded-md sc-p-2"
}, S.map(({ message: s }, v) => /* @__PURE__ */ l.createElement("div", { }, V.map(({ message: o }, p) => /* @__PURE__ */ d.createElement("div", {
key: v key: p
}, s)))); }, o))));
} }
function Se(e) { function Ve(e) {
Ve(ge.key, e); Oe(pe.key, e);
} }
function Ve(e, r, t = !1) { function Oe(e, r, t = !1) {
k(() => (document.addEventListener(e, r, t), () => { k(() => (document.addEventListener(e, r, t), () => {
document.removeEventListener(e, r, t); document.removeEventListener(e, r, t);
}), [r]); }), [r]);
} }
const Xe = (e) => Y(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]); const Ze = (e) => T(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]);
export { export {
ke as CodeMirror, Fe as CodeMirror,
Te as MiniRepl, Ye as MiniRepl,
T as cx, Y as cx,
Ee as flash, ye as flash,
Fe as useHighlighting, _e as useHighlighting,
Xe as useKeydown, Ze as useKeydown,
Ae as usePostMessage, Ne as usePostMessage,
Ne as useStrudel De as useStrudel
}; };

4
packages/react/src/components/MiniRepl.jsx
View File

@ -13,7 +13,8 @@ import { logger } from '@strudel.cycles/core';
const getTime = () => getAudioContext().currentTime; const getTime = () => getAudioContext().currentTime;
export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, canvasHeight = 200 }) { export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTime, punchcard, canvasHeight = 200 }) {
drawTime = drawTime || (punchcard ? [0, 4] : undefined);
const { const {
code, code,
setCode, setCode,
@ -32,6 +33,7 @@ export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, drawTi
} = useStrudel({ } = useStrudel({
initialCode: tune, initialCode: tune,
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,
editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
getTime, getTime,
evalOnMount: !!drawTime, evalOnMount: !!drawTime,
drawContext: !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null, drawContext: !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,

2
packages/react/src/hooks/usePatternFrame.mjs
View File

@ -10,7 +10,7 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2]
useEffect(() => { useEffect(() => {
if (pattern) { if (pattern) {
const t = getTime(); const t = getTime();
const futureHaps = pattern.queryArc(t, t + lookahead); const futureHaps = pattern.queryArc(t, t + lookahead + 0.1); // +0.1 = workaround for weird holes in query..
visibleHaps.current = visibleHaps.current.filter((h) => h.whole.begin < t); visibleHaps.current = visibleHaps.current.filter((h) => h.whole.begin < t);
visibleHaps.current = visibleHaps.current.concat(futureHaps); visibleHaps.current = visibleHaps.current.concat(futureHaps);
} }

2
packages/react/src/hooks/useStrudel.mjs
View File

@ -12,6 +12,7 @@ function useStrudel({
initialCode = '', initialCode = '',
autolink = false, autolink = false,
beforeEval, beforeEval,
editPattern,
afterEval, afterEval,
onEvalError, onEvalError,
onToggle, onToggle,
@ -44,6 +45,7 @@ function useStrudel({
getTime, getTime,
drawContext, drawContext,
transpiler, transpiler,
editPattern,
beforeEval: ({ code }) => { beforeEval: ({ code }) => {
setCode(code); setCode(code);
beforeEval?.(); beforeEval?.();

10
website/src/docs/MiniRepl.jsx
View File

@ -22,7 +22,7 @@ if (typeof window !== 'undefined') {
prebake(); prebake();
} }
export function MiniRepl({ tune, drawTime }) { export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
const [Repl, setRepl] = useState(); const [Repl, setRepl] = useState();
useEffect(() => { useEffect(() => {
// we have to load this package on the client // we have to load this package on the client
@ -31,5 +31,11 @@ export function MiniRepl({ tune, drawTime }) {
setRepl(() => res.MiniRepl); setRepl(() => res.MiniRepl);
}); });
}, []); }, []);
return Repl ? <Repl tune={tune} hideOutsideView={true} drawTime={drawTime} /> : <pre>{tune}</pre>; return Repl ? (
<div className="mb-4">
<Repl tune={tune} hideOutsideView={true} drawTime={drawTime} punchcard={punchcard} canvasHeight={canvasHeight} />
</div>
) : (
<pre>{tune}</pre>
);
} }

2
website/src/pages/learn/getting-started.mdx
View File

@ -28,7 +28,7 @@ Strudel however runs directly in your web browser, does not require any custom s
The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns. The main place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) ([what is a REPL?](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)), but in these pages you will also encounter interactive "MiniREPLs" where you can listen to and edit Strudel patterns.
Try clicking the play icon below: Try clicking the play icon below:
<MiniRepl client:idle tune={`s("bd sd").punchcard()`} drawTime={[0, 2]} /> <MiniRepl client:idle tune={`s("bd sd")`} punchcard />
Then edit the text so it reads `s("bd sd cp hh")` and click the refresh icon. Then edit the text so it reads `s("bd sd cp hh")` and click the refresh icon.
Congratulations, you have now live coded your first Strudel pattern! Congratulations, you have now live coded your first Strudel pattern!

58
website/src/pages/learn/mini-notation.mdx
View File

@ -51,12 +51,12 @@ If you do just want to get a regular string that is _not_ parsed as mini-notatio
We can play more notes by separating them with spaces: We can play more notes by separating them with spaces:
<MiniRepl client:idle tune={`note("c e g").punchcard()`} drawTime={[0, 4]} /> <MiniRepl client:idle tune={`note("c e g b")`} punchcard />
Here, those four notes are squashed into one cycle, so each note is a quarter second long. Here, those four notes are squashed into one cycle, so each note is a quarter second long.
Try adding or removing notes and notice how the tempo changes! Try adding or removing notes and notice how the tempo changes!
<MiniRepl client:idle tune={`note("c d e f g a b").punchcard()`} drawTime={[0, 4]} /> <MiniRepl client:idle tune={`note("c d e f g a b")`} punchcard />
Note that the overall duration of time does not change, and instead each note length descreases. Note that the overall duration of time does not change, and instead each note length descreases.
This is a key idea, as it illustrates the 'Cycle' in TidalCycles! This is a key idea, as it illustrates the 'Cycle' in TidalCycles!
@ -72,28 +72,28 @@ But, it will begin to make sense as we go through more elements of mini-notation
We can slow the sequence down by enclosing it in brackets and dividing it by a number (`/2`): We can slow the sequence down by enclosing it in brackets and dividing it by a number (`/2`):
<MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/2")`} /> <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/2")`} punchcard />
The division by two means that the sequence will be played over the course of two cycles. The division by two means that the sequence will be played over the course of two cycles.
You can also use decimal numbers for any tempo you like (`/2.75`). You can also use decimal numbers for any tempo you like (`/2.75`).
<MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/2.75")`} /> <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/2.75")`} punchcard />
## Angle Brackets ## Angle Brackets
Using angle brackets `<>`, we can define the sequence length based on the number of events: Using angle brackets `<>`, we can define the sequence length based on the number of events:
<MiniRepl client:idle tune={`note("<e5 b4 d5 c5>")`} /> <MiniRepl client:idle tune={`note("<e5 b4 d5 c5>")`} punchcard />
The above snippet is the same as: The above snippet is the same as:
<MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/4")`} /> <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]/4")`} punchcard />
The advantage of the angle brackets, is that we can add more events without needing to change the number at the end. The advantage of the angle brackets, is that we can add more events without needing to change the number at the end.
<MiniRepl client:idle tune={`note("<e5 b4 d5 c5 e5>")`} /> <MiniRepl client:idle tune={`note("<e5 b4 d5 c5 e5>")`} punchcard />
<MiniRepl client:idle tune={`note("<e5 b4 d5 c5 e5 b4>")`} /> <MiniRepl client:idle tune={`note("<e5 b4 d5 c5 e5 b4>")`} punchcard />
This is more similar to traditional music sequencers and piano rolls, where adding a note increases the perceived overall duration. This is more similar to traditional music sequencers and piano rolls, where adding a note increases the perceived overall duration.
@ -101,15 +101,13 @@ This is more similar to traditional music sequencers and piano rolls, where addi
Contrary to division, a sequence can be sped up by multiplying it by a number using the asterisk symbol (`*`): Contrary to division, a sequence can be sped up by multiplying it by a number using the asterisk symbol (`*`):
<MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2")`} /> <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2")`} punchcard />
The multiplication by two here means that the sequence will play twice a cycle. The multiplication by two here means that the sequence will play twice a cycle.
As with divisions, multiplications can be decimal (`*2.75`): As with divisions, multiplications can be decimal (`*2.75`):
<MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2.75")`} /> <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2.75")`} punchcard />
Actually, this is not true, but this will be [fixed](https://github.com/tidalcycles/strudel/issues/314) :)
## Subdividing time with bracket nesting ## Subdividing time with bracket nesting
@ -133,7 +131,7 @@ Well, what this means is that in TidalCycles, not only can you divide time any w
The "~" represents a rest, and will create silence between other events: The "~" represents a rest, and will create silence between other events:
<MiniRepl client:idle tune={`note("[b4 [~ c5] d5 e5]")`} /> <MiniRepl client:idle tune={`note("[b4 [~ c5] d5 e5]")`} punchcard />
## Parallel / polyphony ## Parallel / polyphony
@ -141,17 +139,17 @@ Using commas, we can play chords.
The following are the same: The following are the same:
<MiniRepl client:idle tune={`note("[g3,b3,e4]")`} /> <MiniRepl client:idle tune={`note("[g3,b3,e4]")`} />
<MiniRepl client:idle tune={`note("g3,b3,e4")`} /> <MiniRepl client:idle tune={`note("g3,b3,e4")`} punchcard canvasHeight={80} />
But to play multiple chords in a sequence, we have to wrap them in brackets: But to play multiple chords in a sequence, we have to wrap them in brackets:
<MiniRepl client:idle tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} /> <MiniRepl client:idle tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} punchcard />
## Elongation ## Elongation
With the "@" symbol, we can specify temporal "weight" of a sequence child: With the "@" symbol, we can specify temporal "weight" of a sequence child:
<MiniRepl client:idle tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>")`} /> <MiniRepl client:idle tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>")`} punchcard />
Here, the first chord has a weight of 2, making it twice the length of the other chords. The default weight is 1. Here, the first chord has a weight of 2, making it twice the length of the other chords. The default weight is 1.
@ -159,7 +157,7 @@ Here, the first chord has a weight of 2, making it twice the length of the other
Using "!" we can repeat without speeding up: Using "!" we can repeat without speeding up:
<MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>")`} /> <MiniRepl client:idle tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>")`} punchcard />
In essence, the `x!n` is like a shortcut for `[x*n]@n`. In essence, the `x!n` is like a shortcut for `[x*n]@n`.
@ -181,24 +179,24 @@ Using round brackets after an event, we can create rhythmical sub-divisions base
This algorithm can be found in many different types of music software, and is often referred to as a [Euclidean rhythm](https://en.wikipedia.org/wiki/Euclidean_rhythm) sequencer, after computer scientist Godfriend Toussaint. This algorithm can be found in many different types of music software, and is often referred to as a [Euclidean rhythm](https://en.wikipedia.org/wiki/Euclidean_rhythm) sequencer, after computer scientist Godfriend Toussaint.
Why is it interesting? Well, consider the following simple example: Why is it interesting? Well, consider the following simple example:
<MiniRepl client:idle tune={`s("bd(3,8,0)")`} /> <MiniRepl client:idle tune={`s("bd(3,8,0)")`} punchcard canvasHeight={50} />
Sound familiar? Sound familiar?
This is a popular Euclidian rhythm going by various names, such as "Pop Clave". This is a popular Euclidian rhythm going by various names, such as "Pop Clave".
These rhythms can be found in all musical cultures, and the Euclidian rhythm algorithm allows us to express them extremely easily. These rhythms can be found in all musical cultures, and the Euclidian rhythm algorithm allows us to express them extremely easily.
Writing this rhythm out in full require describing: Writing this rhythm out in full require describing:
<MiniRepl client:idle tune={`s("bd ~ ~ bd ~ ~ bd ~")`} /> <MiniRepl client:idle tune={`s("bd ~ ~ bd ~ ~ bd ~")`} punchcard canvasHeight={50} />
But using the Euclidian rhythm notation, we only need to express "3 beats over 8 segments, starting on position 1". But using the Euclidian rhythm notation, we only need to express "3 beats over 8 segments, starting on position 1".
This makes it easy to write patterns with interesting rhythmic structures and variations that still sound familiar: This makes it easy to write patterns with interesting rhythmic structures and variations that still sound familiar:
<MiniRepl client:idle tune={`note("e5(2,8) b4(3,8) d5(2,8) c5(3,8)").slow(4)`} /> <MiniRepl client:idle tune={`note("e5(2,8) b4(3,8) d5(2,8) c5(3,8)").slow(4)`} punchcard canvasHeight={50} />
Note that since the example above does not use the third `offset` parameter, it can be written simply as `"(3,8)"`. Note that since the example above does not use the third `offset` parameter, it can be written simply as `"(3,8)"`.
<MiniRepl client:idle tune={`s("bd(3,8)")`} /> <MiniRepl client:idle tune={`s("bd(3,8)")`} punchcard canvasHeight={50} />
Let's look at those three parameters in detail. Let's look at those three parameters in detail.
@ -207,26 +205,26 @@ Let's look at those three parameters in detail.
`beats`: the first parameter controls how may beats will be played. `beats`: the first parameter controls how may beats will be played.
Compare these: Compare these:
<MiniRepl client:idle tune={`s("bd(2,8)")`} /> <MiniRepl client:idle tune={`s("bd(2,8)")`} punchcard canvasHeight={50} />
<MiniRepl client:idle tune={`s("bd(5,8)")`} /> <MiniRepl client:idle tune={`s("bd(5,8)")`} punchcard canvasHeight={50} />
<MiniRepl client:idle tune={`s("bd(7,8)")`} /> <MiniRepl client:idle tune={`s("bd(7,8)")`} punchcard canvasHeight={50} />
### Segments ### Segments
`segments`: the second parameter controls the total amount of segments the beats will be distributed over: `segments`: the second parameter controls the total amount of segments the beats will be distributed over:
<MiniRepl client:idle tune={`s("bd(3,4)")`} /> <MiniRepl client:idle tune={`s("bd(3,4)")`} punchcard canvasHeight={50} />
<MiniRepl client:idle tune={`s("bd(3,8)")`} /> <MiniRepl client:idle tune={`s("bd(3,8)")`} punchcard canvasHeight={50} />
<MiniRepl client:idle tune={`s("bd(3,13)")`} /> <MiniRepl client:idle tune={`s("bd(3,13)")`} punchcard canvasHeight={50} />
### Offsets ### Offsets
`offset`: the third (optional) parameter controls the starting position for distributing the beats. `offset`: the third (optional) parameter controls the starting position for distributing the beats.
We need a secondary rhythm to hear the difference: We need a secondary rhythm to hear the difference:
<MiniRepl client:idle tune={`s("bd(3,8,0), hh cp")`} /> <MiniRepl client:idle tune={`s("bd(3,8,0), hh cp")`} punchcard />
<MiniRepl client:idle tune={`s("bd(3,8,3), hh cp")`} /> <MiniRepl client:idle tune={`s("bd(3,8,3), hh cp")`} punchcard />
<MiniRepl client:idle tune={`s("bd(3,8,5), hh cp")`} /> <MiniRepl client:idle tune={`s("bd(3,8,5), hh cp")`} punchcard />
## Mini-notation exercise ## Mini-notation exercise

8
website/src/pages/technical-manual/docs.mdx
View File

@ -29,11 +29,11 @@ add a mini repl with
- `client:idle` is required to tell astro that the repl should be interactive, see [Client Directive](https://docs.astro.build/en/reference/directives-reference/#client-directives) - `client:idle` is required to tell astro that the repl should be interactive, see [Client Directive](https://docs.astro.build/en/reference/directives-reference/#client-directives)
- `tune`: be any valid pattern code - `tune`: be any valid pattern code
- `drawTime`: time window for drawing. Use together with `.punchcard()`. Example: - `punchcard`: if added, a punchcard / pianoroll visualization is renderd
- `drawTime`: time window for drawing, defaults to `[0, 4]`
- `canvasHeight`: height of the canvas, defaults to 100px
```jsx See `mini-notation.mdx` for usage examples
<MiniRepl client:idle tune={`note("a3 c#4 e4 a4").punchcard()`} drawTime={[0, 2]} />
```
## In-Source Documentation ## In-Source Documentation