Merge pull request #9 from rodydavis/value-signals

Creating signals for Map, Set, Iterable, List

Author: rodydavis

README.md

@@ -5,10 +5,11 @@
 
 Complete dart port of [Preact signals](https://preactjs.com/blog/introducing-signals/) and takes full advantage of [signal boosting](https://preactjs.com/blog/signal-boosting/).
 
-| Package                  | Pub                                                                                                                                   |
-|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
-| `preact_signals`         | [![preact_signals](https://img.shields.io/pub/v/preact_signals.svg)](https://pub.dev/packages/preact_signals)                         |
-| `flutter_preact_signals` | [![flutter_preact_signals](https://img.shields.io/pub/v/flutter_preact_signals.svg)](https://pub.dev/packages/flutter_preact_signals) |
+| Package                                                                           | Pub                                                                                                                                   |
+| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [`preact_signals`](packages/preact_signals)                                       | [![preact_signals](https://img.shields.io/pub/v/preact_signals.svg)](https://pub.dev/packages/preact_signals)                         |
+| [`flutter_preact_signals`](packages/flutter_preact_signals)                       | [![flutter_preact_signals](https://img.shields.io/pub/v/flutter_preact_signals.svg)](https://pub.dev/packages/flutter_preact_signals) |
+| [`preact_signals_devtools_extension`](packages/preact_signals_devtools_extension) |                                                                                                                                       |
 
 ## Guide / API
 
@@ -193,223 +194,3 @@ batch(() {
 });
 // Now the callback completed and we'll trigger the effect.
 ```
-
-## Extensions
-
-### `Future`
-
-Futures can be converted to signals by either a method `signalFromFuture` or as an extension method on a `Future`:
-
-```dart
-import 'package:preact_signals/preact_signals.dart';
-
-final future = Future(() => 1);
-final signal = future.toSignal(); // or signalFromFuture(future)
-```
-
-> This will return a sealed union based on `SignalState` that will return `SignalValue` for success, `SignalError` for errors (and `SignalTimeout` on optional timeout), and `SignalLoading`.
-
-### `Stream`
-
-Futures can be converted to signals by either a method `signalFromFuture` or as an extension method on a `Future`:
-
-```dart
-import 'package:preact_signals/preact_signals.dart';
-
-Stream<int> createStream() async* {
-    yield 1;
-    yield 2;
-    yield 3;
-}
-final stream = createStream();
-final signal = stream.toSignal(); // or signalFromStream(stream)
-```
-
-> This will return a sealed union based on `SignalState` that will return `SignalValue` for success, `SignalError` for errors (and `SignalTimeout` on optional timeout), and `SignalLoading`.
-
-### `ValueListenable`
-
-To create a `ReadonlySignal` from `ValueListenable`:
-
-```dart
-import 'package:flutter_preact_signals/flutter_preact_signals.dart';
-import 'package:flutter/material.dart';
-
-final ValueListenable listenable = ValueNotifier(10);
-final signal = listenable.toSignal(); // or signalFromValueListenable(listenable)
-```
-
-### `ValueNotifier`
-
-To create a `MutableSignal` from `ValueNotifier`:
-
-```dart
-import 'package:flutter_preact_signals/flutter_preact_signals.dart';
-import 'package:flutter/material.dart';
-
-final notifier = ValueNotifier(10);
-final signal = notifier.toSignal(); // or signalFromValueNotifier(notifier)
-```
-
-
-### `BuildContext` and Widgets
-
-`StatefulWidget` and `StatelessWidget` widgets can both react to changes on a signal by adding a `watch`` command:
-
-```dart
-import 'package:flutter_preact_signals/flutter_preact_signals.dart';
-
-Text(
-  '${counter.watch(context)}',
-  style: Theme.of(context).textTheme.headlineMedium!,
-)
-```
-
-or with `watchSignal`:
-
-```dart
-import 'package:flutter_preact_signals/flutter_preact_signals.dart';
-
-Text(
-  '${watchSignal(context, counter)}',
-  style: Theme.of(context).textTheme.headlineMedium!,
-)
-```
-
-This will mark the widget as dirty and rebuild on next frame. This will all be optimized for batched effects and multiple signals being updated at the same time.
-
-## Examples
-
-### Dart
-
-```dart
-import 'package:preact_signals/preact_signals.dart';
-
-// Create signals
-final count = signal(0);
-final multiplier = signal(2);
-
-// Creating a computed value
-final multipliedCount = computed(() {
-    return count.value * multiplier.value;
-});
-
-effect(() {
-    print('Effect called: Count is ${count.value} and multiplier is ${multiplier.value}');
-});
-
-expect(multipliedCount.value, 0);
-
-count.value = 1;
-expect(multipliedCount.value, 2);
-
-multiplier.value = 3;
-expect(multipliedCount.value, 3);
-```
-
-This should print:
-
-```
-Effect called: Count is 0 and multiplier is 2
-Effect called: Count is 1 and multiplier is 2
-Effect called: Count is 1 and multiplier is 3
-```
-
-See [preact_signals/example](packages/preact_signals/example/web/main.dart) for a full example.
-
-### Flutter
-
-Reacting to signal changes can be done with one extension method: `watch(context)`:
-
-```dart
-import 'package:flutter/material.dart';
-import 'package:flutter_preact_signals/flutter_preact_signals.dart';
-
-void main() {
-  runApp(const MyApp());
-}
-
-final brightness = signal(Brightness.light);
-final counter = signal(0);
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: Colors.deepPurple,
-          brightness: Brightness.light,
-        ),
-        brightness: Brightness.light,
-        useMaterial3: true,
-      ),
-      darkTheme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: Colors.deepPurple,
-          brightness: Brightness.dark,
-        ),
-        brightness: Brightness.dark,
-        useMaterial3: true,
-      ),
-      themeMode: brightness.watch(context) == Brightness.dark
-          ? ThemeMode.dark
-          : ThemeMode.light,
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatelessWidget {
-  const MyHomePage({super.key, required this.title});
-
-  final String title;
-
-  void _incrementCounter() {
-    counter.value++;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(title),
-        actions: [
-          Builder(builder: (context) {
-            final isDark = brightness.watch(context) == Brightness.dark;
-            return IconButton(
-              onPressed: () {
-                brightness.value = isDark ? Brightness.light : Brightness.dark;
-              },
-              icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
-            );
-          }),
-        ],
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '${counter.watch(context)}',
-              style: Theme.of(context).textTheme.headlineMedium!,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
-      ),
-    );
-  }
-}
-```

packages/flutter_preact_signals/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.2.1
+
+- Fixing `watchSignal` so it works in StatefulWidgets and inside rebuilds and subscriber list will remain stable
+- Updating example to show non global signal
+- Adding extension methods on `ReadonlySignal`: `stream`, `listenable`
+- Adding extension methods on `MutableSignal`: `notifier`, `readonly`
+- Updating `preact_signals` to 0.3.0
+
 ## 0.2.0
 
 - Updating `preact_signals` to 0.2.1
@@ -14,7 +22,7 @@
 ## 0.0.2
 
 - Fixing recursive call after refactor
-- 
+
 ## 0.0.1
 
 - Adding extensions for `ValueNotifier`, `ValueListenable` and `BuildContext`

packages/flutter_preact_signals/README.md

@@ -1,9 +1,13 @@
 [![flutter_preact_signals](https://img.shields.io/pub/v/flutter_preact_signals.svg)](https://pub.dev/packages/flutter_preact_signals)
+[![Tests](https://github.com/rodydavis/preact_signals.dart/actions/workflows/tests.yml/badge.svg)](https://github.com/rodydavis/preact_signals.dart/actions/workflows/tests.yml)
+[![Publish Example](https://github.com/rodydavis/preact_signals.dart/actions/workflows/main.yml/badge.svg)](https://github.com/rodydavis/preact_signals.dart/actions/workflows/main.yml)
 
 # Preact Signals (Flutter)
 
 Complete dart port of [Preact signals](https://preactjs.com/blog/introducing-signals/) and takes full advantage of [signal boosting](https://preactjs.com/blog/signal-boosting/).
 
+This package is a set of Flutter extensions for the [`preact_signals`](https://pub.dev/packages/preact_signals) package.
+
 ## Guide / API
 
 The signals library exposes four functions which are the building blocks to model any business logic you can think of.
@@ -188,6 +192,87 @@ batch(() {
 // Now the callback completed and we'll trigger the effect.
 ```
 
+## Value Signals
+
+To provide a more connivent API for common value types, various wrappers are created that implement all the public methods and notify on mutations will keeping the same object reference.
+
+### List
+
+List signals can be created by extension, method or class:
+
+```dart
+import 'package:preact_signals/preact_signals.dart';
+
+final list = ['a', 'b', 'c'];
+
+final s1 = list.toSignal();
+final s2 = listSignal(list);
+final s3 = ListSignal(list);
+```
+
+Mutations can also be done directly:
+
+```dart
+final s = listSignal([1, 2, 3]);
+s[0] = -1;
+print(s.length); // 3
+s.addAll([4, 5, 6]);
+s.first = 1;
+```
+
+### Set
+
+Set signals can be created by extension, method or class:
+
+```dart
+import 'package:preact_signals/preact_signals.dart';
+
+final set = {'a', 'b', 'c'};
+
+final s1 = set.toSignal();
+
+final s2 = setSignal(set);
+
+final s3 = SetSignal(set);
+```
+
+### Map
+
+Map signals can be created by extension, method or class:
+
+```dart
+import 'package:preact_signals/preact_signals.dart';
+
+final map = {'a': 1, 'b': 2, 'c': 3};
+
+final s1 = map.toSignal();
+
+final s2 = mapSignal(map);
+
+final s3 = MapSignal(map);
+```
+
+### Iterable
+
+Iterable signals can be created by extension, method or class:
+
+```dart
+import 'package:preact_signals/preact_signals.dart';
+
+final iterable = () sync* {
+	yield '1';
+	yield '2';
+	yield '3';
+	return '4';
+};
+
+final s1 = iterable.toSignal();
+
+final s2 = iterableSignal(iterable);
+
+final s3 = IterableSignal(iterable);
+```
+
 ## Extensions
 
 ### `Future`
@@ -245,7 +330,6 @@ final notifier = ValueNotifier(10);
 final signal = notifier.toSignal(); // or signalFromValueNotifier(notifier)
 ```
 
-
 ### `BuildContext` and Widgets
 
 `StatefulWidget` and `StatelessWidget` widgets can both react to changes on a signal by adding a `watch`` command:
@@ -367,4 +451,8 @@ class MyHomePage extends StatelessWidget {
     );
   }
 }
-```
+```
+
+## DevTools
+
+There is an early version of a devtools extension included with the [preact_signals] package.