strudel-docker/packages/react/dist/index.cjs.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),Z=require("@uiw/react-codemirror"),S=require("@codemirror/view"),A=require("@codemirror/state"),ee=require("@codemirror/lang-javascript"),p=require("@lezer/highlight"),te=require("@uiw/codemirror-themes"),se=require("react-hook-inview"),B=require("@strudel.cycles/eval"),C=require("@strudel.cycles/tone"),z=require("@strudel.cycles/core"),oe=require("@strudel.cycles/webaudio"),T=require("@strudel.cycles/midi"),j=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=j(t),re=j(Z),ne=te.createTheme({theme:"dark",settings:{background:"#222",foreground:"#75baff",caret:"#ffcc00",selection:"rgba(128, 203, 196, 0.5)",selectionMatch:"#036dd626",lineHighlight:"#8a91991a",gutterBackground:"transparent",gutterForeground:"#676e95"},styles:[{tag:p.tags.keyword,color:"#c792ea"},{tag:p.tags.operator,color:"#89ddff"},{tag:p.tags.special(p.tags.variableName),color:"#eeffff"},{tag:p.tags.typeName,color:"#f07178"},{tag:p.tags.atom,color:"#f78c6c"},{tag:p.tags.number,color:"#ff5370"},{tag:p.tags.definition(p.tags.variableName),color:"#82aaff"},{tag:p.tags.string,color:"#c3e88d"},{tag:p.tags.special(p.tags.string),color:"#f07178"},{tag:p.tags.comment,color:"#7d8799"},{tag:p.tags.variableName,color:"#f07178"},{tag:p.tags.tagName,color:"#ff5370"},{tag:p.tags.bracket,color:"#a2a1a4"},{tag:p.tags.meta,color:"#ffcb6b"},{tag:p.tags.attributeName,color:"#c792ea"},{tag:p.tags.propertyName,color:"#c792ea"},{tag:p.tags.className,color:"#decb6b"},{tag:p.tags.invalid,color:"#ffffff"}]});const W=A.StateEffect.define(),ae=A.StateField.define({create(){return S.Decoration.none},update(e,o){try{for(let r of o.effects)if(r.is(W))if(r.value){const n=S.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=S.Decoration.set([n.range(0,o.newDoc.length)])}else e=S.Decoration.set([]);return e}catch(r){return console.warn("flash error",r),e}},provide:e=>S.EditorView.decorations.from(e)}),$=e=>{e.dispatch({effects:W.of(!0)}),setTimeout(()=>{e.dispatch({effects:W.of(!1)})},200)},P=A.StateEffect.define(),ce=A.StateField.define({create(){return S.Decoration.none},update(e,o){try{for(let r of o.effects)if(r.is(P)){const n=r.value.map(a=>(a.context.locations||[]).map(({start:l,end:c})=>{const s=a.context.color||"#FFCA28";let u=o.newDoc.line(l.line).from+l.column,i=o.newDoc.line(c.line).from+c.column;const g=o.newDoc.length;return u>g||i>g?void 0:S.Decoration.mark({attributes:{style:`outline: 1.5px solid ${s};`}}).range(u,i)})).flat().filter(Boolean)||[];e=S.Decoration.set(n,!0)}return e}catch{return S.Decoration.set([])}},provide:e=>S.EditorView.decorations.from(e)}),ie=[ee.javascript(),ne,ce,ae];function K({value:e,onChange:o,onViewChanged:r,onSelectionChange:n,options:a,editorDidMount:l}){const c=t.useCallback(i=>{o?.(i)},[o]),s=t.useCallback(i=>{r?.(i)},[r]),u=t.useCallback(i=>{i.selectionSet&&n&&n?.(i.state.selection)},[n]);return y.default.createElement(y.default.Fragment,null,y.default.createElement(re.default,{value:e,onChange:c,onCreateEditor:s,onUpdate:u,extensions:ie}))}function U(e){const{onEvent:o,onQuery:r,onSchedule:n,ready:a=!0,onDraw:l}=e,[c,s]=t.useState(!1),u=1,i=()=>Math.floor(C.Tone.getTransport().seconds/u),g=(h=i())=>{const M=new z.TimeSpan(h,h+1),v=r?.(new z.State(M))||[];n?.(v,h);const m=M.begin.valueOf();C.Tone.getTransport().cancel(m);const D=(h+1)*u-.5,_=Math.max(C.Tone.getTransport().seconds,D)+.1;C.Tone.getTransport().schedule(()=>{g(h+1)},_),v?.filter(E=>E.part.begin.equals(E.whole?.begin)).forEach(E=>{C.Tone.getTransport().schedule(x=>{o(x,E,C.Tone.getContext().currentTime),C.Tone.Draw.schedule(()=>{l?.(x,E)},x)},E.part.begin.valueOf())})};t.useEffect(()=>{a&&g()},[o,n,r,l,a]);const b=async()=>{s(!0),await C.Tone.start(),C.Tone.getTransport().start("+0.1")},f=()=>{C.Tone.getTransport().pause(),s(!1)};return{start:b,stop:f,onEvent:o,started:c,setStarted:s,toggle:()=>c?f():b(),query:g,activeCycle:i}}function Q(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(o=>window.postMessage(o,"*"),[])}let le=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const ue=e=>encodeURIComponent(btoa(e));function J({tune:e,autolink:o=!0,onEvent:r,onDraw:n}){const a=t.useMemo(()=>le(),[]),[l,c]=t.useState(e),[s,u]=t.useState(),[i,g]=t.useState(""),[b,f]=t.useState(),[k,h]=t.useState(!1),[M,v]=t.useState(""),[m,D]=t.useState(),_=t.useMemo(()=>l!==s||b,[l,s,b]),E=t.useCallback(w=>g(d=>d+`${d?`

`:""}${w}`),[]),x=t.useMemo(()=>{if(s&&!s.includes("strudel disable-highlighting"))return(w,d)=>n?.(w,d,s)},[s,n]),L=t.useMemo(()=>s&&s.includes("strudel hide-header"),[s]),q=t.useMemo(()=>s&&s.includes("strudel hide-console"),[s]),R=U({onDraw:x,onEvent:t.useCallback((w,d,Y)=>{try{r?.(d),d.context.logs?.length&&d.context.logs.forEach(E);const{onTrigger:F=oe.webaudioOutputTrigger}=d.context;F(w,d,Y,1)}catch(F){console.warn(F),F.message="unplayable event: "+F?.message,E(F.message)}},[r,E]),onQuery:t.useCallback(w=>{try{return m?.query(w)||[]}catch(d){return console.warn(d),d.message="query error: "+d.message,f(d),[]}},[m]),onSchedule:t.useCallback((w,d)=>X(w),[]),ready:!!m&&!!s}),O=Q(({data:{from:w,type:d}})=>{d==="start"&&w!==a&&(R.setStarted(!1),u(void 0))}),I=t.useCallback(async(w=l)=>{if(s&&!_){f(void 0),R.start();return}try{h(!0);const d=await B.evaluate(w);R.start(),O({type:"start",from:a}),D(()=>d.pattern),o&&(window.location.hash="#"+encodeURIComponent(btoa(l))),v(ue(l)),f(void 0),u(w),h(!1)}catch(d){d.message="evaluation error: "+d.message,console.warn(d),f(d)}},[s,_,l,R,o,a,O]),X=(w,d)=>{w.length};return{hideHeader:L,hideConsole:q,pending:k,code:l,setCode:c,pattern:m,error:b,cycle:R,setPattern:D,dirty:_,log:i,togglePlay:()=>{R.started?R.stop():I()},setActiveCode:u,activateCode:I,activeCode:s,pushLog:E,hash:M}}function H(...e){return e.filter(Boolean).join(" ")}function G({view:e,pattern:o,active:r,getTime:n}){const a=t.useRef([]),l=t.useRef();t.useEffect(()=>{if(e)if(o&&r){let s=function(){try{const u=n(),g=[Math.max(l.current||u,u-1/10),u+1/60];l.current=u+1/60,a.current=a.current.filter(f=>f.whole.end>u);const b=o.queryArc(...g).filter(f=>f.hasOnset());a.current=a.current.concat(b),e.dispatch({effects:P.of(a.current)})}catch{e.dispatch({effects:P.of([])})}c=requestAnimationFrame(s)},c=requestAnimationFrame(s);return()=>{cancelAnimationFrame(c)}}else a.current=[],e.dispatch({effects:P.of([])})},[o,r,e])}const de="_container_3i85k_1",fe="_header_3i85k_5",ge="_buttons_3i85k_9",he="_button_3i85k_9",me="_buttonDisabled_3i85k_17",pe="_error_3i85k_21",be="_body_3i85k_25",N={container:de,header:fe,buttons:ge,button:he,buttonDisabled:me,error:pe,body:be};function V({type:e}){return y.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"sc-h-5 sc-w-5",viewBox:"0 0 20 20",fill:"currentColor"},{refresh:y.default.createElement("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"}),play:y.default.createElement("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"}),pause:y.default.createElement("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"})}[e])}function ye({tune:e,hideOutsideView:o=!1,init:r,onEvent:n,enableKeyboard:a}){const{code:l,setCode:c,pattern:s,activeCode:u,activateCode:i,evaluateOnly:g,error:b,cycle:f,dirty:k,togglePlay:h,stop:M}=J({tune:e,autolink:!1,onEvent:n});t.useEffect(()=>{r&&g()},[e,r]);const[v,m]=t.useState(),[D,_]=se.useInView({threshold:.01}),E=t.useRef(),x=t.useMemo(()=>((_||!o)&&(E.current=!0),_||E.current),[_,o]);return G({view:v,pattern:s,active:f.started&&!u?.includes("strudel disable-highlighting"),getTime:()=>C.Tone.getTransport().seconds}),t.useLayoutEffect(()=>{if(a){const L=async q=>{(q.ctrlKey||q.altKey)&&(q.code==="Enter"?(q.preventDefault(),$(v),await i()):q.code==="Period"&&(f.stop(),q.preventDefault()))};return window.addEventListener("keydown",L,!0),()=>window.removeEventListener("keydown",L,!0)}},[a,s,l,i,f,v]),y.default.createElement("div",{className:N.container,ref:D},y.default.createElement("div",{className:N.header},y.default.createElement("div",{className:N.buttons},y.default.createElement("button",{className:H(N.button,f.started?"sc-animate-pulse":""),onClick:()=>h()},y.default.createElement(V,{type:f.started?"pause":"play"})),y.default.createElement("button",{className:H(k?N.button:N.buttonDisabled),onClick:()=>i()},y.default.createElement(V,{type:"refresh"}))),b&&y.default.createElement("div",{className:N.error},b.message)),y.default.createElement("div",{className:N.body},x&&y.default.createElement(K,{value:l,onChange:c,onViewChanged:m})))}function we(e,o,r=.05,n=.1,a=.1){let l=0,c=0,s=10**4,u=.01;const i=m=>r=m(r);a=a||n/2;const g=()=>{const m=e(),D=m+n+a;for(c===0&&(c=m+u);c<D;)c=Math.round(c*s)/s,c>=m&&o(c,r,l),c<m&&console.log("TOO LATE",c),c+=r,l++};let b;const f=()=>{g(),b=setInterval(g,n*1e3)},k=()=>clearInterval(b);return{setDuration:i,start:f,stop:()=>{l=0,c=0,k()},pause:()=>k(),duration:r,getPhase:()=>c}}class ve{worker;pattern;started=!1;cps=1;getTime;phase=0;constructor({interval:o,onTrigger:r,onError:n,getTime:a,latency:l=.1}){this.getTime=a;const c=s=>Math.round(s*1e3)/1e3;this.clock=we(a,(s,u,i)=>{i===0&&(this.origin=s);const g=c(s-this.origin);this.phase=g-l;const b=c(g+u),f=a();try{this.pattern.queryArc(g,b).forEach(h=>{if(h.part.begin.equals(h.whole.begin)){const M=h.whole.begin+this.origin-f+l,v=h.duration*1;r?.(h,M,v)}})}catch(k){console.warn("scheduler error",k),n?.(k)}},o)}getPhase(){return this.phase}start(){if(!this.pattern)throw new Error("Scheduler: no pattern set! call .setPattern first.");this.clock.start(),this.started=!0}pause(){this.clock.stop(),delete this.origin,this.started=!1}stop(){delete this.origin,this.clock.stop(),this.started=!1}setPattern(o){this.pattern=o}setCps(o=1){this.cps=o}log(o,r,n){const a=n.filter(l=>l.hasOnset());console.log(`${o.toFixed(4)} - ${r.toFixed(4)} ${Array(a.length).fill("I").join("")}`)}}function Ee({defaultOutput:e,interval:o,getTime:r,code:n,evalOnMount:a=!1}){const[l,c]=t.useState(),[s,u]=t.useState(),[i,g]=t.useState(n),[b,f]=t.useState(),k=n!==i,h=t.useMemo(()=>new ve({interval:o,onTrigger:e,onError:c,getTime:r}),[e,o]),M=t.useCallback(async()=>{if(!n){console.log("no code..");return}try{const{pattern:m}=await B.evaluate(n);g(n),h?.setPattern(m),f(m),u()}catch(m){u(m),console.warn("eval error",m)}},[n,h]),v=t.useRef();return t.useEffect(()=>{!v.current&&a&&(v.current=!0,M())},[M,a]),{schedulerError:l,scheduler:h,evalError:s,evaluate:M,activeCode:i,isDirty:k,pattern:b}}const ke=e=>t.useLayoutEffect(()=>(window.addEventListener("keydown",e,!0),()=>window.removeEventListener("keydown",e,!0)),[e]);function Me(e){const{ready:o,connected:r,disconnected:n}=e,[a,l]=t.useState(!0),[c,s]=t.useState(T.WebMidi?.outputs||[]);return t.useEffect(()=>{T.enableWebMidi().then(()=>{T.WebMidi.addListener("connected",i=>{s([...T.WebMidi.outputs]),r?.(T.WebMidi,i)}),T.WebMidi.addListener("disconnected",i=>{s([...T.WebMidi.outputs]),n?.(T.WebMidi,i)}),o?.(T.WebMidi),l(!1)}).catch(i=>{if(i){console.error(i),console.warn("Web Midi could not be enabled..");return}})},[o,r,n,c]),{loading:a,outputs:c,outputByName:i=>T.WebMidi.getOutputByName(i)}}exports.CodeMirror=K;exports.MiniRepl=ye;exports.cx=H;exports.flash=$;exports.useCycle=U;exports.useHighlighting=G;exports.useKeydown=ke;exports.usePostMessage=Q;exports.useRepl=J;exports.useStrudel=Ee;exports.useWebMidi=Me;