https://github.com/strixhq/strix

🦉 Zero-Magic Web Library 🦉
https://github.com/strixhq/strix

angular html javascript jsr lit preact react solidjs svelte typescript vue

Last synced: 26 days ago
JSON representation

🦉 Zero-Magic Web Library 🦉

• Host: GitHub
• URL: https://github.com/strixhq/strix
• Owner: strixhq
• License: mit
• Created: 2024-09-08T05:29:09.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-27T14:07:43.000Z (about 1 month ago)
• Last Synced: 2024-10-01T04:03:04.067Z (about 1 month ago)
• Topics: angular, html, javascript, jsr, lit, preact, react, solidjs, svelte, typescript, vue
• Language: TypeScript
• Homepage: https://strix.sh
• Size: 519 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Strix 🦉


![GitHub Repo stars](https://img.shields.io/github/stars/strixhq/strix)

![GitHub License](https://img.shields.io/github/license/strixhq/strix)\

![strix std JSR Version](https://img.shields.io/jsr/v/%40strix/std?logo=jsr&label=%40strix%2Fstd&labelColor=%2309303F&color=%23EDD82A&link=https%3A%2F%2Fjsr.io%2F%40strix%2Fstd)

![strix attr JSR Version](https://img.shields.io/jsr/v/%40strix/attr?logo=jsr&label=%40strix%2Fattr&labelColor=%2309303F&color=%23EDD82A&link=https%3A%2F%2Fjsr.io%2F%40strix%2Fattr)

![JSR Version](https://img.shields.io/jsr/v/%40strix/client?logo=jsr&label=%40strix%2Fclient&labelColor=%2309303F&color=%23EDD82A&link=https%3A%2F%2Fjsr.io%2F%40strix%2Fclient)

```javascript

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

import { on } from '@strix/attr';

export default function() {

    const count = $(0);

    return html`

        
${count}

         count.$++ }}>

            Increment

        

    `;

}

```


**Strix** is a ~3KB selfish library to provide some weirder, but simpler ways to building web interface.\

Visit [strix.sh](https://strix.sh) for more infomation.

### Installation

On Deno (version 1.46 or newer)

```sh

deno -WER https://strix.sh

```

### Demo

Working demo is out now at **[StackBlitz](https://stackblitz.com/edit/web-platform-nqktqc?devToolsHeight=33&file=counter.js)** and **[Codepen](https://codepen.io/ihasq/pen/wvLRzyd?editors=0011)**.

### Releases

|                                                                   | Version                                                                                                                                              | Exports                                                                                                                                                                                   | Description      |

| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |

| **[std](https://github.com/ihasq/strix/tree/main/pkg/std)**       | [![JSR Version](https://img.shields.io/jsr/v/%40strix/std?logo=jsr&labelColor=%23083344&color=%23F7DF1E&label=%20)](https://jsr.io/@strix/std)       | **[`h`](https://jsr.io/@strix/std/doc/~/h)** **[`$`](https://jsr.io/@ihasq/esptr/doc/~/$)** | Standard Library |

| **[attr](https://github.com/ihasq/strix/tree/main/pkg/attr)** | [![JSR Version](https://img.shields.io/jsr/v/%40strix/attr?logo=jsr&labelColor=%23083344&color=%23F7DF1E&label=%20)](https://jsr.io/@strix/attr) |**[`on`](https://jsr.io/@strix/attr/doc/~/on)** **[`at`](https://jsr.io/@strix/attr/doc/~/at)** **[`css`](https://jsr.io/@strix/attr/doc/~/css)** | Attribute Modules |

| **[client](https://github.com/ihasq/strix/tree/main/pkg/client)** | [![JSR Version](https://img.shields.io/jsr/v/%40strix/client?logo=jsr&labelColor=%23083344&color=%23F7DF1E&label=%20)](https://jsr.io/@strix/client) | **[`write`](https://jsr.io/@strix/client/doc/~/write)**
**[`createElement`](https://jsr.io/@strix/client/doc/~/createElement)**                                                                                                                   | Client Modules   |

![badge](./web/page/badge.svg)

### Components and Fragments

```javascript

// ...

const justFragment = html`

    I am fragment

    with components!

    ${App("double-click me!")}

`;

```

### Styling, Event-listening

```javascript

// ...

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

function WithAttributes() {

    return html`

         alert("clicked!")

        }}>

            click me...

        

    `

}

```

### Create Class

```javascript

// ...

const mainButton = {

    [css]: {

        backgroundColor: "blue",

        color: "white",

        borderRadius: "2px"

    },

}

function AppWithClass() {

    return html`

        

            I am main button!

        

        

            and it is overridable!

        

    `

}

```

### Programmable Attributes

```javascript

// ...

const onDoubleClick = $((callbackFn, ref) => {

    ref.addEventListener('dblclick', callbackFn, { passive: true });

});

function App(defaultText) {

    return html`

         console.log(value) }}>

            ${defaultText}

        

    `;

}

```

### Create Element

```javascript

// ...

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

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

```

### Unsafe-Proof

```javascript

const username = "alert(0)";

const temp = html`username is ${username}!`

// username is alert(0)!

```

### License

Strix is MIT Licensed.