Skip to content

Commit 10f513c

Browse files
committed
adding code comments
1 parent b37de83 commit 10f513c

File tree

2 files changed

+163
-2
lines changed

2 files changed

+163
-2
lines changed

packages/preact_signals/lib/src/signals.dart

Lines changed: 162 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,65 @@ void endBatch() {
107107

108108
typedef BatchCallback<T> = T Function();
109109

110+
/// The `batch` function allows you to combine multiple signal writes into one single update that is triggered at the end when the callback completes.
111+
///
112+
/// ```dart
113+
/// import 'package:preact_signals/preact_signals.dart';
114+
///
115+
/// final name = signal("Jane");
116+
/// final surname = signal("Doe");
117+
/// final fullName = computed(() => name.value + " " + surname.value);
118+
///
119+
/// // Logs: "Jane Doe"
120+
/// effect(() => print(fullName.value));
121+
///
122+
/// // Combines both signal writes into one update. Once the callback
123+
/// // returns the `effect` will trigger and we'll log "Foo Bar"
124+
/// batch(() {
125+
/// name.value = "Foo";
126+
/// surname.value = "Bar";
127+
/// });
128+
/// ```
129+
///
130+
/// When you access a signal that you wrote to earlier inside the callback, or access a computed signal that was invalidated by another signal, we'll only update the necessary dependencies to get the current value for the signal you read from. All other invalidated signals will update at the end of the callback function.
131+
///
132+
/// ```dart
133+
/// import 'package:preact_signals/preact_signals.dart';
134+
///
135+
/// final counter = signal(0);
136+
/// final _double = computed(() => counter.value * 2);
137+
/// final _triple = computed(() => counter.value * 3);
138+
///
139+
/// effect(() => print(_double.value, _triple.value));
140+
///
141+
/// batch(() {
142+
/// counter.value = 1;
143+
/// // Logs: 2, despite being inside batch, but `triple`
144+
/// // will only update once the callback is complete
145+
/// print(_double.value);
146+
/// });
147+
/// // Now we reached the end of the batch and call the effect
148+
/// ```
149+
///
150+
/// Batches can be nested and updates will be flushed when the outermost batch call completes.
151+
///
152+
/// ```dart
153+
/// import 'package:preact_signals/preact_signals.dart';
154+
///
155+
/// final counter = signal(0);
156+
/// effect(() => print(counter.value));
157+
///
158+
/// batch(() {
159+
/// batch(() {
160+
/// // Signal is invalidated, but update is not flushed because
161+
/// // we're still inside another batch
162+
/// counter.value = 1;
163+
/// });
164+
///
165+
/// // Still not updated...
166+
/// });
167+
/// // Now the callback completed and we'll trigger the effect.
168+
/// ```
110169
T batch<T>(BatchCallback<T> callback) {
111170
if (batchDepth > 0) {
112171
return callback();
@@ -126,6 +185,20 @@ int untrackedDepth = 0;
126185

127186
typedef UntrackedCallback<T> = T Function();
128187

188+
/// In case when you're receiving a callback that can read some signals, but you don't want to subscribe to them, you can use `untracked` to prevent any subscriptions from happening.
189+
///
190+
/// ```dart
191+
/// final counter = signal(0);
192+
/// final effectCount = signal(0);
193+
/// final fn = () => effectCount.value + 1;
194+
///
195+
/// effect(() {
196+
/// print(counter.value);
197+
///
198+
/// // Whenever this effect is triggered, run `fn` that gives new value
199+
/// effectCount.value = untracked(fn);
200+
/// });
201+
/// ```
129202
T untracked<T>(UntrackedCallback<T> callback) {
130203
if (untrackedDepth > 0) {
131204
return callback();
@@ -243,7 +316,22 @@ abstract class ReadonlySignal<T> {
243316
/// Return the value when invoked
244317
T call();
245318

246-
/// Returns the current value without subscribing to updates.
319+
/// In the rare instance that you have an effect that should write to another signal based on the previous value, but you _don't_ want the effect to be subscribed to that signal, you can read a signals's previous value via `signal.peek()`.
320+
///
321+
/// ```dart
322+
/// final counter = signal(0);
323+
/// final effectCount = signal(0);
324+
///
325+
/// effect(() {
326+
/// print(counter.value);
327+
///
328+
/// // Whenever this effect is triggered, increase `effectCount`.
329+
/// // But we don't want this signal to react to `effectCount`
330+
/// effectCount.value = effectCount.peek() + 1;
331+
/// });
332+
/// ```
333+
///
334+
/// Note that you should only use `signal.peek()` if you really need it. Reading a signal's value via `signal.value` is the preferred way in most scenarios.
247335
T peek();
248336

249337
/// Subscribe to value changes
@@ -406,6 +494,21 @@ class Signal<T> implements MutableSignal<T> {
406494
Node? _targets;
407495
}
408496

497+
/// The `signal` function creates a new signal. A signal is a container for a value that can change over time. You can read a signal's value or subscribe to value updates by accessing its `.value` property.
498+
///
499+
/// ```dart
500+
/// import 'package:preact_signals/preact_signals.dart';
501+
///
502+
/// final counter = signal(0);
503+
///
504+
/// // Read value from signal, logs: 0
505+
/// print(counter.value);
506+
///
507+
/// // Write to a signal
508+
/// counter.value = 1;
509+
/// ```
510+
///
511+
/// Writing to a signal is done by setting its `.value` property. Changing a signal's value synchronously updates every [computed](#computedfn) and [effect](#effectfn) that depends on that signal, ensuring your app state is always consistent.
409512
MutableSignal<T> signal<T>(T value, {String? debugLabel}) {
410513
return Signal<T>(value, debugLabel: debugLabel);
411514
}
@@ -695,6 +798,27 @@ class Computed<T> implements Listenable, ReadonlySignal<T> {
695798

696799
typedef ComputedCallback<T> = T Function();
697800

801+
/// Data is often derived from other pieces of existing data. The `computed` function lets you combine the values of multiple signals into a new signal that can be reacted to, or even used by additional computeds. When the signals accessed from within a computed callback change, the computed callback is re-executed and its new return value becomes the computed signal's value.
802+
///
803+
/// ```dart
804+
/// import 'package:preact_signals/preact_signals.dart';
805+
///
806+
/// final name = signal("Jane");
807+
/// final surname = signal("Doe");
808+
///
809+
/// final fullName = computed(() => name.value + " " + surname.value);
810+
///
811+
/// // Logs: "Jane Doe"
812+
/// print(fullName.value);
813+
///
814+
/// // Updates flow through computed, but only if someone
815+
/// // subscribes to it. More on that later.
816+
/// name.value = "John";
817+
/// // Logs: "John Doe"
818+
/// print(fullName.value);
819+
/// ```
820+
///
821+
/// Any signal that is accessed inside the `computed`'s callback function will be automatically subscribed to and tracked as a dependency of the computed signal.
698822
ReadonlySignal<T> computed<T>(
699823
ComputedCallback<T> compute, {
700824
String? debugLabel,
@@ -822,6 +946,43 @@ class Effect implements Listenable {
822946
}
823947
}
824948

949+
/// The `effect` function is the last piece that makes everything reactive. When you access a signal inside its callback function, that signal and every dependency of said signal will be activated and subscribed to. In that regard it is very similar to [`computed(fn)`](#computedfn). By default all updates are lazy, so nothing will update until you access a signal inside `effect`.
950+
///
951+
/// ```dart
952+
/// import 'package:preact_signals/preact_signals.dart';
953+
///
954+
/// final name = signal("Jane");
955+
/// final surname = signal("Doe");
956+
/// final fullName = computed(() => name.value + " " + surname.value);
957+
///
958+
/// // Logs: "Jane Doe"
959+
/// effect(() => print(fullName.value));
960+
///
961+
/// // Updating one of its dependencies will automatically trigger
962+
/// // the effect above, and will print "John Doe" to the console.
963+
/// name.value = "John";
964+
/// ```
965+
///
966+
/// You can destroy an effect and unsubscribe from all signals it was subscribed to, by calling the returned function.
967+
///
968+
/// ```dart
969+
/// import 'package:preact_signals/preact_signals.dart';
970+
///
971+
/// final name = signal("Jane");
972+
/// final surname = signal("Doe");
973+
/// final fullName = computed(() => name.value + " " + surname.value);
974+
///
975+
/// // Logs: "Jane Doe"
976+
/// final dispose = effect(() => print(fullName.value));
977+
///
978+
/// // Destroy effect and subscriptions
979+
/// dispose();
980+
///
981+
/// // Update does nothing, because no one is subscribed anymore.
982+
/// // Even the computed `fullName` signal won't change, because it knows
983+
/// // that no one listens to it.
984+
/// surname.value = "Doe 2";
985+
/// ```
825986
EffectCleanup effect(EffectCallback compute, {String? debugLabel}) {
826987
final effect = Effect(compute, debugLabel: debugLabel);
827988
try {

packages/preact_signals/pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
name: preact_signals
22
description: Signal, Computed and Effect built with dart
3-
version: 0.1.0
3+
version: 0.1.0+1
44
repository: https://github.com/rodydavis/preact_signals.dart
55

66
environment:

0 commit comments

Comments
 (0)