mirror of
https://codeberg.org/uzu/strudel
synced 2026-07-29 08:01:50 -04:00
move repl web component to new repl package
+ use it in /vanilla + /vanilla/mini
This commit is contained in:
Felix Roos
@@ -90,7 +90,8 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
|
||||
<!-- <label><input type="checkbox" name="isTooltipEnabled" />isTooltipEnabled</label> -->
|
||||
</form>
|
||||
</div>
|
||||
<div id="code"></div>
|
||||
<strudel-editor id="editor"></strudel-editor>
|
||||
<script src="../../repl/vanilla/vanilla.mjs"></script>
|
||||
<script src="@strudel/repl"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,13 +2,29 @@
|
||||
import HeadCommonNew from '../../components/HeadCommonNew.astro';
|
||||
---
|
||||
|
||||
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<HeadCommonNew />
|
||||
<!-- <HeadCommonNew /> -->
|
||||
<style>
|
||||
:root {
|
||||
--background: #cd8b8b;
|
||||
--lineBackground: #22222299;
|
||||
--foreground: #fff;
|
||||
--caret: #ffcc00;
|
||||
--selection: rgba(128, 203, 196, 0.5);
|
||||
--selectionMatch: #036dd626;
|
||||
--lineHighlight: #00000050;
|
||||
--gutterBackground: transparent;
|
||||
--gutterForeground: #8a919966;
|
||||
}
|
||||
</style>
|
||||
<title>Strudel Vanilla REPL</title>
|
||||
<script src="@strudel/repl"></script>
|
||||
</head>
|
||||
<body class="h-app-height">
|
||||
<h1>vanilli repl</h1>
|
||||
<p>This is a REPL:</p>
|
||||
<strudel-editor
|
||||
keybindings="emacs"
|
||||
is-line-numbers-displayed="1"
|
||||
@@ -21,45 +37,9 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
|
||||
theme="teletext"
|
||||
font-family="monospace"
|
||||
font-size="18"
|
||||
code={`// @date 23-11-30
|
||||
// "teigrührgerät" @by froos
|
||||
|
||||
stack(
|
||||
stack(
|
||||
s("bd(<3!3 5>,6)/2").bank('RolandTR707')
|
||||
,
|
||||
s("~ sd:<0 1>").bank('RolandTR707').room("<0 .5>")
|
||||
.lastOf(8, x=>x.segment("12").end(.2).gain(isaw))
|
||||
,
|
||||
s("[tb ~ tb]").bank('RolandTR707')
|
||||
.clip(0).release(.08).room(.2)
|
||||
).off(-1/6, x=>x.speed(.7).gain(.2).degrade())
|
||||
,
|
||||
stack(
|
||||
note("<g1(<3 4>,6) ~!2 [f1?]*2>")
|
||||
.s("sawtooth").lpf(perlin.range(400,1000))
|
||||
.lpa(.1).lpenv(-3).room(.2)
|
||||
.lpq(8).noise(.2)
|
||||
.add(note("0,.1"))
|
||||
,
|
||||
chord("<~ Gm9 ~!2>")
|
||||
.dict('ireal').voicing()
|
||||
.s("sawtooth").vib("2:.1")
|
||||
.lpf(1000).lpa(.1).lpenv(-4)
|
||||
.room(.5)
|
||||
,
|
||||
n(run(3)).chord("<Gm9 Gm11>/8")
|
||||
.dict('ireal-ext')
|
||||
.off(1/2, add(n(4)))
|
||||
.voicing()
|
||||
.clip(.1).release(.05)
|
||||
.s("sine").jux(rev)
|
||||
.sometimesBy(sine.slow(16), add(note(12)))
|
||||
.room(.75)
|
||||
.lpf(sine.range(200,2000).slow(16))
|
||||
.gain(saw.slow(4).div(2))
|
||||
).add(note(perlin.range(0,.5)))
|
||||
)`}></strudel-editor>
|
||||
<script src="../../repl/vanilla/strudel-editor.mjs"></script>
|
||||
code={`s("bd")`}></strudel-editor>
|
||||
|
||||
<p>This is another REPL:</p>
|
||||
<strudel-editor code={`s("hh*4")`}></strudel-editor>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
import { getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
|
||||
import { StrudelMirror } from '@strudel/codemirror';
|
||||
import { transpiler } from '@strudel.cycles/transpiler';
|
||||
import { registerSoundfonts } from '@strudel.cycles/soundfonts';
|
||||
import {
|
||||
getAudioContext,
|
||||
webaudioOutput,
|
||||
registerSynthSounds,
|
||||
registerZZFXSounds,
|
||||
samples,
|
||||
} from '@strudel.cycles/webaudio';
|
||||
|
||||
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 initialSettings = {
|
||||
keybindings: 'strudelTheme',
|
||||
isLineNumbersDisplayed: true,
|
||||
isActiveLineHighlighted: true,
|
||||
isAutoCompletionEnabled: false,
|
||||
isPatternHighlightingEnabled: true,
|
||||
isFlashEnabled: true,
|
||||
isTooltipEnabled: false,
|
||||
isLineWrappingEnabled: false,
|
||||
theme: 'teletext',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 18,
|
||||
};
|
||||
const settingAttributes = Object.keys(initialSettings).map(camelToKebab);
|
||||
const parseAttribute = (name, value) => {
|
||||
const camel = kebabToCamel(name);
|
||||
const type = typeof initialSettings[camel];
|
||||
// console.log('type', type, name);
|
||||
if (type === 'boolean') {
|
||||
return ['1', 'true'].includes(value);
|
||||
}
|
||||
if (type === 'number') {
|
||||
return Number(value);
|
||||
}
|
||||
return value;
|
||||
};
|
||||
// console.log('attributes', settingAttributes);
|
||||
|
||||
class StrudelEditor extends HTMLElement {
|
||||
static observedAttributes = ['code', ...settingAttributes];
|
||||
settings = initialSettings;
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === 'code') {
|
||||
this.code = newValue;
|
||||
this.editor?.setCode(initialCode);
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
const drawContext = getDrawContext();
|
||||
const drawTime = [-2, 2];
|
||||
this.container = document.createElement('div');
|
||||
this.appendChild(this.container);
|
||||
this.editor = new StrudelMirror({
|
||||
defaultOutput: webaudioOutput,
|
||||
getTime: () => getAudioContext().currentTime,
|
||||
transpiler,
|
||||
root: this.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: async () => {
|
||||
// populate scope / lazy load modules
|
||||
const modulesLoading = evalScope(
|
||||
import('@strudel.cycles/core'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/mini'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
import('@strudel/codemirror'),
|
||||
import('@strudel/hydra'),
|
||||
import('@strudel.cycles/soundfonts'),
|
||||
// import('@strudel.cycles/xen'),
|
||||
// import('@strudel.cycles/serial'),
|
||||
// import('@strudel.cycles/csound'),
|
||||
/* import('@strudel.cycles/midi'), */
|
||||
// import('@strudel.cycles/osc'),
|
||||
controls, // sadly, this cannot be exported from core directly (yet)
|
||||
);
|
||||
// load samples
|
||||
const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
|
||||
await Promise.all([
|
||||
modulesLoading,
|
||||
registerSynthSounds(),
|
||||
registerZZFXSounds(),
|
||||
registerSoundfonts(),
|
||||
samples(`${ds}/tidal-drum-machines.json`),
|
||||
samples(`${ds}/piano.json`),
|
||||
samples(`${ds}/Dirt-Samples.json`),
|
||||
samples(`${ds}/EmuSP12.json`),
|
||||
samples(`${ds}/vcsl.json`),
|
||||
]);
|
||||
},
|
||||
afterEval: ({ code }) => {
|
||||
window.location.hash = '#' + code2hash(code);
|
||||
},
|
||||
});
|
||||
// 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
|
||||
}
|
||||
|
||||
customElements.define('strudel-editor', StrudelEditor);
|
||||
@@ -12,7 +12,7 @@ select {
|
||||
|
||||
html,
|
||||
body,
|
||||
#code,
|
||||
#editor,
|
||||
.cm-editor,
|
||||
.cm-scroller {
|
||||
padding: 0;
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
|
||||
import { StrudelMirror, initTheme, activateTheme } from '@strudel/codemirror';
|
||||
import { transpiler } from '@strudel.cycles/transpiler';
|
||||
import {
|
||||
getAudioContext,
|
||||
webaudioOutput,
|
||||
registerSynthSounds,
|
||||
registerZZFXSounds,
|
||||
samples,
|
||||
} from '@strudel.cycles/webaudio';
|
||||
import { hash2code, logger } from '@strudel.cycles/core';
|
||||
import { activateTheme, initTheme } from '@strudel/codemirror';
|
||||
import './vanilla.css';
|
||||
|
||||
let editor;
|
||||
@@ -27,68 +19,9 @@ const initialSettings = {
|
||||
initTheme(initialSettings.theme);
|
||||
|
||||
async function run() {
|
||||
const container = document.getElementById('code');
|
||||
if (!container) {
|
||||
console.warn('could not init: no container found');
|
||||
return;
|
||||
}
|
||||
|
||||
const drawContext = getDrawContext();
|
||||
const drawTime = [-2, 2];
|
||||
editor = new StrudelMirror({
|
||||
defaultOutput: webaudioOutput,
|
||||
getTime: () => getAudioContext().currentTime,
|
||||
transpiler,
|
||||
root: container,
|
||||
initialCode: '// LOADING',
|
||||
pattern: silence,
|
||||
settings: initialSettings,
|
||||
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: async () => {
|
||||
// populate scope / lazy load modules
|
||||
const modulesLoading = evalScope(
|
||||
import('@strudel.cycles/core'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/mini'),
|
||||
// import('@strudel.cycles/xen'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
import('@strudel/codemirror'),
|
||||
/* import('@strudel/hydra'), */
|
||||
// import('@strudel.cycles/serial'),
|
||||
/* import('@strudel.cycles/soundfonts'), */
|
||||
// import('@strudel.cycles/csound'),
|
||||
/* import('@strudel.cycles/midi'), */
|
||||
// import('@strudel.cycles/osc'),
|
||||
controls, // sadly, this cannot be exported from core directly (yet)
|
||||
);
|
||||
// load samples
|
||||
const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
|
||||
await Promise.all([
|
||||
modulesLoading,
|
||||
registerSynthSounds(),
|
||||
registerZZFXSounds(),
|
||||
samples(`${ds}/tidal-drum-machines.json`),
|
||||
samples(`${ds}/piano.json`),
|
||||
samples(`${ds}/Dirt-Samples.json`),
|
||||
samples(`${ds}/EmuSP12.json`),
|
||||
samples(`${ds}/vcsl.json`),
|
||||
]);
|
||||
},
|
||||
afterEval: ({ code }) => {
|
||||
window.location.hash = '#' + code2hash(code);
|
||||
},
|
||||
});
|
||||
|
||||
// init settings
|
||||
const repl = document.getElementById('editor');
|
||||
editor = repl.editor;
|
||||
editor.updateSettings(initialSettings);
|
||||
|
||||
logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
|
||||
const codeParam = window.location.href.split('#')[1] || '';
|
||||
|
||||
@@ -195,8 +128,7 @@ const form = document.querySelector('form[name=settings]');
|
||||
setFormValues(form, initialSettings);
|
||||
form.addEventListener('change', () => {
|
||||
const values = getFormValues(form, initialSettings);
|
||||
// console.log('values', values);
|
||||
editor.updateSettings(values);
|
||||
editor?.updateSettings(values);
|
||||
// TODO: only activateTheme when it changes
|
||||
activateTheme(values.theme);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user