hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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);
}