elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-11 21:58:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

repl now accepts code in innerHTML + bump

Browse Source
This commit is contained in:
Felix Roos 2023-12-15 11:50:49 +01:00
parent 9b58cf9890
commit 372e93e8f8
4 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/repl/examples/repl.html Normal file
View File

@ -0,0 +1,2 @@
<script src="https://unpkg.com/@strudel/repl@0.9.3"></script>
<strudel-editor code='s("bd")'></strudel-editor>

2
packages/repl/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@strudel/repl",
"version": "0.9.3",
"version": "0.9.4",
"description": "Strudel REPL as a Web Component",
"main": "index.mjs",
"publishConfig": {

13
packages/repl/repl-component.mjs
View File

@ -59,13 +59,24 @@ class StrudelRepl extends HTMLElement {
}
}
connectedCallback() {
// setTimeout makes sure the dom is ready
setTimeout(() => {
const code = (this.innerHTML + '').replace('<!--', '').replace('-->', '').trim();
if (code) {
// use comment code in element body if present
this.setAttribute('code', code);
}
});
// use a separate container for the editor, to make sure the innerHTML stays as is
const container = document.createElement('div');
this.parentElement.insertBefore(container, this.nextSibling);
const drawContext = getDrawContext();
const drawTime = [-2, 2];
this.editor = new StrudelMirror({
defaultOutput: webaudioOutput,
getTime: () => getAudioContext().currentTime,
transpiler,
root: this,
root: container,
initialCode: '// LOADING',
pattern: silence,
settings: this.settings,

31
website/src/pages/vanilla/mini.astro
View File

@ -1,16 +1,9 @@
---
import HeadCommonNew from '../../components/HeadCommonNew.astro';
---
<html lang="en" class="dark">
<head>
<!-- <HeadCommonNew /> -->
<title>Strudel Vanilla REPL</title>
<script src="@strudel/repl"></script>
</head>
<body class="h-app-height">
<h1>vanilli repl</h1>
<body>
<p>This is a REPL:</p>
<strudel-editor
keybindings="emacs"
@ -21,12 +14,30 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
is-flash-enabled="1"
is-tooltip-enabled="1"
is-line-wrapping-enabled="1"
theme="teletext"
theme="strudelTheme"
font-family="monospace"
font-size="18"
code={`s("bd")`}></strudel-editor>
<p>This is another REPL:</p>
<strudel-editor code={`s("hh*4")`}></strudel-editor>
<strudel-editor is-line-numbers-displayed="0"><!--
n(run(4).sub(4))
.chord("<C^7#11 E^7#11>/16")
.dict('ireal')
.voicing()
.when("<1 0> 0@3", sub(note(12)))
.add(note("[12 | 0]*4"))
.attack(slider(0.511))
.decay(slider(0.466))
.sustain(slider(0.398))
.release(slider(0.443))
.s('sawtooth')
.lpa(sine.range(.1,.25).slow(12))
.lpenv(sine.range(0,4).slow(16))
.lpf(perlin.range(400,1000))
.add(note(perlin.range(0,.25)))
.vib(4).vibmod(.1)
.room(.75).size(8)
--></strudel-editor>
</body>
</html>