@owlmeans/create-app 0.1.18-rc.2 → 0.1.18-rc.21

package/template/sources/web/src/screens/session.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, type FC } from 'react'
-import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import { useStoreList } from '@owlmeans/client'
 import { session, type SessionItem } from '__APP_SLUG__-common'
-import { useContext } from '../context.js'
+import { SESSION_STATE, useContext } from '../context.js'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
@@ -20,15 +20,27 @@ const sessionId = (): string => {
 export const SessionScreen: FC = () => {
   const ctx = useContext()
   const sid = sessionId()
-  const [items, setItems] = useState<SessionItem[]>([])
   const [text, setText] = useState('')
   const [busy, setBusy] = useState(false)
 
+  const store = ctx.getStateResource<SessionItem>(SESSION_STATE)
+
+  /**
+   * The list is a live subscription to the state resource, not a piece of component state.
+   * Anything that writes a record — this screen or another one — re-renders it, so adding and
+   * removing never re-fetch to stay in step. `{}` matches every record; a real filter goes here.
+   */
+  const items = useStoreList<SessionItem>({ query: {}, resource: SESSION_STATE })
+
+  // The server is the source of truth; the store is what the screen reads. Fetch once, install
+  // what came back, and let the subscription render it. `replace` rather than a save per item:
+  // the endpoint answers with the session's whole set, so an item removed on another tab has to
+  // leave the store too, and one write wakes the subscribers once instead of once per record.
   const load = async () => {
-    const [data] = await ctx
-      .entrypoint<ClientEntrypoint<SessionItem[]>>(session.list)
+    const data = await ctx
+      .entrypoint(session.list)
       .call({ params: { sid } })
-    setItems(data ?? [])
+    await store.replace(data ?? [])
   }
 
   useEffect(() => { void load() }, [])
@@ -37,11 +49,13 @@ export const SessionScreen: FC = () => {
     if (text.trim() === '') return
     setBusy(true)
     try {
-      await ctx
-        .entrypoint<ClientEntrypoint<SessionItem>>(session.add)
+      const item = await ctx
+        .entrypoint(session.add)
         .call({ params: { sid }, body: { text } })
       setText('')
-      await load()
+      if (item != null) {
+        await store.save(item)
+      }
     } finally {
       setBusy(false)
     }
@@ -49,9 +63,9 @@ export const SessionScreen: FC = () => {
 
   const remove = async (id: string) => {
     await ctx
-      .entrypoint<ClientEntrypoint<{ removed: boolean }>>(session.remove)
+      .entrypoint(session.remove)
       .call({ params: { sid, id } })
-    await load()
+    await store.delete(id)
   }
 
   return (
@@ -75,11 +89,11 @@ export const SessionScreen: FC = () => {
         <ul className="flex flex-col gap-2">
           {items.map(item => (
             <li
-              key={item.id}
+              key={item.record.id}
               className="flex items-center justify-between rounded-md border px-3 py-2"
             >
-              <span>{item.text}</span>
-              <Button variant="ghost" size="sm" onClick={() => void remove(item.id)}>
+              <span>{item.record.text}</span>
+              <Button variant="ghost" size="sm" onClick={() => void remove(item.record.id)}>
                 Remove
               </Button>
             </li>

package/template/sources/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/sources/api/src/modules.ts

@@ -1,11 +0,0 @@
-import { elevate, modules } from '@owlmeans/server-app'
-import { session, sessionModules } from '__APP_SLUG__-common'
-import * as handlers from './app/session/index.js'
-
-// Attach handler implementations to the shared entrypoint declarations.
-elevate(sessionModules, session.base)
-elevate(sessionModules, session.list, handlers.list)
-elevate(sessionModules, session.add, handlers.add)
-elevate(sessionModules, session.remove, handlers.remove)
-
-export const appModules = [...modules, ...sessionModules]

package/template/sources/common/src/modules.ts

@@ -1,26 +0,0 @@
-import { body, entrypoint, filter, params } from '@owlmeans/entrypoint'
-import { route, RouteMethod } from '@owlmeans/route'
-import { session } from './consts.js'
-import { AddItemSchema, ItemParamsSchema, SessionParamsSchema } from './schemas.js'
-import type { AddItemPayload, ItemParams, SessionParams } from './types.js'
-
-/**
- * Shared entrypoint declarations. The api elevates these with handlers; the web
- * elevates them with screen components and calls them. Routes resolve under the
- * api service `base` (`/api`), so e.g. `session.list` → `GET /api/session/:sid/items`.
- */
-export const sessionModules = [
-  entrypoint(route(session.base, '/session')),
-  entrypoint(
-    route(session.list, '/:sid/items', { parent: session.base, method: RouteMethod.GET }),
-    filter(params<SessionParams>(SessionParamsSchema)),
-  ),
-  entrypoint(
-    route(session.add, '/:sid/items', { parent: session.base, method: RouteMethod.POST }),
-    filter(params<SessionParams>(SessionParamsSchema, body<AddItemPayload>(AddItemSchema))),
-  ),
-  entrypoint(
-    route(session.remove, '/:sid/items/:id', { parent: session.base, method: RouteMethod.DELETE }),
-    filter(params<ItemParams>(ItemParamsSchema)),
-  ),
-]

package/template/sources/web/src/components/nav/main.tsx

@@ -1,15 +0,0 @@
-import type { FC } from 'react'
-import { HOME, useNavigate } from '@owlmeans/web-panel'
-import { web } from '__APP_SLUG__-common'
-import { Button } from '@/components/ui/button'
-
-export const MainNavigation: FC = () => {
-  const nav = useNavigate()
-
-  return (
-    <nav className="flex items-center gap-1">
-      <Button variant="ghost" size="sm" onClick={nav.press(HOME)}>Home</Button>
-      <Button variant="ghost" size="sm" onClick={nav.press(web.session)}>Session</Button>
-    </nav>
-  )
-}

package/template/sources/web/src/modules.ts

@@ -1,20 +0,0 @@
-import { BASE, elevate, entrypoint, frontend, handler, HOME, modules as baseModules, route } from '@owlmeans/web-panel'
-import { session, sessionModules, web } from '__APP_SLUG__-common'
-import { MainLayout } from './layout/main.js'
-import { HomeScreen } from './screens/home.js'
-import { SessionScreen } from './screens/session.js'
-
-const modules = [...baseModules, ...sessionModules]
-
-// Backend entrypoints — elevated without a component so the client can call them.
-elevate(modules, session.base)
-elevate(modules, session.list)
-elevate(modules, session.add)
-elevate(modules, session.remove)
-
-// Frontend layout + screens. BASE renders the shared layout; HOME is its default child.
-modules.push(entrypoint(route(BASE, '/', frontend()), handler(MainLayout)))
-modules.push(entrypoint(route(HOME, '/', frontend({ default: true, parent: BASE })), handler(HomeScreen)))
-modules.push(entrypoint(route(web.session, '/session', frontend({ parent: BASE })), handler(SessionScreen)))
-
-export const appModules = modules