feat: add devtools (WIP)

packages/fl_query/.flutter-plugins-dependencies

@@ -1 +1 @@
-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.11/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-29 08:31:10.347646","version":"3.10.2"}
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.11/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-29 12:06:55.360188","version":"3.10.2"}

packages/fl_query/example/lib/main.dart

@@ -23,6 +23,9 @@ class MainApp extends StatelessWidget {
         useMaterial3: true,
       ),
       title: 'FL Query Example',
+      builder: (context, child) {
+        return FlQueryDevtools(child: child);
+      },
       routerConfig: router,
     );
   }

packages/fl_query/example/pubspec.lock

@@ -151,6 +151,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.6.7"
+  json_view:
+    dependency: transitive
+    description:
+      name: json_view
+      sha256: a60ea6dae3a3fe7a94418bdbc9e66f990f7a4582e010b091d27db16ab6fb1a3e
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.1"
   lints:
     dependency: transitive
     description:

packages/fl_query/lib/fl_query.dart

@@ -17,3 +17,5 @@ export 'src/widgets/query_listenable.dart';
 export 'src/widgets/infinite_query_builder.dart';
 export 'src/widgets/infinite_query_listenable.dart';
 export 'src/widgets/mutation_builder.dart';
+
+export 'src/devtools/devtools.dart';

packages/fl_query/lib/src/collections/refresh_config.dart

@@ -58,4 +58,13 @@ class RefreshConfig {
           refreshOnQueryFnChange ?? this.refreshOnQueryFnChange,
     );
   }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'staleDuration': staleDuration.toString(),
+      'refreshInterval': refreshInterval.toString(),
+      'refreshOnMount': refreshOnMount,
+      'refreshOnQueryFnChange': refreshOnQueryFnChange,
+    };
+  }
 }

packages/fl_query/lib/src/collections/retry_config.dart

@@ -38,4 +38,11 @@ class RetryConfig {
       retryDelay: retryDelay ?? this.retryDelay,
     );
   }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'maxRetries': maxRetries,
+      'retryDelay': retryDelay.toString(),
+    };
+  }
 }

packages/fl_query/lib/src/devtools/devtools.dart

