Components

Quoia is built with components. A component can represent a full page of your site, or just a section of it. It's highly recommended that you read through the getting started to get a feel for how components work.

A typical component looks like this: 

// Imports
const { Component } = require('quoia');

/**
 * HomePage
 * Root page of the website
 */
let HomePage = new Component({
  template: './home.html',
  name: 'home'
});

module.exports = HomePage;

A component can take a large number of options:

    Required:

  • template {string} - This is the relative path to the template file for your template. This will normally be an HTML file, but if you use handlebars it can be a .handlebars file.
  • name {string} - This is the internal name of your component. When a component is a subpage, this property will define the folder it goes into. In other words, it will define the URL route of the subpage.

    • Optional:

  • selector {string} - This is the selector for the component. If you are going to import this component, this selector defines the tag to use in your templates as <selector>.

  • imports {Array<Component|ComponentDescriptor>} - This is an array of components to use inside of your template. Importing components is what allows you to reference their selector inside your template.

    You can directly import a component, or you can import a component as a ComponentDescriptor. This is so that you can override values when working with a templating engine. A ComponentDescriptor is just an object that has two properties:

    • component - Component to import
    • values - Values to override for templating
    These values override the values on the component itself.

  • externalStyles {string[]} - An array of relative paths pointing to styles to apply to this component. Note that all styles used this way are scoped to the element, so they won't affect styles of other components. This is accomplished by using a special component id class in all of your styles and elements. If you are working with dynamic elements you will need to put styles in the globalStyles parameter so they are not scoped to the component id class.
  • externalScripts {string[]} - An array of relative paths pointing to scripts to apply to this component. These scripts are all combined into one file, in order they are referenced.
  • values {Object} - This is an object to pass directly to your templating engine, if used.
  • globalStyles {string[]} - This is an array of relative paths pointing to styles to use in this component, and all subpages of this component. These styles are not scoped.
  • globalScripts {string[]} - This is an array of relative paths pointing to scripts to use in this component, and all subpages of this component. These are applied before externalScripts.
  • children {Array<Component|ComponentDescriptor>} - This array defines the subpages of the current component. This is how general routing is set up with child pages.