Bundle alchemy_admin JS into a single pre-built artifact

.gitattributes

@@ -0,0 +1 @@
+app/assets/builds/** linguist-generated=true

.github/workflows/build_test.yml

@@ -78,14 +78,40 @@ jobs:
           name: bun-lock
           path: bun.lock
 
+  check_build_artifacts:
+    permissions:
+      contents: read
+    runs-on: ubuntu-24.04
+    name: Check build artifacts are up to date
+    steps:
+      - uses: actions/checkout@v6
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+      - name: Restore node_modules cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('package.json', 'bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules
+      - name: Install dependencies
+        run: bun install
+      - name: Build all artifacts
+        run: bun run --bun build
+      - name: Check for uncommitted changes
+        run: |
+          git diff --exit-code app/assets/builds/alchemy/alchemy_admin.min.js || (echo "ERROR: alchemy_admin.min.js is out of date. Run 'bun run build:admin' and commit the result." && exit 1)
+          git diff --exit-code app/assets/builds/alchemy/admin.css || (echo "ERROR: admin.css is out of date. Run 'bun run build:css' and commit the result." && exit 1)
+
   RSpec:
     permissions:
       contents: read
-    needs: [check_package_json, build_javascript, check_bot_commit]
+    needs: [check_package_json, build_javascript, check_bot_commit, check_build_artifacts]
     if: >
       always() &&
       needs.check_bot_commit.outputs.is_bot != 'true' &&
-      (needs.build_javascript.result == 'success' || needs.build_javascript.result == 'skipped')
+      (needs.build_javascript.result == 'success' || needs.build_javascript.result == 'skipped') &&
+      needs.check_build_artifacts.result == 'success'
     runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
@@ -229,11 +255,12 @@ jobs:
     permissions:
       contents: read
     runs-on: ubuntu-24.04
-    needs: [check_package_json, build_javascript, check_bot_commit]
+    needs: [check_package_json, build_javascript, check_bot_commit, check_build_artifacts]
     if: >
       always() &&
       needs.check_bot_commit.outputs.is_bot != 'true' &&
-      (needs.build_javascript.result == 'success' || needs.build_javascript.result == 'skipped')
+      (needs.build_javascript.result == 'success' || needs.build_javascript.result == 'skipped') &&
+      needs.check_build_artifacts.result == 'success'
     env:
       NODE_ENV: test
     steps:
@@ -259,14 +286,14 @@ jobs:
   build-test-success:
     name: "Build & Test Success"
     if: always()
-    needs: [check_bot_commit, RSpec, Vitest]
+    needs: [check_bot_commit, RSpec, Vitest, check_build_artifacts]
     runs-on: ubuntu-latest
     permissions:
       contents: read
     steps:
       - name: Check results
         run: |
-          for result in "${{ needs.RSpec.result }}" "${{ needs.Vitest.result }}"; do
+          for result in "${{ needs.RSpec.result }}" "${{ needs.Vitest.result }}" "${{ needs.check_build_artifacts.result }}"; do
             if [[ "$result" != "success" && "$result" != "skipped" ]]; then
               echo "Failed: $result"
               exit 1

.gitignore

@@ -30,3 +30,4 @@ yarn-debug.log*
 .vscode/
 /spec/dummy/storage
 .claude/
+.worktrees/

CONTRIBUTING.md

@@ -56,6 +56,14 @@ taken straight from the Ruby on Rails guide:
 * Update the documentation, the surrounding one, examples elsewhere, guides,
   whatever is affected by your contribution
 
+### JavaScript changes
+
+If you modify JavaScript source files under `app/javascript/alchemy_admin/`, you must rebuild the bundle and commit the artifact:
+
+    $ bun run build:admin
+
+Commit the updated `app/assets/builds/alchemy/alchemy_admin.min.js` alongside your source changes. For local development, `bin/start` runs the watch process automatically.
+
 Please follow these syntax guides:
 
 * Two spaces, no tabs.

app/javascript/alchemy_admin.js

@@ -2,7 +2,7 @@
 import "handlebars"
 import "jquery"
 import "@ungap/custom-elements"
-import "@hotwired/turbo-rails"
+import { Turbo } from "@hotwired/turbo-rails"
 import "select2"
 
 import Rails from "@rails/ujs"
@@ -50,3 +50,13 @@ Object.assign(Alchemy, {
 Rails.start()
 Turbo.config.forms.confirm = openConfirmDialog
 document.addEventListener("turbo:load", Initializer)
+
+// Public API for extensions
+export { RemoteSelect } from "alchemy_admin/components/remote_select"
+export { on } from "alchemy_admin/utils/events"
+
+// Page-specific modules - bundled to avoid dual-loading
+export { default as ImageCropper } from "alchemy_admin/image_cropper"
+export { default as ImageOverlay } from "alchemy_admin/image_overlay"
+export { default as pictureSelector } from "alchemy_admin/picture_selector"
+export { default as NodeTree } from "alchemy_admin/node_tree"

app/views/alchemy/admin/crop.html.erb

@@ -18,7 +18,7 @@
 <% end %>
 <% if @settings %>
 <script type="module">
-  import ImageCropper from "alchemy_admin/image_cropper";
+  import { ImageCropper } from "alchemy_admin/image_cropper";
 
   const image = document.getElementById("imageToCrop")?.querySelector("img");
 

app/views/alchemy/admin/nodes/index.html.erb

@@ -46,7 +46,7 @@
 </div>
 
 <script type="module">
-  import NodeTree from "alchemy_admin/node_tree"
+  import { NodeTree } from "alchemy_admin/node_tree"
 
   NodeTree()
 </script>

app/views/alchemy/admin/pictures/index.html.erb

@@ -72,8 +72,8 @@
 
 <% content_for :javascripts do %>
   <script type="module">
-    import ImageOverlay from "alchemy_admin/image_overlay";
-    import pictureSelector from "alchemy_admin/picture_selector";
+    import { ImageOverlay } from "alchemy_admin/image_overlay";
+    import { pictureSelector } from "alchemy_admin/picture_selector";
     import { on } from "alchemy_admin/utils/events";
 
     pictureSelector();

config/importmap.rb

@@ -12,5 +12,10 @@
 pin "@rails/ujs", to: "rails-ujs.min.js", preload: true # @7.1.2
 pin "tinymce", to: "tinymce.min.js", preload: true
 
-pin "alchemy_admin", to: "alchemy_admin.js", preload: true
-pin_all_from File.expand_path("../app/javascript/alchemy_admin", __dir__), under: "alchemy_admin", preload: true
+pin "alchemy_admin", to: "alchemy/alchemy_admin.min.js", preload: true
+pin "alchemy_admin/components/remote_select", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/image_cropper", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/image_overlay", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/picture_selector", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/node_tree", to: "alchemy/alchemy_admin.min.js"
+pin "alchemy_admin/utils/events", to: "alchemy/alchemy_admin.min.js"

package.json

@@ -6,10 +6,12 @@
     "lint": "prettier --check 'app/javascript/**/*.js'",
     "eslint": "eslint app/javascript/**/*.js",
     "build:js": "rollup -c",
