Merge pull request #18 from pyreon/quality-10-of-10

Fix quality issues to reach 10/10

Author: vitbokisch

packages/meta/package.json

@@ -30,6 +30,7 @@
   "scripts": {
     "build": "vl_rolldown_build && tsc",
     "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/meta/src/tests/exports.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import * as meta from '../index'
+
+describe('@pyreon/meta exports', () => {
+  // ─── Fundamentals ───────────────────────────────────────────────────────
+  const fundamentals = [
+    'defineStore', 'signal', 'computed', 'effect', 'batch',
+    'resetStore', 'resetAllStores', 'addStorePlugin',
+    'useForm', 'useField', 'useFieldArray', 'FormProvider',
+    'useFormContext', 'useFormState', 'useWatch',
+    'zodSchema', 'zodField',
+    'QueryClient', 'QueryClientProvider', 'useQuery', 'useMutation',
+    'useQueryClient', 'useInfiniteQuery', 'useIsFetching', 'useIsMutating',
+    'useTable', 'flexRender',
+    'useVirtualizer', 'useWindowVirtualizer',
+    'createI18n', 'I18nProvider', 'useI18n', 'Trans',
+    'defineFeature', 'reference',
+  ]
+
+  for (const name of fundamentals) {
+    it(`exports ${name}`, () => {
+      expect(name in meta).toBe(true)
+    })
+  }
+
+  // ─── UI System ──────────────────────────────────────────────────────────
+  const uiSystem = [
+    'css', 'styled', 'createGlobalStyle', 'keyframes',
+    'useBreakpoint', 'useClickOutside', 'useColorScheme',
+    'useHover', 'useFocus', 'useMediaQuery', 'useToggle',
+    'useElementSize', 'useIntersection', 'useInterval',
+    'Element', 'Text', 'List', 'Overlay', 'Portal', 'Iterator',
+    'makeItResponsive', 'normalizeTheme', 'sortBreakpoints',
+    'Col', 'Container', 'Row',
+    'kinetic', 'useAnimationEnd', 'useTransitionState',
+    'createBlur', 'createFade', 'createRotate', 'createScale', 'createSlide',
+    'attrs',
+    'rocketstyle',
+  ]
+
+  for (const name of uiSystem) {
+    it(`exports ${name}`, () => {
+      expect(name in meta).toBe(true)
+    })
+  }
+})

packages/zero/src/actions.ts

@@ -37,8 +37,9 @@ const actionRegistry = new Map<string, RegisteredAction>()
 let actionCounter = 0
 
 /**
- * Define a server action. Returns a client-callable function that
- * sends a POST request to `/_zero/actions/<id>`.
+ * Define a server action. Returns a callable function that:
+ * - On the **client**: sends a POST request to `/_zero/actions/<id>`
+ * - On the **server** (SSR): executes the handler directly (no fetch)
  *
  * @example
  * // In a route file or module:
@@ -59,13 +60,32 @@ export function defineAction<T = unknown>(
   actionRegistry.set(id, { id, handler: handler as ActionHandler })
 
   const callable = async (data?: unknown): Promise<T> => {
+    // Server-side: execute handler directly (no network round-trip)
+    if (typeof globalThis.window === 'undefined') {
+      return handler({
+        request: new Request(`http://localhost/_zero/actions/${id}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data ?? null),
+        }),
+        formData: null,
+        json: data ?? null,
+        headers: new Headers({ 'Content-Type': 'application/json' }),
+      })
+    }
+
+    // Client-side: POST to the action endpoint
     const response = await fetch(`/_zero/actions/${id}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(data ?? null),
     })
     if (!response.ok) {
-      throw new Error(`Action failed: ${response.statusText}`)
+      const body = await response.json().catch(() => ({}))
+      throw new Error(
+        (body as { error?: string }).error ??
+          `Action failed: ${response.statusText}`,
+      )
     }
     return response.json()
   }
@@ -104,51 +124,45 @@ export function createActionMiddleware(): (
     const action = actionRegistry.get(actionId)
 
     if (!action) {
-      return new Response(JSON.stringify({ error: 'Action not found' }), {
-        status: 404,
-        headers: { 'Content-Type': 'application/json' },
-      })
+      return Response.json({ error: 'Action not found' }, { status: 404 })
     }
 
     if (ctx.req.method !== 'POST') {
-      return new Response(JSON.stringify({ error: 'Method not allowed' }), {
-        status: 405,
-        headers: { 'Content-Type': 'application/json' },
-      })
+      return Response.json({ error: 'Method not allowed' }, { status: 405 })
     }
 
-    try {
-      const contentType = ctx.req.headers.get('content-type') ?? ''
-      let formData: FormData | null = null
-      let json: unknown = null
-
-      if (contentType.includes('application/json')) {
-        json = await ctx.req.json()
-      } else if (
-        contentType.includes('multipart/form-data') ||
-        contentType.includes('application/x-www-form-urlencoded')
-      ) {
-        formData = await ctx.req.formData()
-      }
-
-      const result = await action.handler({
-        request: ctx.req,
-        formData,
-        json,
-        headers: ctx.req.headers,
-      })
+    return executeAction(action, ctx.req)
+  }
+}
 
-      return new Response(JSON.stringify(result ?? null), {
-        status: 200,
-        headers: { 'Content-Type': 'application/json' },
-      })
-    } catch (err) {
-      const message =
-        err instanceof Error ? err.message : 'Internal server error'
-      return new Response(JSON.stringify({ error: message }), {
-        status: 500,
-        headers: { 'Content-Type': 'application/json' },
-      })
+async function executeAction(
+  action: RegisteredAction,
+  req: Request,
+): Promise<Response> {
+  try {
+    const contentType = req.headers.get('content-type') ?? ''
+    let formData: FormData | null = null
+    let json: unknown = null
+
+    if (contentType.includes('application/json')) {
+      json = await req.json()
+    } else if (
+      contentType.includes('multipart/form-data') ||
+      contentType.includes('application/x-www-form-urlencoded')
+    ) {
+      formData = await req.formData()
     }
+
+    const result = await action.handler({
+      request: req,
+      formData,
+      json,
+      headers: req.headers,
+    })
+
+    return Response.json(result ?? null)
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Internal server error'
+    return Response.json({ error: message }, { status: 500 })
   }
 }

packages/zero/src/compression.ts

@@ -14,7 +14,7 @@ export interface CompressionConfig {
  * based on the client's Accept-Encoding header.
  *
  * Only compresses text-based content types (HTML, JSON, JS, CSS, XML, SVG).
- * Skips responses below the size threshold.
+ * Skips responses below the size threshold and already-encoded responses.
  *
  * @example
  * import { compressionMiddleware } from "@pyreon/zero/compression"
@@ -25,23 +25,25 @@ export interface CompressionConfig {
 export function compressionMiddleware(
   config: CompressionConfig = {},
 ): Middleware {
-  const { encodings = ['gzip', 'deflate'] } = config
+  const { threshold = 1024, encodings = ['gzip', 'deflate'] } = config
 
-  return async (ctx: MiddlewareContext) => {
+  return (ctx: MiddlewareContext) => {
     const acceptEncoding = ctx.req.headers.get('accept-encoding') ?? ''
 
     // Find the best supported encoding
     const encoding = encodings.find((enc) => acceptEncoding.includes(enc))
     if (!encoding) return
 
-    // Signal to downstream that we handle encoding
-    ctx.headers.set('X-Zero-Compress', encoding)
+    // Store the encoding choice for post-processing
+    ctx.locals.__compressionEncoding = encoding
+    ctx.locals.__compressionThreshold = threshold
+    ctx.headers.append('Vary', 'Accept-Encoding')
   }
 }
 
 /**
  * Compress a Response body if it meets the criteria.
- * Call this after the response is generated (post-middleware).
+ * Use this to post-process responses after the handler runs.
  *
  * @example
  * const response = await handler(request)
@@ -69,7 +71,7 @@ export async function compressResponse(
 
   const headers = new Headers(response.headers)
   headers.set('Content-Encoding', encoding)
-  headers.delete('Content-Length') // Let the runtime recalculate
+  headers.delete('Content-Length')
   headers.append('Vary', 'Accept-Encoding')
 
   return new Response(compressed, {
@@ -88,7 +90,8 @@ const COMPRESSIBLE_TYPES = [
   'image/svg+xml',
 ]
 
-function isCompressible(contentType: string): boolean {
+/** Check if a content type is compressible. Exported for testing. */
+export function isCompressible(contentType: string): boolean {
   return COMPRESSIBLE_TYPES.some((t) => contentType.includes(t))
 }
 

packages/zero/src/index.ts

@@ -129,7 +129,11 @@ export { rateLimitMiddleware } from './rate-limit'
 // ─── Compression ────────────────────────────────────────────────────────────
 
 export type { CompressionConfig } from './compression'
-export { compressionMiddleware, compressResponse } from './compression'
+export {
+  compressionMiddleware,
+  compressResponse,
+  isCompressible,
+} from './compression'
 
 // ─── Actions ─────────────────────────────────────────────────────────────────
 

packages/zero/src/tests/actions.test.ts

@@ -84,6 +84,36 @@ describe('createActionMiddleware', () => {
   })
 })
 
