From 89c06046b525100a3c28832a4460eda9b05a7950 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 15 Dec 2023 23:27:38 +0100 Subject: [PATCH] fix: repl package import on server --- packages/repl/index.mjs | 7 -- packages/repl/prebake.mjs | 7 +- packages/repl/repl-component.mjs | 132 ++++++++++++++++--------------- 3 files changed, 72 insertions(+), 74 deletions(-) diff --git a/packages/repl/index.mjs b/packages/repl/index.mjs index f771208d..330cd77d 100644 --- a/packages/repl/index.mjs +++ b/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'; diff --git a/packages/repl/prebake.mjs b/packages/repl/prebake.mjs index 1038bab3..02638d1a 100644 --- a/packages/repl/prebake.mjs +++ b/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`), diff --git a/packages/repl/repl-component.mjs b/packages/repl/repl-component.mjs index 554be3bc..2eda358d 100644 --- a/packages/repl/repl-component.mjs +++ b/packages/repl/repl-component.mjs @@ -40,72 +40,74 @@ const parseAttribute = (name, value) => { return value; }; // console.log('attributes', settingAttributes); -class StrudelRepl extends HTMLElement { - static observedAttributes = ['code', ...settingAttributes]; - settings = initialSettings; - editor = null; - 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); +if (typeof HTMLElement !== 'undefined') { + class StrudelRepl extends HTMLElement { + static observedAttributes = ['code', ...settingAttributes]; + settings = initialSettings; + editor = null; + constructor() { + super(); } - } - connectedCallback() { - // setTimeout makes sure the dom is ready - setTimeout(() => { - const code = (this.innerHTML + '').replace('', '').trim(); - if (code) { - // use comment code in element body if present - this.setAttribute('code', code); + 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); } - }); - // use a separate container for the editor, to make sure the innerHTML stays as is - const container = document.createElement('div'); - this.parentElement.insertBefore(container, this.nextSibling); - const drawContext = getDrawContext(); - const drawTime = [-2, 2]; - this.editor = new StrudelMirror({ - defaultOutput: webaudioOutput, - getTime: () => getAudioContext().currentTime, - transpiler, - root: container, - initialCode: '// LOADING', - pattern: silence, - settings: this.settings, - drawTime, - onDraw: (haps, time, frame, painters) => { - painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2); - painters?.forEach((painter) => { - // ctx time haps drawTime paintOptions - painter(drawContext, time, haps, drawTime, { clear: false }); - }); - }, - prebake, - afterEval: ({ code }) => { - // window.location.hash = '#' + code2hash(code); - }, - onUpdateState: (state) => { - const event = new CustomEvent('update', { - 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()); + } + connectedCallback() { + // setTimeout makes sure the dom is ready + setTimeout(() => { + const code = (this.innerHTML + '').replace('', '').trim(); + if (code) { + // use comment code in element body if present + this.setAttribute('code', code); + } + }); + // use a separate container for the editor, to make sure the innerHTML stays as is + const container = document.createElement('div'); + this.parentElement.insertBefore(container, this.nextSibling); + const drawContext = getDrawContext(); + const drawTime = [-2, 2]; + this.editor = new StrudelMirror({ + defaultOutput: webaudioOutput, + getTime: () => getAudioContext().currentTime, + transpiler, + root: container, + initialCode: '// LOADING', + pattern: silence, + settings: this.settings, + drawTime, + onDraw: (haps, time, frame, painters) => { + painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2); + painters?.forEach((painter) => { + // ctx time haps drawTime paintOptions + painter(drawContext, time, haps, drawTime, { clear: false }); + }); + }, + prebake, + afterEval: ({ code }) => { + // window.location.hash = '#' + code2hash(code); + }, + onUpdateState: (state) => { + const event = new CustomEvent('update', { + 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); +}