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

remove web component attribute support

Browse source 
+ settings are now controlled via nanostore
This commit is contained in:
Felix Roos 2023-12-17 21:48:53 +01:00
parent b462f19ef1
commit 9519d286bd
2 changed files with 2 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/repl/repl-component.mjs
View file

@ -1,33 +1,12 @@
import { getDrawContext, silence } from '@strudel.cycles/core'; import { getDrawContext, silence } from '@strudel.cycles/core';
import { transpiler } from '@strudel.cycles/transpiler'; import { transpiler } from '@strudel.cycles/transpiler';
import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio'; import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
import { StrudelMirror, defaultSettings, codemirrorSettings } from '@strudel/codemirror'; import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror';
import { prebake } from './prebake.mjs'; import { prebake } from './prebake.mjs';
function camelToKebab(camelCaseString) {
return camelCaseString.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
function kebabToCamel(kebabCaseString) {
return kebabCaseString.replace(/-([a-z])/g, function (match, group) {
return group.toUpperCase();
});
}
const settingAttributes = Object.keys(defaultSettings).map(camelToKebab);
const parseAttribute = (name, value) => {
const camel = kebabToCamel(name);
const type = typeof defaultSettings[camel];
if (type === 'boolean') {
return ['1', 'true'].includes(value);
}
if (type === 'number') {
return Number(value);
}
return value;
};
if (typeof HTMLElement !== 'undefined') { if (typeof HTMLElement !== 'undefined') {
class StrudelRepl extends HTMLElement { class StrudelRepl extends HTMLElement {
static observedAttributes = ['code', ...settingAttributes]; static observedAttributes = ['code'];
settings = codemirrorSettings.get(); settings = codemirrorSettings.get();
editor = null; editor = null;
constructor() { constructor() {
@ -37,10 +16,6 @@ if (typeof HTMLElement !== 'undefined') {
if (name === 'code') { if (name === 'code') {
this.code = newValue; this.code = newValue;
this.editor?.setCode(newValue); this.editor?.setCode(newValue);
} else if (settingAttributes.includes(name)) {
const camel = kebabToCamel(name);
this.settings[camel] = parseAttribute(name, newValue);
this.editor?.updateSettings(this.settings);
} }
} }
connectedCallback() { connectedCallback() {
@ -64,7 +39,6 @@ if (typeof HTMLElement !== 'undefined') {
root: container, root: container,
initialCode: '// LOADING', initialCode: '// LOADING',
pattern: silence, pattern: silence,
settings: this.settings,
drawTime, drawTime,
onDraw: (haps, time, frame, painters) => { onDraw: (haps, time, frame, painters) => {
painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2); painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);

13
website/src/pages/vanilla/mini.astro
View file

@ -5,19 +5,6 @@
</head> </head>
<body> <body>
<p>This is a REPL:</p> <p>This is a REPL:</p>
<!-- <strudel-editor
keybindings="emacs"
is-line-numbers-displayed="1"
is-active-line-highlighted="1"
is-auto-completion-enabled="1"
is-pattern-highlighting-enabled="1"
is-flash-enabled="1"
is-tooltip-enabled="1"
is-line-wrapping-enabled="1"
theme="strudelTheme"
font-family="monospace"
font-size="18"
code={`s("bd")`}></strudel-editor> -->
<strudel-editor code={`s("bd")`}></strudel-editor> <strudel-editor code={`s("bd")`}></strudel-editor>
<p>This is another REPL:</p> <p>This is another REPL:</p>