Merge pull request #3044 from AlchemyCMS/handlebars-npm

Use Handlebars templates from npm

.prettierignore

@@ -0,0 +1 @@
+app/javascript/alchemy_admin/templates/compiled.js

alchemy_cms.gemspec

@@ -45,7 +45,6 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency "dragonfly", ["~> 1.4"]
   gem.add_runtime_dependency "dragonfly_svg", ["~> 0.0.4"]
   gem.add_runtime_dependency "gutentag", ["~> 2.2", ">= 2.2.1"]
-  gem.add_runtime_dependency "handlebars_assets", ["~> 0.23"]
   gem.add_runtime_dependency "importmap-rails", ["~> 1.2", ">= 1.2.1"]
   gem.add_runtime_dependency "jquery-rails", ["~> 4.0", ">= 4.0.4"]
   gem.add_runtime_dependency "kaminari", ["~> 1.1"]

app/assets/javascripts/alchemy/admin.js

@@ -2,7 +2,5 @@
 // ------------------------------
 //= require jquery3
 //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
-//= require handlebars
-//= require alchemy/templates
 //= require alchemy/alchemy.dialog
 //= require alchemy/alchemy.image_overlay

app/javascript/alchemy_admin.js

@@ -1,3 +1,4 @@
+import "handlebars"
 import "@ungap/custom-elements"
 import "@hotwired/turbo-rails"
 
@@ -26,6 +27,9 @@ import {
 // Web Components
 import "alchemy_admin/components"
 
+// Handlebars Templates
+import "alchemy_admin/templates/compiled"
+
 // Shoelace Setup
 import "alchemy_admin/shoelace_theme"
 

app/javascript/alchemy_admin/node_tree.js

@@ -14,7 +14,9 @@ function displayNodeFolders() {
     }
 
     if (list.children.length > 0 || node.folded) {
-      leftIconArea.innerHTML = HandlebarsTemplates.node_folder({ node: node })
+      leftIconArea.innerHTML = Handlebars.templates["node_folder.hbs"]({
+        node: node
+      })
     } else {
       leftIconArea.innerHTML = " "
     }

app/javascript/alchemy_admin/page_sorter.js

@@ -44,7 +44,7 @@ export function displayPageFolders() {
     }
 
     if (list.children.length > 0 || page.folded) {
-      pageFolderEl.outerHTML = HandlebarsTemplates.page_folder({ page })
+      pageFolderEl.outerHTML = Handlebars.templates["page_folder.hbs"]({ page })
     } else {
       pageFolderEl.innerHTML = ""
     }

config/importmap.rb

@@ -1,6 +1,7 @@
 pin "@ungap/custom-elements", to: "ungap-custom-elements.min.js", preload: true # @1.3.0
 pin "clipboard", to: "clipboard.min.js", preload: true
 pin "flatpickr", to: "flatpickr.min.js", preload: true # @4.6.13
+pin "handlebars", to: "handlebars.min.js", preload: true # @4.7.8
 pin "keymaster", to: "keymaster.min.js", preload: true
 pin "sortablejs", to: "sortable.min.js", preload: true # @1.15.1
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true

lib/alchemy_cms.rb

@@ -11,7 +11,6 @@
 require "cancan"
 require "dragonfly"
 require "gutentag"
-require "handlebars_assets"
 require "importmap-rails"
 require "jquery-rails"
 require "kaminari"

package.json

@@ -6,7 +6,8 @@
     "eslint": "eslint app/javascript/**/*.js",
     "build:js": "rollup -c",
     "build:css": "sass --style=compressed --source-map --load-path app/assets/stylesheets --load-path vendor/assets/stylesheets app/assets/stylesheets/alchemy/admin.scss:app/assets/builds/alchemy/admin.css app/assets/stylesheets/alchemy/admin/print.scss:app/assets/builds/alchemy/admin/print.css app/assets/stylesheets/alchemy/welcome.scss:app/assets/builds/alchemy/welcome.css app/assets/stylesheets/tinymce/skins/content/alchemy/content.scss:app/assets/builds/tinymce/skins/content/alchemy/content.min.css app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.scss:app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css app/assets/stylesheets/alchemy/admin/page-select.scss:app/assets/builds/alchemy/admin/page-select.css",
-    "build": "bun run --bun build:js && bun run --bun build:css"
+    "handlebars:compile": "handlebars app/javascript/alchemy_admin/templates/*.hbs -f app/javascript/alchemy_admin/templates/compiled.js -o -m",
+    "build": "bun run --bun build:js && bun run --bun build:css && bun run --bun handlebars:compile"
   },
   "keywords": [],
   "author": "Thomas von Deyen",
@@ -17,6 +18,7 @@
     "@ungap/custom-elements": "^1.3.0",
     "clipboard": "^2.0.11",
     "flatpickr": "^4.6.13",
+    "handlebars": "^4.7.8",
     "keymaster": "^1.6.2",
     "sortablejs": "^1.15.2",
     "tinymce": "^7.3.0"

rollup.config.mjs

@@ -18,6 +18,13 @@ export default [
     plugins: [resolve(), terser()],
     context: "window"
   },
+  {
+    input: "node_modules/handlebars/dist/handlebars.min.js",
+    output: {
+      file: "vendor/javascript/handlebars.min.js"
+    },
+    context: "window"
+  },
   {
     input: "node_modules/keymaster/keymaster.js",
     output: {