fix: repl package import on server

packages/repl/index.mjs

@@ -1,8 +1 @@
-// nanostores use process.env which kills the browser build
-window.process = {
-  env: {
-    NODE_ENV: 'development',
-  },
-};
-
 export * from './repl-component.mjs';

packages/repl/prebake.mjs

@@ -1,5 +1,4 @@
 import { controls, evalScope } from '@strudel.cycles/core';
-import { registerSoundfonts } from '@strudel.cycles/soundfonts';
 import { registerSynthSounds, registerZZFXSounds, samples } from '@strudel.cycles/webaudio';
 import * as core from '@strudel.cycles/core';
 
@@ -26,7 +25,11 @@ export async function prebake() {
     modulesLoading,
     registerSynthSounds(),
     registerZZFXSounds(),
-    registerSoundfonts(),
+    //registerSoundfonts(),
+    // need dynamic import here, because importing @strudel.cycles/soundfonts fails on server:
+    // => getting "window is not defined", as soon as "@strudel.cycles/soundfonts" is imported statically
+    // seems to be a problem with soundfont2
+    import('@strudel.cycles/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()),
     samples(`${ds}/tidal-drum-machines.json`),
     samples(`${ds}/piano.json`),
     samples(`${ds}/Dirt-Samples.json`),

packages/repl/repl-component.mjs

@@ -40,72 +40,74 @@ const parseAttribute = (name, value) => {
   return value;
 };
 // console.log('attributes', settingAttributes);
-class StrudelRepl extends HTMLElement {
+if (typeof HTMLElement !== 'undefined') {
-  static observedAttributes = ['code', ...settingAttributes];
+  class StrudelRepl extends HTMLElement {
-  settings = initialSettings;
+    static observedAttributes = ['code', ...settingAttributes];
-  editor = null;
+    settings = initialSettings;
-  constructor() {
+    editor = null;
-    super();
+    constructor() {
-  }
+      super();
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === 'code') {
-      this.code = newValue;
-      this.editor?.setCode(newValue);
-    } else if (settingAttributes.includes(name)) {
-      const camel = kebabToCamel(name);
-      this.settings[camel] = parseAttribute(name, newValue);
-      // console.log('name', name, newValue, camel, this.settings[camel]);
-      this.editor?.updateSettings(this.settings);
     }
-  }
+    attributeChangedCallback(name, oldValue, newValue) {
-  connectedCallback() {
+      if (name === 'code') {
-    // setTimeout makes sure the dom is ready
+        this.code = newValue;
-    setTimeout(() => {
+        this.editor?.setCode(newValue);
-      const code = (this.innerHTML + '').replace('<!--', '').replace('-->', '').trim();
+      } else if (settingAttributes.includes(name)) {
-      if (code) {
+        const camel = kebabToCamel(name);
-        // use comment code in element body if present
+        this.settings[camel] = parseAttribute(name, newValue);
-        this.setAttribute('code', code);
+        // console.log('name', name, newValue, camel, this.settings[camel]);
+        this.editor?.updateSettings(this.settings);
       }
-    });
+    }
-    // use a separate container for the editor, to make sure the innerHTML stays as is
+    connectedCallback() {
-    const container = document.createElement('div');
+      // setTimeout makes sure the dom is ready
-    this.parentElement.insertBefore(container, this.nextSibling);
+      setTimeout(() => {
-    const drawContext = getDrawContext();
+        const code = (this.innerHTML + '').replace('<!--', '').replace('-->', '').trim();
-    const drawTime = [-2, 2];
+        if (code) {
-    this.editor = new StrudelMirror({
+          // use comment code in element body if present
-      defaultOutput: webaudioOutput,
+          this.setAttribute('code', code);
-      getTime: () => getAudioContext().currentTime,
+        }
-      transpiler,
+      });
-      root: container,
+      // use a separate container for the editor, to make sure the innerHTML stays as is
-      initialCode: '// LOADING',
+      const container = document.createElement('div');
-      pattern: silence,
+      this.parentElement.insertBefore(container, this.nextSibling);
-      settings: this.settings,
+      const drawContext = getDrawContext();
-      drawTime,
+      const drawTime = [-2, 2];
-      onDraw: (haps, time, frame, painters) => {
+      this.editor = new StrudelMirror({
-        painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
+        defaultOutput: webaudioOutput,
-        painters?.forEach((painter) => {
+        getTime: () => getAudioContext().currentTime,
-          // ctx time haps drawTime paintOptions
+        transpiler,
-          painter(drawContext, time, haps, drawTime, { clear: false });
+        root: container,
-        });
+        initialCode: '// LOADING',
-      },
+        pattern: silence,
-      prebake,
+        settings: this.settings,
-      afterEval: ({ code }) => {
+        drawTime,
-        // window.location.hash = '#' + code2hash(code);
+        onDraw: (haps, time, frame, painters) => {
-      },
+          painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
-      onUpdateState: (state) => {
+          painters?.forEach((painter) => {
-        const event = new CustomEvent('update', {
+            // ctx time haps drawTime paintOptions
-          detail: state,
+            painter(drawContext, time, haps, drawTime, { clear: false });
-        });
+          });
-        this.dispatchEvent(event);
+        },
-      },
+        prebake,
-    });
+        afterEval: ({ code }) => {
-    // init settings
+          // window.location.hash = '#' + code2hash(code);
-    this.editor.updateSettings(this.settings);
+        },
-    this.editor.setCode(this.code);
+        onUpdateState: (state) => {
-    // settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
+          const event = new CustomEvent('update', {
-    // onEvent('strudel-toggle-play', () => this.editor.toggle());
+            detail: state,
+          });
+          this.dispatchEvent(event);
+        },
+      });
+      // init settings
+      this.editor.updateSettings(this.settings);
+      this.editor.setCode(this.code);
+      // settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
+      // onEvent('strudel-toggle-play', () => this.editor.toggle());
+    }
+    // Element functionality written in here
   }
-  // Element functionality written in here
-}
 
-customElements.define('strudel-editor', StrudelRepl);
+  customElements.define('strudel-editor', StrudelRepl);
+}