elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-27 13:38:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor share for build without top level await

Browse Source
This commit is contained in:
Felix Roos 2022-06-26 13:05:36 +02:00
parent 621b2d8fc9
commit eca76dd7c4
1 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
repl/src/App.jsx
View File

@ -8,7 +8,7 @@ import controls from '@strudel.cycles/core/controls.mjs';
import { evalScope, evaluate } from '@strudel.cycles/eval'; import { evalScope, evaluate } from '@strudel.cycles/eval';
import { CodeMirror, cx, flash, useHighlighting, useRepl, useWebMidi } from '@strudel.cycles/react'; import { CodeMirror, cx, flash, useHighlighting, useRepl, useWebMidi } from '@strudel.cycles/react';
import { getDefaultSynth, cleanupDraw, cleanupUi, Tone } from '@strudel.cycles/tone'; import { getDefaultSynth, cleanupDraw, cleanupUi, Tone } from '@strudel.cycles/tone';
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import './App.css'; import './App.css';
import logo from './logo.svg'; import logo from './logo.svg';
import * as tunes from './tunes.mjs'; import * as tunes from './tunes.mjs';
@ -46,29 +46,35 @@ loadWebDirt({
sampleFolder: 'EmuSP12', sampleFolder: 'EmuSP12',
}); });
// load code from url hash (either short hash from database or decode long hash) async function initCode() {
let decoded; // load code from url hash (either short hash from database or decode long hash)
try { try {
const initialUrl = window.location.href; const initialUrl = window.location.href;
const hash = initialUrl.split('?')[1]?.split('#')?.[0]; const hash = initialUrl.split('?')[1]?.split('#')?.[0];
const codeParam = window.location.href.split('#')[1]; const codeParam = window.location.href.split('#')[1];
// looking like https://strudel.tidalcycles.org/?J01s5i1J0200 (fixed hash length) // looking like https://strudel.tidalcycles.org/?J01s5i1J0200 (fixed hash length)
if (codeParam) { if (codeParam) {
// looking like https://strudel.tidalcycles.org/#ImMzIGUzIg%3D%3D (hash length depends on code length) console.log('decode hash from url');
decoded = atob(decodeURIComponent(codeParam || '')); // looking like https://strudel.tidalcycles.org/#ImMzIGUzIg%3D%3D (hash length depends on code length)
console.log('decoded hash from url'); return atob(decodeURIComponent(codeParam || ''));
} else if (hash) { } else if (hash) {
const { data, error } = await supabase.from('code').select('code').eq('hash', hash); return supabase
if (error) { .from('code')
throw error; .select('code')
} .eq('hash', hash)
if (data.length) { .then(({ data, error }) => {
decoded = data[0].code; if (error) {
console.log('loaded hash from database', hash); console.warn('failed to load hash', err);
}
if (data.length) {
console.log('load hash from database', hash);
return data[0].code;
}
});
} }
} catch (err) {
console.warn('failed to decode', err);
} }
} catch (err) {
console.warn('failed to decode', err);
} }
function getRandomTune() { function getRandomTune() {
@ -100,9 +106,12 @@ function App() {
pushLog, pushLog,
pending, pending,
} = useRepl({ } = useRepl({
tune: decoded || randomTune, tune: '// LOADING...',
defaultSynth, defaultSynth,
}); });
useEffect(() => {
initCode().then((decoded) => setCode(decoded || randomTune));
}, []);
const logBox = useRef(); const logBox = useRef();
// scroll log box to bottom when log changes // scroll log box to bottom when log changes
useLayoutEffect(() => { useLayoutEffect(() => {