https://github.com/unyt-org/uix-dom

DOM Implementation for UIX, running in the browser and in deno, supports DATEX bindings
https://github.com/unyt-org/uix-dom

dom reactive-programming server-side-rendering uix unyt

Last synced: 3 months ago
JSON representation

DOM Implementation for UIX, running in the browser and in deno, supports DATEX bindings

• Host: GitHub
• URL: https://github.com/unyt-org/uix-dom
• Owner: unyt-org
• Created: 2023-09-29T00:53:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-08T13:18:05.000Z (3 months ago)
• Last Synced: 2024-11-08T14:17:44.179Z (3 months ago)
• Topics: dom, reactive-programming, server-side-rendering, uix, unyt
• Language: TypeScript
• Homepage:
• Size: 411 KB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# UIX DOM

This library implements a standalone DOM subset based on [Deno DOM](https://github.com/b-fuze/deno-dom) that can be used in deno or in the browser.

UIX DOM also supports DATEX bindings for DOM elements from the UIX DOM library, as well as for normal browser DOM elements.

![Example 1](./res/image1.png)

## Loading the DOM Context

To get started, import the context from "mod.ts":

```ts

import * as context from "../uix-dom/dom/mod.ts";

```

This context includes definitions for all Elements, as well as a `document` object.

It can be used interchangably with the `globalThis` object in the browser.

## Enabling DATEX bindings

By enabling DATEX bindings for a `DOMContext` object,

the corresponding DATEX type definitions are mapped to the DOM context

and reactivity is enabled.

```ts

import { enableDatexBindings } from "./datex-bindings/mod.ts";

const domUtils = enableDatexBindings(context);

```

## Enabling JSX

```ts

import { enableJSX } from "./jsx/mod.ts";

const {jsx, jsxs, Fragment} = enableJSX(domUtils, context);

```