add slider function to scope

packages/codemirror/index.mjs

@@ -1,3 +1,4 @@
 export * from './codemirror.mjs';
 export * from './highlight.mjs';
 export * from './flash.mjs';
+export * from './slider.mjs';

packages/codemirror/slider.mjs

@@ -13,7 +13,12 @@ export class SliderWidget extends WidgetType {
   }
 
   eq(other) {
-    const isSame = other.value.toFixed(4) == this.value.toFixed(4) && other.min == this.min && other.max == this.max;
+    const isSame =
+      other.value.toFixed(4) == this.value.toFixed(4) &&
+      other.min == this.min &&
+      other.max == this.max &&
+      other.from === this.from &&
+      other.to === this.to;
     return isSame;
   }
 
@@ -152,6 +157,22 @@ function updateSliderValue(view, e) {
   let change = { from: draggedSlider.from, to: draggedSlider.to, insert };
   draggedSlider.to = draggedSlider.from + insert.length;
   view.dispatch({ changes: change });
-  window.postMessage({ type: 'cm-slider', value: next, loc: draggedSlider.from });
+  const id = 'slider_' + draggedSlider.from; // matches id generated in transpiler
+  window.postMessage({ type: 'cm-slider', value: next, id });
   return true;
 }
+
+export let sliderValues = {};
+
+export let slider = (id, value, min, max) => {
+  sliderValues[id] = value; // sync state at eval time (code -> state)
+  return ref(() => sliderValues[id]); // use state at query time
+};
+if (typeof window !== 'undefined') {
+  window.addEventListener('message', (e) => {
+    if (e.data.type === 'cm-slider') {
+      // update state when slider is moved
+      sliderValues[e.data.id] = e.data.value;
+    }
+  });
+}

packages/transpiler/transpiler.mjs

@@ -98,18 +98,20 @@ function miniWithLocation(value, node) {
   };
 }
 
+// these functions are connected to @strudel/codemirror -> slider.mjs
+// maybe someday there will be pluggable transpiler functions, then move this there
 function isWidgetFunction(node) {
   return node.type === 'CallExpression' && node.callee.name === 'slider';
 }
 
 function widgetWithLocation(node) {
-  const loc = node.arguments[0].start;
+  const id = 'slider_' + node.arguments[0].start; // use loc of first arg for id
   // add loc as identifier to first argument
-  // the slider function is assumed to be slider(loc, value, min?, max?)
+  // the slider function is assumed to be slider(id, value, min?, max?)
   node.arguments.unshift({
     type: 'Literal',
-    value: loc,
+    value: id,
-    raw: loc + '',
+    raw: id,
   });
   return node;
 }

website/src/repl/Repl.jsx

@@ -39,6 +39,7 @@ let modules = [
   import('@strudel.cycles/mini'),
   import('@strudel.cycles/xen'),
   import('@strudel.cycles/webaudio'),
+  import('@strudel/codemirror'),
 
   import('@strudel.cycles/serial'),
   import('@strudel.cycles/soundfonts'),