Skip to content

Commit 271d2be

Browse files
committed
Verbiage and formatting
1 parent 05ec2e7 commit 271d2be

File tree

1 file changed

+25
-18
lines changed

1 file changed

+25
-18
lines changed

README.md

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,7 @@ _Learn more about Turbo Stream broadcasting by reading through the
536536
537537
## State
538538

539-
TurboBoost Commands manage various forms of state to provide a terrific reactive user experience.
539+
TurboBoost manages various forms of state to provide a terrific reactive user experience.
540540

541541
Here’s a breakdown of each type:
542542

@@ -546,31 +546,33 @@ Server state is the persistent state that the server used for the most recent re
546546
This state is signed, ensuring data integrity and security.
547547

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

552552
This ensures the server remains the single source of truth.
553553

554-
Server state can be accessed within your Commands like so.
554+
Server state can be accessed within Commands like so.
555555

556556
```ruby
557557
state[:key] = "value"
558558
state[:key]
559559
#=> "value"
560560
```
561561

562-
Server state is also accessible your controllers and views.
562+
Server state is also accessible in controllers and views.
563563

564564
```ruby
565565
# controller
566566
turbo_boost.state[:key] = "value"
567-
turbo_boost.state[:key] #=> "value"
567+
turbo_boost.state[:key]
568+
#=> "value"
568569
```
569570

570571
```erb
571572
<%
572573
turbo_boost.state[:key] = "value"
573-
turbo_boost.state[:key] #=> "value"
574+
turbo_boost.state[:key]
575+
#=> "value"
574576
%>
575577
```
576578

@@ -581,26 +583,28 @@ Similar to `flash.now` in Rails, this state is discarded after rendering.
581583

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

584-
Now state can be accessed within your Commands like so.
586+
Now state can be accessed within Commands like so.
585587

586588
```ruby
587589
state.now[:key] = "value"
588590
state.now[:key]
589591
#=> "value"
590592
```
591593

592-
Server state is also accessible your controllers and views.
594+
Server state is also accessible in controllers and views.
593595

594596
```ruby
595597
# controller
596598
turbo_boost.state.now[:key] = "value"
597-
turbo_boost.state.now[:key] #=> "value"
599+
turbo_boost.state.now[:key]
600+
#=> "value"
598601
```
599602

600603
```erb
601604
<%
602605
turbo_boost.state.now[:key] = "value"
603-
turbo_boost.state.now[:key] #=> "value"
606+
turbo_boost.state.now[:key]
607+
#=> "value"
604608
%>
605609
```
606610

@@ -615,7 +619,8 @@ Client state can be accessed on the client like so.
615619

616620
```js
617621
TurboBoost.State.current['key'] = 'value'
618-
TurboBoost.State.current['key'] //=> 'value'
622+
TurboBoost.State.current['key']
623+
//=> 'value'
619624
```
620625

621626
### State Resolution
@@ -624,21 +629,21 @@ Commands can perform state resolution by implementing the `resolve_state` method
624629

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

627-
You can access both the signed state and the optimistc client state from within the Command like so.
632+
You can access both the signed server state and the optimistc client state from within the Command like so.
628633

629634
```ruby
630635
class ExampleCommand < TurboBoost::Commands::Command
631636

632637
def resolve_state
633-
state.signed #=> the server state used to perform the last render
638+
state.signed #=> the server state (from the last render)
634639
state.unsigned #=> the client optimistc state
635640
# compare and resolve the delta
636641
end
637642
end
638643
```
639644

640645
> [!TIP]
641-
> State resolution can involve data lookups, updates to persistent data stores, interactions with third-party APIs, etc.
646+
> State resolution can involve data lookups, updates to persistent data stores, calls to 3rd party APIs, etc.
642647
643648
You can opt-in to state resolution with the following config option.
644649

@@ -652,13 +657,13 @@ end
652657
### Page State
653658

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

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

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

663668
```erb
664669
<%= tag.details id: "page-state-example", open: "open", turbo_boost: { remember: [:open] } do %>
@@ -667,10 +672,12 @@ You can opt-in to remember transient page state with Rails tag helpers with the
667672
<% end %>
668673
```
669674

675+
_This remembers whether the `details` element is open or closed._
676+
670677
__That's it!__ You're done.
671678

672679
> [!NOTE]
673-
> This feature works with all attributes, including `aria`, `data`, and custom attributes,
680+
> Page state tracking works with all element attributes, including `aria` and `data`,
674681
> but elements must have a unique `id` to participate in page state tracking.
675682
676683
## Community

0 commit comments

Comments
 (0)