@stacksjs/defaults 0.72.98 → 0.72.100

package/app/Listener.ts

@@ -1,84 +1,37 @@
-import type { StacksEvents, WildcardHandler } from '@stacksjs/events'
-import { handleError } from '@stacksjs/error-handling'
-import { emitter } from '@stacksjs/events'
+import { registerAppListeners } from '@stacksjs/events'
 import { path as p } from '@stacksjs/path'
-import events from './Events'
 
-// Cache resolved action modules to avoid repeated dynamic imports
-const actionCache = new Map<string, { handle: (event: any) => Promise<any> | any }>()
-
-// Deduplicate in-flight imports to prevent concurrent import races
-const pendingImports = new Map<string, Promise<{ handle: (event: any) => Promise<any> | any } | null>>()
-
-// Pre-compute which event types have listeners for O(1) lookup
-const eventTypes = new Set(Object.keys(events))
-
-export async function handleEvents() {
-  emitter.on('*', listenEvents as WildcardHandler<StacksEvents>)
-}
-
-function listenEvents(type: keyof typeof events, event: any) {
-  // Fast path: skip events with no registered listeners
-  if (!eventTypes.has(type as string))
-    return
-
-  const eventListeners = events[type]
-  if (!eventListeners || eventListeners.length === 0)
-    return
-
-  // Fire-and-forget with error handling — mitt doesn't await wildcard handlers
-  processListeners(type as string, eventListeners, event)
-}
-
-async function resolveAction(listener: string): Promise<{ handle: (event: any) => Promise<any> | any } | null> {
-  // Check cache first
-  const cached = actionCache.get(listener)
-  if (cached) return cached
-
-  // Check if an import is already in-flight
-  let pending = pendingImports.get(listener)
-  if (pending) return pending
-
-  // Start the import and cache the promise to deduplicate concurrent calls
-  pending = (async () => {
-    try {
-      const imported = await import(p.appPath(`Actions/${listener}.ts`))
-      const actionModule = imported.default
-      if (actionModule && typeof actionModule.handle === 'function') {
-        actionCache.set(listener, actionModule)
-        return actionModule
-      }
-      handleError(`Action "${listener}" does not export a handle method`)
-      return null
-    }
-    catch (error) {
-      handleError(`Failed to import action "${listener}"`, error)
-      return null
-    }
-    finally {
-      pendingImports.delete(listener)
-    }
-  })()
-
-  pendingImports.set(listener, pending)
-  return pending
-}
-
-async function processListeners(type: string, listeners: string[], event: any) {
-  for (const listener of listeners) {
-    try {
-      if (typeof listener === 'function') {
-        await (listener as any)(event)
-        continue
-      }
-
-      const action = await resolveAction(listener)
-      if (action) {
-        await action.handle(event)
-      }
-    }
-    catch (error) {
-      handleError(`Failed to execute listener "${listener}" for event "${type}"`, error)
-    }
-  }
+/**
+ * **Event Listener Bootstrap**
+ *
+ * Registers every listener the application declares: the `app/Events.ts` map of
+ * event name to listener names, and any module under `app/Listeners/` that
+ * declares its own `listensTo`.
+ *
+ * This file used to carry its own implementation of the first half - a wildcard
+ * handler that read the map on every dispatch and imported the named action out
+ * of `app/Actions/`. It was a second implementation of what
+ * `registerAppListeners` already does, and having two was worse than having the
+ * wrong one:
+ *
+ *   - In dev they both ran. `injectGlobalAutoImports()` calls
+ *     `registerAppListeners()` and the dev API entrypoint then called
+ *     `handleEvents()`, so every listener named in the map fired TWICE per
+ *     event - two welcome emails, two rows, and no error anywhere to say so.
+ *   - The copy resolved names against `app/Actions/` alone, so a listener under
+ *     `app/Listeners/` and any of the framework's default actions were
+ *     unreachable from the map.
+ *   - It matched events by exact name only, dropping the glob subscriptions
+ *     (`user:*`) the emitter supports.
+ *
+ * Delegating keeps this file as the app's hook into boot - override it to
+ * register listeners of your own - with one implementation behind it, whose
+ * registry also makes the call idempotent across a dev-server reload.
+ */
+export async function handleEvents(): Promise<number> {
+  // Anchored to the project root rather than left to `process.cwd()`. A buddy
+  // command, a test runner or a worker started from a subdirectory would
+  // otherwise look for `app/Events.ts` beside wherever it happened to be
+  // launched, find nothing, and register no listeners without saying so.
+  return registerAppListeners({ base: p.projectPath() })
 }

package/app/Middleware.ts

@@ -1,13 +1,28 @@
-export interface Middleware {
-  [key: string]: string
-}
+import { defineMiddleware } from '@stacksjs/router'
 
 /**
  * The application's middleware aliases.
  *
- * Aliases may be used instead of class names to conveniently assign middleware to routes and groups.
+ * Aliases may be used instead of class names to conveniently assign middleware
+ * to routes and groups. Each one names a class under `app/Middleware/`, or one
+ * of the framework defaults behind it, and the name is checked.
+ *
+ * This map is MERGED over the framework defaults rather than replacing them,
+ * so an alias the framework adds later is available here without an edit.
+ *
+ * Two forms are read off a reference before it is looked up:
+ *
+ *   - `!alias` inverts it: the route passes only when that middleware refuses.
+ *     `'!auth'` is a guests-only route; `'!env:production'` is everywhere but
+ *     production.
+ *   - `alias:params` passes `params` to the middleware, but only when the
+ *     whole string is not itself an alias - so `'env:production'` is the alias
+ *     below and `'throttle:60,1'` passes `60,1` to `throttle`.
+ *
+ * A middleware with no alias is still reachable by its class name, which is how
+ * `'signed'` worked before it was listed here.
  */
-export default {
+export default defineMiddleware({
   'maintenance': 'Maintenance',
   'cors': 'Cors',
   'auth': 'Auth',
@@ -19,6 +34,7 @@ export default {
   'abilities': 'Abilities',
   'can': 'Can',
   'throttle': 'Throttle',
+  'signed': 'Signed',
   'env': 'Env',
   'env:local': 'EnvLocal',
   'env:development': 'EnvDevelopment',
@@ -32,5 +48,4 @@ export default {
   'csrf': 'Csrf',
   'compress': 'Compress',
   // Add more middleware aliases here
-  // Note: Use ! prefix for negation (e.g., '!auth', '!env:development')
-} satisfies Middleware
+})

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.72.98",
+  "version": "0.72.100",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.72.98",
+  "version": "0.72.100",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -51,7 +51,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.72.98",
+    "@stacksjs/mobile": "^0.72.100",
     "@stacksjs/sanitizer": "^0.2.113"
   },
   "scripts": {

package/project/storage/framework/server/tsconfig.docker.json

@@ -11,8 +11,7 @@
       "Actions/*": ["../app/Actions/*"],
       "Jobs/*": ["../app/Jobs/*"],
       "./app/*": ["../app/*"], // it's outside the dist folder
-      "~/*": ["../*"],
-      "../../../env": ["../storage/framework/env.ts"]
+      "~/*": ["../*"]
     },
     "resolveJsonModule": true,
     "allowImportingTsExtensions": true,

package/resources/components/Buttons/Counter.stx

@@ -1,28 +1,37 @@
-<script>
+<script client>
+/*
+ * A counter, in signals.
+ *
+ * This used to be a `<script client>` that ran `document.querySelector` on
+ * mount, read the count back out of `textContent`, `parseInt`ed it and wrote a
+ * number back into that string property. It worked, but as the component every
+ * new app has in `Buttons/`, it taught the one pattern the stx guidance rules
+ * out: reaching for the DOM instead of state. It also only ever bound the
+ * first `[data-counter]` on the page, so a second `<Counter />` was inert.
+ */
 interface CounterProps {
   count?: number
 }
 
 const { count = 0 } = defineProps<CounterProps>()
+
+const total = state(count)
+
+function increase(): void {
+  total.set(total() + 1)
+}
 </script>
+
 <div>
-    <button
-      type="button"
-      class="text-white text-xs bg-blue-500 hover:bg-blue-600 btn"
-      data-counter
-    >
-      <i
-        class="-ml-1 mr-3 h-4 w-4 i-hugeicons-outline-plus"
-        aria-hidden="true"
-      ></i>
-      Counter: <span data-count>{{ count }}</span>
-    </button>
-  </div>
-<script client>
-document.querySelector('[data-counter]')?.addEventListener('click', function() {
-  const countEl = document.querySelector('[data-count]')
-  if (countEl) {
-    countEl.textContent = parseInt(countEl.textContent || '0') + 1
-  }
-})
-</script>
+  <button
+    type="button"
+    class="text-white text-xs bg-blue-500 hover:bg-blue-600 btn"
+    @click="increase"
+  >
+    <i
+      class="-ml-1 mr-3 h-4 w-4 i-hugeicons-outline-plus"
+      aria-hidden="true"
+    ></i>
+    Counter: <span>{{ total() }}</span>
+  </button>
+</div>

package/resources/components/Dashboard/Analytics/WebAnalyticsDashboard.stx

@@ -211,11 +211,9 @@ import type {
 } from '~/storage/framework/defaults/functions/analytics'
 import { fetchWebAnalytics } from '~/storage/framework/defaults/functions/analytics'
 import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+import type { ChartCtor, ChartLike } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 import { useChart } from '~/storage/framework/defaults/views/dashboard/composables/useChart'
 
-interface ChartLike { destroy: () => void }
-type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
-
 const analyticsOverview = state<AnalyticsOverview>({
   realtimeVisitors: 0,
   uniqueVisitors: 0,

package/resources/components/Dashboard/Auth/ForgotPasswordDashboard.stx

@@ -11,7 +11,7 @@ const isLoading = state(false)
 const error = state('')
 const success = state(false)
 
-async function handleForgotPassword(data) {
+async function handleForgotPassword(data: { email: string }): Promise<void> {
   isLoading.set(true)
   error.set('')
 

package/resources/components/Dashboard/Auth/LoginDashboard.stx

@@ -1,4 +1,5 @@
 <script client>
+import type { AuthUser } from '../../../../types/dashboard'
 import { describeAuthError, useAuth } from '../../../../functions/auth'
 
 const { login } = useAuth()
@@ -12,7 +13,7 @@ function safeRedirect(): string {
   return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
 }
 
-async function handleLogin(credentials) {
+async function handleLogin(credentials: AuthUser): Promise<void> {
   isLoading.set(true)
   error.set('')
 

package/resources/components/Dashboard/Auth/RegisterDashboard.stx

@@ -1,4 +1,5 @@
 <script client>
+import type { RegisterCredentials } from '../../../../types/dashboard'
 import { describeAuthError, useAuth } from '../../../../functions/auth'
 
 const { register } = useAuth()
@@ -12,7 +13,7 @@ function safeRedirect(): string {
   return redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/'
 }
 
-async function handleRegister(credentials) {
+async function handleRegister(credentials: RegisterCredentials): Promise<void> {
   isLoading.set(true)
   error.set('')
 

package/resources/components/Dashboard/Auth/ResetPasswordDashboard.stx

@@ -53,7 +53,7 @@ async function verify(): Promise<void> {
   }
 }
 
-async function handleReset(data): Promise<void> {
+async function handleReset(data: { password: string, password_confirmation: string }): Promise<void> {
   isLoading.set(true)
   error.set('')
 

package/resources/components/Dashboard/Ci/CiDashboard.stx

@@ -41,33 +41,33 @@
     return 'Runners: ' + r.running + ' running, ' + r.queued + ' queued / ' + r.cap + ' cap'
   })
 
-  function tabClass(id) {
+  function tabClass(id: string) {
     const base = 'px-4 py-2 font-medium text-sm whitespace-nowrap bg-transparent border-b-2 transition-colors cursor-pointer '
     return activeTab() === id
       ? base + 'border-violet-400 text-violet-600 dark:text-violet-400'
       : base + 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
   }
 
-  function filterClass(id) {
+  function filterClass(id: string) {
     const base = 'px-3 py-1 text-xs rounded-full border transition-colors cursor-pointer '
     return statusFilter() === id
       ? base + 'bg-violet-500 border-violet-500 text-white'
       : base + 'bg-transparent border-zinc-300 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 hover:border-zinc-400'
   }
 
-  function borderColor(status) {
+  function borderColor(status: string) {
     if (status === 'success') return 'border-color: rgba(16,185,129,0.3)'
     if (status === 'failure' || status === 'error') return 'border-color: rgba(239,68,68,0.3)'
     if (status === 'pending') return 'border-color: rgba(234,179,8,0.3)'
     return 'border-color: rgba(39,39,42,1)'
   }
 
-  function isSuccess(status) { return status === 'success' }
-  function isFailing(status) { return status === 'failure' || status === 'error' }
-  function isPending(status) { return status === 'pending' }
-  function isNoRuns(status) { return status === 'no_runs' }
+  function isSuccess(status: string) { return status === 'success' }
+  function isFailing(status: string) { return status === 'failure' || status === 'error' }
+  function isPending(status: string) { return status === 'pending' }
+  function isNoRuns(status: string) { return status === 'no_runs' }
 
-  function timeAgo(dateStr) {
+  function timeAgo(dateStr: string | null | undefined) {
     if (!dateStr) return ''
     const diff = Date.now() - new Date(dateStr).getTime()
     const mins = Math.floor(diff / 60000)
@@ -78,7 +78,7 @@
     return days + 'd ago'
   }
 
-  function truncate(str, len) {
+  function truncate(str: string, len: number) {
     if (!str) return ''
     return str.length > len ? str.slice(0, len) + '...' : str
   }

package/resources/components/Dashboard/Ci/CiRunHistoryDrawer.stx

@@ -11,7 +11,7 @@ const jobsByRunId = derived(() => ci.drilldownJobsByRunId())
 const loadingJobsRunId = derived(() => ci.loadingJobsForRunId())
 const title = derived(() => target()?.fullName || 'Run history')
 
-function runRowClass(conclusion, status) {
+function runRowClass(conclusion: string, status: string) {
   const base = 'px-3 py-2 -mx-3 border-l-2 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors '
   if (status !== 'completed') return base + 'border-yellow-400'
   if (conclusion === 'success') return base + 'border-emerald-400'
@@ -20,14 +20,14 @@ function runRowClass(conclusion, status) {
   return base + 'border-zinc-200 dark:border-zinc-800'
 }
 
-function runStatusBadge(conclusion, status) {
+function runStatusBadge(conclusion: string, status: string) {
   if (status !== 'completed') return { label: status, cls: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300' }
   if (conclusion === 'success') return { label: 'success', cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300' }
   if (conclusion === 'failure') return { label: 'failure', cls: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300' }
   return { label: conclusion || 'unknown', cls: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' }
 }
 
-function formatDuration(ms) {
+function formatDuration(ms: number) {
   if (ms == null) return ''
   const seconds = Math.floor(ms / 1000)
   if (seconds < 60) return seconds + 's'
@@ -38,7 +38,7 @@ function formatDuration(ms) {
   return hours + 'h ' + (minutes % 60) + 'm'
 }
 
-function timeAgo(dateStr) {
+function timeAgo(dateStr: string | null | undefined) {
   if (!dateStr) return ''
   const diff = Date.now() - new Date(dateStr).getTime()
   const minutes = Math.floor(diff / 60000)
@@ -48,16 +48,16 @@ function timeAgo(dateStr) {
   return Math.floor(hours / 24) + 'd ago'
 }
 
-function truncate(value, length) {
+function truncate(value: string, length: number) {
   if (!value) return ''
   return value.length > length ? value.slice(0, length) + '...' : value
 }
 
-function jobsForRun(runId) {
+function jobsForRun(runId: number) {
   return jobsByRunId()[runId] || []
 }
 
-function failedJobs(runId) {
+function failedJobs(runId: number) {
   return jobsForRun(runId).filter(job => job.conclusion && job.conclusion !== 'success' && job.conclusion !== 'skipped' && job.conclusion !== 'neutral')
 }
 </script>

package/resources/components/Dashboard/Commerce/CommerceOverviewCharts.stx

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceDashboardChartSeries } from '../../../../app/Actions/Dashboard/Commerce/commerce-dashboard'
+import type { ChartOptions } from '../../../../views/dashboard/composables'
 import { useLazyCharts } from '../../../../views/dashboard/composables'
 
 const series = useReactiveProp('series', {
@@ -41,7 +42,7 @@ const ordersData = {
     data: [] as number[],
   }],
 }
-const chartOptions = {
+const chartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: { legend: { display: true, position: 'top' } },

package/resources/components/Dashboard/Commerce/CommercePaymentsDashboard.stx

@@ -1,5 +1,5 @@
 <script client>
-import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
+import type { PaymentRecord, PaymentSummary } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import {
   paymentsToCsv,
   summarizePayments,

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -2,6 +2,10 @@
 import { publicApplicationUrl } from '../../../../functions/public-application-url'
 
 export const blogUrl = publicApplicationUrl('/blog')
+
+// Declared so the client block below gets `blogUrl` typed rather than inferred
+// off the implicit bridge.
+defineClientPayload({ blogUrl })
 </script>
 
 <template>
@@ -198,6 +202,7 @@ export const blogUrl = publicApplicationUrl('/blog')
 <script client>
 // Plain async transport for /api/dashboard/blog, which reads and writes the
 // markdown files in content/blog. It owns no state; the signals below do.
+import type { BlogPost, BlogPostDraft } from '~/storage/framework/defaults/functions/blog'
 import { deleteBlogPost, fetchBlogPost, fetchBlogPosts, saveBlogPost } from '~/storage/framework/defaults/functions/blog'
 
 const publicBlogBaseUrl = {{ blogUrl }}
@@ -205,7 +210,7 @@ const publicBlogBaseUrl = {{ blogUrl }}
 // Fixed-length list purely to render the loading skeleton rows.
 const skeletonRows = [1, 2, 3, 4]
 
-const posts = state([])
+const posts = state<BlogPost[]>([])
 const isLoading = state(true)
 const isSaving = state(false)
 const loadError = state('')
@@ -213,18 +218,29 @@ const searchQuery = state('')
 const statusFilter = state('all')
 
 const isEditorOpen = state(false)
-const editingPost = state(null)
+const editingPost = state<BlogPost | null>(null)
 const loadedBody = state('')
 const bodyLoading = state(false)
 const bodyLoadFailed = state(false)
 const formError = state('')
 
-const postToDelete = state(null)
+const postToDelete = state<BlogPost | null>(null)
 const isDeleting = state(false)
 const deleteError = state('')
 let editorRequestId = 0
 
-function publicPostUrl(slug) {
+/**
+ * A caught value's message.
+ *
+ * `catch (error)` binds `unknown`, and reading `.message` off it assumes every
+ * throw is an `Error` - a rejected fetch or a thrown string would render
+ * `undefined` into the banner the user reads.
+ */
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+function publicPostUrl(slug: string) {
   return `${publicBlogBaseUrl}/${encodeURIComponent(String(slug))}`
 }
 
@@ -256,13 +272,13 @@ const filteredPosts = derived(() => {
   })
 })
 
-function statusClass(draft) {
+function statusClass(draft: boolean) {
   return draft
     ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
     : 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
 }
 
-function formatDate(value) {
+function formatDate(value: string | number | Date | null | undefined) {
   if (!value)
     return 'No date'
 
@@ -278,7 +294,7 @@ function clearFilters() {
   statusFilter.set('all')
 }
 
-async function openEditor(post) {
+async function openEditor(post: BlogPost) {
   const requestId = ++editorRequestId
   formError.set('')
   editingPost.set(post)
@@ -293,7 +309,7 @@ async function openEditor(post) {
   await loadEditorBody(post, requestId)
 }
 
-async function loadEditorBody(post, requestId = ++editorRequestId) {
+async function loadEditorBody(post: BlogPost, requestId = ++editorRequestId) {
   bodyLoading.set(true)
   bodyLoadFailed.set(false)
   formError.set('')
@@ -307,7 +323,7 @@ async function loadEditorBody(post, requestId = ++editorRequestId) {
   catch (error) {
     if (requestId === editorRequestId) {
       bodyLoadFailed.set(true)
-      formError.set(`Couldn't load this post's content: ${error.message}`)
+      formError.set(`Couldn't load this post's content: ${messageOf(error)}`)
     }
   }
   finally {
@@ -335,7 +351,7 @@ function closeEditor() {
   formError.set('')
 }
 
-async function submit(draft) {
+async function submit(draft: BlogPostDraft) {
   isSaving.set(true)
   formError.set('')
 
@@ -351,14 +367,14 @@ async function submit(draft) {
   }
   catch (error) {
     // Keep the editor open on failure so the author's work is not thrown away.
-    formError.set(error.message)
+    formError.set(messageOf(error))
   }
   finally {
     isSaving.set(false)
   }
 }
 
-function askDelete(post) {
+function askDelete(post: BlogPost) {
   deleteError.set('')
   postToDelete.set(post)
 }
@@ -384,7 +400,7 @@ async function confirmDelete() {
     postToDelete.set(null)
   }
   catch (error) {
-    deleteError.set(`Couldn't delete "${post.title}": ${error.message}`)
+    deleteError.set(`Couldn't delete "${post.title}": ${messageOf(error)}`)
   }
   finally {
     isDeleting.set(false)
@@ -399,7 +415,7 @@ async function load() {
     posts.set(list)
   }
   catch (error) {
-    loadError.set(error.message)
+    loadError.set(messageOf(error))
   }
   finally {
     isLoading.set(false)
@@ -408,5 +424,11 @@ async function load() {
 
 // onMount, not effect: load() writes the same `posts` signal the derived signals
 // read, so an effect would re-trigger itself on every load.
-onMount(load)
+//
+// Wrapped rather than passed directly. `onMount` takes `() => void | StxCleanup`,
+// and an async function returns a promise - which stx would treat as the
+// cleanup value if it took one, and which hides a rejection either way. `load`
+// handles its own errors into `loadError`, so the promise is deliberately
+// dropped here.
+onMount(() => { void load() })
 </script>