attio 0.0.1-experimental.20250512 → 0.0.1-experimental.20250513.1

package/lib/template/package.json

@@ -13,18 +13,19 @@
     "lint": "ATTIO_LINT_MODE='exhaustive' eslint \"src/**/*.{ts,tsx,js,tsx}\""
   },
   "devDependencies": {
-    "@types/react": "19.0.8",
-    "@typescript-eslint/eslint-plugin": "8.22.0",
-    "@typescript-eslint/parser": "8.22.0",
+    "@types/react": "19.1.4",
+    "@typescript-eslint/eslint-plugin": "8.32.1",
+    "@typescript-eslint/parser": "8.32.1",
     "eslint": "8.57.1",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "typescript": "5.7.3"
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "typescript": "5.8.3"
   },
   "dependencies": {
-    "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.19.0",
+    "@eslint/eslintrc": "3.3.1",
+    "@eslint/js": "9.26.0",
     "attio": "latest",
-    "react": "19.0.0"
+    "react": "19.1.0",
+    "zod": "3.24.4"
   }
 }

package/lib/template/src/get-stoic-quote.server.ts

@@ -0,0 +1,14 @@
+import {z} from "zod"
+
+const quoteSchema = z.object({
+    text: z.string(),
+    author: z.string(),
+})
+export type Quote = z.infer<typeof quoteSchema>
+
+export default async function getStoicQuote(recordId: string): Promise<Quote> {
+    // We don't really need the recordId for this API, but this is how we could use a parameter
+    const response = await fetch(`https://stoic-quotes.com/api/quote?${recordId}`)
+    const data = await response.json()
+    return quoteSchema.parse(data)
+}

package/lib/template/src/hello-world-dialog.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import {TextBlock} from "attio/client"
-import {CatFact} from "./cat-fact"
+import {StoicQuote} from "./stoic-quote"
 
-const Loading = () => <TextBlock>Loading cat fact...</TextBlock>
+const Loading = () => <TextBlock>Loading stoic quote...</TextBlock>
 
 export function HelloWorldDialog({recordId}: {recordId: string}) {
     // A simple counter to demonstrate that this is just regular React code.
@@ -17,9 +17,9 @@ export function HelloWorldDialog({recordId}: {recordId: string}) {
             <TextBlock align="left">
                 I am a dialog. I have been open for: {seconds} second{seconds === 1 ? "" : "s"}
             </TextBlock>
-            {/* The hook in CatFact will suspend until the cat fact is loaded. */}
+            {/* The hook in StoicQuote will suspend until the stoic quote is loaded. */}
             <React.Suspense fallback={<Loading />}>
-                <CatFact recordId={recordId} />
+                <StoicQuote recordId={recordId} />
             </React.Suspense>
         </>
     )

package/lib/template/src/stoic-quote.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import {Column, TextBlock, useAsyncCache} from "attio/client"
+import getStoicQuote from "./get-stoic-quote.server"
+
+export function StoicQuote({recordId}: {recordId: string}) {
+    // By passing in the recordId, the result will be cached for each recordId
+    const {
+        values: {quote},
+        //       ^^^^^– this key matches
+        //             vvvvv– this key
+    } = useAsyncCache({quote: [getStoicQuote, recordId]})
+    //                         ^^^^^^^^^^^^^  ^^^^^^^^
+    //                         async fn       parameter(s)
+
+    return (
+        <Column>
+            <TextBlock align="center">{quote.text}</TextBlock>
+            <TextBlock align="right">– {quote.author}</TextBlock>
+        </Column>
+    )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "attio",
-  "version": "0.0.1-experimental.20250512",
+  "version": "0.0.1-experimental.20250513.1",
   "bin": "lib/attio.js",
   "type": "module",
   "files": [

package/lib/template/src/cat-fact.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import {TextBlock, useAsyncCache} from "attio/client"
-import getCatFact from "./get-cat-fact.server"
-
-export function CatFact({recordId}: {recordId: string}) {
-    // By passing in the recordId, the result will be cached for each recordId
-    const {
-        values: {catFact},
-        //       ^^^^^^^– this key matches
-        //               vvvvvvv– this key
-    } = useAsyncCache({catFact: [getCatFact, recordId]})
-    //                           ^^^^^^^^^^  ^^^^^^^^
-    //                           async fn    parameter(s)
-
-    return <TextBlock align="center">{`"${catFact}"`}</TextBlock>
-}

package/lib/template/src/get-cat-fact.server.ts

@@ -1,6 +0,0 @@
-export default async function getCatFact(recordId: string): Promise<string> {
-    // We don't really need the recordId for this API, but this is how we could use a parameter
-    const response = await fetch(`https://catfact.ninja/fact?${recordId}`)
-    const data = await response.json()
-    return data.fact
-}