Gluebert

new Gluebert() instance

Gluebert instance

The Gluebert instance central where all the Module Signatures and Data Signatures are stored.

Optionally, you can also define a Template Engine and/or JSON Schema Validator for Cuustom Elements.

Syntax

new Gluebert(ModuleSignatures, DataSignatures, options);

Parameters

Gluebert takes the follwing parameters:

Name Description Type Required
ModuleSignatures List of ModuleSignatures Array false
DataSignatures List of DataSignatures Array false
options object with options Object false

ModuleSignatures

A list of ModuleSignatures is a simple array. For example:

import { Gluebert } from 'gluebert';
import { ModuleSignature } from 'gluebert/module';

// Sample Modules, they actually don't do anything,
// but illustrating how you could list up your module signatures
const MODULES = [
    new ModuleSignature('example-module', '.example-selector'),
    new ModuleSignature('second-module', '.second-module'),
];

const gluebert = new Gluebert(MODULES);
gluebert.start();

DataSignatures

A list of DataSignatures is a simple array. For example:

import { Gluebert } from 'gluebert';
import { DataSignature } from 'gluebert/data';

// Sample DataSignatures, they actually don't do anything,
// but illustrating how you could list up your DataSignatures
const DATA = [
    new DataSignature('example-data'),
    new DataSignature('second-data-pool'),
];

const gluebert = new Gluebert([], DATA);
gluebert.start();

options

You can pass in an options object with the following Keys:

Key Description Type Default
elementSleepingClass Class that should be added, when element instance is prepared, but not visible in the viewport string gb-ready
elementLoadingClass Class that should be added, when element instance is loading assets and controllers string gb-ready
elementReadyClass Class that should be added, when element instance has loaded string gb-ready
import { Gluebert } from 'gluebert';

const OPTIONS = {
    elementSleepingClass: 'element-is-sleeping',
    elementLoadingClass: 'element-is-loading',
    elementReadyClass: 'element-is-ready',
};

const gluebert = new Gluebert([], [], OPTIONS);
gluebert.start();

Methods

A gluebert instance exposes the following methods:

Name Description
setTemplateEngine Instance of a template engine
setSchemaValidator Instance of a template engine
start Start Gluebert

.setTemplateEngine()

A detailed description of template engines you find later in the getting-started-guide.

Example:

import { Gluebert } from 'gluebert';
import { TwigTemplate } from 'gluebert/templates'; // adapter for twig template engine
import Twig from 'twig'; // npm install twig --save (separate package)

const gluebert = new Gluebert()
    .setTemplateEngine(new TwigTemplate(Twig));

.setSchemaValidator()

A detailed description you can find at the Custom Elements-Section you find later in the getting-started-guide.

If you add a validator, all data passed to create a new element on the fly will be validated and only executed if they match.

Example:

import { Gluebert } from 'gluebert';
import ajv from 'ajv'; // npm install ajv --save (separate package)

const gluebert = new Gluebert()
    .setSchemaValidator(ajv);

.start()

With .start(), gluebert will run and start observe and bind. This method takes no parameter.

Example:

import { Gluebert } from 'gluebert';

const gluebert = new Gluebert()
    .start();

References and Examples

What Where
API Reference api.gluebert.com/Gluebert.html
Example with DynamicImport github.com/wildhaber/gluebert/~/app.js
Example integration with Polyfills github.com/wildhaber/gluebert/~/footer.html