Skip to content

Bundle alchemy_admin JS into a single pre-built artifact#3769

Merged
tvdeyen merged 4 commits intomainfrom
feature/admin-js-bundle
Mar 23, 2026
Merged

Bundle alchemy_admin JS into a single pre-built artifact#3769
tvdeyen merged 4 commits intomainfrom
feature/admin-js-bundle

Conversation

@tvdeyen
Copy link
Member

@tvdeyen tvdeyen commented Mar 20, 2026

What is this pull request for?

Replaces the per-file importmap loading of alchemy_admin JavaScript (~73 individual files) with a single pre-built alchemy_admin.min.js bundle using Rollup. This reduces HTTP requests on every admin page load while keeping the importmap available for extensions and host apps.

Notable changes

  • New file: rollup.admin.config.mjs — dedicated Rollup config for the admin bundle, separate from the vendor lib config
  • Importmap simplifiedpin_all_from replaced with explicit pins for the bundle and alias pins for submodules used by extensions (RemoteSelect, on, ImageCropper, ImageOverlay, pictureSelector, NodeTree)
  • ERB templates updated — inline <script type="module"> imports changed from default to named imports to work with the bundle's exports
  • Explicit Turbo import — replaces the implicit window.Turbo global reference in the entrypoint
  • Dev watch modebuild:admin:dev script added to Procfile.dev for automatic rebuilds during development
  • CI drift check — new check_build_artifacts job verifies committed build artifacts match source; RSpec and Vitest are gated on this check
  • .gitattributes — marks build artifacts as linguist-generated to keep PR diffs clean

Extensions that import RemoteSelect from alchemy_admin/components/remote_select continue to work without changes via alias pins. Gem consumers are unaffected — the pre-built artifact ships with the gem.

Checklist

  • I have followed Pull Request guidelines
  • I have added a detailed description into each commit message
  • I have added tests to cover this change

@tvdeyen tvdeyen requested a review from a team as a code owner March 20, 2026 23:25
@codecov
Copy link

codecov bot commented Mar 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.47%. Comparing base (2e513f2) to head (b3b7948).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3769   +/-   ##
=======================================
  Coverage   97.47%   97.47%           
=======================================
  Files         319      319           
  Lines        8476     8476           
=======================================
  Hits         8262     8262           
  Misses        214      214           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@tvdeyen tvdeyen added this to the 8.2 milestone Mar 21, 2026
@tvdeyen tvdeyen force-pushed the feature/admin-js-bundle branch from 5285daf to a9a2eb1 Compare March 21, 2026 01:15
@tvdeyen tvdeyen added the performance Performance improvement label Mar 21, 2026
tvdeyen added 4 commits March 23, 2026 09:40
The admin interface loaded ~73 individual JavaScript files via
importmap on every page load. Bundling them into a single file
reduces HTTP requests and improves page load performance while
keeping the importmap available for extensions.

Vendor libs remain external and are resolved by the importmap at
runtime so host apps and extensions can still pin their own modules.

Adds a public API for extensions: RemoteSelect, on, ImageCropper,
ImageOverlay, pictureSelector, and NodeTree are re-exported from the
bundle with alias pins so existing import paths keep working.

ERB templates updated to use named imports for bundled modules.
Explicit Turbo import replaces the implicit window.Turbo global.
Dev watch mode via Procfile.dev rebuilds on source changes.
Prevents committed build artifacts from bloating PR diffs and
skewing GitHub language statistics.
Adds a check_build_artifacts job that rebuilds JS and CSS artifacts
and verifies they match what is committed. RSpec and Vitest are gated
on this check so tests skip when artifacts are stale, avoiding wasted
CI time.
@tvdeyen tvdeyen force-pushed the feature/admin-js-bundle branch from a9a2eb1 to b3b7948 Compare March 23, 2026 08:40
Copy link
Contributor

@sascha-karnatz sascha-karnatz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks nice

@tvdeyen tvdeyen merged commit 14e5815 into main Mar 23, 2026
28 checks passed
@tvdeyen tvdeyen deleted the feature/admin-js-bundle branch March 23, 2026 08:58
@alchemycms-bot alchemycms-bot bot mentioned this pull request Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

performance Performance improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants