Use NodeTree as ES module

We only use it on the nodes page and do not need to make globally available thanks to script type module \o/
AlchemyCMS · Jun 28, 2023 · 38e5308 · 38e5308
1 parent 1b8086d
commit 38e5308
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/app/assets/config/alchemy_manifest.js b/app/assets/config/alchemy_manifest.js
@@ -14,3 +14,4 @@
 //= link_tree ../../../vendor/assets/fonts/
 //= link_tree ../../../vendor/assets/images/
 //= link alchemy_admin.js
+//= link alchemy_admin/node_tree.js
diff --git a/app/javascript/alchemy_admin.js b/app/javascript/alchemy_admin.js
@@ -1,6 +1,5 @@
 import translate from "./alchemy_admin/i18n"
 import translationData from "./alchemy_admin/translations"
-import NodeTree from "./alchemy_admin/node_tree"
 import fileEditors from "./alchemy_admin/file_editors"
 import IngredientAnchorLink from "./alchemy_admin/ingredient_anchor_link"
 import pictureEditors from "./alchemy_admin/picture_editors"
@@ -21,7 +20,6 @@ Object.assign(Alchemy, {
   // Global utility method for translating a given string
   t: translate,
   translations: Object.assign(Alchemy.translations || {}, translationData),
-  NodeTree,
   fileEditors,
   pictureEditors,
   ImageLoader: ImageLoader.init,

diff --git a/app/views/alchemy/admin/nodes/index.html.erb b/app/views/alchemy/admin/nodes/index.html.erb
@@ -42,6 +42,8 @@
   <% end %>
 </div>
 
-<script>
-  Alchemy.NodeTree()
+<script type="module">
+  import NodeTree from "alchemy_admin/node_tree"
+
+  NodeTree()
 </script>
diff --git a/config/importmap.rb b/config/importmap.rb
@@ -4,3 +4,4 @@
 pin "sortablejs", to: "https://ga.jspm.io/npm:sortablejs@1.15.0/modular/sortable.esm.js", preload: true
 
 pin "alchemy_admin", to: "alchemy_admin.js", preload: true
+pin "alchemy_admin/node_tree", to: "alchemy_admin/node_tree.js", preload: true