apostrophe 3.20.0 → 3.21.1-alpha.2022060701

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Possibility to pass options to webpack extensions from any module.
+
+### Fixes
+
+* Fix a Webpack cache issue leading to modules symlinked in `node_modules` not being rebuilt. 
+* Fixes login maximum attempts error message that wasn't showing the plural when lockoutMinutes is more than 1.
+* Fixes the text color of the current array item's slat label in the array editor modal 
+* Fixes the maximum width of an array item's slat label so as to not obscure the Remove button in narrow viewports
+
+### Changes
+
+* If an array field's titleField option is set to a select field, use the selected option's label as the slat label rather it's value.
+* Disable the slat controls of the attachment component while uploading.
+* Fixes bug when re-attaching the same file won't trigger an upload.
+* AposSlat now fully respects the disabled state.
+
+## 3.21.1 (2022-06-04)
+
+### Fixes
+
+* Work around backwards compatibility break in `sass` module by pinning to `sass` `1.50.x` while we investigate. If you saw the error `RangeError: Invalid value: Not in inclusive range 0..145: -1` you can now fix that by upgrading with `npm update`. If it does not immediately clear up the issue in development, try `node app @apostrophecms/asset:clear-cache`.
+ 
+## 3.21.0 (2022-05-25)
+
+### Adds
+
+* Trigger only the relevant build when in a watch mode (development). The build paths should not contain comma (`,`).
+* Adds an `unpublish` method, available for any doc-type.  
+An _Unpublish_ option has also been added to the context menu of the modal when editing a piece or a page.
+
+### Fixes
+
+* Vue files not being parsed when running eslint through command line, fixes all lint errors in vue files.
+* Fix a bug where some Apostrophe modules symlinked in `node_modules` are not being watched.
+* Recover after webpack build error in watch mode (development only).
+* Fixes an edge case when failing (throw) task invoked via `task.invoke` will result in `apos.isTask()` to always return true due to `apos.argv` not reverted properly.
+
+## 3.20.1 (2022-05-17)
+
+### Fixes
+
+* Minor corrections to French translation.
+
 ## 3.20.0
 
 ### Adds
@@ -14,15 +61,10 @@
 * Webpack disk cache for better build performance in development and, if appropriately configured, production as well.
 * In development, Webpack rebuilds the front end without the need to restart the Node.js process, yielding an additional speedup. To get this speedup for existing projects, see the `nodemonConfig` section of the latest `package.json` in [a3-boilerplate](https://github.com/apostrophecms/a3-boilerplate) for the new "ignore" rules you'll need to prevent nodemon from stopping the process and restarting.
 * Added the new command line task `apostrophecms/asset:clear-cache` for clearing the webpack disk cache. This should be necessary only in rare cases where the configuration has changed in ways Apostrophe can't automatically detect.
+* A separate `publishedLabel` field can be set for any schema field of a page or piece. If present it is displayed instead of `label` if the document has already been published.
 
 ### 3.18.1
 
-### Adds
-
-* Webpack cache for build performance in development and production mode.
-* Add a watcher in development mode to rebuild the assets on changes in the same process.
-* Add asset task `apostrophecms/asset:clear-cache` for force clearing the webpack build cache.
-
 ### Fixes
 
 * The admin UI now rebuilds properly in a development environment when new npm modules are installed in a multisite project (`apos.rootDir` differs from `apos.npmRootDir`).

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

@@ -1,5 +1,9 @@
 <template>
-  <div data-apos-test="adminBar" class="apos-admin-bar-wrapper" :class="themeClass">
+  <div
+    data-apos-test="adminBar"
+    class="apos-admin-bar-wrapper"
+    :class="themeClass"
+  >
     <div class="apos-admin-bar-spacer" ref="spacer" />
     <nav class="apos-admin-bar" ref="adminBar">
       <div class="apos-admin-bar__row">

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

@@ -131,7 +131,6 @@ export default {
   },
   async mounted() {
     apos.bus.$on('revert-published-to-previous', this.onRevertPublishedToPrevious);
-    apos.bus.$on('unpublish', this.onUnpublish);
     apos.bus.$on('set-context', this.onSetContext);
     apos.bus.$on('push-context', this.onPushContext);
     apos.bus.$on('pop-context', this.onPopContext);
@@ -598,37 +597,6 @@ export default {
         });
       }
     },
