@owlmeans/create-app 0.1.18-rc.13 → 0.1.18-rc.15

package/template/sources/common/src/index.bare.ts

@@ -0,0 +1,3 @@
+export * from './consts.js'
+export * from './config.js'
+export * from './entrypoints.js'

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

@@ -2,4 +2,4 @@ export * from './consts.js'
 export * from './types.js'
 export * from './schemas.js'
 export * from './config.js'
-export * from './modules.js'
+export * from './entrypoints.js'

package/template/sources/web/index.html

@@ -1,9 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="__APP_LANG__">
 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="application-name" content="__APP_NAME__" />
+  <meta name="description" content="__APP_DESCRIPTION__" />
   <title>__APP_NAME__</title>
 </head>
 

package/template/sources/web/src/context.bare.ts

@@ -0,0 +1,13 @@
+import { makeContext as makeBasicContext, useContext as useBasicContext } from '@owlmeans/web-panel'
+import type { Config, Context } from './types.js'
+
+export const useContext = (): Context => useBasicContext<Config, Context>()
+
+/**
+ * The framework's client store lives ON the context, so a screen, a guard and a service all
+ * reach the same records — which is what separates it from a store held beside the app in a
+ * module of its own. `appendStateResource<C, T>(context, ALIAS)` from '@owlmeans/state'
+ * (already a dependency) registers one; screens then address it by that alias, never by path.
+ */
+export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =>
+  makeBasicContext<C, T>(cfg)

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

@@ -15,9 +15,5 @@ export const makeContext = <C extends Config, T extends Context<C>>(cfg: C): T =
   // the app in a module of its own.
   appendStateResource<C, T>(context, SESSION_STATE)
 
-  // A child context has to inherit THIS factory, not the layer's. Without the line, a derived
-  // context is built without the resource registered above and every lookup on it throws.
-  context.makeContext = makeContext as typeof context.makeContext
-
   return context
 }

package/template/sources/web/src/entrypoints.bare.ts

@@ -0,0 +1,14 @@
+import { BASE, entrypoint, entrypoints as baseEntrypoints, frontend, handler, HOME, route } from '@owlmeans/web-panel'
+import { sharedEntrypoints } from '__APP_SLUG__-common'
+import { MainLayout } from './layout/main.js'
+import { HomeScreen } from './screens/home.js'
+
+// Backend entrypoints arrive as declarations only — `elevate(entrypoints, alias)` (from
+// '@owlmeans/web-panel') makes one callable here without giving it a component.
+const entrypoints = [...baseEntrypoints, ...sharedEntrypoints]
+
+// Frontend layout + screens. BASE renders the shared layout; HOME is its default child.
+entrypoints.push(entrypoint(route(BASE, '/', frontend()), handler(MainLayout)))
+entrypoints.push(entrypoint(route(HOME, '/', frontend({ default: true, parent: BASE })), handler(HomeScreen)))
+
+export const appEntrypoints = entrypoints

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

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

package/template/sources/web/src/index.tsx

@@ -2,12 +2,12 @@ import './index.css'
 import { APP_API, APP_WEB } from '__APP_SLUG__-common'
 import config from './config.js'
 import { makeContext } from './context.js'
-import { appModules } from './modules.js'
+import { appEntrypoints } from './entrypoints.js'
 import { render } from './render.js'
 import type { Config, Context } from './types.js'
 
 const context = makeContext<Config, Context>(config)
-context.registerEntrypoints(appModules)
+context.registerEntrypoints(appEntrypoints)
 
 context.serviceRoute(APP_WEB, true)
 context.serviceRoute(APP_API, true)

package/template/sources/web/src/nav.bare.ts

@@ -0,0 +1,21 @@
+import { HOME } from '@owlmeans/web-panel'
+import type { PanelNavConfig, PanelNavLink } from '@owlmeans/web-panel'
+
+/**
+ * The application's navigation, as data.
+ *
+ * Sections are the top menu; their items are the side menu of whichever section is active.
+ * A section holding ONE item renders no side menu at all — which is why the single-screen
+ * shell below shows none. Labels here are literal; drop them to fall back on the panel i18n
+ * keys (`nav.<section>` / `modules.<alias>`) instead.
+ */
+export const navConfig: PanelNavConfig = {
+  sections: [
+    { name: 'home', label: 'Home', items: [{ alias: HOME, label: 'Overview' }] },
+  ],
+}
+
+export const footerLinks: PanelNavLink[] = [
+  { alias: HOME, label: '__APP_NAME__' },
+  { href: 'https://owlmeans.com', label: 'OwlMeans', open: true },
+]

package/template/sources/web/src/screens/home.bare.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+
+export const HomeScreen: FC = () => (
+  <Card>
+    <CardHeader>
+      <CardTitle>__APP_NAME__</CardTitle>
+      <CardDescription>__APP_DESCRIPTION__</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p className="text-sm text-muted-foreground">
+        Screens live in <code>src/screens</code>, the menu that reaches them in
+        {' '}<code>src/nav.ts</code>, and the routes they hang off in <code>src/entrypoints.ts</code>.
+      </p>
+    </CardContent>
+  </Card>
+)

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

@@ -33,15 +33,15 @@ export const SessionScreen: FC = () => {
    */
   const items = useStoreList<SessionItem>({ query: {}, resource: SESSION_STATE })
 
-  // The server is the source of truth; the store is what the screen reads. Fetch once, write
-  // what came back into the store, and let the subscription render it.
+  // 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
+    const data = await ctx
       .entrypoint<ClientEntrypoint<SessionItem[]>>(session.list)
       .call({ params: { sid } })
-    for (const item of data ?? []) {
-      await store.save(item)
-    }
+    await store.replace(data ?? [])
   }
 
   useEffect(() => { void load() }, [])
@@ -50,7 +50,7 @@ export const SessionScreen: FC = () => {
     if (text.trim() === '') return
     setBusy(true)
     try {
-      const [item] = await ctx
+      const item = await ctx
         .entrypoint<ClientEntrypoint<SessionItem>>(session.add)
         .call({ params: { sid }, body: { text } })
       setText('')

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/web/src/modules.ts

@@ -1,22 +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 { AboutScreen } from './screens/about.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)))
-modules.push(entrypoint(route(web.about, '/about', frontend({ parent: BASE })), handler(AboutScreen)))
-
-export const appModules = modules