+describe('defineAction — server-side execution', () => {
+  it('executes handler directly on server (no fetch)', async () => {
+    // In test env (Node/Bun), globalThis.window is undefined → server mode
+    const action = defineAction(async (ctx) => {
+      const data = ctx.json as { x: number }
+      return { result: data.x + 1 }
+    })
+
+    const result = await action({ x: 10 })
+    expect(result).toEqual({ result: 11 })
+  })
+
+  it('passes null json when called without data', async () => {
+    const action = defineAction(async (ctx) => {
+      return { received: ctx.json }
+    })
+
+    const result = await action()
+    expect(result).toEqual({ received: null })
+  })
+
+  it('propagates errors on server-side execution', async () => {
+    const action = defineAction(async () => {
+      throw new Error('server error')
+    })
+
+    await expect(action()).rejects.toThrow('server error')
+  })
+})
+
 function mockCtx(path: string, method: string, body?: string) {
   const url = new URL(`http://localhost${path}`)
   const req = new Request(url.toString(), {

packages/zero/src/tests/compression.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { compressResponse } from '../compression'
+import { compressResponse, isCompressible } from '../compression'
 
 describe('compressResponse', () => {
   it('compresses text/html above threshold', async () => {
@@ -71,3 +71,27 @@ describe('compressResponse', () => {
     expect(compressed.statusText).toBe('Created')
   })
 })
+
+describe('isCompressible', () => {
+  it('returns true for text types', () => {
+    expect(isCompressible('text/html')).toBe(true)
+    expect(isCompressible('text/css')).toBe(true)
+    expect(isCompressible('text/plain')).toBe(true)
+  })
+
+  it('returns true for application types', () => {
+    expect(isCompressible('application/json')).toBe(true)
+    expect(isCompressible('application/javascript')).toBe(true)
+    expect(isCompressible('application/xml')).toBe(true)
+  })
+
+  it('returns true for SVG', () => {
+    expect(isCompressible('image/svg+xml')).toBe(true)
+  })
+
+  it('returns false for binary types', () => {
+    expect(isCompressible('image/png')).toBe(false)
+    expect(isCompressible('image/jpeg')).toBe(false)
+    expect(isCompressible('application/octet-stream')).toBe(false)
+  })
+})

packages/zero/src/vite-plugin.ts

@@ -82,17 +82,37 @@ export function zeroPlugin(userConfig: ZeroConfig = {}): Plugin {
     },
 
     configureServer(server) {
-      // SSR error overlay — catch render errors and show a styled page
-      server.middlewares.use((_req, res, next) => {
+      // SSR error overlay — intercept HTML requests and catch SSR errors
+      // This runs as a late middleware (return function) so it wraps
+      // Vite's own SSR handling and catches rendering failures.
+      server.middlewares.use((req, res, next) => {
+        const accept = req.headers.accept ?? ''
+        if (!accept.includes('text/html')) return next()
+
+        // Monkey-patch res.end to catch errors from SSR rendering
         const originalEnd = res.end.bind(res)
-        res.on('error', (err: Error) => {
-          server.ssrFixStacktrace(err)
-          const html = renderErrorOverlay(err)
+        let errored = false
+
+        const handleError = (err: unknown) => {
+          if (errored) return
+          errored = true
+          const error = err instanceof Error ? err : new Error(String(err))
+          server.ssrFixStacktrace(error)
+          const html = renderErrorOverlay(error)
           res.statusCode = 500
-          res.setHeader('Content-Type', 'text/html')
+          res.setHeader('Content-Type', 'text/html; charset=utf-8')
+          res.setHeader('Content-Length', Buffer.byteLength(html))
           originalEnd(html)
-        })
-        next()
+        }
+
+        res.on('error', handleError)
+
+        // Wrap next() in try/catch to handle synchronous errors
+        try {
+          next()
+        } catch (err) {
+          handleError(err)
+        }
       })
 
       // Watch routes directory for changes