@vertz/create-vertz-app 0.2.24 → 0.2.25

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyJnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CAoRlD;AAID;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAGxC;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAWnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CActC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAuLzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyJnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CAoRlD;AAID;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAGxC;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAWnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CActC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAmLzC"}

package/dist/templates/index.js

@@ -201,7 +201,7 @@ You write plain-looking code and the compiler makes it reactive automatically.
 ## Imports
 
 \`\`\`ts
-import { css, query, queryMatch, globalCss, ThemeProvider, variants } from 'vertz/ui';
+import { css, query, globalCss, ThemeProvider, variants } from 'vertz/ui';
 import { api } from '../client';
 \`\`\`
 
@@ -306,20 +306,20 @@ const tasks = query(api.tasks.list());
 The query result has reactive properties (\`.data\`, \`.error\`, \`.loading\`) that the compiler
 auto-unwraps everywhere — just access them directly, the compiler handles the rest.
 
-### \`queryMatch()\` — Pattern matching for query states
+### Rendering query states
+
+Use direct conditional rendering for loading, error, and data states:
 
 \`\`\`tsx
-{queryMatch(tasksQuery, {
-  loading: () => <div>Loading...</div>,
-  error: (err) => <div>Error: {err.message}</div>,
-  data: (response) => (
-    <div>
-      {response.items.map((item) => (
-        <div key={item.id}>{item.title}</div>
-      ))}
-    </div>
-  ),
-})}
+{tasks.loading && <div>Loading...</div>}
+{tasks.error && <div>Error: {tasks.error.message}</div>}
+{tasks.data && (
+  <div>
+    {tasks.data.items.map((item) => (
+      <div key={item.id}>{item.title}</div>
+    ))}
+  </div>
+)}
 \`\`\`
 
 ### Automatic Cache Invalidation
@@ -821,17 +821,15 @@ export function homePageTemplate() {
     return `import {
   ANIMATION_DURATION,
   ANIMATION_EASING,
-  ListTransition,
   css,
   fadeOut,
   form,
   globalCss,
   query,
-  queryMatch,
   slideInFromTop,
   useDialogStack,
 } from 'vertz/ui';
-import { Button } from '@vertz/ui/components';
+import { Button, List } from '@vertz/ui/components';
 import { api } from '../client';
 
 // Global CSS for list item enter/exit animations
@@ -959,43 +957,41 @@ export function HomePage() {
         </Button>
       </form>
 
-      {queryMatch(tasksQuery, {
-        loading: () => (
-          <div className={styles.loading}>Loading tasks...</div>
-        ),
-        error: (err) => (
-          <div className={styles.error}>
-            {err instanceof Error ? err.message : String(err)}
-          </div>
-        ),
-        data: (response) => (
-          <>
-            {response.items.length === 0 && (
-              <div className={styles.empty}>
-                No tasks yet. Add one above!
-              </div>
-            )}
-            <div data-testid="task-list" className={styles.list}>
-              <ListTransition
-                each={response.items}
-                keyFn={(task) => task.id}
-                children={(task) => (
+      {tasksQuery.loading && (
+        <div className={styles.loading}>Loading tasks...</div>
+      )}
+      {tasksQuery.error && (
+        <div className={styles.error}>
+          {tasksQuery.error instanceof Error ? tasksQuery.error.message : String(tasksQuery.error)}
+        </div>
+      )}
+      {tasksQuery.data && (
+        <>
+          {tasksQuery.data.items.length === 0 && (
+            <div className={styles.empty}>
+              No tasks yet. Add one above!
+            </div>
+          )}
+          <div data-testid="task-list" className={styles.list}>
+            <List animate>
+              {tasksQuery.data.items.map((task) => (
+                <List.Item key={task.id}>
                   <TaskItem
                     id={task.id}
                     title={task.title}
                     completed={task.completed}
                   />
-                )}
-              />
+                </List.Item>
+              ))}
+            </List>
+          </div>
+          {tasksQuery.data.items.length > 0 && (
+            <div className={styles.count}>
+              {tasksQuery.data.items.filter((t) => !t.completed).length} remaining
             </div>
-            {response.items.length > 0 && (
-              <div className={styles.count}>
-                {response.items.filter((t) => !t.completed).length} remaining
-              </div>
-            )}
-          </>
-        ),
-      })}
+          )}
+        </>
+      )}
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/create-vertz-app",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "type": "module",
   "license": "MIT",
   "description": "Create a new Vertz application",