@@ -0,0 +1,95 @@
+import 'package:fl_query/src/devtools/widgets/devtools_root.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+class FlQueryDevtools extends StatefulWidget {
+  final Widget? child;
+  const FlQueryDevtools({
+    super.key,
+    this.child,
+  });
+
+  @override
+  State<FlQueryDevtools> createState() => _FlQueryDevtoolsState();
+}
+
+class _FlQueryDevtoolsState extends State<FlQueryDevtools> {
+  bool _showDevtools = false;
+
+  @override
+  Widget build(BuildContext context) {
+    if (kReleaseMode) {
+      return SizedBox.shrink(child: widget.child);
+    }
+
+    return Navigator(
+      onPopPage: (route, result) {
+        return true;
+      },
+      pages: [
+        MaterialPage(
+          child: Scaffold(
+            body: Stack(
+              children: [
+                if (widget.child != null) widget.child!,
+                if (_showDevtools) ...[
+                  Positioned(
+                    child: GestureDetector(
+                      onTap: () {
+                        setState(() {
+                          _showDevtools = false;
+                        });
+                      },
+                      child: SizedBox.expand(
+                        child: ColoredBox(
+                          color: Colors.black38,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Positioned(
+                    child: Align(
+                      alignment: Alignment.bottomCenter,
+                      child: Container(
+                        height: MediaQuery.of(context).size.height * 0.7,
+                        width: double.infinity,
+                        margin: const EdgeInsets.all(8.0),
+                        padding: const EdgeInsets.all(8.0),
+                        decoration: BoxDecoration(
+                          color: Theme.of(context).colorScheme.surface,
+                          borderRadius: BorderRadius.circular(8.0),
+                        ),
+                        child: DevtoolsRoot(
+                          onClose: () {
+                            setState(() {
+                              _showDevtools = false;
+                            });
+                          },
+                        ),
+                      ),
+                    ),
+                  ),
+                ]
+              ],
+            ),
+            floatingActionButtonLocation:
+                FloatingActionButtonLocation.startFloat,
+            floatingActionButton: AnimatedScale(
+              duration: const Duration(milliseconds: 100),
+              scale: _showDevtools ? 0 : 1,
+              child: FloatingActionButton.extended(
+                onPressed: () {
+                  setState(() {
+                    _showDevtools = !_showDevtools;
+                  });
+                },
+                label: Text("Fl-Query Devtools"),
+                icon: Icon(Icons.search_rounded),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

packages/fl_query/lib/src/devtools/helpers/jsonify_value.dart

@@ -0,0 +1,29 @@
+import 'dart:convert';
+
+import 'package:fl_query/src/collections/json_config.dart';
+
+Object? jsonifyValue(data, JsonConfig? jsonConfig) {
+  switch (data.runtimeType) {
+    case String:
+    case int:
+    case double:
+    case bool:
+    case Null:
+      return data;
+    case Iterable:
+    case Map:
+      try {
+        jsonEncode(data);
+        return data is Iterable ? data.toList() : data;
+      } catch (e) {
+        return "[Parsing Error]: ${data.runtimeType} contains unsupported non-primitive and non-jsonEncodable value";
+      }
+    default:
+      if (jsonConfig == null) {
+        return "$data"
+            "\nProvide `jsonConfig: JsonConfig(...)` to enable Json view for data";
+      } else {
+        return (jsonConfig as dynamic).toJson(data);
+      }
+  }
+}

packages/fl_query/lib/src/devtools/helpers/primitvify_value.dart

@@ -0,0 +1,22 @@
+import 'dart:convert';
+
+Object? primitivifyValue(data) {
+  switch (data.runtimeType) {
+    case String:
+    case int:
+    case double:
+    case bool:
+    case Null:
+      return data;
+    case Iterable:
+    case Map:
+      try {
+        jsonEncode(data);
+        return data;
+      } catch (e) {
+        return "[Parsing Error]: ${data.runtimeType} contains unsupported non-primitive and non-jsonEncodable value";
+      }
+    default:
+      return data.toString();
+  }
+}

packages/fl_query/lib/src/devtools/widgets/devtools_root.dart

@@ -0,0 +1,46 @@
+import 'package:fl_query/src/devtools/widgets/tabs/infinite_query_tab.dart';
+import 'package:fl_query/src/devtools/widgets/tabs/mutation_tab.dart';
+import 'package:fl_query/src/devtools/widgets/tabs/query_tab.dart';
+import 'package:flutter/material.dart';
+
+class DevtoolsRoot extends StatefulWidget {
+  final VoidCallback? onClose;
+  const DevtoolsRoot({super.key, this.onClose});
+
+  @override
+  State<DevtoolsRoot> createState() => _DevtoolsRootState();
+}
+
+class _DevtoolsRootState extends State<DevtoolsRoot> {
+  @override
+  Widget build(BuildContext context) {
+    return DefaultTabController(
+      length: 3,
+      child: Scaffold(
+        appBar: AppBar(
+          title: const Text('FlQuery Devtools'),
+          actions: [
+            IconButton(
+              onPressed: widget.onClose,
+              icon: const Icon(Icons.close),
+            ),
+          ],
+          bottom: const TabBar(
+            tabs: [
+              Tab(text: 'Queries'),
+              Tab(text: 'Infinite Queries'),
+              Tab(text: 'Mutations'),
+            ],
+          ),
+        ),
+        body: TabBarView(
+          children: [
+            QueryTab(),
+            InfiniteQueryTab(),
+            MutationTab(),
+          ],
+        ),
+      ),
+    );
+  }
+}

packages/fl_query/lib/src/devtools/widgets/explorers/explorer_view.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:json_view/json_view.dart' hide JsonConfig;
+
+class ExplorerView extends StatefulWidget {
+  final String title;
+  final Object data;
+  final VoidCallback? onClose;
+  const ExplorerView({
+    super.key,
+    required this.title,
+    required this.data,
+    this.onClose,
+  });
+
+  @override
+  State<ExplorerView> createState() => _ExplorerViewState();
+}
+
+class _ExplorerViewState extends State<ExplorerView> {
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+        color: Theme.of(context).colorScheme.surface,
+        child: Column(
+          children: [
+            Row(
+              children: [
+                IconButton(
+                  icon: const Icon(Icons.close),
+                  onPressed: widget.onClose,
+                ),
+                Text(widget.title),
+              ],
+            ),
+            const Divider(),
+            Expanded(
+              child: JsonView(json: widget.data),
+            ),
+          ],
+        ));
+  }
+}

packages/fl_query/lib/src/devtools/widgets/query_tile.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class QueryTile extends StatelessWidget {
+  final String title;
+  final bool isLoading;
+  final bool hasError;
+  final VoidCallback? onTap;
+  const QueryTile({
+    super.key,
+    required this.title,
+    required this.isLoading,
+    required this.hasError,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      onTap: onTap,
+      leading: AnimatedSwitcher(
+        duration: const Duration(milliseconds: 100),
+        child: isLoading
+            ? const CircularProgressIndicator()
+            : hasError
+                ? Tooltip(
+                    message: "'$title' has Errors",
+                    child: const Icon(
+                      Icons.error,
+                      color: Colors.red,
+                    ),
+                  )
+                : Tooltip(
+                    message: "'$title' has fetched/mutated data successfully",
+                    child: const Icon(
+                      Icons.check,
+                      color: Colors.green,
+                    ),
+                  ),
+      ),
+      title: Text(title),
+    );
+  }
+}

packages/fl_query/lib/src/devtools/widgets/tabs/infinite_query_tab.dart

@@ -0,0 +1,104 @@
+import 'package:fl_query/src/core/client.dart';
+import 'package:fl_query/src/devtools/helpers/jsonify_value.dart';
+import 'package:fl_query/src/devtools/helpers/primitvify_value.dart';
+import 'package:fl_query/src/devtools/widgets/explorers/explorer_view.dart';
+import 'package:fl_query/src/devtools/widgets/query_tile.dart';
+import 'package:fl_query/src/widgets/infinite_query_listenable.dart';
+import 'package:flutter/material.dart';
+
+class InfiniteQueryTab extends StatefulWidget {
+  const InfiniteQueryTab({super.key});
+
+  @override
+  State<InfiniteQueryTab> createState() => _InfiniteQueryTabState();
+}
+
+class _InfiniteQueryTabState extends State<InfiniteQueryTab> {
+  String? _selectedQueryKey;
+
+  @override
+  Widget build(BuildContext context) {
+    final client = QueryClient.of(context);
+
+    return LayoutBuilder(builder: (context, constrains) {
+      return Row(
+        children: [
+          Expanded(
+            child: ListView.builder(
+              itemCount: client.cache.infiniteQueries.length,
+              itemBuilder: (context, index) {
+                final infiniteQuery =
+                    client.cache.infiniteQueries.elementAt(index);
+                return InfiniteQueryListenable(
+                  infiniteQuery.key,
+                  builder: (context, query) {
+                    if (query == null) {
+                      return const SizedBox.shrink();
+                    }
+
+                    return QueryTile(
+                      title: query.key,
+                      isLoading: query.isLoadingPage,
+                      hasError: query.hasErrors,
+                      onTap: () {
+                        setState(() {
+                          _selectedQueryKey = query.key;
+                        });
+                      },
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+          AnimatedSize(
+            duration: const Duration(milliseconds: 200),
+            curve: Curves.bounceInOut,
+            child: Builder(builder: (context) {
+              return SizedBox(
+                width: _selectedQueryKey == null
+                    ? 0
+                    : constrains.biggest.width * 0.5,
+                child: SizedBox.expand(
+                  child: InfiniteQueryListenable(
+                    _selectedQueryKey ?? '',
+                    builder: (context, query) {
+                      if (query == null) {
+                        return SizedBox.shrink();
+                      }
+
+                      return ExplorerView(
+                        title: query.key,
+                        data: {
+                          'pages': query.state.pages.map((page) {
+                            return {
+                              "pageParam": primitivifyValue(page.page),
+                              "data": jsonifyValue(page.data, query.jsonConfig),
+                              "errors": primitivifyValue(page.error),
+                              "stale": page.isStale,
+                              "updatedAt": page.updatedAt.toString(),
+                            };
+                          }).toList(),
+                          'isLoadingPage': query.isLoadingPage,
+                          'isRefreshingPage': query.isRefreshingPage,
+                          'isInactive': query.isInactive,
+                          'refreshConfig': query.refreshConfig.toJson(),
+                          'retryConfig': query.retryConfig.toJson()
+                        },
+                        onClose: () {
+                          setState(() {
+                            _selectedQueryKey = null;
+                          });
+                        },
+                      );
+                    },
+                  ),
+                ),
+              );
+            }),
+          ),
+        ],
+      );
+    });
+  }
+}

packages/fl_query/lib/src/devtools/widgets/tabs/mutation_tab.dart

@@ -0,0 +1,29 @@
+import 'package:fl_query/src/core/client.dart';
+import 'package:fl_query/src/devtools/widgets/query_tile.dart';
+import 'package:flutter/material.dart';
+
+class MutationTab extends StatefulWidget {
+  const MutationTab({super.key});
+
+  @override
+  State<MutationTab> createState() => _MutationTabState();
+}
+
+class _MutationTabState extends State<MutationTab> {
+  @override
+  Widget build(BuildContext context) {
+    final client = QueryClient.of(context);
+
+    return ListView.builder(
+      itemCount: client.cache.mutations.length,
+      itemBuilder: (context, index) {
+        final mutation = client.cache.mutations.elementAt(index);
+        return QueryTile(
+          title: mutation.key,
+          isLoading: mutation.isMutating,
+          hasError: mutation.hasError,
+        );
+      },
+    );
+  }
+}

packages/fl_query/lib/src/devtools/widgets/tabs/query_tab.dart

@@ -0,0 +1,97 @@
+import 'package:fl_query/src/core/client.dart';
+import 'package:fl_query/src/devtools/helpers/jsonify_value.dart';
+import 'package:fl_query/src/devtools/helpers/primitvify_value.dart';
+import 'package:fl_query/src/devtools/widgets/explorers/explorer_view.dart';
+import 'package:fl_query/src/devtools/widgets/query_tile.dart';
+import 'package:fl_query/src/widgets/query_listenable.dart';
+import 'package:flutter/material.dart';
+
+class QueryTab extends StatefulWidget {
+  const QueryTab({super.key});
+
+  @override
+  State<QueryTab> createState() => _QueryTabState();
+}
+
+class _QueryTabState extends State<QueryTab> {
+  String? _selectedQueryKey;
+
+  @override
+  Widget build(BuildContext context) {
+    final client = QueryClient.of(context);
+
+    return LayoutBuilder(builder: (context, constrains) {
+      return Row(
+        children: [
+          Expanded(
+            child: ListView.builder(
+              itemCount: client.cache.queries.length,
+              itemBuilder: (context, index) {
+                final query = client.cache.queries.elementAt(index);
+                return QueryListenable(
+                  query.key,
+                  builder: (context, query) {
+                    if (query == null) {
+                      return const SizedBox.shrink();
+                    }
+
+                    return QueryTile(
+                      title: query.key,
+                      isLoading: query.isLoading,
+                      hasError: query.hasError,
+                      onTap: () {
+                        setState(() {
+                          _selectedQueryKey = query.key;
+                        });
+                      },
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+          AnimatedSize(
+            duration: const Duration(milliseconds: 200),
+            curve: Curves.bounceInOut,
+            child: Builder(builder: (context) {
+              return SizedBox(
+                width: _selectedQueryKey == null
+                    ? 0
+                    : constrains.biggest.width * 0.5,
+                child: SizedBox.expand(
+                  child: QueryListenable(_selectedQueryKey ?? '',
+                      builder: (context, query) {
+                    if (query == null) {
+                      return SizedBox.shrink();
+                    }
+
+                    return ExplorerView(
+                      title: query.key,
+                      data: {
+                        'data': jsonifyValue(query.data, query.jsonConfig),
+                        'errors': primitivifyValue(query.error),
+                        'stale': query.state.isStale,
+                        'updatedAt': query.state.updatedAt.toString(),
+                        'isLoading': query.isLoading,
+                        'isRefreshing': query.isRefreshing,
+                        'isInactive': query.isInactive,
+                        'isInitial': query.isInitial,
+                        'refreshConfig': query.refreshConfig.toJson(),
+                        'retryConfig': query.retryConfig.toJson()
+                      },
+                      onClose: () {
+                        setState(() {
+                          _selectedQueryKey = null;
+                        });
+                      },
+                    );
+                  }),
+                ),
+              );
+            }),
+          ),
+        ],
+      );
+    });
+  }
+}

packages/fl_query/pubspec.yaml

@@ -19,6 +19,7 @@ dependencies:
   hive_flutter: ^1.1.0
   mutex: ^3.0.1
   state_notifier: ^0.7.2+1
+  json_view: ^0.4.1
 
 dev_dependencies:
   build_runner: ^2.2.0

packages/fl_query_hooks/.flutter-plugins-dependencies

@@ -1 +1 @@
-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.11/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-29 08:31:08.839959","version":"3.10.2"}
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"android":[{"name":"path_provider_android","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_android-2.0.27/","native_build":true,"dependencies":[]}],"macos":[{"name":"path_provider_foundation","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_foundation-2.2.3/","shared_darwin_source":true,"native_build":true,"dependencies":[]}],"linux":[{"name":"path_provider_linux","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_linux-2.1.11/","native_build":false,"dependencies":[]}],"windows":[{"name":"path_provider_windows","path":"/home/krtirtho/.pub-cache/hosted/pub.dev/path_provider_windows-2.1.6/","native_build":false,"dependencies":[]}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2023-05-29 12:06:55.423206","version":"3.10.2"}

packages/fl_query_hooks/example/pubspec.lock

@@ -174,6 +174,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.6.7"
+  json_view:
+    dependency: transitive
+    description:
+      name: json_view
+      sha256: a60ea6dae3a3fe7a94418bdbc9e66f990f7a4582e010b091d27db16ab6fb1a3e
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.1"
   lints:
     dependency: transitive
     description: