fix(routes): correctly handle litestar routes (#138)

- Implemented a Vite plugin for generating TypeScript types from OpenAPI schemas and route metadata.
- Added utility to generate TypeScript types from routes.json metadata for type-safe routing.
- Updated shared index to export new types and functions.
- Refactored SvelteKit integration to utilize the new type generation plugin.
- Created tests for the route type generation utility to ensure correctness.
- Enhanced Python code for better route handling and configuration parsing.
- Improved HTML escaping for JSON strings in Inertia helpers.

Author: cofin

.github/workflows/docs.yml

@@ -32,6 +32,17 @@ jobs:
       - name: Install litestar-vite package
         run: uv pip install -e .
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Build JS plugin
+        run: |
+          npm ci
+          npm run build
+
       - name: Install VHS
         run: |
           # Install VHS via go (more reliable than charm install script)

docs/_tapes/assets-cli.tape

@@ -49,14 +49,6 @@ Type "litestar --app app:app assets build"
 Enter
 Sleep 5s
 
-Type "# 'status' shows your integration at a glance"
-Enter
-Sleep 500ms
-
-Type "litestar --app app:app assets status"
-Enter
-Sleep 2s
-
 Type "# Same tools, unified interface!"
 Enter
-Sleep 2s
+Sleep 5s

docs/_tapes/scaffolding.tape

@@ -20,7 +20,7 @@ Hide
 Type "source .venv/bin/activate"
 Enter
 Sleep 500ms
-# Create a temporary demo directory
+Hide
 Type "cd /tmp && rm -rf litestar-demo && mkdir litestar-demo && cd litestar-demo"
 Enter
 Sleep 500ms
@@ -54,9 +54,6 @@ Enter
 Sleep 500ms
 Show
 
-Type "# Start with a basic Litestar app"
-Enter
-Sleep 500ms
 
 Type "cat app.py"
 Enter

docs/conf.py

@@ -137,6 +137,10 @@
     (PY_CLASS, "InertiaTypeGenConfig"),
     (PY_CLASS, "ScrollPropsConfig"),
     (PY_CLASS, "litestar_vite.inertia.types.ScrollPropsConfig"),
+    # Logging and markup types
+    (PY_CLASS, "LoggingConfig"),
+    (PY_CLASS, "litestar_vite.config.LoggingConfig"),
+    (PY_CLASS, "Markup"),
 ]
 nitpick_ignore_regex = [
     (PY_RE, r"litestar_vite.*\.T"),

docs/frameworks/astro.rst

@@ -139,16 +139,15 @@ Add interactive islands with ``client:*`` directives:
       </body>
     </html>
 
-.. code-block:: typescript
+.. code-block:: tsx
 
     // src/components/Counter.tsx (React, Vue, Svelte, etc.)
     import { useState } from 'react'
-    import type { Summary } from '../generated/types.gen'
     import { route } from '../generated/routes'
 
     export default function Counter() {
       const [count, setCount] = useState(0)
-      const [summary, setSummary] = useState<Summary | null>(null)
+      const [summary, setSummary] = useState(null)
 
       async function loadSummary() {
         const res = await fetch(route('summary'))

docs/frameworks/htmx.rst

@@ -79,7 +79,6 @@ Return partial HTML for HTMX swaps using ``HTMXTemplate``:
    :start-after: # [docs-start:htmx-fragment]
    :end-before: # [docs-end:htmx-fragment]
    :caption: Fragment endpoint with HTMXTemplate
-   :dedent: 4
 
 The ``HTMXTemplate`` response allows:
 

docs/reference/html_transform.rst

@@ -1,6 +1,6 @@
-==================
+===================
 HTML Transformation
-==================
+===================
 
 HTML transformation utilities for injecting scripts, metadata, and attributes
 into HTML documents.

docs/reference/inertia/config.rst

@@ -1,6 +1,6 @@
-====================
+=====================
 Inertia Configuration
-====================
+=====================
 
 Configuration classes for Inertia.js integration.
 

docs/reference/inertia/exception_handler.rst

@@ -1,6 +1,6 @@
-=======================
+=========================
 Inertia Exception Handler
-=======================
+=========================
 
 Exception handling utilities for Inertia.js requests.
 

docs/usage/migration-v015.rst

@@ -376,11 +376,14 @@ If your user model has different required fields (e.g., ``uuid`` instead of ``id
        ),
    )
 
-   # Define your own User interface in TypeScript
+Then define your own User interface in TypeScript:
+
+.. code-block:: typescript
+
    declare module 'litestar-vite/inertia' {
      interface User {
-       uuid: string      // No id!
-       username: string  // No email!
+       uuid: string
+       username: string
      }
    }