create-apexjs 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-apexjs",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Scaffold a new Apex JS app",
   "type": "module",
   "license": "MIT",

package/templates/default/AGENTS.md

@@ -22,6 +22,7 @@ apex make component Card          # components/Card.alpine  (<Card /> in templat
 apex make component ui/Navbar     # group in a folder → components/ui/Navbar.alpine (<UiNavbar />)
 apex make client                  # app.client.ts — register Alpine plugins/directives/magics
 apex make model Post title:string body:string   # models/Post.ts → migration + REST + MCP CRUD
+apex make composable Post         # composables/usePosts.ts — typed client data-hook off the model
 apex make api webhooks            # server/api/webhooks.ts (defineApexRoute; also an MCP tool)
 apex make service Billing         # services/BillingService.ts
 apex extend auth                  # add sealed-cookie sessions + login/logout + /account
@@ -33,7 +34,17 @@ apex check                        # type-check (tsc --noEmit; fast with the nati
 apex build --preset vercel        # build + Vercel config (also: netlify, docker); then deploy
 apex test                         # run Vitest
 ```
-`apex make <kind> …` kinds: `page component api service store layout middleware test model migration auth client`.
+`apex make <kind> …` kinds: `page component api service store layout middleware test model migration auth client composable`.
+
+**Data flow, end to end.** One `defineModel` drives the whole stack: schema + migration + REST (`/api/posts` list/get/create/update/delete) + MCP tools **and** the client. `apex make composable Post` emits `composables/usePosts.ts` — a typed `usePosts()` returning `items / loading / error` + `fetch / find / create / update / remove` bound to that resource. Spread it into an x-data:
+```alpine
+<script client>
+  import { usePosts } from '../composables/usePosts'
+</script>
+<template x-data="{ ...usePosts(), init() { this.fetch() } }">
+  <template x-for="p in items" :key="p.id"><li x-text="p.title"></li></template>
+</template>
+```
 
 ## Project structure
 ```
@@ -56,13 +67,15 @@ tests/*.test.ts     Vitest. createTestApp boots the whole app in-process.
 ```
 
 ## The `.alpine` single-file component
+`.alpine` is **TypeScript-only** — `<script>` blocks are always TS; `lang` is optional
+(a `lang="js"` is a parse error).
 ```alpine
-<script server lang="ts">
+<script server>
   // Runs on the server. loader() data becomes the page's x-data (real HTML first).
   export function loader() { return { title: 'Hello' } }
   export function head() { return { title: 'Hello' } }   // SEO
 </script>
-<script client lang="ts">
+<script client>
   // Optional client-only logic; import composables here.
 </script>
 <template x-data>

package/templates/default/pages/about.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   export function loader() {
     return {}
   }

package/templates/default/pages/blog/[slug].alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   import { PostService } from '../../services/PostService'
 
   const posts = new PostService()

package/templates/default/pages/blog/index.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   import { PostService } from '../../services/PostService'
 
   const posts = new PostService()

package/templates/default/pages/index.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   import { PostService } from '../services/PostService'
 
   const posts = new PostService()

package/templates/features/auth/pages/account.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   // The user resolved by server/auth.ts is seeded into locals — so the page
   // renders the signed-in state on the SERVER, no flash of "logged out".
   export function loader({ locals }: { locals: Record<string, unknown> }) {

package/templates/features/data/pages/guestbook.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   import { handle } from '../db/index.js'
 
   // Runs on the server: reads straight from the database, so the message list is

package/templates/features/i18n/pages/hello.alpine

@@ -1,4 +1,4 @@
-<script server lang="ts">
+<script server>
   // locals.t and locals.locale are injected by the i18n runtime once i18n is
   // declared in apex.config.ts. Translation happens on the server, so the HTML
   // arrives already localized — great for SEO.