hooks experiments

Author: ymc9

package-lock.json

@@ -34,23 +34,24 @@
         "tslib": "^2.4.1",
         "typescript": "^4.9.3",
         "vite": "^4.0.0",
-        "zenstack": "1.0.0-alpha.101"
+        "zenstack": "^1.0.0-alpha.116"
     },
     "type": "module",
     "dependencies": {
         "@prisma/client": "^4.8.1",
         "@steeze-ui/heroicons": "^2.2.2",
         "@steeze-ui/svelte-icon": "^1.3.2",
-        "@zenstackhq/runtime": "1.0.0-alpha.101",
+        "@tanstack/svelte-query": "^4.29.7",
+        "@zenstackhq/runtime": "^1.0.0-alpha.116",
+        "@zenstackhq/server": "^1.0.0-alpha.116",
+        "@zenstackhq/tanstack-query": "^1.0.0-alpha.116",
         "bcryptjs": "^2.4.3",
         "daisyui": "^2.51.5",
         "jsonwebtoken": "^9.0.0",
         "moment": "^2.29.4",
         "nanoid": "^4.0.2",
+        "superjson": "^1.12.3",
         "zod": "^3.21.4",
         "zod-validation-error": "^1.3.0"
-    },
-    "prisma": {
-        "seed": "ts-node prisma/seed.ts"
     }
 }

package.json

@@ -31,8 +31,10 @@ model Space {
     slug String @unique()
     members SpaceUser[]
     lists List[]
+
     zenstack_guard Boolean @default(true)
     zenstack_transaction String?
+
     @@index([zenstack_transaction])
 }
 
@@ -48,8 +50,10 @@ model SpaceUser {
     user User @relation(fields: [userId], references: [id], onDelete: Cascade)
     userId String
     role SpaceUserRole
+
     zenstack_guard Boolean @default(true)
     zenstack_transaction String?
+
     @@index([zenstack_transaction])
     @@unique([userId, spaceId])
 }
@@ -65,12 +69,13 @@ model User {
     /// @length(6, 32)
     password String
     name String?
-    posts Post[]
     spaces SpaceUser[]
     todos Todo[]
     lists List[]
+
     zenstack_guard Boolean @default(true)
     zenstack_transaction String?
+
     @@index([zenstack_transaction])
 }
 
@@ -91,8 +96,10 @@ model List {
     title String
     private Boolean @default(false)
     todos Todo[]
+
     zenstack_guard Boolean @default(true)
     zenstack_transaction String?
+
     @@index([zenstack_transaction])
 }
 
@@ -111,20 +118,9 @@ model Todo {
     /// @length(1, 100)
     title String
     completedAt DateTime?
+
     zenstack_guard Boolean @default(true)
     zenstack_transaction String?
-    @@index([zenstack_transaction])
-}
 
-model Post {
-    id String @id() @default(cuid())
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt()
-    title String
-    content String?
-    published Boolean @default(false)
-    viewCount Int @default(0)
-    author User? @relation(fields: [authorId], references: [id])
-    authorId String?
-    zenstack_guard Boolean @default(true)
+    @@index([zenstack_transaction])
 }

prisma/schema.prisma

@@ -15,6 +15,12 @@ enum SpaceUserRole {
   ADMIN
 }
 
+plugin tanstack {
+  provider = '@zenstackhq/tanstack-query'
+  output = 'src/lib/hooks'
+  framework = 'svelte'
+}
+
 /*
  * Model for a space in which users can collaborate on Lists and Todos
  */
@@ -72,7 +78,6 @@ model User {
   email String @unique @email
   password String @password @omit @length(6, 32)
   name String?
-  posts Post[]
   spaces SpaceUser[]
   todos Todo[]
   lists List[]
@@ -136,15 +141,3 @@ model Todo {
   // update cannot change owner
   @@deny('update', future().owner != owner)
 }
-
-model Post {
-  id String @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  title String
-  content String?
-  published Boolean @default(false)
-  viewCount Int @default(0)
-  author User? @relation(fields: [authorId], references: [id])
-  authorId String?
-}

prisma/seed.ts

@@ -2,9 +2,11 @@ import { env } from '$env/dynamic/private';
 import { JWT_TOKEN_COOKIE_NAME } from '$lib/constant';
 import prisma, { getEnhancedPrisma } from '$lib/prisma';
 import type { Handle } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
+import zenstack from '@zenstackhq/server/sveltekit';
 import jwt from 'jsonwebtoken';
 
-export const handle = (async ({ event, resolve }) => {
+const auth = (async ({ event, resolve }) => {
     const token = event.cookies.get(JWT_TOKEN_COOKIE_NAME);
     if (token) {
         try {
@@ -29,3 +31,10 @@ export const handle = (async ({ event, resolve }) => {
 
     return resolve(event);
 }) satisfies Handle;
+
+const crud = zenstack.ZenStackSvelteKitHandler({
+    prefix: '/api/model',
+    getPrisma: (event) => event.locals.db,
+});
+
+export const handle = sequence(auth, crud);

schema.zmodel

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { User } from '@prisma/client';
-    export let user: User;
+    import { getContext } from 'svelte';
+    const user = getContext<User>('currentUser');
     export let size: number = 32;
 </script>
 

src/hooks.server.ts

@@ -1,39 +1,43 @@
 <script lang="ts">
     import { invalidateAll } from '$app/navigation';
+    import { useCreateList } from '$lib/hooks';
     import type { Space } from '@prisma/client';
+    import { getContext } from 'svelte';
 
     let modalOpen = false;
     let titleRef: HTMLElement;
     let title = '';
     let _private = false;
 
+    const user = getContext<{ id: string }>('currentUser');
+    const createList = useCreateList();
+
     export let space: Space;
 
     $: if (modalOpen) {
         setTimeout(() => titleRef.focus(), 100);
     }
 
+    $: if ($createList.isSuccess) {
+        invalidateAll();
+        modalOpen = false;
+        title = '';
+        _private = false;
+    }
+
+    $: if ($createList.error) {
+        alert(($createList.error as any).message);
+    }
+
     async function onCreate() {
-        const r = await fetch('/api/list', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
+        $createList.mutate({
+            data: {
                 spaceId: space.id,
                 title,
                 private: _private,
-            }),
+                ownerId: user.id,
+            },
         });
-        if (r.status !== 200) {
-            const { message } = await r.json();
-            alert(message);
-        } else {
-            await invalidateAll();
-            modalOpen = false;
-            title = '';
-            _private = false;
-        }
     }
 </script>
 
@@ -78,6 +82,8 @@
                 <div class="modal-action">
                     <input
                         class="btn btn-primary"
+                        class:loading={$createList.isLoading}
+                        class:btn-disabled={$createList.isLoading}
                         type="submit"
                         value="Create"
                     />