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: 15 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 (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T17:02:06.000Z (6 months ago)
- Last Synced: 2025-04-12T03:51:51.160Z (15 days ago)
- Topics: angular, html, javascript, jsr, lit, preact, react, solidjs, svelte, typescript, vue
- Language: TypeScript
- Homepage: https://strix.sh
- Size: 545 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Strix 🦉
\
```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)** | [](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)** | [](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)** | [](https://jsr.io/@strix/client) | **[`write`](https://jsr.io/@strix/client/doc/~/write)**
**[`createElement`](https://jsr.io/@strix/client/doc/~/createElement)** | Client Modules |
### 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)!
```
### Post-processing with ID
```javascript
import { id } from "@strix/attr"
const canvasApp = html``.then(({ myCanvas }) => {
const ctx = myCanvas.getContext("2d");
// ...
})
```
### License
Strix is MIT Licensed.