From 37dc723b4b8baf2a38c61873eed09620a6e99a39 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Mon, 26 Dec 2022 22:44:23 +0100 Subject: [PATCH] react package build... --- packages/react/dist/index.cjs.js | 2 +- packages/react/dist/index.es.js | 375 +++++++++++++++---------------- 2 files changed, 185 insertions(+), 192 deletions(-) diff --git a/packages/react/dist/index.cjs.js b/packages/react/dist/index.cjs.js index 1d12bd87..187182bf 100644 --- a/packages/react/dist/index.cjs.js +++ b/packages/react/dist/index.cjs.js @@ -1 +1 @@ -"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; +"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),Z=require("@uiw/react-codemirror"),w=require("@codemirror/view"),x=require("@codemirror/state"),ee=require("@codemirror/lang-javascript"),s=require("@lezer/highlight"),te=require("@uiw/codemirror-themes"),B=require("@strudel.cycles/core"),K=require("@strudel.cycles/webaudio"),re=require("react-hook-inview"),ae=require("@strudel.cycles/transpiler"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=I(t),oe=I(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:s.tags.keyword,color:"#c792ea"},{tag:s.tags.operator,color:"#89ddff"},{tag:s.tags.special(s.tags.variableName),color:"#eeffff"},{tag:s.tags.typeName,color:"#c3e88d"},{tag:s.tags.atom,color:"#f78c6c"},{tag:s.tags.number,color:"#c3e88d"},{tag:s.tags.definition(s.tags.variableName),color:"#82aaff"},{tag:s.tags.string,color:"#c3e88d"},{tag:s.tags.special(s.tags.string),color:"#c3e88d"},{tag:s.tags.comment,color:"#7d8799"},{tag:s.tags.variableName,color:"#c792ea"},{tag:s.tags.tagName,color:"#c3e88d"},{tag:s.tags.bracket,color:"#525154"},{tag:s.tags.meta,color:"#ffcb6b"},{tag:s.tags.attributeName,color:"#c792ea"},{tag:s.tags.propertyName,color:"#c792ea"},{tag:s.tags.className,color:"#decb6b"},{tag:s.tags.invalid,color:"#ffffff"}]});const L=x.StateEffect.define(),se=x.StateField.define({create(){return w.Decoration.none},update(e,a){try{for(let r of a.effects)if(r.is(L))if(r.value){const c=w.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=w.Decoration.set([c.range(0,a.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)}),U=e=>{e.dispatch({effects:L.of(!0)}),setTimeout(()=>{e.dispatch({effects:L.of(!1)})},200)},A=x.StateEffect.define(),ce=x.StateField.define({create(){return w.Decoration.none},update(e,a){try{for(let r of a.effects)if(r.is(A)){const c=r.value.map(n=>(n.context.locations||[]).map(({start:i,end:u})=>{const f=n.context.color||"#FFCA28";let o=a.newDoc.line(i.line).from+i.column,d=a.newDoc.line(u.line).from+u.column;const g=a.newDoc.length;return o>g||d>g?void 0:w.Decoration.mark({attributes:{style:`outline: 1.5px solid ${f};`}}).range(o,d)})).flat().filter(Boolean)||[];e=w.Decoration.set(c,!0)}return e}catch{return w.Decoration.set([])}},provide:e=>w.EditorView.decorations.from(e)}),ie=[ee.javascript(),ne,ce,se];function W({value:e,onChange:a,onViewChanged:r,onSelectionChange:c,options:n,editorDidMount:i}){const u=t.useCallback(d=>{a?.(d)},[a]),f=t.useCallback(d=>{r?.(d)},[r]),o=t.useCallback(d=>{d.selectionSet&&c&&c?.(d.state.selection)},[c]);return l.default.createElement(l.default.Fragment,null,l.default.createElement(oe.default,{value:e,onChange:u,onCreateEditor:f,onUpdate:o,extensions:ie}))}function z(...e){return e.filter(Boolean).join(" ")}function $({view:e,pattern:a,active:r,getTime:c}){const n=t.useRef([]),i=t.useRef();t.useEffect(()=>{if(e)if(a&&r){let u=requestAnimationFrame(function f(){try{const o=c(),g=[Math.max(i.current||o,o-1/10,0),o+1/60];i.current=g[1],n.current=n.current.filter(b=>b.whole.end>o);const m=a.queryArc(...g).filter(b=>b.hasOnset());n.current=n.current.concat(m),e.dispatch({effects:A.of(n.current)})}catch{e.dispatch({effects:A.of([])})}u=requestAnimationFrame(f)});return()=>{cancelAnimationFrame(u)}}else n.current=[],e.dispatch({effects:A.of([])})},[a,r,e])}function le(e,a=!1){const r=t.useRef(),c=t.useRef(),n=f=>{if(c.current!==void 0){const o=f-c.current;e(f,o)}c.current=f,r.current=requestAnimationFrame(n)},i=()=>{r.current=requestAnimationFrame(n)},u=()=>{r.current&&cancelAnimationFrame(r.current),delete r.current};return t.useEffect(()=>{r.current&&(u(),i())},[e]),t.useEffect(()=>(a&&i(),u),[]),{start:i,stop:u}}function ue({pattern:e,started:a,getTime:r,onDraw:c}){let n=t.useRef([]),i=t.useRef(null);const{start:u,stop:f}=le(t.useCallback(()=>{const o=r();if(i.current===null){i.current=o;return}const d=e.queryArc(Math.max(i.current,o-1/10),o),g=4;i.current=o,n.current=(n.current||[]).filter(m=>m.whole.end>o-g).concat(d.filter(m=>m.hasOnset())),c(o,n.current)},[e]));t.useEffect(()=>{a?u():(n.current=[],f())},[a])}function J(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(a=>window.postMessage(a,"*"),[])}function G({defaultOutput:e,interval:a,getTime:r,evalOnMount:c=!1,initialCode:n="",autolink:i=!1,beforeEval:u,afterEval:f,onEvalError:o,onToggle:d,canvasId:g}){const m=t.useMemo(()=>de(),[]);g=g||`canvas-${m}`;const[b,k]=t.useState(),[C,q]=t.useState(),[E,M]=t.useState(n),[_,T]=t.useState(),[P,D]=t.useState(),[F,H]=t.useState(!1),v=E!==_,{scheduler:h,evaluate:R,start:Q,stop:V,pause:X}=t.useMemo(()=>B.repl({interval:a,defaultOutput:e,onSchedulerError:k,onEvalError:p=>{q(p),o?.(p)},getTime:r,transpiler:ae.transpiler,beforeEval:({code:p})=>{M(p),u?.()},afterEval:({pattern:p,code:N})=>{T(N),D(p),q(),k(),i&&(window.location.hash="#"+encodeURIComponent(btoa(N))),f?.()},onToggle:p=>{H(p),d?.(p)}}),[e,a,r]),Y=J(({data:{from:p,type:N}})=>{N==="start"&&p!==m&&V()}),S=t.useCallback(async(p=!0)=>{await R(E,p),Y({type:"start",from:m})},[R,E]),j=t.useRef();return t.useEffect(()=>{!j.current&&c&&E&&(j.current=!0,S())},[S,c,E]),t.useEffect(()=>()=>{h.stop()},[h]),{id:m,canvasId:g,code:E,setCode:M,error:b||C,schedulerError:b,scheduler:h,evalError:C,evaluate:R,activateCode:S,activeCode:_,isDirty:v,pattern:P,started:F,start:Q,stop:V,pause:X,togglePlay:async()=>{F?h.pause():await S()}}}function de(){return Math.floor((1+Math.random())*65536).toString(16).substring(1)}function O({type:e}){return l.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:l.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:l.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:l.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=()=>K.getAudioContext().currentTime;function Ee({tune:e,hideOutsideView:a=!1,enableKeyboard:r,withCanvas:c=!1,canvasHeight:n=200}){const{code:i,setCode:u,evaluate:f,activateCode:o,error:d,isDirty:g,activeCode:m,pattern:b,started:k,scheduler:C,togglePlay:q,stop:E,canvasId:M}=G({initialCode:e,defaultOutput:K.webaudioOutput,getTime:we});ue({pattern:b,started:k,getTime:()=>C.now(),onDraw:(v,h)=>{const R=document.querySelector("#"+M).getContext("2d");B.pianoroll({ctx:R,time:v,haps:h,autorange:1,fold:1,playhead:1})}});const[_,T]=t.useState(),[P,D]=re.useInView({threshold:.01}),F=t.useRef(),H=t.useMemo(()=>((D||!a)&&(F.current=!0),D||F.current),[D,a]);return $({view:_,pattern:b,active:k&&!m?.includes("strudel disable-highlighting"),getTime:()=>C.getPhase()}),t.useLayoutEffect(()=>{if(r){const v=async h=>{(h.ctrlKey||h.altKey)&&(h.code==="Enter"?(h.preventDefault(),U(_),await o()):h.code==="Period"&&(E(),h.preventDefault()))};return window.addEventListener("keydown",v,!0),()=>window.removeEventListener("keydown",v,!0)}},[r,b,i,f,E,_]),l.default.createElement("div",{className:y.container,ref:P},l.default.createElement("div",{className:y.header},l.default.createElement("div",{className:y.buttons},l.default.createElement("button",{className:z(y.button,k?"sc-animate-pulse":""),onClick:()=>q()},l.default.createElement(O,{type:k?"pause":"play"})),l.default.createElement("button",{className:z(g?y.button:y.buttonDisabled),onClick:()=>o()},l.default.createElement(O,{type:"refresh"}))),d&&l.default.createElement("div",{className:y.error},d.message)),l.default.createElement("div",{className:y.body},H&&l.default.createElement(W,{value:i,onChange:u,onViewChanged:T})),c&&l.default.createElement("canvas",{id:M,className:"w-full pointer-events-none",height:n,ref:v=>{v&&v.width!==v.clientWidth&&(v.width=v.clientWidth)}}))}const ye=e=>t.useLayoutEffect(()=>(window.addEventListener("keydown",e,!0),()=>window.removeEventListener("keydown",e,!0)),[e]);exports.CodeMirror=W;exports.MiniRepl=Ee;exports.cx=z;exports.flash=U;exports.useHighlighting=$;exports.useKeydown=ye;exports.usePostMessage=J;exports.useStrudel=G; diff --git a/packages/react/dist/index.es.js b/packages/react/dist/index.es.js index eb313a3f..0eb24591 100644 --- a/packages/react/dist/index.es.js +++ b/packages/react/dist/index.es.js @@ -1,9 +1,9 @@ -import l, { useCallback as M, useRef as E, useEffect as C, useMemo as B, useState as _, useLayoutEffect as W } from "react"; +import i, { useCallback as N, useRef as E, useEffect as C, useMemo as V, useState as _, useLayoutEffect as U } from "react"; import Y from "@uiw/react-codemirror"; -import { Decoration as y, EditorView as $ } from "@codemirror/view"; -import { StateEffect as G, StateField as J } from "@codemirror/state"; +import { Decoration as y, EditorView as W } from "@codemirror/view"; +import { StateEffect as $, StateField as G } from "@codemirror/state"; import { javascript as Z } from "@codemirror/lang-javascript"; -import { tags as s } from "@lezer/highlight"; +import { tags as a } from "@lezer/highlight"; import { createTheme as ee } from "@uiw/codemirror-themes"; import { repl as te, pianoroll as re } from "@strudel.cycles/core"; import { webaudioOutput as oe, getAudioContext as ne } from "@strudel.cycles/webaudio"; @@ -22,256 +22,256 @@ const ce = ee({ gutterForeground: "#8a919966" }, styles: [ - { tag: s.keyword, color: "#c792ea" }, - { tag: s.operator, color: "#89ddff" }, - { tag: s.special(s.variableName), color: "#eeffff" }, - { tag: s.typeName, color: "#c3e88d" }, - { tag: s.atom, color: "#f78c6c" }, - { tag: s.number, color: "#c3e88d" }, - { tag: s.definition(s.variableName), color: "#82aaff" }, - { tag: s.string, color: "#c3e88d" }, - { tag: s.special(s.string), color: "#c3e88d" }, - { tag: s.comment, color: "#7d8799" }, - { tag: s.variableName, color: "#c792ea" }, - { tag: s.tagName, color: "#c3e88d" }, - { tag: s.bracket, color: "#525154" }, - { tag: s.meta, color: "#ffcb6b" }, - { tag: s.attributeName, color: "#c792ea" }, - { tag: s.propertyName, color: "#c792ea" }, - { tag: s.className, color: "#decb6b" }, - { tag: s.invalid, color: "#ffffff" } + { tag: a.keyword, color: "#c792ea" }, + { tag: a.operator, color: "#89ddff" }, + { tag: a.special(a.variableName), color: "#eeffff" }, + { tag: a.typeName, color: "#c3e88d" }, + { tag: a.atom, color: "#f78c6c" }, + { tag: a.number, color: "#c3e88d" }, + { tag: a.definition(a.variableName), color: "#82aaff" }, + { tag: a.string, color: "#c3e88d" }, + { tag: a.special(a.string), color: "#c3e88d" }, + { tag: a.comment, color: "#7d8799" }, + { tag: a.variableName, color: "#c792ea" }, + { tag: a.tagName, color: "#c3e88d" }, + { tag: a.bracket, color: "#525154" }, + { tag: a.meta, color: "#ffcb6b" }, + { tag: a.attributeName, color: "#c792ea" }, + { tag: a.propertyName, color: "#c792ea" }, + { tag: a.className, color: "#decb6b" }, + { tag: a.invalid, color: "#ffffff" } ] }); -const O = G.define(), ie = J.define({ +const B = $.define(), ie = G.define({ create() { return y.none; }, - update(e, t) { + update(e, r) { try { - for (let r of t.effects) - if (r.is(O)) - if (r.value) { - const a = y.mark({ attributes: { style: "background-color: #FFCA2880" } }); - e = y.set([a.range(0, t.newDoc.length)]); + for (let t of r.effects) + if (t.is(B)) + if (t.value) { + const s = y.mark({ attributes: { style: "background-color: #FFCA2880" } }); + e = y.set([s.range(0, r.newDoc.length)]); } else e = y.set([]); return e; - } catch (r) { - return console.warn("flash error", r), e; + } catch (t) { + return console.warn("flash error", t), e; } }, - provide: (e) => $.decorations.from(e) + provide: (e) => W.decorations.from(e) }), le = (e) => { - e.dispatch({ effects: O.of(!0) }), setTimeout(() => { - e.dispatch({ effects: O.of(!1) }); + e.dispatch({ effects: B.of(!0) }), setTimeout(() => { + e.dispatch({ effects: B.of(!1) }); }, 200); -}, H = G.define(), ue = J.define({ +}, H = $.define(), ue = G.define({ create() { return y.none; }, - update(e, t) { + update(e, r) { try { - for (let r of t.effects) - if (r.is(H)) { - const a = r.value.map( - (n) => (n.context.locations || []).map(({ start: c, end: i }) => { + for (let t of r.effects) + if (t.is(H)) { + const s = t.value.map( + (n) => (n.context.locations || []).map(({ start: c, end: l }) => { const d = n.context.color || "#FFCA28"; - let o = t.newDoc.line(c.line).from + c.column, u = t.newDoc.line(i.line).from + i.column; - const m = t.newDoc.length; - return o > m || u > m ? void 0 : y.mark({ attributes: { style: `outline: 1.5px solid ${d};` } }).range(o, u); + let o = r.newDoc.line(c.line).from + c.column, u = r.newDoc.line(l.line).from + l.column; + const f = r.newDoc.length; + return o > f || u > f ? void 0 : y.mark({ attributes: { style: `outline: 1.5px solid ${d};` } }).range(o, u); }) ).flat().filter(Boolean) || []; - e = y.set(a, !0); + e = y.set(s, !0); } return e; } catch { return y.set([]); } }, - provide: (e) => $.decorations.from(e) + provide: (e) => W.decorations.from(e) }), de = [Z(), ce, ue, ie]; -function fe({ value: e, onChange: t, onViewChanged: r, onSelectionChange: a, options: n, editorDidMount: c }) { - const i = M( - (u) => { - t?.(u); - }, - [t] - ), d = M( +function fe({ value: e, onChange: r, onViewChanged: t, onSelectionChange: s, options: n, editorDidMount: c }) { + const l = N( (u) => { r?.(u); }, [r] - ), o = M( + ), d = N( (u) => { - u.selectionSet && a && a?.(u.state.selection); + t?.(u); }, - [a] + [t] + ), o = N( + (u) => { + u.selectionSet && s && s?.(u.state.selection); + }, + [s] ); - return /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(Y, { + return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(Y, { value: e, - onChange: i, + onChange: l, onCreateEditor: d, onUpdate: o, extensions: de })); } -function I(...e) { +function j(...e) { return e.filter(Boolean).join(" "); } -function me({ view: e, pattern: t, active: r, getTime: a }) { +function me({ view: e, pattern: r, active: t, getTime: s }) { const n = E([]), c = E(); C(() => { if (e) - if (t && r) { - let i = requestAnimationFrame(function d() { + if (r && t) { + let l = requestAnimationFrame(function d() { try { - const o = a(), m = [Math.max(c.current || o, o - 1 / 10, 0), o + 1 / 60]; - c.current = m[1], n.current = n.current.filter((v) => v.whole.end > o); - const g = t.queryArc(...m).filter((v) => v.hasOnset()); - n.current = n.current.concat(g), e.dispatch({ effects: H.of(n.current) }); + const o = s(), f = [Math.max(c.current || o, o - 1 / 10, 0), o + 1 / 60]; + c.current = f[1], n.current = n.current.filter((v) => v.whole.end > o); + const m = r.queryArc(...f).filter((v) => v.hasOnset()); + n.current = n.current.concat(m), e.dispatch({ effects: H.of(n.current) }); } catch { e.dispatch({ effects: H.of([]) }); } - i = requestAnimationFrame(d); + l = requestAnimationFrame(d); }); return () => { - cancelAnimationFrame(i); + cancelAnimationFrame(l); }; } else n.current = [], e.dispatch({ effects: H.of([]) }); - }, [t, r, e]); + }, [r, t, e]); } -function ge(e, t = !1) { - const r = E(), a = E(), n = (d) => { - if (a.current !== void 0) { - const o = d - a.current; +function ge(e, r = !1) { + const t = E(), s = E(), n = (d) => { + if (s.current !== void 0) { + const o = d - s.current; e(d, o); } - a.current = d, r.current = requestAnimationFrame(n); + s.current = d, t.current = requestAnimationFrame(n); }, c = () => { - r.current = requestAnimationFrame(n); - }, i = () => { - r.current && cancelAnimationFrame(r.current), delete r.current; + t.current = requestAnimationFrame(n); + }, l = () => { + t.current && cancelAnimationFrame(t.current), delete t.current; }; return C(() => { - r.current && (i(), c()); - }, [e]), C(() => (t && c(), i), []), { + t.current && (l(), c()); + }, [e]), C(() => (r && c(), l), []), { start: c, - stop: i + stop: l }; } -function pe({ pattern: e, started: t, getTime: r, onDraw: a }) { +function pe({ pattern: e, started: r, getTime: t, onDraw: s }) { let n = E([]), c = E(null); - const { start: i, stop: d } = ge( - M(() => { - const o = r(); + const { start: l, stop: d } = ge( + N(() => { + const o = t(); if (c.current === null) { c.current = o; return; } - const u = e.queryArc(Math.max(c.current, o - 1 / 10), o), m = 4; - c.current = o, n.current = (n.current || []).filter((g) => g.whole.end > o - m).concat(u.filter((g) => g.hasOnset())), a(o, n.current); + const u = e.queryArc(Math.max(c.current, o - 1 / 10), o), f = 4; + c.current = o, n.current = (n.current || []).filter((m) => m.whole.end > o - f).concat(u.filter((m) => m.hasOnset())), s(o, n.current); }, [e]) ); C(() => { - t ? i() : (n.current = [], d()); - }, [t]); + r ? l() : (n.current = [], d()); + }, [r]); } function he(e) { - return C(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), M((t) => window.postMessage(t, "*"), []); + return C(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), N((r) => window.postMessage(r, "*"), []); } function ve({ defaultOutput: e, - interval: t, - getTime: r, - evalOnMount: a = !1, + interval: r, + getTime: t, + evalOnMount: s = !1, initialCode: n = "", autolink: c = !1, - beforeEval: i, + beforeEval: l, afterEval: d, onEvalError: o, onToggle: u, - canvasId: m + canvasId: f }) { - const g = B(() => be(), []); - m = m || `canvas-${g}`; - const [v, F] = _(), [k, A] = _(), [b, D] = _(n), [x, R] = _(), [S, z] = _(), [N, T] = _(!1), L = b !== x, { scheduler: f, evaluate: h, start: V, stop: K, pause: Q } = B( + const m = V(() => be(), []); + f = f || `canvas-${m}`; + const [v, k] = _(), [M, T] = _(), [b, A] = _(n), [F, S] = _(), [z, D] = _(), [x, L] = _(!1), h = b !== F, { scheduler: g, evaluate: R, start: J, stop: O, pause: Q } = V( () => te({ - interval: t, + interval: r, defaultOutput: e, - onSchedulerError: F, + onSchedulerError: k, onEvalError: (p) => { - A(p), o?.(p); + T(p), o?.(p); }, - getTime: r, + getTime: t, transpiler: se, beforeEval: ({ code: p }) => { - D(p), i?.(); + A(p), l?.(); }, afterEval: ({ pattern: p, code: q }) => { - R(q), z(p), A(), F(), c && (window.location.hash = "#" + encodeURIComponent(btoa(q))), d?.(); + S(q), D(p), T(), k(), c && (window.location.hash = "#" + encodeURIComponent(btoa(q))), d?.(); }, onToggle: (p) => { - T(p), u?.(p); + L(p), u?.(p); } }), - [e, t, r] + [e, r, t] ), X = he(({ data: { from: p, type: q } }) => { - q === "start" && p !== g && K(); - }), P = M( + q === "start" && p !== m && O(); + }), P = N( async (p = !0) => { - await h(b, p), X({ type: "start", from: g }); + await R(b, p), X({ type: "start", from: m }); }, - [h, b] - ), j = E(); + [R, b] + ), K = E(); return C(() => { - !j.current && a && b && (j.current = !0, P()); - }, [P, a, b]), C(() => () => { - f.stop(); - }, [f]), { - id: g, - canvasId: m, + !K.current && s && b && (K.current = !0, P()); + }, [P, s, b]), C(() => () => { + g.stop(); + }, [g]), { + id: m, + canvasId: f, code: b, - setCode: D, - error: v || k, + setCode: A, + error: v || M, schedulerError: v, - scheduler: f, - evalError: k, - evaluate: h, + scheduler: g, + evalError: M, + evaluate: R, activateCode: P, - activeCode: x, - isDirty: L, - pattern: S, - started: N, - start: V, - stop: K, + activeCode: F, + isDirty: h, + pattern: z, + started: x, + start: J, + stop: O, pause: Q, togglePlay: async () => { - N ? f.pause() : await P(); + x ? g.pause() : await P(); } }; } function be() { return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1); } -function U({ type: e }) { - return /* @__PURE__ */ l.createElement("svg", { +function I({ type: e }) { + return /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "sc-h-5 sc-w-5", viewBox: "0 0 20 20", fill: "currentColor" }, { - refresh: /* @__PURE__ */ l.createElement("path", { + refresh: /* @__PURE__ */ i.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: /* @__PURE__ */ l.createElement("path", { + play: /* @__PURE__ */ i.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: /* @__PURE__ */ l.createElement("path", { + pause: /* @__PURE__ */ i.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" @@ -287,96 +287,89 @@ const we = "_container_3i85k_1", ye = "_header_3i85k_5", Ee = "_buttons_3i85k_9" error: Ce, body: Fe }, Ne = () => ne().currentTime; -function Be({ - tune: e, - hideOutsideView: t = !1, - init: r, - enableKeyboard: a, - withCanvas: n = !1, - canvasHeight: c = 200 -}) { +function Be({ tune: e, hideOutsideView: r = !1, enableKeyboard: t, withCanvas: s = !1, canvasHeight: n = 200 }) { const { - code: i, - setCode: d, - evaluate: o, - activateCode: u, - error: m, - isDirty: g, - activeCode: v, - pattern: F, + code: c, + setCode: l, + evaluate: d, + activateCode: o, + error: u, + isDirty: f, + activeCode: m, + pattern: v, started: k, - scheduler: A, - togglePlay: b, - stop: D, - canvasId: x + scheduler: M, + togglePlay: T, + stop: b, + canvasId: A } = ve({ initialCode: e, defaultOutput: oe, getTime: Ne }); pe({ - pattern: F, + pattern: v, started: k, - getTime: () => A.now(), - onDraw: (f, h) => { - const V = document.querySelector("#" + x).getContext("2d"); - re({ ctx: V, time: f, haps: h, autorange: 1, fold: 1, playhead: 1 }); + getTime: () => M.now(), + onDraw: (h, g) => { + const R = document.querySelector("#" + A).getContext("2d"); + re({ ctx: R, time: h, haps: g, autorange: 1, fold: 1, playhead: 1 }); } }); - const [R, S] = _(), [z, N] = ae({ + const [F, S] = _(), [z, D] = ae({ threshold: 0.01 - }), T = E(), L = B(() => ((N || !t) && (T.current = !0), N || T.current), [N, t]); + }), x = E(), L = V(() => ((D || !r) && (x.current = !0), D || x.current), [D, r]); return me({ - view: R, - pattern: F, - active: k && !v?.includes("strudel disable-highlighting"), - getTime: () => A.getPhase() - }), W(() => { - if (a) { - const f = async (h) => { - (h.ctrlKey || h.altKey) && (h.code === "Enter" ? (h.preventDefault(), le(R), await u()) : h.code === "Period" && (D(), h.preventDefault())); + view: F, + pattern: v, + active: k && !m?.includes("strudel disable-highlighting"), + getTime: () => M.getPhase() + }), U(() => { + if (t) { + const h = async (g) => { + (g.ctrlKey || g.altKey) && (g.code === "Enter" ? (g.preventDefault(), le(F), await o()) : g.code === "Period" && (b(), g.preventDefault())); }; - return window.addEventListener("keydown", f, !0), () => window.removeEventListener("keydown", f, !0); + return window.addEventListener("keydown", h, !0), () => window.removeEventListener("keydown", h, !0); } - }, [a, F, i, o, D, R]), /* @__PURE__ */ l.createElement("div", { + }, [t, v, c, d, b, F]), /* @__PURE__ */ i.createElement("div", { className: w.container, ref: z - }, /* @__PURE__ */ l.createElement("div", { + }, /* @__PURE__ */ i.createElement("div", { className: w.header - }, /* @__PURE__ */ l.createElement("div", { + }, /* @__PURE__ */ i.createElement("div", { className: w.buttons - }, /* @__PURE__ */ l.createElement("button", { - className: I(w.button, k ? "sc-animate-pulse" : ""), - onClick: () => b() - }, /* @__PURE__ */ l.createElement(U, { + }, /* @__PURE__ */ i.createElement("button", { + className: j(w.button, k ? "sc-animate-pulse" : ""), + onClick: () => T() + }, /* @__PURE__ */ i.createElement(I, { type: k ? "pause" : "play" - })), /* @__PURE__ */ l.createElement("button", { - className: I(g ? w.button : w.buttonDisabled), - onClick: () => u() - }, /* @__PURE__ */ l.createElement(U, { + })), /* @__PURE__ */ i.createElement("button", { + className: j(f ? w.button : w.buttonDisabled), + onClick: () => o() + }, /* @__PURE__ */ i.createElement(I, { type: "refresh" - }))), m && /* @__PURE__ */ l.createElement("div", { + }))), u && /* @__PURE__ */ i.createElement("div", { className: w.error - }, m.message)), /* @__PURE__ */ l.createElement("div", { + }, u.message)), /* @__PURE__ */ i.createElement("div", { className: w.body - }, L && /* @__PURE__ */ l.createElement(fe, { - value: i, - onChange: d, + }, L && /* @__PURE__ */ i.createElement(fe, { + value: c, + onChange: l, onViewChanged: S - })), n && /* @__PURE__ */ l.createElement("canvas", { - id: x, + })), s && /* @__PURE__ */ i.createElement("canvas", { + id: A, className: "w-full pointer-events-none", - height: c, - ref: (f) => { - f && f.width !== f.clientWidth && (f.width = f.clientWidth); + height: n, + ref: (h) => { + h && h.width !== h.clientWidth && (h.width = h.clientWidth); } })); } -const Oe = (e) => W(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]); +const Oe = (e) => U(() => (window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0)), [e]); export { fe as CodeMirror, Be as MiniRepl, - I as cx, + j as cx, le as flash, me as useHighlighting, Oe as useKeydown,