mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 13:48:34 +00:00
27 lines
988 B
HTML
27 lines
988 B
HTML
<input
|
|
type="text"
|
|
id="text"
|
|
value="seq('a', ['b', 'c'])"
|
|
style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
|
|
spellcheck="false"
|
|
/>
|
|
<div id="output"></div>
|
|
<script type="module">
|
|
const strudel = await import('https://cdn.skypack.dev/@strudel/core@0.6.8');
|
|
Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
|
|
const input = document.getElementById('text');
|
|
const getEvents = () => {
|
|
const code = document.getElementById('text').value;
|
|
const pattern = eval(code);
|
|
const events = pattern.firstCycle();
|
|
console.log(code, '->', events);
|
|
document.getElementById('output').innerHTML = events.map((e) => e.show()).join('<br/>');
|
|
};
|
|
getEvents();
|
|
input.addEventListener('input', () => getEvents());
|
|
</script>
|
|
<p>
|
|
This page shows how skypack can be used to import strudel core directly into a simple html page. <br />
|
|
No server, no bundler and no build setup is needed to run this!
|
|
</p>
|