make attachRootComponent synchronous

docs/concepts/testing.mdx

@@ -30,7 +30,7 @@ void main() {
     testComponents('renders my component', (tester) async {
       // We want to test the MyComponent component.
       // Assume this shows a count and a button to increase it.
-      await tester.pumpComponent(MyComponent());
+      tester.pumpComponent(MyComponent());
 
       // Should render a [Text] component with content 'Count: 0'.
       expect(find.text('Count: 0'), findsOneComponent);

examples/flutter_multi_view/lib/widgets/counter.dart

@@ -9,7 +9,6 @@ class CounterWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var theme = ThemeData.light();
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       home: Card(

experiments/mobx_hooks/test/hooks_test.dart

@@ -158,11 +158,11 @@ void main() {
 
     group('jaspr context', () {
       //   test('App', () async {
-      //     await tester.pumpComponent(MobXHooksObserverComponent(child: App()));
+      //     tester.pumpComponent(MobXHooksObserverComponent(child: App()));
       //   });
 
       testComponents('custom flow', (tester) async {
-        await tester.pumpComponent(
+        tester.pumpComponent(
           MobXHooksObserverComponent(
             child: Builder(
               builder: (context) sync* {

packages/jaspr/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Unreleased breaking
 
 - **BREAKING** Migrate all packages to `package:web`, replacing `dart:html`.
+- **BREAKING** Make `ComponentsBinding.attachRootComponent()` and `ComponentTester.pumpComponent()` synchronous.
 
 - Add `InheritedModel<T>` similar to Flutters [InheritedModel](https://api.flutter.dev/flutter/widgets/InheritedModel-class.html)
 - Improved html formatting on the server to not introduce unwanted whitespaces.

packages/jaspr/README.md

@@ -189,7 +189,7 @@ void main() {
     testComponents('renders my component', (tester) async {
       // We want to test the MyComponent component.
       // Assume this shows a count and a button to increase it.
-      await tester.pumpComponent(MyComponent());
+      tester.pumpComponent(MyComponent());
 
       // Should render a [Text] component with content 'Count: 0'.
       expect(find.text('Count: 0'), findsOneComponent);

packages/jaspr/lib/src/browser/browser_binding.dart

@@ -33,10 +33,10 @@ class BrowserAppBinding extends AppBinding with ComponentsBinding {
   late (Node, Node)? attachBetween;
 
   @override
-  Future<void> attachRootComponent(Component app, {String attachTo = 'body', (Node, Node)? attachBetween}) {
+  void attachRootComponent(Component app, {String attachTo = 'body', (Node, Node)? attachBetween}) {
     attachTarget = attachTo;
     this.attachBetween = attachBetween;
-    return super.attachRootComponent(app);
+    super.attachRootComponent(app);
   }
 
   @override

packages/jaspr/lib/src/framework/build_owner.dart

@@ -72,7 +72,7 @@ class BuildOwner {
     assert(_debugStateLockLevel >= 0);
   }
 
-  Future<void> performInitialBuild(Element element, Future<void> Function() completeBuild) async {
+  Future<void> performInitialBuild(Element element, void Function() completeBuild) async {
     assert(_debugStateLockLevel >= 0);
     assert(!_debugBuilding);
 
@@ -87,16 +87,22 @@ class BuildOwner {
     element.mount(null, null);
     element.didMount();
 
-    _isFirstBuild = false;
+    completeInitialBuild(element, () {
+      _isFirstBuild = false;
 
-    assert(_debugBuilding);
-    assert(() {
-      _debugBuilding = false;
-      _debugStateLockLevel -= 1;
-      return true;
-    }());
+      assert(_debugBuilding);
+      assert(() {
+        _debugBuilding = false;
+        _debugStateLockLevel -= 1;
+        return true;
+      }());
+
+      completeBuild();
+    });
+  }
 
-    return completeBuild();
+  void completeInitialBuild(Element element, void Function() buildCallback) {
+    buildCallback();
   }
 
   /// Rebuilds [child] and correctly accounts for any asynchronous operations that can

packages/jaspr/lib/src/framework/components_binding.dart

@@ -3,7 +3,7 @@ part of 'framework.dart';
 /// Main app binding, controls the root component and global state
 mixin ComponentsBinding on AppBinding {
   /// Sets [app] as the new root of the component tree and performs an initial build
-  Future<void> attachRootComponent(Component app) async {
+  void attachRootComponent(Component app) async {
     var buildOwner = _rootElement?._owner ?? createRootBuildOwner();
 
     var element = _Root(child: app).createElement();
@@ -13,9 +13,7 @@ mixin ComponentsBinding on AppBinding {
 
     _rootElement = element;
 
-    return buildOwner.performInitialBuild(element, () async {
-      completeInitialFrame();
-    });
+    buildOwner.performInitialBuild(element, completeInitialFrame);
   }
 
   RenderObject createRootRenderObject();

packages/jaspr/lib/src/server/async_build_owner.dart

@@ -12,11 +12,9 @@ extension AsyncElement on Element {
 
 class AsyncBuildOwner extends BuildOwner {
   @override
-  Future<void> performInitialBuild(Element element, Future<void> Function() completeBuild) {
-    return super.performInitialBuild(element, () async {
-      await element._asyncBuildLock?.asFuture;
-      return completeBuild();
-    });
+  void completeInitialBuild(Element element, void Function() buildCallback) async {
+    await element._asyncBuildLock?.asFuture;
+    super.completeInitialBuild(element, buildCallback);
   }
 
   @override

packages/jaspr/lib/src/server/server_binding.dart

@@ -20,16 +20,19 @@ class ServerAppBinding extends AppBinding with ComponentsBinding {
   @override
   bool get isClient => false;
 
-  final rootCompleter = Completer.sync();
-
   @override
-  Future<void> attachRootComponent(Component app) async {
-    await super.attachRootComponent(ClientComponentRegistry(child: app));
-    rootCompleter.complete();
+  void attachRootComponent(Component app) async {
+    super.attachRootComponent(ClientComponentRegistry(child: app));
   }
 
   Future<String> render() async {
-    await rootCompleter.future;
+    if (rootElement == null) return '';
+
+    if (rootElement!.owner.isFirstBuild) {
+      final completer = Completer.sync();
+      rootElement!.binding.addPostFrameCallback(completer.complete);
+      await completer.future;
+    }
 
     var root = rootElement!.renderObject as MarkupRenderObject;
     var adapters = [

packages/jaspr/test/browser/basic/basic_browser_test.dart

@@ -7,7 +7,7 @@ import 'basic_app.dart';
 void main() {
   group('basic browser test', () {
     testBrowser('should render component', (tester) async {
-      await tester.pumpComponent(App());
+      tester.pumpComponent(App());
 
       expect(find.text('Count: 0'), findsOneComponent);
 

packages/jaspr/test/browser/events_test.dart

@@ -8,7 +8,7 @@ void main() {
     testBrowser('handle click events', (tester) async {
       int clicked = 0;
 
-      await tester.pumpComponent(button(onClick: () {
+      tester.pumpComponent(button(onClick: () {
         clicked++;
       }, []));
 
@@ -20,7 +20,7 @@ void main() {
       bool checkedInput = false;
       bool checkedChange = false;
 
-      await tester.pumpComponent(input(
+      tester.pumpComponent(input(
         type: InputType.checkbox,
         onInput: (value) => checkedInput = value,
         onChange: (value) => checkedChange = value,
@@ -38,7 +38,7 @@ void main() {
       double numberInput = 0;
       double numberChange = 0;
 
-      await tester.pumpComponent(input(
+      tester.pumpComponent(input(
         type: InputType.number,
         onInput: (value) => numberInput = value,
         onChange: (value) => numberChange = value,
@@ -56,7 +56,7 @@ void main() {
       String textInput = "";
       String textChange = "";
 
-      await tester.pumpComponent(input(
+      tester.pumpComponent(input(
         type: InputType.text,
         onInput: (value) => textInput = value,
         onChange: (value) => textChange = value,
@@ -74,7 +74,7 @@ void main() {
       String textInput = "";
       String textChange = "";
 
-      await tester.pumpComponent(textarea(
+      tester.pumpComponent(textarea(
         onInput: (value) => textInput = value,
         onChange: (value) => textChange = value,
         [],

packages/jaspr/test/browser/head/head_browser_test.dart

@@ -8,7 +8,7 @@ import 'head_app.dart';
 void main() {
   group('head browser test', () {
     testBrowser('should serve component', (tester) async {
-      await tester.pumpComponent(App());
+      tester.pumpComponent(App());
 
       var nodes = AttachAdapter.instanceFor(AttachTarget.head).liveNodes.toList();
 

packages/jaspr/test/browser/hydration/hydration_browser_test.dart

@@ -20,7 +20,7 @@ void main() {
       expect(pElement.parentNode, equals(divElement));
       expect(bElement.parentNode, equals(pElement));
 
-      await tester.pumpComponent(div([
+      tester.pumpComponent(div([
         p([
           text('Hello '),
           b([text('World2')]),

packages/jaspr/test/components/html/content_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders content', (tester) async {
-      await tester.pumpComponent(html([
+      tester.pumpComponent(html([
         head([]),
         body([
           header([

packages/jaspr/test/components/html/forms_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders button', (tester) async {
-      await tester.pumpComponent(button(
+      tester.pumpComponent(button(
         autofocus: false,
         disabled: false,
         type: ButtonType.button,
@@ -18,7 +18,7 @@ void main() {
     });
 
     testComponents('renders form', (tester) async {
-      await tester.pumpComponent(form(
+      tester.pumpComponent(form(
           action: "",
           method: FormMethod.post,
           encType: FormEncType.text,

packages/jaspr/test/components/html/media_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders media', (tester) async {
-      await tester.pumpComponent(div([
+      tester.pumpComponent(div([
         audio(
           autoplay: false,
           controls: false,

packages/jaspr/test/components/html/other_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders other', (tester) async {
-      await tester.pumpComponent(div([
+      tester.pumpComponent(div([
         details(open: false, []),
         dialog(open: false, []),
         summary([]),

packages/jaspr/test/components/html/svg_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders svg', (tester) async {
-      await tester.pumpComponent(svg(viewBox: "0 0 100 100", width: 100.px, height: 100.px, [
+      tester.pumpComponent(svg(viewBox: "0 0 100 100", width: 100.px, height: 100.px, [
         rect(
             x: "0",
             y: "0",

packages/jaspr/test/components/html/text_test.dart

@@ -6,7 +6,7 @@ import 'package:jaspr_test/jaspr_test.dart';
 void main() {
   group('html components', () {
     testComponents('renders text', (tester) async {
-      await tester.pumpComponent(div([
+      tester.pumpComponent(div([
         a(
           download: "",
           href: "a",

packages/jaspr/test/framework/async/async_component_test.dart

@@ -11,7 +11,7 @@ void main() {
     testComponents('should render future with data', (tester) async {
       var completer = Completer<String>();
 
-      await tester.pumpComponent(FutureTester(completer.future));
+      tester.pumpComponent(FutureTester(completer.future));
 
       expect(find.text('LOADING'), findsOneComponent);
 
@@ -24,7 +24,7 @@ void main() {
     testComponents('should render future with error', (tester) async {
       var completer = Completer<String>();
 
-      await tester.pumpComponent(FutureTester(completer.future));
+      tester.pumpComponent(FutureTester(completer.future));
 
       expect(find.text('LOADING'), findsOneComponent);
 
@@ -37,7 +37,7 @@ void main() {
     testComponents('should render stream', (tester) async {
       var controller = StreamController<String>();
 
-      await tester.pumpComponent(StreamTester(controller.stream));
+      tester.pumpComponent(StreamTester(controller.stream));
 
       expect(find.text('LOADING'), findsOneComponent);
 

packages/jaspr/test/framework/basic/basic_component_test.dart

@@ -7,7 +7,7 @@ import 'basic_app.dart';
 void main() {
   group('basic component test', () {
     testComponents('should render component', (tester) async {
-      await tester.pumpComponent(App());
+      tester.pumpComponent(App());
 
       expect(find.text('Count: 0'), findsOneComponent);
 

packages/jaspr/test/framework/global_key_schenanigans/global_key_schenanigans_test.dart

@@ -9,7 +9,7 @@ import 'global_key_schenanigans_app.dart';
 void main() {
   group('global key schenanigans test', () {
     testComponents('should keep state on reparenting', (tester) async {
-      var controller = await tester.pumpTestComponent(App());
+      var controller = tester.pumpTestComponent(App());
 
       // phase 1: component should be mounted directly
       expect(find.byType(Child), findsOneComponent);

packages/jaspr/test/framework/inherited_component/inherited_component_test.dart

@@ -9,7 +9,7 @@ import 'inherited_component_app.dart';
 void main() {
   group('inherited component test', () {
     testComponents('should inherit component', (tester) async {
-      var controller = await tester.pumpTestComponent(App());
+      var controller = tester.pumpTestComponent(App());
 
       // phase 1: inherited component should be mounted
       expect(find.text('Inherited value: 0'), findsOneComponent);

packages/jaspr/test/framework/inherited_model/inherited_model_test.dart

@@ -20,7 +20,7 @@ void testAgainstDto(MyDto src, {required Set<Key> expectedRebuilds}) {
 void main() {
   group('inherited model test', () {
     testComponents('should update dependencies only', (tester) async {
-      var controller = await tester.pumpTestComponent(App());
+      var controller = tester.pumpTestComponent(App());
       Future<void> rebuildThenTestAgainstDto(
         MyDto src, {
         required Set<Key> expectedRebuilds,

packages/jaspr/test/framework/observer_component/observer_component_test.dart

@@ -11,7 +11,7 @@ void main() {
     testComponents('should track elements', (tester) async {
       ObserverParam params = ObserverParam(renderBoth: true, events: []);
       final events = params.events;
-      final controller = await tester.pumpTestComponent(App(params));
+      final controller = tester.pumpTestComponent(App(params));
 
       // phase 1: observer component should be mounted
       expect(find.text('Leaf true false'), findsOneComponent);

packages/jaspr/test/framework/reorder_children/reorder_children_test.dart

@@ -10,7 +10,7 @@ import 'reorder_children_app.dart';
 void main() {
   group('reorder children test', () {
     testComponents('should keep child state on reordering', (tester) async {
-      var controller = await tester.pumpTestComponent(App());
+      var controller = tester.pumpTestComponent(App());
       var app = controller.element;
 
       expect((app.component as App).child2Key.toString(), equals('[<2>]'));

packages/jaspr/test/framework/stateful_reparenting/stateful_reparenting_test.dart

@@ -9,7 +9,7 @@ import 'stateful_reparenting_app.dart';
 void main() {
   group('stateful reparenting test', () {
     testComponents('should keep state on reparenting', (tester) async {
-      var controller = await tester.pumpTestComponent(App());
+      var controller = tester.pumpTestComponent(App());
 
       // phase 1: component should be mounted directly
       expect(find.byType(MyStatefulComponent), findsOneComponent);

packages/jaspr/test/utils/test_component.dart

@@ -2,8 +2,8 @@ import 'package:jaspr/jaspr.dart';
 import 'package:jaspr_test/jaspr_test.dart';
 
 extension PumpTestComponent on ComponentTester {
-  Future<TestComponentController<T>> pumpTestComponent<T>(TestComponent<T> component) async {
-    await pumpComponent(component);
+  TestComponentController<T> pumpTestComponent<T>(TestComponent<T> component) {
+    pumpComponent(component);
     late Element testElem;
     binding.rootElement!.visitChildren((element) {
       testElem = element;