Εργαλεία μεταγλώττισης συστατικών στοιχείων

Όλα τα προσαρμοσμένα εργαλεία μεταγλώττισης συστατικών στοιχείων ακολουθούν το ίδιο μοντέλο με τα εργαλεία μεταγλώττισης σελίδων και μπορούν να δημιουργηθούν για διατάξεις ενότητας, προσαρμοσμένα συστατικά στοιχεία και διατάξεις περιεχομένου.

Κατά τη μεταγλώττιση, η εντολή cec compile-template θα αναζητήσει ένα αρχείο compile.js στην ίδια τοποθεσία με το αρχείο render.js για το συστατικό στοιχείο:

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

Εάν αυτό το αρχείο δεν υπάρχει, το συστατικό στοιχείο δεν μεταγλωττίζεται και θα αποδίδεται κατά τον χρόνο εκτέλεσης.

Εάν το αρχείο υπάρχει, χρειάζεται να υλοποιήσει ένα περιβάλλον εργασίας compile(), το οποίο επιστρέφει μια τιμή Promise. Για παράδειγμα, το ακόλουθο Starter-Blog-Author-Summary είναι ένα προσαρμοσμένο εργαλείο μεταγλώττισης διάταξης περιεχομένου:

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;