apostrophe 3.26.0 → 3.27.0

package/CHANGELOG.md

@@ -1,11 +1,31 @@
 # Changelog
 
-## 3.26.0
+## 3.27.0 (2022-08-18)
+
+### Adds
+
+* Add `/grid` `POST` route in permission module, in addition to the existing `GET` one.
+* New utility script to help find excessively heavy npm dependencies of apostrophe core.
+
+### Changes
+
+* Extract permission grid into `AposPermissionGrid` vue component.
+* Moved `stylelint` from `dependencies` to `devDependencies`. The benefit may be small because many projects will depend on `stylelint` at project level, but every little bit helps install speed, and it may make a bigger difference if different major versions are in use.
+
+## 3.26.1 (2022-08-06)
+
+### Fixes
+
+Hotfix: always waits for the DOM to be ready before initializing the Apostrophe Admin UI. `setTimeout` alone might not guarantee that every time. This issue has apparently become more frequent in the latest versions of Chrome.
+* Modifies the `login` module to return an empty object in the API session cookie response body to avoid potential invalid JSON error if `response.json()` is retrieved.
+
+## 3.26.0 (2022-08-03)
 
 ### Adds
 
 * Tasks can now be registered with the `afterModuleReady` flag, which is more useful than `afterModuleInit` because it waits for the module to be more fully initialized, including all "improvements" loaded via npm. The original `afterModuleInit` flag is still supported in case someone was counting on its behavior.
 * Add `/grid` `POST` route in permission module, in addition to the existing `GET` one, to improve extensibility.
+* `@apostrophecms/express:list-routes` command line task added, to facilitate debugging.
 
 ### Changes
 

package/modules/@apostrophecms/admin-bar/index.js

