bloc_signals_devtools

⚡ bloc_signals_devtools

"With the rigor of BLoC and the flex and speed of Signals"

Dedicated Flutter DevTools extension UI for inspecting BlocSignal and CubitSignal containers, tracing event-to-transition timelines, inspecting state diffs, and warning against memory leaks.

🌐 Ecosystem Packages

The BlocSignal monorepo consists of 11 modular packages:

Package Version Description
bloc_signals pub Core pure Dart reactive state primitives bridging BLoC & Signals
bloc_signals_flutter pub Flutter UI bindings, providers, builders, listeners & selectors
bloc_signals_bloc pub Classic BLoC 8/9 interop adapters & bidirectional event bridges
bloc_signals_riverpod pub Bidirectional Riverpod 2/3 interop adapters & provider extensions
bloc_signals_jaspr pub Jaspr web component integration and state binding for BlocSignal
bloc_signals_hydrate pub Automated synchronous local state persistence & hydration
bloc_signals_replay pub Undo & redo state history tracking for CubitSignal and BlocSignal
bloc_signals_otel pub OpenTelemetry tracing and span generation for state transitions
bloc_signals_devtools pub Universal DevTools telemetry observer using dart:developer
bloc_signals_test pub Declarative unit testing utilities (blocSignalTest)
bloc_signals_lint pub Custom analyzer lint rules & automated IDE quick-fixes

⚡ Key Features

  • 🌳 Instance Tree View: Searchable list of active container instances, state values, types, and closure status.
  • ⏱️ Timeline Trace Panel: Chronological timeline mapping events ➔ transitions ➔ state updates per container instance.
  • 🔀 State Diff Inspector: Interactive object diff viewer highlighting currentState vs nextState.
  • 🚨 Leak Detector & Warnings: Alert badge displaying active vs closed container counts and retain warnings.

🚀 Getting Started

1. Add Dependency

Add bloc_signals_devtools to your application's dev_dependencies:

dev_dependencies:
  bloc_signals_devtools: ^1.0.2

2. Register DevTools Observer

In your application's debug initialization, register the DevToolsBlocSignalObserver:

void main() {
  BlocSignalObserver.observer = const DevToolsBlocSignalObserver();
  runApp(const MyApp());
}

3. Open Flutter DevTools

When running your Flutter application in debug mode, open DevTools via your IDE or terminal. Flutter DevTools automatically discovers bloc_signals_devtools and displays the BlocSignal tab in the DevTools navigation bar.

🏗️ Extension Architecture & Contributor Workflow

bloc_signals_devtools conforms to the official Dart & Flutter DevTools extension specification:

  • Extension Manifest (extension/devtools/config.yaml): Defines extension metadata, icon code point (0xe566), connection requirements, and issue tracker links.
  • Precompiled Web Bundle (extension/devtools/build/): Flutter DevTools loads extension tools as web iframes from precompiled web artifacts. This bundle is included in the pub release (preserved via extension/devtools/.pubignore) and tracked in git (via .gitignore exception) so cloned repositories validate and pass test suites immediately out of the box.

Rebuilding Web Assets for Contributors

If you modify lib/main.dart, UI views, or controller logic, recompile the web distribution bundle and validate:

cd bloc_signals_devtools
dart run devtools_extensions build_and_copy --source=. --dest=extension/devtools
dart run devtools_extensions validate --package=.

🤖 AI Coding Assistant Skill

This package is supported by an official pre-packaged AI Coding Skill representing VM Service RPC extensions, DevTools inspector usage, and telemetry protocols for BlocSignal.

If you develop with AI coding assistants (such as Claude Code, Antigravity, Gemini, Cursor, or Codex), you can load the bloc-signals skill bundle to guide your assistant's code generation and analysis.

📜 License

MIT License. See LICENSE for details.

Libraries

bloc_signals_devtools
main