docs(docs): added prisma next overview#7568
Conversation
WalkthroughAdds Mermaid diagram support to the docs (dependency, MDX plugin, client-side Mermaid React component), registers the component for MDX, and adds a new "Prisma Next" docs page plus two placeholder entries in the ORM meta.json pages array. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/docs/content/docs/orm/temp-next/how-prisma-next-works.mdx (1)
50-50: Prefer extensionless type import for copy-paste resilience.Using
./contract.dcan be resolution-sensitive in some TypeScript setups../contractis usually more portable when the file iscontract.d.ts.💡 Suggested tweak
-import type { Contract } from './contract.d'; +import type { Contract } from './contract';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/docs/content/docs/orm/temp-next/how-prisma-next-works.mdx` at line 50, Update the import to use an extensionless type specifier to avoid resolution issues: replace the import reference that mentions './contract.d' in the file (the line importing type Contract) with './contract' so the type import targets the extensionless module (e.g., contract.d.ts) and is more portable across TypeScript resolver configurations.apps/docs/src/components/mermaid.tsx (1)
38-41: UsesecurityLevel: "strict"to harden security defaults.While Mermaid diagrams in this codebase come from trusted documentation files, setting
securityLevel: "loose"unnecessarily allows HTML tag rendering and click interactions in diagram content. Combining this withdangerouslySetInnerHTMLat line 57 creates an unnecessary surface. Switching to"strict"(which encodes HTML and disables interactive callbacks) follows defense-in-depth principles and doesn't impact the diagram rendering since the current diagrams don't rely on these features.Suggested fix
mermaid.initialize({ startOnLoad: false, - securityLevel: "loose", + securityLevel: "strict", fontFamily: "inherit", themeCSS: "margin: 1.5rem auto 0;", theme: resolvedTheme === "dark" ? "dark" : "default", });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/docs/src/components/mermaid.tsx` around lines 38 - 41, Change the mermaid initialization to use a stricter security posture: in the mermaid.initialize call (the object that currently sets startOnLoad, securityLevel, fontFamily, etc.) replace securityLevel: "loose" with securityLevel: "strict" so HTML in diagrams is encoded and interactive callbacks are disabled; ensure this is applied where mermaid.initialize is invoked and verify any usage that injects diagram HTML (e.g., the component that uses dangerouslySetInnerHTML for rendered diagrams) still functions without relying on loose HTML rendering.
🤖 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/docs/src/components/mermaid.tsx`:
- Around line 13-14: In the Mermaid component render logic, replace the implicit
early return when the mounted flag is false with an explicit return null;
specifically, in the block that currently does "if (!mounted) return;" change it
so the component returns null when !mounted before returning <MermaidContent
chart={chart} /> to follow React best practices and satisfy lint/type checks.
- Around line 46-49: The per-component caching using cachePromise with key
`${chart}-${resolvedTheme}` causes reused SVGs and ID collisions; change the
render so each instance calls mermaid.render independently rather than using the
shared cache. Replace the use(cachePromise(`${chart}-${resolvedTheme}`, ...))
call in mermaid.tsx with a per-instance promise that directly invokes
mermaid.render(id, chart.replaceAll("\\n", "\n")) (i.e., remove cachePromise and
its key), ensuring each component instance renders its own SVG and receives
unique internal IDs from mermaid.render.
---
Nitpick comments:
In `@apps/docs/content/docs/orm/temp-next/how-prisma-next-works.mdx`:
- Line 50: Update the import to use an extensionless type specifier to avoid
resolution issues: replace the import reference that mentions './contract.d' in
the file (the line importing type Contract) with './contract' so the type import
targets the extensionless module (e.g., contract.d.ts) and is more portable
across TypeScript resolver configurations.
In `@apps/docs/src/components/mermaid.tsx`:
- Around line 38-41: Change the mermaid initialization to use a stricter
security posture: in the mermaid.initialize call (the object that currently sets
startOnLoad, securityLevel, fontFamily, etc.) replace securityLevel: "loose"
with securityLevel: "strict" so HTML in diagrams is encoded and interactive
callbacks are disabled; ensure this is applied where mermaid.initialize is
invoked and verify any usage that injects diagram HTML (e.g., the component that
uses dangerouslySetInnerHTML for rendered diagrams) still functions without
relying on loose HTML rendering.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
apps/docs/content/docs/orm/meta.jsonapps/docs/content/docs/orm/temp-next/how-prisma-next-works.mdxapps/docs/content/docs/orm/temp-next/what-is-prisma-next.mdxapps/docs/content/docs/orm/temp-next/why-prisma-next.mdxapps/docs/package.jsonapps/docs/source.config.tsapps/docs/src/components/mermaid.tsxapps/docs/src/mdx-components.tsx
|
Nice work. |
| title: What is Prisma Next? | ||
| description: Define Prisma Next clearly and lock core terms for the rest of the docs. | ||
| url: /orm/temp-next/what-is-prisma-next | ||
| metaTitle: "What is Prisma Next contract-driven data access with verification" | ||
| metaDescription: "Learn what Prisma Next is and how Data Contracts, Contract Artifacts, and Verification-First Workflow enforce verified execution." |
There was a problem hiding this comment.
Do we want to display this description in the page ?
There was a problem hiding this comment.
We do, just an oversight with a poor description lol. I can get that updated.
Regarding the mermaid diagram (i can't reply to it's comment for some reason, so doing it here), I'll edit it to make it fit better. Ideally we'll create a mermaid eclipse component
I'm working on some large content changes for this PR so who knows if it'll even stay
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/docs/content/docs/orm/temp-next/index.mdx (1)
13-13: Consider clarifying the phrasing.The phrase "being built in the open as direction and architecture" reads a bit awkwardly. Consider rephrasing to something like "being built in the open as an architectural direction" or "being built in the open to explore direction and architecture" for improved clarity.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/docs/content/docs/orm/temp-next/index.mdx` at line 13, The sentence "Prisma Next is being built in the open as direction and architecture" is awkward; update the copy in apps/docs/content/docs/orm/temp-next/index.mdx by replacing that phrase with a clearer alternative such as "being built in the open as an architectural direction" or "being built in the open to explore direction and architecture" so the meaning reads naturally and unambiguously.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/docs/content/docs/orm/temp-next/index.mdx`:
- Line 13: The sentence "Prisma Next is being built in the open as direction and
architecture" is awkward; update the copy in
apps/docs/content/docs/orm/temp-next/index.mdx by replacing that phrase with a
clearer alternative such as "being built in the open as an architectural
direction" or "being built in the open to explore direction and architecture" so
the meaning reads naturally and unambiguously.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
apps/docs/content/docs/orm/temp-next/index.mdxapps/docs/source.config.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/source.config.ts
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/docs/content/docs/orm/temp-next/index.mdx`:
- Line 42: Update the compound adjective in the sentence containing "ORM style"
to the hyphenated form "ORM-style" so the phrase reads "You can use a
model-first ORM-style query flow:"; locate and change the instance in the text
node where that sentence is defined (the sentence starting "You can use a
model-first...") in the index.mdx content.
- Line 6: Update the metaDescription string so lifecycle terms are
comma-separated for readability: change "Schema Data Contract Database Signing
and Verified Runtime Queries" to "Schema Data Contract, Database Signing, and
Verified Runtime Queries" within the metaDescription value so search/result
snippets scan more clearly.
- Around line 137-145: Shorten the long mermaid node labels in the flowchart
(nodes A, B, C, D) to avoid clipping on small viewports—e.g., change B from "2.
Data Contract" to "2. Contract", C from "3. Database Signing" to "3. DB
Signing", and D from "4. Verified Runtime Queries" to "4. Verified Queries"—and
add a short legend or sentence immediately above or below the diagram that maps
the short terms to the full phrases ("Contract = Data Contract", "DB Signing =
Database Signing", "Verified Queries = Verified Runtime Queries") so readers
still see full meanings.
| description: Prisma Next is a new foundation for Prisma ORM with contract-driven architecture and verification-first workflows. | ||
| url: /orm/temp-next | ||
| metaTitle: What is Prisma Next? (Overview) | ||
| metaDescription: Learn what Prisma Next is, why it exists, and how Schema Data Contract Database Signing and Verified Runtime Queries work together. |
There was a problem hiding this comment.
Improve meta description readability for search/result snippets.
Line [6] currently runs core terms together; comma-separating the lifecycle terms makes this much easier to scan.
✏️ Proposed wording tweak
-metaDescription: Learn what Prisma Next is, why it exists, and how Schema Data Contract Database Signing and Verified Runtime Queries work together.
+metaDescription: Learn what Prisma Next is, why it exists, and how Schema, Data Contract, Database Signing, and Verified Runtime Queries work together.📝 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.
| metaDescription: Learn what Prisma Next is, why it exists, and how Schema Data Contract Database Signing and Verified Runtime Queries work together. | |
| metaDescription: Learn what Prisma Next is, why it exists, and how Schema, Data Contract, Database Signing, and Verified Runtime Queries work together. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/docs/content/docs/orm/temp-next/index.mdx` at line 6, Update the
metaDescription string so lifecycle terms are comma-separated for readability:
change "Schema Data Contract Database Signing and Verified Runtime Queries" to
"Schema Data Contract, Database Signing, and Verified Runtime Queries" within
the metaDescription value so search/result snippets scan more clearly.
|
|
||
| Prisma Next is designed to keep developer ergonomics while improving control. | ||
|
|
||
| You can use a model-first ORM style query flow: |
There was a problem hiding this comment.
Use the compound modifier form: “ORM-style”.
Line [42] should hyphenate the compound adjective.
✏️ Proposed fix
-You can use a model-first ORM style query flow:
+You can use a model-first ORM-style query flow:📝 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.
| You can use a model-first ORM style query flow: | |
| You can use a model-first ORM-style query flow: |
🧰 Tools
🪛 LanguageTool
[grammar] ~42-~42: Use a hyphen to join words.
Context: ... control. You can use a model-first ORM style query flow: ```ts const users = a...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/docs/content/docs/orm/temp-next/index.mdx` at line 42, Update the
compound adjective in the sentence containing "ORM style" to the hyphenated form
"ORM-style" so the phrase reads "You can use a model-first ORM-style query
flow:"; locate and change the instance in the text node where that sentence is
defined (the sentence starting "You can use a model-first...") in the index.mdx
content.
| ```mermaid | ||
| flowchart TB | ||
| A("1. Schema") | ||
| B("2. Data Contract") | ||
| C("3. Database Signing") | ||
| D("4. Verified Runtime Queries") | ||
|
|
||
| A --> B --> C --> D | ||
| ``` |
There was a problem hiding this comment.
Diagram labels are likely too wide for smaller viewports.
Given reported visibility issues, these node labels should be shortened in-diagram and mapped to full terms in nearby text to avoid clipping/shrinking on laptop/mobile.
📉 Proposed responsive-friendly diagram text
```mermaid
flowchart TB
A("1. Schema")
- B("2. Data Contract")
- C("3. Database Signing")
- D("4. Verified Runtime Queries")
+ B("2. Contract")
+ C("3. DB Signing")
+ D("4. Verified Queries")
A --> B --> C --> D+Lifecycle terms: Contract = Data Contract, DB Signing = Database Signing, Verified Queries = Verified Runtime Queries.
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against the current code and only fix it if needed.
In @apps/docs/content/docs/orm/temp-next/index.mdx around lines 137 - 145,
Shorten the long mermaid node labels in the flowchart (nodes A, B, C, D) to
avoid clipping on small viewports—e.g., change B from "2. Data Contract" to "2.
Contract", C from "3. Database Signing" to "3. DB Signing", and D from "4.
Verified Runtime Queries" to "4. Verified Queries"—and add a short legend or
sentence immediately above or below the diagram that maps the short terms to the
full phrases ("Contract = Data Contract", "DB Signing = Database Signing",
"Verified Queries = Verified Runtime Queries") so readers still see full
meanings.
</details>
<!-- fingerprinting:phantom:poseidon:hawk -->
<!-- This is an auto-generated comment by CodeRabbit -->
2 participants
Summary by CodeRabbit