refactor: Better utilize suspense in REPL (#1150)

* fix: Html router middleware

* refactor: Switch REPL to utilize suspense better

* chore: Drop linkstate

* chore: Add impl note to REPL

* refactor: Simplify code editor import now that repl is skipped during SSR

* revert: Simplify repl runner worker now that repl is skipped during SSR

Author: rschristian

package-lock.json

@@ -76,7 +76,6 @@
     "comlink": "^4.4.1",
     "decko": "^1.2.0",
     "htm": "^3.1.1",
-    "linkstate": "^1.1.1",
     "magic-string": "^0.25.7",
     "marked": "^0.8.0",
     "preact": "10.15.1",

package.json

@@ -33,7 +33,7 @@ export function htmlRoutingMiddlewarePlugin() {
 
 				try {
 					await fs.access(file);
-					req.url += '/index.html';
+					req.url = url.pathname + '/index.html' + url.search;
 				} catch {
 					req.url = '/404/index.html';
 				}

plugins/html-routing-middleware.js

@@ -62,7 +62,7 @@ export default class CodeEditor extends Component {
 
 			this.value = this.editor.getValue();
 			let { onInput } = this.props;
-			if (onInput) onInput({ value: this.value });
+			if (onInput) onInput(this.value);
 		});
 	}
 

src/components/code-editor/index.jsx

@@ -1,9 +1,12 @@
 import { useRoute } from 'preact-iso';
 import { Repl } from './repl';
-import { useContent } from '../../lib/use-resource';
+import { useExample } from './repl/examples';
+import { useContent, useResource } from '../../lib/use-resource';
 import { useTitle, useDescription } from './utils';
 import { useLanguage } from '../../lib/i18n';
 
+import style from './repl/style.module.css';
+
 export default function ReplPage() {
 	const { query } = useRoute();
 	const [lang] = useLanguage();
@@ -12,5 +15,74 @@ export default function ReplPage() {
 	useTitle(meta.title);
 	useDescription(meta.description);
 
-	return <Repl query={query} />;
+	const [code, slug] = initialCode(query);
+
+	return (
+		<div class={style.repl}>
+			<style>{`
+				main {
+					height: 100% !important;
+					overflow: hidden !important;
+				}
+				footer {
+					display: none !important;
+				}
+			`}</style>
+			<Repl code={code} slug={slug} />
+		</div>
+	);
+}
+
+/**
+ * Go down the list of fallbacks to get initial code
+ *
+ * ?code -> ?example -> localStorage -> simple counter example
+ */
+function initialCode(query) {
+	let code, slug;
+	if (query.code)  {
+		try {
+			code = useResource(() => querySafetyCheck(atob(query.code)), [query.code]);
+		} catch (e) {}
+	} else if (query.example) {
+		code = useExample([query.example]);
+		if (code) {
+			slug = query.example;
+			history.replaceState(
+				null,
+				null,
+				`/repl?example=${encodeURIComponent(slug)}`
+			);
+		}
+		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';
+			if (typeof window !== 'undefined') {
+				history.replaceState(
+					null,
+					null,
+					`/repl?example=${encodeURIComponent(slug)}`
+				);
+			}
+			code = useExample([slug]);
+		}
+	}
+
+	return [code, slug];
+}
+
+async function querySafetyCheck(code) {
+    return (
+		!document.referrer ||
+		document.referrer.indexOf(location.origin) === 0 ||
+		// eslint-disable-next-line no-alert
+		confirm('Are you sure you want to run the code contained in this link?')
+    )
+		? code
+		: undefined;
 }

src/components/controllers/repl-page.jsx

@@ -0,0 +1,83 @@
+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';
+import todoExampleSignal from './examples/todo-list-signal.txt?url';
+import repoListExample from './examples/github-repo-list.txt?url';
+import contextExample from './examples/context.txt?url';
+import spiralExample from './examples/spiral.txt?url';
+
+export const EXAMPLES = [
+	{
+		name: 'Simple Counter',
+		slug: 'counter',
+		url: simpleCounterExample
+	},
+	{
+		name: 'Todo List',
+		slug: 'todo',
+		url: todoExample
+	},
+	{
+		name: 'Todo List (Signals)',
+		slug: 'todo-list-signals',
+		url: todoExampleSignal
+	},
+	{
+		name: 'Github Repo List',
+		slug: 'github-repo-list',
+		url: repoListExample
+	},
+	{
+		group: 'Advanced',
+		items: [
+			{
+				name: 'Counter using HTM',
+				slug: 'counter-htm',
+				url: counterWithHtmExample
+			},
+			{
+				name: 'Context',
+				slug: 'context',
+				url: contextExample
+			}
+		]
+	},
+	{
+		group: 'Animation',
+		items: [
+			{
+				name: 'Spiral',
+				slug: 'spiral',
+				url: spiralExample
+			}
+		]
+	}
+];
+
+export function getExample(slug, list = EXAMPLES) {
+	for (let i = 0; i < list.length; i++) {
+		let item = list[i];
+		if (item.group) {
+			let found = getExample(slug, item.items);
+			if (found) return found;
+		} else if (item.slug.toLowerCase() === slug.toLowerCase()) {
+			return item;
+		}
+	}
+}
+
+/**
+ * @param {[ slug: string ]} args
+ * @returns {string | undefined}
+ */
+export function useExample([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());
+}