[feat] add link sharing

apps/site/package.json

@@ -25,6 +25,7 @@
     "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.16.10",
+    "lz-string": "^1.5.0",
     "monaco-editor": "^0.51.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/site/src/components/playground/Editor.tsx

@@ -11,6 +11,7 @@ import {
 import type { editor } from 'monaco-editor';
 import { Typechecker } from '@repo/typecheck/index';
 import { getProgram, serializeProgram } from './utils/program';
+import { getSharedCode } from './utils/share';
 
 const Container = styled.div`
   display: flex;
@@ -45,6 +46,7 @@ export default function Editor() {
   const monaco = useMonaco();
   const [language, setLanguage] = useState('Nospace');
   const [[lnNumber, colNumber], setCursorPos] = useState([1, 1]);
+  const { code } = useMemo(() => getSharedCode(), []);
 
   useEffect(() => {
     if (!monaco) {
@@ -205,7 +207,11 @@ export default function Editor() {
           </Dropdown>
         </Flex>
       </Toolbar>
-      <MonacoEditor defaultValue="" theme="vs-dark" options={monacoOptions} />
+      <MonacoEditor
+        defaultValue={code}
+        theme="vs-dark"
+        options={monacoOptions}
+      />
       <Toolbar>
         <div />
         Ln {lnNumber}, Col {colNumber}

apps/site/src/components/playground/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import Dropdown, { DropdownAction } from './Dropdown';
 import Button from './Button';
@@ -31,8 +31,35 @@ const RightActions = styled.div`
   padding-right: 16px;
 `;
 
+const ShareToast = styled.div`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  border-radius: 35px;
+  padding: 20px 40px;
+  margin-left: -142px;
+  margin-top: -31px;
+  font-size: 1.2rem;
+  z-index: 100000;
+`;
+
 export default function Header() {
-  const { run } = usePlaygroundContext();
+  const { run, share } = usePlaygroundContext();
+  const [showToast, setShowToast] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  const shareCode = useCallback(() => {
+    setShowToast(true);
+    timeoutRef.current = setTimeout(() => {
+      setShowToast(false);
+    }, 2000);
+    share();
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [share]);
 
   return (
     <Base>
@@ -45,8 +72,9 @@ export default function Header() {
       </Flex>
       <RightActions>
         <Button onClick={run}>Run</Button>
-        <Button>Share</Button>
+        <Button onClick={shareCode}>Share</Button>
       </RightActions>
+      {showToast && <ShareToast>URL copied to clipboard</ShareToast>}
     </Base>
   );
 }

apps/site/src/components/playground/PlaygroundContext.tsx

@@ -10,6 +10,7 @@ import {
 import { getProgram } from './utils/program';
 import { Typechecker } from '@repo/typecheck/index';
 import { Program } from '@repo/nose/index';
+import { generateShareHashParameter, getSharedCode } from './utils/share';
 
 export type CompilerMessage = {
   message: string;
@@ -22,6 +23,7 @@ export type PlaygroundContextType = {
   programOutput: string;
   compilerOutput: CompilerMessage[];
   run: () => void;
+  share: () => void;
 };
 
 const PlaygroundContext = createContext<PlaygroundContextType>({
@@ -30,6 +32,7 @@ const PlaygroundContext = createContext<PlaygroundContextType>({
   programOutput: '',
   compilerOutput: [],
   run: () => {},
+  share: () => {},
 });
 
 export const usePlaygroundContext = () => useContext(PlaygroundContext);
@@ -39,7 +42,8 @@ export const PlaygroundContextProvider = ({
 }: {
   children: ReactNode;
 }) => {
-  const [programInput, setProgramInput] = useState('');
+  const { input } = useMemo(() => getSharedCode(), []);
+  const [programInput, setProgramInput] = useState(input);
   const [programOutput, setProgramOutput] = useState('');
   const [compilerOutput, setCompilerOutput] = useState<CompilerMessage[]>([]);
 
@@ -91,15 +95,27 @@ export const PlaygroundContextProvider = ({
     setProgramOutput(output);
   }, [monaco]);
 
+  const share = useCallback(() => {
+    if (!monaco) {
+      return;
+    }
+
+    const editor = monaco.editor.getEditors()[0];
+
+    const hash = generateShareHashParameter(editor.getValue(), programInput);
+    location.hash = hash;
+  }, [monaco, programInput]);
+
   const value = useMemo(
     () => ({
       programInput,
       setProgramInput,
       programOutput,
       compilerOutput,
       run,
+      share,
     }),
-    [programInput, programOutput, compilerOutput, run],
+    [programInput, programOutput, compilerOutput, run, share],
   );
 
   return (

apps/site/src/components/playground/utils/share.ts

@@ -0,0 +1,27 @@
+import lzstring from 'lz-string';
+
+export function generateShareHashParameter(code: string, input?: string) {
+  return `#code/${[code, input]
+    .filter(Boolean)
+    .map((x) => lzstring.compressToEncodedURIComponent(x!))
+    .join('/')}`;
+}
+
+export function getSharedCode() {
+  if (typeof window !== 'undefined' && location.hash.startsWith('#code')) {
+    const [code, input] = location.hash
+      .replace('#code/', '')
+      .trim()
+      .split('/')
+      .map((x) => lzstring.decompressFromEncodedURIComponent(x));
+    return {
+      code,
+      input,
+    };
+  }
+
+  return {
+    code: '',
+    input: '',
+  };
+}

yarn.lock

@@ -6557,7 +6557,7 @@ lru-cache@^7.14.1:
 
 lz-string@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
 magic-string@^0.27.0: