removed INJECTION const that when injected affected certain styles on…

spec/amber/cli/commands/pipelines/pipelines_spec.cr

@@ -28,6 +28,7 @@ module Amber::CLI
           Amber::Pipe::Session
           Amber::Pipe::Flash
           Amber::Pipe::CSRF
+          Amber::Pipe::Reload
         )
 
         static_default_plugs = %w(

src/amber/cli/templates/app/config/routes.cr

@@ -10,6 +10,7 @@ Amber::Server.configure do
     plug Amber::Pipe::Session.new
     plug Amber::Pipe::Flash.new
     plug Amber::Pipe::CSRF.new
+    plug Amber::Pipe::Reload.new if Amber.env.development?
   end
 
   pipeline :api do

src/amber/cli/templates/app/public/js/amber_reload.js

@@ -0,0 +1,55 @@
+if ('WebSocket' in window) {
+  (function () {
+    /**
+     * Allows to reload the browser when the server connection is lost
+     */
+    function tryReload() {
+      var request = new XMLHttpRequest();
+      request.open('GET', window.location.href, true);
+      request.onreadystatechange = function () {
+        if (request.readyState == 4) {
+          if (request.status == 0) {
+            setTimeout(function () {
+                tryReload();
+            }, 1000)
+          } else {
+            window.location.reload();
+          }
+        }
+      };
+      request.send();
+    }
+
+    /**
+     * Listen server file reload
+     */
+    function refreshCSS() {
+      var sheets = [].slice.call(document.getElementsByTagName('link'));
+      var head = document.getElementsByTagName('head')[0];
+      for (var i = 0; i < sheets.length; ++i) {
+        var elem = sheets[i];
+        var rel = elem.rel;
+        if (elem.href && typeof rel != 'string' || rel.length == 0 || rel.toLowerCase() == 'stylesheet') {
+          head.removeChild(elem);
+          var url = elem.href.replace(/(&|\\?)_cacheOverride=\\d+/, '');
+          elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
+          head.appendChild(elem);
+        }
+      }
+    }
+
+    var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+    var address = protocol + window.location.host + '/client-reload';
+    var socket = new WebSocket(address);
+    socket.onmessage = function (msg) {
+      if (msg.data == 'reload') {
+        tryReload();
+      } else if (msg.data == 'refreshcss') {
+        refreshCSS();
+      }
+    };
+    socket.onclose = function () {
+      tryReload();
+    }
+  })();
+}

src/amber/cli/templates/app/src/views/layouts/application.ecr.ecr

@@ -42,5 +42,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
     <script src="/dist/main.bundle.js"></script>
+    <%="<"%>%- if Amber.env.development? -%><script src="/js/amber_reload.js"></script><%="<"%>%- end -%>
   </body>
 </html>

src/amber/cli/templates/app/src/views/layouts/application.slang.ecr

@@ -30,3 +30,5 @@ html
     script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
     script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
     script src="/dist/main.bundle.js"
+    - if Amber.env.development?
+      script src="/js/amber_reload.js"

src/amber/pipes/reload.cr

@@ -0,0 +1,23 @@
+require "../../support/client_reload"
+
+module Amber
+  module Pipe
+    # Reload clients browsers using `ClientReload`.
+    #
+    # NOTE: Amber::Pipe::Reload is intended for use in a development environment.
+    # ```
+    # pipeline :web do
+    #   plug Amber::Pipe::Reload.new
+    # end
+    # ```
+    class Reload < Base
+      def initialize(@env : Amber::Environment::Env = Amber.env)
+        Support::ClientReload.new
+      end
+
+      def call(context : HTTP::Server::Context)
+        call_next(context)
+      end
+    end
+  end
+end

src/amber/support/client_reload.cr

@@ -4,7 +4,7 @@ module Amber::Support
   # Allow clients browser reloading using WebSockets and file watchers.
   struct ClientReload
     FILE_TIMESTAMPS = {} of String => String
-    WEBSOCKET_PATH  = rand(0x10000000).to_s(36)
+    WEBSOCKET_PATH  = "client-reload"
     SESSIONS        = [] of HTTP::WebSocket
 
     def initialize
@@ -70,50 +70,5 @@ module Amber::Support
     def log(message)
       Amber.logger.info(message, "Watcher", :light_gray)
     end
-
-    # Code from https://github.com/tapio/live-server/blob/master/injected.html
-    INJECTED_CODE = <<-HTML
-    <!-- Code injected by Amber Framework -->
-    <script type="text/javascript">
-      // <![CDATA[  <-- For SVG support
-      if ('WebSocket' in window) {
-        (function() {
-          function refreshCSS() {
-            console.log('Reloading CSS...');
-            var sheets = [].slice.call(document.getElementsByTagName('link'));
-            var head = document.getElementsByTagName('head')[0];
-            for (var i = 0; i < sheets.length; ++i) {
-              var elem = sheets[i];
-              var rel = elem.rel;
-              if (elem.href && typeof rel != 'string' || rel.length == 0 || rel.toLowerCase() == 'stylesheet') {
-                head.removeChild(elem);
-                var url = elem.href.replace(/(&|\\?)_cacheOverride=\\d+/, '');
-                elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
-                head.appendChild(elem);
-              }
-            }
-          }
-          var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
-          var address = protocol + window.location.host + '/#{WEBSOCKET_PATH}';
-          var socket = new WebSocket(address);
-          socket.onmessage = function(msg) {
-            if (msg.data == 'reload') {
-              window.location.reload();
-            } else if (msg.data == 'refreshcss') {
-              refreshCSS();
-            }
-          };
-          socket.onclose = function() {
-            console.log('Conection closed!');
-            setTimeout(function() {
-                window.location.reload();
-            }, 1000);
-          }
-          console.log('Live reload enabled.');
-        })();
-      }
-      // ]]>
-    </script>\n
-    HTML
   end
 end