Observer component and MobX Hooks integration example app

experiments/mobx_hooks/.gitignore

@@ -0,0 +1,6 @@
+# Files and directories created by pub.
+.dart_tool/
+.packages
+
+# Conventional directory for build output.
+build/

experiments/mobx_hooks/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0
+
+- Initial version.

experiments/mobx_hooks/README.md

@@ -0,0 +1 @@
+An absolute bare-bones web app.

experiments/mobx_hooks/analysis_options.yaml

@@ -0,0 +1,30 @@
+# This file configures the static analysis results for your project (errors,
+# warnings, and lints).
+#
+# This enables the 'recommended' set of lints from `package:lints`.
+# This set helps identify many issues that may lead to problems when running
+# or consuming Dart code, and enforces writing Dart using a single, idiomatic
+# style and format.
+#
+# If you want a smaller set of lints you can change this to specify
+# 'package:lints/core.yaml'. These are just the most critical lints
+# (the recommended set includes the core lints).
+# The core lints are also what is used by pub.dev for scoring packages.
+
+include: package:lints/recommended.yaml
+
+# Uncomment the following section to specify additional rules.
+
+# linter:
+#   rules:
+#     - camel_case_types
+
+# analyzer:
+#   exclude:
+#     - path/to/excluded/files/**
+
+# For more information about the core and recommended set of lints, see
+# https://dart.dev/go/core-lints
+
+# For additional information about configuring this file, see
+# https://dart.dev/guides/language/analysis-options

experiments/mobx_hooks/lib/app.dart

@@ -0,0 +1,153 @@
+import 'dart:math';
+
+import 'package:jaspr/jaspr.dart';
+
+import 'mobx_hooks/hooks.dart';
+import 'mobx_hooks/mobx_hooks.dart';
+
+class App extends StatelessComponent {
+  const App({super.key});
+
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    print('build App');
+    final text = useObs(() => 'initial');
+    final output = useObs(() => 0);
+    final seconds = useObs(() => 5);
+    final inputElement = useRef<dynamic>(() => null);
+
+    final reset = useCallback((_) {
+      text.value = 'initial';
+      seconds.value = 5;
+      if (inputElement.value != null) {
+        inputElement.value.value = text.value;
+      }
+    }, const []);
+
+    useAutorun(() {
+      final random = Random(text.value.hashCode);
+      final subs =
+          Stream.periodic(Duration(seconds: seconds.value)).listen((event) {
+        print('event seconds: ${seconds.value}, text: "${text.value}"');
+        output.value = random.nextInt(9000) + 1000;
+      });
+      return subs.cancel;
+    });
+
+    yield DomComponent(
+      tag: 'div',
+      styles: {
+        'display': 'flex',
+        'flex-direction': 'column',
+        'justify-content': 'center',
+        'align-items': 'flex-end',
+        'height': '100%',
+        'width': '270px',
+        'margin': 'auto',
+      },
+      children: [
+        DomComponent(
+          tag: 'div',
+          children: [
+            DomComponent(
+              tag: 'label',
+              styles: {'padding': '0 10px;'},
+              attributes: {'for': 'seed'},
+              child: Text('seed'),
+            ),
+            DomComponent(
+              tag: 'input',
+              id: 'seed',
+              attributes: {'type': 'text', 'value': text.value},
+              events: {
+                'input': (event) {
+                  inputElement.value = event.target;
+                  text.value = inputElement.value.value;
+                }
+              },
+            ),
+          ],
+        ),
+        DomComponent(tag: 'span', styles: {'height': '10px;'}),
+        SecondsInput(seconds: seconds),
+        DomComponent(
+          tag: 'button',
+          styles: {'margin': '10px 0;'},
+          events: {'click': reset},
+          child: Text('reset'),
+        ),
+        OutputText(output: output),
+      ],
+    );
+  }
+}
+
+class SecondsInput extends StatelessComponent {
+  const SecondsInput({super.key, required this.seconds});
+
+  final Obs<int> seconds;
+
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    print('build SecondsInput');
+    final inputElement = useRef<dynamic>(() => null);
+
+    useAutorun(() {
+      final newValue = seconds.value.toString();
+      if (inputElement.value != null) {
+        inputElement.value.value = newValue;
+      }
+      return null;
+    });
+
+    yield DomComponent(
+      tag: 'div',
+      children: [
+        DomComponent(
+          tag: 'label',
+          styles: {'padding': '0 10px;'},
+          attributes: {'for': 'seconds'},
+          child: Text('seconds'),
+        ),
+        DomComponent(
+          tag: 'input',
+          id: 'seconds',
+          attributes: {
+            'type': 'number',
+            'value': inputElement.value?.value ?? seconds.value.toString(),
+          },
+          events: {
+            'input': (event) {
+              inputElement.value = event.target;
+              final value = int.tryParse(event.target.value);
+              if (value != null && value > 0) {
+                seconds.value = value;
+              }
+            }
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class OutputText extends StatelessComponent {
+  const OutputText({super.key, required this.output});
+
+  final Obs<int> output;
+
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    print('build OutputText');
+    yield DomComponent(
+      tag: 'div',
+      children: [
+        DomComponent(
+          tag: 'h1',
+          styles: {'padding': '0 10px;', 'font-family': 'mono'},
+          child: Text('output: ${output.value}'),
+        ),
+      ],
+    );
+  }
+}

experiments/mobx_hooks/lib/main.dart

@@ -0,0 +1,7 @@
+import 'package:jaspr/jaspr.dart';
+import './app.dart';
+import 'mobx_hooks/jaspr_observer.dart';
+
+void main() {
+  runApp(const MobXHooksObserverComponent(child: App()));
+}