From b01865f0f553509e2eb9578fc0ab2484ef68cd6b Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Mon, 2 May 2022 22:33:31 +0200
Subject: [PATCH 1/3] add basic embed package

---
 packages/embed/README.md    | 27 +++++++++++++++++++++++++++
 packages/embed/embed.js     | 17 +++++++++++++++++
 packages/embed/example.html | 16 ++++++++++++++++
 packages/embed/package.json | 25 +++++++++++++++++++++++++
 4 files changed, 85 insertions(+)
 create mode 100644 packages/embed/README.md
 create mode 100644 packages/embed/embed.js
 create mode 100644 packages/embed/example.html
 create mode 100644 packages/embed/package.json

diff --git a/packages/embed/README.md b/packages/embed/README.md
new file mode 100644
index 00000000..9519a3a9
--- /dev/null
+++ b/packages/embed/README.md
@@ -0,0 +1,27 @@
+# @strudel.cycles/embed
+
+This package contains a embeddable web component for the Strudel REPL.
+
+## Usage
+
+Either install with `npm i @strudel.cycles/embed` or just use a cdn to import the script:
+
+```html
+<script src="https://unpkg.com/@strudel.cycles/embed@latest">
+<strudel-repl>
+  <!--
+  "a4 [a3 c3] a3 c3".color('#F9D649')
+.sub("<7 12 5 12>".slow(2))
+.off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
+.off(1/8,x=>x.add(12).color('#215CB6'))
+.slow(2)
+.legato(sine.range(0.3, 2).slow(28))
+.wave("sawtooth square".fast(2))
+.filter('lowpass', cosine.range(500,4000).slow(16))
+.out()
+.pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
+  -->
+</strudel-repl>
+```
+
+Note that the Code is placed inside HTML comments to prevent the browser from treating it as HTML.
diff --git a/packages/embed/embed.js b/packages/embed/embed.js
new file mode 100644
index 00000000..0661e229
--- /dev/null
+++ b/packages/embed/embed.js
@@ -0,0 +1,17 @@
+class Strudel extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    setTimeout(() => {
+      const code = (this.innerHTML + '').replace('<!--', '').replace('-->', '').trim();
+      const iframe = document.createElement('iframe');
+      const src = `https://strudel.tidalcycles.org/#${encodeURIComponent(btoa(code))}`;
+      iframe.setAttribute('src', src);
+      iframe.setAttribute('width', '600');
+      iframe.setAttribute('height', '400');
+      this.appendChild(iframe);
+    });
+  }
+}
+customElements.define('strudel-repl', Strudel);
diff --git a/packages/embed/example.html b/packages/embed/example.html
new file mode 100644
index 00000000..fa54b7d6
--- /dev/null
+++ b/packages/embed/example.html
@@ -0,0 +1,16 @@
+<script src="./embed.js"></script>
+
+<strudel-repl>
+  <!--
+  "a4 [a3 c3] a3 c3".color('#F9D649')
+.sub("<7 12 5 12>".slow(2))
+.off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
+.off(1/8,x=>x.add(12).color('#215CB6'))
+.slow(2)
+.legato(sine.range(0.3, 2).slow(28))
+.wave("sawtooth square".fast(2))
+.filter('lowpass', cosine.range(500,4000).slow(16))
+.out()
+.pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
+  -->
+</strudel-repl>
diff --git a/packages/embed/package.json b/packages/embed/package.json
new file mode 100644
index 00000000..70c778ad
--- /dev/null
+++ b/packages/embed/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@strudel.cycles/embed",
+  "version": "0.0.1",
+  "description": "Embeddable Web Component to load a Strudel REPL into an iframe",
+  "main": "embed.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tidalcycles/strudel.git"
+  },
+  "keywords": [
+    "tidalcycles",
+    "strudel",
+    "pattern",
+    "livecoding",
+    "algorave"
+  ],
+  "author": "Felix Roos <flix91@gmail.com>",
+  "license": "AGPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/tidalcycles/strudel/issues"
+  },
+  "homepage": "https://github.com/tidalcycles/strudel#readme",
+  "dependencies": {}
+}

