apostrophe 4.22.0 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 4.23.0 (2025-10-30)
+
+### Adds
+
+* Add locale picker in the page and piece manager modals.
+* Support for the `render-areas` query parameter in the REST API when using Astro as an external frontend, provided the Astro project has the corresponding route. This allows section template library previews to work in Astro projects. For ease of migration, if Astro cannot satisfy the request, ApostropheCMS will also attempt to render the widget natively.
+* Made `self.apos.externalFrontKey` available, simplifying API calls back to Astro.
+* Layout widget for dynamic grid layouts.
+* `widgetOperations` support for `placement: 'breadcrumb'` to add operations to the breadcrumb menu of widgets. Extend the widget operations configuration to support various features when in the breadcrumb menu.
+* Area template (Nunjucks) support for `aposStyle`, `aposClassName`, `aposParentOptions` and `aposAttrs` contextual named variables (`with {}` syntax).
+* New login option `caseInsensitive` to force login usernames and emails to be case insensitive. New task `login-case-insensitive` updating all login names / email to lowercase, used by a new migration when switching to `caseInsensitive`.
+* Adds `disableIfProps` and `disableTooltip` to widget operations and breadcrumb operations.
+
+### Changes
+
+* Enable `/api/v1/@apostrophecms/login/logout` and `/api/v1/@apostrophecms/login/whoami` routes when `localLogin` is `false`.
+* Refactored complex logic regarding data updates in `AposSchema`.
+* Cleaned up `annotateAreaForExternalFront` logic and added context so developers understand the reason if it fails due to a widget type with no matching module in the project.
+* Color fields now display their preset color swatches in the field UI rather than just the color picker popup
+* Moves widget operations to backend with new `action` and `nativeAction` properties.
+* Moves `mode` from breakpoint preview to it's own store (to be used by layout).
+
+### Fixes
+
+* The `render-areas` query parameter now works correctly with areas nested in array items.
+* Fix min size calculation for image widgets configured with an aspect ratio.
+* Added missing `await` in helper library function for the asset module, ensuring JS assets build reliably.
+* Autodetection of bundles, and automatic activation of "improvements" shipped in those bundles, now works correctly when the bundle is delivered in ES module format rather than commonjs format.
+
 ## 4.22.0 (2025-10-01)
 
 ### Adds

package/defaults.js

