diff --git a/packages/react/src/hooks/useStrudel.mjs b/packages/react/src/hooks/useStrudel.mjs index 527aa708..b0b1062c 100644 --- a/packages/react/src/hooks/useStrudel.mjs +++ b/packages/react/src/hooks/useStrudel.mjs @@ -10,7 +10,6 @@ function useStrudel({ getTime, evalOnMount = false, initialCode = '', - autolink = false, beforeEval, afterEval, editPattern, @@ -51,15 +50,13 @@ function useStrudel({ setCode(code); beforeEval?.(); }, - afterEval: ({ pattern: _pattern, code }) => { + afterEval: (res) => { + const { pattern: _pattern, code } = res; setActiveCode(code); setPattern(_pattern); setEvalError(); setSchedulerError(); - if (autolink) { - window.location.hash = '#' + encodeURIComponent(btoa(code)); - } - afterEval?.(); + afterEval?.(res); }, onToggle: (v) => { setStarted(v); diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx index 2940c140..37dfd0c9 100644 --- a/website/src/repl/Footer.jsx +++ b/website/src/repl/Footer.jsx @@ -7,14 +7,13 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; import { loadedSamples } from './Repl'; import { Reference } from './Reference'; import { themes } from './themes.mjs'; -import { useSettings, settingsMap } from '../settings.mjs'; +import { useSettings, settingsMap, setActiveFooter, defaultSettings } from '../settings.mjs'; export function Footer({ context }) { - // const [activeFooter, setActiveFooter] = useState('console'); - // const { activeFooter, setActiveFooter, isZen } = useContext?.(ReplContext); - const { activeFooter, setActiveFooter, isZen } = context; + const { isZen } = context; const footerContent = useRef(); const [log, setLog] = useState([]); + const { activeFooter } = useSettings(); useLayoutEffect(() => { if (footerContent.current && activeFooter === 'console') { @@ -323,7 +322,7 @@ function SettingsTab() { className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50" onClick={() => { if (confirm('Sure?')) { - settingsMap.setKey(defaultSettings); + settingsMap.set(defaultSettings); } }} > diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index 628efbc2..7a72fed1 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -23,9 +23,10 @@ import { prebake } from './prebake.mjs'; import * as tunes from './tunes.mjs'; import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import { themes } from './themes.mjs'; -import { useSettings } from '../settings.mjs'; +import { settingsMap, useSettings, setLatestCode } from '../settings.mjs'; -const initialTheme = localStorage.getItem('strudel-theme') || 'strudelTheme'; +const { latestCode } = settingsMap.get(); +console.log('latestCode', latestCode); initAudioOnFirstClick(); @@ -114,7 +115,6 @@ export function Repl({ embedded = false }) { const isEmbedded = embedded || window.location !== window.parent.location; const [view, setView] = useState(); // codemirror view const [lastShared, setLastShared] = useState(); - const [activeFooter, setActiveFooter] = useState(''); const [isZen, setIsZen] = useState(false); const [pending, setPending] = useState(false); @@ -125,14 +125,14 @@ export function Repl({ embedded = false }) { initialCode: '// LOADING', defaultOutput: webaudioOutput, getTime, - autolink: true, beforeEval: () => { cleanupUi(); cleanupDraw(); setPending(true); }, - afterEval: () => { + afterEval: ({ code }) => { setPending(false); + setLatestCode(code); }, onToggle: (play) => !play && cleanupDraw(false), drawContext, @@ -141,16 +141,13 @@ export function Repl({ embedded = false }) { // init code useEffect(() => { initCode().then((decoded) => { - if (!decoded) { - setActiveFooter('intro'); // TODO: get rid - } logger( `Welcome to Strudel! ${ decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!` } Press play or hit ctrl+enter to run it!`, 'highlight', ); - setCode(decoded || randomTune); + setCode(latestCode || decoded || randomTune); }); }, []); @@ -252,8 +249,6 @@ export function Repl({ embedded = false }) { isDirty, lastShared, activeCode, - activeFooter, - setActiveFooter, handleChangeCode, handleTogglePlay, handleUpdate, diff --git a/website/src/settings.mjs b/website/src/settings.mjs index f4c4c900..caabfbe5 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -2,10 +2,12 @@ import { persistentMap } from '@nanostores/persistent'; import { useStore } from '@nanostores/react'; export const defaultSettings = { + activeFooter: 'intro', keybindings: 'codemirror', theme: 'strudelTheme', fontFamily: 'monospace', fontSize: 18, + latestCode: '', }; export const settingsMap = persistentMap('strudel-settings', defaultSettings); @@ -13,3 +15,7 @@ export const settingsMap = persistentMap('strudel-settings', defaultSettings); export function useSettings() { return useStore(settingsMap); } + +export const setActiveFooter = (tab) => settingsMap.setKey('activeFooter', tab); + +export const setLatestCode = (code) => settingsMap.setKey('latestCode', code);