improve scope memory footprint

packages/codemirror/widget.mjs

@@ -1,10 +1,8 @@
 import { StateEffect, StateField } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-import { registerWidgetType } from '@strudel/transpiler';
+import { getWidgetID, registerWidgetType } from '@strudel/transpiler';
 import { Pattern } from '@strudel/core';
 
-const getWidgetID = (from) => `widget_${from}`;
-
 export const addWidget = StateEffect.define({
   map: ({ from, to }, change) => {
     return { from: change.mapPos(from), to: change.mapPos(to) };
@@ -20,12 +18,12 @@ function getWidgets(widgetConfigs) {
     widgetConfigs
       // codemirror throws an error if we don't sort
       .sort((a, b) => a.to - b.to)
-      .map(({ to, type }) => {
+      .map((widgetConfig) => {
         return Decoration.widget({
-          widget: new BlockWidget(to, type),
+          widget: new BlockWidget(widgetConfig),
           side: 0,
           block: true,
-        }).range(to);
+        }).range(widgetConfig.to);
       })
   );
 }
@@ -62,16 +60,15 @@ export function setWidget(id, el) {
 }
 
 export class BlockWidget extends WidgetType {
-  constructor(col, type) {
+  constructor(widgetConfig) {
     super();
-    this.col = col;
-    this.type = type;
+    this.widgetConfig = widgetConfig;
   }
   eq() {
     return true;
   }
   toDOM() {
-    const id = getWidgetID(this.col); // matches id generated in transpiler
+    const id = getWidgetID(this.widgetConfig);
     const el = widgetElements[id];
     return el;
   }

packages/superdough/superdough.mjs

@@ -220,6 +220,7 @@ export let analysers = {},
 
 export function getAnalyserById(id, fftSize = 1024) {
   if (!analysers[id]) {
+    // make sure this doesn't happen too often as it piles up garbage
     const analyserNode = getAudioContext().createAnalyser();
     analyserNode.fftSize = fftSize;
     // getDestination().connect(analyserNode);

packages/transpiler/transpiler.mjs

@@ -53,12 +53,13 @@ export function transpiler(input, options = {}) {
         return this.replace(sliderWithLocation(node));
       }
       if (isWidgetMethod(node)) {
-        emitWidgets &&
-          widgets.push({
-            to: node.end,
-            type: node.callee.property.name,
-          });
-        return this.replace(widgetWithLocation(node));
+        const widgetConfig = {
+          to: node.end,
+          index: widgets.length,
+          type: node.callee.property.name,
+        };
+        emitWidgets && widgets.push(widgetConfig);
+        return this.replace(widgetWithLocation(node, widgetConfig));
       }
       if (isBareSamplesCall(node, parent)) {
         return this.replace(withAwait(node));
@@ -140,8 +141,17 @@ function sliderWithLocation(node) {
   return node;
 }
 
-function widgetWithLocation(node) {
-  const id = 'widget_' + node.end;
+export function getWidgetID(widgetConfig) {
+  // the widget id is used as id for the dom element + as key for eventual resources
+  // for example, for each scope widget, a new analyser + buffer (large) is created
+  // that means, if we use the index index of line position as id, less garbage is generated
+  // return `widget_${widgetConfig.to}`; // more gargabe
+  //return `widget_${widgetConfig.index}_${widgetConfig.to}`; // also more garbage
+  return `widget_${widgetConfig.index}`; // less garbage
+}
+
+function widgetWithLocation(node, widgetConfig) {
+  const id = getWidgetID(widgetConfig);
   // add loc as identifier to first argument
   // the sliderWithID function is assumed to be sliderWithID(id, value, min?, max?)
   node.arguments.unshift({