Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update docs #190

Merged
merged 9 commits into from
Feb 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export default defineConfig({
items: [
{ text: 'Asset versioning', link: '/guide/asset-versioning' },
{ text: 'Code splitting', link: '/guide/code-splitting' },
{ text: 'Configuration', link: '/guide/configuration' },
{ text: 'Error handling', link: '/guide/error-handling' },
{ text: 'Events', link: '/guide/events' },
{ text: 'Progress indicators', link: '/guide/progress-indicators' },
Expand Down
86 changes: 86 additions & 0 deletions docs/guide/configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Configuration

Inertia Rails can be configured globally or in a specific controller (and subclasses).

## Global Configuration

If using global configuration, we recommend you place the code inside an initializer:

```ruby
# config/initializers/inertia.rb

InertiaRails.configure do |config|
# Example: force a full-reload if the deployed assets change.
config.version = ViteRuby.digest
end
```

The default configuration can be found [here](https://github.com/inertiajs/inertia-rails/blob/master/lib/inertia_rails/configuration.rb#L5).

## Local Configuration

Use `inertia_config` in your controllers to override global settings:

```ruby
class EventsController < ApplicationController
inertia_config(
version: "events-#{InertiaRails.configuration.version}",
ssr_enabled: -> { action_name == "index" },
)
end
```

## Configuration Options

### `component_path_resolver`

Use `component_path_resolver` to customize component path resolution when [`default_render`](#default_render) config value is set to `true`. The value should be callable and will receive the `path` and `action` parameters, returning a string component path. See [Automatically determine component name](/guide/responses#automatically-determine-component-name).

**Default**: `->(path:, action:) { "#{path}/#{action}" }`

### `deep_merge_shared_data`

When enabled, props will be deep merged with shared data, combining hashes
with the same keys instead of replacing them.

**Default**: `false`

### `default_render`

Overrides Rails default rendering behavior to render using Inertia by default.

**Default**: `false`

### `encrypt_history`

When enabled, you instruct Inertia to encrypt your app's history, it uses
the browser's built-in [`crypto` api](https://developer.mozilla.org/en-US/docs/Web/API/Crypto)
to encrypt the current page's data before pushing it to the history state.

**Default**: `false`

### `ssr_enabled` _(experimental)_

Whether to use a JavaScript server to pre-render your JavaScript pages,
allowing your visitors to receive fully rendered HTML when they first visit
your application.

Requires a JS server to be available at `ssr_url`. [_Example_](https://github.com/ElMassimo/inertia-rails-ssr-template)

**Default**: `false`

### `ssr_url` _(experimental)_

The URL of the JS server that will pre-render the app using the specified
component and props.

**Default**: `"http://localhost:13714"`

### `version` _(recommended)_

This allows Inertia to detect if the app running in the client is oudated,
forcing a full page visit instead of an XHR visit on the next request.

See [assets versioning](https://inertiajs.com/asset-versioning).

**Default**: `nil`
1 change: 1 addition & 0 deletions docs/guide/csrf-protection.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ Axios automatically checks for the existence of an `XSRF-TOKEN` cookie. If it's
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).

> [!NOTE]
>
> `X-XSRF-TOKEN` header only works for [Inertia requests](/guide/the-protocol#inertia-responses). If you want to send a normal request you can use `X-CSRF-TOKEN` instead.

## Handling mismatches
Expand Down
4 changes: 2 additions & 2 deletions docs/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ return (
)
```

== Svelte 4|Svelte 5
== Svelte 4

```svelte
<script>
Expand Down Expand Up @@ -565,7 +565,7 @@ $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.
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 `setError()` method.

:::tabs key:frameworks
== Vue
Expand Down
6 changes: 6 additions & 0 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
---
next:
text: 'Demo Application'
link: '/guide/demo-application'
---

# Introduction

Welcome to the documentation for [inertia_rails](https://github.com/inertiajs/inertia-rails) adapter for [Ruby on Rails](https://rubyonrails.org/) and [Inertia.js](https://inertiajs.com/).
Expand Down
11 changes: 10 additions & 1 deletion docs/guide/responses.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@ 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.

If the default component path doesn't match your convention, you can define a custom resolution method via the `component_path_resolver` config value. The value should be callable and will receive the path and action parameters, returning a string component path.

````ruby
inertia_config(
component_path_resolver: ->(path:, action:) do
"Storefront/#{path.camelize}/#{action.camelize}"
end
)

## 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.
Expand All @@ -97,7 +106,7 @@ There are situations where you may want to access your prop data in your ERB tem
<% end %>

<div id="app" data-page="<%= page.to_json %>"></div>
```
````

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.

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@ class UsersController < ApplicationController
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.
Another option is to use [JsRoutes](https://github.com/railsware/js-routes) or [JS From Routes](https://js-from-routes.netlify.app) gems that make named server-side routes available on the client via autogenerated helpers.
55 changes: 45 additions & 10 deletions docs/guide/shared-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,59 @@ Sometimes you need to access specific pieces of data on numerous pages within yo

## 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.
The `inertia_share` method allows you to define data that will be available to all controller actions, automatically merging with page-specific props.

### Basic Usage

```ruby
class EventsController < ApplicationController
# share synchronously
inertia_share app_name: env['app.name']
# Static sharing: Data is evaluated immediately
inertia_share app_name: Rails.configuration.app_name

# share lazily, evaluated at render time
# Dynamic sharing: Data is evaluated at render time
inertia_share do
if logged_in?
{
user: logged_in_user,
{
user: current_user,
notifications: current_user&.unread_notifications_count
} if user_signed_in?
end

# Alternative syntax for single dynamic values
inertia_share total_users: -> { User.count }
end
```

### Conditional Sharing

You can control when data is shared using Rails-style controller filters. The `inertia_share` method supports these filter options:

- `only`: Share data for specific actions
- `except`: Share data for all actions except specified ones
- `if`: Share data when condition is true
- `unless`: Share data when condition is false

```ruby
class EventsController < ApplicationController
# Share user data only when authenticated
inertia_share if: :user_signed_in? do
{
user: {
name: current_user.name,
email: current_user.email,
role: current_user.role
}
end
}
end

# share lazily alternate syntax
inertia_share user_count: lambda { User.count }
# Share data only for specific actions
inertia_share only: [:index, :show] do
{
meta: {
last_updated: Time.current,
version: "1.0"
}
}
end
end
```

Expand Down
2 changes: 1 addition & 1 deletion docs/guide/the-protocol.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Content-Type: text/html; charset=utf-8
```

> [!NOTE]
> While the initial response is HTML, Inertia does not server-side render the JavaScript page components.
> While the initial response is HTML, Inertia does not server-side render the JavaScript page components by default (see [Server-side Rendering](http://localhost:5173/guide/server-side-rendering)).

## Inertia responses

Expand Down
Loading