Feature Adding AssetPipeline & ImportMaps

src/amber/cli/templates/app/.amber.yml.ecr

@@ -22,6 +22,7 @@ watch:
       - ./src/views/**/*.slang
       <%- end -%>
       - ./src/locales/*.yml
+      - ./src/javascript/**/*.js
     # exclude: # NOTE simplistic implementation: (1) enumerate all includes and excludes; (2) return (includes - excludes)
     #  - ./src/some_irrelevant_file.cr
   spec:

src/amber/cli/templates/app/config/initializers/import_map.cr.ecr

@@ -0,0 +1,15 @@
+require "asset_pipeline"
+
+FRONT_LOADER = AssetPipeline::FrontLoader.new(js_source_path: Path["src/javascript"], js_output_path: Path["public"]) do |import_maps|
+  import_map = AssetPipeline::ImportMap.new
+
+  if Amber.settings.auto_reload
+    import_map.add_import("client_reload", "/client_reload.js")
+  end
+
+  import_map.add_import("@popperjs/core", "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js")
+  import_map.add_import("bootstrap", "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.esm.min.js")
+  import_map.add_import("amber", "/amber.js")
+
+  import_maps << import_map
+end

src/amber/cli/templates/app/config/logger.cr.ecr

@@ -26,6 +26,7 @@ backend.formatter = Log::Formatter.new do |entry, io|
   io << " (#{entry.severity})" if entry.severity > Log::Severity::Debug
   io << " "
   io << entry.message
+  io << " #{entry.exception}" if entry.exception
 end
 
 Log.builder.clear

src/amber/cli/templates/app/shard.yml.ecr

@@ -51,6 +51,10 @@ dependencies:
     github: dare892/citrine-i18n
     version: ~> 1.0.0
 
+  asset_pipeline:
+    github: amberframework/asset_pipeline
+    version: ~> 0.34.0
+
 development_dependencies:
   ameba:
     github: crystal-ameba/ameba

src/amber/cli/templates/app/public/js/amber.js → src/amber/cli/templates/app/src/javascript/amber.js

@@ -231,28 +231,30 @@ export default {
 /**
  * Allows delete links to post for security and ease of use similar to Rails jquery_ujs
  */
-document.addEventListener("DOMContentLoaded", () => {
-  let elements = document.querySelectorAll("a[data-method='delete']");
-  for (let i = 0; i < elements.length; i++) {
-    elements[i].addEventListener("click", (e) => {
-      e.preventDefault();
-      let message = elements[i].getAttribute("data-confirm") || "Are you sure?";
-      if (confirm(message)) {
-        let form = document.createElement("form");
-        let input = document.createElement("input");
-        form.setAttribute("action", elements[i].getAttribute("href"));
-        form.setAttribute("method", "POST");
-        input.setAttribute("type", "hidden");
-        input.setAttribute("name", "_method");
-        input.setAttribute("value", "DELETE");
-        form.appendChild(input);
-        document.body.appendChild(form);
-        form.submit();
-      }
-      return false;
-    })
-  }
-});
+export function initialize() {
+  document.addEventListener("DOMContentLoaded", () => {
+    let elements = document.querySelectorAll("a[data-method='delete']");
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].addEventListener("click", (e) => {
+        e.preventDefault();
+        let message = elements[i].getAttribute("data-confirm") || "Are you sure?";
+        if (confirm(message)) {
+          let form = document.createElement("form");
+          let input = document.createElement("input");
+          form.setAttribute("action", elements[i].getAttribute("href"));
+          form.setAttribute("method", "POST");
+          input.setAttribute("type", "hidden");
+          input.setAttribute("name", "_method");
+          input.setAttribute("value", "DELETE");
+          form.appendChild(input);
+          document.body.appendChild(form);
+          form.submit();
+        }
+        return false;
+      })
+    }
+  });
+}
 
 if (!Date.prototype.toGranite) {
   (function() {

src/amber/cli/templates/app/src/javascript/client_reload.js

@@ -0,0 +1,35 @@
+let tryReload
+
+export function initializeWebSockets() {
+  console.log("initializeWebSockets has run...")
+
+  tryReload = async function () {
+    try {
+      const response = await fetch(window.location.href);
+      if (!response.ok) {
+        setTimeout(tryReload, 1000);
+      } else {
+        window.location.reload();
+      }
+    } catch (error) {
+      setTimeout(tryReload, 1000);
+    }
+  }
+
+  if ('WebSocket' in window) {
+    const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'
+    const address = protocol + window.location.host + '/client-reload'
+    const socket = new WebSocket(address)
+
+    socket.onmessage = function (msg) {
+      console.log(msg)
+      if (msg.data == 'reload') {
+        tryReload()
+      }
+    }
+
+    socket.onclose = function () {
+      setTimeout(tryReload, 1000)
+    }
+  }
+}

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

@@ -38,9 +38,15 @@
       </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
-
-    <script type="module" src="/js/amber.js"></script>
-    <%="<"%>%- if Amber.settings.auto_reload? -%><script src="/js/client_reload.js"></script><%="<"%>%- end -%>
+    <%= "<"%>%= FRONT_LOADER.render_import_map_tag %>
+    <script type="module">
+      import { initialize } from 'amber'
+      initialize()
+
+      <%= "<"%>%- if Amber.settings.auto_reload? %>
+      import { initializeWebSockets } from 'client_reload'
+      initializeWebSockets()
+      <%= "<"%>% end %>
+    </script>
   </body>
 </html>

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

@@ -28,8 +28,9 @@ html
 
       .main== content
 
-    script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
+    == FRONT_LOADER.render_import_map_tag
 
-    script type="module" src="/js/amber.js"
-    - if Amber.settings.auto_reload?
-      script src="/js/client_reload.js"
+    script type="module"
+      = "import { initialize } from 'amber'";
+      - if Amber.settings.auto_reload?
+        = "import { initializeWebSockets } from 'client_reload'";