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/server/server.dart

@@ -21,7 +21,9 @@ import 'path_to_asset_id.dart';
 
 const _performancePath = r'$perf';
 final _graphPath = r'$graph';
-final _buildUpdatesPath = r'$livereload';
+final _buildUpdatesProtocol = r'$livereload';
+final _buildUpdatesMessage = 'update';
+final _entrypointExtensionMarker = '/* ENTRYPOINT_EXTENTION_MARKER */';
 
 final _logger = new Logger('Serve');
 
@@ -85,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 {
@@ -119,34 +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);
+    _internalHandler = webSocketHandler(_handleConnection, protocols: [_buildUpdatesProtocol]);
   }
 
-  Future<shelf.Response> handler(shelf.Request request) async {
-    if (!request.url.path.startsWith(_buildUpdatesPath)) {
-      return new shelf.Response.notFound('');
-    }
-    return _internalHandler(request);
-  }
+  shelf.Handler get handler => _internalHandler;
 
   void emitUpdateMessage(BuildResult buildResult) {
     for (var webSocket in activeConnections) {
-      webSocket.sink.add('update');
+      webSocket.sink.add(_buildUpdatesMessage);
     }
   }
 
-  void _handleConnection(WebSocketChannel webSocket) async {
+  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

build_web_compilers/lib/src/dev_compiler_bootstrap.dart

@@ -79,10 +79,9 @@ 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);
-  bootstrapContent.write(_hotReloadConfig);
 
   bootstrapContent.write(_appBootstrap(
       appModuleName, appModuleScope, ignoreCastFailures, enableSyncAsync));
@@ -322,35 +321,11 @@ require.config({
 });
 ''';
 
-/// Hot-reload config
+/// Marker comment used by build_runner (or any other thinks) to identify
+/// entrypoint file, to inject custom code there.
 ///
-/// Listen WebSocket for updates in build results
-///
-/// Now only ilve-reload functional - just reload page on update message
-final _hotReloadConfig = '''
-(function() {
-  var wsUrl; 
-  if (baseUrl.startsWith('http')) {
-    wsUrl = baseUrl.replace('http', 'ws');
-  } else {
-    // TODO: when it may make sense? WebWorkers? Tests?
-    wsUrl = 'ws://' + location.host + baseUrl;
-  }
-  wsUrl += '\$livereload';
-  try {
-    var ws = new WebSocket(wsUrl);
-    ws.onmessage = function(event) {
-      console.log(event);
-      if(event.data === 'update'){
-        location.reload();
-      }
-    };
-  } catch (e) {
-    // Live reload might be turned off. Just ignore it for now
-    // TODO: Find a way to pass serve option here, to not inject this code at all, if live/hot reload is turned off
-  }
-}());
-''';
+/// 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 () {