elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 21:48:27 +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", "name": "@strudel/repl",
"version": "0.9.3", "version": "0.9.4",
"description": "Strudel REPL as a Web Component", "description": "Strudel REPL as a Web Component",
"main": "index.mjs", "main": "index.mjs",
"publishConfig": { "publishConfig": {

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

@ -59,13 +59,24 @@ class StrudelRepl extends HTMLElement {
} }
} }
connectedCallback() { 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 drawContext = getDrawContext();
const drawTime = [-2, 2]; const drawTime = [-2, 2];
this.editor = new StrudelMirror({ this.editor = new StrudelMirror({
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,
getTime: () => getAudioContext().currentTime, getTime: () => getAudioContext().currentTime,
transpiler, transpiler,
root: this, root: container,
initialCode: '// LOADING', initialCode: '// LOADING',
pattern: silence, pattern: silence,
settings: this.settings, 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"> <html lang="en" class="dark">
<head> <head>
<!-- <HeadCommonNew /> -->
<title>Strudel Vanilla REPL</title> <title>Strudel Vanilla REPL</title>
<script src="@strudel/repl"></script> <script src="@strudel/repl"></script>
</head> </head>
<body class="h-app-height"> <body>
<h1>vanilli repl</h1>
<p>This is a REPL:</p> <p>This is a REPL:</p>
<strudel-editor <strudel-editor
keybindings="emacs" keybindings="emacs"
@ -21,12 +14,30 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
is-flash-enabled="1" is-flash-enabled="1"
is-tooltip-enabled="1" is-tooltip-enabled="1"
is-line-wrapping-enabled="1" is-line-wrapping-enabled="1"
theme="teletext" theme="strudelTheme"
font-family="monospace" font-family="monospace"
font-size="18" font-size="18"
code={`s("bd")`}></strudel-editor> code={`s("bd")`}></strudel-editor>
<p>This is another REPL:</p> <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> </body>
</html> </html>