Code Monkey home page Code Monkey logo

uix-dom's Introduction

UIX DOM

This library implements a standalone DOM subset based on 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

Loading the DOM Context

To get started, import the context from "mod.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.

import { enableDatexBindings } from "./datex-bindings/mod.ts";
const domUtils = enableDatexBindings(context);

Enabling JSX

import { enableJSX } from "./jsx/mod.ts";
const {jsx, jsxs, Fragment} = enableJSX(domUtils, context);

uix-dom's People

Contributors

benstre avatar jonasstrehle avatar

Stargazers

 avatar

uix-dom's Issues

Fix JSX typing

There are still a few TS errors when using templates etc.

Add stylesheet attribute

The stylesheet attribute can be used as a shorthand for scoped link tags:

Without the stylesheet attribute:

// entrypoint.tsx
export default 
  <div>
     <link rel="stylesheet" href="./MyComp.scss"/>
     <h1>Title</h1>
  </div>
// MyComp.scss
@scope {
   h1 {
      color: purple;
   }
}

With the stylesheet attribute:

// entrypoint.tsx
export default  
  <div stylesheet="./MyComp.scss">
     <h1>Title</h1>
  </div>
// MyComp.scss
h1 {
  color: purple;
}

This also requires a modification in the UIX server to return a modified stylesheet wrapped in @scope{} when requesting a URL like /common/MyComp.scss?scope

Implement missing special HTMLElement classes (in deno_dom)

A lot of native HTMLElement implementations are still missing in our fork of deno_dom.
The missing elements can be found in deno-dom/src/dom/types/tags.ts (all class names that are commented out).

To implement a new HTMLElement sub class (e.g. HTMLXElement), follow these steps (the order is important):

  1. Make sure you have the latest version of uix with all submodules (uix-dom, deno_dom) recursively loaded
  2. Create a new file called html-x-element.ts in deno-dom/src/dom/html-elements
  3. Create a class that extends HTMLElement and add the required additional properties and methods following the HTML spec
    import { HTMLElement } from "../elements/html-element.ts";
    
    export class HTMLXElement extends HTMLElement {
       // custom implementation ...
    }
  4. Export the newly created file from src/api.ts:
    export * from "./dom/html-elements/html-x-element.ts"
  5. Add the correct type to deno-dom/src/dom/types/tags.ts (remove the element type that is commented out):
    import { HTMLXElement } from "../html-elements/html-x-element.ts";
    
    export interface HTMLElementTagNameMap {
      "x": HTMLXElement
    }
  6. Add an element tag name mapping in uix-dom/dom/mod.ts
    elements.define("X", denoDom.HTMLXElement)
  7. Add a global type definition in uix/src/app/dom-global.ts:
    const HTMLInputElement: typeof api.HTMLXElement
    type HTMLInputElement = api.HTMLXElement

Caller Module is not correctly inferred for jsxs calls

Currently, the initElement function always uses getCallerInfo()[1] to determine the caller location.
When a JSX is created with a jsxs() call instead of jsx() there is another indirection leading to an additional stack entry that needs to be skipped.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.