Compilatoare de componente

Toate compilatoarele de componente personalizate urmează acelaşi model ca şi compilatoarele de pagini şi pot fi create pentru machete de secţiune, componente personalizate şi machete de conţinut.

În timpul compilării, comanda cec compile-template va căuta un fişier compile.js în aceeaşi locaţie ca şi fişierul render.js pentru respectiva componentă:

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

Dacă acest fişier nu există, componenta nu este compilată şi va fi randată la runtime.

Dacă fişierul există, acesta trebuie să implementeze o interfaţă compile(), care returnează o Promisiune. De exemplu, Starter-Blog-Author-Summary care urmează este un compilator de machete de conţinut personalizat:

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;