Strix 🦉

import { $, h as html } from '@strix/std';
import { on } from '@strix/attr';


export default function() {

    const count = $(0);

    return html`
        <h1>${count}</h1>
        <button ${{ [on.click]: () => count.$++ }}>
            Increment
        </button>
    `;
}

Strix is a ~3KB selfish library to provide some weirder, but simpler ways to building web interface.
Visit strix.sh for more infomation.

Installation

On Deno (version 1.46 or newer)

deno -WER https://strix.sh

Demo

Working demo is out now at StackBlitz and Codepen.

Releases

	Version	Exports	Description
std		h $	Standard Library
attr		on at css	Attribute Modules
client		write createElement	Client Modules

Components and Fragments

// ...

const justFragment = html`
    <label>I am fragment</label>
    <label>with components!</label>
    ${App("double-click me!")}
`;

Styling, Event-listening

// ...

import { on, css } from "@strix/attr"

function WithAttributes() {
    return html`
        <button ${{
            [css.color]: "red",
            [on.click]: () => alert("clicked!")
        }}>
            click me...
        </button>
    `
}

Create Class

// ...

const mainButton = {
    [css]: {
        backgroundColor: "blue",
        color: "white",
        borderRadius: "2px"
    },
}

function AppWithClass() {

    return html`
        <button ${mainButton}>
            I am main button!
        </button>

        <button ${mainButton} ${{
            [css.color]: "yellow"
        }}>
            and it is overridable!
        </button>
    `
}

Programmable Attributes

// ...

const onDoubleClick = $((callbackFn, ref) => {
    ref.addEventListener('dblclick', callbackFn, { passive: true });
});

function App(defaultText) {
    return html`
        <textarea ${{ [onDoubleClick]: ({ target: { value } }) => console.log(value) }}>
            ${defaultText}
        </textarea>
    `;
}

Create Element

// ...

import { createElement } from '@strix/client';

document.body.append(...createElement(App()));

Unsafe-Proof

const username = "<script>alert(0)</script>";

const temp = html`<label>username is ${username}!</label>`

// username is <script>alert(0)</script>!

Post-processing with ID

import { id } from "@strix/attr"

const canvasApp = html`<canvas ${id.myCanvas}></canvas>`.then(({ myCanvas }) => {
    const ctx = myCanvas.getContext("2d");
    // ...
})

License

Strix is MIT Licensed.