Files
strudel/packages/react/dist/index.cjs.js
T
2022-06-06 19:10:23 +02:00

4 lines
10 KiB
JavaScript

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("react"),re=require("react-codemirror6"),H=require("@codemirror/view"),Q=require("@codemirror/state"),ne=require("@codemirror/lang-javascript"),n=require("@codemirror/highlight"),se=require("react-hook-inview"),ce=require("@strudel.cycles/eval"),le=require("@strudel.cycles/core/util.mjs"),p=require("@strudel.cycles/tone"),j=require("@strudel.cycles/core"),C=require("@strudel.cycles/midi");function ie(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var u=ie(t);const ue="#abb2bf",de="#7d8799",fe="#ffffff",ge="#21252b",z="rgba(0, 0, 0, 0.5)",me="transparent",A="#353a42",be="rgba(128, 203, 196, 0.5)",I="#ffcc00",pe=H.EditorView.theme({"&":{color:"#ffffff",backgroundColor:me,fontSize:"15px","z-index":11},".cm-content":{caretColor:I,lineHeight:"22px"},".cm-line":{background:"#2C323699"},"&.cm-focused .cm-cursor":{backgroundColor:I,width:"3px"},"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":{backgroundColor:be},".cm-panels":{backgroundColor:ge,color:"#ffffff"},".cm-panels.cm-panels-top":{borderBottom:"2px solid black"},".cm-panels.cm-panels-bottom":{borderTop:"2px solid black"},".cm-searchMatch":{backgroundColor:"#72a1ff59",outline:"1px solid #457dff"},".cm-searchMatch.cm-searchMatch-selected":{backgroundColor:"#6199ff2f"},".cm-activeLine":{backgroundColor:z},".cm-selectionMatch":{backgroundColor:"#aafe661a"},"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{backgroundColor:"#bad0f847",outline:"1px solid #515a6b"},".cm-gutters":{background:"transparent",color:"#676e95",border:"none"},".cm-activeLineGutter":{backgroundColor:z},".cm-foldPlaceholder":{backgroundColor:"transparent",border:"none",color:"#ddd"},".cm-tooltip":{border:"none",backgroundColor:A},".cm-tooltip .cm-tooltip-arrow:before":{borderTopColor:"transparent",borderBottomColor:"transparent"},".cm-tooltip .cm-tooltip-arrow:after":{borderTopColor:A,borderBottomColor:A},".cm-tooltip-autocomplete":{"& > ul > li[aria-selected]":{backgroundColor:z,color:ue}}},{dark:!0}),he=n.HighlightStyle.define([{tag:n.tags.keyword,color:"#c792ea"},{tag:n.tags.operator,color:"#89ddff"},{tag:n.tags.special(n.tags.variableName),color:"#eeffff"},{tag:n.tags.typeName,color:"#f07178"},{tag:n.tags.atom,color:"#f78c6c"},{tag:n.tags.number,color:"#ff5370"},{tag:n.tags.definition(n.tags.variableName),color:"#82aaff"},{tag:n.tags.string,color:"#c3e88d"},{tag:n.tags.special(n.tags.string),color:"#f07178"},{tag:n.tags.comment,color:de},{tag:n.tags.variableName,color:"#f07178"},{tag:n.tags.tagName,color:"#ff5370"},{tag:n.tags.bracket,color:"#a2a1a4"},{tag:n.tags.meta,color:"#ffcb6b"},{tag:n.tags.attributeName,color:"#c792ea"},{tag:n.tags.propertyName,color:"#c792ea"},{tag:n.tags.className,color:"#decb6b"},{tag:n.tags.invalid,color:fe}]),ve=[pe,he],W=Q.StateEffect.define(),ye=Q.StateField.define({create(){return H.Decoration.none},update(e,a){try{for(let i of a.effects)i.is(W)&&(e=H.Decoration.set(i.value.flatMap(d=>(d.context.locations||[]).map(({start:f,end:s})=>{const c=d.context.color||"#FFCA28";let m=a.newDoc.line(f.line).from+f.column,l=a.newDoc.line(s.line).from+s.column;const r=a.newDoc.length;return m>r||l>r?void 0:H.Decoration.mark({attributes:{style:`outline: 1px solid ${c}`}}).range(m,l)})).filter(Boolean),!0));return e}catch{return e}},provide:e=>H.EditorView.decorations.from(e)});function U({value:e,onChange:a,onViewChanged:i,onCursor:d,options:f,editorDidMount:s,theme:c}){return u.default.createElement(u.default.Fragment,null,u.default.createElement(re.CodeMirror,{onViewChange:i,style:{display:"flex",flexDirection:"column",flex:"1 0 auto"},value:e,onChange:a,extensions:[ne.javascript(),c||ve,ye]}))}function G(e){const{onEvent:a,onQuery:i,onSchedule:d,ready:f=!0,onDraw:s}=e,[c,m]=t.useState(!1),l=1,r=()=>Math.floor(p.Tone.getTransport().seconds/l),M=(h=r())=>{const N=new j.TimeSpan(h,h+1),R=i?.(new j.State(N))||[];d?.(R,h);const B=N.begin.valueOf();p.Tone.getTransport().cancel(B);const k=(h+1)*l-.5,E=Math.max(p.Tone.getTransport().seconds,k)+.1;p.Tone.getTransport().schedule(()=>{M(h+1)},E),R?.filter(b=>b.part.begin.equals(b.whole?.begin)).forEach(b=>{p.Tone.getTransport().schedule(y=>{a(y,b,p.Tone.getContext().currentTime),p.Tone.Draw.schedule(()=>{s?.(y,b)},y)},b.part.begin.valueOf())})};t.useEffect(()=>{f&&M()},[a,d,i,s,f]);const _=async()=>{m(!0),await p.Tone.start(),p.Tone.getTransport().start("+0.1")},v=(h=!1)=>{h?(p.Tone.getTransport().cancel(),p.Tone.getTransport().stop()):p.Tone.getTransport().pause(),m(!1)};return{start:_,stop:v,onEvent:a,started:c,setStarted:m,toggle:()=>c?v():_(),query:M,activeCycle:r}}function J(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(a=>window.postMessage(a,"*"),[])}let Ce=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const we=e=>encodeURIComponent(btoa(e));function K({tune:e,defaultSynth:a,autolink:i=!0,onEvent:d,onDraw:f}){const s=t.useMemo(()=>Ce(),[]),[c,m]=t.useState(e),[l,r]=t.useState(),[M,_]=t.useState(""),[v,S]=t.useState(),[h,N]=t.useState(!1),[R,B]=t.useState(""),[k,E]=t.useState(),b=t.useMemo(()=>c!==l||v,[c,l,v]),y=t.useCallback(g=>_(o=>o+`${o?`
`:""}${g}`),[]),Y=t.useMemo(()=>{if(l&&!l.includes("strudel disable-highlighting"))return(g,o)=>f?.(g,o,l)},[l,f]),T=G({onDraw:Y,onEvent:t.useCallback((g,o,x)=>{try{d?.(o),o.context.logs?.length&&o.context.logs.forEach(y);const{onTrigger:q,velocity:oe}=o.context;if(q)q(g,o,x,1,o.wholeOrPart().begin.valueOf(),o.duration.valueOf());else if(a){const ae=le.getPlayableNoteValue(o);a.triggerAttackRelease(ae,o.duration.valueOf(),g,oe)}else throw new Error("no defaultSynth passed to useRepl.")}catch(q){console.warn(q),q.message="unplayable event: "+q?.message,y(q.message)}},[d,y,a]),onQuery:t.useCallback(g=>{try{return k?.query(g)||[]}catch(o){return console.warn(o),o.message="query error: "+o.message,S(o),[]}},[k]),onSchedule:t.useCallback((g,o)=>Z(g,o),[]),ready:!!k&&!!l}),O=J(({data:{from:g,type:o}})=>{o==="start"&&g!==s&&(T.setStarted(!1),r(void 0))}),V=t.useCallback(async(g=c,o=!1)=>{if(l&&!b){S(void 0),!o&&T.start();return}try{N(!0);const x=await ce.evaluate(g);!o&&T.start(),O({type:"start",from:s}),E(()=>x.pattern),i&&(window.location.hash="#"+encodeURIComponent(btoa(c))),B(we(c)),S(void 0),r(g),N(!1)}catch(x){x.message="evaluation error: "+x.message,console.warn(x),S(x)}},[l,b,c,T,i,s,O]),Z=(g,o)=>{g.length},ee=()=>{T.started?T.stop():V()},F=()=>{T.stop(!0),r(void 0)},te=()=>{V(c,!0)};return t.useEffect(()=>()=>F(),[]),{pending:h,code:c,setCode:m,pattern:k,error:v,cycle:T,setPattern:E,dirty:b,log:M,togglePlay:ee,stop:F,setActiveCode:r,activateCode:V,evaluateOnly:te,activeCode:l,pushLog:y,hash:R}}function P(...e){return e.filter(Boolean).join(" ")}let D=[],$;function X({view:e,pattern:a,active:i}){t.useEffect(()=>{if(e)if(a&&i){let f=function(){try{const s=p.Tone.getTransport().seconds,m=[Math.max($||s,s-1/10),s+1/60];$=s+1/60,D=D.filter(r=>r.whole.end>s);const l=a.queryArc(...m).filter(r=>r.hasOnset());D=D.concat(l),e.dispatch({effects:W.of(D)})}catch{e.dispatch({effects:W.of([])})}d=requestAnimationFrame(f)},d=requestAnimationFrame(f);return()=>{cancelAnimationFrame(d)}}else D=[],e.dispatch({effects:W.of([])})},[a,i,e])}const Me="_container_10e1g_1",ke="_header_10e1g_5",Ee="_buttons_10e1g_9",Te="_button_10e1g_9",xe="_buttonDisabled_10e1g_17",_e="_error_10e1g_21",Se="_body_10e1g_25";var w={container:Me,header:ke,buttons:Ee,button:Te,buttonDisabled:xe,error:_e,body:Se};function L({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:"M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z",clipRule:"evenodd"})}[e])}function Ne({tune:e,defaultSynth:a,hideOutsideView:i=!1,theme:d,init:f}){const{code:s,setCode:c,pattern:m,activeCode:l,activateCode:r,evaluateOnly:M,error:_,cycle:v,dirty:S,togglePlay:h,stop:N}=K({tune:e,defaultSynth:a,autolink:!1});t.useEffect(()=>{f&&M()},[e,f]);const[R,B]=t.useState(),[k,E]=se.useInView({threshold:.01}),b=t.useRef(),y=t.useMemo(()=>((E||!i)&&(b.current=!0),E||b.current),[E,i]);return X({view:R,pattern:m,active:v.started&&!l?.includes("strudel disable-highlighting")}),u.default.createElement("div",{className:w.container,ref:k},u.default.createElement("div",{className:w.header},u.default.createElement("div",{className:w.buttons},u.default.createElement("button",{className:P(w.button,v.started?"sc-animate-pulse":""),onClick:()=>h()},u.default.createElement(L,{type:v.started?"pause":"play"})),u.default.createElement("button",{className:P(S?w.button:w.buttonDisabled),onClick:()=>r()},u.default.createElement(L,{type:"refresh"})),u.default.createElement("button",{className:P(w.button),onClick:()=>N(!0)},u.default.createElement(L,{type:"stop"}))),_&&u.default.createElement("div",{className:w.error},_.message)),u.default.createElement("div",{className:w.body},y&&u.default.createElement(U,{theme:d,value:s,onChange:c,onViewChanged:B})))}function qe(e){const{ready:a,connected:i,disconnected:d}=e,[f,s]=t.useState(!0),[c,m]=t.useState(C.WebMidi?.outputs||[]);return t.useEffect(()=>{C.enableWebMidi().then(()=>{C.WebMidi.addListener("connected",r=>{m([...C.WebMidi.outputs]),i?.(C.WebMidi,r)}),C.WebMidi.addListener("disconnected",r=>{m([...C.WebMidi.outputs]),d?.(C.WebMidi,r)}),a?.(C.WebMidi),s(!1)}).catch(r=>{if(r){console.error(r),console.warn("Web Midi could not be enabled..");return}})},[a,i,d,c]),{loading:f,outputs:c,outputByName:r=>C.WebMidi.getOutputByName(r)}}exports.CodeMirror=U;exports.MiniRepl=Ne;exports.cx=P;exports.useCycle=G;exports.useHighlighting=X;exports.usePostMessage=J;exports.useRepl=K;exports.useWebMidi=qe;