feat: add devtools (WIP)

This commit is contained in:
Kingkor Roy Tirtho
2023-05-29 13:33:09 +06:00
parent 0fa58dcb84
commit 1b1f1cdc93
18 changed files with 547 additions and 2 deletions
@@ -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"}
+3
View File
@@ -23,6 +23,9 @@ class MainApp extends StatelessWidget {
useMaterial3: true,
),
title: 'FL Query Example',
builder: (context, child) {
return FlQueryDevtools(child: child);
},
routerConfig: router,
);
}
+8
View File
@@ -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:
+2
View File
@@ -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';
@@ -58,4 +58,13 @@ class RefreshConfig {
refreshOnQueryFnChange ?? this.refreshOnQueryFnChange,
);
}
Map<String, dynamic> toJson() {
return {
'staleDuration': staleDuration.toString(),
'refreshInterval': refreshInterval.toString(),
'refreshOnMount': refreshOnMount,
'refreshOnQueryFnChange': refreshOnQueryFnChange,
};
}
}
@@ -38,4 +38,11 @@ class RetryConfig {
retryDelay: retryDelay ?? this.retryDelay,
);
}
Map<String, dynamic> toJson() {
return {
'maxRetries': maxRetries,
'retryDelay': retryDelay.toString(),
};
}
}
@@ -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),
),
),
),
),
],
);
}
}
@@ -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);
}
}
}
@@ -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();
}
}
@@ -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(),
],
),
),
);
}
}
@@ -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),
),
],
));
}
}
@@ -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),
);
}
}
@@ -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;
});
},
);
},
),
),
);
}),
),
],
);
});
}
}
@@ -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,
);
},
);
}
}
@@ -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;
});
},
);
}),
),
);
}),
),
],
);
});
}
}
+1
View File
@@ -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
@@ -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"}
@@ -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: