Encode code to / decode code from the URL hash. (#2096)

jdeniau · web-flow · commit c81ea7968f28 · 2025-04-20T23:30:08.000+02:00
diff --git a/website/src/app/play/Playground.tsx b/website/src/app/play/Playground.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import Repl from '../../repl/Repl';
+import { stringToBytes, bytesToString } from './encoder';
+
+export default function Playground() {
+  {
+    /*
+Debug with:
+
+List([
+  'apple',
+  'banana',
+  'coconut',
+  123,
+  null,
+  undefined,
+  new Date()
+])
+  .push('dragonfruit')
+  .map((fruit) => upperFirst(fruit))
+
+*/
+  }
+
+  let decodedHash: string | null = null;
+
+  try {
+    decodedHash = window.location.hash
+      ? bytesToString(window.location.hash.slice(1))
+      : null;
+  } catch (e) {
+    console.warn('Error decoding hash', e);
+  }
+
+  const defaultValue =
+    decodedHash ??
+    `const upperFirst = (str) => typeof str === 'string'
+? str.charAt(0).toUpperCase() + str.slice(1)
+: str;
+  
+List([
+'apple',
+'banana',
+'coconut',
+])
+.push('dragonfruit')
+.map((fruit) => upperFirst(fruit))
+`;
+
+  return (
+    <Repl
+      defaultValue={defaultValue}
+      onRun={(code) => {
+        const bytes = stringToBytes(code);
+
+        // adds bytes as url hash
+        window.location.hash = bytes;
+      }}
+    />
+  );
+}
diff --git a/website/src/app/play/encoder.ts b/website/src/app/play/encoder.ts
@@ -0,0 +1,20 @@
+// taken from https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa#unicode_strings
+function base64ToBytes(base64: string): Uint8Array {
+  const binString = atob(base64);
+  return Uint8Array.from(binString, (m: string) => m.codePointAt(0) ?? 0);
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  const binString = Array.from(bytes, (byte) =>
+    String.fromCodePoint(byte)
+  ).join('');
+  return btoa(binString);
+}
+
+export function stringToBytes(str: string): string {
+  return bytesToBase64(new TextEncoder().encode(str));
+}
+
+export function bytesToString(bytes: string): string {
+  return new TextDecoder().decode(base64ToBytes(bytes));
+}
diff --git a/website/src/app/play/page.tsx b/website/src/app/play/page.tsx
@@ -4,7 +4,7 @@ import { getTypeDefs } from '../../static/getTypeDefs';
 import { DocSearch } from '../../DocSearch';
 import { SideBar } from '../../Sidebar';
 import { getSidebarLinks } from '../../getSidebarLinks';
-import Repl from '../../repl/Repl';
+import Playground from './Playground';
 
 export async function generateStaticParams() {
   return [...getVersions().map((version) => ({ version }))];
@@ -29,38 +29,8 @@ export default function OverviewDocPage() {
       <div key="Overview" className="docContents">
         <DocSearch />
         <h1>Playgroud ({version})</h1>
-
-        {/*
-Debug with:
-
-List([
-  'apple',
-  'banana',
-  'coconut',
-  123,
-  null,
-  undefined,
-  new Date()
-])
-  .push('dragonfruit')
-  .map((fruit) => upperFirst(fruit))
-
-*/}
-
-        <Repl
-          defaultValue={`const upperFirst = (str) => typeof str === 'string'
-  ? str.charAt(0).toUpperCase() + str.slice(1)
-  : str;
-            
-List([
-  'apple',
-  'banana',
-  'coconut',
-])
-  .push('dragonfruit')
-  .map((fruit) => upperFirst(fruit))
-`}
-        />
+        You can share or bookmark the url to get access to this playground.
+        <Playground />
       </div>
     </>
   );
diff --git a/website/src/repl/Repl.tsx b/website/src/repl/Repl.tsx
@@ -5,9 +5,9 @@ import { Editor } from './Editor';
 import FormatterOutput from './FormatterOutput';
 import './repl.css';
 
-type Props = { defaultValue: string };
+type Props = { defaultValue: string; onRun?: (code: string) => void };
 
-function Repl({ defaultValue }: Props): JSX.Element {
+function Repl({ defaultValue, onRun }: Props): JSX.Element {
   const [code, setCode] = useState<string>(defaultValue);
   const [output, setOutput] = useState<{
     header: Array<unknown>;
@@ -125,6 +125,12 @@ function Repl({ defaultValue }: Props): JSX.Element {
 
   const runCode = () => {
     if (workerRef.current) {
+      // notify parent
+      if (onRun) {
+        onRun(code);
+      }
+
+      // send message to worker
       workerRef.current.postMessage(code);
       workerRef.current.onmessage = (event) => {
         if (event.data.error) {
