Add simple live-reload implementation (#1703)

Add live-reload option that turns on simple WebSocket broadcaster of rebuild finished events.
Inject simple JS snippet to bootstrap that listen for update message from WebSocket and reloads the whole page.

Author: samogot

build_runner/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.10.1-dev
+
+- Added `--live-reload` cli option and appropriate functionality
+
 ## 0.10.0
 
 ### Breaking Changes

build_runner/README.md

@@ -99,6 +99,7 @@ Some commands also have additional options:
 ##### serve
 
 - `--hostname`: The host to run the server on.
+- `--live-reload`: Enables automatic page reloading on rebuilds.
 
 Trailing args of the form `<directory>:<port>` are supported to customize what
 directories are served, and on what ports.

build_runner/lib/src/entrypoint/options.dart

@@ -14,6 +14,7 @@ import 'package:path/path.dart' as p;
 const assumeTtyOption = 'assume-tty';
 const defineOption = 'define';
 const deleteFilesByDefaultOption = 'delete-conflicting-outputs';
+const liveReloadOption = 'live-reload';
 const logPerformanceOption = 'log-performance';
 const logRequestsOption = 'log-requests';
 const lowResourcesModeOption = 'low-resources-mode';
@@ -130,11 +131,13 @@ class SharedOptions {
 /// Options specific to the `serve` command.
 class ServeOptions extends SharedOptions {
   final String hostName;
+  final bool liveReload;
   final bool logRequests;
   final List<ServeTarget> serveTargets;
 
   ServeOptions._({
     @required this.hostName,
+    @required this.liveReload,
     @required this.logRequests,
     @required this.serveTargets,
     @required bool assumeTty,
@@ -200,6 +203,7 @@ class ServeOptions extends SharedOptions {
 
     return new ServeOptions._(
       hostName: argResults[hostnameOption] as String,
+      liveReload: argResults[liveReloadOption] as bool,
       logRequests: argResults[logRequestsOption] as bool,
       serveTargets: serveTargets,
       assumeTty: argResults[assumeTtyOption] as bool,

build_runner/lib/src/entrypoint/serve.dart

@@ -25,7 +25,11 @@ class ServeCommand extends WatchCommand {
       ..addFlag(logRequestsOption,
           defaultsTo: false,
           negatable: false,
-          help: 'Enables logging for each request to the server.');
+          help: 'Enables logging for each request to the server.')
+      ..addFlag(liveReloadOption,
+          defaultsTo: false,
+          negatable: false,
+          help: 'Enables automatic page reloading on rebuilds.');
   }
 
   @override
@@ -93,7 +97,9 @@ Future<HttpServer> _startServer(
     ServeOptions options, ServeTarget target, ServeHandler handler) async {
   var server = await _bindServer(options, target);
   serveRequests(
-      server, handler.handlerFor(target.dir, logRequests: options.logRequests));
+      server,
+      handler.handlerFor(target.dir,
+          logRequests: options.logRequests, liveReload: options.liveReload));
   return server;
 }
 

build_runner/lib/src/server/server.dart

@@ -12,13 +12,18 @@ import 'package:logging/logging.dart';
 import 'package:mime/mime.dart';
 import 'package:path/path.dart' as p;
 import 'package:shelf/shelf.dart' as shelf;
+import 'package:shelf_web_socket/shelf_web_socket.dart';
+import 'package:web_socket_channel/web_socket_channel.dart';
 
 import '../generate/watch_impl.dart';
 import 'asset_graph_handler.dart';
 import 'path_to_asset_id.dart';
 
 const _performancePath = r'$perf';
 final _graphPath = r'$graph';
+final _buildUpdatesProtocol = r'$livereload';
+final _buildUpdatesMessage = 'update';
+final entrypointExtensionMarker = '/* ENTRYPOINT_EXTENTION_MARKER */';
 
 final _logger = new Logger('Serve');
 
@@ -43,10 +48,13 @@ class ServeHandler implements BuildState {
   final Future<AssetHandler> _assetHandler;
   final Future<AssetGraphHandler> _assetGraphHandler;
 
+  final _webSocketHandler = BuildUpdatesWebSocketHandler();
+
   ServeHandler._(this._state, this._assetHandler, this._assetGraphHandler,
       this._rootPackage) {
     _state.buildResults.listen((result) {
       _lastBuildResult = result;
+      _webSocketHandler.emitUpdateMessage(result);
     });
   }
 
@@ -55,14 +63,17 @@ class ServeHandler implements BuildState {
   @override
   Stream<BuildResult> get buildResults => _state.buildResults;
 
-  shelf.Handler handlerFor(String rootDir, {bool logRequests}) {
+  shelf.Handler handlerFor(String rootDir,
+      {bool logRequests, bool liveReload}) {
+    liveReload ??= false;
     logRequests ??= false;
     if (p.url.split(rootDir).length != 1) {
       throw new ArgumentError.value(
           rootDir, 'rootDir', 'Only top level directories are supported');
     }
     _state.currentBuild.then((_) => _warnForEmptyDirectory(rootDir));
-    var cascade = new shelf.Cascade()
+    var cascade = new shelf.Cascade();
+    cascade = (liveReload ? cascade.add(_webSocketHandler.handler) : cascade)
         .add(_blockOnCurrentBuild)
         .add((shelf.Request request) async {
       if (request.url.path == _performancePath) {
@@ -76,12 +87,14 @@ class ServeHandler implements BuildState {
       var assetHandler = await _assetHandler;
       return assetHandler.handle(request, rootDir);
     });
-    var handler = logRequests
-        ? const shelf.Pipeline()
-            .addMiddleware(_logRequests)
-            .addHandler(cascade.handler)
-        : cascade.handler;
-    return handler;
+    var pipeline = shelf.Pipeline();
+    if (logRequests) {
+      pipeline = pipeline.addMiddleware(_logRequests);
+    }
+    if (liveReload) {
+      pipeline = pipeline.addMiddleware(_injectBuildUpdatesClientCode);
+    }
+    return pipeline.addHandler(cascade.handler);
   }
 
   Future<shelf.Response> _blockOnCurrentBuild(_) async {
@@ -110,6 +123,72 @@ class ServeHandler implements BuildState {
   }
 }
 
+/// Class that manages web socket connection handler to inform clients about
+/// build updates
+class BuildUpdatesWebSocketHandler {
+  final activeConnections = <WebSocketChannel>[];
+  final shelf.Handler Function(Function, {Iterable<String> protocols})
+      _handlerFactory;
+  shelf.Handler _internalHandler;
+
+  BuildUpdatesWebSocketHandler([this._handlerFactory = webSocketHandler]) {
+    // Because of dart-lang/shelf_web_socket#11, webSocketHandler doesn't work
+    // with strongly typed functions. As a workaround diskard type information
+    // wrapping it with lambda for now
+    var untypedTearOff = (webSocket, protocol) =>
+        _handleConnection(webSocket as WebSocketChannel, protocol as String);
+    _internalHandler =
+        _handlerFactory(untypedTearOff, protocols: [_buildUpdatesProtocol]);
+  }
+
+  shelf.Handler get handler => _internalHandler;
+
+  void emitUpdateMessage(BuildResult buildResult) {
+    for (var webSocket in activeConnections) {
+      webSocket.sink.add(_buildUpdatesMessage);
+    }
+  }
+
+  void _handleConnection(WebSocketChannel webSocket, String protocol) async {
+    activeConnections.add(webSocket);
+    await webSocket.stream.drain();
+    activeConnections.remove(webSocket);
+  }
+}
+
+shelf.Handler _injectBuildUpdatesClientCode(shelf.Handler innerHandler) {
+  return (shelf.Request request) async {
+    if (!request.url.path.endsWith('.js')) {
+      return innerHandler(request);
+    }
+    var response = await innerHandler(request);
+    // TODO: Find a way how to check and/or modify body without reading it whole
+    var body = await response.readAsString();
+    if (body.startsWith(entrypointExtensionMarker)) {
+      body += _buildUpdatesInjectedJS;
+    }
+    return response.change(body: body);
+  };
+}
+
+/// Hot-reload config
+///
+/// Listen WebSocket for updates in build results
+///
+/// Now only live-reload functional - just reload page on update message
+final _buildUpdatesInjectedJS = '''\n
+// Injected by build_runner for live reload support
+(function() {
+  var ws = new WebSocket('ws://' + location.host, ['$_buildUpdatesProtocol']);
+  ws.onmessage = function(event) {
+    console.log(event);
+    if(event.data === '$_buildUpdatesMessage'){
+      location.reload();
+    }
+  };
+}());
+''';
+
 class AssetHandler {
   final FinalizedReader _reader;
   final String _rootPackage;

build_runner/pubspec.yaml

@@ -1,5 +1,5 @@
 name: build_runner
-version: 0.10.0
+version: 0.10.1-dev
 description: Tools to write binaries that run builders.
 author: Dart Team <[email protected]>
 homepage: https://github.com/dart-lang/build/tree/master/build_runner
@@ -34,9 +34,11 @@ dependencies:
   pub_semver: ^1.4.0
   pubspec_parse: ^0.1.0
   shelf: ">=0.6.5 <0.8.0"
+  shelf_web_socket: ^0.2.2+3
   stack_trace: ^1.9.0
   stream_transform: ^0.0.9
   watcher: ^0.9.7
+  web_socket_channel: ^1.0.9
   yaml: ^2.1.0
 
 dev_dependencies:

build_runner/test/server/serve_handler_test.dart

@@ -7,6 +7,7 @@ import 'dart:io';
 
 import 'package:logging/logging.dart';
 import 'package:shelf/shelf.dart';
+import 'package:stream_channel/stream_channel.dart';
 import 'package:test/test.dart';
 
 import 'package:build_runner/build_runner.dart';
@@ -20,6 +21,7 @@ import 'package:build_runner/src/server/server.dart';
 
 import 'package:_test_common/common.dart';
 import 'package:_test_common/package_graphs.dart';
+import 'package:web_socket_channel/web_socket_channel.dart';
 
 void main() {
   ServeHandler serveHandler;
@@ -162,6 +164,137 @@ void main() {
       expect(await response.readAsString(), contains('--track-performance'));
     });
   });
+
+  group('build updates', () {
+    test('injects client code if enabled', () async {
+      _addSource('a|web/some.js', entrypointExtensionMarker + '\nalert(1)');
+      var response = await serveHandler.handlerFor('web', liveReload: true)(
+          new Request('GET', Uri.parse('http://server.com/some.js')));
+      expect(await response.readAsString(), contains('\$livereload'));
+    });
+
+    test('doesn\'t inject client code if disabled', () async {
+      _addSource('a|web/some.js', entrypointExtensionMarker + '\nalert(1)');
+      var response = await serveHandler.handlerFor('web', liveReload: false)(
+          new Request('GET', Uri.parse('http://server.com/some.js')));
+      expect(await response.readAsString(), isNot(contains('\$livereload')));
+    });
+
+    test('doesn\'t inject client code in non-js files', () async {
+      _addSource('a|web/some.html', entrypointExtensionMarker + '\n<br>some');
+      var response = await serveHandler.handlerFor('web', liveReload: true)(
+          new Request('GET', Uri.parse('http://server.com/some.html')));
+      expect(await response.readAsString(), isNot(contains('\$livereload')));
+    });
+
+    test('doesn\'t inject client code in non-marked files', () async {
+      _addSource('a|web/some.js', 'alert(1)');
+      var response = await serveHandler.handlerFor('web', liveReload: true)(
+          new Request('GET', Uri.parse('http://server.com/some.js')));
+      expect(await response.readAsString(), isNot(contains('\$livereload')));
+    });
+
+    test('expect websocket connection if enabled', () async {
+      _addSource('a|web/index.html', 'content');
+      expect(
+          serveHandler.handlerFor('web', liveReload: true)(
+              new Request('GET', Uri.parse('ws://server.com/'),
+                  headers: {
+                    'Connection': 'Upgrade',
+                    'Upgrade': 'websocket',
+                    'Sec-WebSocket-Version': '13',
+                    'Sec-WebSocket-Key': 'abc',
+                  },
+                  onHijack: (f) {})),
+          throwsA(TypeMatcher<HijackException>()));
+    });
+
+    test('reject websocket connection if disabled', () async {
+      _addSource('a|web/index.html', 'content');
+      var response = await serveHandler.handlerFor('web', liveReload: false)(
+          new Request('GET', Uri.parse('ws://server.com/'), headers: {
+        'Connection': 'Upgrade',
+        'Upgrade': 'websocket',
+        'Sec-WebSocket-Version': '13',
+        'Sec-WebSocket-Key': 'abc',
+      }));
+      expect(response.statusCode, 200);
+      expect(await response.readAsString(), 'content');
+    });
+
+    group('WebSocket handler', () {
+      BuildUpdatesWebSocketHandler buildUpdatesWebSocketHandler;
+      Function createMockConection;
+
+      // client to server stream controlllers
+      StreamController<List<int>> c2sController1;
+      StreamController<List<int>> c2sController2;
+      // server to client stream controlllers
+      StreamController<List<int>> s2cController1;
+      StreamController<List<int>> s2cController2;
+
+      WebSocketChannel clientChannel1;
+      WebSocketChannel clientChannel2;
+      WebSocketChannel serverChannel1;
+      WebSocketChannel serverChannel2;
+
+      setUp(() {
+        var mockHandlerFactory = (Function onConnect, {protocols}) {
+          createMockConection =
+              (WebSocketChannel serverChannel) => onConnect(serverChannel, '');
+        };
+        buildUpdatesWebSocketHandler =
+            BuildUpdatesWebSocketHandler(mockHandlerFactory);
+
+        c2sController1 = StreamController<List<int>>();
+        s2cController1 = StreamController<List<int>>();
+        serverChannel1 = WebSocketChannel(
+            StreamChannel(c2sController1.stream, s2cController1.sink),
+            serverSide: true);
+        clientChannel1 = WebSocketChannel(
+            StreamChannel(s2cController1.stream, c2sController1.sink),
+            serverSide: false);
+
+        c2sController2 = StreamController<List<int>>();
+        s2cController2 = StreamController<List<int>>();
+        serverChannel2 = WebSocketChannel(
+            StreamChannel(c2sController2.stream, s2cController2.sink),
+            serverSide: true);
+        clientChannel2 = WebSocketChannel(
+            StreamChannel(s2cController2.stream, c2sController2.sink),
+            serverSide: false);
+      });
+
+      tearDown(() {
+        c2sController1.close();
+        s2cController1.close();
+        c2sController2.close();
+        s2cController2.close();
+      });
+
+      test('emmits a message to all listners', () async {
+        expect(clientChannel1.stream, emitsInOrder(['update', emitsDone]));
+        expect(clientChannel2.stream, emitsInOrder(['update', emitsDone]));
+        createMockConection(serverChannel1);
+        createMockConection(serverChannel2);
+        buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+        await clientChannel1.sink.close();
+        await clientChannel2.sink.close();
+      });
+
+      test('deletes listners on disconect', () async {
+        expect(clientChannel1.stream,
+            emitsInOrder(['update', 'update', emitsDone]));
+        expect(clientChannel2.stream, emitsInOrder(['update', emitsDone]));
+        createMockConection(serverChannel1);
+        createMockConection(serverChannel2);
+        buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+        await clientChannel2.sink.close();
+        buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+        await clientChannel1.sink.close();
+      });
+    });
+  });
 }
 
 class MockWatchImpl implements WatchImpl {

build_web_compilers/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.4.2
+
+- Add magic comment marker for build_runner to know where to inject 
+  live-reloading client code.
+
 ## 0.4.1
 
 - Support the latest build_modules, with updated dart2js support so that it can