Selectively import ace editor.

app/javascript/preview_application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+// This is just for preview to separate out its JS imports.
+import "preview_controllers"

app/javascript/preview_controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/preview_controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "preview_controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("preview_controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/views/preview/index.html.erb

@@ -1,4 +1,5 @@
 <% content_for(:head) do %>
+  <%= javascript_import_module_tag "preview_application" %>
   <style>
   #examples, .mods {
     width: 80%;

config/importmap.rb

@@ -7,5 +7,8 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin_all_from "app/javascript/preview_controllers", under: "preview_controllers"
+# Preview is a separate application to avoid loading ace-builds for every page
+pin 'preview_application'
 pin 'feedback_form'
 pin "ace-builds", to: "https://ga.jspm.io/npm:[email protected]/src-noconflict/ace.js"