apostrophe 3.16.0 → 3.17.0

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -0,0 +1,67 @@
+<template>
+  <!-- Errors for the entire object field are not interesting,
+    let the relevant subfield's error shine on its own -->
+  <AposInputWrapper
+    :field="field"
+    :error="null"
+    :uid="uid"
+    :display-options="displayOptions"
+  >
+    <template #body>
+      <div class="apos-input-object">
+        <div class="apos-input-wrapper">
+          <AposSchema
+            :schema="field.schema"
+            :trigger-validation="triggerValidation"
+            :utility-rail="false"
+            v-model="schemaInput"
+            ref="schema"
+          />
+        </div>
+      </div>
+    </template>
+  </AposInputWrapper>
+</template>
+
+<script>
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import { klona } from 'klona';
+
+export default {
+  name: 'AposInputObject',
+  mixins: [ AposInputMixin ],
+  data () {
+    const next = this.value ? this.value.data : (this.field.def || {});
+    return {
+      schemaInput: {
+        data: next
+      },
+      next
+    };
+  },
+  watch: {
+    schemaInput() {
+      this.next = this.schemaInput.data;
+    }
+  },
+  methods: {
+    validate (value) {
+      if (this.schemaInput.hasErrors) {
+        return 'invalid';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .apos-input-object {
+    border-left: 1px solid var(--a-base-9);
+  }
+  .apos-input-wrapper {
+    margin: 20px 0 0 19px;
+  }
+  .apos-input-object ::v-deep .apos-schema .apos-field {
+    margin-bottom: 30px;
+  }
+</style>

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

@@ -119,6 +119,7 @@ module.exports = {
   },
   methods(self) {
     return {
+      ...require('./lib/bundlesLoader')(self),
 
       // Add helpers in the namespace for a particular module.
       // They will be visible in nunjucks at
@@ -630,8 +631,6 @@ module.exports = {
       // async function.
 
       async renderPageForModule(req, template, data, module) {
-
-        let content;
         let scene = req.user ? 'apos' : 'public';
         if (req.scene) {
           scene = req.scene;
@@ -699,15 +698,25 @@ module.exports = {
         }
 
         try {
-          content = await module.render(req, template, args);
+          const content = await module.render(req, template, args);
+
+          const filledContent = self.insertBundlesMarkup({
+            page: req.data.bestPage,
+            scene,
+            template,
+            content,
+            scriptsPlaceholder: req.scriptsPlaceholder,
+            stylesheetsPlaceholder: req.stylesheetsPlaceholder,
+            widgetsBundles: req.widgetsBundles
+          });
+
+          return filledContent;
         } catch (e) {
           // The page template threw an exception. Log where it
           // occurred for easier debugging
           return error(e);
         }
 
-        return content;
-
         function error(e) {
           self.logError(req, e);
           req.statusCode = 500;

package/modules/@apostrophecms/template/lib/bundlesLoader.js

@@ -0,0 +1,158 @@
+const { stripIndent } = require('common-tags');
+
+module.exports = (self) => {
+  function insertBundlesMarkup({
+    page = {},
+    template = '',
+    scene,
+    content,
+    scriptsPlaceholder,
+    stylesheetsPlaceholder,
+    widgetsBundles = {}
+  }) {
+    const renderMarkup = renderBundleMarkup(
+      self.apos.template.safe,
+      self.apos.asset.getAssetBaseUrl()
+    );
+
+    if (!scriptsPlaceholder && !stylesheetsPlaceholder) {
+      return content;
+    }
+
+    const { es5 } = self.apos.asset.options;
+    const { extraBundles } = self.apos.asset;
+
+    const jsMainBundle = renderMarkup({
+      fileName: scene,
+      ext: 'js',
+      es5
+    });
+    const cssMainBundle = renderMarkup({
+      fileName: scene,
+      ext: 'css'
+    });
+
+    if (scene === 'apos') {
+      return loadAllBundles({
+        content,
+        scriptsPlaceholder,
+        stylesheetsPlaceholder,
+        extraBundles,
+        renderMarkup,
+        jsMainBundle,
+        cssMainBundle,
+        es5
+      });
+    }
+
+    const templateType = template.substring(template.lastIndexOf(':') + 1);
+    const pageModule = page.type && self.apos.modules[page.type];
+    const { webpack = {} } = pageModule ? pageModule.__meta : {};
+
+    const configs = Object.values(webpack || {}).reduce((acc, config) => ({
+      ...acc,
+      ...config && config.bundles
+    }), widgetsBundles);
+
+    const { jsBundles, cssBundles } = Object.entries(configs)
+      .reduce((acc, [ name, { templates } ]) => {
+        if (templates && !templates.includes(templateType)) {
+          return acc;
+        }
+
+        const jsMarkup = scriptsPlaceholder &&
+        extraBundles.js.includes(name) &&
+          renderMarkup({
+            fileName: name,
+            ext: 'js',
+            es5
+          });
+
+        const cssMarkup = stylesheetsPlaceholder &&
+          extraBundles.css.includes(name) &&
+          renderMarkup({
+            fileName: name,
+            ext: 'css'
+          });
+
+        return {
+          jsBundles: stripIndent`
+            ${acc.jsBundles}
+            ${jsMarkup || ''}
+          `,
+          cssBundles: stripIndent`
+            ${acc.cssBundles}
+            ${cssMarkup || ''}
+          `
+        };
+      }, {
+        jsBundles: jsMainBundle,
+        cssBundles: cssMainBundle
+      });
+
+    return content
+      .replace(scriptsPlaceholder, jsBundles)
+      .replace(stylesheetsPlaceholder, cssBundles);
+  }
+
+  return { insertBundlesMarkup };
+};
+
+function renderBundleMarkup (safe, base) {
+  return ({
+    fileName, ext = 'js', es5 = false
+  }) => {
+    if (ext === 'css') {
+      return safe(stripIndent`
+        <link href="${base}/${fileName}-bundle.css" rel="stylesheet" />
+      `);
+    }
+
+    if (es5) {
+      return safe(stripIndent`
+        <script nomodule src="${base}/${fileName}-nomodule-bundle.${ext}"></script>
+        <script type="module" src="${base}/${fileName}-module-bundle.${ext}"></script>
+      `);
+    }
+
+    return safe(stripIndent`
+      <script src="${base}/${fileName}-module-bundle.${ext}"></script>
+    `);
+  };
+}
+
+function loadAllBundles({
+  content,
+  extraBundles,
+  scriptsPlaceholder,
+  stylesheetsPlaceholder,
+  jsMainBundle,
+  cssMainBundle,
+  renderMarkup,
+  es5
+}) {
+  const reduceToMarkup = (acc, bundle, ext) => {
+    const bundleMarkup = renderMarkup({
+      fileName: bundle.replace(`.${ext}`, ''),
+      ext,
+      es5
+    });
+
+    return stripIndent`
+      ${acc}
+      ${bundleMarkup}
+    `;
+  };
+
+  const jsBundles = extraBundles.js.reduce(
+    (acc, bundle) => reduceToMarkup(acc, bundle, 'js'), jsMainBundle
+  );
+
+  const cssBundles = extraBundles.css.reduce(
+    (acc, bundle) => reduceToMarkup(acc, bundle, 'css'), cssMainBundle
+  );
+
+  return content
+    .replace(scriptsPlaceholder, jsBundles)
+    .replace(stylesheetsPlaceholder, cssBundles);
+}

package/modules/@apostrophecms/template/views/outerLayoutBase.html

@@ -5,7 +5,10 @@
     {% endblock %}
     {% component '@apostrophecms/template:inject' with { where: 'head', end: 'prepend' } %}
     <title>{% block title %}{{ data.piece.title or data.page.title }}{% endblock %}</title>
+
+    {# This call is still here for backwards compatibility, but does nothing #}
     {{ apos.asset.stylesheets(data.scene) }}
+
     {% block standardHead %}
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {% endblock %}
@@ -40,7 +43,10 @@
       <div id="apos-modals"></div>
     {% endif %}
     {# Scripts must load after apos-modal in the DOM #}
+
+    {# This call is still here for backwards compatibility, but does nothing #}
     {{ apos.asset.scripts(data.scene) }}
+
     {# For project-level webpack injection in dev environments #}
     {% block afterAposScripts %}{% endblock %}
     {# Automatically does nothing in production #}

package/modules/@apostrophecms/widget-type/index.js

@@ -178,6 +178,11 @@ module.exports = {
       // async, as are all functions that invoke a nunjucks render in
       // Apostrophe 3.x.
       async output(req, widget, options, _with) {
+        req.widgetsBundles = {
+          ...req.widgetsBundles || {},
+          ...self.getWidgetsBundles(`${widget.type}-widget`)
+        };
+
         return self.render(req, self.template, {
           widget: widget,
           options: options,
@@ -186,6 +191,22 @@ module.exports = {
         });
       },
 
+      getWidgetsBundles (widgetType) {
+        const widget = self.apos.modules[widgetType];
+
+        if (!widget) {
+          return {};
+        }
+
+        return Object.values(widget.__meta.webpack || {})
+          .reduce((acc, config) => {
+            return {
+              ...acc,
+              ...config && config.bundles
+            };
+          }, {});
+      },
+
       // Load relationships and carry out any other necessary async
       // actions for our type of widget, as long as it is
       // not forbidden due to the `neverLoad` option or the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/areas.js

@@ -232,7 +232,8 @@ describe('Areas', function() {
       assert(doc.main._rendered);
       assert(!doc.main.items);
 
-      // TEMP Commenting out until we add the array item metatype.
+      // TODO the approach in this test can't cover array or object area rendering
+      // properly without a further overhaul (not a new problem).
       // if (doc.moreAreas) {
       //   doc.moreAreas.forEach(area => {
       //     assert(area.someWidgets._rendered);

package/test/assets.js

@@ -1,18 +1,101 @@
 const t = require('../test-lib/test.js');
 const assert = require('assert');
+const fs = require('fs-extra');
+const path = require('path');
+
+const {
+  checkModulesWebpackConfig,
+  getWebpackExtensions,
+  fillExtraBundles
+} = require('../modules/@apostrophecms/asset/lib/webpack/utils');
+
 let apos;
 
+const badModules = {
+  badModuleConfig: {
+    webpack: {
+      badprop: {}
+    }
+  },
+  badModuleConfig2: {
+    webpack: []
+  }
+};
+
+const pagesToInsert = (homeId) => ([
+  {
+    _id: 'parent:en:published',
+    aposLocale: 'en:published',
+    metaType: 'doc',
+    aposDocId: 'parent',
+    type: 'bundle-page',
+    slug: '/bundle',
+    visibility: 'public',
+    path: `${homeId.replace(':en:published', '')}/bundle`,
+    level: 1,
+    rank: 0,
+    main: {
+      _id: 'areaId',
+      metaType: 'area',
+      items: [
+        {
+          _id: 'widgetId',
+          metaType: 'widget',
+          type: 'bundle'
+        }
+      ]
+    }
+  },
+  {
+    _id: 'child:en:published',
+    title: 'Bundle',
+    aposLocale: 'en:published',
+    metaType: 'doc',
+    aposDocId: 'child',
+    type: 'bundle',
+    slug: 'child',
+    visibility: 'public'
+  }
+]);
+
+const modules = {
+  '@apostrophecms/page': {
+    options: {
+      park: [],
+      types: [
+        {
+          name: 'bundle-page',
+          label: 'Bundle Page'
+        }
+      ]
+    }
+  },
+  bundle: {},
+  'bundle-page': {},
+  'bundle-widget': {}
+};
+
 describe('Assets', function() {
+  const {
+    publicFolderPath,
+    getScriptMarkup,
+    getStylesheetMarkup,
+    expectedBundlesNames,
+    deleteBuiltFolders,
+    allBundlesAreIncluded
+  } = loadUtils();
 
   after(async function() {
+    await deleteBuiltFolders(publicFolderPath, true);
     return t.destroy(apos);
   });
 
-  this.timeout(t.timeout);
+  this.timeout(90000);
 
-  it('should should exist on the apos object', async function() {
+  it('should exist on the apos object', async function() {
     apos = await t.create({
-      root: module
+      root: module,
+      modules
     });
     assert(apos.asset);
   });
@@ -21,4 +104,225 @@ describe('Assets', function() {
     const text = await apos.http.get('/static-test.txt');
     assert(text.match(/served/));
   });
+
+  it('should check that webpack configs in modules are well formatted', async function () {
+    const translate = apos.task.getReq().t;
+
+    assert.doesNotThrow(() => checkModulesWebpackConfig(apos.modules, translate));
+
+    await t.destroy(apos);
+
+    apos = await t.create({
+      root: module,
+      modules: badModules
+    });
+
+    assert.throws(() => checkModulesWebpackConfig(apos.modules, translate));
+
+    await t.destroy(apos);
+  });
+
+  it('should get webpack extensions from modules and fill extra bundles', async function () {
+    const expectedEntryPointsNames = {
+      js: [ 'extra', 'extra2' ],
+      css: [ 'extra' ]
+    };
+
+    apos = await t.create({
+      root: module,
+      modules
+    });
+
+    const { extensions, verifiedBundles } = await getWebpackExtensions({
+      name: 'src',
+      getMetadata: apos.synth.getMetadata,
+      modulesToInstantiate: apos.modulesToBeInstantiated()
+    });
+
+    assert(Object.keys(extensions).length === 2);
+    assert(!extensions.ext1.resolve.alias.ext1);
+    assert(extensions.ext1.resolve.alias.ext1Overriden);
+    assert(extensions.ext2.resolve.alias.ext2);
+
+    assert(Object.keys(verifiedBundles).length === 2);
+
+    assert(verifiedBundles.extra.js.length === 1);
+    assert(verifiedBundles.extra.scss.length === 1);
+
+    assert(verifiedBundles.extra2.js.length === 1);
+    assert(verifiedBundles.extra2.scss.length === 0);
+
+    const filled = fillExtraBundles(verifiedBundles);
+
+    filled.js.forEach((name) => {
+      assert(expectedEntryPointsNames.js.includes(name));
+    });
+
+    filled.css.forEach((name) => {
+      assert(expectedEntryPointsNames.css.includes(name));
+    });
+  });
+
+  it('should build the right bundles in dev and prod modes', async function () {
+    process.env.NODE_ENV = 'production';
+
+    await apos.asset.tasks.build.task();
+
+    const getPath = (p) => `${publicFolderPath}/apos-frontend/` + p;
+    const [ releaseId ] = await fs.readdir(getPath('releases'));
+
+    const checkFileExists = async (p) => fs.pathExists(getPath(p));
+    const releasePath = `releases/${releaseId}/default/`;
+
+    await checkBundlesExists(releasePath, expectedBundlesNames);
+    await deleteBuiltFolders(publicFolderPath);
+
+    process.env.NODE_ENV = 'development';
+
+    await apos.asset.tasks.build.task();
+    await checkBundlesExists('default/', expectedBundlesNames);
+
+    async function checkBundlesExists (folderPath, fileNames) {
+      for (const fileName of fileNames) {
+        const extraBundleExists = await checkFileExists(folderPath + fileName);
+        assert(extraBundleExists);
+      }
+    }
+  });
+
+  it('should load the right bundles inside the right page', async function () {
+    const { _id: homeId } = await apos.page.find(apos.task.getAnonReq(), { level: 0 }).toObject();
+    const jar = apos.http.jar();
+
+    await apos.doc.db.insertMany(pagesToInsert(homeId));
+
+    const bundlePage = await apos.http.get('/bundle', { jar });
+
+    assert(bundlePage.includes(getStylesheetMarkup('public-bundle')));
+    assert(!bundlePage.includes(getStylesheetMarkup('extra-bundle')));
+
+    assert(bundlePage.includes(getScriptMarkup('public-module-bundle')));
+    assert(!bundlePage.includes(getScriptMarkup('extra-module-bundle')));
+    assert(bundlePage.includes(getScriptMarkup('extra2-module-bundle')));
+
+    const childPage = await apos.http.get('/bundle/child', { jar });
+
+    assert(childPage.includes(getStylesheetMarkup('public-bundle')));
+    assert(childPage.includes(getStylesheetMarkup('extra-bundle')));
+
+    assert(childPage.includes(getScriptMarkup('public-module-bundle')));
+    assert(childPage.includes(getScriptMarkup('extra-module-bundle')));
+    assert(!childPage.includes(getScriptMarkup('extra2-module-bundle')));
+  });
+
+  it('should load all the bundles on all pages when the user is logged in', async function () {
+    const user = {
+      ...apos.user.newInstance(),
+      title: 'toto',
+      username: 'toto',
+      password: 'tata',
+      email: 'toto@mail.com',
+      role: 'admin'
+    };
+
+    const jar = apos.http.jar();
+
+    await apos.user.insert(apos.task.getReq(), user);
+
+    await apos.http.post(
+      '/api/v1/@apostrophecms/login/login',
+      {
+        method: 'POST',
+        body: {
+          username: 'toto',
+          password: 'tata',
+          session: true
+        },
+        jar
+      }
+    );
+
+    const homePage = await apos.http.get('/', { jar });
+    assert(homePage.match(/logged in/));
+
+    const bundlePage = await apos.http.get('/bundle', { jar });
+
+    allBundlesAreIncluded(bundlePage);
+
+    await t.destroy(apos);
+  });
+
+  it('should inject modules and nomodules scripts for extra bundles when es5 enabled', async function () {
+    const jar = apos.http.jar();
+
+    const es5Modules = {
+      ...modules,
+      '@apostrophecms/asset': {
+        options: {
+          es5: true
+        }
+      }
+    };
+
+    apos = await t.create({
+      root: module,
+      modules: es5Modules
+    });
+
+    const { _id: homeId } = await apos.page.find(apos.task.getAnonReq(), { level: 0 }).toObject();
+
+    await apos.doc.db.insertMany(pagesToInsert(homeId));
+
+    await apos.asset.tasks.build.task();
+
+    const bundlePage = await apos.http.get('/bundle', { jar });
+
+    assert(bundlePage.includes(getScriptMarkup('public-module-bundle', 'module')));
+    assert(bundlePage.includes(getScriptMarkup('public-nomodule-bundle', 'nomodule')));
+
+    assert(bundlePage.includes(getScriptMarkup('extra2-module-bundle', 'module')));
+    assert(bundlePage.includes(getScriptMarkup('extra2-nomodule-bundle', 'nomodule')));
+  });
 });
+
+function loadUtils () {
+  const publicFolderPath = path.join(process.cwd(), 'test/public');
+
+  const getScriptMarkup = (file, mod) => {
+    const moduleStr = mod === 'module' ? ' type="module"' : ' nomodule';
+
+    return `<script${mod ? moduleStr : ''} src="/apos-frontend/default/${file}.js"></script>`;
+  };
+
+  const getStylesheetMarkup = (file) =>
+    `<link href="/apos-frontend/default/${file}.css" rel="stylesheet" />`;
+
+  const expectedBundlesNames = [ 'extra-module-bundle.js', 'extra2-module-bundle.js', 'extra-bundle.css' ];
+
+  const deleteBuiltFolders = async (publicPath, deleteAposBuild = false) => {
+    await fs.remove(publicPath + '/apos-frontend');
+    await fs.remove(publicPath + '/uploads');
+
+    if (deleteAposBuild) {
+      await fs.remove(path.join(process.cwd(), 'test/apos-build'));
+    }
+  };
+
+  const allBundlesAreIncluded = (page) => {
+    assert(page.includes(getStylesheetMarkup('apos-bundle')));
+    assert(page.includes(getStylesheetMarkup('extra-bundle')));
+
+    assert(page.includes(getScriptMarkup('apos-module-bundle')));
+    assert(page.includes(getScriptMarkup('extra-module-bundle')));
+    assert(page.includes(getScriptMarkup('extra2-module-bundle')));
+  };
+
+  return {
+    publicFolderPath,
+    getScriptMarkup,
+    getStylesheetMarkup,
+    expectedBundlesNames,
+    deleteBuiltFolders,
+    allBundlesAreIncluded
+  };
+}