Skip to content

Commit

Permalink
Formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
hopsoft committed Jun 14, 2024
1 parent 271d2be commit 8a9a099
Showing 1 changed file with 48 additions and 47 deletions.
95 changes: 48 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,11 @@
- [Prevent Controller Action](#prevent-controller-action)
- [Broadcasting Turbo Streams](#broadcasting-turbo-streams)
- [State](#state)
- [Server State](#server-state)
- [Now State](#now-state)
- [Client State](#client-state)
- [Server-State](#server-state)
- [Now-State](#now-state)
- [Client-State](#client-state)
- [Page-State](#page-state)
- [State Resolution](#state-resolution)
- [Page State](#page-state)
- [Community](#community)
- [Developing](#developing)
- [Notable Files](#notable-files)
Expand Down Expand Up @@ -540,26 +540,26 @@ TurboBoost manages various forms of state to provide a terrific reactive user ex

Here’s a breakdown of each type:

### Server State
### Server-State

Server state is the persistent state that the server used for the most recent render.
Server-State is the persistent state that the server used for the most recent render.
This state is signed, ensuring data integrity and security.

The client includes this signed state along with its own optimistic changes whenever a Command is invoked.
The server can then compute the difference between the client state and the server state,
The server can then compute the difference between the Client-State and the Server-State,
allowing you to accept or reject the client's optimistic changes.

This ensures the server remains the single source of truth.

Server state can be accessed within Commands like so.
Server-State can be accessed within Commands like so.

```ruby
state[:key] = "value"
state[:key]
#=> "value"
```

Server state is also accessible in controllers and views.
Server-State is also accessible in controllers and views.

```ruby
# controller
Expand All @@ -576,22 +576,22 @@ turbo_boost.state[:key]
%>
```

### Now State
### Now-State

Now state is ephemeral server-side state that only exists for the current render cycle.
Now-State is ephemeral server side state that only exists for the current render cycle.
Similar to `flash.now` in Rails, this state is discarded after rendering.

It’s useful for managing temporary data that doesn’t need to persist beyond the current request.

Now state can be accessed within Commands like so.
Now-State can be accessed within Commands like so.

```ruby
state.now[:key] = "value"
state.now[:key]
#=> "value"
```

Server state is also accessible in controllers and views.
Now-State is also accessible in controllers and views.

```ruby
# controller
Expand All @@ -608,35 +608,62 @@ turbo_boost.state.now[:key]
%>
```

### Client State
### Client-State

Client state is a mutable version of the signed server state, wrapped in an observable JavaScript proxy.
This allows for sophisticated techniques like data binding with custom JavaScript, Stimulus controllers, and web components.
Client-State is a mutable version of the signed Server-State, wrapped in an observable JavaScript proxy.
This allows for sophisticated techniques like data binding via custom JavaScript, Stimulus controllers, or web components.

Client-side state enables immediate UI updates, providing a fast and smooth user experience while the server resolves state differences whenever commands are invoked.
Client-side state enables immediate UI updates, providing a fast and smooth user experience while the server
[resolves state](#state-resolution) differences whenever Commands are invoked.

Client state can be accessed on the client like so.
Client-State can be accessed on the client like so.

```js
TurboBoost.State.current['key'] = 'value'
TurboBoost.State.current['key']
//=> 'value'
```

### Page-State

Page-State is managed by the client and used to remember element attribute values between server renders.
It’s best for tracking transient user interactions, like which elements are visible, open/closed, their position, etc.

This enhances the user experience by maintaining the state of UI elements between renders.
When invoking commands, the client sends the Page-State to the server, allowing it to preserve element attributes when rendering.
_The client also checks and restores Page-State whenever the DOM changes if needed._

You can opt-in to remember Page-State with Rails tag helpers via the `turbo_boost[:remember]` option.

```erb
<%= tag.details id: "page-state-example", open: "open", turbo_boost: { remember: [:open] } do %>
<summary>Page-State Example</summary>
Content...
<% end %>
```

_This remembers whether the `details` element is open or closed._

__That's it!__ You're done.

> [!NOTE]
> Page-State tracking works with all element attributes, including `aria` and `data`,
> but elements must have a unique `id` to participate in Page-State tracking.
### State Resolution

Commands can perform state resolution by implementing the `resolve_state` method.

The Command has access to all forms of state, so you should use explicit access during resolution.

You can access both the signed server state and the optimistc client state from within the Command like so.
You can access both the signed Server-State and the optimistc Client-State from within the Command like so.

```ruby
class ExampleCommand < TurboBoost::Commands::Command

def resolve_state
state.signed #=> the server state (from the last render)
state.unsigned #=> the client optimistc state
state.signed #=> the Server-State (from the last render)
state.unsigned #=> the optimistic Client-State
# compare and resolve the delta
end
end
Expand All @@ -654,32 +681,6 @@ TurboBoost::Commands.config.tap do |config|
end
```

### Page State

Page State is managed by the client and used to remember element attribute values between server renders.
It’s best for tracking transient user interactions, like which elements are visible, open/closed, their position, etc.

This enhances the user experience by maintaining the state of UI elements between renders.
When invoking commands, the client sends the page state to the server, allowing it to preserve element attributes when rendering.
_The client also checks and restores page state whenever the DOM changes if needed._

You can opt-in to remember page state with Rails tag helpers via the `turbo_boost[:remember]` option.

```erb
<%= tag.details id: "page-state-example", open: "open", turbo_boost: { remember: [:open] } do %>
<summary>Page State Example</summary>
Content...
<% end %>
```

_This remembers whether the `details` element is open or closed._

__That's it!__ You're done.

> [!NOTE]
> Page state tracking works with all element attributes, including `aria` and `data`,
> but elements must have a unique `id` to participate in page state tracking.
## Community

Come join the party with over 2200+ like-minded friendly Rails/Hotwire enthusiasts on our [Discord server](https://discord.gg/stimulus-reflex).
Expand Down

0 comments on commit 8a9a099

Please sign in to comment.