Add simple live-reload implementation

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,67 @@ class ServeHandler implements BuildState {
   }
 }
 
+/// Class that manages web socket connection handler to inform clients about
+/// build updates
+class BuildUpdatesWebSocketHandler {
+  final activeConnections = <WebSocketChannel>[];
+  final Function _handlerFactory;
+  shelf.Handler _internalHandler;
+
+  BuildUpdatesWebSocketHandler([this._handlerFactory = webSocketHandler]) {
+    var untypedTearOff = (webSocket, protocol) =>
+        _handleConnection(webSocket as WebSocketChannel, protocol as String);
+    _internalHandler = _handlerFactory(
+        untypedTearOff, protocols: [_buildUpdatesProtocol]) as shelf.Handler;
+  }
+
+  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
+(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,97 @@ void main() {
       expect(await response.readAsString(), contains('--track-performance'));
     });
   });
+
+  group('build updates', () {
+    final _entrypointExtensionMarker = '/* ENTRYPOINT_EXTENTION_MARKER */';
+
+    test('injects client code if enabled', () async {
+      _addSource('a|web/some.js', _entrypointExtensionMarker);
+      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);
+      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);
+      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', 'content');
+      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('emmits a message to all listners', () async {
+      Function exposedOnConnect;
+      var mockHandlerFactory = (Function onConnect, {protocols}) {
+        exposedOnConnect = onConnect;
+      };
+      var buildUpdatesWebSocketHandler = BuildUpdatesWebSocketHandler(
+          mockHandlerFactory);
+
+      var streamControllerFirst1 = StreamController<List<int>>();
+      var streamControllerFirst2 = StreamController<List<int>>();
+      var serverChannelFirst = WebSocketChannel(StreamChannel(streamControllerFirst1.stream, streamControllerFirst2.sink), serverSide: true);
+      var clientChannelFirst = WebSocketChannel(StreamChannel(streamControllerFirst2.stream, streamControllerFirst1.sink), serverSide: false);
+
+      var streamControllerSecond1 = StreamController<List<int>>();
+      var streamControllerSecond2 = StreamController<List<int>>();
+      var serverChannelSecond = WebSocketChannel(StreamChannel(streamControllerSecond1.stream, streamControllerSecond2.sink), serverSide: true);
+      var clientChannelSecond = WebSocketChannel(StreamChannel(streamControllerSecond2.stream, streamControllerSecond1.sink), serverSide: false);
+
+      var deferredExpect1 = clientChannelFirst.stream.single.then((value) => expect(value, 'update'));
+      var deferredExpect2 = clientChannelSecond.stream.single.then((value) => expect(value, 'update'));
+      exposedOnConnect(serverChannelFirst, '');
+      exposedOnConnect(serverChannelSecond, '');
+      buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+      await clientChannelFirst.sink.close();
+      await clientChannelSecond.sink.close();
+      await deferredExpect1;
+      await deferredExpect2;
+    });
+
+    test('deletes listners on disconect', () async {
+      Function exposedOnConnect;
+      var mockHandlerFactory = (Function onConnect, {protocols}) {
+        exposedOnConnect = onConnect;
+      };
+      var buildUpdatesWebSocketHandler = BuildUpdatesWebSocketHandler(
+          mockHandlerFactory);
+
+      var streamControllerFirst1 = StreamController<List<int>>();
+      var streamControllerFirst2 = StreamController<List<int>>();
+      var serverChannelFirst = WebSocketChannel(StreamChannel(streamControllerFirst1.stream, streamControllerFirst2.sink), serverSide: true);
+      var clientChannelFirst = WebSocketChannel(StreamChannel(streamControllerFirst2.stream, streamControllerFirst1.sink), serverSide: false);
+
+      var streamControllerSecond1 = StreamController<List<int>>();
+      var streamControllerSecond2 = StreamController<List<int>>();
+      var serverChannelSecond = WebSocketChannel(StreamChannel(streamControllerSecond1.stream, streamControllerSecond2.sink), serverSide: true);
+      var clientChannelSecond = WebSocketChannel(StreamChannel(streamControllerSecond2.stream, streamControllerSecond1.sink), serverSide: false);
+
+      var deferredExpect1 = clientChannelFirst.stream.toList().then((value) => expect(value, ['update', 'update']));
+      var deferredExpect2 = clientChannelSecond.stream.single.then((value) => expect(value, 'update'));
+      exposedOnConnect(serverChannelFirst, '');
+      exposedOnConnect(serverChannelSecond, '');
+      buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+      await clientChannelSecond.sink.close();
+      buildUpdatesWebSocketHandler.emitUpdateMessage(null);
+      await clientChannelFirst.sink.close();
+      await deferredExpect1;
+      await deferredExpect2;
+    });
+  });
 }
 
 class MockWatchImpl implements WatchImpl {

build_web_compilers/lib/src/dev_compiler_bootstrap.dart

@@ -79,7 +79,7 @@ Future<Null> bootstrapDdc(BuildStep buildStep,
             : _context.joinAll(_context.split(jsId.path).skip(1)));
   }
 
-  var bootstrapContent = new StringBuffer('(function() {\n');
+  var bootstrapContent = new StringBuffer('$_entrypointExtensionMarker\n(function() {\n');
   bootstrapContent.write(_dartLoaderSetup(modulePaths));
   bootstrapContent.write(_requireJsConfig);
 
@@ -321,6 +321,12 @@ require.config({
 });
 ''';
 
+/// Marker comment used by build_runner (or any other thinks) to identify
+/// entrypoint file, to inject custom code there.
+///
+/// Should be first line in a file, so server don't need to parse whole body
+final _entrypointExtensionMarker = '/* ENTRYPOINT_EXTENTION_MARKER */';
+
 final _baseUrlScript = '''
 var baseUrl = (function () {
   // Attempt to detect base url using <base href> html tag