strudel/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"),b=require("@codemirror/view"),x=require("@codemirror/state"),ee=require("@codemirror/lang-javascript"),c=require("@lezer/highlight"),te=require("@uiw/codemirror-themes"),K=require("@strudel.cycles/core"),I=require("@strudel.cycles/webaudio"),re=require("react-hook-inview"),ae=require("@strudel.cycles/transpiler"),U=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=U(t),oe=U(Z),ne=te.createTheme({theme:"dark",settings:{background:"#222",foreground:"#75baff",caret:"#ffcc00",selection:"rgba(128, 203, 196, 0.5)",selectionMatch:"#036dd626",lineHighlight:"#00000050",gutterBackground:"transparent",gutterForeground:"#8a919966"},styles:[{tag:c.tags.keyword,color:"#c792ea"},{tag:c.tags.operator,color:"#89ddff"},{tag:c.tags.special(c.tags.variableName),color:"#eeffff"},{tag:c.tags.typeName,color:"#c3e88d"},{tag:c.tags.atom,color:"#f78c6c"},{tag:c.tags.number,color:"#c3e88d"},{tag:c.tags.definition(c.tags.variableName),color:"#82aaff"},{tag:c.tags.string,color:"#c3e88d"},{tag:c.tags.special(c.tags.string),color:"#c3e88d"},{tag:c.tags.comment,color:"#7d8799"},{tag:c.tags.variableName,color:"#c792ea"},{tag:c.tags.tagName,color:"#c3e88d"},{tag:c.tags.bracket,color:"#525154"},{tag:c.tags.meta,color:"#ffcb6b"},{tag:c.tags.attributeName,color:"#c792ea"},{tag:c.tags.propertyName,color:"#c792ea"},{tag:c.tags.className,color:"#decb6b"},{tag:c.tags.invalid,color:"#ffffff"}]});const z=x.StateEffect.define(),se=x.StateField.define({create(){return b.Decoration.none},update(e,r){try{for(let a of r.effects)if(a.is(z))if(a.value){const s=b.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=b.Decoration.set([s.range(0,r.newDoc.length)])}else e=b.Decoration.set([]);return e}catch(a){return console.warn("flash error",a),e}},provide:e=>b.EditorView.decorations.from(e)}),W=e=>{e.dispatch({effects:z.of(!0)}),setTimeout(()=>{e.dispatch({effects:z.of(!1)})},200)},A=x.StateEffect.define(),ce=x.StateField.define({create(){return b.Decoration.none},update(e,r){try{for(let a of r.effects)if(a.is(A)){const s=a.value.map(n=>(n.context.locations||[]).map(({start:i,end:l})=>{const f=n.context.color||"#FFCA28";let o=r.newDoc.line(i.line).from+i.column,d=r.newDoc.line(l.line).from+l.column;const m=r.newDoc.length;return o>m||d>m?void 0:b.Decoration.mark({attributes:{style:`outline: 1.5px solid ${f};`}}).range(o,d)})).flat().filter(Boolean)||[];e=b.Decoration.set(s,!0)}return e}catch{return b.Decoration.set([])}},provide:e=>b.EditorView.decorations.from(e)}),ie=[ee.javascript(),ne,ce,se];function $({value:e,onChange:r,onViewChanged:a,onSelectionChange:s,options:n,editorDidMount:i}){const l=t.useCallback(d=>{r?.(d)},[r]),f=t.useCallback(d=>{a?.(d)},[a]),o=t.useCallback(d=>{d.selectionSet&&s&&s?.(d.state.selection)},[s]);return u.default.createElement(u.default.Fragment,null,u.default.createElement(oe.default,{value:e,onChange:l,onCreateEditor:f,onUpdate:o,extensions:ie}))}function V(...e){return e.filter(Boolean).join(" ")}function J({view:e,pattern:r,active:a,getTime:s}){const n=t.useRef([]),i=t.useRef();t.useEffect(()=>{if(e)if(r&&a){let l=requestAnimationFrame(function f(){try{const o=s(),m=[Math.max(i.current||o,o-1/10,0),o+1/60];i.current=m[1],n.current=n.current.filter(w=>w.whole.end>o);const h=r.queryArc(...m).filter(w=>w.hasOnset());n.current=n.current.concat(h),e.dispatch({effects:A.of(n.current)})}catch{e.dispatch({effects:A.of([])})}l=requestAnimationFrame(f)});return()=>{cancelAnimationFrame(l)}}else n.current=[],e.dispatch({effects:A.of([])})},[r,a,e])}function le(e,r=!1){const a=t.useRef(),s=t.useRef(),n=f=>{if(s.current!==void 0){const o=f-s.current;e(f,o)}s.current=f,a.current=requestAnimationFrame(n)},i=()=>{a.current=requestAnimationFrame(n)},l=()=>{a.current&&cancelAnimationFrame(a.current),delete a.current};return t.useEffect(()=>{a.current&&(l(),i())},[e]),t.useEffect(()=>(r&&i(),l),[]),{start:i,stop:l}}function ue({pattern:e,started:r,getTime:a,onDraw:s}){let n=t.useRef([]),i=t.useRef(null);const{start:l,stop:f}=le(t.useCallback(()=>{const o=a();if(i.current===null){i.current=o;return}const d=e.queryArc(Math.max(i.current,o-1/10),o),m=4;i.current=o,n.current=(n.current||[]).filter(h=>h.whole.end>o-m).concat(d.filter(h=>h.hasOnset())),s(o,n.current)},[e]));t.useEffect(()=>{r?l():(n.current=[],f())},[r])}function G(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(r=>window.postMessage(r,"*"),[])}function Q({defaultOutput:e,interval:r,getTime:a,evalOnMount:s=!1,initialCode:n="",autolink:i=!1,beforeEval:l,afterEval:f,onEvalError:o,onToggle:d,canvasId:m}){const h=t.useMemo(()=>de(),[]);m=m||`canvas-${h}`;const[w,_]=t.useState(),[k,M]=t.useState(),[E,D]=t.useState(n),[F,R]=t.useState(),[T,P]=t.useState(),[C,q]=t.useState(!1),H=E!==F,{scheduler:g,evaluate:v,start:L,stop:j,pause:X}=t.useMemo(()=>K.repl({interval:r,defaultOutput:e,onSchedulerError:_,onEvalError:p=>{M(p),o?.(p)},getTime:a,transpiler:ae.transpiler,beforeEval:({code:p})=>{D(p),l?.()},afterEval:({pattern:p,code:N})=>{R(N),P(p),M(),_(),i&&(window.location.hash="#"+encodeURIComponent(btoa(N))),f?.()},onToggle:p=>{q(p),d?.(p)}}),[e,r,a]),Y=G(({data:{from:p,type:N}})=>{N==="start"&&p!==h&&j()}),S=t.useCallback(async(p=!0)=>{await v(E,p),Y({type:"start",from:h})},[v,E]),O=t.useRef();return t.useEffect(()=>{!O.current&&s&&E&&(O.current=!0,S())},[S,s,E]),t.useEffect(()=>()=>{g.stop()},[g]),{id:h,canvasId:m,code:E,setCode:D,error:w||k,schedulerError:w,scheduler:g,evalError:k,evaluate:v,activateCode:S,activeCode:F,isDirty:H,pattern:T,started:C,start:L,stop:j,pause:X,togglePlay:async()=>{C?g.pause():await S()}}}function de(){return Math.floor((1+Math.random())*65536).toString(16).substring(1)}function B({type:e}){return u.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:u.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:u.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:u.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])}const fe="_container_3i85k_1",ge="_header_3i85k_5",me="_buttons_3i85k_9",he="_button_3i85k_9",pe="_buttonDisabled_3i85k_17",ve="_error_3i85k_21",be="_body_3i85k_25",y={container:fe,header:ge,buttons:me,button:he,buttonDisabled:pe,error:ve,body:be},we=()=>I.getAudioContext().currentTime;function Ee({tune:e,hideOutsideView:r=!1,init:a,enableKeyboard:s,withCanvas:n=!1,canvasHeight:i=200}){const{code:l,setCode:f,evaluate:o,activateCode:d,error:m,isDirty:h,activeCode:w,pattern:_,started:k,scheduler:M,togglePlay:E,stop:D,canvasId:F}=Q({initialCode:e,defaultOutput:I.webaudioOutput,getTime:we});ue({pattern:_,started:k,getTime:()=>M.now(),onDraw:(g,v)=>{const L=document.querySelector("#"+F).getContext("2d");K.pianoroll({ctx:L,time:g,haps:v,autorange:1,fold:1,playhead:1})}});const[R,T]=t.useState(),[P,C]=re.useInView({threshold:.01}),q=t.useRef(),H=t.useMemo(()=>((C||!r)&&(q.current=!0),C||q.current),[C,r]);return J({view:R,pattern:_,active:k&&!w?.includes("strudel disable-highlighting"),getTime:()=>M.getPhase()}),t.useLayoutEffect(()=>{if(s){const g=async v=>{(v.ctrlKey||v.altKey)&&(v.code==="Enter"?(v.preventDefault(),W(R),await d()):v.code==="Period"&&(D(),v.preventDefault()))};return window.addEventListener("keydown",g,!0),()=>window.removeEventListener("keydown",g,!0)}},[s,_,l,o,D,R]),u.default.createElement("div",{className:y.container,ref:P},u.default.createElement("div",{className:y.header},u.default.createElement("div",{className:y.buttons},u.default.createElement("button",{className:V(y.button,k?"sc-animate-pulse":""),onClick:()=>E()},u.default.createElement(B,{type:k?"pause":"play"})),u.default.createElement("button",{className:V(h?y.button:y.buttonDisabled),onClick:()=>d()},u.default.createElement(B,{type:"refresh"}))),m&&u.default.createElement("div",{className:y.error},m.message)),u.default.createElement("div",{className:y.body},H&&u.default.createElement($,{value:l,onChange:f,onViewChanged:T})),n&&u.default.createElement("canvas",{id:F,className:"w-full pointer-events-none",height:i,ref:g=>{g&&g.width!==g.clientWidth&&(g.width=g.clientWidth)}}))}const ye=e=>t.useLayoutEffect(()=>(window.addEventListener("keydown",e,!0),()=>window.removeEventListener("keydown",e,!0)),[e]);exports.CodeMirror=$;exports.MiniRepl=Ee;exports.cx=V;exports.flash=W;exports.useHighlighting=J;exports.useKeydown=ye;exports.usePostMessage=G;exports.useStrudel=Q;