enable biome check on examples (#225)

* enable biome check on examples

* Reorder imports and update lefthook config

Reordered import statements for consistency across multiple files and updated lefthook.yml to include examples directory in biome checks. Minor cleanup in code-interpreter and worker files for improved clarity.

Author: threepointone

biome.json

@@ -12,8 +12,10 @@
     "ignoreUnknown": false,
     "includes": [
       "packages/**",
+      "examples/**",
       "!node_modules",
       "!**/node_modules",
+      "!**/worker-configuration.d.ts",
       "!package.json",
       "!**/package.json",
       "!dist",
@@ -56,6 +58,11 @@
       }
     }
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "vcs": {
     "clientKind": "git",
     "enabled": false,

examples/code-interpreter/src/index.ts

@@ -1,5 +1,5 @@
-import OpenAI from 'openai';
 import { getSandbox } from '@cloudflare/sandbox';
+import type OpenAI from 'openai';
 
 export { Sandbox } from '@cloudflare/sandbox';
 
@@ -11,12 +11,6 @@ type ResponseInputItem = OpenAI.Responses.ResponseInputItem;
 type FunctionTool = OpenAI.Responses.FunctionTool;
 type FunctionCall = OpenAI.Responses.ResponseFunctionToolCall;
 
-interface SandboxResult {
-  results?: Array<{ text?: string; html?: string; [key: string]: any }>;
-  logs?: { stdout?: string[]; stderr?: string[] };
-  error?: string;
-}
-
 async function callCloudflareAPI(
   env: Env,
   input: ResponseInputItem[],
@@ -51,9 +45,9 @@ async function executePythonCode(env: Env, code: string): Promise<string> {
   const sandboxId = env.Sandbox.idFromName('default');
   const sandbox = getSandbox(env.Sandbox, sandboxId.toString());
   const pythonCtx = await sandbox.createCodeContext({ language: 'python' });
-  const result = (await sandbox.runCode(code, {
+  const result = await sandbox.runCode(code, {
     context: pythonCtx
-  })) as SandboxResult;
+  });
 
   // Extract output from results (expressions)
   if (result.results?.length) {
@@ -70,7 +64,7 @@ async function executePythonCode(env: Env, code: string): Promise<string> {
   }
   if (result.logs?.stderr?.length) {
     if (output) output += '\n';
-    output += 'Error: ' + result.logs.stderr.join('\n');
+    output += `Error: ${result.logs.stderr.join('\n')}`;
   }
 
   return result.error

examples/typescript-validator/Dockerfile

@@ -1,6 +1,11 @@
 # Use Cloudflare sandbox as base
 FROM docker.io/cloudflare/sandbox:0.5.0
 
+# On a mac, you might need to actively pick up the
+# arm64 build of the image.
+# FROM --platform=linux/arm64 cloudflare/sandbox-test:0.5.0
+
+
 # Install esbuild for TypeScript bundling
 RUN npm install -g esbuild
 

examples/typescript-validator/src/App.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
+import CodeViewerSheet from './components/CodeViewerSheet';
+import CornerSquares from './components/CornerSquares';
+import FlowDiagram from './components/FlowDiagram';
 import SchemaEditor from './components/SchemaEditor';
 import TestDataPanel from './components/TestDataPanel';
-import FlowDiagram from './components/FlowDiagram';
-import CornerSquares from './components/CornerSquares';
-import CodeViewerSheet from './components/CodeViewerSheet';
-import type { ValidateResponse, ErrorResponse, StatusLine } from './types';
+import type { ErrorResponse, StatusLine, ValidateResponse } from './types';
 
 const DEFAULT_SCHEMA = `import { z } from 'zod';
 
@@ -69,7 +69,7 @@ export default function App() {
       return;
     }
 
-    let parsedTestData;
+    let parsedTestData: unknown;
     try {
       parsedTestData = JSON.parse(trimmedTestData);
     } catch (error) {
@@ -182,12 +182,14 @@ export default function App() {
           </div>
           <div className="flex gap-3">
             <button
+              type="button"
               onClick={() => setIsCodeViewerOpen(true)}
               className="bg-bg-cream hover:bg-bg-cream-dark text-text-dark border border-border-beige px-6 py-3 rounded-full font-medium text-sm transition-all duration-200 active:scale-[0.98]"
             >
               View Code
             </button>
             <button
+              type="button"
               onClick={handleValidate}
               disabled={isValidating}
               className="bg-orange-primary hover:border-dashed disabled:bg-border-light disabled:cursor-not-allowed text-bg-cream border border-orange-primary px-6 py-3 rounded-full font-medium text-sm transition-all duration-200 active:scale-[0.98]"

examples/typescript-validator/src/components/CodeViewerSheet.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import { Highlight, themes } from 'prism-react-renderer';
+import { useState } from 'react';
 
 interface CodeViewerSheetProps {
   isOpen: boolean;
@@ -84,6 +84,7 @@ const result = await response.json();`;
     <>
       {/* Backdrop */}
       {isOpen && (
+        // biome-ignore lint/a11y/noStaticElementInteractions: backdrop is interactive
         <div
           className="fixed inset-0 bg-black/20 z-40 transition-opacity"
           onClick={onClose}
@@ -119,6 +120,7 @@ const result = await response.json();`;
                     stroke="currentColor"
                     viewBox="0 0 24 24"
                   >
+                    <title>Sandbox SDK Docs</title>
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
@@ -140,6 +142,7 @@ const result = await response.json();`;
                     stroke="currentColor"
                     viewBox="0 0 24 24"
                   >
+                    <title>Dynamic Workers Docs</title>
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
@@ -151,6 +154,7 @@ const result = await response.json();`;
               </div>
             </div>
             <button
+              type="button"
               onClick={onClose}
               className="text-text-dark hover:text-orange-primary transition-colors"
               aria-label="Close"
@@ -161,6 +165,7 @@ const result = await response.json();`;
                 stroke="currentColor"
                 viewBox="0 0 24 24"
               >
+                <title>Close</title>
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -174,6 +179,7 @@ const result = await response.json();`;
           {/* Tabs */}
           <div className="flex border-b border-border-beige bg-bg-cream-dark">
             <button
+              type="button"
               onClick={() => setActiveTab('compilation')}
               className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
                 activeTab === 'compilation'
@@ -184,6 +190,7 @@ const result = await response.json();`;
               Compilation (Sandbox SDK)
             </button>
             <button
+              type="button"
               onClick={() => setActiveTab('execution')}
               className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
                 activeTab === 'execution'
@@ -210,9 +217,21 @@ const result = await response.json();`;
                   style={{ ...style, backgroundColor: 'transparent' }}
                 >
                   {tokens.map((line, i) => (
-                    <div key={i} {...getLineProps({ line })}>
+                    <div
+                      key={
+                        // biome-ignore lint/suspicious/noArrayIndexKey: i is a valid prop
+                        i
+                      }
+                      {...getLineProps({ line })}
+                    >
                       {line.map((token, key) => (
-                        <span key={key} {...getTokenProps({ token })} />
+                        <span
+                          key={
+                            // biome-ignore lint/suspicious/noArrayIndexKey: key is a valid prop
+                            key
+                          }
+                          {...getTokenProps({ token })}
+                        />
                       ))}
                     </div>
                   ))}

examples/typescript-validator/src/components/FlowDiagram.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import DottedBackground from './DottedBackground';
 import type { StatusLine } from '../types';
+import DottedBackground from './DottedBackground';
 
 interface FlowDiagramProps {
   statusLines: StatusLine[];
@@ -54,10 +54,10 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
       const loadMatch = line.text.match(/Load.*?\((\d+)ms\)/);
       const executeMatch = line.text.match(/Execute.*?\((\d+)ms\)/);
 
-      if (installMatch) result.install = parseInt(installMatch[1]);
-      if (bundleMatch) result.bundle = parseInt(bundleMatch[1]);
-      if (loadMatch) result.load = parseInt(loadMatch[1]);
-      if (executeMatch) result.execute = parseInt(executeMatch[1]);
+      if (installMatch) result.install = parseInt(installMatch[1], 10);
+      if (bundleMatch) result.bundle = parseInt(bundleMatch[1], 10);
+      if (loadMatch) result.load = parseInt(loadMatch[1], 10);
+      if (executeMatch) result.execute = parseInt(executeMatch[1], 10);
     });
 
     return result;
@@ -123,9 +123,10 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
         {/* Schema Node */}
         <div className="flex flex-col items-center">
           <div
-            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${schemaNodeDone ? 'border-[#521000] bg-[#5210000d]' : 'border-[#ebd5c1] bg-[#fffbf5]'}`}
+            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${schemaNodeDone ? 'border-text-dark bg-[#5210000d]' : 'border-border-beige bg-bg-cream'}`}
           >
             <svg className="w-8 h-8" viewBox="0 0 25 24" fill="none">
+              <title>Schema</title>
               <path
                 d="M9.87182 18.3256L5.14774 12.0072L9.84586 5.86857L8.93876 4.63086L3.64504 11.5551L3.6377 12.4407L8.95688 19.5633L9.87182 18.3256Z"
                 fill="currentColor"
@@ -177,6 +178,7 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
             className="absolute inset-0 w-full h-full"
             preserveAspectRatio="none"
           >
+            <title>Connection</title>
             <line
               x1="0"
               y1="50%"
@@ -193,14 +195,15 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
         {/* Sandbox Node */}
         <div className="flex flex-col items-center relative">
           {isCached && (
-            <div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-[#19e306] text-[#fffbf5] text-[9px] font-medium px-2 py-0.5 rounded-full whitespace-nowrap">
+            <div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-[#19e306] text-bg-cream text-[9px] font-medium px-2 py-0.5 rounded-full whitespace-nowrap">
               Cached ⚡
             </div>
           )}
           <div
-            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${sandboxNodeDone ? 'border-[#521000] bg-[#5210000d]' : 'border-[#ebd5c1] bg-[#fffbf5]'}`}
+            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${sandboxNodeDone ? 'border-text-dark bg-[#5210000d]' : 'border-border-beige bg-bg-cream'}`}
           >
             <svg className="w-8 h-8" viewBox="0 0 25 24" fill="none">
+              <title>Sandbox SDK</title>
               <path
                 d="M21.5 16.0018V7.99739C21.4997 7.73541 21.4308 7.47807 21.3001 7.25101C21.1694 7.02394 20.9815 6.83506 20.7552 6.70317L13.6302 2.55661C13.2869 2.35675 12.8968 2.25146 12.4995 2.25146C12.1023 2.25146 11.7122 2.35675 11.3689 2.55661L4.24484 6.70317C4.01848 6.83506 3.83061 7.02394 3.69993 7.25101C3.56925 7.47807 3.50032 7.73541 3.5 7.99739V16.0018C3.50016 16.2639 3.56901 16.5214 3.6997 16.7487C3.83038 16.9759 4.01834 17.1649 4.24484 17.2969L11.3698 21.4435C11.7132 21.6431 12.1033 21.7482 12.5005 21.7482C12.8976 21.7482 13.2877 21.6431 13.6311 21.4435L20.7561 17.2969C20.9824 17.1648 21.1702 16.9758 21.3007 16.7485C21.4312 16.5213 21.4999 16.2638 21.5 16.0018Z"
                 stroke="currentColor"
@@ -241,6 +244,7 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
             className="absolute inset-0 w-full h-full"
             preserveAspectRatio="none"
           >
+            <title>Connection</title>
             <line
               x1="0"
               y1="50%"
@@ -257,9 +261,10 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
         {/* Dynamic Worker Node */}
         <div className="flex flex-col items-center">
           <div
-            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${workerNodeDone ? 'border-[#521000] bg-[#5210000d]' : 'border-[#ebd5c1] bg-[#fffbf5]'}`}
+            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${workerNodeDone ? 'border-text-dark bg-[#5210000d]' : 'border-border-beige bg-bg-cream'}`}
           >
             <svg className="w-8 h-8" viewBox="0 0 25 24" fill="none">
+              <title>Dynamic Worker</title>
               <path
                 d="M9.87182 18.3256L5.14774 12.0072L9.84586 5.86857L8.93876 4.63086L3.64504 11.5551L3.6377 12.4407L8.95688 19.5633L9.87182 18.3256Z"
                 fill="currentColor"
@@ -301,6 +306,7 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
             className="absolute inset-0 w-full h-full"
             preserveAspectRatio="none"
           >
+            <title>Connection</title>
             <line
               x1="0"
               y1="50%"
@@ -317,9 +323,10 @@ export default function FlowDiagram({ statusLines }: FlowDiagramProps) {
         {/* Result Node */}
         <div className="flex flex-col items-center">
           <div
-            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${resultNodeDone ? 'border-[#521000] bg-[#5210000d]' : 'border-[#ebd5c1] bg-[#fffbf5]'}`}
+            className={`w-24 h-24 rounded-sm border-2 border-dashed flex flex-col items-center justify-center gap-1 transition-all duration-300 ${resultNodeDone ? 'border-text-dark bg-[#5210000d]' : 'border-border-beige bg-bg-cream'}`}
           >
             <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none">
+              <title>Result</title>
               <circle
                 cx="12"
                 cy="12"

examples/typescript-validator/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["esnext"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "module": "esnext",
+    "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "types": ["@types/node", "./worker-configuration.d.ts"],
     "esModuleInterop": true,
@@ -11,5 +12,10 @@
     "skipLibCheck": true,
     "noEmit": true
   },
-  "include": ["worker-configuration.d.ts", "worker/**/*.ts", "src/**/*.ts"]
+  "include": [
+    "worker-configuration.d.ts",
+    "worker/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
 }

examples/typescript-validator/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite';
 import { cloudflare } from '@cloudflare/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [

examples/typescript-validator/worker/compiler.ts

@@ -1,8 +1,8 @@
 import { getSandbox } from '@cloudflare/sandbox';
 import type {
+  ErrorResponse,
   ValidateRequest,
   ValidateResponse,
-  ErrorResponse,
   ZodParseResult
 } from './types';
 

examples/typescript-validator/worker/index.ts

@@ -28,8 +28,7 @@ export default {
   }
 } satisfies ExportedHandler<Env>;
 
-// Export Compiler DO
-export { CompilerDO } from './compiler';
-
 // Export Sandbox DO from SDK
 export { Sandbox } from '@cloudflare/sandbox';
+// Export Compiler DO
+export { CompilerDO } from './compiler';