Componentcompilers

Voor alle aangepaste componentcompilers wordt hetzelfde model gehanteerd als voor paginacompilers. Ze kunnen worden gemaakt voor sectielay-outs, aangepaste componenten en inhoudlay-outs.

Tijdens de compilatie wordt met de opdracht cec compile-template gezocht naar het bestand compile.js op dezelfde locatie als het bestand render.js voor de component:

src
- components
  - <uwComponent>
    - assets
      - render.js
      - compile.js

Als dit bestand niet bestaat, wordt de component niet gecompileerd en wordt deze gerenderd tijdens runtime.

Als het bestand wel bestaat, moet hiervoor de interface compile() worden geïmplementeerd, die een Promise-object (toezeggingsobject) retourneert. Het volgende voorbeeld van het veld Starter-Blog-Author-Summary is een aangepaste compiler voor inhoudlay-out:

var fs = require('fs'),
path = require('path'),
mustache = require('mustache');

var ContentLayout = function (params) {
    this.contentClient = params.contentClient;
    this.contentItemData = params.contentItemData || {};
    this.scsData = params.scsData;
};

ContentLayout.prototype = {
    contentVersion: '>=1.0.0 <2.0.0',

    compile: function () {
        var compiledContent = '',
            content = JSON.parse(JSON.stringify(this.contentItemData)),
            contentClient = this.contentClient;

         // Store the id
         content.fields.author_id = content.id;

         if (this.scsData) {
             content.scsData = this.scsData;
             contentType = content.scsData.showPublishedContent === true ? 
'published' : 'draft';            
             secureContent = content.scsData.secureContent;
        } 

        // calculate the hydrate data
        content.hydrateData = JSON.stringify({
            contentId: content.id,
            authorName: content.fields['starter-blog-author_name']
        });

        try {
            // add in style - possible to add to <head> but inline for 
simplicity
            var templateStyle = fs.readFileSync(path.join(__dirname,
'design.css'), 'utf8');
            content.style = '<style>' + templateStyle + '</style>';
 
            var templateHtml = fs.readFileSync(path.join(__dirname,
'layout.html'), 'utf8');
            compiledContent = mustache.render(templateHtml, content);
        } catch (e) {
            console.error(e.stack);
        }

        return Promise.resolve({
            content: compiledContent,
            hydrate: true // note that we want to hydrate this component using the render.js hydrate() function. This is required for when the user clicks on the author
        });
    }
};

module.exports = ContentLayout;