elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-11 21:58:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: repl package import on server

Browse Source
This commit is contained in:
Felix Roos 2023-12-15 23:27:38 +01:00
parent 9c13f6bb53
commit 89c06046b5
3 changed files with 72 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/repl/index.mjs
View File

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

7
packages/repl/prebake.mjs
View File

@ -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`),

132
packages/repl/repl-component.mjs
View File

@ -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('<!--', '').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('<!--', '').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);
}