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

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