From 6e8bd1ff33026568032e8bb18edf039c92d71cc9 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Mon, 2 May 2022 22:40:40 +0200
Subject: [PATCH 2/3] fix example

---
 packages/embed/README.md    | 24 ++++++++++++------------
 packages/embed/example.html | 25 ++++++++++++-------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/embed/README.md b/packages/embed/README.md
index 9519a3a9..c3b7f3ee 100644
--- a/packages/embed/README.md
+++ b/packages/embed/README.md
@@ -7,20 +7,20 @@ This package contains a embeddable web component for the Strudel REPL.
 Either install with `npm i @strudel.cycles/embed` or just use a cdn to import the script:
 
 ```html
-<script src="https://unpkg.com/@strudel.cycles/embed@latest">
+<script src="https://unpkg.com/@strudel.cycles/embed@latest"></script>
 <strudel-repl>
   <!--
-  "a4 [a3 c3] a3 c3".color('#F9D649')
-.sub("<7 12 5 12>".slow(2))
-.off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
-.off(1/8,x=>x.add(12).color('#215CB6'))
-.slow(2)
-.legato(sine.range(0.3, 2).slow(28))
-.wave("sawtooth square".fast(2))
-.filter('lowpass', cosine.range(500,4000).slow(16))
-.out()
-.pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
-  -->
+      "a4 [a3 c3] a3 c3".color('#F9D649')
+    .sub("<7 12 5 12>".slow(2))
+    .off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
+    .off(1/8,x=>x.add(12).color('#215CB6'))
+    .slow(2)
+    .legato(sine.range(0.3, 2).slow(28))
+    .wave("sawtooth square".fast(2))
+    .filter('lowpass', cosine.range(500,4000).slow(16))
+    .out()
+    .pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
+      -->
 </strudel-repl>
 ```
 
diff --git a/packages/embed/example.html b/packages/embed/example.html
index fa54b7d6..f4ef6d31 100644
--- a/packages/embed/example.html
+++ b/packages/embed/example.html
@@ -1,16 +1,15 @@
-<script src="./embed.js"></script>
-
+<script src="https://unpkg.com/@strudel.cycles/embed@latest"></script>
 <strudel-repl>
   <!--
-  "a4 [a3 c3] a3 c3".color('#F9D649')
-.sub("<7 12 5 12>".slow(2))
-.off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
-.off(1/8,x=>x.add(12).color('#215CB6'))
-.slow(2)
-.legato(sine.range(0.3, 2).slow(28))
-.wave("sawtooth square".fast(2))
-.filter('lowpass', cosine.range(500,4000).slow(16))
-.out()
-.pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
-  -->
+      "a4 [a3 c3] a3 c3".color('#F9D649')
+    .sub("<7 12 5 12>".slow(2))
+    .off(1/4,x=>x.add(7).color("#FFFFFF #0C3AA1 #C63928"))
+    .off(1/8,x=>x.add(12).color('#215CB6'))
+    .slow(2)
+    .legato(sine.range(0.3, 2).slow(28))
+    .wave("sawtooth square".fast(2))
+    .filter('lowpass', cosine.range(500,4000).slow(16))
+    .out()
+    .pianoroll({minMidi:20,maxMidi:120,background:'#202124'})
+      -->
 </strudel-repl>

From 91261b8b3fde453d4a5d48f8592f0f9be74bd86a Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Mon, 2 May 2022 22:40:58 +0200
Subject: [PATCH 3/3] bump

---
 packages/embed/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/embed/package.json b/packages/embed/package.json
index 70c778ad..5a15bdec 100644
--- a/packages/embed/package.json
+++ b/packages/embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@strudel.cycles/embed",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Embeddable Web Component to load a Strudel REPL into an iframe",
   "main": "embed.js",
   "type": "module",