diff --git a/README.md b/README.md index 3a7e1cd..60a74f0 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,15 @@ # InertiaRailsContrib -A collection of extensions, developer tools, and the [community documentation](https://inertia-rails.netlify.app) for [Inertia's Rails adapter](https://github.com/inertiajs/inertia-rails). +A collection of extensions and developer tools for [Inertia's Rails adapter](https://github.com/inertiajs/inertia-rails). Built by Evil Martians +> Community documentation has been moved to the [Inertia Rails repository](https://github.com/inertiajs/inertia-rails). +> +> Please visit the official Inertia Rails documentation at https://inertia-rails.dev. + ## Installation Install the gem and add to the application's Gemfile by executing: diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts deleted file mode 100644 index 170800b..0000000 --- a/docs/.vitepress/config.mts +++ /dev/null @@ -1,162 +0,0 @@ -import { defineConfig } from "vitepress"; -import { tabsMarkdownPlugin } from "vitepress-plugin-tabs"; - -const title = "Inertia Rails"; -const description = "Community documentation for Inertia.js Rails adapter"; -const site = "https://inertia-rails.netlify.app"; -const image = `${site}/og_image.jpg`; - -// https://vitepress.dev/reference/site-config -export default defineConfig({ - title, - description, - - markdown: { - config(md) { - md.use(tabsMarkdownPlugin); - }, - }, - - head: [ - ["link", { rel: "icon", href: "/favicon.ico", sizes: "32x32" }], - ["link", { rel: "icon", href: "/icon.svg", type: "image/svg+xml" }], - - ["meta", { name: "twitter:card", content: "summary_large_image" }], - ["meta", { name: "twitter:site", content: site }], - ["meta", { name: "twitter:description", value: description }], - ["meta", { name: "twitter:image", content: image }], - - ["meta", { property: "og:type", content: "website" }], - ["meta", { property: "og:locale", content: "en_US" }], - ["meta", { property: "og:site", content: site }], - ["meta", { property: "og:site_name", content: title }], - ["meta", { property: "og:image", content: image }], - ["meta", { property: "og:description", content: description }], - ], - - themeConfig: { - // https://vitepress.dev/reference/default-theme-config - nav: [ - { text: "Home", link: "/" }, - { text: "Guide", link: "/guide" }, - { text: "Cookbook", link: "/cookbook/integrating-shadcn-ui" }, - { - text: "Links", - items: [ - { text: "Official Inertia.js docs", link: "https://inertiajs.com" }, - { - text: "Gems", - items: [ - { - text: "inertia_rails", - link: "https://github.com/inertiajs/inertia-rails", - }, - { - text: "inertia_rails-contrib", - link: "https://github.com/skryukov/inertia_rails-contrib", - }, - ], - }, - ], - }, - ], - - logo: "/logo.svg", - - sidebar: { - "/guide": [ - { - items: [ - { text: "Introduction", link: "/guide" }, - { text: "Demo app", link: "/guide/demo-application" }, - ], - }, - { - text: "Installation", - items: [ - { text: "Server-side", link: "/guide/server-side-setup" }, - { text: "Client-side", link: "/guide/client-side-setup" }, - ], - }, - { - text: "Core concepts", - items: [ - { text: "Who is it for", link: "/guide/who-is-it-for" }, - { text: "How it works", link: "/guide/how-it-works" }, - { text: "The protocol", link: "/guide/the-protocol" }, - ], - }, - { - text: "The basics", - items: [ - { text: "Pages", link: "/guide/pages" }, - { text: "Responses", link: "/guide/responses" }, - { text: "Redirects", link: "/guide/redirects" }, - { text: "Routing", link: "/guide/routing" }, - { text: "Title & meta", link: "/guide/title-and-meta" }, - { text: "Links", link: "/guide/links" }, - { text: "Manual visits", link: "/guide/manual-visits" }, - { text: "Forms", link: "/guide/forms" }, - { text: "File uploads", link: "/guide/file-uploads" }, - { text: "Validation", link: "/guide/validation" }, - { text: "Shared data", link: "/guide/shared-data" }, - ], - }, - { - text: "Advanced", - items: [ - { text: "Events", link: "/guide/events" }, - { text: "Testing", link: "/guide/testing" }, - { text: "Partial reloads", link: "/guide/partial-reloads" }, - { text: "Scroll management", link: "/guide/scroll-management" }, - { text: "Authentication", link: "/guide/authentication" }, - { text: "Authorization", link: "/guide/authorization" }, - { text: "CSRF protection", link: "/guide/csrf-protection" }, - { text: "Error handling", link: "/guide/error-handling" }, - { text: "Asset versioning", link: "/guide/asset-versioning" }, - { text: "Progress indicators", link: "/guide/progress-indicators" }, - { text: "Remembering state", link: "/guide/remembering-state" }, - { text: "Code splitting", link: "/guide/code-splitting" }, - { - text: "Server-side rendering", - link: "/guide/server-side-rendering", - }, - ], - }, - ], - "/cookbook": [ - { - items: [ - { - text: "Integrations", - items: [ - { text: "shadcn/ui", link: "/cookbook/integrating-shadcn-ui" }, - ], - }, - ], - }, - ], - }, - - search: { - provider: "algolia", - options: { - appId: "NFLARHZ4Q4", - apiKey: "5e79b6038b027b5bb342ea5a31d0a2e8", - indexName: "inertia-rails", - }, - }, - - editLink: { - pattern: - "https://github.com/skryukov/inertia_rails-contrib/edit/main/docs/:path", - text: "Edit this page on GitHub", - }, - - socialLinks: [ - { icon: "github", link: "https://github.com/inertiajs/inertia-rails" }, - { icon: "x", link: "https://x.com/inertiajs" }, - { icon: "discord", link: "https://discord.gg/inertiajs" }, - ], - }, -}); diff --git a/docs/.vitepress/theme/frameworksTabs.ts b/docs/.vitepress/theme/frameworksTabs.ts deleted file mode 100644 index 4868801..0000000 --- a/docs/.vitepress/theme/frameworksTabs.ts +++ /dev/null @@ -1,24 +0,0 @@ -const localStorageKey = "vitepress:tabsSharedState"; -const ls = typeof localStorage !== "undefined" ? localStorage : null; - -const getLocalStorageValue = (): Record => { - const rawValue = ls?.getItem(localStorageKey); - if (rawValue) { - try { - return JSON.parse(rawValue); - } catch {} - } - return {}; -}; - -const setLocalStorageValue = (v: Record) => { - if (!ls) return; - ls.setItem(localStorageKey, JSON.stringify(v)); -}; - -export const setupFrameworksTabs = () => { - const v = getLocalStorageValue(); - if (!v.frameworks) { - setLocalStorageValue({ frameworks: "React" }); - } -}; diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts deleted file mode 100644 index b21c9a1..0000000 --- a/docs/.vitepress/theme/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -// https://vitepress.dev/guide/custom-theme -import { h } from "vue"; -import type { Theme } from "vitepress"; -import DefaultTheme from "vitepress/theme"; -import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client"; -import { setupFrameworksTabs } from "./frameworksTabs"; -import "./style.css"; - -export default { - extends: DefaultTheme, - Layout: () => { - return h(DefaultTheme.Layout, null, { - // https://vitepress.dev/guide/extending-default-theme#layout-slots - }); - }, - enhanceApp({ app, router, siteData }) { - enhanceAppWithTabs(app); - }, - setup() { - setupFrameworksTabs(); - }, -} satisfies Theme; diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css deleted file mode 100644 index 83bf35e..0000000 --- a/docs/.vitepress/theme/style.css +++ /dev/null @@ -1,175 +0,0 @@ -/** - * Customize default theme styling by overriding CSS variables: - * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css - */ - -/** - * Colors - * - * Each colors have exact same color scale system with 3 levels of solid - * colors with different brightness, and 1 soft color. - * - * - `XXX-1`: The most solid color used mainly for colored text. It must - * satisfy the contrast ratio against when used on top of `XXX-soft`. - * - * - `XXX-2`: The color used mainly for hover state of the button. - * - * - `XXX-3`: The color for solid background, such as bg color of the button. - * It must satisfy the contrast ratio with pure white (#ffffff) text on - * top of it. - * - * - `XXX-soft`: The color used for subtle background such as custom container - * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors - * on top of it. - * - * The soft color must be semi transparent alpha channel. This is crucial - * because it allows adding multiple "soft" colors on top of each other - * to create a accent, such as when having inline code block inside - * custom containers. - * - * - `default`: The color used purely for subtle indication without any - * special meanings attched to it such as bg color for menu hover state. - * - * - `brand`: Used for primary brand colors, such as link text, button with - * brand theme, etc. - * - * - `tip`: Used to indicate useful information. The default theme uses the - * brand color for this by default. - * - * - `warning`: Used to indicate warning to the users. Used in custom - * container, badges, etc. - * - * - `danger`: Used to show error, or dangerous message to the users. Used - * in custom container, badges, etc. - * -------------------------------------------------------------------------- */ - -:root { - --vp-c-default-1: var(--vp-c-gray-1); - --vp-c-default-2: var(--vp-c-gray-2); - --vp-c-default-3: var(--vp-c-gray-3); - --vp-c-default-soft: var(--vp-c-gray-soft); - - --vp-c-brand-1: var(--vp-c-purple-1); - --vp-c-brand-2: var(--vp-c-purple-2); - --vp-c-brand-3: var(--vp-c-purple-3); - --vp-c-brand-soft: var(--vp-c-purple-soft); - - --vp-c-tip-1: var(--vp-c-brand-1); - --vp-c-tip-2: var(--vp-c-brand-2); - --vp-c-tip-3: var(--vp-c-brand-3); - --vp-c-tip-soft: var(--vp-c-brand-soft); - - --vp-c-warning-1: var(--vp-c-yellow-1); - --vp-c-warning-2: var(--vp-c-yellow-2); - --vp-c-warning-3: var(--vp-c-yellow-3); - --vp-c-warning-soft: var(--vp-c-yellow-soft); - - --vp-c-danger-1: var(--vp-c-red-1); - --vp-c-danger-2: var(--vp-c-red-2); - --vp-c-danger-3: var(--vp-c-red-3); - --vp-c-danger-soft: var(--vp-c-red-soft); -} - -/** - * Component: Button - * -------------------------------------------------------------------------- */ - -:root { - --vp-button-brand-border: transparent; - --vp-button-brand-text: var(--vp-c-white); - --vp-button-brand-bg: var(--vp-c-brand-3); - --vp-button-brand-hover-border: transparent; - --vp-button-brand-hover-text: var(--vp-c-white); - --vp-button-brand-hover-bg: var(--vp-c-brand-2); - --vp-button-brand-active-border: transparent; - --vp-button-brand-active-text: var(--vp-c-white); - --vp-button-brand-active-bg: var(--vp-c-brand-1); -} - -/** - * Component: Home - * -------------------------------------------------------------------------- */ - -:root { - --vp-home-hero-name-color: transparent; - --vp-home-hero-name-background: -webkit-linear-gradient( - 0deg, - #9553e9, - #6d74ed - ); - - --vp-home-hero-image-background-image: linear-gradient( - -45deg, - #9553e9 50%, - #6d74ed 50% - ); - --vp-home-hero-image-filter: blur(44px); -} - -@media (min-width: 640px) { - :root { - --vp-home-hero-image-filter: blur(56px); - } -} - -@media (min-width: 960px) { - :root { - --vp-home-hero-image-filter: blur(68px); - } -} - -/** - * Component: Custom Block - * -------------------------------------------------------------------------- */ - -:root { - --vp-custom-block-tip-border: transparent; - --vp-custom-block-tip-text: var(--vp-c-text-1); - --vp-custom-block-tip-bg: var(--vp-c-brand-soft); - --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); -} - -/** - * Component: Algolia - * -------------------------------------------------------------------------- */ - -.DocSearch { - --docsearch-primary-color: var(--vp-c-brand-1) !important; -} - -/** - * Component: Tabs - * -------------------------------------------------------------------------- */ - -.plugin-tabs { - background-color: initial !important; -} - -.plugin-tabs--tab-list { - background-color: var(--vp-code-block-bg); -} - -.plugin-tabs--content { - padding: 0 !important; -} - -.plugin-tabs--content div[class*="language-"] { - background-color: var(--vp-code-block-bg) !important; -} - -.plugin-tabs--content div[class*="language-"]:first-child { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; -} - -.plugin-tabs--content:has(> p:first-child) { - border-left: 2px solid var(--vp-c-divider) !important; - border-right: 2px solid var(--vp-c-divider) !important; - border-bottom: 2px solid var(--vp-c-divider) !important; - padding: 8px !important; -} - -.plugin-tabs--content:has(> p:first-child) p { - margin-top: 16px !important; - padding-left: 16px; -} diff --git a/docs/cookbook/integrating-shadcn-ui.md b/docs/cookbook/integrating-shadcn-ui.md deleted file mode 100644 index f80de12..0000000 --- a/docs/cookbook/integrating-shadcn-ui.md +++ /dev/null @@ -1,136 +0,0 @@ -# Integrating `shadcn/ui` - -This guide demonstrates how to integrate [shadcn/ui](https://ui.shadcn.com) - a collection of reusable React components - with your Inertia Rails application. - -## Getting Started in 5 Minutes - -If you're starting fresh, create a new Rails application with Inertia (or skip this step if you already have one): - -:::tabs key:languages - -== TypeScript - -```bash -rails new -JA shadcn-inertia-rails -cd shadcn-inertia-rails -bundle add inertia_rails-contrib - -rails generate inertia:install --framework=react --typescript --install-vite --install-tailwind --no-interactive -Installing Inertia's Rails adapter -... -``` - -== JavaScript - -```bash -rails new -JA shadcn-inertia-rails -cd shadcn-inertia-rails -bundle add inertia_rails-contrib - -rails generate inertia:install --framework=react --install-vite --install-tailwind --no-interactive -Installing Inertia's Rails adapter -... -``` - -::: - -> [!NOTE] -> You can also run `rails generate inertia:install` to run the installer interactively. -> Need more details on the initial setup? Check out our [server-side setup guide](/guide/server-side-setup.md). - -## Setting Up Path Aliases - -Let's configure our project to work seamlessly with `shadcn/ui`. Choose your path based on whether you're using TypeScript or JavaScript. - - -:::tabs key:languages - -== TypeScript - -You'll need to configure two files. First, update your `tsconfig.app.json`: - -```json5 -{ - "compilerOptions": { - // ... - "baseUrl": ".", - "paths": { - "@/*": [ - "./app/frontend/*" - ] - } - }, - // ... -} -``` - -Then, set up your `tsconfig.json` to match `shadcn/ui`'s requirements (note the `baseUrl` and `paths` properties are different from the `tsconfig.app.json`): - -```json5 -{ - //... - "compilerOptions": { - /* Required for shadcn-ui/ui */ - "baseUrl": "./app/frontend", - "paths": { - "@/*": [ - "./*" - ] - } - } -} -``` - -== JavaScript - -Using JavaScript? It's even simpler! Just create a `jsconfig.json`: - -```json -{ - "compilerOptions": { - "baseUrl": "./app/frontend", - "paths": { - "@/*": ["./*"] - } - } -} -``` - -::: - -## Initializing `shadcn/ui` - -Now you can initialize `shadcn/ui` with a single command: - -```bash -npx shadcn@latest init - -✔ Preflight checks. -✔ Verifying framework. Found Vite. -✔ Validating Tailwind CSS. -✔ Validating import alias. -✔ Which style would you like to use? › New York -✔ Which color would you like to use as the base color? › Neutral -✔ Would you like to use CSS variables for theming? … no / yes -✔ Writing components.json. -✔ Checking registry. -✔ Updating tailwind.config.js -✔ Updating app/frontend/entrypoints/application.css -✔ Installing dependencies. -✔ Created 1 file: - - app/frontend/lib/utils.js - -Success! Project initialization completed. -You may now add components. -``` - -You're all set! Want to try it out? Add your first component: - -```shell -npx shadcn@latest add button -``` - -Now you can import and use your new button component from `@/components/ui/button`. Happy coding! - -> [!NOTE] -> Check out the [`shadcn/ui` components gallery](https://ui.shadcn.com/docs/components/accordion) to explore all the beautiful components at your disposal. diff --git a/docs/guide/asset-versioning.md b/docs/guide/asset-versioning.md deleted file mode 100644 index 18f48e2..0000000 --- a/docs/guide/asset-versioning.md +++ /dev/null @@ -1,22 +0,0 @@ -# Asset versioning - -One common challenge when building single-page apps is refreshing site assets when they've been changed. Thankfully, Inertia makes this easy by optionally tracking the current version of your site assets. When an asset changes, Inertia will automatically make a full page visit instead of a XHR visit on the next request. - -## Configuration - -To enable automatic asset refreshing, you need to tell Inertia the current version of your assets. This can be any arbitrary string (letters, numbers, or a file hash), as long as it changes when your assets have been updated. - -```ruby -InertiaRails.configure do |config| - config.version = ViteRuby.digest # or any other versioning method -end - -# You can also use lazy evaluation -InertiaRails.configure do |config| - config.version = lambda { ViteRuby.digest } -end -``` - -## Cache busting - -Asset refreshing in Inertia works on the assumption that a hard page visit will trigger your assets to reload. However, Inertia doesn't actually do anything to force this. Typically this is done with some form of cache busting. For example, appending a version query parameter to the end of your asset URLs. diff --git a/docs/guide/authentication.md b/docs/guide/authentication.md deleted file mode 100644 index 0eafb2c..0000000 --- a/docs/guide/authentication.md +++ /dev/null @@ -1,5 +0,0 @@ -# Authentication - -One of the benefits of using Inertia is that you don't need a special authentication system such as OAuth to connect to your data provider (API). Also, since your data is provided via your controllers, and housed on the same domain as your JavaScript components, you don't have to worry about setting up CORS. - -Rather, when using Inertia, you can simply use whatever authentication system you like, such as solutions based on Rails' built-in `has_secure_password` method, or gems like [Devise](https://github.com/heartcombo/devise), [Sorcery](https://github.com/Sorcery/sorcery), [Authentication Zero](https://github.com/lazaronixon/authentication-zero), etc. diff --git a/docs/guide/authorization.md b/docs/guide/authorization.md deleted file mode 100644 index 07021b0..0000000 --- a/docs/guide/authorization.md +++ /dev/null @@ -1,28 +0,0 @@ -# Authorization - -When using Inertia, authorization is best handled server-side in your application's authorization policies. However, you may be wondering how to perform checks against your authorization policies from within your Inertia page components since you won't have access to your framework's server-side helpers. - -The simplest approach to solving this problem is to pass the results of your authorization checks as props to your page components. - -Here's an example of how you might do this in a Rails controller using the [Action Policy](https://github.com/palkan/action_policy) gem: - -```ruby -class UsersController < ApplicationController - def index - render inertia: 'Users/Index', props: { - can: { - create_user: allowed_to?(:create, User) - }, - users: User.all.map do |user| - user.as_json( - only: [:id, :first_name, :last_name, :email] - ).merge( - can: { - edit_user: allowed_to?(:edit, user) - } - ) - end - } - end -end -``` diff --git a/docs/guide/client-side-setup.md b/docs/guide/client-side-setup.md deleted file mode 100644 index 216f979..0000000 --- a/docs/guide/client-side-setup.md +++ /dev/null @@ -1,229 +0,0 @@ -# Client-side setup - -Once you have your [server-side framework configured](/guide/server-side-setup.md), you then need to setup your client-side framework. Inertia currently provides support for React, Vue, and Svelte. - -> [!NOTE] -> See [Rails generator](/guide/server-side-setup#rails-generator) for a quick way to setup Inertia in your Rails application. - -## Install dependencies - -First, install the Inertia client-side adapter corresponding to your framework of choice. - -:::tabs key:frameworks -== Vue 2 - -```shell -npm install @inertiajs/vue2 vue@^2 -``` - -== Vue 3 - -```shell -npm install @inertiajs/vue3 vue -``` - -== React - -```shell -npm install @inertiajs/react react react-dom -``` - -== Svelte - -```shell -npm install @inertiajs/svelte svelte -``` - -::: - -## Initialize the Inertia app - -Next, update your main JavaScript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component. - -:::tabs key:frameworks -== Vue 2 - -```js -// frontend/entrypoints/inertia.js -import Vue from 'vue' -import { createInertiaApp } from '@inertiajs/vue2' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - setup({ el, App, props, plugin }) { - Vue.use(plugin) - - new Vue({ - render: (h) => h(App, props), - }).$mount(el) - }, -}) -``` - -== Vue 3 - -```js -// frontend/entrypoints/inertia.js -import { createApp, h } from 'vue' -import { createInertiaApp } from '@inertiajs/vue3' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - setup({ el, App, props, plugin }) { - createApp({ render: () => h(App, props) }) - .use(plugin) - .mount(el) - }, -}) -``` - -== React - -```js -// frontend/entrypoints/inertia.js -import { createInertiaApp } from '@inertiajs/react' -import { createElement } from 'react' -import { createRoot } from 'react-dom/client' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) - return pages[`../pages/${name}.jsx`] - }, - setup({ el, App, props }) { - const root = createRoot(el) - root.render(createElement(App, props)) - }, -}) -``` - -== Svelte - -```js -// frontend/entrypoints/inertia.js -import { createInertiaApp } from '@inertiajs/svelte' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) - return pages[`../pages/${name}.svelte`] - }, - setup({ el, App, props }) { - new App({ target: el, props }) - }, -}) -``` - -::: - -The `setup` callback receives everything necessary to initialize the client-side framework, including the root Inertia `App` component. - -# Resolving components - -The `resolve` callback tells Inertia how to load a page component. It receives a page name (string), and returns a page component module. How you implement this callback depends on which bundler (Vite or Webpack) you're using. - -:::tabs key:frameworks -== Vue 2 - -```js -// Vite -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.vue', {eager: true}) - return pages[`../pages/${name}.vue`] - }, - // ... -}) - -// Webpacker/Shakapacker -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), - // ... -}) -``` - -== Vue 3 - -```js -// Vite -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - // ... -}) - -// Webpacker/Shakapacker -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), - // ... -}) -``` - -== React - -```js -// Vite -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.jsx', {eager: true}) - return pages[`../pages/${name}.jsx`] - }, - //... -}) - -// Webpacker/Shakapacker -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), - //... -}) -``` - -== Svelte - -```js -// Vite -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.svelte', {eager: true}) - return pages[`../pages/${name}.svelte`] - }, - //... -}) - -// Webpacker/Shakapacker -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}.svelte`), - //... -}) -``` - -::: - -By default we recommend eager loading your components, which will result in a single JavaScript bundle. However, if you'd like to lazy-load your components, see our [code splitting](/guide/code-splitting.md) documentation. - -## Defining a root element - -By default, Inertia assumes that your application's root template has a root element with an `id` of `app`. If your application's root element has a different `id`, you can provide it using the `id` property. - -```js -createInertiaApp({ - id: 'my-app', - // ... -}) -``` diff --git a/docs/guide/code-splitting.md b/docs/guide/code-splitting.md deleted file mode 100644 index c664251..0000000 --- a/docs/guide/code-splitting.md +++ /dev/null @@ -1,155 +0,0 @@ -# Code splitting - -Code splitting breaks apart the various pages of your application into smaller bundles, which are then loaded on demand when visiting new pages. This can significantly reduce the size of the initial JavaScript bundle loaded by the browser, improving the time to first render. - -While code splitting is helpful for very large projects, it does require extra requests when visiting new pages. Generally speaking, if you're able to use a single bundle, your app is going to feel snappier. - -To enable code splitting you'll need to tweak the resolve callback in your `createInertiaApp()` configuration, and how you do this is different depending on which bundler you're using. - -## Using Vite - -Vite enables code splitting (or lazy-loading as they call it) by default when using their `import.meta.glob()` function, so simply omit the `{ eager: true }` option, or set it to false, to disable eager loading. - -:::tabs key:frameworks -== Vue 2 - -```js -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.vue', {eager: true}) // [!code --] - return pages[`../pages/${name}.vue`] // [!code --] - const pages = import.meta.glob('../pages/**/*.vue') // [!code ++] - return pages[`../pages/${name}.vue`]() // [!code ++] - }, - //... -}) -``` - -== Vue 3 - -```js -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) // [!code --] - return pages[`../pages/${name}.vue`] // [!code --] - const pages = import.meta.glob('../pages/**/*.vue') // [!code ++] - return pages[`../pages/${name}.vue`]() // [!code ++] - }, - //... -}) -``` - -== React - -```js -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) // [!code --] - return pages[`../pages/${name}.jsx`] // [!code --] - const pages = import.meta.glob('../pages/**/*.jsx') // [!code ++] - return pages[`../pages/${name}.jsx`]() // [!code ++] - }, - //... -}) -``` - -== Svelte - -```js -// frontend/entrypoints/inertia.js -createInertiaApp({ - resolve: name => { - const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) // [!code --] - return pages[`../pages/${name}.svelte`] // [!code --] - const pages = import.meta.glob('../pages/**/*.svelte') // [!code ++] - return pages[`../pages/${name}.svelte`]() // [!code ++] - }, - //... -}) -``` - -::: - -## Using Webpacker/Shakapacker - -> [!WARNING] -> We recommend using [Vite Ruby](https://vite-ruby.netlify.app) for new projects. - -To use code splitting with Webpack, you will first need to enable [dynamic imports](https://github.com/tc39/proposal-dynamic-import) via a Babel plugin. Let's install it now. - -```shell -npm install @babel/plugin-syntax-dynamic-import -``` - -Next, create a `.babelrc` file in your project with the following configuration: - -```json -{ - "plugins": ["@babel/plugin-syntax-dynamic-import"] -} -``` - -Finally, update the `resolve` callback in your app's initialization code to use `import` instead of `require`. - -:::tabs key:frameworks -== Vue 2 - -```js -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), // [!code ii] - resolve: name => import(`../pages/${name}`), // [!code ++] - //... -}) -``` - -== Vue 3 - -```js -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), // [!code ii] - resolve: name => import(`../pages/${name}`), // [!code ++] - //... -}) -``` - -== React - -```js -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}`), // [!code ii] - resolve: name => import(`../pages/${name}`), // [!code ++] - //... -}) -``` - -== Svelte - -```js -// javascript/packs/inertia.js -createInertiaApp({ - resolve: name => require(`../pages/${name}.svelte`), // [!code ii] - resolve: name => import(`../pages/${name}.svelte`), // [!code ++] - //... -}) -``` - -::: - -You should also consider using cache busting to force browsers to load the latest version of your assets. To accomplish this, add the following configuration to your webpack configuration file. - -```js -// webpack.config.js -module.exports = { - //... - output: { - //... - chunkFilename: 'js/[name].js?id=[chunkhash]', - }, -} -``` diff --git a/docs/guide/csrf-protection.md b/docs/guide/csrf-protection.md deleted file mode 100644 index 81df703..0000000 --- a/docs/guide/csrf-protection.md +++ /dev/null @@ -1,94 +0,0 @@ -# CSRF protection - -## Making requests - -Inertia's Rails adapter automatically includes the proper CSRF token when making requests via Inertia or Axios. Therefore, **no additional configuration is required**. - -However, if you need to handle CSRF protection manually, one approach is to include the CSRF token as a prop on every response. You can then use the token when making Inertia requests. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', { - _token: this.$page.props.csrf_token, - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== Vue 3 - -```js -import { router, usePage } from '@inertiajs/vue3' - -const page = usePage() - -router.post('/users', { - _token: page.props.csrf_token, - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== React - -```js -import { router, usePage } from '@inertiajs/react' - -const props = usePage().props - -router.post('/users', { - _token: props.csrf_token, - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== Svelte - -```js -import { page, router } from '@inertiajs/svelte' - -router.post('/users', { - _token: $page.props.csrf_token, - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -::: - -You can even use Inertia's [shared data](/guide/shared-data.md) functionality to automatically include the `csrf_token` with each response. - -However, a better approach is to use the CSRF functionality already built into [axios](https://github.com/axios/axios) for this. Axios is the HTTP library that Inertia uses under the hood. - -Axios automatically checks for the existence of an `XSRF-TOKEN` cookie. If it's present, it will then include the token in an `X-XSRF-TOKEN` header for any requests it makes. - -The easiest way to implement this is using server-side middleware. Simply include the `XSRF-TOKEN` cookie on each response, and then verify the token using the `X-XSRF-TOKEN` header sent in the requests from axios. (That's basically what `inertia_rails` does). - -## Handling mismatches - -When a CSRF token mismatch occurs, Rails raises the `ActionController::InvalidAuthenticityToken` error. Since that isn't a valid Inertia response, the error is shown in a modal. - -Obviously, this isn't a great user experience. A better way to handle these errors is to return a redirect back to the previous page, along with a flash message that the page expired. This will result in a valid Inertia response with the flash message available as a prop which you can then display to the user. Of course, you'll need to share your [flash messages](/guide/shared-data.md#flash-messages) with Inertia for this to work. - -You may modify your application's exception handler to automatically redirect the user back to the page they were previously on while flashing a message to the session. To accomplish this, you may use the `rescue_from` method in your `ApplicationController`. - -```ruby -class ApplicationController < ActionController::Base - rescue_from ActionController::InvalidAuthenticityToken, with: :inertia_page_expired_error - - inertia_share flash: -> { flash.to_hash } - - private - - def inertia_page_expired_error - redirect_back_or_to('/', allow_other_host: false, notice: "The page expired, please try again.") - end -end -``` - -The end result is a much better experience for your users. Instead of seeing the error modal, the user is instead presented with a message that the page "expired" and are asked to try again. diff --git a/docs/guide/demo-application.md b/docs/guide/demo-application.md deleted file mode 100644 index cf9edde..0000000 --- a/docs/guide/demo-application.md +++ /dev/null @@ -1,23 +0,0 @@ -# Demo application - -We've setup a demo app for Inertia.js called [Ping CRM](https://demo.inertiajs.com/login). This application is built using Laravel and Vue. You can find the source code on [GitHub](https://github.com/inertiajs/pingcrm). - -> [!NOTE] -> The Ping CRM demo is hosted on Heroku and the database is reset every hour. Please be respectful when editing data. - -[![Ping CRM demo](/pingcrm.png)](https://demo.inertiajs.com/login) - -In addition to the Vue version of Ping CRM, we also maintain a Svelte version of the application, which you can find [on GitHub](https://github.com/inertiajs/pingcrm-svelte). - -## Third party - -Beyond our official demo app, Ping CRM has also been translated into numerous different languages and frameworks. - -- [Ruby on Rails/Vue](https://github.com/ledermann/pingcrm) by Georg Ledermann -- [Ruby on Rails/Vue SSR/Vite](https://github.com/ElMassimo/pingcrm-vite) by Máximo Mussini -- [Laravel/React](https://github.com/Landish/pingcrm-react) by Lado Lomidze -- [Laravel/Svelte](https://github.com/zgabievi/pingcrm-svelte) by Zura G]abievi -- [Laravel/Mithril.js](https://github.com/tbreuss/pingcrm-mithril) by Thomas Breuss -- [Yii 2/Vue](https://github.com/tbreuss/pingcrm-yii2) by Thomas Breuss -- [Symfony/Vue](https://github.com/aleksblendwerk/pingcrm-symfony) by Aleks Seltenreich -- [Clojure/React](https://github.com/prestancedesign/pingcrm-clojure) by Michaël Salihi diff --git a/docs/guide/error-handling.md b/docs/guide/error-handling.md deleted file mode 100644 index 05a19a7..0000000 --- a/docs/guide/error-handling.md +++ /dev/null @@ -1,167 +0,0 @@ -# Error handling - -## Development - -One of the advantages to working with a robust server-side framework is the built-in exception handling you get for free. The challenge is, if you're making an XHR request (which Inertia does) and you hit a server-side error, you're typically left digging through the network tab in your browser's devtools to diagnose the problem. - -Inertia solves this issue by showing all non-Inertia responses in a modal. This means you get the same beautiful error-reporting you're accustomed to, even though you've made that request over XHR. - -## Production - -In production you will want to return a proper Inertia error response instead of relying on the modal-driven error reporting that is present during development. To accomplish this, you'll need to update your framework's default exception handler to return a custom error page. - -When building Rails applications, you can accomplish this by using the `rescue_from` method in your `ApplicationController`. - -```ruby -class ApplicationController < ActionController::Base - rescue_from StandardError, with: :inertia_error_page - - private - - def inertia_error_page(exception) - raise exception if Rails.env.local? - - status = ActionDispatch::ExceptionWrapper.new(nil, exception).status_code - - render inertia: 'Error', props: { status: }, status: - end -end -``` - -You may have noticed we're returning an `Error` page component in the example above. You'll need to actually create this component, which will serve as the generic error page for your application. Here's an example error component you can use as a starting point. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -export default function ErrorPage({ status }) { - const title = - { - 503: 'Service Unavailable', - 500: 'Server Error', - 404: 'Page Not Found', - 403: 'Forbidden', - }[status] || 'Unexpected error' - - const description = { - 503: 'Sorry, we are doing some maintenance. Please check back soon.', - 500: 'Whoops, something went wrong on our servers.', - 404: 'Sorry, the page you are looking for could not be found.', - 403: 'Sorry, you are forbidden from accessing this page.', - }[status] - - return ( -
-

