Code samples for exaltjs.com

build-components.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("hello-world")
export class HelloWorld extends Component {

    render() {
        return html`
            <h1>Hello World!</h1>
        `;
    }
}

build-your-own-toolchain.js

export default ({ name, input, toolchainOptions }) => {

    return {
        dev: () => {},
        start: () => {},
        build: () => {}
    };
};

code-splitting-routes.js

import { html } from "@exalt/core";
import "@exalt/router/exalt-route";

html`<exalt-route url="/" component="home-page" onresolve=${() => import("@pages/home-page")} />`;

component-attributes.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("say-hello")
export class SayHello extends Component {

    render({ name }) {
        return html`
            <h1>Hello ${name}!</h1>
        `;
    }
}

component-lifecycle.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("hello-world")
export class HelloWorld extends Component {

    /* render the components html */
    render() {}

    /* called when the component is added to the DOM */
    mount() {}

    /* called when the component is removed from the DOM */
    unmount() {}

    /* called when a component's state or attributes are updated */
    onUpdate(key, value) {}

    /* called when a component is about to be updated */
    shouldUpdate(key, value) {}
}

dom-manipulation.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("hello-world")
export class HelloWorld extends Component {

    header = super.createRef();

    render() {
        return html`
            <h1 ref="header">Hello World!</h1>
        `;
    }

    mount() {
        this.header.innerHTML = "Goodbye World!";
    }
}

exalt-link.html

<exalt-link url="/about">
    <a>About<a>
</exalt-link>

exalt-redirect.html

<exalt-redirect url="/redirected-route" />

exalt-route.html

<exalt-router>
    <exalt-route url="/" component="home-page" />
    <exalt-route url="/about" component="about-page" />
    <exalt-route url="/about/:topic?" component="about-page" />
    <exalt-route component="not-found" />
</exalt-router>

exalt-router-programatically.js

import { ExaltRouter } from "@exalt/router";

ExaltRouter.navigate("/about");

loading-your-app.js

import { loadBundle } from "@exalt/ssr";
import path from "path";

const bundlePath = path.join(process.cwd(), "dist", "index.js");

/* loadBundle returns the bundle exports, in this case it returns the App component */
const { App } = loadBundle(bundlePath);
const component = new App();

reactive-properties.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";

@define("my-clock")
export class Clock extends Component {

    date = super.reactive(new Date());

    render() {
        return html`
            <h1>Current Time: ${this.date}</h1>
        `;
    }

    mount() {
        this.timer = setInterval(() => this.date = new Date(), 1000);
    }

    unmount() {
        clearInterval(this.timer);
    }
}

rendering-your-app.js

import { loadBundle, renderToString } from "@exalt/ssr";
import path from "path";

const bundlePath = path.join(process.cwd(), "dist", "index.js");

/* loadBundle returns the bundle exports, in this case it returns the App component */
const { App } = loadBundle(bundlePath);
const html = renderToString(new App(), (currentNode) => {
    console.log(`Rendering: ${currentNode.nodeName}`);
});

console.log(html);

store-api.js

import { Component, html, createStore } from "@exalt/core";
import { define } from "@exalt/core/decorators";

/* create the store */
const store = createStore({ 
    count: 0,

    increment() {
        this.count++
    }
});

@define({ tag: "my-container", connect: [store] })
export class Counter extends Component {

    render() {
        return html`
            <button onclick=${() => store.increment()}>Clicked: ${store.count}</button>
        `;
    }

}

styling-components.js

import { Component, html } from "@exalt/core";
import { define } from "@exalt/core/decorators";
import styles from "./hello-world.css";

@define({ tag: "hello-world", styles: [styles] })
export class HelloWorld extends Component {

    render() {
        return html`
            <h1>Hello World!</h1>
        `;
    }
}

writing-templates-spread.js

import { html } from "@exalt/core";

const details = {
    name: "John Doe",
    age: 34
};

html`<user-details ...=${details} />`;

writing-templates.js

import { html } from "@exalt/core";

/* bind an event */
html`<button onclick=${() => alert("I was clicked!")}>Click Me!</button>`;

/* bind data as attributs */
const items = [
    { id: Math.random(), value: "1" },
    { id: Math.random(), value: "2" }
];

html`<list-view items=${items} />`;