@@ -536,7 +536,7 @@ _Learn more about Turbo Stream broadcasting by reading through the
536
536
537
537
## State
538
538
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.
540
540
541
541
Here’s a breakdown of each type:
542
542
@@ -546,31 +546,33 @@ Server state is the persistent state that the server used for the most recent re
546
546
This state is signed, ensuring data integrity and security.
547
547
548
548
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,
550
550
allowing you to accept or reject the client's optimistic changes.
551
551
552
552
This ensures the server remains the single source of truth.
553
553
554
- Server state can be accessed within your Commands like so.
554
+ Server state can be accessed within Commands like so.
555
555
556
556
``` ruby
557
557
state[:key ] = " value"
558
558
state[:key ]
559
559
# => "value"
560
560
```
561
561
562
- Server state is also accessible your controllers and views.
562
+ Server state is also accessible in controllers and views.
563
563
564
564
``` ruby
565
565
# controller
566
566
turbo_boost.state[:key ] = " value"
567
- turbo_boost.state[:key ] # => "value"
567
+ turbo_boost.state[:key ]
568
+ # => "value"
568
569
```
569
570
570
571
``` erb
571
572
<%
572
573
turbo_boost.state[:key] = "value"
573
- turbo_boost.state[:key] #=> "value"
574
+ turbo_boost.state[:key]
575
+ #=> "value"
574
576
%>
575
577
```
576
578
@@ -581,26 +583,28 @@ Similar to `flash.now` in Rails, this state is discarded after rendering.
581
583
582
584
It’s useful for managing temporary data that doesn’t need to persist beyond the current request.
583
585
584
- Now state can be accessed within your Commands like so.
586
+ Now state can be accessed within Commands like so.
585
587
586
588
``` ruby
587
589
state.now[:key ] = " value"
588
590
state.now[:key ]
589
591
# => "value"
590
592
```
591
593
592
- Server state is also accessible your controllers and views.
594
+ Server state is also accessible in controllers and views.
593
595
594
596
``` ruby
595
597
# controller
596
598
turbo_boost.state.now[:key ] = " value"
597
- turbo_boost.state.now[:key ] # => "value"
599
+ turbo_boost.state.now[:key ]
600
+ # => "value"
598
601
```
599
602
600
603
``` erb
601
604
<%
602
605
turbo_boost.state.now[:key] = "value"
603
- turbo_boost.state.now[:key] #=> "value"
606
+ turbo_boost.state.now[:key]
607
+ #=> "value"
604
608
%>
605
609
```
606
610
@@ -615,7 +619,8 @@ Client state can be accessed on the client like so.
615
619
616
620
``` js
617
621
TurboBoost .State .current [' key' ] = ' value'
618
- TurboBoost .State .current [' key' ] // => 'value'
622
+ TurboBoost .State .current [' key' ]
623
+ // => 'value'
619
624
```
620
625
621
626
### State Resolution
@@ -624,21 +629,21 @@ Commands can perform state resolution by implementing the `resolve_state` method
624
629
625
630
The Command has access to all forms of state, so you should use explicit access during resolution.
626
631
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.
628
633
629
634
``` ruby
630
635
class ExampleCommand < TurboBoost ::Commands ::Command
631
636
632
637
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)
634
639
state.unsigned # => the client optimistc state
635
640
# compare and resolve the delta
636
641
end
637
642
end
638
643
```
639
644
640
645
> [ !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.
642
647
643
648
You can opt-in to state resolution with the following config option.
644
649
@@ -652,13 +657,13 @@ end
652
657
### Page State
653
658
654
659
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 .
656
661
657
662
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.
659
664
_ The client also checks and restores page state whenever the DOM changes if needed._
660
665
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.
662
667
663
668
``` erb
664
669
<%= 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
667
672
<% end %>
668
673
```
669
674
675
+ _ This remembers whether the ` details ` element is open or closed._
676
+
670
677
__ That's it!__ You're done.
671
678
672
679
> [ !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 ` ,
674
681
> but elements must have a unique ` id ` to participate in page state tracking.
675
682
676
683
## Community
0 commit comments