- {status}: {title} -

-
{description}
-
- ) -} -``` - -== Svelte - -```svelte - - -
-

{status}: {title}

-
{description}
-
-``` - -::: diff --git a/docs/guide/events.md b/docs/guide/events.md deleted file mode 100644 index 3afdfc7..0000000 --- a/docs/guide/events.md +++ /dev/null @@ -1,980 +0,0 @@ -# Events - -Inertia provides an event system that allows you to "hook into" the various lifecycle events of the library. - -## Registering listeners - -To register an event listener, use the `router.on()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -::: - -Under the hood, Inertia uses native browser events, so you can also interact with Inertia events using the typical event methods you may already be familiar with - just be sure to prepend `inertia:` to the event name. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -document.addEventListener('inertia:start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -document.addEventListener('inertia:start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -document.addEventListener('inertia:start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -document.addEventListener('inertia:start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -::: - -## Removing listeners - -When you register an event listener, Inertia automatically returns a callback that can be invoked to remove the event listener. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -let removeStartEventListener = router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) - -// Remove the listener... -removeStartEventListener() -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -let removeStartEventListener = router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) - -// Remove the listener... -removeStartEventListener() -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -let removeStartEventListener = router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) - -// Remove the listener... -removeStartEventListener() -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -let removeStartEventListener = router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) - -// Remove the listener... -removeStartEventListener() -``` - -::: - -Combined with hooks, you can automatically remove the event listener when components unmount. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -export default { - mounted() { - this.$once( - 'hook:destroyed', - router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) - }), - ) - }, -} -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' -import { onUnmounted } from 'vue' - -onUnmounted( - router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) - }), -) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' -import { useEffect } from 'react' - -useEffect(() => { - return router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) - }) -}, []) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' -import { onMount } from 'svelte' - -onMount(() => { - return router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) - }) -}) -``` - -::: - -Alternatively, if you're using native browser events, you can remove the event listener using `removeEventListener()`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -let startEventListener = (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -} - -document.addEventListener('inertia:start', startEventListener) - -// Remove the listener... -document.removeEventListener('inertia:start', startEventListener) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -let startEventListener = (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -} - -document.addEventListener('inertia:start', startEventListener) - -// Remove the listener... -document.removeEventListener('inertia:start', startEventListener) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -let startEventListener = (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -} - -document.addEventListener('inertia:start', startEventListener) - -// Remove the listener... -document.removeEventListener('inertia:start', startEventListener) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -let startEventListener = (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -} - -document.addEventListener('inertia:start', startEventListener) - -// Remove the listener... -document.removeEventListener('inertia:start', startEventListener) -``` - -::: - -## Cancelling events - -Some events, such as `before`, `invalid`, and `error`, support cancellation, allowing you to prevent Inertia's default behavior. Just like native events, the event will be cancelled if only one event listener calls `event.preventDefault()`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('before', (event) => { - if (!confirm('Are you sure you want to navigate away?')) { - event.preventDefault() - } -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('before', (event) => { - if (!confirm('Are you sure you want to navigate away?')) { - event.preventDefault() - } -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('before', (event) => { - if (!confirm('Are you sure you want to navigate away?')) { - event.preventDefault() - } -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('before', (event) => { - if (!confirm('Are you sure you want to navigate away?')) { - event.preventDefault() - } -}) -``` - -::: - -For convenience, if you register your event listener using `router.on()`, you can cancel the event by returning `false` from the listener. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -::: - -Note, browsers do not allow cancelling the native `popstate` event, so preventing forward and back history visits while using Inertia.js is not possible. - -## Before - -The `before` event fires when a request is about to be made to the server. This is useful for intercepting visits. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('before', (event) => { - console.log(`About to make a visit to ${event.detail.visit.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('before', (event) => { - console.log(`About to make a visit to ${event.detail.visit.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('before', (event) => { - console.log(`About to make a visit to ${event.detail.visit.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('before', (event) => { - console.log(`About to make a visit to ${event.detail.visit.url}`) -}) -``` - -::: - -The primary purpose of this event is to allow you to prevent a visit from happening. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('before', (event) => { - return confirm('Are you sure you want to navigate away?') -}) -``` - -::: - -## Start - -The `start` event fires when a request to the server has started. This is useful for displaying loading indicators. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('start', (event) => { - console.log(`Starting a visit to ${event.detail.visit.url}`) -}) -``` - -::: - -The `start` event is not cancelable. - -## Progress - -The `progress` event fires as progress increments during file uploads. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('progress', (event) => { - this.form.progress = event.detail.progress.percentage -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('progress', (event) => { - this.form.progress = event.detail.progress.percentage -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('progress', (event) => { - this.form.progress = event.detail.progress.percentage -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('progress', (event) => { - this.form.progress = event.detail.progress.percentage -}) -``` - -::: - -The `progress` event is not cancelable. - -## Success - -The `success` event fires on successful page visits, unless validation errors are present. However, this does not include history visits. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('success', (event) => { - console.log(`Successfully made a visit to ${event.detail.page.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('success', (event) => { - console.log(`Successfully made a visit to ${event.detail.page.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('success', (event) => { - console.log(`Successfully made a visit to ${event.detail.page.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('success', (event) => { - console.log(`Successfully made a visit to ${event.detail.page.url}`) -}) -``` - -::: - -The `success` event is not cancelable. - -## Error - -The `error` event fires when validation errors are present on "successful" page visits. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('error', (errors) => { - console.log(errors) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('error', (errors) => { - console.log(errors) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('error', (errors) => { - console.log(errors) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('error', (errors) => { - console.log(errors) -}) -``` - -::: - -The `error` event is not cancelable. - -## Invalid - -The invalid event fires when a non-Inertia response is received from the server, such as an HTML or vanilla JSON response. A valid Inertia response is a response that has the `X-Inertia` header set to `true` with a json payload containing [the page object](/guide/the-protocol.md#the-page-object). - -This event is fired for all response types, including `200`, `400`, and `500` response codes. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('invalid', (event) => { - console.log(`An invalid Inertia response was received.`) - console.log(event.detail.response) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('invalid', (event) => { - console.log(`An invalid Inertia response was received.`) - console.log(event.detail.response) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('invalid', (event) => { - console.log(`An invalid Inertia response was received.`) - console.log(event.detail.response) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('invalid', (event) => { - console.log(`An invalid Inertia response was received.`) - console.log(event.detail.response) -}) -``` - -::: - -You may cancel the `invalid` event to prevent Inertia from showing the non-Inertia response modal. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('invalid', (event) => { - event.preventDefault() - - // Handle the invalid response yourself... -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('invalid', (event) => { - event.preventDefault() - - // Handle the invalid response yourself... -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('invalid', (event) => { - event.preventDefault() - - // Handle the invalid response yourself... -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('invalid', (event) => { - event.preventDefault() - - // Handle the invalid response yourself... -}) -``` - -::: - -## Exception - -The `exception` event fires on unexpected XHR errors such as network interruptions. In addition, this event fires for errors generated when resolving page components. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('exception', (event) => { - console.log(`An unexpected error occurred during an Inertia visit.`) - console.log(event.detail.error) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('exception', (event) => { - console.log(`An unexpected error occurred during an Inertia visit.`) - console.log(event.detail.error) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('exception', (event) => { - console.log(`An unexpected error occurred during an Inertia visit.`) - console.log(event.detail.error) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('exception', (event) => { - console.log(`An unexpected error occurred during an Inertia visit.`) - console.log(event.detail.error) -}) -``` - -::: - -You may cancel the `exception` event to prevent the error from being thrown. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('exception', (event) => { - event.preventDefault() - // Handle the error yourself -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('exception', (event) => { - event.preventDefault() - // Handle the error yourself -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('exception', (event) => { - event.preventDefault() - // Handle the error yourself -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('exception', (event) => { - event.preventDefault() - // Handle the error yourself -}) -``` - -::: - -This event will _not_ fire for XHR requests that receive `400` and `500` level responses or for non-Inertia responses, as these situations are handled in other ways by Inertia. Please consult the [error handling](/guide/error-handling.md) documentation for more information. - -## Finish - -The `finish` event fires after an XHR request has completed for both "successful" and "unsuccessful" responses. This event is useful for hiding loading indicators. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('finish', (event) => { - NProgress.done() -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('finish', (event) => { - NProgress.done() -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('finish', (event) => { - NProgress.done() -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('finish', (event) => { - NProgress.done() -}) -``` - -::: - -The `finish` event is not cancelable. - -## Navigate - -The `navigate` event fires on successful page visits, as well as when navigating through history. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.on('navigate', (event) => { - console.log(`Navigated to ${event.detail.page.url}`) -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.on('navigate', (event) => { - console.log(`Navigated to ${event.detail.page.url}`) -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.on('navigate', (event) => { - console.log(`Navigated to ${event.detail.page.url}`) -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.on('navigate', (event) => { - console.log(`Navigated to ${event.detail.page.url}`) -}) -``` - -::: - -The `navigate` event is not cancelable. - -## Event callbacks - -In addition to the global events described throughout this page, Inertia also provides a number of [event callbacks](/guide/manual-visits.md#event-callbacks) that fire when manually making Inertia visits. diff --git a/docs/guide/file-uploads.md b/docs/guide/file-uploads.md deleted file mode 100644 index 5e588f1..0000000 --- a/docs/guide/file-uploads.md +++ /dev/null @@ -1,271 +0,0 @@ -# File uploads - -## FormData conversion - -When making Inertia requests that include files (even nested files), Inertia will automatically convert the request data into a `FormData` object. This conversion is necessary in order to submit a `multipart/form-data` request via XHR. - -If you would like the request to always use a `FormData` object regardless of whether a file is present in the data, you may provide the `forceFormData` option when making the request. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - forceFormData: true, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - forceFormData: true, -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.post('/users', data, { - forceFormData: true, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - forceFormData: true, -}) -``` - -::: - -You can learn more about the `FormData` interface via its [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/FormData). - -> [!WARNING] -> Prior to version 0.8.0, Inertia did not automatically convert requests to `FormData`. If you're using an Inertia release prior to this version, you will need to manually perform this conversion. - -## File upload example - -Let's examine a complete file upload example using Inertia. This example includes both a `name` text input and an `avatar` file input. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import { useForm } from '@inertiajs/react' - -const { data, setData, post, progress } = useForm({ - name: null, - avatar: null, -}) - -function submit(e) { - e.preventDefault() - post('/users') -} - -return ( -
- setData('name', e.target.value)} - /> - setData('avatar', e.target.files[0])} - /> - {progress && ( - - {progress.percentage}% - - )} - -
-) -``` - -== Svelte - -```svelte - - -
- - $form.avatar = e.target.files[0]} /> - {#if $form.progress} - - {$form.progress.percentage}% - - {/if} - -
-``` - -::: - -This example uses the [Inertia form helper](/guide/forms.md) for convenience, since the form helper provides easy access to the current upload progress. However, you are free to submit your forms using [manual Inertia visits](/guide/manual-visits.md) as well. - -## Multipart limitations - -Uploading files using a `multipart/form-data` request is not natively supported in some server-side frameworks when using the `PUT`, `PATCH`, or `DELETE` HTTP methods. The simplest workaround for this limitation is to simply upload files using a `POST` request instead. - -However, some frameworks, such as Laravel and Rails, support form method spoofing, which allows you to upload the files using `POST`, but have the framework handle the request as a `PUT` or `PATCH` request. This is done by including a `_method` attribute or a `X-HTTP-METHOD-OVERRIDE` header in the request. - -> [!NOTE] -> For more info see [`Rack::MethodOverride`](https://github.com/rack/rack/blob/main/lib/rack/method_override.rb). - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post(`/users/${user.id}`, { - _method: 'put', - avatar: form.avatar, -}) - -// or - -form.post(`/users/${user.id}`, { - headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' }, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post(`/users/${user.id}`, { - _method: 'put', - avatar: form.avatar, -}) - -// or - -form.post(`/users/${user.id}`, { - headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' }, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post(`/users/${user.id}`, { - _method: 'put', - avatar: form.avatar, -}) - -// or - -form.post(`/users/${user.id}`, { - headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' }, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post(`/users/${user.id}`, { - _method: 'put', - avatar: form.avatar, -}) - -// or - -form.post(`/users/${user.id}`, { - headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' }, -}) -``` - -::: diff --git a/docs/guide/forms.md b/docs/guide/forms.md deleted file mode 100644 index fb7d9d4..0000000 --- a/docs/guide/forms.md +++ /dev/null @@ -1,926 +0,0 @@ -# Forms - -## Submitting forms - -While it's possible to make classic HTML form submissions with Inertia, it's not recommended since they cause full-page reloads. Instead, it's better to intercept form submissions and then make the [request using Inertia](/guide/manual-visits.md). - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import { useState } from 'react' -import { router } from '@inertiajs/react' - -export default function Edit() { - const [values, setValues] = useState({ - first_name: '', - last_name: '', - email: '', - }) - - function handleChange(e) { - const key = e.target.id - const value = e.target.value - setValues((values) => ({ - ...values, - [key]: value, - })) - } - - function handleSubmit(e) { - e.preventDefault() - router.post('/users', values) - } - - return ( -
- - - - - - - -
- ) -} -``` - -== Svelte - -```svelte - - -
- - - - - - - - - - -
-``` - -::: - -As you may have noticed in the example above, when using Inertia, you don't typically need to inspect form responses client-side like you would when making XHR / fetch requests manually. - -Instead, your server-side route / controller typically issues a [redirect](/guide/redirects.md) response. And, Of course, there is nothing stopping you from redirecting the user right back to the page they were previously on. Using this approach, handling Inertia form submissions feels very similar to handling classic HTML form submissions. - -```ruby -class UsersController < ApplicationController - def create - user = User.new(user_params) - - if user.save - redirect_to users_url - else - redirect_to new_user_url, inertia: { errors: user.errors } - end - end - - private - - def user_params - params.require(:user).permit(:name, :email) - end -end -``` - -## Server-side validation - -Handling server-side validation errors in Inertia works a little different than handling errors from manual XHR / fetch requests. When making XHR / fetch requests, you typically inspect the response for a `422` status code and manually update the form's error state. - -However, when using Inertia, a `422` response is never returned by your server. Instead, as we saw in the example above, your routes / controllers will typically return a redirect response - much like a classic, full-page form submission. - -For a full discussion on handling and displaying [validation](/guide/validation.md) errors with Inertia, please consult the validation documentation. - -## Form helper - -Since working with forms is so common, Inertia includes a form helper designed to help reduce the amount of boilerplate code needed for handling typical form submissions. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import { useForm } from '@inertiajs/react' - -const { data, setData, post, processing, errors } = useForm({ - email: '', - password: '', - remember: false, -}) - -function submit(e) { - e.preventDefault() - post('/login') -} - -return ( -
- setData('email', e.target.value)} - /> - {errors.email &&
{errors.email}
} - setData('password', e.target.value)} - /> - {errors.password &&
{errors.password}
} - setData('remember', e.target.checked)} - />{' '} - Remember Me - -
-) -``` - -== Svelte - -```svelte - - -
- - {#if $form.errors.email} -
{$form.errors.email}
- {/if} - - {#if $form.errors.password} -
{$form.errors.password}
- {/if} - Remember Me - -
-``` - -::: - -To submit the form, you may use the `get`, `post`, `put`, `patch` and `delete` methods. - -:::tabs key:frameworks -== Vue 2 - -```js -form.submit(method, url, options) -form.get(url, options) -form.post(url, options) -form.put(url, options) -form.patch(url, options) -form.delete(url, options) -``` - -== Vue 3 - -```js -form.submit(method, url, options) -form.get(url, options) -form.post(url, options) -form.put(url, options) -form.patch(url, options) -form.delete(url, options) -``` - -== React - -```jsx -const { submit, get, post, put, patch, delete: destroy } = useForm({ ... }) - -submit(method, url, options) -get(url, options) -post(url, options) -put(url, options) -patch(url, options) -destroy(url, options) -``` - -== Svelte - -```js -$form.submit(method, url, options) -$form.get(url, options) -$form.post(url, options) -$form.put(url, options) -$form.patch(url, options) -$form.delete(url, options) -``` - -::: - -The submit methods support all of the typical [visit options](/guide/manual-visits.md), such as `preserveState`, `preserveScroll`, and event callbacks, which can be helpful for performing tasks on successful form submissions. For example, you might use the `onSuccess` callback to reset inputs to their original state. - -:::tabs key:frameworks -== Vue 2 - -```js -form.post('/profile', { - preserveScroll: true, - onSuccess: () => form.reset('password'), -}) -``` - -== Vue 3 - -```js -form.post('/profile', { - preserveScroll: true, - onSuccess: () => form.reset('password'), -}) -``` - -== React - -```jsx -const { post, reset } = useForm({ ... }) - -post('/profile', { -preserveScroll: true, -onSuccess: () => reset('password'), -}) -``` - -== Svelte - -```js -$form.post('/profile', { - preserveScroll: true, - onSuccess: () => $form.reset('password'), -}) -``` - -::: - -If you need to modify the form data before it's sent to the server, you can do so via the `transform()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -form - .transform((data) => ({ - ...data, - remember: data.remember ? 'on' : '', - })) - .post('/login') -``` - -== Vue 3 - -```js -form - .transform((data) => ({ - ...data, - remember: data.remember ? 'on' : '', - })) - .post('/login') -``` - -== React - -```jsx -const { transform } = useForm({ ... }) - -transform((data) => ({ - ...data, - remember: data.remember ? 'on' : '', -})) -``` - -== Svelte - -```js -$form - .transform((data) => ({ - ...data, - remember: data.remember ? 'on' : '', - })) - .post('/login') -``` - -::: - -You can use the `processing` property to track if a form is currently being submitted. This can be helpful for preventing double form submissions by disabling the submit button. - -:::tabs key:frameworks -== Vue 2 - -```vue - -``` - -== Vue 3 - -```vue - -``` - -== React - -```jsx -const { processing } = useForm({ ... }) - - -``` - -== Svelte - -```svelte - -``` - -::: - -If your form is uploading files, the current progress event is available via the `progress` property, allowing you to easily display the upload progress. - -:::tabs key:frameworks -== Vue 2 - -```vue - - {{ form.progress.percentage }}% - -``` - -== Vue 3 - -```vue - - {{ form.progress.percentage }}% - -``` - -== React - -```jsx -const { progress } = useForm({ ... }) - -{progress && ( - - {progress.percentage}% - -)} -``` - -== Svelte - -```svelte -{#if $form.progress} - - {$form.progress.percentage}% - -{/if} -``` - -::: - -If there are form validation errors, they are available via the `errors` property. When building Rails powered Inertia applications, form errors will automatically be populated when your application throws instances of `ActiveRecord::RecordInvalid`, such as when using `#save!`. - -:::tabs key:frameworks -== Vue 2 - -```vue -
{{ form.errors.email }}
-``` - -== Vue 3 - -```vue -
{{ form.errors.email }}
-``` - -== React - -```jsx -const { errors } = useForm({ ... }) - -{errors.email &&
{errors.email}
} -``` - -== Svelte - -```svelte -{#if $form.errors.email} -
{$form.errors.email}
-{/if} -``` - -::: - -> [!NOTE] -> For a more thorough discussion of form validation and errors, please consult the [validation documentation](/guide/validation.md). - -To determine if a form has any errors, you may use the `hasErrors` property. To clear form errors, use the `clearErrors()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -// Clear all errors... -form.clearErrors() - -// Clear errors for specific fields... -form.clearErrors('field', 'anotherfield') -``` - -== Vue 3 - -```js -// Clear all errors... -form.clearErrors() - -// Clear errors for specific fields... -form.clearErrors('field', 'anotherfield') -``` - -== React - -```jsx -const { clearErrors } = useForm({ ... }) - -// Clear all errors... -clearErrors() - -// Clear errors for specific fields... -clearErrors('field', 'anotherfield') -``` - -== Svelte - -```js -// Clear all errors... -$form.clearErrors() - -// Clear errors for specific fields... -$form.clearErrors('field', 'anotherfield') -``` - -::: - -If you're using a client-side input validation libraries or do client-side validation manually, you can set your own errors on the form using the `setErrors()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -// Set a single error... -form.setError('field', 'Your error message.') - -// Set multiple errors at once... -form.setError({ - foo: 'Your error message for the foo field.', - bar: 'Some other error for the bar field.', -}) -``` - -== Vue 3 - -```js -// Set a single error... -form.setError('field', 'Your error message.') - -// Set multiple errors at once... -form.setError({ - foo: 'Your error message for the foo field.', - bar: 'Some other error for the bar field.', -}) -``` - -== React - -```jsx -const { setError } = useForm({ ... }) - -// Set a single error... -setError('field', 'Your error message.'); - -// Set multiple errors at once... -setError({ - foo: 'Your error message for the foo field.', - bar: 'Some other error for the bar field.' -}); -``` - -== Svelte - -```js -// Set a single error -$form.setError('field', 'Your error message.') - -// Set multiple errors at once -$form.setError({ - foo: 'Your error message for the foo field.', - bar: 'Some other error for the bar field.', -}) -``` - -::: - -> [!NOTE] -> Unlike an actual form submission, the page's props remain unchanged when manually setting errors on a form instance. - -When a form has been successfully submitted, the `wasSuccessful` property will be `true`. In addition to this, forms have a `recentlySuccessful` property, which will be set to `true` for two seconds after a successful form submission. This property can be utilized to show temporary success messages. - -To reset the form's values back to their default values, you can use the `reset()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -// Reset the form... -form.reset() - -// Reset specific fields... -form.reset('field', 'anotherfield') -``` - -== Vue 3 - -```js -// Reset the form... -form.reset() - -// Reset specific fields... -form.reset('field', 'anotherfield') -``` - -== React - -```jsx -const { reset } = useForm({ ... }) - -// Reset the form... -reset() - -// Reset specific fields... -reset('field', 'anotherfield') -``` - -== Svelte - -```js -// Reset the form... -$form.reset() - -// Reset specific fields... -$form.reset('field', 'anotherfield') -``` - -::: - -If your form's default values become outdated, you can use the `defaults()` method to update them. Then, the form will be reset to the correct values the next time the `reset()` method is invoked. - -:::tabs key:frameworks -== Vue 2 - -```js -// Set the form's current values as the new defaults... -form.defaults() - -// Update the default value of a single field... -form.defaults('email', 'updated-default@example.com') - -// Update the default value of multiple fields... -form.defaults({ - name: 'Updated Example', - email: 'updated-default@example.com', -}) -``` - -== Vue 3 - -```js -// Set the form's current values as the new defaults... -form.defaults() - -// Update the default value of a single field... -form.defaults('email', 'updated-default@example.com') - -// Update the default value of multiple fields... -form.defaults({ - name: 'Updated Example', - email: 'updated-default@example.com', -}) -``` - -== React - -```jsx -const { setDefaults } = useForm({ ... }) - -// Set the form's current values as the new defaults... -setDefaults() - -// Update the default value of a single field... -setDefaults('email', 'updated-default@example.com') - -// Update the default value of multiple fields... -setDefaults({ - name: 'Updated Example', - email: 'updated-default@example.com', -}) -``` - -== Svelte - -```js -// Set the form's current values as the new defaults... -$form.defaults() - -// Update the default value of a single field... -$form.defaults('email', 'updated-default@example.com') - -// Change the default value of multiple fields... -$form.defaults({ - name: 'Updated Example', - email: 'updated-default@example.com', -}) -``` - -::: - -To determine if a form has any changes, you may use the `isDirty` property. - -:::tabs key:frameworks -== Vue 2 - -```vue -
There are unsaved form changes.
-``` - -== Vue 3 - -```vue -
There are unsaved form changes.
-``` - -== React - -```jsx -const { isDirty } = useForm({ ... }) - -{isDirty &&
There are unsaved form changes.
} -``` - -== Svelte - -```svelte -{#if $form.isDirty} -
There are unsaved form changes.
-{/if} -``` - -::: - -To cancel a form submission, use the `cancel()` method. - -:::tabs key:frameworks -== Vue 2 - -```vue -form.cancel() -``` - -== Vue 3 - -```vue -form.cancel() -``` - -== React - -```jsx -const { cancel } = useForm({ ... }) - -cancel() -``` - -== Svelte - -```svelte -$form.cancel() -``` - -::: - -To instruct Inertia to store a form's data and errors in [history state](/guide/remembering-state.md), you can provide a unique form key as the first argument when instantiating your form. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { useForm } from '@inertiajs/vue2' - -form: useForm('CreateUser', data) -form: useForm(`EditUser:${this.user.id}`, data) -``` - -== Vue 3 - -```vue -import { useForm } from '@inertiajs/vue3' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${user.id}`, data) -``` - -== React - -```jsx -import { useForm } from '@inertiajs/react' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${user.id}`, data) -``` - -== Svelte - -```svelte -import { useForm } from '@inertiajs/svelte' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${user.id}`, data) -``` - -::: - -## File uploads - -When making requests or form submissions that include files, Inertia will automatically convert the request data into a `FormData` object. - -For a more thorough discussion of file uploads, please consult the [file uploads documentation](/guide/file-uploads.md). - -## XHR / fetch submissions - -Using Inertia to submit forms works great for the vast majority of situations; however, in the event that you need more control over the form submission, you're free to make plain XHR or `fetch` requests instead using the library of your choice. diff --git a/docs/guide/how-it-works.md b/docs/guide/how-it-works.md deleted file mode 100644 index 2c71abe..0000000 --- a/docs/guide/how-it-works.md +++ /dev/null @@ -1,15 +0,0 @@ -# How it works - -With Inertia you build applications just like you've always done with your server-side web framework of choice. You use your framework's existing functionality for routing, controllers, middleware, authentication, authorization, data fetching, and more. - -However, Inertia replaces your application's view layer. Instead of using server-side rendering via PHP or Ruby templates, the views returned by your application are JavaScript page components. This allows you to build your entire frontend using React, Vue, or Svelte, while still enjoying the productivity of Laravel or your preferred server-side framework. - -As you might expect, simply creating your frontend in JavaScript doesn't give you a single-page application experience. If you were to click a link, your browser would make a full page visit, which would then cause your client-side framework to reboot on the subsequent page load. This is where Inertia changes everything. - -At its core, Inertia is essentially a client-side routing library. It allows you to make page visits without forcing a full page reload. This is done using the `` component, a light-weight wrapper around a normal anchor link. When you click an Inertia link, Inertia intercepts the click and makes the visit via XHR instead. You can even make these visits programmatically in JavaScript using `router.visit()`. - -When Inertia makes an XHR visit, the server detects that it's an Inertia visit and, instead of returning a full HTML response, it returns a JSON response with the JavaScript page component name and data (props). Inertia then dynamically swaps out the previous page component with the new page component and updates the browser's history state. - -**The end result is a silky smooth single-page experience. 🎉** - -To learn more about the nitty-gritty, technical details of how Inertia works under the hood, check out [the protocol page](/guide/the-protocol.md). diff --git a/docs/guide/index.md b/docs/guide/index.md deleted file mode 100644 index 7d13c4d..0000000 --- a/docs/guide/index.md +++ /dev/null @@ -1,23 +0,0 @@ -# Introduction - -Welcome to the community documentation for [inertia_rails](https://github.com/inertiajs/inertia-rails) adapter for [Ruby on Rails](https://rubyonrails.org/) and [Inertia.js](https://inertiajs.com/). - -## Why community documentation? - -The [official documentation for Inertia.js](https://inertiajs.com) is great, but it's not Rails-specific anymore (see the [legacy docs](https://legacy.inertiajs.com)). This documentation aims to fill in the gaps and provide Rails-specific examples and explanations. - -## JavaScript apps the monolith way - -Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith. - -Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love. - -Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! - -### Not a framework - -Inertia isn't a framework, nor is it a replacement for your existing server-side or client-side frameworks. Rather, it's designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. We currently have three official client-side adapters (React, Vue, and Svelte) and two server-side adapters (Laravel and Rails). - -### Next steps - -Want to learn a bit more before diving in? Check out the [who is it for](/guide/who-is-it-for.md) and [how it works](/guide/how-it-works.md) pages. Or, if you're ready to get started, jump right into the [installation instructions](/guide/server-side-setup.md). diff --git a/docs/guide/links.md b/docs/guide/links.md deleted file mode 100644 index 91370b1..0000000 --- a/docs/guide/links.md +++ /dev/null @@ -1,525 +0,0 @@ -# Links - -To create links to other pages within an Inertia app, you will typically use the Inertia `` component. This component is a light wrapper around a standard anchor `` link that intercepts click events and prevents full page reloads. This is [how Inertia provides a single-page app experience](/guide/how-it-works.md) once your application has been loaded. - -## Creating links - -To create an Inertia link, use the Inertia `` component. Any attributes you provide to this component will be proxied to the underlying HTML tag. - -:::tabs key:frameworks - -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Home -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Home -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - -Home -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Home - -Home -``` - -> [!TIP] -> The `use:inertia` directive can be applied to any HTML element. - -::: - -By default, Inertia renders links as anchor `` elements. However, you can change the tag using the `as` prop. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Logout - -// Renders as... - -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Logout - -// Renders as... - -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - -Logout - -// Renders as... - -``` - -== Svelte - -```svelte -import { inertia } from '@inertiajs/svelte' - - - -// Renders as... - -``` - -> [!NOTE] -> Svelte does not support dynamic elements yet, but you can use the `inertia` directive to achieve the same results. - -::: - -> [!WARNING] -> Creating `POST/PUT/PATCH/DELETE` anchor `` links is discouraged as it causes "Open Link in New Tab / Window" accessibility issues. Instead, consider using a more appropriate element, such as a ` -``` - -::: - -## Data - -When making `POST` or `PUT` requests, you may wish to add additional data to the request. You can accomplish this using the `data` prop. The provided data can be an `object` or `FormData` instance. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Save -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Save -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Save - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - - - -Save -``` - -::: - -## Custom headers - -The `headers` prop allows you to add custom headers to an Inertia link. However, the headers Inertia uses internally to communicate its state to the server take priority and therefore cannot be overwritten. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Save -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Save -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Save - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - - - -Save -``` - -::: - -## Browser history - -The `replace` prop allows you to specify the browser's history behavior. By default, page visits push (new) state (`window.history.pushState`) into the history; however, it's also possible to replace state (`window.history.replaceState`) by setting the `replace` prop to `true`. This will cause the visit to replace the current history state instead of adding a new history state to the stack. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Home -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Home -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Home - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Home - -Home -``` - -::: - -## State preservation - -You can preserve a page component's local state using the `preserveState` prop. This will prevent a page component from fully re-rendering. The `preserveState` prop is especially helpful on pages that contain forms, since you can avoid manually repopulating input fields and can also maintain a focused input. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - - - -Search -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - - - -Search -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - -Search -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - - - - - -Search -``` - -::: - -## Scroll preservation - -You can use the `preserveScroll` prop to prevent Inertia from automatically resetting the scroll position when making a page visit. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Home -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Home -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Home - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Home - -Home -``` - -::: - -For more information on managing scroll position, please consult the documentation on [scroll management](/guide/scroll-management). - -## Partial reloads - -The `only` prop allows you to specify that only a subset of a page's props (data) should be retrieved from the server on subsequent visits to that page. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Show active -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Show active -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Show active - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Show active - -Show active -``` - -::: - -For more information on this topic, please consult the complete documentation on [partial reloads](/guide/partial-reloads.md). - -## Active states - -It's often desirable to set an active state for navigation links based on the current page. This can be accomplished when using Inertia by inspecting the `page` object and doing string comparisons against the `page.url` and `page.component` properties. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -// URL exact match... -Users - -// Component exact match... -Users - -// URL starts with (/users, /users/create, /users/1, etc.)... -Users - -// Component starts with (Users/Index, Users/Create, Users/Show, etc.)... -Users -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -// URL exact match... -Users - -// Component exact match... -Users - -// URL starts with (/users, /users/create, /users/1, etc.)... -Users - -// Component starts with (Users/Index, Users/Create, Users/Show, etc.)... -Users -``` - -== React - -```jsx -import { usePage } from '@inertiajs/react' - -const { url, component } = usePage() - -// URL exact match... -Users - -// Component exact match... -Users - -// URL starts with (/users, /users/create, /users/1, etc.)... -Users - -// Component starts with (Users/Index, Users/Create, Users/Show, etc.)... -Users -``` - -== Svelte - -```svelte -import { page } from '@inertiajs/svelte' - -// URL exact match... -Users - -// Component exact match... -Users - -// URL starts with (/users, /users/create, /users/1, etc.)... -Users - -// Component starts with (Users/Index, Users/Create, Users/Show, etc.)... -Users -``` - -::: - -You can perform exact match comparisons (`===`), `startsWith()` comparisons (useful for matching a subset of pages), or even more complex comparisons using regular expressions. - -Using this approach, you're not limited to just setting class names. You can use this technique to conditionally render any markup on active state, such as different link text or even an SVG icon that represents the link is active. diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md deleted file mode 100644 index c705218..0000000 --- a/docs/guide/manual-visits.md +++ /dev/null @@ -1,1015 +0,0 @@ -# Manual visits - -In addition to [creating links](/guide/links.md), it's also possible to manually make Inertia visits / requests programmatically via JavaScript. This is accomplished via the `router.visit()` method. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { - method: 'get', - data: {}, - replace: false, - preserveState: false, - preserveScroll: false, - only: [], - headers: {}, - errorBag: null, - forceFormData: false, - onCancelToken: (cancelToken) => {}, - onCancel: () => {}, - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onFinish: (visit) => {}, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { - method: 'get', - data: {}, - replace: false, - preserveState: false, - preserveScroll: false, - only: [], - headers: {}, - errorBag: null, - forceFormData: false, - onCancelToken: (cancelToken) => {}, - onCancel: () => {}, - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onFinish: (visit) => {}, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { - method: 'get', - data: {}, - replace: false, - preserveState: false, - preserveScroll: false, - only: [], - headers: {}, - errorBag: null, - forceFormData: false, - onCancelToken: (cancelToken) => {}, - onCancel: () => {}, - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onFinish: (visit) => {}, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { - method: 'get', - data: {}, - replace: false, - preserveState: false, - preserveScroll: false, - only: [], - headers: {}, - errorBag: null, - forceFormData: false, - onCancelToken: (cancelToken) => {}, - onCancel: () => {}, - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onFinish: (visit) => {}, -}) -``` - -::: - -However, it's generally more convenient to use one of Inertia's shortcut request methods. These methods share all the same options as `router.visit()`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.get(url, data, options) -router.post(url, data, options) -router.put(url, data, options) -router.patch(url, data, options) -router.delete(url, options) -router.reload(options) // Uses the current URL -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.get(url, data, options) -router.post(url, data, options) -router.put(url, data, options) -router.patch(url, data, options) -router.delete(url, options) -router.reload(options) // Uses the current URL -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.get(url, data, options) -router.post(url, data, options) -router.put(url, data, options) -router.patch(url, data, options) -router.delete(url, options) -router.reload(options) // Uses the current URL -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.get(url, data, options) -router.post(url, data, options) -router.put(url, data, options) -router.patch(url, data, options) -router.delete(url, options) -router.reload(options) // Uses the current URL -``` - -::: - -The `reload()` method is a convenient, shorthand method that automatically visits the current page with `preserveState` and `preserveScroll` both set to `true`, making it the perfect method to invoke when you just want to reload the current page's data. - -## Method - -When making manual visits, you may use the `method` option to set the request's HTTP method to `get`, `post`, `put`, `patch` or `delete`. The default method is `get`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { method: 'post' }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { method: 'post' }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { method: 'post' }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { method: 'post' }) -``` - -::: - -> [!WARNING] -> Uploading files via `put` or `patch` is not supported in Rails. Instead, make the request via `post`, including a `_method` attribute or a `X-HTTP-METHOD-OVERRIDE` header set to `put` or `patch`. For more info see [`Rack::MethodOverride`](https://github.com/rack/rack/blob/main/lib/rack/method_override.rb). - -# Data - -You may use the `data` option to add data to the request. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit('/users', { - method: 'post', - data: { - name: 'John Doe', - email: 'john.doe@example.com', - }, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit('/users', { - method: 'post', - data: { - name: 'John Doe', - email: 'john.doe@example.com', - }, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit('/users', { - method: 'post', - data: { - name: 'John Doe', - email: 'john.doe@example.com', - }, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit('/users', { - method: 'post', - data: { - name: 'John Doe', - email: 'john.doe@example.com', - }, -}) -``` - -::: - -For convenience, the `get()`, `post()`, `put()`, and `patch()` methods all accept data as their second argument. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', { - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', { - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', { - name: 'John Doe', - email: 'john.doe@example.com', -}) -``` - -== Svelte - -```js - -``` - -import { router } from '@inertiajs/svelte' - -router.post('/users', { -name: 'John Doe', -email: 'john.doe@example.com', -}) -::: - -## Custom headers - -The `headers` option allows you to add custom headers to a request. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - headers: { - 'Custom-Header': 'value', - }, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - headers: { - 'Custom-Header': 'value', - }, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - headers: { - 'Custom-Header': 'value', - }, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - headers: { - 'Custom-Header': 'value', - }, -}) -``` - -::: - -> [!NOTE] -> The headers Inertia uses internally to communicate its state to the server take priority and therefore cannot be overwritten. - -## File uploads - -When making visits / requests that include files, Inertia will automatically convert the request data into a `FormData` object. If you would like the request to always use a `FormData` object, you may use the `forceFormData` option. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/companies', data, { - forceFormData: true, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/companies', data, { - forceFormData: true, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/companies', data, { - forceFormData: true, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/companies', data, { - forceFormData: true, -}) -``` - -::: - -For more information on uploading files, please consult the dedicated [file uploads](/guide/file-uploads.md) documentation. - -## Browser history - -When making visits, Inertia automatically adds a new entry into the browser history. However, it's also possible to replace the current history entry by setting the `replace` option to `true`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.get('/users', { search: 'John' }, { replace: true }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.get('/users', { search: 'John' }, { replace: true }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.get('/users', { search: 'John' }, { replace: true }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.get('/users', { search: 'John' }, { replace: true }) -``` - -::: - -> [!NOTE] -> Visits made to the same URL automatically set `replace` to `true`. - -## State preservation - -By default, page visits to the same page create a fresh page component instance. This causes any local state, such as form inputs, scroll positions, and focus states to be lost. - -However, in some situations, it's necessary to preserve the page component state. For example, when submitting a form, you need to preserve your form data in the event that form validation fails on the server. - - -For this reason, the `post`, `put`, `patch`, `delete`, and `reload` methods all set the `preserveState` option to `true` by default. - -You can instruct Inertia to preserve the component's state when using the `get` method by setting the `preserveState` option to `true`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.get('/users', { search: 'John' }, { preserveState: true }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.get('/users', { search: 'John' }, { preserveState: true }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.get('/users', { search: 'John' }, { preserveState: true }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.get('/users', { search: 'John' }, { preserveState: true }) -``` - -::: - -You can also lazily evaluate the `preserveState` option based on the response by providing a callback to the `preserveState` option. - -If you'd like to only preserve state if the response includes validation errors, set the `preserveState` option to `"errors"`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.get('/users', { search: 'John' }, { preserveState: 'errors' }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.get('/users', { search: 'John' }, { preserveState: 'errors' }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.get('/users', { search: 'John' }, { preserveState: 'errors' }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.get('/users', { search: 'John' }, { preserveState: 'errors' }) -``` - -::: - -You can also lazily evaluate the `preserveState` option based on the response by providing a callback. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - preserveState: (page) => page.props.someProp === 'value', -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - preserveState: (page) => page.props.someProp === 'value', -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - preserveState: (page) => page.props.someProp === 'value', -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - preserveState: (page) => page.props.someProp === 'value', -}) -``` - -::: - -## Scroll preservation - -When navigating between pages, Inertia mimics default browser behavior by automatically resetting the scroll position of the document body (as well as any [scroll regions](/guide/scroll-management.md#scroll-regions) you've defined) back to the top of the page. - -You can disable this behaviour by setting the `preserveScroll` option to `false`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { preserveScroll: false }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { preserveScroll: false }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { preserveScroll: false }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { preserveScroll: false }) -``` - -::: - -If you'd like to only preserve the scroll position if the response includes validation errors, set the `preserveScroll` option to `"errors"`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -::: - -You can also lazily evaluate the `preserveScroll` option based on the response by providing a callback. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -::: - -For more information regarding this feature, please consult the [scroll management](/guide/scroll-management.md) documentation. - -## Partial reloads - -The `only` option allows you to request a subset of the props (data) from the server on subsequent visits to the same page, thus making your application more efficient since it does not need to retrieve data that the page is not interested in refreshing. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit('/users', { search: 'John' }, { only: ['users'] }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit('/users', { search: 'John' }, { only: ['users'] }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit('/users', { search: 'John' }, { only: ['users'] }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit('/users', { search: 'John' }, { only: ['users'] }) -``` - -::: - -For more information on this feature, please consult the [partial reloads](/guide/partial-reloads.md) documentation. - -## Visit cancellation - -You can cancel a visit using a cancel token, which Inertia automatically generates and provides via the `onCancelToken()` callback prior to making the visit. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - onCancelToken: (cancelToken) => (this.cancelToken = cancelToken), -}) - -// Cancel the visit... -this.cancelToken.cancel() -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - onCancelToken: (cancelToken) => (this.cancelToken = cancelToken), -}) - -// Cancel the visit... -this.cancelToken.cancel() -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - onCancelToken: (cancelToken) => (this.cancelToken = cancelToken), -}) - -// Cancel the visit... -this.cancelToken.cancel() -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - onCancelToken: (cancelToken) => (this.cancelToken = cancelToken), -}) - -// Cancel the visit... -this.cancelToken.cancel() -``` - -::: - -The `onCancel()` and `onFinish()` event callbacks will be executed when a visit is cancelled. - -## Event callbacks - -In addition to Inertia's [global events](/guide/events.md), Inertia also provides a number of per-visit event callbacks. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onCancel: () => {}, - onFinish: (visit) => {}, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onCancel: () => {}, - onFinish: (visit) => {}, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onCancel: () => {}, - onFinish: (visit) => {}, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - onBefore: (visit) => {}, - onStart: (visit) => {}, - onProgress: (progress) => {}, - onSuccess: (page) => {}, - onError: (errors) => {}, - onCancel: () => {}, - onFinish: (visit) => {}, -}) -``` - -::: - -Returning `false` from the `onBefore()` callback will cause the visit to be cancelled. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.delete(`/users/${user.id}`, { - onBefore: () => confirm('Are you sure you want to delete this user?'), -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.delete(`/users/${user.id}`, { - onBefore: () => confirm('Are you sure you want to delete this user?'), -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.delete(`/users/${user.id}`, { - onBefore: () => confirm('Are you sure you want to delete this user?'), -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.delete(`/users/${user.id}`, { - onBefore: () => confirm('Are you sure you want to delete this user?'), -}) -``` - -::: - -It's also possible to return a promise from the `onSuccess()` and `onError()` callbacks. When doing so, the "finish" event will be delayed until the promise has resolved. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post(url, { - onSuccess: () => { - return Promise.all([this.doThing(), this.doAnotherThing()]) - }, - onFinish: (visit) => { - // This won't be called until doThing() - // and doAnotherThing() have finished. - }, -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post(url, { - onSuccess: () => { - return Promise.all([this.doThing(), this.doAnotherThing()]) - }, - onFinish: (visit) => { - // This won't be called until doThing() - // and doAnotherThing() have finished. - }, -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post(url, { - onSuccess: () => { - return Promise.all([this.doThing(), this.doAnotherThing()]) - }, - onFinish: (visit) => { - // This won't be called until doThing() - // and doAnotherThing() have finished. - }, -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post(url, { - onSuccess: () => { - return Promise.all([this.doThing(), this.doAnotherThing()]) - }, - onFinish: (visit) => { - // This won't be called until doThing() - // and doAnotherThing() have finished. - }, -}) -``` - -::: diff --git a/docs/guide/pages.md b/docs/guide/pages.md deleted file mode 100644 index 30b9c2f..0000000 --- a/docs/guide/pages.md +++ /dev/null @@ -1,576 +0,0 @@ -# Pages - -When building applications using Inertia, each page in your application typically has its own controller / route and a corresponding JavaScript component. This allows you to retrieve just the data necessary for that page - no API required. - -In addition, all of the data needed for the page can be retrieved before the page is ever rendered by the browser, eliminating the need for displaying "loading" states when users visit your application. - -## Creating pages - -Inertia pages are simply JavaScript components. If you have ever written a Vue, React, or Svelte component, you will feel right at home. As you can see in the example below, pages receive data from your application's controllers as props. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import Layout from '../Layout' -import { Head } from '@inertiajs/react' - -export default function Welcome({ user }) { - return ( - - -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