@@ -41,6 +41,8 @@ module.exports = {
     '@apostrophecms/search': {},
     '@apostrophecms/any-page-type': {},
     '@apostrophecms/area': {},
+    '@apostrophecms/layout-widget': {},
+    '@apostrophecms/layout-column-widget': {},
     '@apostrophecms/rich-text-widget': {},
     '@apostrophecms/html-widget': {},
     '@apostrophecms/color-field': {},

package/index.js

@@ -14,6 +14,8 @@ const glob = require('./lib/glob.js');
 const moogRequire = require('./lib/moog-require');
 let defaults = require('./defaults.js');
 
+const importFresh = moduleName => import(`${moduleName}?${Date.now()}`);
+
 // ## Top-level options
 //
 // `cluster`
@@ -435,16 +437,24 @@ async function apostrophe(options, telemetry, rootSpan) {
         continue;
       }
 
-      const apostropheModule = await self.root.import(npmPath);
-      if (apostropheModule.bundle) {
-        self.options.bundles = (self.options.bundles || []).concat(apostropheModuleName);
-        const bundleModules = apostropheModule.bundle.modules;
+      const { default: apostropheModule } = await importFresh(npmPath);
+      const bundle = apostropheModule.bundle;
+      if (bundle) {
+        self.options.bundles = [
+          ...new Set(
+            [
+              ...(self.options.bundles || []),
+              apostropheModuleName
+            ]
+          )
+        ];
+        const bundleModules = bundle.modules;
         for (const bundleModuleName of bundleModules) {
           if (!apostropheModules.includes(bundleModuleName)) {
-            const bundledModule = await self.root.import(
+            const { default: bundledModule } = await importFresh(
               path.resolve(
                 path.dirname(npmPath),
-                apostropheModule.bundle.directory,
+                bundle.directory,
                 bundleModuleName,
                 'index.js'
               )

package/lib/image.js

@@ -0,0 +1,48 @@
+function computeMinSizes([ minWidth, minHeight ], aspectRatio) {
+  const aspectRatioFloat = Array.isArray(aspectRatio)
+    ? aspectRatio[0] / aspectRatio[1]
+    : aspectRatio;
+
+  if (!aspectRatioFloat) {
+    return {
+      minWidth,
+      minHeight
+    };
+  }
+
+  // If ratio wants a square,
+  // we simply take the higher min size
+  if (aspectRatioFloat === 1) {
+    const higherValue = Math.max(minWidth, minHeight);
+
+    return {
+      minWidth: higherValue,
+      minHeight: higherValue
+    };
+  }
+
+  const diff = minWidth / minHeight - aspectRatioFloat;
+
+  if (diff > 0) {
+    return {
+      minWidth,
+      minHeight: minWidth / aspectRatioFloat
+    };
+  }
+
+  if (diff < 0) {
+    return {
+      minWidth: minHeight * aspectRatioFloat,
+      minHeight
+    };
+  }
+
+  return {
+    minWidth,
+    minHeight
+  };
+};
+
+module.exports = {
+  computeMinSizes
+};

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBreakpointPreviewMode.vue

@@ -56,6 +56,9 @@
   </div>
 </template>
 <script>
+import { mapState, mapActions } from 'pinia';
+import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
+
 export default {
   name: 'TheAposContextBreakpointPreviewMode',
   props: {
@@ -83,7 +86,6 @@ export default {
   emits: [ 'switch-breakpoint-preview-mode', 'reset-breakpoint-preview-mode' ],
   data() {
     return {
-      mode: null,
       originalBodyBackground: null,
       shortcuts: this.getShortcuts(),
       breakpoints: this.getBreakpointItems(),
@@ -94,6 +96,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useBreakpointPreviewStore, [ 'mode' ]),
     activeScreen() {
       return this.mode && this.screens[this.mode];
     },
@@ -154,6 +157,7 @@ export default {
     );
   },
   methods: {
+    ...mapActions(useBreakpointPreviewStore, [ 'setMode' ]),
     observerCallback(mutationList, observer) {
       for (const mutation of mutationList) {
         if (
@@ -205,7 +209,7 @@ export default {
       refreshableEl.style.width = width;
       refreshableEl.style.height = height;
 
-      this.mode = mode;
+      this.setMode(mode);
       this.$emit('switch-breakpoint-preview-mode', {
         mode,
         label,
@@ -249,7 +253,7 @@ export default {
       refreshableEl.style.removeProperty('width');
       refreshableEl.style.removeProperty('height');
 
-      this.mode = null;
+      this.setMode(null);
       this.$emit('reset-breakpoint-preview-mode');
       this.saveState({ mode: this.mode });
     },

package/modules/@apostrophecms/area/index.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const { stripIndent } = require('common-tags');
+const cheerio = require('cheerio');
 
 // An area is a series of zero or more widgets, in which users can add
 // and remove widgets and drag them to reorder them. This module implements
@@ -270,7 +271,9 @@ module.exports = {
           self.missingWidgetTypes = {};
         }
         if (!self.missingWidgetTypes[name]) {
-          self.apos.util.error('WARNING: widget type ' + name + ' exists in content but is not configured');
+          self.apos.util.error(`WARNING: widget type ${name} exists in your database but is not configured.\n` +
+            `You probably do not have a ${name}-widget module in your project.`
+          );
           self.missingWidgetTypes[name] = true;
         }
       },
@@ -292,6 +295,10 @@ module.exports = {
       // If `inline` is true then the rendering of each widget is attached
       // to the widget as a `_rendered` property, bypassing normal full-area
       // HTML responses, and the return value of this method is `null`.
+      //
+      // If an external front key is configured, ApostropheCMS will attempt
+      // to render the widget via Astro before attempting to render it
+      // natively.
       async renderArea(req, area, _with, { inline = false } = {}) {
         if (!area._id) {
           throw new Error('All areas must have an _id property in A3.x. Area details:\n\n' + JSON.stringify(area));
@@ -337,27 +344,86 @@ module.exports = {
           // just use the helpers
           self.apos.attachment.all(area, { annotate: true });
         }
-        if (inline) {
-          for (const item of area.items) {
-            item._rendered = await self.renderWidget(
-              req,
-              item.type,
-              item,
-              widgets[item.type]
-            );
+
+        let externalError = null;
+        if (!self.apos.externalFrontKey) {
+          return renderNatively();
+        }
+
+        try {
+          return await renderViaExternalFront();
+        } catch (e) {
+          externalError = e;
+        }
+        try {
+          return await renderNatively();
+        } catch (e) {
+          throw new Error('Could not render area for API, neither via the external frontend nor natively.\n\n' +
+            'Check your Astro server logs as well.\n\n' +
+            niceError(externalError) + '\n\n' +
+            niceError(e)
+          );
+        }
+
+        async function renderViaExternalFront() {
+          if (!self.apos.baseUrl && self.apos.externalFrontKey) {
+            throw new Error('APOS_BASE_URL and APOS_EXTERNAL_FRONT_KEY must both be set in order to render\nvia the external frontend');
+          }
+          // Astro can render components or return JSON but not both, at least not without
+          // using its experimental container API which would potentially not have
+          // the same configuration as the main Astro project. So we let Astro be Astro,
+          // then we pull out the individual renderings with Cheerio. -Tom
+          const response = await fetch(`${self.apos.baseUrl}/api/apos-external-front/render-area`, {
+            method: 'POST',
+            headers: {
+              'apos-external-front-key': self.apos.externalFrontKey
+            },
+            body: JSON.stringify({
+              area
+            })
+          });
+          if (response.status >= 400) {
+            throw response;
+          }
+          const html = await response.text();
+          const $ = cheerio.load(`<div id="root">${html}</div>`);
+          if (inline) {
+            for (let i = 0; (i < area.items.length); i++) {
+              area.items[i]._rendered = $(`#root [data-widget-id="${area.items[i]._id}"]`).html() || '';
+            }
+            return null;
+          } else {
+            const $children = $('#root [data-widget-id]');
+            return $children.map(function() {
+              return $(this).html();
+            }).join('\n');
+          }
+        }
+
+        async function renderNatively() {
+          if (inline) {
+            for (const item of area.items) {
+              item._rendered = await self.renderWidget(
+                req,
+                item.type,
+                item,
+                widgets[item.type]
+              );
+            }
+            return null;
+          } else {
+            return self.render(req, 'area', {
+              // TODO filter area to exclude big relationship objects, but
+              // not so sloppy this time please
+              area,
+              field,
+              options,
+              choices,
+              _with,
+              canEdit
+            });
           }
-          return null;
         }
-        return self.render(req, 'area', {
-          // TODO filter area to exclude big relationship objects, but
-          // not so sloppy this time please
-          area,
-          field,
-          options,
-          choices,
-          _with,
-          canEdit
-        });
       },
       // Replace documents' area objects with rendered HTML for each area.
       // This is used by GET requests including the `render-areas` query
@@ -373,6 +439,10 @@ module.exports = {
         let index = 0;
         // Loop over the docs in the array passed in.
         for (const doc of within) {
+          if (self.apos.externalFrontKey) {
+            self.apos.template.annotateDocForExternalFront(doc);
+          }
+
           const rendered = [];
 
           const areasToRender = {};
@@ -409,8 +479,8 @@ module.exports = {
           index++;
         }
 
-        async function render(area, path, context, opts) {
-          const preppedArea = self.prepForRender(area, context, path);
+        async function render(area, path, context) {
+          const preppedArea = self.prepForRender(area, context, path.split('.').at(-1));
 
           const areaRendered = await self.apos.area.renderArea(
             req,
@@ -903,3 +973,9 @@ module.exports = {
     };
   }
 };
+
+function niceError(e) {
+  // Node.js includes the error message in the stack property, it's
+  // actually a complete rendering plus the stack 🤷
+  return e.stack;
+}

package/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -3,8 +3,6 @@ import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
 
-  const component = apos.vueComponents.AposAreaEditor;
-
   let widgetsRendering = 0;
 
   apos.area.widgetOptions = [];
@@ -66,13 +64,25 @@ export default function() {
   }
 
   function createAreaApp(el) {
-    const options = JSON.parse(el.getAttribute('data-options'));
-    const data = JSON.parse(el.getAttribute('data'));
+    const options = JSON.parse(el.getAttribute('data-options')) || {};
+    const data = JSON.parse(el.getAttribute('data')) || {};
     const fieldId = el.getAttribute('data-field-id');
+    const moduleName = el.getAttribute('data-module');
     const choices = JSON.parse(el.getAttribute('data-choices'));
     const renderings = {};
     const _docId = data._docId;
 
+    const parentOptionsStr = el.getAttribute('data-parent-options');
+    const parentOptions = parentOptionsStr ? JSON.parse(parentOptionsStr) : null;
+
+    let componentName = options.editorComponent || 'AposAreaEditor';
+    if (!apos.vueComponents[componentName]) {
+      // eslint-disable-next-line no-console
+      console.error(`Area Editor component "${componentName}" not found. Switching to default.`);
+      componentName = 'AposAreaEditor';
+    }
+    const component = apos.vueComponents[componentName];
+
     for (const widgetEl of el.querySelectorAll('[data-apos-widget]')) {
       const _id = widgetEl.getAttribute('data-apos-widget');
       const item = data.items.find(item => _id === item._id);
@@ -109,6 +119,8 @@ export default function() {
         choices,
         docId: _docId,
         fieldId,
+        moduleName,
+        parentOptions,
         renderings
       });