WIP: Start extracting remaining inline code to external files (1/3)

Extracted code from:
- your_first_watch_functions.md: Try It Yourself section (4 snippets)
- more_watch_functions.md: All comparison snippets (6 snippets)

Created:
- try_it_yourself_example.dart (4 regions)
- watch_comparison_snippets.dart (6 regions)

All examples compile successfully.

Still TODO: watching_streams_and_futures, handlers, getting_started,
watching_widgets, watch_ordering_rules, lifecycle, observing_commands,
best_practices, debugging_tracing, advanced_integration

Author: escamoteur

code_samples/lib/watch_it/try_it_yourself_example.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:watch_it/watch_it.dart' hide di;
+import '_shared/stubs.dart';
+
+// #region manager
+class MyManager {
+  final message = ValueNotifier<String>('Hello');
+}
+// #endregion manager
+
+// #region register
+void setupMyManager() {
+  di.registerSingleton<MyManager>(MyManager());
+}
+// #endregion register
+
+// #region watch
+class MyWidget extends WatchingWidget {
+  @override
+  Widget build(BuildContext context) {
+    final message = watchValue((MyManager m) => m.message);
+    return Text(message);
+  }
+}
+// #endregion watch
+
+// #region change
+void changeMessage() {
+  di<MyManager>().message.value = 'World!'; // Widget rebuilds!
+}
+// #endregion change
+
+void main() {
+  setupMyManager();
+  runApp(MaterialApp(home: MyWidget()));
+}

code_samples/lib/watch_it/watch_comparison_snippets.dart

@@ -0,0 +1,61 @@
+// ignore_for_file: unused_local_variable, unreachable_from_main
+import 'package:flutter/material.dart';
+import 'package:watch_it/watch_it.dart' hide di;
+import '_shared/stubs.dart';
+
+// #region property_value_difference
+void propertyValueDifference(BuildContext context) {
+  // Rebuilds on EVERY SettingsModel change
+  final settings = watchIt<SettingsModel>();
+  final darkMode1 = settings.darkMode;
+
+  // Rebuilds ONLY when darkMode changes
+  final darkMode2 = watchPropertyValue((SettingsModel m) => m.darkMode);
+}
+// #endregion property_value_difference
+
+// #region quick_comparison
+void quickComparison(BuildContext context) {
+  // 1. watchValue - Most common
+  final todos = watchValue((TodoManager m) => m.todos);
+
+  // 2. watchIt - When manager IS a Listenable
+  final manager = watchIt<CounterModel>();
+
+  // 3. watch - Local or direct Listenable
+  final counter = createOnce(() => ValueNotifier(0));
+  final count = watch(counter).value;
+
+  // 4. watchPropertyValue - Selective updates
+  final darkMode = watchPropertyValue((SettingsModel m) => m.darkMode);
+}
+// #endregion quick_comparison
+
+// #region watchValue_usage
+void watchValueUsage(BuildContext context) {
+  final data = watchValue((DataManager m) => m.data);
+}
+// #endregion watchValue_usage
+
+// #region watchIt_usage
+void watchItUsage(BuildContext context) {
+  final manager = watchIt<CounterModel>();
+  // Can call methods on manager
+}
+// #endregion watchIt_usage
+
+// #region watch_usage
+void watchUsage(BuildContext context) {
+  final controller = createOnce(() => TextEditingController());
+  final text = watch(controller).value.text;
+}
+// #endregion watch_usage
+
+// #region watchPropertyValue_usage
+void watchPropertyValueUsage(BuildContext context) {
+  // Only rebuild when THIS specific property changes
+  final darkMode = watchPropertyValue((SettingsModel m) => m.darkMode);
+}
+// #endregion watchPropertyValue_usage
+
+void main() {}

docs/documentation/watch_it/more_watch_functions.md

@@ -31,56 +31,30 @@ Only rebuild when a specific property changes:
 <<< @/../code_samples/lib/watch_it/watch_property_value_selective_example.dart#example
 
 **The difference:**
-```dart
-// Rebuilds on EVERY SettingsModel change
-final settings = watchIt<SettingsModel>();
-final darkMode = settings.darkMode;
 
-// Rebuilds ONLY when darkMode changes
-final darkMode = watchPropertyValue((SettingsModel m) => m.darkMode);
-```
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#property_value_difference
 
 ## Quick Comparison
 
-```dart
-// 1. watchValue - Most common
-final todos = watchValue((TodoManager m) => m.todos);
-
-// 2. watchIt - When manager IS a Listenable
-final manager = watchIt<TodoManager>();
-
-// 3. watch - Local or direct Listenable
-final counter = createOnce(() => ValueNotifier(0));
-final count = watch(counter).value;
-
-// 4. watchPropertyValue - Selective updates
-final darkMode = watchPropertyValue((Settings m) => m.darkMode);
-```
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#quick_comparison
 
 ## Choosing the Right Function
 
 **Start with `watchValue()`** - it's the most common:
-```dart
-final data = watchValue((Manager m) => m.data);
-```
+
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#watchValue_usage
 
 **Use `watchIt()` when you need the whole object:**
-```dart
-final manager = watchIt<TodoManager>();
-manager.addTodo('New todo');
-```
+
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#watchIt_usage
 
 **Use `watch()` for local Listenables:**
-```dart
-final controller = createOnce(() => TextEditingController());
-final text = watch(controller).value.text;
-```
+
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#watch_usage
 
 **Use `watchPropertyValue()` for optimization:**
-```dart
-// Only rebuild when THIS specific property changes
-final darkMode = watchPropertyValue((Settings m) => m.darkMode);
-```
+
+<<< @/../code_samples/lib/watch_it/watch_comparison_snippets.dart#watchPropertyValue_usage
 
 ## Practical Example
 

docs/documentation/watch_it/your_first_watch_functions.md

@@ -49,32 +49,20 @@ Add a todo? Widget rebuilds automatically. No `setState`, no `StreamBuilder`.
 ## Try It Yourself
 
 1. Create a `ValueNotifier` in your manager:
-   ```dart
-   class MyManager {
-     final message = ValueNotifier<String>('Hello');
-   }
-   ```
+
+   <<< @/../code_samples/lib/watch_it/try_it_yourself_example.dart#manager
 
 2. Register it:
-   ```dart
-   di.registerSingleton<MyManager>(MyManager());
-   ```
+
+   <<< @/../code_samples/lib/watch_it/try_it_yourself_example.dart#register
 
 3. Watch it:
-   ```dart
-   class MyWidget extends WatchingWidget {
-     @override
-     Widget build(BuildContext context) {
-       final message = watchValue((MyManager m) => m.message);
-       return Text(message);
-     }
-   }
-   ```
+
+   <<< @/../code_samples/lib/watch_it/try_it_yourself_example.dart#watch
 
 4. Change it and watch the magic:
-   ```dart
-   di<MyManager>().message.value = 'World!';  // Widget rebuilds!
-   ```
+
+   <<< @/../code_samples/lib/watch_it/try_it_yourself_example.dart#change
 
 ## Key Takeaways