setup css hotreload

Author: schultek

packages/jaspr/lib/src/client/client_binding.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:convert';
 import 'dart:developer';
 
 import 'package:universal_web/js_interop.dart';
@@ -21,6 +22,51 @@ class ClientAppBinding extends AppBinding with ComponentsBinding {
         rootElement?.visitChildren((element) => element.reassemble());
         return ServiceExtensionResponse.result('{}');
       });
+      registerExtension('ext.jaspr.reload_stylesheets', (method, parameters) async {
+        final urls = (jsonDecode(parameters['urls']!) as List).cast<String>();
+
+        void reloadStylesheet(web.Element oldLink, String url, {int retries = 5}) {
+          final newLink = web.document.createElement('link') as web.HTMLLinkElement;
+          newLink.rel = 'stylesheet';
+          newLink.href = '$url?v=${DateTime.now().millisecondsSinceEpoch}';
+
+          StreamSubscription<void>? loadSub;
+          StreamSubscription<void>? errorSub;
+
+          void cleanup() {
+            loadSub?.cancel();
+            errorSub?.cancel();
+          }
+
+          loadSub = web.EventStreamProvider<web.Event>('load').forElement(newLink).listen((_) {
+            cleanup();
+            oldLink.remove();
+          });
+
+          errorSub = web.EventStreamProvider<web.Event>('error').forElement(newLink).listen((_) {
+            cleanup();
+            newLink.remove();
+            if (retries > 0) {
+              Future.delayed(const Duration(milliseconds: 500), () {
+                reloadStylesheet(oldLink, url, retries: retries - 1);
+              });
+            } else {
+              print('Failed to reload stylesheet $url after 5 retries.');
+            }
+          });
+
+          oldLink.parentNode?.insertBefore(newLink, oldLink.nextSibling);
+        }
+
+        // Reload all stylesheet <link> tags.
+        for (final url in urls) {
+          final link = web.document.querySelector('link[rel="stylesheet"][href^="$url"]');
+          if (link != null) {
+            reloadStylesheet(link, url);
+          }
+        }
+        return ServiceExtensionResponse.result('{}');
+      });
       return true;
     }());
   }

packages/jaspr_builder/lib/src/styles/styles_standalone_builder.dart

@@ -66,6 +66,11 @@ class StylesStandaloneBuilder implements Builder {
       return;
     }
 
+    final outputName = buildStep.inputId.path
+        .replaceFirst('lib/', '')
+        .replaceFirst('.server.dart', '.css')
+        .replaceFirst('.client.dart', '.css');
+
     final outputId = buildStep.inputId.changeExtension('.styles.dart');
     final runnerCode = ImportsWriter().resolve('''
     import 'dart:io';
@@ -74,11 +79,15 @@ class StylesStandaloneBuilder implements Builder {
     import 'package:jaspr/src/dom/styles/rules.dart' show StyleRule, StyleRulesRender;
     [[/]]
 
-    void main() {
+    void run() {
       final List<StyleRule> styles = ${styles.toOutputString()};
 
-      stdout.write(jsonEncode({
-        'css': styles.render(),
+      stdout.writeln(jsonEncode({
+        'event': 'css',
+        'file': '$outputName',
+        'data': {
+          'css': styles.render(),
+        }
       }));
     }
     ''');

packages/jaspr_cli/lib/src/commands/dev_command.dart

@@ -120,6 +120,8 @@ abstract class DevCommand extends BaseCommand with ProxyHelper, FlutterHelper {
 
     handleClientWorkflow(workflow);
 
+    runCssGeneration(workflow);
+
     if (project.flutterMode == FlutterMode.embedded) {
       final flutterProcess = await serveFlutter(useWasm);
 
@@ -427,7 +429,6 @@ abstract class DevCommand extends BaseCommand with ProxyHelper, FlutterHelper {
         } else {
           logger.write('Rebuilt web assets.', tag: Tag.cli, progress: ProgressState.completed);
         }
-        _runBuildCallback();
       } else if (event.status == BuildStatus.failed) {
         logger.write(
           'Failed building web assets. There is probably more output above.',
@@ -480,10 +481,6 @@ abstract class DevCommand extends BaseCommand with ProxyHelper, FlutterHelper {
 
     return workflow;
   }
-
-  void _runBuildCallback() {
-    generateCss();
-  }
 }
 
 String serverEntrypoint(String import) =>

packages/jaspr_cli/lib/src/dev/dev_proxy.dart

@@ -60,12 +60,28 @@ class DevProxy {
         if (buildResult.status == BuildStatus.succeeded) {
           for (final clientConnection in _clientConnections.values) {
             await clientConnection.performHotReload();
+
+            for (var callback in _postReloadCallbacks) {
+              callback();
+            }
           }
         }
       }
     }
   }
 
+  List<Function> _postReloadCallbacks = [];
+
+  void registerPostReloadCallback(Function callback) {
+    _postReloadCallbacks.add(callback);
+  }
+
+  void unregisterPostReloadCallback(Function callback) {
+    _postReloadCallbacks.remove(callback);
+  }
+
+  List<ClientConnection> getClientConnections() => _clientConnections.values.toList();
+
   ClientConnection? getClientConnection(String? appId) {
     if (appId == null) return null;
     return _clientConnections[appId];