diff --git a/packages/repl/examples/repl.html b/packages/repl/examples/repl.html
new file mode 100644
index 00000000..925b00f1
--- /dev/null
+++ b/packages/repl/examples/repl.html
@@ -0,0 +1,2 @@
+
+
diff --git a/packages/repl/package.json b/packages/repl/package.json
index 9269d706..aaa95983 100644
--- a/packages/repl/package.json
+++ b/packages/repl/package.json
@@ -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": {
diff --git a/packages/repl/repl-component.mjs b/packages/repl/repl-component.mjs
index d0a2bdf2..ebcca532 100644
--- a/packages/repl/repl-component.mjs
+++ b/packages/repl/repl-component.mjs
@@ -59,13 +59,24 @@ class StrudelRepl extends HTMLElement {
}
}
connectedCallback() {
+ // setTimeout makes sure the dom is ready
+ setTimeout(() => {
+ const code = (this.innerHTML + '').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,
diff --git a/website/src/pages/vanilla/mini.astro b/website/src/pages/vanilla/mini.astro
index b68e141b..f2a25703 100644
--- a/website/src/pages/vanilla/mini.astro
+++ b/website/src/pages/vanilla/mini.astro
@@ -1,16 +1,9 @@
----
-import HeadCommonNew from '../../components/HeadCommonNew.astro';
----
-
-
-
Strudel Vanilla REPL
-
- vanilli repl
+
This is a REPL:
This is another REPL:
-
+