https://github.com/smikhalevski/flyweight-dom

🍃 The extremely fast DOM implementation in just 4 kB gzipped.
https://github.com/smikhalevski/flyweight-dom

dom typescript

Last synced: 4 days ago
JSON representation

🍃 The extremely fast DOM implementation in just 4 kB gzipped.

• Host: GitHub
• URL: https://github.com/smikhalevski/flyweight-dom
• Owner: smikhalevski
• License: mit
• Created: 2022-08-25T19:40:57.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-04-02T20:10:04.000Z (over 1 year ago)
• Last Synced: 2024-10-12T23:00:07.250Z (about 1 month ago)
• Topics: dom, typescript
• Language: TypeScript
• Homepage: https://smikhalevski.github.io/flyweight-dom/
• Size: 705 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Flyweight DOM 🍃 [![build](https://github.com/smikhalevski/flyweight-dom/actions/workflows/test.yml/badge.svg?branch=master&event=push)](https://github.com/smikhalevski/flyweight-dom/actions/workflows/test.yml)

The extremely fast DOM implementation.

- DOM can be extended with custom nodes;

- Low memory consumption.

- Zero dependencies;

- [4 kB gzipped;](https://bundlephobia.com/package/flyweight-dom)

```sh

npm install --save-prod flyweight-dom

```

# Usage

🔎 [API documentation is available here.](https://smikhalevski.github.io/flyweight-dom/modules.html)

The implementation provides classes for all DOM nodes:

```ts

import { Element } from 'flyweight-dom';

const element = new Element('div').append(

  'Hello, ',

  new Element('strong').append('world!')

);

element.classList.add('red');

element.getAttribute('class');

// ⮕ 'red'

```

You can create custom nodes by extending [`Node`](https://smikhalevski.github.io/flyweight-dom/interfaces/Node.html)

class or its subclasses:

```ts

import { Element, Node } from 'flyweight-dom';

class MyNode extends Node {}

new Element('div').appendChild(new MyNode());

```

Or extend your already existing classes using a declaration merging:

```ts

// Your existing class

class MyClass {}

// Merge declarations

interface MyClass extends Node {}

// Extend the prototype

Node.extend(MyClass);

new Element('div').append(new MyClass());

```

## Performance considerations

For better performance, prefer `nextSibling` and `previousSibling` over `childNodes` and `children` whenever possible.

```ts

for (let child = node.firstChild; child !== null; child = child.nextSibling) {

  // Process the child 

}

```

When you read the `childNodes` or `children` properties for the first time an array of nodes is created and then stored

on the node instance. Later when you modify child nodes using `appendChild`, `removeChild` or any other method, these

arrays are updated.