+
+ Start Building Now β
+
+
+
+ Click{' '}
+ sdk.openGithubProject(repoPath, options)}>
+ here
+ {' '}
+ to open an interactive playground.
+
+ {plainCodeFiles.map((file) => (
+
-
diff --git a/src/css/custom.css b/src/css/custom.css
index ae6d471d..3559aeea 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -68,3 +68,20 @@
right: 0;
pointer-events: mouse;
}
+
+@media (max-width: 1200px) {
+ .navbar__items--right,
+ .navbar__items--left {
+ display: none;
+ }
+
+ .navbar__toggle {
+ display: inherit;
+ }
+}
+
+@media (min-width: 1201px) {
+ .navbar__toggle {
+ display: none;
+ }
+}
diff --git a/src/lib/prism-zmodel.js b/src/lib/prism-zmodel.js
index a5198df6..d26ea9cb 100644
--- a/src/lib/prism-zmodel.js
+++ b/src/lib/prism-zmodel.js
@@ -1,19 +1,10 @@
Prism.languages.zmodel = Prism.languages.extend('clike', {
- keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc)\b/,
+ function: /@@?[A-Za-z_]\w*/,
+ keyword: /\b(?:datasource|enum|generator|model|type|abstract|import|extends|attribute|view|plugin|proc|with)\b/,
+ entity: /\b(?:Int|String|Boolean|DateTime|Float|Decimal|BigInt|Bytes|Json|Unsupported)\b/,
'type-class-name': /(\b()\s+)[\w.\\]+/,
});
-Prism.languages.javascript['class-name'][0].pattern =
- /(\b(?:model|datasource|enum|generator|type|plugin|abstract)\s+)[\w.\\]+/;
-
-Prism.languages.insertBefore('zmodel', 'function', {
- annotation: {
- pattern: /(^|[^.])@+\w+/,
- lookbehind: true,
- alias: 'punctuation',
- },
-});
-
Prism.languages.insertBefore('zmodel', 'punctuation', {
'type-args': /\b(?:references|fields|onDelete|onUpdate):/,
});
diff --git a/src/pages/v3/_components/AICoding.tsx b/src/pages/v3/_components/AICoding.tsx
new file mode 100644
index 00000000..aad73f88
--- /dev/null
+++ b/src/pages/v3/_components/AICoding.tsx
@@ -0,0 +1,69 @@
+type FeatureItem = {
+ title: string;
+ img: string;
+ description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+ {
+ title: 'Single Source of Truth',
+ img: '/img/access-control.png',
+ description: (
+ <>
+ When LLMs see a self-contained, non-ambiguous, and well-defined application model, their inference works
+ more efficiently and effectively.
+
+ ),
+ },
+ {
+ title: 'Concise Query API',
+ img: '/img/auto-api.png',
+ description: (
+ <>
+ Concise and expressive, while leveraging existing knowledge of Prisma and Kysely, the query API makes it
+ easy for LLMs to generate high-quality query code.
+
+ ),
+ },
+ {
+ title: 'Slim Code Base',
+ img: '/img/ai-friendly.png',
+ description: (
+ <>
+ By deriving artifacts from the schema instead of implementing them, ZenStack helps you maintain a slim
+ code base that is easier for AI to digest.
+
+ ),
+ },
+];
+
+function Proposition({ title, img, description }: FeatureItem) {
+ return (
+ {title}
+{title}
{description}
+
+ );
+}
+
+export default function AICoding(): JSX.Element {
+ return (
+
+ 
+
+
+
+ {title}
+{description}
+
+
+ );
+}
diff --git a/src/pages/v3/_components/Notes.tsx b/src/pages/v3/_components/Notes.tsx
new file mode 100644
index 00000000..6bcfbb83
--- /dev/null
+++ b/src/pages/v3/_components/Notes.tsx
@@ -0,0 +1,22 @@
+import Link from '@docusaurus/Link';
+
+export default function Notes(): JSX.Element {
+ return (
+
+
+ + Perfect Match for AI-Assisted Programming +
+
+ {FeatureList.map((props, idx) => (
+
+
+
+ );
+}
diff --git a/src/pages/v3/_components/ORM.tsx b/src/pages/v3/_components/ORM.tsx
new file mode 100644
index 00000000..c67b8d23
--- /dev/null
+++ b/src/pages/v3/_components/ORM.tsx
@@ -0,0 +1,67 @@
+import CodeBlock from '@theme/CodeBlock';
+
+export default function ORM(): JSX.Element {
+ return (
+
+
+ + Notes to V2 Users +
+
+
+ + ZenStack V3 has made the bold decision to remove Prisma as a runtime dependency and implement its + own ORM infrastructure on top of Kysely. Albeit the cost of such a + big refactor, we believe this is the right move to gain the flexibility needed to achieve the + project's vision. Please read this blog post for more + thoughts behind the changes. ++
+
+ );
+}
diff --git a/src/pages/v3/_components/Schema.tsx b/src/pages/v3/_components/Schema.tsx
new file mode 100644
index 00000000..04fc4a59
--- /dev/null
+++ b/src/pages/v3/_components/Schema.tsx
@@ -0,0 +1,55 @@
+import CodeBlock from '@theme/CodeBlock';
+
+export default function SchemaLanguage(): JSX.Element {
+ return (
+
+
+
+
+
+ Flexible and Awesomely Typed ORM
+
+
+
+ {`import { schema } from './zenstack';
+import {
+ ZenStackClient,
+ AccessControlPlugin
+} from '@zenstackhq/runtime';
+
+const db = new ZenStackClient(schema, { ... })
+ // install access control plugin to enforce policies
+ .$use(new AccessControlPlugin())
+ // set current user context
+ .$setAuth(...);
+
+// high-level query API
+const userWithPosts = await db.user.findUnique({
+ where: { id: userId },
+ include: { posts: true }
+});
+
+// low-level SQL query builder API
+const userPostJoin = await db
+ .$qb
+ .selectFrom('User')
+ .innerJoin('Post', 'Post.authorId', 'User.id')
+ .select(['User.id', 'User.email', 'Post.title'])
+ .where('User.id', '=', userId)
+ .execute();
+`}
+
+
+
+
+ + An ORM is derived from the schema that gives you +
+-
+
- π High-level ORM query API +
- π Low-level SQL query builder API +
- + π Access control enforcement coming soon + +
- + π Runtime data validation coming soon + +
- π Computed fields and custom procedures +
- π Plugin system for tapping into various lifecycle events +
+
+ );
+}
diff --git a/src/pages/v3/_components/Service.tsx b/src/pages/v3/_components/Service.tsx
new file mode 100644
index 00000000..ad14b2d3
--- /dev/null
+++ b/src/pages/v3/_components/Service.tsx
@@ -0,0 +1,109 @@
+import CodeBlock from '@theme/CodeBlock';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+export default function Service(): JSX.Element {
+ return (
+
+
+
+
+
+ Intuitive and Expressive Data Modeling
+
+
+
+ {`model User {
+ id Int @id
+ email String @unique @email // constraint and validation
+ role String
+ posts Post[] // relation to another model
+ postCount Int @computed // computed field
+
+ // access control rules colocated with data
+ @@allow('all', auth().id == id)
+ @@allow('create, read', true)
+}
+
+model Post {
+ id Int @id
+ title String @length(1, 255)
+ published Boolean @default(false)
+ author User @relation(fields: [authorId], references: [id])
+ authorId Int // relation foreign key
+
+ @@allow('read', published)
+ @@allow('all', auth().id == authorId || auth().role == 'ADMIN')
+}`}
+
+
+
+
+ The modeling language allows you to
+-
+
- β Define data models and relations +
- β Define access control policies +
- β Express data validation rules +
- β Model polymorphic inheritance +
- β Add custom attributes and functions to introduce custom semantics +
- β Implement custom code generators +
+
+ );
+}
diff --git a/src/pages/v3/_components/ValueProps.tsx b/src/pages/v3/_components/ValueProps.tsx
new file mode 100644
index 00000000..555ecdad
--- /dev/null
+++ b/src/pages/v3/_components/ValueProps.tsx
@@ -0,0 +1,56 @@
+type FeatureItem = {
+ title: string;
+ img: string;
+ description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+ {
+ title: 'Coherent Schema',
+ img: '/img/diagram.png',
+ description: (
+ <>
+ Simple schema language to capture the most important aspects of your application in one place: data and
+ security.
+
+ ),
+ },
+ {
+ title: 'Powerful ORM',
+ img: '/img/search.png',
+ description: (
+ <>One-of-a-kind ORM that combines type-safety, query flexibility, and access control in one package.
+ ),
+ },
+ {
+ title: 'Limitless Utility',
+ img: '/img/versatility.png',
+ description: (
+ <>Deriving crucial artifacts that streamline development from backend APIs to frontend components.
+ ),
+ },
+];
+
+function Proposition({ title, img, description }: FeatureItem) {
+ return (
+
+
+
+
+
+ Automatic HTTP Query Service{' '}
+
+ coming soon
+
+
+
+
+
+
+ + Thanks to the ORM's built-in access control, you get an HTTP query service for free +
+-
+
- π Fully mirrors the ORM API +
- π Seamlessly integrates with popular frameworks +
- π Works with any authentication solution +
- + π Type-safe client SDK powered by TanStack Query + +
- π Highly customizable +
+
+ + Since the ORM is protected with access control, ZenStack can directly map it to an HTTP + service. ZenStack provides out-of-the-box integrations with popular frameworks including + Next.js, Nuxt, Express, etc. +
++ Client hooks based on TanStack Query can also be + derived from the schema, allowing you to make type-safe queries to the service without + writing a single line of code. +
+
+
+
+
+ {`import { NextRequestHandler } from '@zenstackhq/server/next';
+import { db } from './db'; // ZenStackClient instance
+import { getSessionUser } from './auth';
+
+// callback to provide a per-request ORM client
+async function getClient() {
+ // call a framework-specific helper to get session user
+ const authUser = await getSessionUser();
+
+ // return a new ORM client configured with the user,
+ // the user info will be used to enforce access control
+ return db.$setAuth(authUser);
+}
+
+// Create a request handler for all requests to this route
+// All CRUD requests are forwarded to the underlying ORM
+const handler = NextRequestHandler({ getClient });
+
+export {
+ handler as GET,
+ handler as PUT,
+ handler as POST,
+ handler as PATCH,
+ handler as DELETE,
+};
+ `}
+
+
+
+
+ {`import { schema } from './zenstack';
+import { useQueryHooks } from '@zenstackhq/query/react';
+
+export function UserPosts({ userId }: { userId: number }) {
+ // use auto-generated hook to query user with posts
+ const { user: userHooks } = useQueryHooks(schema);
+ const { data, isLoading } = userHooks.useFindUnique({
+ where: { id: userId },
+ include: { posts: true }
+ });
+
+ if (isLoading) return
+
+
+
+ Loading...
;
+
+ return (
+
+
+ );
+}
+ `}
+ {data?.email}'s Posts
+-
+ {data?.posts.map((post) => (
+
- {post.title} + ))} +
+
+ );
+}
+
+export default function ValueProps(): JSX.Element {
+ return (
+
+
+
+
+
+ {title}
+{description}
+
+ {FeatureList.map((props, idx) => (
+
+ );
+}
diff --git a/src/pages/v3/index.module.css b/src/pages/v3/index.module.css
new file mode 100644
index 00000000..b3332046
--- /dev/null
+++ b/src/pages/v3/index.module.css
@@ -0,0 +1,24 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+ padding: 8rem 2rem !important;
+ text-align: center !important;
+ position: relative !important;
+ overflow: hidden !important;
+}
+
+@media screen and (max-width: 996px) {
+ .heroBanner {
+ padding-top: 4rem !important;
+ padding-bottom: 4rem !important;
+ }
+}
+
+.buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/pages/v3/index.tsx b/src/pages/v3/index.tsx
new file mode 100644
index 00000000..f6e10a41
--- /dev/null
+++ b/src/pages/v3/index.tsx
@@ -0,0 +1,101 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import clsx from 'clsx';
+import React from 'react';
+import AICoding from './_components/AICoding';
+import ORM from './_components/ORM';
+import SchemaLanguage from './_components/Schema';
+import Service from './_components/Service';
+import ValueProps from './_components/ValueProps';
+import styles from './index.module.css';
+
+const description = `ZenStack v3 is a powerful data layer for modern TypeScript applications. It provides an intuitive data modeling language, a fully type-safe ORM, built-in access control and data validation, and automatic data query service that seamlessly integrates with popular frameworks like Next.js and Nuxt.`;
+
+function Header() {
+ return (
+
+
+
+
+
+
+ + + Modern Data Layer for TypeScript Applications + +
++ Intuitive data modeling, type-safe ORM, built-in access control, automatic query services, + and more. +
+
+
+ Check V3 Docs β
+
+
+ Open Playground
+
+
+ {children}
+