+    "build:admin": "rollup -c rollup.admin.config.mjs",
+    "build:admin:dev": "rollup -c rollup.admin.config.mjs --watch",
     "build:icons": "bun run bundles/remixicon.mjs",
     "build:css": "sass --style=compressed --no-source-map --load-path app/assets/stylesheets --load-path vendor/assets/stylesheets --load-path node_modules/cropperjs/dist app/stylesheets/alchemy/admin.scss:app/assets/builds/alchemy/admin.css app/stylesheets/alchemy/admin/print.scss:app/assets/builds/alchemy/admin/print.css app/stylesheets/alchemy/welcome.scss:app/assets/builds/alchemy/welcome.css app/stylesheets/tinymce/skins/content/alchemy/content.scss:app/assets/builds/tinymce/skins/content/alchemy/content.min.css app/stylesheets/tinymce/skins/content/alchemy-dark/content.scss:app/assets/builds/tinymce/skins/content/alchemy-dark/content.min.css app/stylesheets/tinymce/skins/ui/alchemy-dark/content.scss:app/assets/builds/tinymce/skins/ui/alchemy-dark/content.min.css app/stylesheets/tinymce/skins/ui/alchemy/content.scss:app/assets/builds/tinymce/skins/ui/alchemy/content.min.css app/stylesheets/tinymce/skins/ui/alchemy/skin.scss:app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css app/stylesheets/tinymce/skins/ui/alchemy-dark/skin.scss:app/assets/builds/tinymce/skins/ui/alchemy-dark/skin.min.css app/stylesheets/alchemy/admin/page-select.scss:app/assets/builds/alchemy/admin/page-select.css app/stylesheets/alchemy/dark-theme.scss:app/assets/builds/alchemy/dark-theme.css app/stylesheets/alchemy/light-theme.scss:app/assets/builds/alchemy/light-theme.css app/stylesheets/alchemy/theme.scss:app/assets/builds/alchemy/theme.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 && bun run build:icons"
+    "build": "bun run --bun build:js && bun run --bun build:admin && bun run --bun build:css && bun run --bun handlebars:compile && bun run build:icons"
   },
   "keywords": [],
   "author": "Thomas von Deyen",

rollup.admin.config.mjs

@@ -0,0 +1,32 @@
+import resolve from "@rollup/plugin-node-resolve"
+import terser from "@rollup/plugin-terser"
+
+export default {
+  input: "app/javascript/alchemy_admin.js",
+  output: {
+    file: "app/assets/builds/alchemy/alchemy_admin.min.js",
+    format: "es",
+    sourcemap: true
+  },
+  external: [
+    "handlebars",
+    "jquery",
+    "@ungap/custom-elements",
+    "@hotwired/turbo-rails",
+    "select2",
+    "@rails/ujs",
+    "clipboard",
+    "cropperjs",
+    "flatpickr",
+    "keymaster",
+    "sortablejs",
+    "shoelace",
+    "tinymce"
+  ],
+  plugins: [
+    resolve({
+      modulePaths: ["app/javascript"]
+    }),
+    terser()
+  ].filter(Boolean)
+}

spec/dummy/Procfile.dev

@@ -1,3 +1,4 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
 css: bin/rails dartsass:watch
 sass: cd ../../ && bun run --bun build:css --watch
+js: cd ../../ && bun run --bun build:admin:dev