From 2c6deb500d8f238bdb9dc3726ce4e9201959c5d8 Mon Sep 17 00:00:00 2001 From: Svyatoslav Kryukov Date: Sat, 15 Nov 2025 13:43:40 +0300 Subject: [PATCH] Add type hints to docs --- docs/.vitepress/config.mts | 4 + docs/.vitepress/theme/index.ts | 4 + docs/cookbook/inertia-modal.md | 56 +- docs/cookbook/server-managed-meta-tags.md | 6 +- docs/guide/client-side-setup.md | 24 +- docs/guide/code-splitting.md | 14 +- docs/guide/csrf-protection.md | 6 +- docs/guide/deferred-props.md | 16 +- docs/guide/error-handling.md | 10 +- docs/guide/events.md | 116 +- docs/guide/file-uploads.md | 20 +- docs/guide/forms.md | 306 +-- docs/guide/history-encryption.md | 6 +- docs/guide/infinite-scroll.md | 112 +- docs/guide/links.md | 68 +- docs/guide/load-when-visible.md | 48 +- docs/guide/manual-visits.md | 150 +- docs/guide/merging-props.md | 6 +- docs/guide/pages.md | 46 +- docs/guide/partial-reloads.md | 30 +- docs/guide/polling.md | 24 +- docs/guide/prefetching.md | 92 +- docs/guide/progress-indicators.md | 56 +- docs/guide/remembering-state.md | 30 +- docs/guide/responses.md | 8 +- docs/guide/scroll-management.md | 24 +- docs/guide/server-side-rendering.md | 26 +- docs/guide/shared-data.md | 12 +- docs/guide/title-and-meta.md | 80 +- docs/guide/upgrade-guide.md | 6 +- docs/guide/validation.md | 12 +- docs/guide/view-transitions.md | 42 +- docs/package-lock.json | 2445 +++++++++++++++------ docs/package.json | 7 + 34 files changed, 2558 insertions(+), 1354 deletions(-) diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index 1ca2cee5..3eb50486 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -1,3 +1,4 @@ +import { transformerTwoslash } from '@shikijs/vitepress-twoslash' import { defineConfig } from 'vitepress' import llmstxt from 'vitepress-plugin-llms' import { availableSinceMarkdownPlugin } from './availableSinceMarkdownPlugin' @@ -28,6 +29,9 @@ export default defineConfig({ md.use(tabsMarkdownPlugin) md.use(availableSinceMarkdownPlugin) }, + codeTransformers: [transformerTwoslash()], + // Explicitly load these languages for types highlighting + languages: ['js', 'jsx', 'ts', 'tsx', 'vue', 'svelte'], }, head: [ diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 02bcbcba..fac1412e 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,7 +1,10 @@ // https://vitepress.dev/guide/custom-theme +import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client' +import '@shikijs/vitepress-twoslash/style.css' import type { Theme } from 'vitepress' import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client' import DefaultTheme from 'vitepress/theme' + import { h } from 'vue' import { AvailableSince, @@ -23,6 +26,7 @@ export default { }) }, enhanceApp({ app, router, siteData }) { + app.use(TwoslashFloatingVue) enhanceAppWithTabs(app) app.component('AvailableSince', AvailableSince) app.component('Opt', Opt) diff --git a/docs/cookbook/inertia-modal.md b/docs/cookbook/inertia-modal.md index 8e411744..fc707541 100644 --- a/docs/cookbook/inertia-modal.md +++ b/docs/cookbook/inertia-modal.md @@ -52,7 +52,7 @@ Update your Inertia app setup to include the modal plugin: :::tabs key:frameworks == Vue -```js +```js twoslash // frontend/entrypoints/inertia.js import { createApp, h } from 'vue' import { createInertiaApp } from '@inertiajs/vue3' @@ -74,7 +74,7 @@ createInertiaApp({ == React -```js +```js twoslash // frontend/entrypoints/inertia.js import { createInertiaApp } from '@inertiajs/react' import { createElement } from 'react' // [!code --] @@ -110,7 +110,7 @@ For Tailwind CSS v4, add the modal styles to your CSS: For Tailwind CSS v3, update your `tailwind.config.js`: -```js +```js twoslash export default { content: [ './node_modules/@inertiaui/modal-vue/src/**/*.{js,vue}', @@ -130,7 +130,7 @@ For Tailwind CSS v4, add the modal styles to your CSS: For Tailwind CSS v3, update your `tailwind.config.js`: -```js +```js twoslash export default { content: [ './node_modules/@inertiaui/modal-react/src/**/*.{js,jsx}', @@ -158,7 +158,7 @@ link that you want to open in a modal, you can simply replace `Link` with `Modal :::tabs key:frameworks == Vue -```vue +```vue twoslash @@ -212,24 +212,24 @@ import { Modal } from '@inertiaui/modal-vue' == React -```jsx +```jsx twoslash import {Modal} from '@inertiaui/modal-react' export const CreateUser = () => { - return ( - {/* [!code --] */} - <> - {/* [!code ++] */} - -

Create User

-
- {/* Form fields */} -
- {/* [!code --] */} -
- {/* [!code ++] */} - - ) + return ( + {/* [!code --] */} + <> + {/* [!code ++] */} + +

Create User

+
+ {/* Form fields */} +
+ {/* [!code --] */} +
+ {/* [!code ++] */} + + ) } ``` @@ -296,7 +296,7 @@ to add the `navigate` attribute to the `ModalLink` component: :::tabs key:frameworks == Vue -```vue +```vue twoslash @@ -304,7 +304,7 @@ to add the `navigate` attribute to the `ModalLink` component: == React -```jsx +```jsx twoslash export default function UserIndex() { return ( diff --git a/docs/cookbook/server-managed-meta-tags.md b/docs/cookbook/server-managed-meta-tags.md index 9c01eda8..b725c63f 100644 --- a/docs/cookbook/server-managed-meta-tags.md +++ b/docs/cookbook/server-managed-meta-tags.md @@ -36,7 +36,7 @@ Copy the following code into your application. It should be rendered **once** in :::tabs key:frameworks == Vue -```vue +```vue twoslash @@ -71,7 +71,7 @@ import { Deferred } from '@inertiajs/vue3' == React -```jsx +```jsx twoslash import { Deferred } from '@inertiajs/react' export default () => ( @@ -83,7 +83,7 @@ export default () => ( == Svelte 4 -```svelte +```svelte twoslash @@ -143,7 +143,7 @@ import { Deferred } from '@inertiajs/vue3' == React -```jsx +```jsx twoslash import { Deferred } from '@inertiajs/react' export default () => ( @@ -155,7 +155,7 @@ export default () => ( == Svelte 4 -```svelte +```svelte twoslash @@ -32,7 +32,7 @@ import { Form } from '@inertiajs/vue3' == React -```jsx +```jsx twoslash import { Form } from '@inertiajs/react' export default () => ( @@ -46,7 +46,7 @@ export default () => ( == Svelte 4|Svelte 5 -```svelte +```svelte twoslash @@ -68,19 +68,19 @@ The component also supports nested data structures, file uploads, and dotted key == Vue -```vue +```vue twoslash
- - - - - + + + + +
``` == React -```jsx +```jsx twoslash
@@ -92,7 +92,7 @@ The component also supports nested data structures, file uploads, and dotted key == Svelte 4|Svelte 5 -```svelte +```svelte twoslash @@ -110,20 +110,20 @@ You can pass a `transform` prop to modify the form data before submission. This == Vue -```vue +```vue twoslash - - + +
``` == React -```jsx +```jsx twoslash
@@ -177,7 +177,7 @@ You can set default values for form inputs using standard HTML attributes. Use < == React -```jsx +```jsx twoslash @@ -195,7 +195,7 @@ You can set default values for form inputs using standard HTML attributes. Use < == Svelte 4 -```svelte +```svelte twoslash @@ -213,7 +213,7 @@ You can set default values for form inputs using standard HTML attributes. Use < == Svelte 5 -```svelte +```svelte twoslash @@ -243,7 +243,7 @@ The `` component exposes reactive state and helper methods through its def == Vue -```vue +```vue twoslash