- - ) -} -``` - -== Svelte - -```svelte - - - - - Welcome - -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

- -``` - -::: - -Given the page above, you can render the page by returning an Inertia response from a controller or route. In this example, let's assume this page is stored at `app/frontend/pages/User/Show.(jsx|vue|svelte)` within a Rails application. - -```ruby -class UsersController < ApplicationController - def show - user = User.find(params[:id]) - - render inertia: 'User/Show', props: { user: } - end -end -``` - -See [the responses documentation](/guide/responses) for more information on how to return Inertia responses from your controllers. - -## Creating layouts - -While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a `` component. Here's an example of such a component: - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - -export default function Layout({ children }) { - return ( -
-
- Home - About - Contact -
-
{children}
-
- ) -} -``` - -== Svelte - -```svelte - - -
-
- Home - About - Contact -
-
- -
-
-``` - -::: - -As you can see, there is nothing Inertia specific within this template. This is just a typical component. - -## Persistent layouts - -While it's simple to implement layouts as children of page components, it forces the layout instance to be destroyed and recreated between visits. This means you cannot have persistent layout state when navigating between pages. - -For example, maybe you have an audio player on a podcast website that you want to continue playing as users navigate the site. Or, maybe you simply want to maintain the scroll position in your sidebar navigation between page visits. In these situations, the solution is to leverage Inertia's persistent layouts. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - - - -``` - -== React - -```jsx -import Layout from '../Layout' - -const Home = ({ user }) => { - return ( - <> -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

