feat(dashboard, ui): Support TypeScript in the playground

.changeset/orange-items-remember.md

@@ -0,0 +1,6 @@
+---
+'@lagon/dashboard': patch
+'@lagon/ui': patch
+---
+
+feat: add playground typescript

packages/dashboard/lib/api/deployments.ts

@@ -325,6 +325,21 @@ async function streamToString(stream: Readable): Promise<string> {
 }
 
 export async function getDeploymentCode(deploymentId: string) {
+  try {
+    const tsContent = await s3.send(
+      new GetObjectCommand({
+        Bucket: process.env.S3_BUCKET,
+        Key: `${deploymentId}.ts`,
+      }),
+    );
+
+    if (tsContent.Body instanceof Readable) {
+      return streamToString(tsContent.Body);
+    }
+  } catch (e) {
+    console.warn(`${deploymentId} haven't ts file, e: ${(e as Error).message}`);
+  }
+
   const content = await s3.send(
     new GetObjectCommand({
       Bucket: process.env.S3_BUCKET,

packages/dashboard/lib/constants.ts

@@ -44,3 +44,7 @@ export type Regions = keyof typeof REGIONS;
 export const DEFAULT_FUNCTION = `export function handler(request) {
   return new Response("Hello World!")
 }`;
+
+export const DEFAULT_TS_FUNCTION = `export function handler(request: Request) {
+  return new Response("Hello World!")
+}`;

packages/dashboard/lib/hooks/useEsbuild.ts

@@ -0,0 +1,122 @@
+import * as esbuild from 'esbuild-wasm';
+import { Plugin, Loader } from 'esbuild-wasm';
+import { useCallback, useEffect, useState } from 'react';
+
+type EsbuildFileSystem = Map<
+  string,
+  {
+    content: string;
+  }
+>;
+
+const PROJECT_ROOT = '/project/';
+
+const RESOLVE_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js', '.css', '.json'];
+
+const extname = (path: string): string => {
+  const m = /(\.[a-zA-Z0-9]+)$/.exec(path);
+  return m ? m[1] : '';
+};
+
+const inferLoader = (p: string): Loader => {
+  const ext = extname(p);
+  if (RESOLVE_EXTENSIONS.includes(ext)) {
+    return ext.slice(1) as Loader;
+  }
+  if (ext === '.mjs' || ext === '.cjs') {
+    return 'js';
+  }
+  return 'text';
+};
+
+const resolvePlugin = (files: EsbuildFileSystem): Plugin => {
+  return {
+    name: 'resolve',
+    setup(build) {
+      build.onResolve({ filter: /.*/ }, async args => {
+        if (args.path.startsWith(PROJECT_ROOT)) {
+          return {
+            path: args.path,
+          };
+        }
+      });
+
+      build.onLoad({ filter: /.*/ }, args => {
+        if (args.path.startsWith(PROJECT_ROOT)) {
+          const name = args.path.replace(PROJECT_ROOT, '');
+          const file = files.get(name);
+          if (file) {
+            return {
+              contents: file.content,
+              loader: inferLoader(args.path),
+            };
+          }
+        }
+      });
+    },
+  };
+};
+
+export enum ESBuildStatus {
+  Success,
+  Fail,
+  Loading,
+}
+
+class EsBuildSingleton {
+  static isFirst = true;
+  static getIsFirst = () => {
+    if (EsBuildSingleton.isFirst) {
+      EsBuildSingleton.isFirst = false;
+      return true;
+    }
+    return EsBuildSingleton.isFirst;
+  };
+}
+
+export const useEsbuild = () => {
+  const [esbuildStatus, setEsbuildStatus] = useState(ESBuildStatus.Loading);
+  const [isEsbuildLoading, setIsEsbuildLoading] = useState(true);
+
+  // React.StrictMode will cause useEffect to run twice
+  const loadEsbuild = useCallback(async () => {
+    try {
+      if (EsBuildSingleton.getIsFirst()) {
+        await esbuild.initialize({
+          wasmURL: `/esbuild.wasm`,
+        });
+      }
+
+      setEsbuildStatus(ESBuildStatus.Success);
+    } catch (e) {
+      setEsbuildStatus(ESBuildStatus.Fail);
+      console.error(e);
+    } finally {
+      setIsEsbuildLoading(false);
+    }
+  }, [isEsbuildLoading, esbuildStatus]);
+
+  const build = useCallback(
+    (files: EsbuildFileSystem) =>
+      esbuild.build({
+        entryPoints: [`${PROJECT_ROOT}index.ts`],
+        outdir: '/dist',
+        format: 'esm',
+        write: false,
+        bundle: true,
+        target: 'esnext',
+        platform: 'browser',
+        conditions: ['lagon', 'worker'],
+        plugins: [resolvePlugin(files)],
+      }),
+    [isEsbuildLoading, esbuildStatus],
+  );
+
+  useEffect(() => {
+    loadEsbuild();
+  }, []);
+
+  return { isEsbuildLoading, esbuildStatus, build };
+};
+
+export default useEsbuild;

packages/dashboard/lib/trpc/deploymentsRouter.ts

@@ -25,6 +25,7 @@ export const deploymentsRouter = (t: T) =>
         z.object({
           functionId: z.string(),
           functionSize: z.number(),
+          tsSize: z.number(),
           assets: z
             .object({
               name: z.string(),
@@ -67,6 +68,11 @@ export const deploymentsRouter = (t: T) =>
         };
 
         const codeUrl = await getPresignedUrl(`${deployment.id}.js`, input.functionSize);
+
+        let tsCodeUrl: string | undefined;
+        if (input.tsSize > 0) {
+          tsCodeUrl = await getPresignedUrl(`${deployment.id}.ts`, input.tsSize);
+        }
         const assetsUrls: Record<string, string> = {};
 
         await Promise.all(
@@ -80,6 +86,7 @@ export const deploymentsRouter = (t: T) =>
           deploymentId: deployment.id,
           codeUrl,
           assetsUrls,
+          tsCodeUrl,
         };
       }),
     deploymentDeploy: t.procedure

packages/dashboard/locales/en.ts

@@ -152,6 +152,8 @@ export default {
   'playground.deploy.success': 'Function deployed successfully.',
   'playground.deploy.error': 'Failed to deploy Function.',
   'playground.reload': 'Reload',
+  'playground.esbuild.error': `Since your browser doesn't support wasm, you can't use typescript.`,
+  'playground.esbuild.loading': 'Initializing esbuild',
 
   'function.nav.playground': 'Playground',
   'function.nav.overview': 'Overview',

packages/dashboard/locales/fr.ts

@@ -165,6 +165,8 @@ export default defineLocale({
   'function.nav.logs': 'Logs',
   'function.nav.settings': 'Paramètres',
   'function.nav.cron': 'Cron',
+  'playground.esbuild.error': `Étant donné que votre navigateur ne prend pas en charge wasm, vous ne pouvez pas utiliser le typescript.`,
+  'playground.esbuild.loading': `esbuild est en cours d'initialisation`,
 
   'functions.overview.usage': 'Utilisation & Limites',
   'functions.overview.usage.requests': 'Requêtes',

packages/dashboard/package.json

@@ -41,6 +41,7 @@
     "@trpc/react-query": "^10.18.0",
     "@trpc/server": "^10.18.0",
     "clickhouse": "^2.6.0",
+    "esbuild-wasm": "0.17.19",
     "cron-parser": "^4.8.1",
     "cronstrue": "^2.27.0",
     "final-form": "^4.20.7",

packages/dashboard/pages/index.tsx

@@ -6,7 +6,7 @@ import { trpc } from 'lib/trpc';
 import { useRouter } from 'next/router';
 import { getLocaleProps, useScopedI18n } from 'locales';
 import { GetStaticProps } from 'next';
-import { DEFAULT_FUNCTION } from 'lib/constants';
+import { DEFAULT_FUNCTION, DEFAULT_TS_FUNCTION } from 'lib/constants';
 
 const Home = () => {
   const createFunction = trpc.functionCreate.useMutation();
@@ -35,16 +35,26 @@ const Home = () => {
             const deployment = await createDeployment.mutateAsync({
               functionId: func.id,
               functionSize: new TextEncoder().encode(DEFAULT_FUNCTION).length,
+              tsSize: new TextEncoder().encode(DEFAULT_TS_FUNCTION).length,
               assets: [],
             });
 
-            await fetch(deployment.codeUrl, {
-              method: 'PUT',
-              headers: {
-                'Content-Type': 'text/javascript',
-              },
-              body: DEFAULT_FUNCTION,
-            });
+            await await Promise.all([
+              fetch(deployment.codeUrl, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'text/javascript',
+                },
+                body: DEFAULT_FUNCTION,
+              }),
+              fetch(deployment.tsCodeUrl!, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'text/javascript',
+                },
+                body: DEFAULT_TS_FUNCTION,
+              }),
+            ]);
 
             await deployDeployment.mutateAsync({
               functionId: func.id,

packages/dashboard/pages/playground/[functionId].tsx

@@ -1,16 +1,32 @@
 import { useMonaco } from '@monaco-editor/react';
 import { useRouter } from 'next/router';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import toast from 'react-hot-toast';
 import FunctionLinks from 'lib/components/FunctionLinks';
 import Playground from 'lib/components/Playground';
 import useFunction from 'lib/hooks/useFunction';
 import { getFullCurrentDomain } from 'lib/utils';
-import { Text, Button, Form } from '@lagon/ui';
+import { Text, Button, Form, LogLine } from '@lagon/ui';
 import { PlayIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import useFunctionCode from 'lib/hooks/useFunctionCode';
 import { useScopedI18n } from 'locales';
 import { trpc } from 'lib/trpc';
+import useEsbuild, { ESBuildStatus } from 'lib/hooks/useEsbuild';
+
+const EsBuildTip: React.FC<{ esbuildStatus: ESBuildStatus }> = ({ esbuildStatus }) => {
+  const t = useScopedI18n('playground');
+  return [ESBuildStatus.Fail, ESBuildStatus.Loading].includes(esbuildStatus) ? (
+    <div className=" w-full">
+      <LogLine
+        level={esbuildStatus === ESBuildStatus.Loading ? 'warn' : 'error'}
+        message={esbuildStatus === ESBuildStatus.Loading ? t('esbuild.loading') : t('esbuild.error')}
+        hiddenCopy
+      />
+    </div>
+  ) : (
+    <></>
+  );
+};
 
 const PlaygroundPage = () => {
   const {
@@ -23,6 +39,7 @@ const PlaygroundPage = () => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const monaco = useMonaco();
   const t = useScopedI18n('playground');
+  const { isEsbuildLoading, esbuildStatus, build } = useEsbuild();
   const [isLoading, setIsLoading] = useState(false);
 
   const reloadIframe = useCallback(() => {
@@ -46,21 +63,60 @@ const PlaygroundPage = () => {
               code = monaco.editor.getModels()[1].getValue();
             }
 
+            let tsCode = '';
+
             setIsLoading(true);
 
+            if (esbuildStatus === ESBuildStatus.Success) {
+              try {
+                tsCode = code;
+                const files = new Map<string, { content: string }>();
+
+                files.set('index.ts', {
+                  content: code,
+                });
+
+                const esbuildResult = await build(files);
+
+                if (esbuildResult.outputFiles?.[0]) {
+                  code = esbuildResult.outputFiles[0].text;
+                } else {
+                  esbuildResult.errors.forEach(e => {
+                    console.error(e);
+                  });
+                }
+              } catch (e) {
+                console.error(e);
+              }
+            }
+
             const deployment = await createDeployment.mutateAsync({
               functionId: func.id,
               functionSize: new TextEncoder().encode(code).length,
+              tsSize: new TextEncoder().encode(tsCode).length,
               assets: [],
             });
 
-            await fetch(deployment.codeUrl, {
-              method: 'PUT',
-              headers: {
-                'Content-Type': 'text/javascript',
-              },
-              body: code,
-            });
+            await Promise.all([
+              fetch(deployment.codeUrl, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'text/javascript',
+                },
+                body: code,
+              }),
+              ...(tsCode.length > 0
+                ? [
+                    fetch(deployment.tsCodeUrl!, {
+                      method: 'PUT',
+                      headers: {
+                        'Content-Type': 'text/javascript',
+                      },
+                      body: tsCode,
+                    }),
+                  ]
+                : []),
+            ]);
 
             await deployDeployment.mutateAsync({
               functionId: func.id,
@@ -87,7 +143,12 @@ const PlaygroundPage = () => {
             </Text>
             <div className="flex items-center gap-2">
               <Button href={`/functions/${func?.id}`}>{t('back')}</Button>
-              <Button variant="primary" leftIcon={<PlayIcon className="h-4 w-4" />} submit disabled={isLoading}>
+              <Button
+                variant="primary"
+                leftIcon={<PlayIcon className="h-4 w-4" />}
+                submit
+                disabled={isLoading || isEsbuildLoading}
+              >
                 {t('deploy')}
               </Button>
             </div>
@@ -102,7 +163,8 @@ const PlaygroundPage = () => {
       </div>
       <div className="flex w-screen" style={{ height: 'calc(100vh - 4rem - 3rem)' }}>
         <Playground defaultValue={functionCode?.code || ''} width="50vw" height="100%" />
-        <div className="w-[50vw] border-l border-l-stone-200 dark:border-b-stone-700">
+        <div className="flex w-[50vw] flex-col border-l border-l-stone-200 dark:border-b-stone-700">
+          <EsBuildTip esbuildStatus={esbuildStatus} />
           {func ? <iframe ref={iframeRef} className="h-full w-full" src={getFullCurrentDomain(func)} /> : null}
         </div>
       </div>