Skip to main content

Coralite Library

The Coralite library is used for processing and rendering HTML documents with custom elements, templates, and plugins. It provides a structured way to manage document metadata, template paths, plugin configurations, and ignored attributes during rendering.

Table of Contents #

Coralite Constructor #

Initializes a new Coralite instance with configuration options for templates, pages, plugins, and ignore attributes.

Parameters #

Name Type Attribute Description
options Object Required Configuration options for the Coralite constructor.
options.templates string Required The absolute or relative path to the directory containing Coralite templates.
options.pages string Required The absolute or relative path to the directory containing pages to be rendered with the provided templates.
options.plugins CoralitePluginInstance[] Optional An array of plugin instances that extend Coralite's functionality.
options.ignoreByAttribute IgnoreByAttribute[] Optional An array of objects specifying attribute name-value pairs to ignore during document processing. Each object must have a name and value property.

Example Usage #

JavaScript
Code copied!
const coralite = new Coralite({
  templates: './src/templates',
  pages: './src/pages',
  plugins: [myCustomPlugin],
  ignoreByAttribute: [
    { name: 'data-ignore', value: 'true' },
    { name: 'aria-hidden', value: 'true' }
  ]
});

Initialise Method #

Initialises the Coralite instance by loading templates and setting up collections for pages and custom elements.

JavaScript
Code copied!
/**
 * Initialises the Coralite instance.
 * @returns {Promise

Returns #

A promise that resolves when the initialization is complete.

Compile Method #

Compiles specified page(s) by rendering their document content and measuring render time. Processes pages based on provided path(s), replacing custom elements with components, and returns rendered results with performance metrics.

JavaScript
Code copied!
/**
 * Compiles specified page(s) by rendering their document content and measuring render time.
 * Processes pages based on provided path(s), replacing custom elements with components,
 * and returns rendered results with performance metrics.
 *
 * @param {string | string[]} [path] - Path to a single page or array of page paths relative to the pages directory. If omitted, compiles all pages.
 * @return {Promise

Parameters #

Name Type Attribute Description
path string | string[] Optional The path or array of paths to the HTML files relative to the project's pages directory. If omitted, compiles all pages in the pages directory.

Example Usage #

Compile a single page by providing its file path:

JavaScript
Code copied!
coralite.compile('pages/home/index.html')
  .then(documents => {
    console.log('Compilation result:', documents);
  })
  .catch(error => {
    console.error('Error during compilation:', error);
  });

Compiling multiple pages using an array of paths:

JavaScript
Code copied!
coralite.compile(['pages/home/index.html', 'pages/about/index.html'])
  .then(documents => {
    documents.forEach((document, index) => {
      console.log(`Result for page ${index + 1}:`, document);
    });
  })
  .catch(error => {
    console.error('Error during compilation:', error);
  });

Compiling all pages by omitting the path parameter:

JavaScript
Code copied!
coralite.compile()
  .then(documents => {
    console.log('All compiled documents:', documents)
  })
  .catch(error => {
    console.error('Error compiling all pages:', error)
  });

Save Method #

Saves processed documents as HTML files to the specified output directory.

JavaScript
Code copied!
/**
 * Saves processed documents as HTML files to the specified output directory.
 * @param {Array

Parameters #

Name Type Attribute Description
documents Array<CoraliteResult> Required An array of CoraliteResult objects containing rendered document data.
output string Required The base directory path where HTML files will be saved. Must exist on disk.

Example Usage #

JavaScript
Code copied!
coralite.compile()
  .then(async (documents) => {
    // save documents to disk
    await coralite.save(documents, './output')
  })
  .catch(error => {
    console.error('Error compiling all pages:', error)
  })

Render Method #

Renders the provided node or array of nodes using the render function. This method serves as an internal utility to handle the rendering process.

JavaScript
Code copied!
/**
 * Renders the provided node or array of nodes using the render function.
 * This method serves as an internal utility to handle the rendering process.
 * @private
 * @param {CoraliteDocumentRoot | CoraliteAnyNode | CoraliteAnyNode[]} root - The node(s) to be rendered.
 * @returns {string} returns raw HTML
 */
coralite._render(root)

Parameters #

Name Type Description
root CoraliteDocumentRoot | CoraliteAnyNode | CoraliteAnyNode[] The node(s) to be rendered.

Returns #

Raw HTML string from the rendering process.

Get Page Paths Using Custom Element #

Retrieves page paths associated with a custom element template.

JavaScript
Code copied!
/**
 * Retrieves page paths associated with a custom element template.
 *
 * @param {string} path - The original path potentially prefixed with the templates directory.
 * @returns {string[]} An array of page paths linked to the custom element template.
 */
coralite.getPagePathsUsingCustomElement(path)

Parameters #

Name Type Description
path string The original path potentially prefixed with the templates directory.

Returns #

An array of page paths linked to the custom element template.

Add Render Queue #

Adds a page to the current render queue.

JavaScript
Code copied!
/**
 * Adds a page to the current render queue.
 * @param {string|CoraliteCollectionItem} value - The path to a page or a CoraliteCollectionItem to add to the render queue.
 */
coralite.addRenderQueue(value)

Parameters #

Name Type Description
value string | CoraliteCollectionItem The path to a page or a CoraliteCollectionItem to add to the render queue.

Create Component #

Creates a component by processing the provided parameters and returning a rendered HTML element.

JavaScript
Code copied!
/**
 * @param {Object} options
 * @param {string} options.id - id - Unique identifier for the component
 * @param {CoraliteModuleValues} [options.values={}] - Token values available for replacement
 * @param {CoraliteElement} [options.element] - Mapping of component IDs to their module definitions
 * @param {CoraliteDocument} options.document - Current document being processed
 * @param {string} [options.contextId] - Context Id
 * @param {number} [options.index] - Context index
 * @param {boolean} [head=true] - Indicates if the current function call is for the head of the recursion
 * @returns {Promise

Parameters #

Parameter Type Description
options.id string Unique identifier for the component
options.values CoraliteModuleValues Token values available for replacement (default: {})
options.element CoraliteElement Mapping of component IDs to their module definitions (optional)
options.document CoraliteDocument Current document being processed
options.contextId string Context Id (optional)
options.index number Context index (optional)

Returns #

A promise that resolves to a rendered HTML element or void.

Start Building with Coralite!

Use the scaffolding script to get jump started into your next project with Coralite

Copied commandline!