Support jsbundling

This reworks the approach to remove the dependency. Instead of parsing the importmaps entry, the engine will now expose an endpoint to fetch the source of changed assets. The Stimulus reloader will fetch the changed javascript files using that endpoint so that it won't depend on importmaps anymore.
hotwired · Dec 23, 2024 · 58b182e · 58b182e
1 parent 0ae1c57
commit 58b182e
Show file tree

Hide file tree

Showing 14 changed files with 134 additions and 133 deletions.
diff --git a/app/assets/javascripts/hotwire_spark.js b/app/assets/javascripts/hotwire_spark.js
@@ -1396,71 +1396,60 @@ var HotwireSpark = (function () {
   }
 
   class StimulusReloader {
-    static async reload(filePattern) {
-      const document = await reloadHtmlDocument();
-      return new StimulusReloader(document, filePattern).reload();
+    static async reload(path) {
+      return new StimulusReloader(path).reload();
     }
-    constructor(document) {
-      let filePattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : /./;
-      this.document = document;
-      this.filePattern = filePattern;
+    static async reloadAll() {
+      Stimulus.controllers.forEach(controller => {
+        Stimulus.unload(controller.identifier);
+        Stimulus.register(controller.identifier, controller.constructor);
+      });
+      return Promise.resolve();
+    }
+    constructor(changedPath) {
+      this.changedPath = changedPath;
       this.application = window.Stimulus;
     }
     async reload() {
       log("Reload Stimulus controllers...");
       this.application.stop();
-      await this.#reloadChangedStimulusControllers();
-      this.#unloadDeletedStimulusControllers();
+      try {
+        await this.#reloadChangedController();
+      } catch (SourceFileNotFound) {
+        this.#deregisterChangedController();
+      }
       this.application.start();
     }
-    async #reloadChangedStimulusControllers() {
-      await Promise.all(this.#stimulusControllerPathsToReload.map(async moduleName => this.#reloadStimulusController(moduleName)));
-    }
-    get #stimulusControllerPathsToReload() {
-      this.controllerPathsToReload = this.controllerPathsToReload || this.#stimulusControllerPaths.filter(path => this.#shouldReloadController(path));
-      return this.controllerPathsToReload;
-    }
-    get #stimulusControllerPaths() {
-      return Object.keys(this.#stimulusPathsByModule).filter(path => path.endsWith("_controller"));
-    }
-    #shouldReloadController(path) {
-      return this.filePattern.test(path);
+    async #reloadChangedController() {
+      const module = await this.#importControllerFromSource(this.changedPath);
+      await this.#registerController(this.#changedControllerIdentifier, module);
     }
-    get #stimulusPathsByModule() {
-      this.pathsByModule = this.pathsByModule || this.#parseImportmapJson();
-      return this.pathsByModule;
-    }
-    #parseImportmapJson() {
-      const importmapScript = this.document.querySelector("script[type=importmap]");
-      return JSON.parse(importmapScript.text).imports;
-    }
-    async #reloadStimulusController(moduleName) {
-      log(`\t${moduleName}`);
-      const controllerName = this.#extractControllerName(moduleName);
-      const path = cacheBustedUrl(this.#pathForModuleName(moduleName));
-      const module = await import(path);
-      this.#registerController(controllerName, module);
-    }
-    #unloadDeletedStimulusControllers() {
-      this.#controllersToUnload.forEach(controller => this.#deregisterController(controller.identifier));
-    }
-    get #controllersToUnload() {
-      if (this.#didChangeTriggerAReload) {
-        return [];
-      } else {
-        return this.application.controllers.filter(controller => this.filePattern.test(`${controller.identifier}_controller`));
+    async #importControllerFromSource(path) {
+      const response = await fetch(`/spark/source_files/?path=${path}`);
+      if (response.status === 404) {
+        throw new SourceFileNotFound(`Source file not found: ${path}`);
       }
+      const sourceCode = await response.text();
+      const blob = new Blob([sourceCode], {
+        type: "application/javascript"
+      });
+      const moduleUrl = URL.createObjectURL(blob);
+      const module = await import(moduleUrl);
+      URL.revokeObjectURL(moduleUrl);
+      return module;
     }
-    get #didChangeTriggerAReload() {
-      return this.#stimulusControllerPathsToReload.length > 0;
-    }
-    #pathForModuleName(moduleName) {
-      return this.#stimulusPathsByModule[moduleName];
+    get #changedControllerIdentifier() {
+      this.changedControllerIdentifier = this.changedControllerIdentifier || this.#extractControllerName(this.changedPath);
+      return this.changedControllerIdentifier;
     }
     #extractControllerName(path) {
-      return path.replace(/^.*\//, "").replace("_controller", "").replace(/\//g, "--").replace(/_/g, "-");
+      return path.replace(/^.*\//, "").replace("_controller", "").replace(/\//g, "--").replace(/_/g, "-").replace(/\.js$/, "");
+    }
+    #deregisterChangedController() {
+      this.#deregisterController(this.#changedControllerIdentifier);
     }
     #registerController(name, module) {
+      log("\tReloading controller", name);
       this.application.unload(name);
       this.application.register(name, module.default);
     }
