Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughThis change introduces a new client-side API explorer feature for the Prisma site. It adds the Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~55 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (6)
apps/site/src/components/client/api.tsx (2)
148-173:CodeUIItemsis defined inside the component — recreated every render.Defining a component inside another component means it gets a new identity on each render. This can cause unnecessary unmounting/remounting of the sub-tree. Move it outside
APIor memoize it.Move component outside or convert to a function
Either move
CodeUIItemsto module scope (outsideAPI), passingfuncSelectedandsetFuncSelectedas props, or inline it as a render function (without the JSX component pattern):+const CodeUIItems = ({ + item, + blockType, + funcSelected, + setFuncSelected, +}: { + item: any; + blockType: string; + funcSelected: any; + setFuncSelected: (func: any) => void; +}) => { + const labelToDisplay = item.functions.filter( + (i: any) => i[blockType] && i[blockType].length > 0, + ); + return ( + <ul className="flex flex-wrap my-5 mx-0 gap-2 list-none p-0"> + {labelToDisplay.map((func: any, fIndex: number) => ( + <li key={fIndex}> + <div + className={cn( + "rounded-full px-3 py-2 bg-background-default border border-stroke-neutral text-base uppercase font-sans-display font-bold tracking-wide leading-4 cursor-pointer transition-colors duration-300 ease-in-out hover:bg-foreground-orm text-foreground-neutral hover:text-foreground-neutral-reverse", + funcSelected === func && + "bg-foreground-orm text-foreground-reverse-neutral", + )} + onClick={() => setFuncSelected(func)} + > + {func.name} + </div> + </li> + ))} + </ul> + ); +}; const API = () => { // ... existing code ... - const CodeUIItems = ({ item, blockType }: any) => { - // ... remove inline definition ... - };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/client/api.tsx` around lines 148 - 173, The CodeUIItems component is recreated on every render because it's defined inside API; move CodeUIItems to module scope (outside the API component) and change it to accept props for funcSelected and setFuncSelected (and item, blockType) so it no longer closes over API state, or alternatively wrap it with React.memo/useCallback to memoize it; update where CodeUIItems is used inside API to pass the props (funcSelected, setFuncSelected, item, blockType) accordingly so the sub-tree is stable across renders.
100-110: JavaScript code is highlighted as TypeScript.When the user selects JavaScript, the code is still highlighted with
lang: "typescript"(line 105). While TypeScript highlighting usually works for JS, it can occasionally produce odd results for JS-specific patterns. Consider using the selected language:Use the correct language for highlighting
for (let index = 0; index < codeBlockSelected.length; index++) { const html = await highlighter.codeToHtml( codeBlockSelected[index], { - lang: "typescript", + lang: selectedLang.value === "js" ? "javascript" : "typescript", theme: "prisma-dark", }, );🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/client/api.tsx` around lines 100 - 110, The highlighter is hardcoded to lang: "typescript" in the block that checks codeBlockSelected and funcSelected; change the call to highlighter.codeToHtml to use the actual selected language (e.g., derive a language string from funcSelected or the user's selection instead of the literal "typescript") so JavaScript selections use "javascript" (or the appropriate value) — update the lang property passed to highlighter.codeToHtml and ensure the code path that checks for "prismaCodeBlock" in funcSelected still uses the dynamic language.apps/site/src/components/homepage/card-section/card-section.tsx (1)
68-71: Intentional asymmetry?noShadowonly affects desktop images.The
noShadowflag is applied to the desktop image (line 68-71) but not to the mobile image (line 81). If this is by design — perhaps mobile always needs the shadow for visual separation — then this is fine. Otherwise, you may want to apply the same conditional logic to the mobile image.If mobile should also respect noShadow
{item.mobileImageUrl && ( <img - className="w-full h-auto shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)] sm:hidden" + className={cn( + "w-full h-auto shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)] sm:hidden", + item.noShadow && "shadow-none", + )} src={Also applies to: 79-88
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/homepage/card-section/card-section.tsx` around lines 68 - 71, The desktop image className uses the item.noShadow conditional but the mobile image does not, causing asymmetry; update the mobile image's className (the one rendering with "sm:hidden" / mobile view) to include the same conditional (item.noShadow && "shadow-none") so both images respect the noShadow flag, and mirror this change for the other similar occurrence referenced around lines 79-88 in card-section.tsx.apps/site/src/lib/shiki_prisma.ts (2)
222-244: Potential race condition in highlighter initialization.If
getHighlighter()is called multiple times concurrently before the first call completes, each call will seeprisma_highlighterasnulland create a new highlighter. While not catastrophic (the last one assigned wins), it wastes resources loading the highlighter multiple times.A simple fix is to cache the promise instead of the result:
Cache the promise to prevent duplicate initialization
-let prisma_highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = - null; +let highlighterPromise: ReturnType<typeof createHighlighter> | null = null; async function getHighlighter() { - if (!prisma_highlighter) { - prisma_highlighter = await createHighlighter({ + if (!highlighterPromise) { + highlighterPromise = createHighlighter({ themes: [prismaTheme], langs: [ "typescript", "javascript", "jsx", "tsx", "json", "bash", "sh", "prisma", "sql", "diff", ], }); } - return prisma_highlighter; + return highlighterPromise; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/lib/shiki_prisma.ts` around lines 222 - 244, The current getHighlighter implementation can trigger multiple concurrent createHighlighter calls because prisma_highlighter is null until the first await completes; change the caching to store the initialization Promise instead of the resolved result—e.g., make prisma_highlighter hold the Promise returned by createHighlighter (or introduce prisma_highlighterPromise) and on first call assign prisma_highlighter = createHighlighter({...}) and then await it in getHighlighter before returning the resolved highlighter; update the prisma_highlighter type accordingly so subsequent concurrent calls reuse the same Promise and avoid duplicate initializations.
246-246: Confusing export alias.Exporting
getHighlighterasprisma_highlighteris misleading — consumers might expectprisma_highlighterto be the highlighter instance, not a function that returns one. Consider either:
- Export with a clearer name like
getPrismaHighlighter, or- Keep the original name
getHighlighterClearer export naming
-export { getHighlighter as prisma_highlighter }; +export { getHighlighter };Then update the import in
api.tsx:-import { prisma_highlighter as getHighlighter } from "@/lib/shiki_prisma"; +import { getHighlighter } from "@/lib/shiki_prisma";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/lib/shiki_prisma.ts` at line 246, The export alias prisma_highlighter is misleading because it exports the function getHighlighter rather than a highlighter instance; rename the export to a clearer function name like getPrismaHighlighter (or re-export the original getHighlighter name) and update any imports (e.g., in api.tsx) to use the new name; specifically change the export statement exporting getHighlighter as prisma_highlighter to export it as getPrismaHighlighter (or export { getHighlighter }) and then update all usages/imports that reference prisma_highlighter to the new identifier.apps/site/src/components/client/technology.tsx (1)
9-9: Remove unuseduseStateimport.The
useStatehook is imported but never used in this component. This is dead code that should be cleaned up.Remove unused import
-import { useState } from "react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/client/technology.tsx` at line 9, Remove the unused React hook import by deleting the named import "useState" (the import statement `import { useState } from "react";`) from the component file so there is no dead code; if other React imports are needed, keep only the necessary ones, otherwise remove the entire import line.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/client/page.tsx`:
- Around line 169-173: The hero heading in apps/site/src/app/client/page.tsx
contains the incorrect second line "Database Migrations" inside the <h1> (the
element with className "stretch-display text-6xl font-bold text-center
font-sans-display z-2 relative max-w-223 mx-auto"); replace or remove that stray
text so the hero copy matches the Prisma Client page (e.g., remove "Database
Migrations" or change it to a Client-relevant phrase) and ensure the <h1>
content only contains accurate Prisma Client messaging.
- Around line 297-300: The button in the Migrate section has incorrect copy:
locate the Button element (the JSX element with variant="orm" size="3xl" and
className="w-fit") and update its inner span text from "Learn more about Prisma
Studio" to "Learn more about Prisma Migrate" (or equivalent migrate-specific
copy) so the CTA matches the Prisma Migrate section.
- Around line 239-251: The mapped list is missing a React key on the outer
Technology component causing reconciliation issues; move the key prop from the
inner Action to the Technology element in the frameworks.list.map callback
(e.g., set key={fw.name} or key={fw.id} on <Technology ...>) and remove it from
<Action> so each Technology child has a stable unique key during rendering.
- Around line 216-227: The map rendering uses databases.list.map with the outer
component Technology but the key prop is incorrectly placed on the inner Action;
move the unique key (e.g., key={db.name} or a more robust unique id) from the
Action component to the Technology component so the Technology element is the
keyed list item, and remove the duplicate key from Action (update the JSX where
Technology and Action are rendered).
In `@apps/site/src/components/client/api-data.ts`:
- Line 146: The example transaction snippet is truncated and starts mid-function
(showing locate, geo, tx.user.update) so update the source in ui/explore to
produce a complete interactive transaction example: ensure the snippet includes
the opening prisma.$transaction(async (tx) => { ... }), creation or lookup of
bob (e.g., await tx.user.create or await tx.user.findUnique to set bob), the
locate function definition (locate) and the final tx.user.update call so the
flow is contiguous; then regenerate the auto-generated file
(apps/site/src/components/client/api-data.ts) so the rendered snippet contains
the full transaction sequence (prisma.$transaction, bob, locate, geo,
tx.user.update).
- Line 56: The variable prolificAuthors is typed incorrectly: the result of
prisma.user.findMany(...) is annotated as Category[] but should be User[];
update the type annotation for prolificAuthors (and any related declarations)
from Category[] to User[] to match the return type of prisma.user.findMany and
avoid confusing mismatched types in the example.
In `@apps/site/src/components/client/api.tsx`:
- Around line 231-236: The onValueChange handler calls
handleCodeBlockChange(apiItems.find(...)) without checking the find result;
since Array.prototype.find can return undefined and handleCodeBlockChange
assumes a valid item (it accesses item.functions[0]), guard this by storing the
result of apiItems.find(...) in a local variable, check that it is not undefined
(and optionally that item.functions?.length > 0) before calling
handleCodeBlockChange, and only call handleCodeBlockChange with a valid item or
handle the missing-case (e.g., no-op or show fallback).
In `@apps/site/src/components/client/technology.tsx`:
- Line 27: The className on the JSX element in
apps/site/src/components/client/technology.tsx contains conflicting font utility
classes (font-sans-display! and font-mono!); pick the intended font for this
component (e.g., if you want the display font keep font-sans-display! and remove
font-mono!, or vice versa) and update the className on the element (the
className prop in the Technology component) so only the chosen font utility
remains.
---
Nitpick comments:
In `@apps/site/src/components/client/api.tsx`:
- Around line 148-173: The CodeUIItems component is recreated on every render
because it's defined inside API; move CodeUIItems to module scope (outside the
API component) and change it to accept props for funcSelected and
setFuncSelected (and item, blockType) so it no longer closes over API state, or
alternatively wrap it with React.memo/useCallback to memoize it; update where
CodeUIItems is used inside API to pass the props (funcSelected, setFuncSelected,
item, blockType) accordingly so the sub-tree is stable across renders.
- Around line 100-110: The highlighter is hardcoded to lang: "typescript" in the
block that checks codeBlockSelected and funcSelected; change the call to
highlighter.codeToHtml to use the actual selected language (e.g., derive a
language string from funcSelected or the user's selection instead of the literal
"typescript") so JavaScript selections use "javascript" (or the appropriate
value) — update the lang property passed to highlighter.codeToHtml and ensure
the code path that checks for "prismaCodeBlock" in funcSelected still uses the
dynamic language.
In `@apps/site/src/components/client/technology.tsx`:
- Line 9: Remove the unused React hook import by deleting the named import
"useState" (the import statement `import { useState } from "react";`) from the
component file so there is no dead code; if other React imports are needed, keep
only the necessary ones, otherwise remove the entire import line.
In `@apps/site/src/components/homepage/card-section/card-section.tsx`:
- Around line 68-71: The desktop image className uses the item.noShadow
conditional but the mobile image does not, causing asymmetry; update the mobile
image's className (the one rendering with "sm:hidden" / mobile view) to include
the same conditional (item.noShadow && "shadow-none") so both images respect the
noShadow flag, and mirror this change for the other similar occurrence
referenced around lines 79-88 in card-section.tsx.
In `@apps/site/src/lib/shiki_prisma.ts`:
- Around line 222-244: The current getHighlighter implementation can trigger
multiple concurrent createHighlighter calls because prisma_highlighter is null
until the first await completes; change the caching to store the initialization
Promise instead of the resolved result—e.g., make prisma_highlighter hold the
Promise returned by createHighlighter (or introduce prisma_highlighterPromise)
and on first call assign prisma_highlighter = createHighlighter({...}) and then
await it in getHighlighter before returning the resolved highlighter; update the
prisma_highlighter type accordingly so subsequent concurrent calls reuse the
same Promise and avoid duplicate initializations.
- Line 246: The export alias prisma_highlighter is misleading because it exports
the function getHighlighter rather than a highlighter instance; rename the
export to a clearer function name like getPrismaHighlighter (or re-export the
original getHighlighter name) and update any imports (e.g., in api.tsx) to use
the new name; specifically change the export statement exporting getHighlighter
as prisma_highlighter to export it as getPrismaHighlighter (or export {
getHighlighter }) and then update all usages/imports that reference
prisma_highlighter to the new identifier.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: faa94581-bd12-4e50-b6a2-68091d7d5c68
⛔ Files ignored due to path filters (8)
apps/site/public/icons/technologies/mariadb.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mongodbsimple.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mysqlsimple.svgis excluded by!**/*.svgapps/site/public/illustrations/client/client_0.svgis excluded by!**/*.svgapps/site/public/illustrations/client/client_0_light.svgis excluded by!**/*.svgapps/site/public/illustrations/client/client_1.svgis excluded by!**/*.svgapps/site/public/illustrations/client/client_1_light.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
apps/site/package.jsonapps/site/src/app/client/page.tsxapps/site/src/app/layout.tsxapps/site/src/components/client/api-data.tsapps/site/src/components/client/api.tsxapps/site/src/components/client/technology.tsxapps/site/src/components/homepage/card-section/card-section.tsxapps/site/src/lib/shiki_prisma.ts
Comment on lines
+169
to
+173
| <h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative max-w-223 mx-auto"> | ||
| Intuitive database client for TypeScript and Node.js | ||
| <br /> | ||
| Database Migrations | ||
| </h1> |
Contributor
There was a problem hiding this comment.
Inconsistent hero copy: "Database Migrations" on the Client page?
The hero heading includes "Database Migrations" but this is the Prisma Client page. This looks like leftover text that should either be removed or changed to something relevant to Prisma Client.
Suggested fix
<h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative max-w-223 mx-auto">
Intuitive database client for TypeScript and Node.js
- <br />
- Database Migrations
</h1>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/client/page.tsx` around lines 169 - 173, The hero heading
in apps/site/src/app/client/page.tsx contains the incorrect second line
"Database Migrations" inside the <h1> (the element with className
"stretch-display text-6xl font-bold text-center font-sans-display z-2 relative
max-w-223 mx-auto"); replace or remove that stray text so the hero copy matches
the Prisma Client page (e.g., remove "Database Migrations" or change it to a
Client-relevant phrase) and ensure the <h1> content only contains accurate
Prisma Client messaging.
Comment on lines
+216
to
+227
| {databases.list.map((db) => ( | ||
| <Technology text={db.name} url={db.url}> | ||
| <Action | ||
| color="neutral" | ||
| size="4xl" | ||
| key={db.name} | ||
| className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong" | ||
| > | ||
| <img src={db.icon} alt={db.name} /> | ||
| </Action> | ||
| </Technology> | ||
| ))} |
Contributor
There was a problem hiding this comment.
Missing key prop on Technology component.
React requires a unique key when rendering lists. The key is currently on the Action component inside Technology, but it should be on the outermost element in the map — which is Technology.
Move key to Technology
{databases.list.map((db) => (
- <Technology text={db.name} url={db.url}>
+ <Technology key={db.name} text={db.name} url={db.url}>
<Action
color="neutral"
size="4xl"
- key={db.name}
className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {databases.list.map((db) => ( | |
| <Technology text={db.name} url={db.url}> | |
| <Action | |
| color="neutral" | |
| size="4xl" | |
| key={db.name} | |
| className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong" | |
| > | |
| <img src={db.icon} alt={db.name} /> | |
| </Action> | |
| </Technology> | |
| ))} | |
| {databases.list.map((db) => ( | |
| <Technology key={db.name} text={db.name} url={db.url}> | |
| <Action | |
| color="neutral" | |
| size="4xl" | |
| className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong" | |
| > | |
| <img src={db.icon} alt={db.name} /> | |
| </Action> | |
| </Technology> | |
| ))} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/client/page.tsx` around lines 216 - 227, The map rendering
uses databases.list.map with the outer component Technology but the key prop is
incorrectly placed on the inner Action; move the unique key (e.g., key={db.name}
or a more robust unique id) from the Action component to the Technology
component so the Technology element is the keyed list item, and remove the
duplicate key from Action (update the JSX where Technology and Action are
rendered).
Comment on lines
+239
to
+251
| <div className="flex gap-1 flex-wrap"> | ||
| {frameworks.list.map((fw) => ( | ||
| <Technology text={fw.name} url={fw.url}> | ||
| <Action | ||
| color="neutral" | ||
| size="4xl" | ||
| key={fw.name} | ||
| className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong" | ||
| > | ||
| <img src={fw.icon} alt={fw.name} /> | ||
| </Action> | ||
| </Technology> | ||
| ))} |
Contributor
There was a problem hiding this comment.
Same issue: missing key on Technology in frameworks list.
Move key to Technology
{frameworks.list.map((fw) => (
- <Technology text={fw.name} url={fw.url}>
+ <Technology key={fw.name} text={fw.name} url={fw.url}>
<Action
color="neutral"
size="4xl"
- key={fw.name}
className="h-[75px]! w-[75px]! hover:bg-background-neutral-strong"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/client/page.tsx` around lines 239 - 251, The mapped list is
missing a React key on the outer Technology component causing reconciliation
issues; move the key prop from the inner Action to the Technology element in the
frameworks.list.map callback (e.g., set key={fw.name} or key={fw.id} on
<Technology ...>) and remove it from <Action> so each Technology child has a
stable unique key during rendering.
Comment on lines
+297
to
+300
| <Button variant="orm" size="3xl" className="w-fit"> | ||
| <span>Learn more about Prisma Studio</span> | ||
| <i className="fa-regular fa-arrow-right ml-2" /> | ||
| </Button> |
Contributor
There was a problem hiding this comment.
Copy-paste error: Button says "Prisma Studio" but this is the Migrate section.
This button is in the "Prisma Migrate" section but the text still references "Prisma Studio".
Fix the button text
<Button variant="orm" size="3xl" className="w-fit">
- <span>Learn more about Prisma Studio</span>
+ <span>Learn more about Prisma Migrate</span>
<i className="fa-regular fa-arrow-right ml-2" />
</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <Button variant="orm" size="3xl" className="w-fit"> | |
| <span>Learn more about Prisma Studio</span> | |
| <i className="fa-regular fa-arrow-right ml-2" /> | |
| </Button> | |
| <Button variant="orm" size="3xl" className="w-fit"> | |
| <span>Learn more about Prisma Migrate</span> | |
| <i className="fa-regular fa-arrow-right ml-2" /> | |
| </Button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/client/page.tsx` around lines 297 - 300, The button in the
Migrate section has incorrect copy: locate the Button element (the JSX element
with variant="orm" size="3xl" and className="w-fit") and update its inner span
text from "Learn more about Prisma Studio" to "Learn more about Prisma Migrate"
(or equivalent migrate-specific copy) so the CTA matches the Prisma Migrate
section.
| ], | ||
| tsCodeBlocks: [ | ||
| "// Sort posts alphabetically\nconst alphabeticPosts: Post[] = await prisma.post.findMany({\n orderBy: { title: 'asc' },\n})", | ||
| "// Order by most prolific authors\nconst prolificAuthors: Category[] = await prisma.user.findMany({\n orderBy: {\n posts: {\n _count: 'asc',\n },\n },\n})", |
Contributor
There was a problem hiding this comment.
Incorrect type annotation: Category[] should be User[]
The code queries prisma.user.findMany(...) but the TypeScript annotation declares the result as Category[]. This is incorrect and would confuse developers reading the examples.
Fix the type annotation
- "// Order by most prolific authors\nconst prolificAuthors: Category[] = await prisma.user.findMany({\n orderBy: {\n posts: {\n _count: 'asc',\n },\n },\n})",
+ "// Order by most prolific authors\nconst prolificAuthors: User[] = await prisma.user.findMany({\n orderBy: {\n posts: {\n _count: 'asc',\n },\n },\n})",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "// Order by most prolific authors\nconst prolificAuthors: Category[] = await prisma.user.findMany({\n orderBy: {\n posts: {\n _count: 'asc',\n },\n },\n})", | |
| "// Order by most prolific authors\nconst prolificAuthors: User[] = await prisma.user.findMany({\n orderBy: {\n posts: {\n _count: 'asc',\n },\n },\n})", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/client/api-data.ts` at line 56, The variable
prolificAuthors is typed incorrectly: the result of prisma.user.findMany(...) is
annotated as Category[] but should be User[]; update the type annotation for
prolificAuthors (and any related declarations) from Category[] to User[] to
match the return type of prisma.user.findMany and avoid confusing mismatched
types in the example.
| name: "Transactions", | ||
| jsCodeBlocks: [ | ||
| '// Create Bob and update Carol as a batch within a transaction\nawait prisma.$transaction([\n prisma.user.create({\n data: {\n name: "Bob",\n email: "bob@prisma.io",\n age: 49,\n country: "USA",\n },\n }),\n prisma.user.update({\n where: {\n email: "carol@prisma.io"\n },\n data: {\n country: "Germany",\n },\n }),\n])', | ||
| " // Example function turning an email into a country\n const locate = async (email) => ({ country: 'Germany' })\n const geo = await locate(bob.email)\n return await tx.user.update({\n where: {\n id: bob.id,\n },\n data: {\n country: geo.country,\n },\n })\n})", |
Contributor
There was a problem hiding this comment.
Incomplete code snippet — appears to be truncated.
This transaction example starts mid-function with const locate = async (email) => ... — it's missing the opening part of the interactive transaction (e.g., await prisma.$transaction(async (tx) => { const bob = await tx.user.create(...)).
This will render as a confusing, incomplete snippet in the UI. Since this file is auto-generated, you'll need to fix the source in ui/explore and regenerate.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/client/api-data.ts` at line 146, The example
transaction snippet is truncated and starts mid-function (showing locate, geo,
tx.user.update) so update the source in ui/explore to produce a complete
interactive transaction example: ensure the snippet includes the opening
prisma.$transaction(async (tx) => { ... }), creation or lookup of bob (e.g.,
await tx.user.create or await tx.user.findUnique to set bob), the locate
function definition (locate) and the final tx.user.update call so the flow is
contiguous; then regenerate the auto-generated file
(apps/site/src/components/client/api-data.ts) so the rendered snippet contains
the full transaction sequence (prisma.$transaction, bob, locate, geo,
tx.user.update).
Comment on lines
+231
to
+236
| onValueChange={(value: string | null) => { | ||
| if (value) { | ||
| handleCodeBlockChange( | ||
| apiItems.find((item: any) => item.value === value), | ||
| ); | ||
| } |
Contributor
There was a problem hiding this comment.
find() can return undefined, leading to a runtime error.
If apiItems.find(...) returns undefined (e.g., due to a value mismatch), passing it to handleCodeBlockChange would cause an error when accessing item.functions[0] on line 177.
Guard against undefined
onValueChange={(value: string | null) => {
if (value) {
- handleCodeBlockChange(
- apiItems.find((item: any) => item.value === value),
- );
+ const item = apiItems.find((i: any) => i.value === value);
+ if (item) {
+ handleCodeBlockChange(item);
+ }
}
}}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| onValueChange={(value: string | null) => { | |
| if (value) { | |
| handleCodeBlockChange( | |
| apiItems.find((item: any) => item.value === value), | |
| ); | |
| } | |
| onValueChange={(value: string | null) => { | |
| if (value) { | |
| const item = apiItems.find((i: any) => i.value === value); | |
| if (item) { | |
| handleCodeBlockChange(item); | |
| } | |
| } | |
| }} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/client/api.tsx` around lines 231 - 236, The
onValueChange handler calls handleCodeBlockChange(apiItems.find(...)) without
checking the find result; since Array.prototype.find can return undefined and
handleCodeBlockChange assumes a valid item (it accesses item.functions[0]),
guard this by storing the result of apiItems.find(...) in a local variable,
check that it is not undefined (and optionally that item.functions?.length > 0)
before calling handleCodeBlockChange, and only call handleCodeBlockChange with a
valid item or handle the missing-case (e.g., no-op or show fallback).
| <Button | ||
| variant="default-stronger" | ||
| href={url} | ||
| className="font-sans-display! font-normal! text-base! font-mono! w-[75px]! h-[75px]!" |
Contributor
There was a problem hiding this comment.
Conflicting font classes: font-sans-display! vs font-mono!
This className includes both font-sans-display! and font-mono! — these are mutually exclusive font-family declarations. Whichever appears last in the CSS will win, but this is almost certainly unintentional.
Decide which font you actually want and remove the other.
If you want the display font
- className="font-sans-display! font-normal! text-base! font-mono! w-[75px]! h-[75px]!"
+ className="font-sans-display! font-normal! text-base! w-[75px]! h-[75px]!"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className="font-sans-display! font-normal! text-base! font-mono! w-[75px]! h-[75px]!" | |
| className="font-sans-display! font-normal! text-base! w-[75px]! h-[75px]!" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/client/technology.tsx` at line 27, The className on
the JSX element in apps/site/src/components/client/technology.tsx contains
conflicting font utility classes (font-sans-display! and font-mono!); pick the
intended font for this component (e.g., if you want the display font keep
font-sans-display! and remove font-mono!, or vice versa) and update the
className on the element (the className prop in the Technology component) so
only the chosen font utility remains.
Contributor
|
Nice one also! A few comments: when clicking on the dropdown to select the stack we have a horizontal window width jump due to scrollbar being hide/shown. Same behaviour with the second dropdown |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes
New Features
Style