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

nano-repl add modules + proper eval

Browse Source
This commit is contained in:
Felix Roos 2022-08-18 00:27:16 +02:00
parent 48bf17614f
commit e3e3a8404a
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/react/examples/nano-repl/src/App.jsx
View File

@ -1,15 +1,32 @@
import * as strudel from '@strudel.cycles/core'; import '@strudel.cycles/core';
import * as webaudio from '@strudel.cycles/webaudio'; import controls from '@strudel.cycles/core/controls.mjs';
import { evalScope } from '@strudel.cycles/eval';
import { webaudioOutput } from '@strudel.cycles/webaudio'; import { webaudioOutput } from '@strudel.cycles/webaudio';
import { useState } from 'react'; import { useState } from 'react';
import useScheduler from '../../../src/hooks/useScheduler'; import useScheduler from '../../../src/hooks/useScheduler';
import useEvaluator from '../../../src/hooks/useEvaluator'; import useEvaluator from '../../../src/hooks/useEvaluator';
// import { prebake } from '../../../../../repl/src/prebake.mjs';
Object.assign(globalThis, strudel, webaudio); // add strudel to eval scope await evalScope(
controls,
import('@strudel.cycles/core'),
import('@strudel.cycles/tone'),
import('@strudel.cycles/tonal'),
import('@strudel.cycles/mini'),
import('@strudel.cycles/midi'),
import('@strudel.cycles/xen'),
import('@strudel.cycles/webaudio'),
import('@strudel.cycles/osc'),
import('@strudel.cycles/webdirt'),
import('@strudel.cycles/serial'),
import('@strudel.cycles/soundfonts'),
);
// await prebake();
function App() { function App() {
const [code, setCode] = useState(`seq('c3','eb3').note()`); const [code, setCode] = useState(`"c3 [eb3,g3]".note()`);
const { evaluate, pattern, isDirty, error: evaluatorError } = useEvaluator(code); const { evaluate, pattern, isDirty, error: evaluatorError } = useEvaluator({ code });
const { scheduler, error: schedulerError } = useScheduler(pattern, webaudioOutput); const { scheduler, error: schedulerError } = useScheduler(pattern, webaudioOutput);
const error = evaluatorError || schedulerError; const error = evaluatorError || schedulerError;
return ( return (

16
packages/react/src/hooks/useEvaluator.jsx
View File

@ -1,14 +1,20 @@
import { useRef, useState, useCallback, useEffect } from 'react'; import { useRef, useState, useCallback, useEffect } from 'react';
import { evaluate as _evaluate } from '@strudel.cycles/eval';
function useEvaluator(code, evalOnMount = true) { function useEvaluator({ code, evalOnMount = true }) {
const [error, setError] = useState(); const [error, setError] = useState();
const [activeCode, setActiveCode] = useState(code); const [activeCode, setActiveCode] = useState(code);
const [pattern, setPattern] = useState(); const [pattern, setPattern] = useState();
const isDirty = code !== activeCode; const isDirty = code !== activeCode;
const evaluate = useCallback(() => {
const evaluate = useCallback(async () => {
if (!code) {
console.log('no code..');
return;
}
try { try {
// TODO: use @strudel.cycles/eval or let user inject custom eval function // TODO: let user inject custom eval function?
const _pattern = eval(code); const { pattern: _pattern } = await _evaluate(code);
setActiveCode(activeCode); setActiveCode(activeCode);
setPattern(_pattern); setPattern(_pattern);
setError(); setError();
@ -20,9 +26,9 @@ function useEvaluator(code, evalOnMount = true) {
const inited = useRef(); const inited = useRef();
useEffect(() => { useEffect(() => {
if (!inited.current && evalOnMount) { if (!inited.current && evalOnMount) {
inited.current = true;
evaluate(); evaluate();
} }
inited.current = true;
}, [evaluate, evalOnMount]); }, [evaluate, evalOnMount]);
return { error, evaluate, activeCode, pattern, isDirty }; return { error, evaluate, activeCode, pattern, isDirty };
} }