skatejs / dom-diff Goto Github PK

Library for efficiently diffing and patching virtual and real DOM fragments.

License: MIT License

JavaScript 100.00%

dom-diff's Introduction

Skate

Skate is a functional reactive abstraction over the web component standards as a set of packages that enables you to write small, fast and scalable web components using popular view libraries such as React, Preact and LitHTML.

🌏 Cross-framework compatible components.
⚛️ Render components using your favourite view library, or none at all.
👑 Guided conventions for best-practices when reflecting between, and reacting to attributes, properties and events.
🌟 Full TypeScript support.
📚 Docs https://skatejs.netlify.com.

Getting started

The simplest way to get up and running is to start with a pre-configured element such as @skatejs/element-lit-html.

npm i @skatejs/element-lit-html

Simple example

import Element, { html } from '@skatejs/element-lit-html';

export default class extends Element {
  static get props() {
    return {
      name: String
    };
  }
  render() {
    return html`
      Hello, ${this.name}!
    `;
  }
}

Other examples

Todo list

Cli

There's a CLI to get you up and running: https://skatejs.netlify.com/packages/cli.

$ npm i -g @skatejs/cli
$ skatejs

Polyfills

Skate builds upon the Custom Elements and the Shadow DOM standards. It is capable of operating without the Shadow DOM — it just means you don't get any encapsulation of your component's HTML or styles. It also means that it's up to you to provide a way to project content (i.e. <slot>). It's highly recommended you use Shadow DOM whenever possible.

Though most modern browsers support these standards, some still need polyfills to implement missing or inconsistent behaviours for them.

For more information on the polyfills, see the web components polyfill documentation, emphasis on the caveats.

Browser Support

Skate supports all evergreens and IE11, and is subject to the browser support matrix of the polyfills.

Backers

Support us with a monthly donation and help us continue our activities. Become a backer!

dom-diff's People

Contributors

Stargazers

Watchers

Forkers

mcanthony sirscriptalot lordoftheflies ceckenrode atdixon donaminos frankarensmeier raineconor

dom-diff's Issues

Short circuit diff when comparing constructor / function tag names

Instead of rendering the tree and diffing that, we should only compare to see if the function / constructor is the same as what was given us in the last render.

Falsy JSX values aren't stringified as content.

For example:

<span>{items.length} items</span>

Will not render items.length if it is 0. It must be converted to a string first.

No dist folder in npm module

The dist folder needs to be generated on the published module

Throw helpful error in JSX createElement if no valid tag name can be found.

Diffing whole nodes

Diffing whole nodes can be particularly useful in many circumstances.

Accept string as second argument to mount()

The mount() function should additionally accept a string as the second argument which is a selector of the node to mount to. The first matched node in the document should be used, so document.querySelector(str). If no node is found, then it should throw an error saying as much.

How to build a virtual tree from string of HTML?

In the README, there's a section on building a virtual tree from a DSL:

Constructing a virtual tree

There is a built-in function for creating virtual elements:

import el from 'skatejs-dom-diff/vdom/element';

el('div', null,
  'Hello, ',
  el('span', { style: 'font-weight: bold'}, 'World!')
);

Is there anything like that, but where I can just pass in a string of HTML? For example:

<html><head></head><body>This is just an example</body></html>

I'd like to turn that string into a vtree from data fetched from the server remotely.

I could write something that does this, but it'd take time to make sure the various edgecases that I'm sure exist are properly handled.

Don't pull in Lodash because it adds far too much weight for just using assign().

Lodash brings in a ton of dependencies even when I just require assign by itself. Far too much weight than we need.

Rewrite diffing so that it can be done in a web worker.

Service workers don't have dom access, so we can't pass references to nodes in and out of them. For this reason, we should have a fast way of associating instructions to dom nodes (virtual or real).

Attributes don't link to properties when set as a string.

For examle, when you set the value attribute of an <select> element, the value doesn't propagate to the property thus it doesn't update the selected <option>.

Make virtual dom function interface simpler.

Should accept children as the second argument.
Style as a JSON object should be supported.
Export factories for standard HTML5 elements.

Document fragments when set to content lose their elements when they're inserted into the DOM.

It'd be nice to be able to access the elements within the fragments during the rendering phase.

Web Worker

I'm trying to get this to work in a web worker (diffing 2 trees), ran into a few issues. Happy to send a PR as I get it all worked out.

There's a few of these in the build: https://github.com/skatejs/dom-diff/blob/master/dist/index.js#L301

If we use self instead of window it will work in both contexts.

Second thing are several instanceof Node checks, and since Node is going to be undefined these will throw. Should change those to check if Node is truthy first.

Not all props that begin with "on" should be treated as event listeners.