-    async onUnpublish(data) {
-      try {
-        await apos.http.post(`${data.action}/${data._id}/unpublish`, {
-          body: {},
-          busy: true
-        });
-        apos.notify('apostrophe:noLongerPublished', {
-          type: 'success',
-          dismiss: true
-        });
-        // This handler covers the modals too, so make sure it's
-        // for the context document before altering any admin bar state
-        // because of it
-        if (data._id.replace(/:.*$/, '') === (this.context._id.replace(/:.*$/, ''))) {
-          this.context = {
-            ...this.context,
-            modified: true,
-            lastPublishedAt: null
-          };
-          // No refresh is needed here because we're still in draft mode
-          // looking at the draft mode, and the thing that changed is the
-          // published mode
-        }
-      } catch (e) {
-        await apos.alert({
-          heading: this.$t('apostrophe:error'),
-          description: e.message || this.$t('apostrophe:errorWhileUnpublishing'),
-          localize: false
-        });
-      }
-    },
     async undo() {
       this.undone.push(this.patchesSinceLoaded.pop());
       await this.refreshAfterHistoryChange('apostrophe:undoFailed');

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

@@ -16,7 +16,8 @@ const {
   getWebpackExtensions,
   fillExtraBundles,
   getBundlesNames,
-  writeBundlesImportFiles
+  writeBundlesImportFiles,
+  findNodeModulesSymlinks
 } = require('./lib/webpack/utils');
 
 module.exports = {
@@ -48,13 +49,16 @@ module.exports = {
     self.configureBuilds();
     self.initUploadfs();
 
-    const { extensions, verifiedBundles } = await getWebpackExtensions({
+    const {
+      extensions = {}, extensionOptions = {}, verifiedBundles = {}
+    } = await getWebpackExtensions({
       getMetadata: self.apos.synth.getMetadata,
       modulesToInstantiate: self.apos.modulesToBeInstantiated()
     });
 
     self.extraBundles = fillExtraBundles(verifiedBundles);
     self.webpackExtensions = extensions;
+    self.webpackExtensionOptions = extensionOptions;
     self.verifiedBundles = verifiedBundles;
     self.buildWatcherEnable = process.env.APOS_ASSET_WATCH !== '0' && self.options.watch !== false;
     self.buildWatcherDebounceMs = parseInt(self.options.watchDebounceMs || 1000, 10);
@@ -116,7 +120,7 @@ module.exports = {
       build: {
         usage: 'Build Apostrophe frontend CSS and JS bundles',
         afterModuleInit: true,
-        async task(argv) {
+        async task(argv = {}) {
           // The lock could become huge, cache it, see computeCacheMeta()
           let packageLockContentCached;
           const req = self.apos.task.getReq();
@@ -124,6 +128,19 @@ module.exports = {
           const buildDir = `${self.apos.rootDir}/apos-build/${namespace}`;
           const bundleDir = `${self.apos.rootDir}/public/apos-frontend/${namespace}`;
           const modulesToInstantiate = self.apos.modulesToBeInstantiated();
+          const symLinkModules = await findNodeModulesSymlinks(self.apos.npmRootDir);
+          // Make it clear if builds should detect changes
+          const detectChanges = typeof argv.changes === 'string';
+          // Remove invalid changes. `argv.changes` is a comma separated list of relative
+          // to `apos.rootDir` files or folders
+          const sourceChanges = detectChanges
+            ? filterValidChanges(
+              argv.changes.split(',').map(p => p.trim()),
+              Object.keys(self.apos.modules)
+            )
+            : [];
+          // Keep track of the executed builds
+          const buildsExecuted = [];
 
           // Don't clutter up with previous builds.
           await fs.remove(buildDir);
@@ -136,9 +153,12 @@ module.exports = {
           await moduleOverrides(`${bundleDir}/modules`, 'public');
 
           for (const [ name, options ] of Object.entries(self.builds)) {
-            // If the option is not present always rebuild everything
+            // If the option is not present always rebuild everything...
             let rebuild = argv && !argv['check-apos-build'];
-            if (!rebuild) {
+            // ...but only when not in a watcher mode
+            if (detectChanges) {
+              rebuild = shouldRebuildFor(name, options, sourceChanges);
+            } else if (!rebuild) {
               let checkTimestamp = false;
 
               // Only builds contributing to the apos admin UI (currently just "apos")
@@ -180,9 +200,21 @@ module.exports = {
                 name,
                 options
               });
+              buildsExecuted.push(name);
             }
           }
 
+          // No need of deploy if in a watcher mode.
+          // Also we return an array of build names that
+          // have been triggered - this is required by the watcher
+          // so that page refresh is issued only when needed.
+          if (detectChanges) {
+            // merge the scenes that have been built
+            const scenes = [ ...new Set(buildsExecuted.map(name => self.builds[name].scenes).flat()) ];
+            merge(scenes);
+            return buildsExecuted;
+          }
+
           // Discover the set of unique asset scenes that exist (currently
           // just `public` and `apos`) by examining those specified as
           // targets for the various builds
@@ -325,9 +357,16 @@ module.exports = {
                 ? webpackMerge(webpackInstanceConfig, ...Object.values(self.webpackExtensions))
                 : webpackInstanceConfig;
 
-              // Inject the cache location at the end - we need the merged
-              const cacheMeta = await computeCacheMeta(name, webpackInstanceConfigMerged);
+              // Inject the cache location at the end - we need the merged config
+              const cacheMeta = await computeCacheMeta(name, webpackInstanceConfigMerged, symLinkModules);
               webpackInstanceConfigMerged.cache.cacheLocation = cacheMeta.location;
+              // Exclude symlinked modules from the cache managedPaths, no other way for now
+              // https://github.com/webpack/webpack/issues/12112
+              if (cacheMeta.managedPathsRegex) {
+                webpackInstanceConfigMerged.snapshot = {
+                  managedPaths: [ cacheMeta.managedPathsRegex ]
+                };
+              }
 
               const result = await webpack(webpackInstanceConfigMerged);
               await writeCacheMeta(name, cacheMeta);
@@ -688,7 +727,7 @@ module.exports = {
           // but it can be overridden by an APOS_ASSET_CACHE environment.
           // In order to compute an accurate hash, this helper needs
           // the final, merged webpack configuration.
-          async function computeCacheMeta(name, webpackConfig) {
+          async function computeCacheMeta(name, webpackConfig, symLinkModules) {
             const cacheBase = self.getCacheBasePath();
 
             if (!packageLockContentCached) {
@@ -731,10 +770,22 @@ module.exports = {
             );
             const location = path.resolve(cacheBase, hash);
 
+            // Retrieve symlinkModules and convert them to managedPaths regex rule
+            let managedPathsRegex;
+            if (symLinkModules.length > 0) {
+              const regex = symLinkModules
+                .map(m => self.apos.util.regExpQuote(m))
+                .join('|');
+              managedPathsRegex = new RegExp(
+                '^(.+?[\\/]node_modules)[\\/]((?!' + regex + ')).*[\\/]*'
+              );
+            }
+
             return {
               base: cacheBase,
               hash,
-              location
+              location,
+              managedPathsRegex
             };
           }
 
@@ -755,6 +806,36 @@ module.exports = {
               // Build probably failed, path is missing, ignore
             }
           }
+
+          // Given a set of changes, leave only those that belong to an active
+          // Apostrophe module. This would avoid unnecessary builds for non-active
+          // watched files (e.g. in multi instance mode).
+          // It's an expensive brute force O(n^2), so we do it once for all builds
+          // and we rely on the fact that mass changes happen rarely.
+          function filterValidChanges(all, modules) {
+            return all.filter(c => {
+              for (const module of modules) {
+                if (c.includes(module)) {
+                  return true;
+                }
+              }
+              return false;
+            });
+          }
+
+          // Detect if a build should be executed based on the changed
+          // paths. This function is invoked only when the appropriate `argv.changes`
+          // is passed to the task.
+          function shouldRebuildFor(buildName, buildOptions, changes) {
+            const name = buildOptions.source || buildName;
+            const id = `/ui/${name}/`;
+            for (const change of changes) {
+              if (change.includes(id)) {
+                return true;
+              }
+            }
+            return false;
+          }
         }
       },
 
@@ -872,8 +953,35 @@ module.exports = {
         return process.env.APOS_ASSET_CACHE ||
               path.join(self.apos.rootDir, 'data/temp/webpack-cache');
       },
-      // Run build task automatically when appropriate
-      async autorunUiBuildTask() {
+
+      // Override to set externally a build watcher (a `chokidar` instance).
+      // This method will be invoked only if/when needed.
+      // Example:
+      // ```js
+      // registerBuildWatcher() {
+      //   self.buildWatcher = chokidar.watch(pathsToWatch, {
+      //     cwd: self.apos.rootDir,
+      //     ignoreInitial: true
+      //   });
+      // }
+      // ```
+      registerBuildWatcher() {
+        self.buildWatcher = null;
+      },
+
+      // Run build task automatically when appropriate.
+      // If `changes` is provided (array of modified files/folders, relative
+      // to the application root), this method will return the result of the
+      // build task (array of builds that have been triggered by the changes).
+      // If `changes` is not provided (falsy value), a boolean will be returned,
+      // indicating if the build task has been invoked or not.
+      // IMPORTANT: Be cautious when changing the return type behavior.
+      // The build watcher initialization (event triggered) depends on a Boolean value,
+      // and the rebuild handler (triggered by the build watcher on
+      // detected change) depends on an Array value.
+      async autorunUiBuildTask(changes) {
+        let result = changes ? [] : false;
+        let _changes;
         if (
         // Do not automatically build the UI if we're starting from a task
           !self.apos.isTask() &&
@@ -882,26 +990,83 @@ module.exports = {
             // Or if we've set an app option to skip the auto build
             self.apos.options.autoBuild !== false
         ) {
-
           checkModulesWebpackConfig(self.apos.modules, self.apos.task.getReq().t);
           // If starting up normally, run the build task, checking if we
           // really need to update the apos build
-          await self.apos.task.invoke('@apostrophecms/asset:build', {
-            'check-apos-build': true
+          if (changes) {
+            // Important: don't pass empty string, it will cause the task
+            // to enter selective build mode and do nothing. Undefined is OK.
+            _changes = changes.join(',');
+          }
+          const buildsTriggered = await self.apos.task.invoke('@apostrophecms/asset:build', {
+            'check-apos-build': true,
+            changes: _changes
+          });
+          result = _changes ? buildsTriggered : true;
+        }
+        return result;
+      },
+
+      // The rebuild handler triggered (debounced) by the build watcher.
+      // The `changes` argument is a reference to a central pool of changes.
+      // It contains relative to the application root file paths.
+      // The pool is being exhausted before triggering the build task.
+      // Array manipulations are sync only, so no race condition is possible.
+      // `rebuildCallback` is used for testing and debug purposes. It allows
+      // access to the changes processed by the build task,
+      // the new restartId and the build names that the changes have triggered.
+      // This handler has no watcher dependencies and it's safe to be invoked
+      // by any code base.
+      async rebuild(changes, rebuildCallback) {
+        rebuildCallback = typeof rebuildCallback === 'function'
+          ? rebuildCallback
+          : () => {};
+        const result = {
+          changes: [],
+          restartId: self.restartId,
+          builds: []
+        };
+
+        const pulledChanges = [];
+        let change = changes.pop();
+        while (change) {
+          pulledChanges.push(change);
+          change = changes.pop();
+        }
+        // No changes - should never happen.
+        if (pulledChanges.length === 0) {
+          return rebuildCallback(result);
+        }
+        try {
+          const buildsTriggered = await self.autorunUiBuildTask(pulledChanges);
+          if (buildsTriggered.length > 0) {
+            self.restartId = self.apos.util.generateId();
+          }
+          return rebuildCallback({
+            changes: pulledChanges,
+            restartId: self.restartId,
+            builds: buildsTriggered
           });
-          return true;
+        } catch (e) {
+          // The build error is detailed enough, no message
+          // on our end.
+          self.apos.util.error(e);
         }
-        return false;
+
+        rebuildCallback(result);
       },
+
       // Start watching assets from `modules/` and
       // every symlinked package found in `node_modules/`.
       // `rebuildCallback` is invoked with queue length argument
       //  on actual build attempt only.
       // It's there mainly for testing and debugging purposes.
       async watchUiAndRebuild(rebuildCallback) {
-        if (!self.buildWatcherEnable || self.buildWatcher) {
+        if (!self.buildWatcherEnable) {
           return;
         }
+        // Allow custom watcher registration
+        self.registerBuildWatcher();
         const rootDir = self.apos.rootDir;
         // chokidar may invoke ready event multiple times,
         // we want one "watch enabled" message.
@@ -916,51 +1081,55 @@ module.exports = {
         const queue = [];
         let queueLength = 0;
         let queueRunning = false;
+        // The pool of changes - it HAS to be exhausted by the rebuild handler
+        // or we'll end up with a memory leak in development.
+        const changesPool = [];
 
         const debounceRebuild = _.debounce(chain, self.buildWatcherDebounceMs, {
           leading: false,
           trailing: true
         });
+        const addChangeAndDebounceRebuild = (fileOrDir) => {
+          changesPool.push(fileOrDir);
+          return debounceRebuild();
+        };
 
-        const symLinkModules = await findSymlinks();
-        const watchDirs = [
-          './modules/**/ui/apos/**',
-          './modules/**/ui/src/**',
-          './modules/**/ui/public/**',
-          ...symLinkModules.reduce(
-            (prev, m) => [
-              ...prev,
+        if (!self.buildWatcher) {
+          const symLinkModules = await findNodeModulesSymlinks(rootDir);
+          const watchDirs = [
+            './modules/**/ui/apos/**',
+            './modules/**/ui/src/**',
+            './modules/**/ui/public/**',
+            ...symLinkModules.reduce(
+              (prev, m) => [
+                ...prev,
+              `./node_modules/${m}/ui/apos/**`,
+              `./node_modules/${m}/ui/src/**`,
+              `./node_modules/${m}/ui/public/**`,
               `./node_modules/${m}/modules/**/ui/apos/**`,
               `./node_modules/${m}/modules/**/ui/src/**`,
               `./node_modules/${m}/modules/**/ui/public/**`
-            ],
-            []
-          )
-        ];
-        self.buildWatcher = chokidar.watch(watchDirs, {
-          cwd: rootDir,
-          ignoreInitial: true
-        });
+              ],
+              []
+            )
+          ];
+          self.buildWatcher = chokidar.watch(watchDirs, {
+            cwd: rootDir,
+            ignoreInitial: true
+          });
+        }
 
         self.buildWatcher
-          .on('add', debounceRebuild)
-          .on('change', debounceRebuild)
-          .on('unlink', debounceRebuild)
-          .on('addDir', debounceRebuild)
-          .on('unlinkDir', debounceRebuild)
+          .on('add', addChangeAndDebounceRebuild)
+          .on('change', addChangeAndDebounceRebuild)
+          .on('unlink', addChangeAndDebounceRebuild)
+          .on('addDir', addChangeAndDebounceRebuild)
+          .on('unlinkDir', addChangeAndDebounceRebuild)
           .on('error', e => error(`Watcher error: ${e}`))
           .on('ready', () => logOnce(
             self.apos.task.getReq().t('apostrophe:assetBuildWatchStarted')
           ));
 
-        async function rebuild() {
-          await self.autorunUiBuildTask();
-          self.restartId = self.apos.util.generateId();
-          if (typeof rebuildCallback === 'function') {
-            rebuildCallback(queueLength);
-          };
-        };
-
         // Simple, capped, self-exhausting queue implementation.
         function enqueue(fn) {
           if (queueLength === 2) {
@@ -975,37 +1144,18 @@ module.exports = {
             return;
           }
           queueRunning = true;
-          await queue.pop()();
+          await queue.pop()(changesPool, rebuildCallback);
           queueLength--;
           await dequeue();
         }
-        async function chain(f) {
-          enqueue(rebuild);
+        async function chain() {
+          enqueue(self.rebuild);
           if (!queueRunning) {
             await dequeue();
           }
         }
-
-        // Find all symlinks in node modules.
-        // This would find both `module-name` and `@company/module-name`
-        // package symlinks
-        async function findSymlinks(sub = '') {
-          let result = [];
-          const handle = await fs.promises.opendir(path.join(rootDir, 'node_modules', sub));
-          let mod = await handle.read();
-          while (mod) {
-            if (mod.isSymbolicLink()) {
-              result.push(sub + mod.name);
-            } else if (!sub && mod.name.startsWith('@')) {
-              const dres = await findSymlinks(`${mod.name}/`);
-              result = [ ...result, ...dres ];
-            }
-            mod = await handle.read();
-          }
-          await handle.close();
-          return result;
-        }
       },
+
       // An implementation method that you should not need to call.
       // Sets a predetermined configuration for the frontend builds.
       // If you are trying to enable IE11 support for ui/src, use the