@@ -1469,14 +1458,15 @@ var HotwireSpark = (function () {
       this.application.unload(name);
     }
   }
+  class SourceFileNotFound extends Error {}
 
   class HtmlReloader {
     static async reload() {
       return new HtmlReloader().reload();
     }
     async reload() {
-      const reloadedDocument = await this.#reloadHtml();
-      await this.#reloadStimulus(reloadedDocument);
+      await this.#reloadHtml();
+      await this.#reloadStimulus();
     }
     async #reloadHtml() {
       log("Reload html...");
@@ -1487,8 +1477,8 @@ var HotwireSpark = (function () {
     #updateBody(newBody) {
       Idiomorph.morph(document.body, newBody);
     }
-    async #reloadStimulus(reloadedDocument) {
-      return new StimulusReloader(reloadedDocument).reload();
+    async #reloadStimulus() {
+      await StimulusReloader.reloadAll();
     }
   }
 
@@ -1573,7 +1563,7 @@ var HotwireSpark = (function () {
         case "reload_css":
           return this.reloadCss(fileName);
         case "reload_stimulus":
-          return this.reloadStimulus(fileName);
+          return this.reloadStimulus(path);
         default:
           throw new Error(`Unknown action: ${action}`);
       }
@@ -1584,8 +1574,8 @@ var HotwireSpark = (function () {
     reloadCss(fileName) {
       return CssReloader.reload(new RegExp(fileName));
     },
-    reloadStimulus(fileName) {
-      return StimulusReloader.reload(new RegExp(fileName));
+    reloadStimulus(path) {
+      return StimulusReloader.reload(path);
     }
   });
 

diff --git a/app/assets/javascripts/hotwire_spark.min.js b/app/assets/javascripts/hotwire_spark.min.js
diff --git a/app/assets/javascripts/hotwire_spark.min.js.map b/app/assets/javascripts/hotwire_spark.min.js.map
diff --git a/app/controllers/hotwire/spark/source_files_controller.rb b/app/controllers/hotwire/spark/source_files_controller.rb
@@ -0,0 +1,14 @@
+class Hotwire::Spark::SourceFilesController < ActionController::Base
+  def show
+    if File.exist?(path_param)
+      render plain: File.read(path_param)
+    else
+      head :not_found
+    end
+  end
+
+  private
+    def path_param
+      Rails.root.join params[:path]
+    end
+end
diff --git a/app/javascript/hotwire/spark/channels/monitoring_channel.js b/app/javascript/hotwire/spark/channels/monitoring_channel.js
@@ -26,7 +26,7 @@ consumer.subscriptions.create({ channel: "Hotwire::Spark::Channel" }, {
       case "reload_css":
         return this.reloadCss(fileName)
       case "reload_stimulus":
-        return this.reloadStimulus(fileName)
+        return this.reloadStimulus(path)
       default:
         throw new Error(`Unknown action: ${action}`)
     }
@@ -40,8 +40,8 @@ consumer.subscriptions.create({ channel: "Hotwire::Spark::Channel" }, {
     return CssReloader.reload(new RegExp(fileName))
   },
 
-  reloadStimulus(fileName) {
-    return StimulusReloader.reload(new RegExp(fileName))
+  reloadStimulus(path) {
+    return StimulusReloader.reload(path)
   }
 })
 
diff --git a/app/javascript/hotwire/spark/reloaders/html_reloader.js b/app/javascript/hotwire/spark/reloaders/html_reloader.js
@@ -9,8 +9,8 @@ export class HtmlReloader {
   }
 
   async reload() {
-    const reloadedDocument = await this.#reloadHtml()
-    await this.#reloadStimulus(reloadedDocument)
+    await this.#reloadHtml()
+    await this.#reloadStimulus()
   }
 
   async #reloadHtml() {
@@ -25,7 +25,7 @@ export class HtmlReloader {
     Idiomorph.morph(document.body, newBody)
   }
 
-  async #reloadStimulus(reloadedDocument) {
-    return new StimulusReloader(reloadedDocument).reload()
+  async #reloadStimulus() {
+    await StimulusReloader.reloadAll()
   }
 }
diff --git a/app/javascript/hotwire/spark/reloaders/stimulus_reloader.js b/app/javascript/hotwire/spark/reloaders/stimulus_reloader.js
@@ -1,15 +1,21 @@
 import { log } from "../logger.js"
-import { cacheBustedUrl, reloadHtmlDocument } from "../helpers.js"
 
 export class StimulusReloader {
-  static async reload(filePattern) {
-    const document = await reloadHtmlDocument()
-    return new StimulusReloader(document, filePattern).reload()
+  static async reload(path) {
+    return new StimulusReloader(path).reload()
   }
 
-  constructor(document, filePattern = /./) {
-    this.document = document
-    this.filePattern = filePattern
+  static async reloadAll() {
+    Stimulus.controllers.forEach(controller => {
+      Stimulus.unload(controller.identifier)
+      Stimulus.register(controller.identifier, controller.constructor)
+    })
+
+    return Promise.resolve()
+  }
+
+  constructor(changedPath) {
+    this.changedPath = changedPath
     this.application = window.Stimulus
   }
 
@@ -18,70 +24,41 @@ export class StimulusReloader {
 
     this.application.stop()
 
-    await this.#reloadChangedStimulusControllers()
-    this.#unloadDeletedStimulusControllers()
+    try {
+      await this.#reloadChangedController()
+    }
+    catch(SourceFileNotFound) {
+      this.#deregisterChangedController()
+    }
 
     this.application.start()
   }
 
-  async #reloadChangedStimulusControllers() {
-    await Promise.all(
-      this.#stimulusControllerPathsToReload.map(async moduleName => this.#reloadStimulusController(moduleName))
-    )
-  }
-
-  get #stimulusControllerPathsToReload() {
-    this.controllerPathsToReload = this.controllerPathsToReload || this.#stimulusControllerPaths.filter(path => this.#shouldReloadController(path))
-    return this.controllerPathsToReload
-  }
-
-  get #stimulusControllerPaths() {
-    return Object.keys(this.#stimulusPathsByModule).filter(path => path.endsWith("_controller"))
-  }
-
-  #shouldReloadController(path) {
-    return this.filePattern.test(path)
-  }
-
-  get #stimulusPathsByModule() {
-    this.pathsByModule = this.pathsByModule || this.#parseImportmapJson()
-    return this.pathsByModule
+  async #reloadChangedController() {
+    const module = await this.#importControllerFromSource(this.changedPath)
+    await this.#registerController(this.#changedControllerIdentifier, module)
   }
 
