Apostrophe 4.9.0: lightning-fast Vite builds, ESM support and more great enhancements
Bob Means Developer Relations Engineer

Vite Build System: Development at the Speed of Light!

Get ready for a revolutionary upgrade to your development workflow! Our new Vite integration brings blazing-fast Hot Module Replacement to ApostropheCMS. Watch your UI changes appear instantly, say goodbye to full page reloads, and enjoy build times that will make you wonder how you ever lived without it. Available now in beta, Vite is set to become our default bundler - join us in building the future of ApostropheCMS development!

ESM Support: Welcome to Modern JavaScript!

The future of JavaScript has arrived in ApostropheCMS with full ESM support! Harness the power of native JavaScript modules for cleaner code, smarter bundling, and seamless integration with modern tools and frameworks. Combined with Vite's HMR capabilities, you'll experience development nirvana: crystal-clear module dependencies, instant updates, and the pure joy of working with cutting-edge JavaScript. The modern ApostropheCMS developer experience you've been dreaming of is here!

Code snippet showing ESM JS

Dynamic Field Dependencies: Enhanced Schema Options

Create smarter interfaces where field options adapt naturally to your content structure as it changes. Building on our existing following feature for string fields, we've expanded dynamic value support to checkboxes, radio buttons, and select fields. Now your schema field choices can be dynamically updated based on other field values, enabling more sophisticated and responsive content models.

Breakpoint Preview Menu: Expanded Device Testing

The breakpoint preview feature introduced last release gets even better with a new dropdown menu interface. Now you can configure and switch between a wider range of device sizes, making it easier than ever to test your responsive designs across multiple screen formats. This enhancement gives you more flexibility in previewing how your content appears across various devices without cluttering your interface.

CHANGELOG for Apostrophe 4.9.0

Adds

  • Relationship inputs have aria accessibility tags and autocomplete suggestions can be controlled by keyboard.
  • Elements inside modals can have a data-apos-focus-priority attribute that prioritizes them inside the focusable elements list.
  • Modals will continute trying to find focusable elements until an element marked data-apos-focus-priority appears or the max retry threshold is reached.
  • Takes care of an edge case where Media Manager would duplicate search results.
  • Add support for ESM projects.
  • Modules can now have a before: "module-name" property in their configuration to initialize them before another module, bypassing the normal order implied by defaults.js and app.js.
  • select and checkboxes fields that implement dynamic choices can now take into account the value of other fields on the fly, by specifying a following property with an array of other field names. Array and object subfields can access properties of the parent document by adding a < prefix (or more than one) to field names in following to look upwards a level. Your custom method on the server side will now receive a following object as an additional argument. One limitation: for now, a field with dynamic choices cannot depend on another field with dynamic choices in this way.
  • Adds AI-generated missing translations
  • Adds the mobile preview dropdown for non visibles breakpoints. Uses the new shortcut property to display breakpoints out of the dropdown.
  • Adds possibility to have two icons in a button.
  • Breakpoint preview only targets [data-apos-refreshable].
  • Adds a isActive state to context menu items. Also adds possibility to add icons to context menu items.
  • Add a postcss plugin to handle vh and vw values on breakpoint preview mode.

Changes

  • Silence deprecation warnings from Sass 1.80+ regarding the use of @import. The Sass team has stated there will be a two-year transition period before the feature is actually removed. The use of @import is common practice in the Apostrophe codebase and in many project codebases. We will arrange for an orderly migration to the new @use directive before Sass 3.x appears.
  • Move saving indicator after breakpoint preview.
  • Internal methods mergeConfiguration, autodetectBundles, lintModules, nestedModuleSubdirs and testDir are now async.
  • express.getSessionOptions is now async.

Fixes

  • Modifies the AposAreaMenu.vue component to set the disabled attribute to true if the max number of widgets have been added in an area with expanded: true.
  • pnpm: true option in app.js is no longer breaking the application.
  • Remove unused vue-template-compiler dependency.
  • Prevent un-publishing the @apostrophecms/global doc and more generally all singletons.
  • When opening a context menu while another is already opened, prevent from focusing the button of the first one instead of the newly opened menu.
  • Updates isEqual method of area field type to avoid comparing an area having temporary properties with one having none.
  • In a relationship field, when asking for sub relationships using withRelationships an dot notion.

Links

Written by Bob Means Developer Relations Engineer

A software developer/data scientist leveraging years of technical writing experience to help other programmers through tutorials and production of technical documentation.

Demo ApostropheCMS
Pricing