- - ) -} - -Home.layout = (page) => - -export default Home -``` - -== Svelte - -```svelte - - - - -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

-``` - -::: - -You can also create more complex layout arrangements using nested layouts. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.dev/macros/define-options.html) to define a layout within ` -``` - -== Vue 3 - -```vue - - - - - -``` - -If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.dev/macros/define-options.html) to define a layout within ` -``` - -== React - -```jsx -import SiteLayout from './SiteLayout' -import NestedLayout from './NestedLayout' - -const Home = ({ user }) => { - return ( - <> -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

- - ) -} - -Home.layout = (page) => ( - - - -) - -export default Home -``` - -== Svelte - -```svelte - - - - -

Welcome

-

Hello {user.name}, welcome to your first Inertia app!

-``` - -::: - -## Default layouts - -If you're using persistent layouts, you may find it convenient to define the default page layout in the `resolve()` callback of your application's main JavaScript file. - -:::tabs key:frameworks -== Vue 2 - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - let page = pages[`../pages/${name}.vue`] - page.default.layout = page.default.layout || Layout - return page - }, - // ... -}) -``` - -== Vue 3 - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - let page = pages[`../pages/${name}.vue`] - page.default.layout = page.default.layout || Layout - return page - }, - // ... -}) -``` - -== React - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) - let page = pages[`../pages/${name}.jsx`] - page.default.layout = - page.default.layout || ((page) => ) - return page - }, - // ... -}) -``` - -== Svelte - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) - let page = pages[`../pages/${name}.svelte`] - return { default: page.default, layout: page.layout || Layout } - }, - // ... -}) -``` - -::: - -This will automatically set the page layout to `Layout` if a layout has not already been set for that page. - -You can even go a step further and conditionally set the default page layout based on the page `name`, which is available to the `resolve()` callback. For example, maybe you don't want the default layout to be applied to your public pages. - -:::tabs key:frameworks -== Vue 2 - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - let page = pages[`../pages/${name}.vue`] - page.default.layout = name.startsWith('Public/') ? undefined : Layout - return page - }, - // ... -}) -``` - -== Vue 3 - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - let page = pages[`../pages/${name}.vue`] - page.default.layout = name.startsWith('Public/') ? undefined : Layout - return page - }, - // ... -}) -``` - -== React - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) - let page = pages[`../pages/${name}.jsx`] - page.default.layout = name.startsWith('Public/') - ? undefined - : (page) => - return page - }, - // ... -}) -``` - -== Svelte - -```js -// frontend/entrypoints/inertia.js -import Layout from '../Layout' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) - let page = pages[`../pages/${name}.svelte`] - return { - default: page.default, - layout: name.startsWith('Public/') ? undefined : Layout, - } - return page - }, - // ... -}) -``` - -::: diff --git a/docs/guide/partial-reloads.md b/docs/guide/partial-reloads.md deleted file mode 100644 index 40b7470..0000000 --- a/docs/guide/partial-reloads.md +++ /dev/null @@ -1,241 +0,0 @@ -# Partial reloads - -When making visits to the same page you are already on, it's not always necessary to re-fetch all of the page's data from the server. In fact, selecting only a subset of the data can be a helpful performance optimization if it's acceptable that some page data becomes stale. Inertia makes this possible via its "partial reload" feature. - -As an example, consider a "user index" page that includes a list of users, as well as an option to filter the users by their company. On the first request to the page, both the `users` and `companies` props are passed to the page component. However, on subsequent visits to the same page (maybe to filter the users), you can request only the `users` data from the server without requesting the `companies` data. Inertia will then automatically merge the partial data returned from the server with the data it already has in memory client-side. - -> [!NOTE] -> Partial reloads only work for visits made to the same page component. - -## Only certain props - -To perform a partial reload, use the `only` visit option to specify which data the server should return. This option should be an array of keys which correspond to the keys of the props. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { - only: ['users'], -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { - only: ['users'], -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.visit(url, { - only: ['users'], -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { - only: ['users'], -}) -``` - -::: - -## Except certain props - -> [!WARNING] -> The `except` option is not yet supported by the Inertia Rails. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { - except: ['users'], -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { - except: ['users'], -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.visit(url, { - except: ['users'], -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { - except: ['users'], -}) -``` - -::: - -In addition to the only visit option you can also use the except option to specify which data the server should exclude. This option should also be an array of keys which correspond to the keys of the props. - -## Router shorthand - -Since partial reloads can only be made to the same page component the user is already on, it almost always makes sense to just use the `router.reload()` method, which automatically uses the current URL. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { router } from '@inertiajs/vue2' - -router.reload({ only: ['users'] }) -``` - -== Vue 3 - -```vue -import { router } from '@inertiajs/vue3' - -router.reload({ only: ['users'] }) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.reload({ only: ['users'] }) -``` - -== Svelte - -```svelte -import { router } from '@inertiajs/svelte' - -router.reload({ only: ['users'] }) -``` - -::: - -## Using links - -It's also possible to perform partial reloads with Inertia links using the `only` property. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Show active -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Show active -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Show active - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Show active - -Show active -``` - -::: - -## Lazy data evaluation - -For partial reloads to be most effective, be sure to also use lazy data evaluation when returning props from your server-side routes or controllers. This can be accomplished by wrapping all optional page data in a lambda. - -```ruby -class UsersController < ApplicationController - def index - render inertia: 'Users/Index', props: { - users: -> { User.all }, - companies: -> { Company.all }, - } - end -end -``` - -When Inertia performs a request, it will determine which data is required and only then will it evaluate the closure. This can significantly increase the performance of pages that contain a lot of optional data. - -Additionally, Inertia provides an `InertiaRails.lazy` method to specify that a prop should never be included unless explicitly requested using the `only` option: - -```ruby -class UsersController < ApplicationController - def index - render inertia: 'Users/Index', props: { - users: InertiaRails.lazy(-> { User.all }), - } - end -end -``` - -Here's a summary of each approach: - -```ruby -class UsersController < ApplicationController - def index - render inertia: 'Users/Index', props: { - # ALWAYS included on standard visits - # OPTIONALLY included on partial reloads - # ALWAYS evaluated - users: User.all, - - # ALWAYS included on standard visits - # OPTIONALLY included on partial reloads - # ONLY evaluated when needed - users: -> { User.all }, - - # NEVER included on standard visits - # OPTIONALLY included on partial reloads - # ONLY evaluated when needed - users: InertiaRails.lazy(-> { User.all }), - } - end -end -``` diff --git a/docs/guide/progress-indicators.md b/docs/guide/progress-indicators.md deleted file mode 100644 index 35219af..0000000 --- a/docs/guide/progress-indicators.md +++ /dev/null @@ -1,336 +0,0 @@ -# Progress indicators - -Since Inertia requests are made via XHR, there would typically not be a browser loading indicator when navigating from one page to another. To solve this, Inertia displays a progress indicator at the top of the page whenever you make an Inertia visit. - -Of course, if you prefer, you can disable Inertia's default loading indicator and provide your own custom implementation. We'll discuss both approaches below. - -## Default - -Inertia's default progress indicator is a light-weight wrapper around the [NProgress](https://ricostacruz.com/nprogress/) library. You can customize it via the `progress` property of the `createInertiaApp()` function. - -```js -createInertiaApp({ - progress: { - // The delay after which the progress bar will appear, in milliseconds... - delay: 250, - - // The color of the progress bar... - color: '#29d', - - // Whether to include the default NProgress styles... - includeCSS: true, - - // Whether the NProgress spinner will be shown... - showSpinner: false, - }, - // ... -}) -``` - -You can disable Inertia's default loading indicator by setting the `progress` property to `false`. - -```js -createInertiaApp({ - progress: false, - // ... -}) -``` - -## Custom - -It's also possible to setup your own custom page loading indicators using [Inertia events](/guide/events.md). Let's explore how to do this using the [NProgress](https://ricostacruz.com/nprogress/) library as an example. - -First, disable Inertia's default loading indicator. - -```js -createInertiaApp({ - progress: false, - // ... -}) -``` - -Next, install the NProgress library. - -```shell -npm install nprogress -``` - -After installation, you'll need to add the [NProgress styles](https://github.com/rstacruz/nprogress/blob/master/nprogress.css) to your project. You can do this using a CDN hosted copy of the styles. - -```html - -``` - -Next, import both `NProgress` and the Inertia `router` into your application. - -:::tabs key:frameworks -== Vue 2 - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/vue2' -``` - -== Vue 3 - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/vue3' -``` - -== React - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/react' -``` - -== Svelte - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/svelte' -``` - -::: - -Next, let's add a `start` event listener. We'll use this listener to show the progress bar when a new Inertia visit begins. - -```js -router.on('start', () => NProgress.start()) -``` - -Then, let's add a `finish` event listener to hide the progress bar when the page visit finishes. - -```js -router.on('finish', () => NProgress.done()) -``` - -That's it! Now, as you navigate from one page to another, the progress bar will be added and removed from the page. - -### Handling cancelled visits - -While this custom progress implementation works great for page visits that finish properly, it would be nice to handle cancelled visits as well. First, for interrupted visits (those that get cancelled as a result of a new visit), the progress bar should simply be reset back to the start position. Second, for manually cancelled visits, the progress bar should be immediately removed from the page. - -We can accomplish this by inspecting the `event.detail.visit` object that's provided to the finish event. - -```js -router.on('finish', (event) => { - if (event.detail.visit.completed) { - NProgress.done() - } else if (event.detail.visit.interrupted) { - NProgress.set(0) - } else if (event.detail.visit.cancelled) { - NProgress.done() - NProgress.remove() - } -}) -``` - -### File upload progress - -Let's take this a step further. When files are being uploaded, it would be great to update the loading indicator to reflect the upload progress. This can be done using the `progress` event. - -```js -router.on('progress', (event) => { - if (event.detail.progress.percentage) { - NProgress.set((event.detail.progress.percentage / 100) * 0.9) - } -}) -``` - -Now, instead of the progress bar "trickling" while the files are being uploaded, it will actually update it's position based on the progress of the request. We limit the progress here to 90%, since we still need to wait for a response from the server. - -### Loading indicator delay - -The last thing we're going to implement is a loading indicator delay. It's often preferable to delay showing the loading indicator until a request has taken longer than 250-500 milliseconds. This prevents the loading indicator from appearing constantly on quick page visits, which can be visually distracting. - -To implement the delay behavior, we'll use the `setTimeout` and `clearTimeout` functions. Let's start by defining a variable to keep track of the timeout. - -```js -let timeout = null -``` - -Next, let's update the `start` event listener to start a new timeout that will show the progress bar after 250 milliseconds. - -```js -router.on('start', () => { - timeout = setTimeout(() => NProgress.start(), 250) -}) -``` - -Next, we'll update the `finish` event listener to clear any existing timeouts in the event that the page visit finishes before the timeout does. - -```js -router.on('finish', (event) => { - clearTimeout(timeout) - // ... -}) -``` - -In the `finish` event listener, we need to determine if the progress bar has actually started displaying progress, otherwise we'll inadvertently cause it to show before the timeout has finished. - -```js -router.on('finish', (event) => { - clearTimeout(timeout) - if (!NProgress.isStarted()) { - return - } - // ... -}) -``` - -And, finally, we need to do the same check in the `progress` event listener. - -```js -router.on('progress', event => { - if (!NProgress.isStarted()) { - return - } - // ... -} -``` - -That's it, you now have a beautiful custom page loading indicator! - -### Complete example - -For convenience, here is the full source code of the final version of our custom loading indicator. - -:::tabs key:frameworks -== Vue 2 - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/vue2' - -let timeout = null - -router.on('start', () => { - timeout = setTimeout(() => NProgress.start(), 250) -}) - -router.on('progress', (event) => { - if (NProgress.isStarted() && event.detail.progress.percentage) { - NProgress.set((event.detail.progress.percentage / 100) * 0.9) - } -}) - -router.on('finish', (event) => { - clearTimeout(timeout) - if (!NProgress.isStarted()) { - return - } else if (event.detail.visit.completed) { - NProgress.done() - } else if (event.detail.visit.interrupted) { - NProgress.set(0) - } else if (event.detail.visit.cancelled) { - NProgress.done() - NProgress.remove() - } -}) -``` - -== Vue 3 - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/vue3' - -let timeout = null - -router.on('start', () => { - timeout = setTimeout(() => NProgress.start(), 250) -}) - -router.on('progress', (event) => { - if (NProgress.isStarted() && event.detail.progress.percentage) { - NProgress.set((event.detail.progress.percentage / 100) * 0.9) - } -}) - -router.on('finish', (event) => { - clearTimeout(timeout) - if (!NProgress.isStarted()) { - return - } else if (event.detail.visit.completed) { - NProgress.done() - } else if (event.detail.visit.interrupted) { - NProgress.set(0) - } else if (event.detail.visit.cancelled) { - NProgress.done() - NProgress.remove() - } -}) -``` - -== React - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/react' - -let timeout = null - -router.on('start', () => { - timeout = setTimeout(() => NProgress.start(), 250) -}) - -router.on('progress', (event) => { - if (NProgress.isStarted() && event.detail.progress.percentage) { - NProgress.set((event.detail.progress.percentage / 100) * 0.9) - } -}) - -router.on('finish', (event) => { - clearTimeout(timeout) - if (!NProgress.isStarted()) { - return - } else if (event.detail.visit.completed) { - NProgress.done() - } else if (event.detail.visit.interrupted) { - NProgress.set(0) - } else if (event.detail.visit.cancelled) { - NProgress.done() - NProgress.remove() - } -}) -``` - -== Svelte - -```js -import NProgress from 'nprogress' -import { router } from '@inertiajs/svelte' - -let timeout = null - -router.on('start', () => { - timeout = setTimeout(() => NProgress.start(), 250) -}) - -router.on('progress', (event) => { - if (NProgress.isStarted() && event.detail.progress.percentage) { - NProgress.set((event.detail.progress.percentage / 100) * 0.9) - } -}) - -router.on('finish', (event) => { - clearTimeout(timeout) - if (!NProgress.isStarted()) { - return - } else if (event.detail.visit.completed) { - NProgress.done() - } else if (event.detail.visit.interrupted) { - NProgress.set(0) - } else if (event.detail.visit.cancelled) { - NProgress.done() - NProgress.remove() - } -}) -``` - -::: diff --git a/docs/guide/redirects.md b/docs/guide/redirects.md deleted file mode 100644 index 303a22f..0000000 --- a/docs/guide/redirects.md +++ /dev/null @@ -1,41 +0,0 @@ -# Redirects - -When making a non-GET Inertia request manually or via a `` element, you should ensure that you always respond with a proper Inertia redirect response. - -For example, if your controller is creating a new user, your "create" endpoint should return a redirect back to a standard `GET` endpoint, such as your user "index" page. Inertia will automatically follow this redirect and update the page accordingly. - -```ruby -class UsersController < ApplicationController - def create - user = User.new(user_params) - - if user.save - redirect_to users_url - else - redirect_to new_user_url, inertia: { errors: user.errors } - end - end - - private - - def user_params - params.require(:user).permit(:name, :email) - end -end -``` - -## 303 response code - -When redirecting after a `PUT`, `PATCH`, or `DELETE` request, you must use a `303` response code, otherwise the subsequent request will not be treated as a `GET` request. A `303` redirect is very similar to a `302` redirect; however, the follow-up request is explicitly changed to a `GET` request. - -If you're using one of our official server-side adapters, all redirects will automatically be converted to `303` redirects. - -## External redirects - -Sometimes it's necessary to redirect to an external website, or even another non-Inertia endpoint in your app while handling an Inertia request. This can be accomplished using a server-side initiated `window.location` visit via the `inertia_location` method. - -```ruby -inertia_location index_path -``` - -The `inertia_location` method will generate a `409 Conflict` response and include the destination URL in the `X-Inertia-Location` header. When this response is received client-side, Inertia will automatically perform a `window.location = url` visit. diff --git a/docs/guide/remembering-state.md b/docs/guide/remembering-state.md deleted file mode 100644 index 1a444eb..0000000 --- a/docs/guide/remembering-state.md +++ /dev/null @@ -1,312 +0,0 @@ -# Remembering state - -When navigating browser history, Inertia restores pages using prop data cached in history state. However, Inertia does not restore local page component state since this is beyond its reach. This can lead to outdated pages in your browser history. - -For example, if a user partially completes a form, then navigates away, and then returns back, the form will be reset and their work will be lost. - -To mitigate this issue, you can tell Inertia which local component state to save in the browser history. - -## Saving local state - -To save local component state to the history state, use the `remember` feature to tell Inertia which data it should remember. - -:::tabs key:frameworks -== Vue 2 - -```vue -{ // Option 1: Object... remember: { data: ['form'], }, // Option 2: Array... -remember: ['form'], // Option 3: String... remember: 'form', data() { return { -form: { first_name: null, last_name: null, // ... }, } }, } -``` - -== Vue 3 - -```vue -import { useRemember } from '@inertiajs/vue3' const form = useRemember({ -first_name: null, last_name: null, }) -``` - -== React - -```jsx -import { useRemember } from '@inertiajs/react' - -export default function Profile() { - const [formState, setFormState] = useRemember({ - first_name: null, - last_name: null, - // ... - }) - - // ... -} -``` - -== Svelte - -```svelte -import { remember } from '@inertiajs/svelte' - -let form = remember({ - first_name: null, - last_name: null, -}) - -// ... -``` - -::: - -Now, whenever your local `form` state changes, Inertia will automatically save this data to the history state and will also restore it on history navigation. - -## Multiple components - -If your page contains multiple components that use the remember functionality provided by Inertia, you need to provide a unique key for each component so that Inertia knows which data to restore to each component. - -:::tabs key:frameworks -== Vue 2 - -```js -{ - remember: { - data: ['form'], - key: 'Users/Create', - }, - data() { - return { - form: { - first_name: null, - last_name: null, - }, - } - }, -} -``` - -== Vue 3 - -```js -import { useRemember } from '@inertiajs/vue3' - -const form = useRemember( - { - first_name: null, - last_name: null, - }, - 'Users/Create', -) -``` - -== React - -```js -import { useRemember } from '@inertiajs/react' - -export default function Profile() { - const [formState, setFormState] = useRemember( - { - first_name: null, - last_name: null, - }, - 'Users/Create', - ) -} -``` - -== Svelte - -```js -import { page, remember } from '@inertiajs/svelte' - -let form = remember( - { - first_name: null, - last_name: null, - }, - 'Users/Create', -) -``` - -::: - -If you have multiple instances of the same component on the page using the remember functionality, be sure to also include a unique key for each component instance, such as a model identifier. - -:::tabs key:frameworks -== Vue 2 - -```js -{ - remember: { - data: ['form'], - key: 'Users/Create', - }, - data() { - return { - form: { - first_name: null, - last_name: null, - }, - } - }, -} -``` - -== Vue 3 - -```js -import { useRemember } from '@inertiajs/vue3' - -const props = defineProps({ user: Object }) - -const form = useRemember( - { - first_name: null, - last_name: null, - }, - `Users/Edit:${props.user.id}`, -) -``` - -== React - -```js -import { useRemember } from '@inertiajs/react' - -export default function Profile() { - const [formState, setFormState] = useRemember( - { - first_name: props.user.first_name, - last_name: props.user.last_name, - }, - `Users/Edit:${this.user.id}`, - ) -} -``` - -== Svelte - -```js -import { page, remember } from '@inertiajs/svelte' - -let form = remember( - { - first_name: $page.props.user.first_name, - last_name: $page.props.user.last_name, - }, - `Users/Edit:${$page.props.user.id}`, -) -``` - -::: - -## Form helper - -If you're using the Inertia [form helper](/guide/forms.md#form-helper), you can pass a unique form key as the first argument when instantiating your form. This will cause the form data and errors to automatically be remembered. - -:::tabs key:frameworks -== Vue 2 - -```js -{ - remember: { - data: ['form'], - key() { - return `Users/Edit:${this.user.id}` - } - }, - data() { - return { - form: { - first_name: this.user.first_name, - last_name: this.user.last_name, - }, - } - }, -} -``` - -== Vue 3 - -```js -import { useForm } from '@inertiajs/vue3' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${props.user.id}`, data) -``` - -== React - -```js -import { useForm } from '@inertiajs/react' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${user.id}`, data) -``` - -== Svelte - -```js -import { useForm } from '@inertiajs/svelte' - -const form = useForm('CreateUser', data) -const form = useForm(`EditUser:${user.id}`, data) -``` - -::: - -## Manually saving state - -The `remember` property in Vue 2, and the `useRemember` hook in Vue 3, React, and Svelte all watch for data changes and automatically save those changes to the history state. Then, Inertia will restore the data on page load. - -However, it's also possible to manage this manually using the underlying `remember()` and `restore()` methods in Inertia. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -// Save local component state to history state... -router.remember(data, 'my-key') - -// Restore local component state from history state... -let data = router.restore('my-key') -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -// Save local component state to history state... -router.remember(data, 'my-key') - -// Restore local component state from history state... -let data = router.restore('my-key') -``` - -== React - -```js -import { router } from '@inertiajs/react' - -// Save local component state to history state... -router.remember(data, 'my-key') - -// Restore local component state from history state... -let data = router.restore('my-key') -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -// Save local component state to history state... -router.remember(data, 'my-key') - -// Restore local component state from history state... -let data = router.restore('my-key') -``` - -::: diff --git a/docs/guide/responses.md b/docs/guide/responses.md deleted file mode 100644 index 0db475c..0000000 --- a/docs/guide/responses.md +++ /dev/null @@ -1,228 +0,0 @@ -# Responses - -## Creating responses - -Creating an Inertia response is simple. To get started, just use the `inertia` renderer in your controller methods, providing both the name of the [JavaScript page component](/guide/pages.md) that you wish to render, as well as any props (data) for the page. - -```ruby -class EventsController < ApplicationController - def show - event = Event.find(params[:id]) - - render inertia: 'Event/Show', props: { - event: event.as_json( - only: [:id, :title, :start_date, :description] - ) - } - end -end -``` - -Within Rails applications, the `Event/Show` page would typically correspond to the file located at `app/frontend/pages/Event/Show.(jsx|vue|svelte)`. - -> [!WARNING] -> To ensure that pages load quickly, only return the minimum data required for the page. Also, be aware that **all data returned from the controllers will be visible client-side**, so be sure to omit sensitive information. - -### Using instance variables as props - -Inertia enables the automatic passing of instance variables as props. This can be achieved by invoking the `use_inertia_instance_props` function in a controller or in a base controller from which other controllers inherit. - -```ruby -class EventsController < ApplicationController - use_inertia_instance_props - - def index - @events = Event.all - - render inertia: 'Events/Index' - end -end -``` - -This action automatically passes the `@events` instance variable as the `events` prop to the `Events/Index` page component. - -> [!NOTE] -> Manually providing any props for a response disables the instance props feature for that specific response. - -> [!NOTE] -> Instance props are only included if they are defined **after** the `use_inertia_instance_props` call, hence the order of `before_action` callbacks is crucial. - -### Automatically determine component name - -Rails conventions can be used to automatically render the correct page component by invoking `render inertia: true`: - -```ruby -class EventsController < ApplicationController - use_inertia_instance_props - - def index - @events = Event.all - - render inertia: true - end -end -``` -This renders the `app/frontend/pages/events/index.(jsx|vue|svelte)` page component and passes the `@events` instance variable as the `events` prop. - - -Setting the `default_render` configuration value to `true` establishes this as the default behavior: - -```ruby -InertiaRails.configure do |config| - config.default_render = true -end -``` - -```ruby -class EventsController < ApplicationController - use_inertia_instance_props - - def index - @events = Event.all - end -end -``` - -With this configuration, the `app/frontend/pages/events/index.(jsx|vue|svelte)` page component is rendered automatically, passing the `@events` instance variable as the `events` prop. - -## Root template data - -There are situations where you may want to access your prop data in your ERB template. For example, you may want to add a meta description tag, Twitter card meta tags, or Facebook Open Graph meta tags. You can access this data via the `page` method. - -```erb -# app/views/inertia.html.erb - -<% content_for(:head) do %> -"> -<% end %> - -
-``` - -Sometimes you may even want to provide data to the root template that will not be sent to your JavaScript page / component. This can be accomplished by passing the `view_data` option. - -```ruby -def show - event = Event.find(params[:id]) - - render inertia: 'Event', props: { event: }, view_data: { meta: event.meta } -end -``` - -You can then access this variable like a regular local variable. - -```erb -# app/views/inertia.html.erb - -<% content_for(:head) do %> -"> -<% end %> - -
-``` - -## Rails generators - -Gem `inertia_rails-contrib` provides a number of generators to help you get started with Inertia in your Rails application. You can generate controllers or use scaffolds to create a new resource with Inertia responses. - -### Scaffold generator - -To create a resource with Inertia responses, execute the following command in the terminal: - -```bash -bin/rails generate inertia:scaffold ModelName field1:type field2:type -``` - -Example output: - -```bash -$ bin/rails generate inertia:scaffold Post title:string body:text - invoke active_record - create db/migrate/20240611123952_create_posts.rb - create app/models/post.rb - invoke test_unit - create test/models/post_test.rb - create test/fixtures/posts.yml - invoke resource_route - route resources :posts - invoke scaffold_controller - create app/controllers/posts_controller.rb - invoke inertia_templates - create app/frontend/pages/Post - create app/frontend/pages/Post/Index.svelte - create app/frontend/pages/Post/Edit.svelte - create app/frontend/pages/Post/Show.svelte - create app/frontend/pages/Post/New.svelte - create app/frontend/pages/Post/Form.svelte - create app/frontend/pages/Post/Post.svelte - invoke resource_route - invoke test_unit - create test/controllers/posts_controller_test.rb - create test/system/posts_test.rb - invoke helper - create app/helpers/posts_helper.rb - invoke test_unit -``` - -#### Tailwind CSS integration - -Gem `inertia_rails-contrib` tries to detect the presence of Tailwind CSS in the application and generate the templates accordingly. If you want to specify templates type, use the `--inertia-templates` option: - -- `inertia_templates` - default -- `inertia_tw_templates` - Tailwind CSS - -### Controller generator - -To create a controller with an Inertia response, execute the following command in the terminal: - -```bash -bin/rails generate inertia:controller ControllerName action1 action2 -``` - -Example output: - -```bash -$ bin/rails generate inertia:controller pages welcome next_steps - create app/controllers/pages_controller.rb - route get 'pages/welcome' - get 'pages/next_steps' - invoke test_unit - create test/controllers/pages_controller_test.rb - invoke helper - create app/helpers/pages_helper.rb - invoke test_unit - invoke inertia_templates - create app/frontend/pages/Pages - create app/frontend/pages/Pages/Welcome.jsx - create app/frontend/pages/Pages/NextSteps.jsx -``` - -### Customizing the generator templates - -Rails generators allow templates customization. For example, to customize the controller generator view template, create a file `lib/templates/inertia_templates/controller/react/view.jsx.tt`: - -```jsx -export default function <%= @action.camelize %>() { - return ( -

Hello from my new default template

- ); -} -``` - -You can find the default templates in the gem's source code: - -- [Default controller generator templates](https://github.com/skryukov/inertia_rails-contrib/tree/main/lib/generators/inertia_templates/controller/templates) -- [Default scaffold generator templates](https://github.com/skryukov/inertia_rails-contrib/tree/main/lib/generators/inertia_templates/scaffold/templates) -- [Tailwind controller generator templates](https://github.com/skryukov/inertia_rails-contrib/tree/main/lib/generators/inertia_tw_templates/controller/templates) -- [Tailwind scaffold generator templates](https://github.com/skryukov/inertia_rails-contrib/tree/main/lib/generators/inertia_tw_templates/scaffold/templates) - -> [!TIP] -> You can also replace the whole generator with your own implementation. See the [Rails documentation](https://guides.rubyonrails.org/generators.html#overriding-rails-generators) for more information. - -## Maximum response size - -To enable client-side history navigation, all Inertia server responses are stored in the browser's history state. However, keep in mind that some browsers impose a size limit on how much data can be saved within the history state. - -For example, [Firefox](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) has a size limit of 640k characters and throws a `NS_ERROR_ILLEGAL_VALUE` error if you exceed this limit. Typically, this is much more data than you'll ever practically need when building applications. diff --git a/docs/guide/routing.md b/docs/guide/routing.md deleted file mode 100644 index 9899e96..0000000 --- a/docs/guide/routing.md +++ /dev/null @@ -1,38 +0,0 @@ -# Routing - -## Defining routes - -When using Inertia, all of your application's routes are defined server-side. This means that you don't need Vue Router or React Router. Instead, you can simply define Rails routes and return Inertia responses from those routes. - -## Shorthand routes - -If you have a page that doesn't need a corresponding controller method, like an "FAQ" or "about" page, you can route directly to a component via the `inertia` method. - -```ruby -inertia 'about' => 'AboutComponent' -``` - -## Generating URLs - -Some server-side frameworks allow you to generate URLs from named routes. However, you will not have access to those helpers client-side. Here are a couple ways to still use named routes with Inertia. - -The first option is to generate URLs server-side and include them as props. Notice in this example how we're passing the `edit_url` and `create_url` to the `Users/Index` component. - -```ruby -class UsersController < ApplicationController - def index - render inertia: 'Users/Index', props: { - users: User.all.map do |user| - user.as_json( - only: [ :id, :name, :email ] - ).merge( - edit_url: edit_user_path(user) - ) - end, - create_url: new_user_path - } - end -end -``` - -Another option is to use the [`js_from_routes`](https://js-from-routes.netlify.app) gem, that makes named, server-side routes available on the client via a autogenerated helpers. diff --git a/docs/guide/scroll-management.md b/docs/guide/scroll-management.md deleted file mode 100644 index 2969f22..0000000 --- a/docs/guide/scroll-management.md +++ /dev/null @@ -1,181 +0,0 @@ -# Scroll management - -## Scroll resetting - -When navigating between pages, Inertia mimics default browser behavior by automatically resetting the scroll position of the document body (as well as any [scroll regions](#scroll-regions) you've defined) back to the top. - -In addition, Inertia keeps track of the scroll position of each page and automatically restores that scroll position as you navigate forward and back in history. - -## Scroll preservation - -Sometimes it's desirable to prevent the default scroll resetting when making visits. You can disable this behaviour by setting the `preserveScroll` option to `false`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { preserveScroll: false }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { preserveScroll: false }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { preserveScroll: false }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { preserveScroll: false }) -``` - -::: - -If you'd like to only preserve the scroll position if the response includes validation errors, set the `preserveScroll` option to `"errors"`. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.visit(url, { preserveScroll: 'errors' }) -``` - -::: - -You can also lazily evaluate the `preserveScroll` option based on the response by providing a callback. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== React - -```js -import { router } from '@inertiajs/react' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/users', data, { - preserveScroll: (page) => page.props.someProp === 'value', -}) -``` - -::: - -When using an [Inertia link](/guide/links), you can preserve the scroll position using the `preserveScroll` prop. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Link } from '@inertiajs/vue2' - -Home -``` - -== Vue 3 - -```vue -import { Link } from '@inertiajs/vue3' - -Home -``` - -== React - -```jsx -import { Link } from '@inertiajs/react' - - - Home - -``` - -== Svelte - -```svelte -import { inertia, Link } from '@inertiajs/svelte' - -Home - -Home -``` - -::: - -## Scroll regions - -If your app doesn't use document body scrolling, but instead has scrollable elements (using the `overflow` CSS property), scroll resetting will not work. - -In these situations, you must tell Inertia which scrollable elements to manage by adding the `scroll-region` attribute to the element. - -```html -
- -
-``` diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md deleted file mode 100644 index 802a07e..0000000 --- a/docs/guide/server-side-rendering.md +++ /dev/null @@ -1,283 +0,0 @@ -# Server-side Rendering (SSR) - -Server-side rendering pre-renders your JavaScript pages on the server, allowing your visitors to receive fully rendered HTML when they visit your application. Since fully rendered HTML is served by your application, it's also easier for search engines to index your site. - -> [!NOTE] -> Server-side rendering uses Node.js to render your pages in a background process; therefore, Node must be available on your server for server-side rendering to function properly. - -## Install dependencies - -First, install the additional dependencies required for server-side rendering. This is only necessary for the Vue adapters, so you can skip this step if you're using React or Svelte. - -:::tabs key:frameworks -== Vue 2 - -```shell -npm install vue-server-renderer -``` - -== Vue 3 - -```shell -npm install @vue/server-renderer -``` - -== React - -```shell -// No additional dependencies required -``` - -== Svelte - -```shell -// No additional dependencies required -``` - -::: - -## Add server entry-point - -Next, we'll create a `app/frontend/ssr/ssr.js` file within the Rails project that will serve as the SSR entry point. - -This file is going to look very similar to your regular inertia initialization file, except it's not going to run in the browser, but rather in Node.js. Here's a complete example. - -:::tabs key:frameworks -== Vue 2 - -```js -import { createInertiaApp } from '@inertiajs/vue2' -import createServer from '@inertiajs/vue2/server' -import Vue from 'vue' -import { createRenderer } from 'vue-server-renderer' - -createServer((page) => - createInertiaApp({ - page, - render: createRenderer().renderToString, - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - setup({ App, props, plugin }) { - Vue.use(plugin) - return new Vue({ - render: (h) => h(App, props), - }) - }, - }), -) -``` - -== Vue 3 - -```js -import { createInertiaApp } from '@inertiajs/vue3' -import createServer from '@inertiajs/vue3/server' -import { renderToString } from '@vue/server-renderer' -import { createSSRApp, h } from 'vue' - -createServer((page) => - createInertiaApp({ - page, - render: renderToString, - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - setup({ App, props, plugin }) { - return createSSRApp({ - render: () => h(App, props), - }).use(plugin) - }, - }), -) -``` - -== React - -```js -import { createInertiaApp } from '@inertiajs/react' -import createServer from '@inertiajs/react/server' -import ReactDOMServer from 'react-dom/server' - -createServer((page) => - createInertiaApp({ - page, - render: ReactDOMServer.renderToString, - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) - return pages[`../pages/${name}.jsx`] - }, - setup: ({ App, props }) => , - }), -) -``` - -== Svelte - -```js -import { createInertiaApp } from '@inertiajs/svelte' -import createServer from '@inertiajs/svelte/server' - -const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) - -createServer((page) => - createInertiaApp({ - page, - resolve: (name) => { - return pages[`../pages/${name}.svelte`] - }, - }), -) -``` - -::: - -When creating this file, be sure to add anything that's missing from your regular initialization file that makes sense to run in SSR mode, such as plugins or custom mixins. - -## Setup Vite Ruby - -Next, we need to update our Vite configuration to build our new `ssr.js` file. We can do this by adding a `ssrBuildEnabled` property to Ruby Vite plugin configuration in the `config/vite.json` file. - -```json - "production": { - "ssrBuildEnabled": true // [!code ++] - } -``` - -> [!NOTE] -> For more available properties see the [Ruby Vite documentation](https://vite-ruby.netlify.app/config/#ssr-options-experimental). - -## Enable SSR in the Inertia's Rails adapter - -```ruby -InertiaRails.configure do |config| - config.ssr_enabled = ViteRuby.config.ssr_build_enabled -end -``` - -Now you can build your server-side bundle. - -```shell -bin/vite build --ssr -``` - -## Running the SSR server - -Now that you have built both your client-side and server-side bundles, you should be able run the Node-based Inertia SSR server using the following command. - -```shell -bin/vite ssr -``` - -With the server running, you should be able to access your app within the browser with server-side rendering enabled. In fact, you should be able to disable JavaScript entirely and still navigate around your application. - -## Client side hydration - -Since your website is now being server-side rendered, you can instruct your client to "hydrate" the static markup and make it interactive instead of re-rendering all the HTML that we just generated. - -To enable client-side hydration, update your initialization file: - -:::tabs key:frameworks -== Vue 2 - -```js -// No changes required -``` - -== Vue 3 - -```js -// frontend/entrypoints/inertia.js -import { createApp, h } from 'vue' // [!code --] -import { createSSRApp, h } from 'vue' // [!code ++] -import { createInertiaApp } from '@inertiajs/vue3' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) - return pages[`../pages/${name}.vue`] - }, - setup({ el, App, props, plugin }) { - createApp({ render: () => h(App, props) }) // [!code --] - createSSRApp({ render: () => h(App, props) }) // [!code ++] - .use(plugin) - .mount(el) - }, -}) -``` - -== React - -```js -// frontend/entrypoints/inertia.js -import { createInertiaApp } from '@inertiajs/react' -import { createRoot } from 'react-dom/client' // [!code --] -import { hydrateRoot } from 'react-dom/client' // [!code ++] - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) - return pages[`../pages/${name}.jsx`] - }, - setup({ el, App, props }) { - createRoot(el).render() // [!code --] - hydrateRoot(el, ) // [!code ++] - }, -}) -``` - -== Svelte - -```js -import { svelte } from '@sveltejs/vite-plugin-svelte' -import laravel from 'laravel-vite-plugin' -import { defineConfig } from 'vite' - -export default defineConfig({ - plugins: [ - laravel.default({ - input: ['resources/css/app.css', 'resources/js/app.js'], - ssr: 'resources/js/ssr.js', - refresh: true, - }), - svelte(), // [!code --] - svelte({ - // [!code ++] - compilerOptions: { - // [!code ++] - hydratable: true, // [!code ++] - }, // [!code ++] - }), // [!code ++] - ], -}) -``` - -You'll also need to enable hydration in your initialization file: - -```js -// frontend/entrypoints/inertia.js -import { createInertiaApp } from '@inertiajs/svelte' - -createInertiaApp({ - resolve: (name) => { - const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) - return pages[`../pages/${name}.svelte`] - }, - setup({ el, App, props }) { - // [!code --] - new App({ target: el, props }) // [!code --] - }, // [!code --] - setup({ el, App }) { - // [!code ++] - new App({ target: el, hydrate: true }) // [!code ++] - }, // [!code ++] -}) -``` - -::: - -## Deployment - -When deploying your SSR enabled app to production, you'll need to build both the client-side (`application.js`) and server-side bundles (`ssr.js`), and then run the SSR server as a background process. diff --git a/docs/guide/server-side-setup.md b/docs/guide/server-side-setup.md deleted file mode 100644 index e78dbaf..0000000 --- a/docs/guide/server-side-setup.md +++ /dev/null @@ -1,187 +0,0 @@ -# Server-side setup - -The first step when installing Inertia is to configure your server-side framework. Inertia maintains official server-side adapters for [Laravel](https://laravel.com) and [Ruby on Rails](https://rubyonrails.org). For other frameworks, please see the [community adapters](https://inertiajs.com/community-adapters). - -> [!NOTE] -> For the official Laravel adapter instructions, please see the [official documentation](https://inertiajs.com/server-side-setup). - -## Install dependencies - -First, install the Inertia server-side adapter gem and add to the application's Gemfile by executing: - -```bash -bundle add inertia_rails -``` - -## Rails generator - -If you plan to use Vite as your frontend build tool, you can use the `inertia_rails-contrib` gem to install and set up Inertia in a Rails application. It automatically detects if the [Vite Rails](https://vite-ruby.netlify.app/guide/rails.html) gem is installed and will attempt to install it if not present. - -To install and setup Inertia in a Rails application, execute the following command in the terminal: - -```bash -bundle add inertia_rails-contrib -bin/rails generate inertia:install -``` - -This command will: -- Check for Vite Rails and install it if not present -- Ask if you want to use TypeScript -- Ask you to choose your preferred frontend framework (React, Vue, Svelte 4, or Svelte 5) -- Ask if you want to install Tailwind CSS -- Install necessary dependencies -- Set up the application to work with Inertia -- Copy example Inertia controller and views (can be skipped with the `--skip-example` option) - -> [!NOTE] -> To use TypeScript with Svelte, you need to install `@inertiajs/svelte` version `1.3.0-beta.1` or higher. You can use the `--inertia-version` option to specify the version. - -> [!NOTE] -> `inertia_rails-contrib` doesn't include [Rails scaffold generators](/guide/responses#rails-generators) for TypeScript yet. - -Example output: - -```bash -$ bin/rails generate inertia:install -Installing Inertia's Rails adapter -Could not find a package.json file to install Inertia to. -Would you like to install Vite Ruby? (y/n) y - run bundle add vite_rails from "." -Vite Rails gem successfully installed - run bundle exec vite install from "." -Vite Rails successfully installed -Would you like to use TypeScript? (y/n) y -Adding TypeScript support -What framework do you want to use with Inertia? [react, vue, svelte4, svelte] (react) - run npm add @types/react @types/react-dom typescript --silent from "." -Would you like to install Tailwind CSS? (y/n) y -Installing Tailwind CSS - run npm add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/container-queries --silent from "." - create tailwind.config.js - create postcss.config.js - create app/frontend/entrypoints/application.css -Adding Tailwind CSS to the application layout - insert app/views/layouts/application.html.erb -Adding Inertia's Rails adapter initializer - create config/initializers/inertia_rails.rb -Installing Inertia npm packages - run npm add @vitejs/plugin-react react react-dom --silent from "." - run npm add @inertiajs/react@latest --silent from "." -Adding Vite plugin for react - insert vite.config.ts - prepend vite.config.ts -Copying inertia.ts entrypoint - create app/frontend/entrypoints/inertia.ts -Adding inertia.ts script tag to the application layout - insert app/views/layouts/application.html.erb -Adding Vite React Refresh tag to the application layout - insert app/views/layouts/application.html.erb - gsub app/views/layouts/application.html.erb -Copying example Inertia controller - create app/controllers/inertia_example_controller.rb -Adding a route for the example Inertia controller - route get 'inertia-example', to: 'inertia_example#index' -Copying page assets - create app/frontend/pages/InertiaExample.module.css - create app/frontend/assets/react.svg - create app/frontend/assets/inertia.svg - create app/frontend/assets/vite_ruby.svg - create app/frontend/pages/InertiaExample.tsx - create tsconfig.json - create tsconfig.app.json - create tsconfig.node.json - create app/frontend/vite-env.d.ts -Copying bin/dev - create bin/dev -Inertia's Rails adapter successfully installed -``` - -With that done, you can now start the Rails server and the Vite development server (we recommend using [Overmind](https://github.com/DarthSim/overmind)): - -```bash -bin/dev -``` - -And navigate to `http://localhost:3100/inertia-example` to see the example Inertia page. - -That's it! You're all set up to start using Inertia in your Rails application. Check the guide on [creating pages](/guide/pages) to know more. - -## Root template - -If you decide not to use the generator, you can manually set up Inertia in your Rails application. - -First, setup the root template that will be loaded on the first page visit. This will be used to load your site assets (CSS and JavaScript), and will also contain a root `
` to boot your JavaScript application in. - -:::tabs key:builders -== Vite - -```erb - - - - - <%= csp_meta_tag %> - - <%= inertia_headers %> - - <%# If you want to use React add `vite_react_refresh_tag` %> - <%= vite_client_tag %> - <%= vite_javascript_tag 'application' %> - - - - <%= yield %> - - -``` - -== Webpacker/Shakapacker - -```erb - - - - - <%= csp_meta_tag %> - - <%= inertia_headers %> - - <%= stylesheet_pack_tag 'application' %> - <%= javascript_pack_tag 'application', defer: true %> - - - <%= yield %> - - -``` - -::: - -This template should include your assets, as well as the `yield` method to render the Inertia page. The `inertia_headers` method is used to include the Inertia headers in the response, it's required when [SSR](/guide/server-side-rendering.md) is enabled. - -Inertia's adapter will use standard Rails layout inheritance, with `view/layouts/application.html.erb` as a default layout. If you would like to use a different default layout, you can change it using the `InertiaRails.configure`. - -```ruby -# config/initializers/inertia_rails.rb -InertiaRails.configure do |config| - config.layout = 'my_inertia_layout' -end -``` - -# Creating responses - -That's it, you're all ready to go server-side! Once you setup the [client-side](/guide/client-side-setup.md) framework, you can start start creating Inertia [pages](/guide/pages.md) and rendering them via [responses](/guide/responses.md). - -```ruby -class EventsController < ApplicationController - def show - event = Event.find(params[:id]) - - render inertia: 'Event/Show', props: { - event: event.as_json( - only: [:id, :title, :start_date, :description] - ) - } - end -end -``` diff --git a/docs/guide/shared-data.md b/docs/guide/shared-data.md deleted file mode 100644 index c79d11a..0000000 --- a/docs/guide/shared-data.md +++ /dev/null @@ -1,289 +0,0 @@ -# Shared data - -Sometimes you need to access specific pieces of data on numerous pages within your application. For example, you may need to display the current user in the site header. Passing this data manually in each response across your entire application is cumbersome. Thankfully, there is a better option: shared data. - -## Sharing data - -Inertia's Rails adapter comes with the `shared_data` controller method. This method allows you to define shared data that will be automatically merged with the page props provided in your controller. - -```ruby -class EventsController < ApplicationController - # share syncronously - inertia_share app_name: env['app.name'] - - # share lazily, evaluated at render time - inertia_share do - if logged_in? - { - user: logged_in_user, - } - end - end - - # share lazily alternate syntax - inertia_share user_count: lambda { User.count } -end -``` - -> [!NOTE] -> Shared data should be used sparingly as all shared data is included with every response. - -> [!NOTE] -> Page props and shared data are merged together, so be sure to namespace your shared data appropriately to avoid collisions. - -## Accessing shared data - -Once you have shared the data server-side, you will be able to access it within any of your pages or components. Here's an example of how to access shared data in a layout component. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -== Vue 3 - -```vue - - - -``` - -== React - -```jsx -import { usePage } from '@inertiajs/react' - -export default function Layout({ children }) { - const { auth } = usePage().props - - return ( -
-
You are logged in as: {auth.user.name}
-
{children}
-
- ) -} -``` - -== Svelte - -```svelte - - -
-
- You are logged in as: {$page.props.auth.user.name} -
-
- -
-
-``` - -::: - -# Flash messages - -Another great use-case for shared data is flash messages. These are messages stored in the session only for the next request. For example, it's common to set a flash message after completing a task and before redirecting to a different page. - -Here's a simple way to implement flash messages in your Inertia applications. First, share the flash message on each request. - -```ruby -class ApplicationController < ActionController::Base - inertia_share flash: -> { flash.to_hash } -end -``` - -Next, display the flash message in a frontend component, such as the site layout. - -:::tabs key:frameworks -== Vue 2 - -```vue - -``` - -== Vue 3 - -```vue - -``` - -== React - -```jsx -import { usePage } from '@inertiajs/react' - -export default function Layout({ children }) { - const { flash } = usePage().props - - return ( -
-
-
- {flash.alert &&
{flash.alert}
} - {flash.notice &&
{flash.notice}
} - {children} -
-
-
- ) -} -``` - -== Svelte - -```svelte - - -
-
-
- {#if $page.props.flash.alert} -
{$page.props.flash.alert}
- {/if} - {#if $page.props.flash.notice} -
{$page.props.flash.notice}
- {/if} - -
-
-
-``` - -::: - -## Deep Merging Shared Data - -By default, Inertia will shallow merge data defined in an action with the shared data. You might want a deep merge. Imagine using shared data to represent defaults you'll override sometimes. - -```ruby -class ApplicationController - inertia_share do - { basketball_data: { points: 50, rebounds: 100 } } - end -end -``` - -Let's say we want a particular action to change only part of that data structure. The renderer accepts a `deep_merge` option: - -```ruby -class CrazyScorersController < ApplicationController - def index - render inertia: 'CrazyScorersComponent', - props: { basketball_data: { points: 100 } }, - deep_merge: true - end -end - -# The renderer will send this to the frontend: -{ - basketball_data: { - points: 100, - rebounds: 100, - } -} -``` - -Deep merging can be set as the project wide default via the `InertiaRails` configuration: - -```ruby -# config/initializers/some_initializer.rb -InertiaRails.configure do |config| - config.deep_merge_shared_data = true -end - -``` - -If deep merging is enabled by default, it's possible to opt out within the action: - -```ruby -class CrazyScorersController < ApplicationController - inertia_share do - { - basketball_data: { - points: 50, - rebounds: 10, - } - } - end - - def index - render inertia: 'CrazyScorersComponent', - props: { basketball_data: { points: 100 } }, - deep_merge: false - end -end - -# Even if deep merging is set by default, since the renderer has `deep_merge: false`, it will send a shallow merge to the frontend: -{ - basketball_data: { - points: 100, - } -} -``` diff --git a/docs/guide/testing.md b/docs/guide/testing.md deleted file mode 100644 index 02851bd..0000000 --- a/docs/guide/testing.md +++ /dev/null @@ -1,70 +0,0 @@ -# Testing - -There are many different ways to test an Inertia.js app. This page provides a quick overview of the tools available. - -## End-to-end tests - -One popular approach to testing your JavaScript page components, is to use an end-to-end testing tool like [Capybara](https://github.com/teamcapybara/capybara) or [Cypress](https://www.cypress.io). These are browser automation tools that allow you to run real simulations of your app in the browser. These tests are known to be slower, and sometimes brittle, but since they test your application at the same layer as your end users, they can provide a lot of confidence that your app is working correctly. And, since these tests are run in the browser your JavaScript code is actually executed and tested as well. - -## Client-side unit tests - -Another approach to testing your page components is using a client-side unit testing framework, such as [Vitest](https://vitest.dev), [Jest](https://jestjs.io) or [Mocha](https://mochajs.org). This approach allows you to test your JavaScript page components in isolation using Node.js. - -## Endpoint tests - -In addition to testing your JavaScript page components, you'll also want to test the Inertia responses that come back from your server-side framework. A popular approach to doing this is using endpoint tests, where you make requests to your application and examine the responses. - -If you're using RSpec, Inertia Rails comes with some nice test helpers to make things simple. - -To use these helpers, just add the following require statement to your `spec/rails_helper.rb` - -```ruby -require 'inertia_rails/rspec' -``` - -And in any test you want to use the inertia helpers, add the `:inertia` flag to the block. - -```ruby -# spec/requests/events_spec.rb -RSpec.describe "/events", inertia: true do - describe '#index' do - # ... - end -end -``` - -### Assertions - -```ruby -# spec/requests/events_spec.rb -RSpec.describe '/events', inertia: true do - describe '#index' do - let!(:event) { Event.create!(title: 'Foo', start_date: '2024-02-21', description: 'Foo bar') } - - it "renders inertia component" do - get events_path - - # check the component - expect(inertia).to render_component 'Event/Index' - # or - expect_inertia.to render_component 'Event/Index' - # same as above - expect(inertia.component).to eq 'Event/Index' - - # props (including shared props) - expect(inertia).to have_exact_props({title: 'Foo', description: 'Foo bar'}) - expect(inertia).to include_props({title: 'Foo'}) - - # access props - expect(inertia.props[:title]).to eq 'Foo' - - # view data - expect(inertia).to have_exact_view_data({meta: 'Foo bar'}) - expect(inertia).to include_view_data({meta: 'Foo bar'}) - - # access view data - expect(inertia.view_data[:meta]).to eq 'Foo bar' - end - end -end -``` diff --git a/docs/guide/the-protocol.md b/docs/guide/the-protocol.md deleted file mode 100644 index 1145d21..0000000 --- a/docs/guide/the-protocol.md +++ /dev/null @@ -1,147 +0,0 @@ -# The protocol - -This page contains a detailed specification of the Inertia protocol. Be sure to read the [how it works](/guide/how-it-works.md) page first for a high-level overview. - -## HTML responses - -The very first request to an Inertia app is just a regular, full-page browser request, with no special Inertia headers or data. For these requests, the server returns a full HTML document. - -This HTML response includes the site assets (CSS, JavaScript) as well as a root `
` in the page's body. The root `
` serves as a mounting point for the client-side app, and includes a `data-page` attribute with a JSON encoded [page object] for the initial page. Inertia uses this information to boot your client-side framework and display the initial page component. - -```http -REQUEST -GET: http://example.com/events/80 -Accept: text/html, application/xhtml+xml - - -RESPONSE -HTTP/1.1 200 OK -Content-Type: text/html; charset=utf-8 - - - - My app - - - - - -
- - - -``` - -> [!NOTE] -> While the initial response is HTML, Inertia does not server-side render the JavaScript page components. - -## Inertia responses - -Once the Inertia app has been booted, all subsequent requests to the site are made via XHR with a `X-Inertia` header set to `true`. This header indicates that the request is being made by Inertia and isn't a standard full-page visit. - -When the server detects the `X-Inertia` header, instead of responding with a full HTML document, it returns a JSON response with an encoded [page object]. - -```http -REQUEST -GET: http://example.com/events/80 -Accept: text/html, application/xhtml+xml -X-Requested-With: XMLHttpRequest -X-Inertia: true -X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 - -RESPONSE -HTTP/1.1 200 OK -Content-Type: application/json -Vary: X-Inertia -X-Inertia: true - -{ - "component": "Event", - "props": { - "event": { - "id": 80, - "title": "Birthday party", - "start_date": "2019-06-02", - "description": "Come out and celebrate Jonathan's 36th birthday party!" - } - }, - "url": "/events/80", - "version": "c32b8e4965f418ad16eaebba1d4e960f" -} -``` - -## The page object - -Inertia shares data between the server and client via a page object. This object includes the necessary information required to render the page component, update the browser's history state, and track the site's asset version. The page object includes the following four properties: - -1. `component`: The name of the JavaScript page component. -2. `props`: The page props (data). -3. `url`: The page URL. -4. `version`: The current asset version. - -On standard full page visits, the page object is JSON encoded into the `data-page` attribute in the root `
`. On Inertia visits, the page object is returned as the JSON payload. - -## Asset versioning - -One common challenge with single-page apps is refreshing site assets when they've been changed. Inertia makes this easy by optionally tracking the current version of the site's assets. In the event that an asset changes, Inertia will automatically make a full-page visit instead of an XHR visit. - -The Inertia [page object] includes a `version` identifier. This version identifier is set server-side and can be a number, string, file hash, or any other value that represents the current "version" of your site's assets, as long as the value changes when the site's assets have been updated. - -Whenever an Inertia request is made, Inertia will include the current asset version in the `X-Inertia-Version` header. When the server receives the request, it compares the asset version provided in the `X-Inertia-Version` header with the current asset version. This is typically handled in the middleware layer of your server-side framework. - -If the asset versions are the same, the request simply continues as expected. However, if the asset versions are different, the server immediately returns a `409 Conflict` response, and includes the URL in a `X-Inertia-Location` header. This header is necessary, since server-side redirects may have occurred. This tells Inertia what the final intended destination URL is. - -Note, `409 Conflict` responses are only sent for `GET` requests, and not for `POST/PUT/PATCH/DELETE` requests. That said, they will be sent in the event that a `GET` redirect occurs after one of these requests. - -If "flash" session data exists when a `409 Conflict` response occurs, Inertia's server-side framework adapters will automatically reflash this data. - -```http -REQUEST -GET: http://example.com/events/80 -Accept: text/html, application/xhtml+xml -X-Requested-With: XMLHttpRequest -X-Inertia: true -X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 - -RESPONSE -409: Conflict -X-Inertia-Location: http://example.com/events/80 -``` - -## Partial reloads - -When making Inertia requests, the partial reload option allows you to request a subset of the props (data) from the server on subsequent visits to the same page component. This can be a helpful performance optimization if it's acceptable that some page data becomes stale. - -When a partial reload request is made, Inertia includes two additional headers with the request: `X-Inertia-Partial-Data` and `X-Inertia-Partial-Component`. - -The `X-Inertia-Partial-Data` header is a comma separated list of the desired props (data) keys that should be returned. - -The `X-Inertia-Partial-Component` header includes the name of the component that is being partially reloaded. This is necessary, since partial reloads only work for requests made to the same page component. If the final destination is different for some reason (eg. the user was logged out and is now on the login page), then no partial reloading will occur. - -```http -REQUEST -GET: http://example.com/events -Accept: text/html, application/xhtml+xml -X-Requested-With: XMLHttpRequest -X-Inertia: true -X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 -X-Inertia-Partial-Data: events -X-Inertia-Partial-Component: Events - -RESPONSE -HTTP/1.1 200 OK -Content-Type: application/json - -{ - "component": "Events", - "props": { - "auth": {...}, // NOT included - "categories": [...], // NOT included - "events": [...] // included - }, - "url": "/events/80", - "version": "c32b8e4965f418ad16eaebba1d4e960f" -} -``` - -[page object]: #the-page-object diff --git a/docs/guide/title-and-meta.md b/docs/guide/title-and-meta.md deleted file mode 100644 index 1a65ab1..0000000 --- a/docs/guide/title-and-meta.md +++ /dev/null @@ -1,395 +0,0 @@ -# Title & meta - -Since Inertia powered JavaScript apps are rendered within the document ``, they are unable to render markup to the document ``, as it's outside of their scope. To help with this, Inertia ships with a `` component which can be used to set the page ``, `<meta>` tags, and other `<head>` elements. - -> [!NOTE] -> The `<Head>` component will only replace `<head>` elements that are not in your server-side layout. - -> [!NOTE] -> The `<Head>` component is not available in the Svelte adapter, as Svelte already ships with its own `<svelte:head>` component. - -## Head component - -To add `<head>` elements to your page, use the `<Head>` component. Within this component, you can include the elements that you wish to add to the document `<head>`. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Head } from '@inertiajs/vue2' - -<Head> - <title>Your page title - - -``` - -== Vue 3 - -```vue -import { Head } from '@inertiajs/vue3' - - - Your page title - - -``` - -== React - -```jsx -import { Head } from '@inertiajs/react' - - - Your page title - - -``` - -== Svelte - -```svelte - - Your page title - - -``` - -> [!NOTE] -> The `` component is provided by Svelte. - -::: - -Title shorthand - -If you only need to add a `` to the document `<head>`, you may simply pass the title as a prop to the `<Head>` component. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Head } from '@inertiajs/vue2' - -<Head title="Your page title" /> -``` - -== Vue 3 - -```vue -import { Head } from '@inertiajs/vue3' - -<Head title="Your page title" /> -``` - -== React - -```jsx -import { Head } from '@inertiajs/react' - -<Head title="Your page title" /> -``` - -== Svelte - -```svelte -// Not supported -``` - -::: - -## Title callback - -You can globally modify the page `<title>` using the title callback in the `createInertiaApp` setup method. Typically, this method is invoked in your application's main JavaScript file. A common use case for the title callback is automatically adding an app name before or after each page title. - -```js -createInertiaApp({ - title: (title) => `${title} - My App`, - // ... -}) -``` - -After defining the title callback, the callback will automatically be invoked when you set a title using the `<Head>` component. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Head } from '@inertiajs/vue2' - -<Head title="Home" /> -``` - -== Vue 3 - -```vue -import { Head } from '@inertiajs/vue3' - -<Head title="Home" /> -``` - -== React - -```jsx -import { Head } from '@inertiajs/react' - -<Head title="Home" /> -``` - -== Svelte - -```svelte -// Not supported -``` - -::: - -Which, in this example, will result in the following `<title>` tag. - -```js -<title>Home - My App -``` - -The `title` callback will also be invoked when you set the title using a `` tag within your `<Head>` component. - -:::tabs key:frameworks -== Vue 2 - -```vue -import { Head } from '@inertiajs/vue2' - -<Head> - <title>Home - -``` - -== Vue 3 - -```vue -import { Head } from '@inertiajs/vue3' - - - Home - -``` - -== React - -```jsx -import { Head } from '@inertiajs/react' - - - Home - -``` - -== Svelte - -```svelte -// Not supported -``` - -::: - -# Multiple Head instances - -It's possible to have multiple instances of the `` component throughout your application. For example, your layout can set some default `` elements, and then your individual pages can override those defaults. - -:::tabs key:frameworks -== Vue 2 - -```vue -// Layout.vue import { Head } from '@inertiajs/vue2' - - - My app - - - - -// About.vue import { Head } from '@inertiajs/vue2' - - - About - My app - - -``` - -== Vue 3 - -```vue -// Layout.vue import { Head } from '@inertiajs/vue3' - - - My app - - - - -// About.vue import { Head } from '@inertiajs/vue3' - - - About - My app - - -``` - -== React - -```jsx -// Layout.jsx - -import { Head } from '@inertiajs/react' - - - My app - - - - -// About.jsx - -import { Head } from '@inertiajs/react' - - - About - My app - - -``` - -== Svelte - -```svelte -// Not supported -``` - -::: - -Inertia will only ever render one `` tag; however, all other tags will be stacked since it's valid to have multiple instances of them. To avoid duplicate tags in your `<head>`, you can use the `head-key` property, which will make sure the tag is only rendered once. This is illustrated in the example above for the `<meta name="description">` tag. - -The code example above will render the following HTML. - -```html -<head> - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> - <title>About - My app - - -``` - -### Head extension - -When building a real application, it can sometimes be helpful to create a custom head component that extends Inertia's `` component. This gives you a place to set app-wide defaults, such as appending the app name to the page title. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - - - -``` - -== Vue 3 - -```vue - - - - - -``` - -== React - -```jsx -// AppHead.jsx - -import { Head } from '@inertiajs/react' - -const AppHead = ({ title, children }) => { - return ( - - {title ? `${title} - My App` : 'My App'} - {children} - - ) -} - -export default AppHead -``` - -== Svelte - -```svelte -// Not supported -``` - -::: - -Once you have created the custom component, you may simply start using the custom component in your pages. - -:::tabs key:frameworks -== Vue 2 - -```vue -import AppHead from './AppHead' - - -``` - -== Vue 3 - -```vue -import AppHead from './AppHead' - - -``` - -== React - -```jsx -import AppHead from './AppHead' - - -``` - -== Svelte - -```svelte -// Not supported -``` - -::: diff --git a/docs/guide/validation.md b/docs/guide/validation.md deleted file mode 100644 index 487720a..0000000 --- a/docs/guide/validation.md +++ /dev/null @@ -1,289 +0,0 @@ -# Validation - -## How it works - -Handling server-side validation errors in Inertia works differently than a classic XHR-driven form that requires you to catch the validation errors from `422` responses and manually update the form's error state - because Inertia never receives `422` responses. Instead, Inertia operates much more like a standard full page form submission. Here's how: - -First, you [submit your form using Inertia](/guide/forms.md). If there are server-side validation errors, you don't return those errors as a `422` JSON response. Instead, you redirect (server-side) the user back to the form page they were previously on, flashing the validation errors in the session. - -```ruby -class UsersController < ApplicationController - def create - user = User.new(user_params) - - if user.save - redirect_to users_url - else - redirect_to new_user_url, inertia: { errors: user.errors } - end - end - - private - - def user_params - params.require(:user).permit(:name, :email) - end -end -``` - -Next, any time these validation errors are present in the session, they automatically get shared with Inertia, making them available client-side as page props which you can display in your form. Since props are reactive, they are automatically shown when the form submission completes. - -Finally, since Inertia apps never generate `422` responses, Inertia needs another way to determine if a response includes validation errors. To do this, Inertia checks the `page.props.errors` object for the existence of any errors. In the event that errors are present, the request's `onError()` callback will be called instead of the `onSuccess()` callback. - -## Sharing errors - -In order for your server-side validation errors to be available client-side, your server-side framework must share them via the `errors` prop. Inertia's Rails adapter do this automatically. - -## Displaying errors - -Since validation errors are made available client-side as page component props, you can conditionally display them based on their existence. Remember, when using Rails server adapter, the `errors` prop will automatically be available to your page. - -:::tabs key:frameworks -== Vue 2 - -```vue - - - -``` - -> [!NOTE] -> When using the Vue adapters, you may also access the errors via the `$page.props.errors` object. - -== Vue 3 - -```vue - - - -``` - -> [!NOTE] -> When using the Vue adapters, you may also access the errors via the `$page.props.errors` object. - -== React - -```jsx -import { useState } from 'react' -import { router, usePage } from '@inertiajs/react' - -export default function Edit() { - const { errors } = usePage().props - - const [values, setValues] = useState({ - first_name: null, - last_name: null, - email: null, - }) - - function handleChange(e) { - setValues((values) => ({ - ...values, - [e.target.id]: e.target.value, - })) - } - - function handleSubmit(e) { - e.preventDefault() - router.post('/users', values) - } - - return ( -
- - - {errors.first_name &&
{errors.first_name}
} - - - {errors.last_name &&
{errors.last_name}
} - - - {errors.email &&
{errors.email}
} - -
- ) -} -``` - -== Svelte - -```svelte - - -
- - - {#if errors.first_name}
{errors.first_name}
{/if} - - - - {#if errors.last_name}
{errors.last_name}
{/if} - - - - {#if errors.email}
{errors.email}
{/if} - - -
-``` - -::: - -## Repopulating input - -While handling errors in Inertia is similar to full page form submissions, Inertia offers even more benefits. In fact, you don't even need to manually repopulate old form input data. - -When validation errors occur, the user is typically redirected back to the form page they were previously on. And, by default, Inertia automatically preserves the [component state](/guide/manual-visits.md#state-preservation) for `post`, `put`, `patch`, and `delete` requests. Therefore, all the old form input data remains exactly as it was when the user submitted the form. - -So, the only work remaining is to display any validation errors using the `errors` prop. - -## Error bags - -> [!NOTE] -> If you're using the [form helper](/guide/forms.md), it's not necessary to use error bags since validation errors are automatically scoped to the form object making the request. - -For pages that have more than one form, it's possible to encounter conflicts when displaying validation errors if two forms share the same field names. For example, imagine a "create company" form and a "create user" form that both have a `name` field. Since both forms will be displaying the `page.props.errors.name` validation error, generating a validation error for the `name` field in either form will cause the error to appear in both forms. - -To solve this issue, you can use "error bags". Error bags scope the validation errors returned from the server within a unique key specific to that form. Continuing with our example above, you might have a `createCompany` error bag for the first form and a `createUser` error bag for the second form. - -:::tabs key:frameworks -== Vue 2 - -```js -import { router } from '@inertiajs/vue2' - -router.post('/companies', data, { - errorBag: 'createCompany', -}) - -router.post('/users', data, { - errorBag: 'createUser', -}) -``` - -== Vue 3 - -```js -import { router } from '@inertiajs/vue3' - -router.post('/companies', data, { - errorBag: 'createCompany', -}) - -router.post('/users', data, { - errorBag: 'createUser', -}) -``` - -== React - -```jsx -import { router } from '@inertiajs/react' - -router.post('/companies', data, { - errorBag: 'createCompany', -}) - -router.post('/users', data, { - errorBag: 'createUser', -}) -``` - -== Svelte - -```js -import { router } from '@inertiajs/svelte' - -router.post('/companies', data, { - errorBag: 'createCompany', -}) - -router.post('/users', data, { - errorBag: 'createUser', -}) -``` - -::: - -Specifying an error bag will cause the validation errors to come back from the server within `page.props.errors.createCompany` and `page.props.errors.createUser`. diff --git a/docs/guide/who-is-it-for.md b/docs/guide/who-is-it-for.md deleted file mode 100644 index 88d829b..0000000 --- a/docs/guide/who-is-it-for.md +++ /dev/null @@ -1,13 +0,0 @@ -# Who is Inertia.js for? - -Inertia was crafted for development teams and solo hackers who typically build server-side rendered applications using frameworks like Laravel, Ruby on Rails, or Django. You're used to creating controllers, retrieving data from the database (via an ORM), and rendering views. - -But what happens when you want to replace your server-side rendered views with a modern, JavaScript-based single-page application frontend? The answer is always "you need to build an API". Because that's how modern SPAs are built. - -This means building a REST or GraphQL API. It means figuring out authentication and authorization for that API. It means client-side state management. It means setting up a new Git repository. It means a more complicated deployment strategy. And this list goes on. It's a complete paradigm shift, and often a complete mess. We think there is a better way. - -**Inertia empowers you to build a modern, JavaScript-based single-page application without the tiresome complexity.** - -Inertia works just like a classic server-side rendered application. You create controllers, you get data from the database (via your ORM), and you render views. But, Inertia views are JavaScript page components written in React, Vue, or Svelte. - -This means you get all the power of a client-side application and modern SPA experience, but you don't need to build an API. We think it's a breath of fresh air that will supercharge your productivity. diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index 52970e0..0000000 --- a/docs/index.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -# https://vitepress.dev/reference/default-theme-home-page -layout: home - -hero: - name: 'Inertia.js Rails' - text: 'Build single-page apps, without building an API.' - tagline: |- - Create modern single-page React, Vue, and Svelte apps using classic server-side routing. - actions: - - theme: brand - text: Get Started - link: /guide - - theme: alt - text: Install - link: /guide/server-side-setup - image: - src: /logo.svg - alt: Inertia.js Logo ---- diff --git a/docs/package-lock.json b/docs/package-lock.json deleted file mode 100644 index d1c6d6e..0000000 --- a/docs/package-lock.json +++ /dev/null @@ -1,1643 +0,0 @@ -{ - "name": "docs", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "devDependencies": { - "vitepress": "^1.2.2", - "vitepress-plugin-tabs": "^0.5.0", - "vue": "^3.4.27" - } - }, - "node_modules/@algolia/autocomplete-core": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz", - "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==", - "dev": true, - "dependencies": { - "@algolia/autocomplete-plugin-algolia-insights": "1.9.3", - "@algolia/autocomplete-shared": "1.9.3" - } - }, - "node_modules/@algolia/autocomplete-plugin-algolia-insights": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz", - "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==", - "dev": true, - "dependencies": { - "@algolia/autocomplete-shared": "1.9.3" - }, - "peerDependencies": { - "search-insights": ">= 1 < 3" - } - }, - "node_modules/@algolia/autocomplete-preset-algolia": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz", - "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==", - "dev": true, - "dependencies": { - "@algolia/autocomplete-shared": "1.9.3" - }, - "peerDependencies": { - "@algolia/client-search": ">= 4.9.1 < 6", - "algoliasearch": ">= 4.9.1 < 6" - } - }, - "node_modules/@algolia/autocomplete-shared": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz", - "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==", - "dev": true, - "peerDependencies": { - "@algolia/client-search": ">= 4.9.1 < 6", - "algoliasearch": ">= 4.9.1 < 6" - } - }, - "node_modules/@algolia/cache-browser-local-storage": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.3.tgz", - "integrity": "sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==", - "dev": true, - "dependencies": { - "@algolia/cache-common": "4.23.3" - } - }, - "node_modules/@algolia/cache-common": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.3.tgz", - "integrity": "sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A==", - "dev": true - }, - "node_modules/@algolia/cache-in-memory": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.3.tgz", - "integrity": "sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==", - "dev": true, - "dependencies": { - "@algolia/cache-common": "4.23.3" - } - }, - "node_modules/@algolia/client-account": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.3.tgz", - "integrity": "sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==", - "dev": true, - "dependencies": { - "@algolia/client-common": "4.23.3", - "@algolia/client-search": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/client-analytics": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.3.tgz", - "integrity": "sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==", - "dev": true, - "dependencies": { - "@algolia/client-common": "4.23.3", - "@algolia/client-search": "4.23.3", - "@algolia/requester-common": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/client-common": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.3.tgz", - "integrity": "sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==", - "dev": true, - "dependencies": { - "@algolia/requester-common": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/client-personalization": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.3.tgz", - "integrity": "sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==", - "dev": true, - "dependencies": { - "@algolia/client-common": "4.23.3", - "@algolia/requester-common": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/client-search": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.3.tgz", - "integrity": "sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==", - "dev": true, - "dependencies": { - "@algolia/client-common": "4.23.3", - "@algolia/requester-common": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/logger-common": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.3.tgz", - "integrity": "sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g==", - "dev": true - }, - "node_modules/@algolia/logger-console": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.3.tgz", - "integrity": "sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==", - "dev": true, - "dependencies": { - "@algolia/logger-common": "4.23.3" - } - }, - "node_modules/@algolia/recommend": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.3.tgz", - "integrity": "sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==", - "dev": true, - "dependencies": { - "@algolia/cache-browser-local-storage": "4.23.3", - "@algolia/cache-common": "4.23.3", - "@algolia/cache-in-memory": "4.23.3", - "@algolia/client-common": "4.23.3", - "@algolia/client-search": "4.23.3", - "@algolia/logger-common": "4.23.3", - "@algolia/logger-console": "4.23.3", - "@algolia/requester-browser-xhr": "4.23.3", - "@algolia/requester-common": "4.23.3", - "@algolia/requester-node-http": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/@algolia/requester-browser-xhr": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.3.tgz", - "integrity": "sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==", - "dev": true, - "dependencies": { - "@algolia/requester-common": "4.23.3" - } - }, - "node_modules/@algolia/requester-common": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.3.tgz", - "integrity": "sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw==", - "dev": true - }, - "node_modules/@algolia/requester-node-http": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.3.tgz", - "integrity": "sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==", - "dev": true, - "dependencies": { - "@algolia/requester-common": "4.23.3" - } - }, - "node_modules/@algolia/transporter": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.3.tgz", - "integrity": "sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==", - "dev": true, - "dependencies": { - "@algolia/cache-common": "4.23.3", - "@algolia/logger-common": "4.23.3", - "@algolia/requester-common": "4.23.3" - } - }, - "node_modules/@babel/parser": { - "version": "7.24.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz", - "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==", - "dev": true, - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@docsearch/css": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.0.tgz", - "integrity": "sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ==", - "dev": true - }, - "node_modules/@docsearch/js": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.6.0.tgz", - "integrity": "sha512-QujhqINEElrkIfKwyyyTfbsfMAYCkylInLYMRqHy7PHc8xTBQCow73tlo/Kc7oIwBrCLf0P3YhjlOeV4v8hevQ==", - "dev": true, - "dependencies": { - "@docsearch/react": "3.6.0", - "preact": "^10.0.0" - } - }, - "node_modules/@docsearch/react": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.0.tgz", - "integrity": "sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==", - "dev": true, - "dependencies": { - "@algolia/autocomplete-core": "1.9.3", - "@algolia/autocomplete-preset-algolia": "1.9.3", - "@docsearch/css": "3.6.0", - "algoliasearch": "^4.19.1" - }, - "peerDependencies": { - "@types/react": ">= 16.8.0 < 19.0.0", - "react": ">= 16.8.0 < 19.0.0", - "react-dom": ">= 16.8.0 < 19.0.0", - "search-insights": ">= 1 < 3" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "react": { - "optional": true - }, - "react-dom": { - "optional": true - }, - "search-insights": { - "optional": true - } - } - }, - "node_modules/@esbuild/aix-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", - "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", - "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", - "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/android-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", - "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", - "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/darwin-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", - "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", - "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/freebsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", - "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", - "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", - "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", - "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-loong64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", - "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-mips64el": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", - "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-ppc64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", - "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-riscv64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", - "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-s390x": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", - "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/linux-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", - "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/netbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", - "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/openbsd-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", - "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/sunos-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", - "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-arm64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", - "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-ia32": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", - "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@esbuild/win32-x64": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", - "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", - "dev": true - }, - "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", - "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-android-arm64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz", - "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ] - }, - "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz", - "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz", - "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ] - }, - "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz", - "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz", - "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz", - "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz", - "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz", - "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz", - "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz", - "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz", - "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz", - "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ] - }, - "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz", - "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz", - "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz", - "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ] - }, - "node_modules/@shikijs/core": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.6.2.tgz", - "integrity": "sha512-guW5JeDzZ7uwOjTfCOFZ2VtVXk5tmkMzBYbKGfXsmAH1qYOej49L5jQDcGmwd6/OgvpmWhzO2GNJkQIFnbwLPQ==", - "dev": true - }, - "node_modules/@shikijs/transformers": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-1.6.2.tgz", - "integrity": "sha512-ndqTWyHnxmsLkowhKWTam26opw8hg5a34y6FAUG/Xf6E49n3MM//nenKxXiWpPYkNPl1KZnYXB1k+Ia46wjOZg==", - "dev": true, - "dependencies": { - "shiki": "1.6.2" - } - }, - "node_modules/@types/estree": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", - "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "dev": true - }, - "node_modules/@types/linkify-it": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", - "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", - "dev": true - }, - "node_modules/@types/markdown-it": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.1.tgz", - "integrity": "sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==", - "dev": true, - "dependencies": { - "@types/linkify-it": "^5", - "@types/mdurl": "^2" - } - }, - "node_modules/@types/mdurl": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", - "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", - "dev": true - }, - "node_modules/@types/web-bluetooth": { - "version": "0.0.20", - "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", - "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==", - "dev": true - }, - "node_modules/@vitejs/plugin-vue": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz", - "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==", - "dev": true, - "engines": { - "node": "^18.0.0 || >=20.0.0" - }, - "peerDependencies": { - "vite": "^5.0.0", - "vue": "^3.2.25" - } - }, - "node_modules/@vue/compiler-core": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz", - "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==", - "dev": true, - "dependencies": { - "@babel/parser": "^7.24.4", - "@vue/shared": "3.4.27", - "entities": "^4.5.0", - "estree-walker": "^2.0.2", - "source-map-js": "^1.2.0" - } - }, - "node_modules/@vue/compiler-dom": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz", - "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==", - "dev": true, - "dependencies": { - "@vue/compiler-core": "3.4.27", - "@vue/shared": "3.4.27" - } - }, - "node_modules/@vue/compiler-sfc": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz", - "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==", - "dev": true, - "dependencies": { - "@babel/parser": "^7.24.4", - "@vue/compiler-core": "3.4.27", - "@vue/compiler-dom": "3.4.27", - "@vue/compiler-ssr": "3.4.27", - "@vue/shared": "3.4.27", - "estree-walker": "^2.0.2", - "magic-string": "^0.30.10", - "postcss": "^8.4.38", - "source-map-js": "^1.2.0" - } - }, - "node_modules/@vue/compiler-ssr": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz", - "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==", - "dev": true, - "dependencies": { - "@vue/compiler-dom": "3.4.27", - "@vue/shared": "3.4.27" - } - }, - "node_modules/@vue/devtools-api": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.2.1.tgz", - "integrity": "sha512-6oNCtyFOrNdqm6GUkFujsCgFlpbsHLnZqq7edeM/+cxAbMyCWvsaCsIMUaz7AiluKLccCGEM8fhOsjaKgBvb7g==", - "dev": true, - "dependencies": { - "@vue/devtools-kit": "^7.2.1" - } - }, - "node_modules/@vue/devtools-kit": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.2.1.tgz", - "integrity": "sha512-Wak/fin1X0Q8LLIfCAHBrdaaB+R6IdpSXsDByPHbQ3BmkCP0/cIo/oEGp9i0U2+gEqD4L3V9RDjNf1S34DTzQQ==", - "dev": true, - "dependencies": { - "@vue/devtools-shared": "^7.2.1", - "hookable": "^5.5.3", - "mitt": "^3.0.1", - "perfect-debounce": "^1.0.0", - "speakingurl": "^14.0.1" - }, - "peerDependencies": { - "vue": "^3.0.0" - } - }, - "node_modules/@vue/devtools-shared": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.2.1.tgz", - "integrity": "sha512-PCJF4UknJmOal68+X9XHyVeQ+idv0LFujkTOIW30+GaMJqwFVN9LkQKX4gLqn61KkGMdJTzQ1bt7EJag3TI6AA==", - "dev": true, - "dependencies": { - "rfdc": "^1.3.1" - } - }, - "node_modules/@vue/reactivity": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz", - "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==", - "dev": true, - "dependencies": { - "@vue/shared": "3.4.27" - } - }, - "node_modules/@vue/runtime-core": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz", - "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==", - "dev": true, - "dependencies": { - "@vue/reactivity": "3.4.27", - "@vue/shared": "3.4.27" - } - }, - "node_modules/@vue/runtime-dom": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz", - "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==", - "dev": true, - "dependencies": { - "@vue/runtime-core": "3.4.27", - "@vue/shared": "3.4.27", - "csstype": "^3.1.3" - } - }, - "node_modules/@vue/server-renderer": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz", - "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==", - "dev": true, - "dependencies": { - "@vue/compiler-ssr": "3.4.27", - "@vue/shared": "3.4.27" - }, - "peerDependencies": { - "vue": "3.4.27" - } - }, - "node_modules/@vue/shared": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz", - "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==", - "dev": true - }, - "node_modules/@vueuse/core": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz", - "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==", - "dev": true, - "dependencies": { - "@types/web-bluetooth": "^0.0.20", - "@vueuse/metadata": "10.10.0", - "@vueuse/shared": "10.10.0", - "vue-demi": ">=0.14.7" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - } - }, - "node_modules/@vueuse/core/node_modules/vue-demi": { - "version": "0.14.8", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz", - "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==", - "dev": true, - "hasInstallScript": true, - "bin": { - "vue-demi-fix": "bin/vue-demi-fix.js", - "vue-demi-switch": "bin/vue-demi-switch.js" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - }, - "peerDependencies": { - "@vue/composition-api": "^1.0.0-rc.1", - "vue": "^3.0.0-0 || ^2.6.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } - } - }, - "node_modules/@vueuse/integrations": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.10.0.tgz", - "integrity": "sha512-vHGeK7X6mkdkpcm1eE9t3Cpm21pNVfZRwrjwwbrEs9XftnSgszF4831G2rei8Dt9cIYJIfFV+iyx/29muimJPQ==", - "dev": true, - "dependencies": { - "@vueuse/core": "10.10.0", - "@vueuse/shared": "10.10.0", - "vue-demi": ">=0.14.7" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - }, - "peerDependencies": { - "async-validator": "*", - "axios": "*", - "change-case": "*", - "drauu": "*", - "focus-trap": "*", - "fuse.js": "*", - "idb-keyval": "*", - "jwt-decode": "*", - "nprogress": "*", - "qrcode": "*", - "sortablejs": "*", - "universal-cookie": "*" - }, - "peerDependenciesMeta": { - "async-validator": { - "optional": true - }, - "axios": { - "optional": true - }, - "change-case": { - "optional": true - }, - "drauu": { - "optional": true - }, - "focus-trap": { - "optional": true - }, - "fuse.js": { - "optional": true - }, - "idb-keyval": { - "optional": true - }, - "jwt-decode": { - "optional": true - }, - "nprogress": { - "optional": true - }, - "qrcode": { - "optional": true - }, - "sortablejs": { - "optional": true - }, - "universal-cookie": { - "optional": true - } - } - }, - "node_modules/@vueuse/integrations/node_modules/vue-demi": { - "version": "0.14.8", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz", - "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==", - "dev": true, - "hasInstallScript": true, - "bin": { - "vue-demi-fix": "bin/vue-demi-fix.js", - "vue-demi-switch": "bin/vue-demi-switch.js" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - }, - "peerDependencies": { - "@vue/composition-api": "^1.0.0-rc.1", - "vue": "^3.0.0-0 || ^2.6.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } - } - }, - "node_modules/@vueuse/metadata": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz", - "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==", - "dev": true, - "funding": { - "url": "https://github.com/sponsors/antfu" - } - }, - "node_modules/@vueuse/shared": { - "version": "10.10.0", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz", - "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==", - "dev": true, - "dependencies": { - "vue-demi": ">=0.14.7" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - } - }, - "node_modules/@vueuse/shared/node_modules/vue-demi": { - "version": "0.14.8", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz", - "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==", - "dev": true, - "hasInstallScript": true, - "bin": { - "vue-demi-fix": "bin/vue-demi-fix.js", - "vue-demi-switch": "bin/vue-demi-switch.js" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - }, - "peerDependencies": { - "@vue/composition-api": "^1.0.0-rc.1", - "vue": "^3.0.0-0 || ^2.6.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } - } - }, - "node_modules/algoliasearch": { - "version": "4.23.3", - "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.3.tgz", - "integrity": "sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==", - "dev": true, - "dependencies": { - "@algolia/cache-browser-local-storage": "4.23.3", - "@algolia/cache-common": "4.23.3", - "@algolia/cache-in-memory": "4.23.3", - "@algolia/client-account": "4.23.3", - "@algolia/client-analytics": "4.23.3", - "@algolia/client-common": "4.23.3", - "@algolia/client-personalization": "4.23.3", - "@algolia/client-search": "4.23.3", - "@algolia/logger-common": "4.23.3", - "@algolia/logger-console": "4.23.3", - "@algolia/recommend": "4.23.3", - "@algolia/requester-browser-xhr": "4.23.3", - "@algolia/requester-common": "4.23.3", - "@algolia/requester-node-http": "4.23.3", - "@algolia/transporter": "4.23.3" - } - }, - "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true - }, - "node_modules/entities": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", - "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/esbuild": { - "version": "0.21.5", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", - "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", - "dev": true, - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.21.5", - "@esbuild/android-arm": "0.21.5", - "@esbuild/android-arm64": "0.21.5", - "@esbuild/android-x64": "0.21.5", - "@esbuild/darwin-arm64": "0.21.5", - "@esbuild/darwin-x64": "0.21.5", - "@esbuild/freebsd-arm64": "0.21.5", - "@esbuild/freebsd-x64": "0.21.5", - "@esbuild/linux-arm": "0.21.5", - "@esbuild/linux-arm64": "0.21.5", - "@esbuild/linux-ia32": "0.21.5", - "@esbuild/linux-loong64": "0.21.5", - "@esbuild/linux-mips64el": "0.21.5", - "@esbuild/linux-ppc64": "0.21.5", - "@esbuild/linux-riscv64": "0.21.5", - "@esbuild/linux-s390x": "0.21.5", - "@esbuild/linux-x64": "0.21.5", - "@esbuild/netbsd-x64": "0.21.5", - "@esbuild/openbsd-x64": "0.21.5", - "@esbuild/sunos-x64": "0.21.5", - "@esbuild/win32-arm64": "0.21.5", - "@esbuild/win32-ia32": "0.21.5", - "@esbuild/win32-x64": "0.21.5" - } - }, - "node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true - }, - "node_modules/focus-trap": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz", - "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==", - "dev": true, - "dependencies": { - "tabbable": "^6.2.0" - } - }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/hookable": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz", - "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==", - "dev": true - }, - "node_modules/magic-string": { - "version": "0.30.10", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", - "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15" - } - }, - "node_modules/mark.js": { - "version": "8.11.1", - "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", - "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==", - "dev": true - }, - "node_modules/minisearch": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/minisearch/-/minisearch-6.3.0.tgz", - "integrity": "sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==", - "dev": true - }, - "node_modules/mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", - "dev": true - }, - "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/perfect-debounce": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz", - "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==", - "dev": true - }, - "node_modules/picocolors": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", - "dev": true - }, - "node_modules/postcss": { - "version": "8.4.47", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", - "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.1.0", - "source-map-js": "^1.2.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, - "node_modules/preact": { - "version": "10.22.0", - "resolved": "https://registry.npmjs.org/preact/-/preact-10.22.0.tgz", - "integrity": "sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/preact" - } - }, - "node_modules/rfdc": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz", - "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==", - "dev": true - }, - "node_modules/rollup": { - "version": "4.22.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz", - "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==", - "dev": true, - "dependencies": { - "@types/estree": "1.0.5" - }, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=18.0.0", - "npm": ">=8.0.0" - }, - "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.22.4", - "@rollup/rollup-android-arm64": "4.22.4", - "@rollup/rollup-darwin-arm64": "4.22.4", - "@rollup/rollup-darwin-x64": "4.22.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.22.4", - "@rollup/rollup-linux-arm-musleabihf": "4.22.4", - "@rollup/rollup-linux-arm64-gnu": "4.22.4", - "@rollup/rollup-linux-arm64-musl": "4.22.4", - "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4", - "@rollup/rollup-linux-riscv64-gnu": "4.22.4", - "@rollup/rollup-linux-s390x-gnu": "4.22.4", - "@rollup/rollup-linux-x64-gnu": "4.22.4", - "@rollup/rollup-linux-x64-musl": "4.22.4", - "@rollup/rollup-win32-arm64-msvc": "4.22.4", - "@rollup/rollup-win32-ia32-msvc": "4.22.4", - "@rollup/rollup-win32-x64-msvc": "4.22.4", - "fsevents": "~2.3.2" - } - }, - "node_modules/search-insights": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.14.0.tgz", - "integrity": "sha512-OLN6MsPMCghDOqlCtsIsYgtsC0pnwVTyT9Mu6A3ewOj1DxvzZF6COrn2g86E/c05xbktB0XN04m/t1Z+n+fTGw==", - "dev": true, - "peer": true - }, - "node_modules/shiki": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.6.2.tgz", - "integrity": "sha512-X3hSm5GzzBd/BmPmGfkueOUADLyBoZo1ojYQXhd+NU2VJn458yt4duaS0rVzC+WtqftSV7mTVvDw+OB9AHi3Eg==", - "dev": true, - "dependencies": { - "@shikijs/core": "1.6.2" - } - }, - "node_modules/source-map-js": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", - "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/speakingurl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", - "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/tabbable": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", - "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", - "dev": true - }, - "node_modules/vite": { - "version": "5.4.8", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz", - "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==", - "dev": true, - "dependencies": { - "esbuild": "^0.21.3", - "postcss": "^8.4.43", - "rollup": "^4.20.0" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^18.0.0 || >=20.0.0" - }, - "funding": { - "url": "https://github.com/vitejs/vite?sponsor=1" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" - }, - "peerDependencies": { - "@types/node": "^18.0.0 || >=20.0.0", - "less": "*", - "lightningcss": "^1.21.0", - "sass": "*", - "sass-embedded": "*", - "stylus": "*", - "sugarss": "*", - "terser": "^5.4.0" - }, - "peerDependenciesMeta": { - "@types/node": { - "optional": true - }, - "less": { - "optional": true - }, - "lightningcss": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - } - } - }, - "node_modules/vitepress": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.2.2.tgz", - "integrity": "sha512-uZ3nXR5NY4nYj3RJWCo5jev9qlNZAQo5SUXu1U0QSUx84cUm/o7hCTDVjZ4njVSVui+PsV1oAbdQOg8ygbaf4w==", - "dev": true, - "dependencies": { - "@docsearch/css": "^3.6.0", - "@docsearch/js": "^3.6.0", - "@shikijs/core": "^1.5.2", - "@shikijs/transformers": "^1.5.2", - "@types/markdown-it": "^14.1.1", - "@vitejs/plugin-vue": "^5.0.4", - "@vue/devtools-api": "^7.2.0", - "@vue/shared": "^3.4.27", - "@vueuse/core": "^10.9.0", - "@vueuse/integrations": "^10.9.0", - "focus-trap": "^7.5.4", - "mark.js": "8.11.1", - "minisearch": "^6.3.0", - "shiki": "^1.5.2", - "vite": "^5.2.11", - "vue": "^3.4.27" - }, - "bin": { - "vitepress": "bin/vitepress.js" - }, - "peerDependencies": { - "markdown-it-mathjax3": "^4", - "postcss": "^8" - }, - "peerDependenciesMeta": { - "markdown-it-mathjax3": { - "optional": true - }, - "postcss": { - "optional": true - } - } - }, - "node_modules/vitepress-plugin-tabs": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/vitepress-plugin-tabs/-/vitepress-plugin-tabs-0.5.0.tgz", - "integrity": "sha512-SIhFWwGsUkTByfc2b279ray/E0Jt8vDTsM1LiHxmCOBAEMmvzIBZSuYYT1DpdDTiS3SuJieBheJkYnwCq/yD9A==", - "dev": true, - "peerDependencies": { - "vitepress": "^1.0.0-rc.27", - "vue": "^3.3.8" - } - }, - "node_modules/vue": { - "version": "3.4.27", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz", - "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==", - "dev": true, - "dependencies": { - "@vue/compiler-dom": "3.4.27", - "@vue/compiler-sfc": "3.4.27", - "@vue/runtime-dom": "3.4.27", - "@vue/server-renderer": "3.4.27", - "@vue/shared": "3.4.27" - }, - "peerDependencies": { - "typescript": "*" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - } - } -} diff --git a/docs/package.json b/docs/package.json deleted file mode 100644 index dc21dfe..0000000 --- a/docs/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "scripts": { - "docs:dev": "vitepress dev", - "docs:build": "vitepress build", - "docs:preview": "vitepress preview" - }, - "devDependencies": { - "vitepress": "^1.2.2", - "vitepress-plugin-tabs": "^0.5.0", - "vue": "^3.4.27" - } -} diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico deleted file mode 100644 index 7ed8ece..0000000 Binary files a/docs/public/favicon.ico and /dev/null differ diff --git a/docs/public/logo.jpg b/docs/public/logo.jpg deleted file mode 100644 index 6607a57..0000000 Binary files a/docs/public/logo.jpg and /dev/null differ diff --git a/docs/public/logo.svg b/docs/public/logo.svg deleted file mode 100644 index 61ec585..0000000 --- a/docs/public/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/public/og_image.jpg b/docs/public/og_image.jpg deleted file mode 100644 index 63f39ba..0000000 Binary files a/docs/public/og_image.jpg and /dev/null differ diff --git a/docs/public/pingcrm.png b/docs/public/pingcrm.png deleted file mode 100644 index ff7df37..0000000 Binary files a/docs/public/pingcrm.png and /dev/null differ