Merge branch 'main' into pro-6673-warning-conflict-page-schema

* main:
  changelog (#4802)
  fixes modals deep selectors (#4795)
  fix vue warnings (#4797)
  Pro 6694 breakpoint preview vite ready (#4789)
  Resolve yaml dependency conflicts (#4801)
  PRO-6775: External frontend support, docs cleanup (#4799)
  sort glob result (#4796)
  HMR condition argument and widget player fix (#4794)
  fix permission grid tooltip display (#4792)
  Fix extra bundle detection (#4791)
  release 4.9.0 (#4788)
  Pro 6535 revision (#4787)

Author: haroun

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## UNRELEASED
 
+### Fixes
+
+* Extra bundle detection when using external build module works properly now.
+* Widget players are now properly invoked when they arrive later in the page load process.
+* Fix permission grid tooltip display.
+* Fixes a bug that crashes external frontend applications.
+* Fixes a false positive warning for module not in use for project level submodules (e.g. `widges/module.js`) and dot-folders (e.g. `.DS_Store`).
+* Bumped `express-bearer-token` dependency to address a low-severity `npm audit` warning regarding noncompliant cookie names and values. Apostrophe
+did not actually use any noncompliant cookie names or values, so there was no vulnerability in Apostrophe.
+
+### Adds
+
+* It's possible now to target the HMR build when registering via `template.append` and `template.prepend`. Use `when: 'hmr:public'` or `when: 'hmr:apos'` that will be evaluated against the current asset `options.hmr` configuration.
+* Adds asset module option `options.modulePreloadPolyfill` (default `true`) to allow disabling the polyfill preload for e.g. external front-ends. 
+* Adds `bundleMarkup` to the data sent to the external front-end, containing all markup for injecting Apostrophe UI in the front-end.
+
+### Changes
+
+* Removes postcss plugin and webpack loader used for breakpoint preview mode. Uses instead the new `postcss-viewport-to-container-toggle` plugin in the webpack config.
+
+## 4.9.0 (2024-10-31)
+
 ### Adds
 
 * Relationship inputs have aria accessibility tags and autocomplete suggestions can be controlled by keyboard.

index.js

@@ -699,11 +699,18 @@ async function apostrophe(options, telemetry, rootSpan) {
       }
     }
     async function testDir(name) {
+      if (name.startsWith('.')) {
+        return;
+      }
       // Projects that have different theme modules activated at different times
       // are a frequent source of false positives for this warning, so ignore
       // seemingly unused modules with "theme" in the name
       if (!validSteps.includes(name)) {
         try {
+          // It's a project level modules definition, skip it.
+          if (fs.existsSync(path.resolve(self.localModules, name, 'modules.js'))) {
+            return;
+          }
           const submodule = await self.root.import(path.resolve(self.localModules, name, 'index.js'));
           if (submodule && submodule.options && submodule.options.ignoreUnusedFolderWarning) {
             return;

modules/@apostrophecms/asset/index.js

@@ -98,6 +98,10 @@ module.exports = {
     // Force the HMR WS port when it operates on the same process as Apostrophe.
     // Most of the time you won't need to change this.
     hmrPort: null,
+    // Let the external build module inject a pollyfill for the module preload,
+    // adding the `modulepreload` support for the browsers that don't support it.
+    // Can be disabled in e.g. external front-ends.
+    modulePreloadPolyfill: true,
     // Completely disable the asset runtime auto-build system.
     // When an external build module is registered, only manifest data
     // will be loaded and no build will be executed.
@@ -477,9 +481,11 @@ module.exports = {
       // - `devServer`: if `false`, the dev server is disabled. Otherwise, it's a string
       //   (enum) `public` or `apos`. Note that if `hmr` is disabled, the dev server will be always
       //   `false`.
+      // - `modulePreloadPolyfill`: if `true`, a module preload polyfill is injected.
       // - `types`: optional array, if present it represents the only entrypoint types (entrypoint.type)
       //   that should be built.
       // - `sourcemaps`: if `true`, the source maps are generated in production.
+      // - `postcssViewportToContainerToggle`: the configuration for the breakpoint preview plugin.
       //
       // Note that this getter depends on the current build task arguments. You shouldn't
       // use that directly.
@@ -494,15 +500,22 @@ module.exports = {
           isTask: !argv['check-apos-build'],
           hmr: self.hasHMR(),
           hmrPort: self.options.hmrPort,
-          sourcemaps: self.options.productionSourceMaps
+          modulePreloadPolyfill: self.options.modulePreloadPolyfill,
+          sourcemaps: self.options.productionSourceMaps,
+          postcssViewportToContainerToggle: {
+            enable: self.options.breakpointPreviewMode?.enable === true,
+            debug: self.options.breakpointPreviewMode?.debug === true,
+            modifierAttr: 'data-breakpoint-preview-mode',
+            transform: self.options.breakpointPreviewMode?.transform
+          }
         };
         options.devServer = !options.isTask && self.hasDevServer()
           ? self.options.hmr
           : false;
 
-        // Skip all public and keep only the apos scenes.
+        // Skip prebundled UI and keep only the apos scenes.
         if (!self.options.publicBundle) {
-          options.types = [ 'apos', 'bundled' ];
+          options.types = [ 'apos', 'index' ];
         }
 
         return options;
@@ -627,7 +640,7 @@ module.exports = {
           return;
         }
 
-        // Hidrate the entrypoints with the saved manifest data and
+        // Hydrate the entrypoints with the saved manifest data and
         // set the current build manifest data.
         const buildOptions = self.getBuildOptions();
         const entrypoints = await self.getBuildModule().entrypoints(buildOptions);

modules/@apostrophecms/asset/lib/build/external-module-api.js

@@ -69,13 +69,8 @@ module.exports = (self) => {
     // Returns an array of objects with the following properties:
     // - `name`: the entrypoint name. It's usually the relative to `ui` folder
     //   name(`src`, `apos`, `public`) or an extra bundle name.
+    // - `label`: the human-readable label for the entrypoint, used to print CLI messages.
     // - `type`: (enum) the entrypoint type. It can be `index`, `apos`, `custom` (e.g. extra bundles) or
-    //   `bundled` (e.g. `ui/public`). Every type has associated manager that provides handling for the entrypoint.
-    // - `useMeta`: if `true`, the entrypoint will be created based on the source metadata (see
-    //   `computeSourceMeta()` method).
-    // - `bundle`: if `true`, the entrypoint should be bundled by the build module.
-    // - `index`: if `true`, the entrypoint processes only `{name}/index.{js,scss}` module files.
-    // - `apos`: if `true`, the entrypoint processes components, icons and apps.
     // - `ignoreSources`: an array of sources that shouldn't be processed when creating the entrypoint.
     // - `sources`: an object with `js` and `scss` arrays of extra sources to be included in the entrypoint.
     //    These sources are not affected by the `ignoreSources` configuration.
@@ -84,10 +79,15 @@ module.exports = (self) => {
     // - `prologue`: a string with the prologue to be added to the entrypoint.
     // - `condition`: the JS `module` or `nomodule` condition. Undefined for no specific condition.
     // - `outputs`: an array of output extensions for the entrypoint (currently not fully utilized)
+    // - `inputs`: an array of input extensions for the entrypoint (currently not fully utilized)
     // - `scenes`: an array of scenes to be in the final post-bundle step. The scenes are instructions
     //   for the Apostrophe core to combine the builds and release them. Currently supported scenes are
     //   `apos` and `public` and custom scene names equal to extra bundle (only those who should be
     //   loaded separately in the browser).
+    //
+    // Additonal properties added after entrypoints are processed by the core and the external build module:
+    // - `manifest`: object, see the manifest section of `configureBuildModule()` docs for more information.
+    // - `bundles`: a `Set` containing the bundle names that this entrypoint is part of (both css and js).
     getBuildEntrypoints(types, recompute = false) {
       if (!self.hasBuildModule()) {
         return self.builds;
@@ -323,6 +323,7 @@ function invoke() {
             follow: false,
             absolute: false
           });
+          files.sort((a, b) => a.localeCompare(b, 'en'));
 
           if (stats) {
             // optimize fs calls

modules/@apostrophecms/asset/lib/build/internals.js

@@ -88,7 +88,7 @@ module.exports = (self) => {
               enhancedConfig.ignoreSources.push(...bundleConfig.scss);
             }
             // 2.3. Add the extra bundle configuration so that
-            // it only processes the configured `sources` (`useMeta: false`).
+            // it only processes the configured `sources`
             if (!bundleConfig.main) {
               entrypoints.push({
                 name: bundleName,

modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js

@@ -1,25 +1,17 @@
-const path = require('path');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 
 module.exports = (options, apos) => {
   const postcssPlugins = [
+    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
+      postcssViewportToContainerToggle({
+        modifierAttr: 'data-breakpoint-preview-mode',
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      })
+    ] : [],
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -28,15 +20,22 @@ module.exports = (options, apos) => {
           test: /\.css$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
-            'css-loader'
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                sourceMap: true,
+                postcssOptions: {
+                  plugins: [ postcssPlugins ]
+                }
+              }
+            }
           ]
         },
         {
           test: /\.s[ac]ss$/,
           use: [
             'vue-style-loader',
-            mediaToContainerQueriesLoader,
             'css-loader',
             {
               loader: 'postcss-loader',

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

@@ -1,26 +1,18 @@
-const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const postcssReplaceViewportUnitsPlugin = require('../postcss-replace-viewport-units-plugin');
+const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
 
 module.exports = (options, apos, srcBuildNames) => {
   const postcssPlugins = [
+    ...apos.asset.options.breakpointPreviewMode?.enable === true ? [
+      postcssViewportToContainerToggle({
+        modifierAttr: 'data-breakpoint-preview-mode',
+        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
+        transform: apos.asset.options.breakpointPreviewMode?.transform || null
+      })
+    ] : [],
     'autoprefixer',
     {}
   ];
-  let mediaToContainerQueriesLoader = '';
-
-  if (apos.asset.options.breakpointPreviewMode?.enable === true) {
-    postcssPlugins.unshift(
-      postcssReplaceViewportUnitsPlugin()
-    );
-    mediaToContainerQueriesLoader = {
-      loader: path.resolve(__dirname, '../media-to-container-queries-loader.js'),
-      options: {
-        debug: apos.asset.options.breakpointPreviewMode?.debug === true,
-        transform: apos.asset.options.breakpointPreviewMode?.transform || null
-      }
-    };
-  }
 
   return {
     module: {
@@ -30,8 +22,8 @@ module.exports = (options, apos, srcBuildNames) => {
           use: [
             // Instead of style-loader, to avoid FOUC
             MiniCssExtractPlugin.loader,
-            mediaToContainerQueriesLoader,
-            // Parses CSS imports and make css-loader ignore urls. Urls will still be handled by webpack
+            // Parses CSS imports and make css-loader ignore urls.
+            // Urls will still be handled by webpack
             {
               loader: 'css-loader',
               options: { url: false }