@@ -41,8 +41,8 @@ module.exports = {
       // on the case, such as `@apostrophecms/global:editor` or
       // `@apostrophecms/page:manager`.
       //
-      // Alternatively, an `href` option may be set to an ordinary URL in
-      // `options`. This creates a basic link in the admin menu.
+      // TODO: Alternatively, an `href` option may be set to an ordinary
+      // URL in `options`. This creates a basic link in the admin menu.
       //
       // `permission` should be an object with `action` and `type`
       // properties. This determines visibility of the option, securing
@@ -59,13 +59,13 @@ module.exports = {
       // wish to implement a custom admin bar item not powered by
       // the `AposModals` app.
       //
-      // If `options.contextUtility` is true the item will be displayed in a tray of
-      // icons just to the left of the page settings gear. If `options.toggle` is also true,
+      // If `options.contextUtility` is true, the item will be displayed in a tray of
+      // icons just to the right of the login and/or locales menu. If `options.toggle` is also true,
       // then the button will have the `active` state until toggled
-      // off again. `options.openTooltip` and `options.closeTooltip` may be
-      // provided to offer a different tooltip during the active state. Otherwise
-      // `options.tooltip` is used. The regular label is also present for
-      // screenreaders only. The contextUtility functionality is typically used for
+      // off again. `options.tooltip.deactivate` and `options.tooltip.activate` may be
+      // provided to offer a different tooltip during the active versus inactive states,
+      // respectively. Otherwise, `options.tooltip` is used. The regular label is also present
+      // for screenreaders only. The contextUtility functionality is typically used for
       // experiences that temporarily change the current editing context.
       //
       // If an `options.when` function is provided, it will be invoked with

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

@@ -460,9 +460,14 @@ module.exports = {
               ${(tiptap && tiptap.registerCode) || ''}
               ` +
               (app ? stripIndent`
-                setTimeout(() => {
-                  ${app.invokeCode}
-                }, 0);
+              if (document.readyState !== 'loading') {
+                setTimeout(invoke, 0);
+              } else {
+                window.addEventListener('DOMContentLoaded', invoke);
+              }
+              function invoke() {
+                ${app.invokeCode}
+              }
               ` : '') +
               // No delay on these, they expect to run early like ui/public code
               // and the first ones invoked set up expected stuff like apos.http

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

@@ -1,5 +1,3 @@
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-
 module.exports = (options, apos) => {
   return {
     module: {
@@ -58,11 +56,6 @@ module.exports = (options, apos) => {
           ]
         }
       ]
-    },
-    plugins: [
-      new StyleLintPlugin({
-        files: [ './node_modules/apostrophe/modules/**/*.{scss,vue}' ]
-      })
-    ]
+    }
   };
 };

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

@@ -168,6 +168,20 @@ module.exports = {
       self.apos.util.error('When you do so other modules will also pick up on it and make URLs absolute.');
     }
   },
+  tasks(self) {
+    return {
+      'list-routes': {
+        help: 'List all Express routes registered via routes(), apiRoutes(), etc. (not directly via apos.app)',
+        async task(argv) {
+          for (const info of self.finalModuleMiddlewareAndRoutes) {
+            if (info.route) {
+              console.log(`${info.method.toUpperCase()} ${info.url}`);
+            }
+          }
+        }
+      }
+    };
+  },
   handlers(self) {
     return {
       'apostrophe:run': {

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

@@ -648,6 +648,7 @@ module.exports = {
           if (session) {
             await self.passportLogin(req, user);
             await self.clearLoginAttempts(user.username);
+            return {};
           } else {
             const token = cuid();
             await self.bearerTokens.insert({

package/modules/@apostrophecms/permission/ui/apos/components/AposInputRole.vue

@@ -16,48 +16,7 @@
         :wrapper-classes="[ 'apos-input__role' ]"
         @change="change"
       />
-      <div class="apos-input__role__permission-grid">
-        <div
-          v-for="permissionSet in permissionSets"
-          :key="permissionSet.name"
-          class="apos-input__role__permission-grid__set"
-        >
-          <h4 class="apos-input__role__permission-grid__set-name">
-            {{ $t(permissionSet.label) }}
-            <AposIndicator
-              v-if="permissionSet.includes"
-              icon="help-circle-icon"
-              class="apos-input__role__permission-grid__help"
-              :tooltip="getTooltip(permissionSet.includes)"
-              :icon-size="11"
-              icon-color="var(--a-base-4)"
-            />
-          </h4>
-          <dl class="apos-input__role__permission-grid__list">
-            <div
-              v-for="permission in permissionSet.permissions"
-              :key="permission.name"
-              class="apos-input__role__permission-grid__row"
-            >
-              <dd class="apos-input__role__permission-grid__value">
-                <AposIndicator
-                  :icon="permission.value ? 'check-bold-icon' : 'close-icon'"
-                  :icon-color="permission.value ? 'var(--a-success)' : 'var(--a-base-5)'"
-                />
-                <span v-if="permission.value" class="apos-sr-only">
-                  {{ $t('apostrophe:enabled') }}
-                </span>
-                <span v-else class="apos-sr-only">
-                  {{ $t('apostrophe:disabled') }}
-                </span>
-              </dd>
-              <dt class="apos-input__role__permission-grid__label">
-                {{ $t(permission.label) }}
-              </dt>
-            </div>
-          </dl>
-        </div>
-      </div>
+      <AposPermissionGrid :api-params="{ role: next }" />
     </template>
   </AposInputWrapper>
 </template>
@@ -68,24 +27,12 @@ import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin'
 export default {
   name: 'AposInputRole',
   mixins: [ AposInputMixin ],
-  props: {
-    icon: {
-      type: String,
-      default: 'menu-down-icon'
-    }
-  },
   data() {
     return {
       next: (this.value.data == null) ? null : this.value.data,
-      choices: [],
-      permissionSets: []
+      choices: []
     };
   },
-  watch: {
-    async next() {
-      this.permissionSets = await this.getPermissionSets(this.next);
-    }
-  },
   async mounted() {
     // Add an null option if there isn't one already
     if (!this.field.required && !this.field.choices.find(choice => {
@@ -104,32 +51,8 @@ export default {
         this.next = this.field.choices[0].value;
       }
     });
-    if (this.next) {
-      this.permissionSets = await this.getPermissionSets(this.next);
-    }
   },
   methods: {
-    getTooltip(includes) {
-      const html = document.createElement('div');
-      html.setAttribute('class', 'apos-info');
-      const list = document.createElement('ul');
-      const intro = document.createElement('p');
-      const followUp = document.createElement('p');
-      intro.appendChild(document.createTextNode(this.$t('apostrophe:piecePermissionsIntro')));
-      followUp.appendChild(document.createTextNode(this.$t('apostrophe:piecePermissionsPieceTypeList')));
-      html.appendChild(intro);
-      html.appendChild(followUp);
-      includes.forEach(item => {
-        const li = document.createElement('li');
-        li.appendChild(document.createTextNode(this.$t(item)));
-        list.appendChild(li);
-      });
-      html.appendChild(list);
-      return {
-        content: html,
-        localize: false
-      };
-    },
     validate(value) {
       if (this.field.required && !value.length) {
         return 'required';
@@ -142,60 +65,7 @@ export default {
     change(value) {
       // Allows expression of non-string values
       this.next = this.choices.find(choice => choice.value === value).value;
-    },
-    async getPermissionSets(role) {
-      const { permissionSets } = await apos.http.post(`${apos.permission.action}/grid`, {
-        body: {
-          role
-        },
-        busy: true
-      });
-
-      return permissionSets;
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-  .apos-input-icon {
-    @include apos-transition();
-  }
-
-  .apos-input__role__permission-grid {
-    @include type-base;
-    display: grid;
-    margin-top: $spacing-triple;
-    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
-  }
-
-  .apos-input__role__permission-grid__row {
-    display: flex;
-    align-items: center;
-    padding-bottom: $spacing-three-quarters;
-    margin-bottom: $spacing-three-quarters;
-    border-bottom: 1px solid var(--a-base-9);
-  }
-  .apos-input__role__permission-grid__list {
-    margin-top: 0;
-  }
-  .apos-input__role__permission-grid__set {
-    padding: 0 $spacing-base;
-    margin-bottom: $spacing-double;
-  }
-
-  .apos-input__role__permission-grid__set-name {
-    @include type-title;
-    display: inline-flex;
-    margin: 0 0 $spacing-double;
-  }
-
-  .apos-input__role__permission-grid__value {
-    display: inline-flex;
-    margin: 0 $spacing-half 0 0;
-  }
-
-  .apos-input__role__permission-grid__help {
-    margin-left: $spacing-half;
-  }
-</style>

package/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="apos-input__role__permission-grid">
+    <div
+      v-for="permissionSet in permissionSets"
+      :key="permissionSet.name"
+      class="apos-input__role__permission-grid__set"
+    >
+      <h4 class="apos-input__role__permission-grid__set-name">
+        {{ $t(permissionSet.label) }}
+        <AposIndicator
+          v-if="permissionSet.includes"
+          icon="help-circle-icon"
+          class="apos-input__role__permission-grid__help"
+          :tooltip="getTooltip(permissionSet.includes)"
+          :icon-size="11"
+          icon-color="var(--a-base-4)"
+        />
+      </h4>
+      <dl class="apos-input__role__permission-grid__list">
+        <div
+          v-for="permission in permissionSet.permissions"
+          :key="permission.name"
+          class="apos-input__role__permission-grid__row"
+        >
+          <dd class="apos-input__role__permission-grid__value">
+            <AposIndicator
+              :icon="permission.value ? 'check-bold-icon' : 'close-icon'"
+              :icon-color="permission.value ? 'var(--a-success)' : 'var(--a-base-5)'"
+            />
+            <span v-if="permission.value" class="apos-sr-only">
+              {{ $t('apostrophe:enabled') }}
+            </span>
+            <span v-else class="apos-sr-only">
+              {{ $t('apostrophe:disabled') }}
+            </span>
+          </dd>
+          <dt class="apos-input__role__permission-grid__label">
+            {{ $t(permission.label) }}
+          </dt>
+        </div>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AposPermissionGrid',
+  props: {
+    apiParams: {
+      type: Object,
+      required: true,
+      validator(value) {
+        if (typeof value !== 'object') {
+          return false;
+        }
+
+        const ROLE = 'role';
+        const ROLES_BY_TYPE = 'rolesByType';
+        const GROUPS = '_groups';
+
+        const keys = Object.keys(value);
+        const [ key ] = keys;
+
+        if (keys.length > 1 || ![ ROLE, ROLES_BY_TYPE, GROUPS ].includes(key)) {
+          return false;
+        }
+        if (value[ROLE] && typeof value[ROLE] !== 'string') {
+          return false;
+        }
+        if (value[ROLES_BY_TYPE] && !Array.isArray(value[ROLES_BY_TYPE])) {
+          return false;
+        }
+        if (value[GROUPS] && !Array.isArray(value[GROUPS])) {
+          return false;
+        }
+        return true;
+      }
+    }
+  },
+  data() {
+    return {
+      permissionSets: []
+    };
+  },
+  watch: {
+    apiParams: {
+      async handler() {
+        this.permissionSets = await this.getPermissionSets();
+      },
+      deep: true
+    }
+  },
+  async mounted() {
+    this.permissionSets = await this.getPermissionSets();
+  },
+  methods: {
+    getTooltip(includes) {
+      const html = document.createElement('div');
+      html.setAttribute('class', 'apos-info');
+      const list = document.createElement('ul');
+      const intro = document.createElement('p');
+      const followUp = document.createElement('p');
+      intro.appendChild(document.createTextNode(this.$t('apostrophe:piecePermissionsIntro')));
+      followUp.appendChild(document.createTextNode(this.$t('apostrophe:piecePermissionsPieceTypeList')));
+      html.appendChild(intro);
+      html.appendChild(followUp);
+      includes.forEach(item => {
+        const li = document.createElement('li');
+        li.appendChild(document.createTextNode(this.$t(item)));
+        list.appendChild(li);
+      });
+      html.appendChild(list);
+
+      return {
+        content: html,
+        localize: false
+      };
+    },
+    async getPermissionSets() {
+      const { permissionSets } = await apos.http.post(`${apos.permission.action}/grid`, {
+        body: this.apiParams,
+        busy: true
+      });
+
+      return permissionSets;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .apos-input__role__permission-grid {
+    @include type-base;
+    display: grid;
+    margin-top: $spacing-triple;
+    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+  }
+
+  .apos-input__role__permission-grid__row {
+    display: flex;
+    align-items: center;
+    padding-bottom: $spacing-three-quarters;
+    margin-bottom: $spacing-three-quarters;
+    border-bottom: 1px solid var(--a-base-9);
+  }
+  .apos-input__role__permission-grid__list {
+    margin-top: 0;
+  }
+  .apos-input__role__permission-grid__set {
+    padding: 0 $spacing-base;
+    margin-bottom: $spacing-double;
+  }
+
+  .apos-input__role__permission-grid__set-name {
+    @include type-title;
+    display: inline-flex;
+    margin: 0 0 $spacing-double;
+  }
+
+  .apos-input__role__permission-grid__value {
+    display: inline-flex;
+    margin: 0 $spacing-half 0 0;
+  }
+
+  .apos-input__role__permission-grid__help {
+    margin-left: $spacing-half;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
@@ -59,7 +59,6 @@
     "debounce-async": "0.0.2",
     "deep-get-set": "^1.1.1",
     "dompurify": "^2.3.1",
-    "eslint-plugin-promise": "^5.1.0",
     "express": "^4.16.4",
     "express-bearer-token": "^2.4.0",
     "express-cache-on-demand": "^1.0.3",
@@ -102,10 +101,6 @@
     "sass-loader": "^10.1.1",
     "server-destroy": "^1.0.1",
     "sluggo": "^0.3.0",
-    "stylelint": "^14.6.1",
-    "stylelint-declaration-strict-value": "^1.8.0",
-    "stylelint-order": "^5.0.0",
-    "stylelint-webpack-plugin": "^3.2.0",
     "tinycolor2": "^1.4.2",
     "tough-cookie": "^4.0.0",
     "underscore.string": "^3.3.4",
@@ -134,7 +129,11 @@
     "nyc": "^15.1.0",
     "replace-in-file": "^6.1.0",
     "vue-eslint-parser": "^7.1.1",
-    "webpack-bundle-analyzer": "^3.9.0"
+    "webpack-bundle-analyzer": "^3.9.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "stylelint": "^14.6.1",
+    "stylelint-declaration-strict-value": "^1.8.0",
+    "stylelint-order": "^5.0.0"
   },
   "browserslist": [
     "ie >= 10"

package/scripts/find-heavy-npm-modules

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+/* eslint-disable node/no-path-concat */
+
+const fs = require('fs');
+
+const trueDeps = JSON.parse(fs.readFileSync(`${__dirname}/../package-lock.json`)).packages;
+const deps = {};
+for (let [ name, props ] of Object.entries(trueDeps)) {
+  if (props.dev) {
+    continue;
+  }
+  const lastIndex = name.lastIndexOf('node_modules/');
+  if (lastIndex !== -1) {
+    name = name.substring(lastIndex + 13);
+  }
+  deps[name] = props;
+}
+const costs = new Map();
+for (const name of Object.keys(deps[''].dependencies)) {
+  costs.set(name, countWeight(name));
+}
+
+function countWeight(name) {
+  const subDeps = deps[name].dependencies || {};
+  let weight = 0;
+  for (const name of Object.keys(subDeps)) {
+    weight += countWeight(name);
+  }
+  return weight + 1;
+}
+
+const sorted = [ ...costs.entries() ].sort((a, b) => a[1] - b[1]);
+for (const [ name, cost ] of sorted) {
+  console.log(`${name} has ${cost} sub-dependencies`);
+}
+
+const nonDevDeps = Object.keys(trueDeps).filter(name => !trueDeps[name].dev).length;
+console.log(`Total dependencies: ${nonDevDeps}`);