-  #parseImportmapJson() {
-    const importmapScript = this.document.querySelector("script[type=importmap]")
-    return JSON.parse(importmapScript.text).imports
-  }
-
-  async #reloadStimulusController(moduleName) {
-    log(`\t${moduleName}`)
+  async #importControllerFromSource(path) {
+    const response = await fetch(`/spark/source_files/?path=${path}`)
 
-    const controllerName = this.#extractControllerName(moduleName)
-    const path = cacheBustedUrl(this.#pathForModuleName(moduleName))
+    if (response.status === 404) {
+      throw new SourceFileNotFound(`Source file not found: ${path}`)
+    }
 
-    const module = await import(path)
+    const sourceCode = await response.text()
 
-    this.#registerController(controllerName, module)
-  }
+    const blob = new Blob([sourceCode], { type: "application/javascript" })
+    const moduleUrl = URL.createObjectURL(blob)
+    const module = await import(moduleUrl)
+    URL.revokeObjectURL(moduleUrl)
 
-  #unloadDeletedStimulusControllers() {
-    this.#controllersToUnload.forEach(controller => this.#deregisterController(controller.identifier))
-  }
-
-  get #controllersToUnload() {
-    if (this.#didChangeTriggerAReload) {
-      return []
-    } else {
-      return this.application.controllers.filter(controller => this.filePattern.test(`${controller.identifier}_controller`))
-    }
+    return module
   }
 
-  get #didChangeTriggerAReload() {
-    return this.#stimulusControllerPathsToReload.length > 0
-  }
-
-  #pathForModuleName(moduleName) {
-    return this.#stimulusPathsByModule[moduleName]
+  get #changedControllerIdentifier() {
+    this.changedControllerIdentifier = this.changedControllerIdentifier || this.#extractControllerName(this.changedPath)
+    return this.changedControllerIdentifier
   }
 
   #extractControllerName(path) {
@@ -90,9 +67,16 @@ export class StimulusReloader {
       .replace("_controller", "")
       .replace(/\//g, "--")
       .replace(/_/g, "-")
+      .replace(/\.js$/, "")
+  }
+
+  #deregisterChangedController() {
+    this.#deregisterController(this.#changedControllerIdentifier)
   }
 
   #registerController(name, module) {
+    log("\tReloading controller", name)
+
     this.application.unload(name)
     this.application.register(name, module.default)
   }
@@ -102,3 +86,5 @@ export class StimulusReloader {
     this.application.unload(name)
   }
 }
+
+class SourceFileNotFound extends Error { }
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,2 +1,3 @@
 Hotwire::Spark::Engine.routes.draw do
+  get "/source_files", to: "source_files#show"
 end
diff --git a/lib/hotwire-spark.rb b/lib/hotwire-spark.rb
@@ -21,7 +21,7 @@ def install_into(application)
     end
 
     def enabled?
-      enabled && defined?(Rails::Server)
+      enabled && Rails.env.test?
     end
 
     def cable_server

diff --git a/lib/hotwire/spark/file_watcher.rb b/lib/hotwire/spark/file_watcher.rb
@@ -36,9 +36,13 @@ def process_changed_files(changed_files)
       changed_files.each do |file|
         @callbacks_by_path.each do |path, callbacks|
           if file.to_s.start_with?(path.to_s)
-            callbacks.each { |callback| callback.call(file) }
+            callbacks.each { |callback| callback.call(as_relative_path(file)) }
           end
         end
       end
     end
+
+    def as_relative_path(path)
+      Pathname.new(path).relative_path_from(Rails.application.root)
+    end
 end