1# @strudel/repl
2
3The Strudel REPL as a web component.
4
5## Add Script Tag
6
7First place this script tag once in your HTML:
8
9```html
10<script src="https://unpkg.com/@strudel/repl@latest"></script>
11```
12
13You can also pin the version like this:
14
15```html
16<script src="https://unpkg.com/@strudel/repl@1.0.2"></script>
17```
18
19This has the advantage that your code will always work, regardless of potential breaking changes in the strudel codebase.
20See [releases](https://codeberg.org/uzu/strudel/releases) for the latest versions.
21
22## Use Web Component
23
24When you've added the script tag, you can use the `strudel-editor` web component:
25
26```html
27<strudel-editor>
28  <!--
29setcps(1)
30n("<0 1 2 3 4>*8").scale('G4 minor')
31.s("gm_lead_6_voice")
32.clip(sine.range(.2,.8).slow(8))
33.jux(rev)
34.room(2)
35.sometimes(add(note("12")))
36.lpf(perlin.range(200,20000).slow(4))
37-->
38</strudel-editor>
39```
40
41This will load the Strudel REPL using the code provided within the HTML comments `<!-- -->`.
42The HTML comments are needed to make sure the browser won't interpret it as HTML.
43
44Alternatively you can create a REPL from JavaScript like this:
45
46```html
47<script src="https://unpkg.com/@strudel/repl@latest"></script>
48<div id="strudel"></div>
49<script>
50  const repl = document.createElement('strudel-editor');
51  repl.setAttribute(
52    'code',
53    `setcps(1)
54n("<0 1 2 3 4>*8").scale('G4 minor')
55.s("gm_lead_6_voice")
56.clip(sine.range(.2,.8).slow(8))
57.jux(rev)
58.room(2)
59.sometimes(add(note("12")))
60.lpf(perlin.range(200,20000).slow(4))`,
61  );
62  document.getElementById('strudel').append(repl);
63</script>
64```
65
66## Interacting with the REPL
67
68If you get a hold of the `strudel-editor` element, you can interact with the strudel REPL from Javascript:
69
70```html
71<script src="https://unpkg.com/@strudel/repl@latest"></script>
72<strudel-editor id="repl">
73  <!-- ... -->
74</strudel-editor>
75<script>
76const repl = document.getElementById('repl');
77console.log(repl.editor);
78</script>
79```
80
81or
82
83```html
84<script src="https://unpkg.com/@strudel/repl@latest"></script>
85<div id="strudel"></div>
86<script>
87  const repl = document.createElement('strudel-editor');
88  repl.setAttribute('code', `...`);
89  document.getElementById('strudel').append(repl);
90  console.log(repl.editor);
91</script>
92```
93
94The `.editor` property on the `strudel-editor` web component gives you the instance of [StrudelMirror](https://codeberg.org/uzu/strudel/src/branch/a46bd9b36ea7d31c9f1d3fca484297c7da86893f/packages/codemirror/codemirror.mjs#L124) that runs the REPL.
95
96For example, you could use `setCode` to change the code from the outside, `start` / `stop` to toggle playback or `evaluate` to evaluate the code.
97
98## Development: How to Test
99
100```sh
101cd packages/repl
102pnpm build
103cd ../.. # back to root folder
104# edit ./examples/buildless/web-component-no-iframe.html
105# use <script src="/packages/repl/dist/index.js"></script>
106pnpx serve # from root folder
107# go to http://localhost:3000/examples/buildless/web-component-no-iframe
108```