From 77e742a759612625f6789eae58a1284939b07f0a Mon Sep 17 00:00:00 2001 From: Ryan Christian Date: Sun, 30 Jun 2024 01:42:59 -0500 Subject: [PATCH 1/3] refactor: Clean up tutorial & REPL, fix ?code query param --- src/components/controllers/repl-page.jsx | 44 ++++------- src/components/controllers/repl/examples.js | 13 +--- src/components/controllers/repl/index.jsx | 57 +++++++-------- src/components/controllers/tutorial/index.jsx | 73 +++++++++---------- 4 files changed, 80 insertions(+), 107 deletions(-) diff --git a/src/components/controllers/repl-page.jsx b/src/components/controllers/repl-page.jsx index 11854998e..888126769 100644 --- a/src/components/controllers/repl-page.jsx +++ b/src/components/controllers/repl-page.jsx @@ -1,6 +1,6 @@ -import { useRoute } from 'preact-iso'; +import { useLocation, useRoute } from 'preact-iso'; import { Repl } from './repl'; -import { useExample } from './repl/examples'; +import { fetchExample } from './repl/examples'; import { useContent, useResource } from '../../lib/use-resource'; import { useTitle, useDescription } from './utils'; import { useLanguage } from '../../lib/i18n'; @@ -15,7 +15,7 @@ export default function ReplPage() { useTitle(meta.title); useDescription(meta.description); - const [code, slug] = initialCode(query); + const code = useResource(() => getInitialCode(query), [query]); return (
@@ -24,11 +24,8 @@ export default function ReplPage() { height: 100% !important; overflow: hidden !important; } - footer { - display: none !important; - } `} - +
); } @@ -38,42 +35,31 @@ export default function ReplPage() { * * ?code -> ?example -> localStorage -> simple counter example */ -function initialCode(query) { - let code, slug; +async function getInitialCode(query) { + const { route } = useLocation(); + let code; if (query.code) { - try { - code = useResource(() => querySafetyCheck(atob(query.code)), [query.code]); - } catch (e) {} + code = querySafetyCheck(atob(query.code)); } else if (query.example) { - code = useExample([query.example]); - if (code) { - slug = query.example; - history.replaceState( - null, - null, - `/repl?example=${encodeURIComponent(slug)}` - ); + code = await fetchExample(query.example); + if (!code) { + route('/repl', true); } - else history.replaceState(null, null, '/repl'); } if (!code) { if (typeof window !== 'undefined' && localStorage.getItem('preact-www-repl-code')) { code = localStorage.getItem('preact-www-repl-code'); } else { - slug = 'counter'; + const slug = 'counter'; if (typeof window !== 'undefined') { - history.replaceState( - null, - null, - `/repl?example=${encodeURIComponent(slug)}` - ); + route(`/repl?example=${encodeURIComponent(slug)}`, true); } - code = useExample([slug]); + code = await fetchExample(slug); } } - return [code, slug]; + return code; } async function querySafetyCheck(code) { diff --git a/src/components/controllers/repl/examples.js b/src/components/controllers/repl/examples.js index 26a5f0512..387eb8ff7 100644 --- a/src/components/controllers/repl/examples.js +++ b/src/components/controllers/repl/examples.js @@ -1,5 +1,3 @@ -import { useResource } from '../../../lib/use-resource'; - import simpleCounterExample from './examples/simple-counter.txt?url'; import counterWithHtmExample from './examples/counter-with-htm.txt?url'; import todoExample from './examples/todo-list.txt?url'; @@ -69,15 +67,10 @@ export function getExample(slug, list = EXAMPLES) { } /** - * @param {[ slug: string ]} args - * @returns {string | undefined} + * @param {string} slug */ -export function useExample([slug]) { +export async function fetchExample(slug) { const example = getExample(slug); if (!example) return; - return useResource(() => loadExample(example.url), ['example', slug]); -} - -export async function loadExample(exampleUrl) { - return await fetch(exampleUrl).then(r => r.text()); + return await fetch(example.url).then(r => r.text()); } diff --git a/src/components/controllers/repl/index.jsx b/src/components/controllers/repl/index.jsx index 5b91ae557..0da25a41f 100644 --- a/src/components/controllers/repl/index.jsx +++ b/src/components/controllers/repl/index.jsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'preact/hooks'; +import { useLocation, useRoute } from 'preact-iso'; import { Splitter } from '../../splitter'; -import { EXAMPLES, getExample, loadExample } from './examples'; +import { EXAMPLES, fetchExample } from './examples'; import { ErrorOverlay } from './error-overlay'; import { useStoredValue } from '../../../lib/localstorage'; import { useResource } from '../../../lib/use-resource'; @@ -13,9 +14,10 @@ import REPL_CSS from './examples.css?raw'; * @param {string} props.code * @param {string} [props.slug] */ -export function Repl({ code, slug }) { +export function Repl({ code }) { + const { route } = useLocation(); + const { query } = useRoute(); const [editorCode, setEditorCode] = useStoredValue('preact-www-repl-code', code); - const [exampleSlug, setExampleSlug] = useState(slug || ''); const [error, setError] = useState(null); const [copied, setCopied] = useState(false); @@ -23,6 +25,9 @@ export function Repl({ code, slug }) { // causes some bad jumping/pop-in. For the moment, this is the best option if (typeof window === 'undefined') return null; + /** + * @type {{ Runner: import('../repl/runner').default, CodeEditor: import('../../code-editor').default }} + */ const { Runner, CodeEditor } = useResource(() => Promise.all([ import('../../code-editor'), import('./runner') @@ -30,38 +35,28 @@ export function Repl({ code, slug }) { const applyExample = (e) => { const slug = e.target.value; - loadExample(getExample(slug).url) + fetchExample(slug) .then(code => { setEditorCode(code); - setExampleSlug(slug); - history.replaceState( - null, - null, - `/repl?example=${encodeURIComponent(slug)}` - ); + route(`/repl?example=${encodeURIComponent(slug)}`, true); }); }; - useEffect(() => { - const example = getExample(exampleSlug); - (async function () { - if (example) { - const code = await loadExample(example.url); - if (location.search && code !== editorCode) { - setExampleSlug(''); - history.replaceState(null, null, '/repl'); - } - } - })(); - }, [editorCode]); + const onEditorInput = (code) => { + setEditorCode(code); + + // Clears the (now outdated) example & code query params + // when a user begins to modify the code + if (query.example || query.code) { + route('/repl', true); + } + }; const share = () => { - if (!exampleSlug) { - history.replaceState( - null, - null, - `/repl?code=${encodeURIComponent(btoa(editorCode))}` - ); + // No reason to share semi-sketchy btoa'd code if there's + // a perfectly good example we can use instead + if (!query.example) { + route(`/repl?code=${encodeURIComponent(btoa(editorCode))}`, true); } try { @@ -90,13 +85,13 @@ export function Repl({ code, slug }) {