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,64 @@ class ServeHandler implements BuildState {
   }
 }
 
+/// Class that manages web socket connection handler to inform clients about
+/// build updates
+class BuildUpdatesWebSocketHandler {
+  final activeConnections = <WebSocketChannel>[];
+  shelf.Handler _internalHandler;
+
+  BuildUpdatesWebSocketHandler() {
+    _internalHandler = webSocketHandler(_handleConnection, 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) {
+    if (!request.url.path.endsWith('.js')) {
+      return innerHandler(request);
+    }
+    return Future.sync(() => innerHandler(request)).then((response) async {
+      // 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 ilve-reload functional - just reload page on update message
+final _buildUpdatesInjectedJS = '''
+(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_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