Introduction
FAQ
Getting Started
Components
Component Basics
Auto Initialization From DOM
Initializing From Templates

Getting started / Installation

Qite.js does not require a build step. It runs directly in the browser. You include it and use it.

Recommended installation

The simplest way to use Qite in a real project is to add it as a git submodule: 

$ git submodule add https://code.qount25.dev/qite/qite-js.git assets/vendor/qite

This keeps Qite versioned inside your repository without copying files around. Then reference it directly from your HTML.

Minimal example

Add this to your page: 

<script src="/assets/vendor/qite/src/qiteinit.js"></script>
<script src="/assets/js/init.js" type="module"></script>

Attach components using data-component 

<div id="root" data-component="MyForm">
    <button data-component="Button" data-roles="submit">Submit</button>
</div>

Then your init.js module should import Qite and any components you use: 

import "/assets/vendor/qite/src/components/button/button_component.js";
import "/assets/js/my_form_component.js";

Qite.init(document.getElementById("root"));

And your my_form_component.js should contain MyFormComponent class: 

import BaseComponent from "/vendor/qite/src/components/base_component.js";
export default class MyFormComponent extends BaseComponent {
    constructor(tree_node) {
        super(tree_node);
        console.log(`MyForm component ${this.cid} initialized`); 
    }
}
Qite.components.MyForm = MyFormComponent; // this line is required

Qite will then scan the subtree, create and attach new MyFormComponent instances to respective DOM-elements automatically.

Styles

Standard Qite components come with CSS files, but you have to include them manually in your CSS or HTML. Of course, you may also just copy the css, edit it, and paste some place else in your app. 

<link rel="stylesheet" href="/assets/vendor/qite/src/components/button/button.css"/>

As was mentioned in the introduction, Qite relies on standard CSS for layout and transitions, so feel free to style your own and standard Qite components any way you like.

Running tests and demos

Qite itself does not require npm to be used in production.

However, if you want to:

  • Run unit tests
  • Open demo pages
  • Work on Qite itself

you will need Node and npm. Once node is installed, you'll want to run this command: 

$ node test/server.js

Then navigate your browser to either:

  • https://localhost:32123 (for unit tests)
  • https://localhost:32123/demo/button/demo.html (for demo of the ButtonComponent, for example)