Home

Awesome

heresy logo heresy

Don't simulate the DOM. Be the DOM.

<sup>Social Media Photo by Alexey Zhavoronkov from a2.agencylash</sup>

WebReflection status License: ISC Build Status Greenkeeper badge

React-like Custom Elements via the V1 API built-in extends. Also available for SSR.

📣 Community Announcement

Please ask questions in the dedicated discussions repository to help the community around this project grow ♥

V1 Breaking Changes

Please be sure you understand the breaking changes landed in lighterhtml.

What is this heresy ?

This project is some sort of answer to these major trends:

Borrowing concepts and patterns from various libraries, heresy enables custom elements as you've never seen before:

Custom hooks

It is possible to define your own hooks through the defineHook(name, fn) utility.

import {defineHook} from 'heresy';

defineHook('useCounter', ({useRef}) => () => {
  const counter = useRef(0);
  return counter.current++;
});

// using the useCounter in a render
const Comp = {
  extends: 'span',
  render({useCounter}) {
    const count = useCounter();
    this.textContent = count;
  }
};

Please note that name must be unique, so if you'd like to be sure there won't ever be conflicts, use a Symbol instead of a string.

import {defineHook} from 'heresy';

const uso = Symbol();

defineHook(uso, ({useState}) => () => {
  const [current, update] = useState({});
  return [current, state => {
    update({...current, ...state});
  }];
});


const Comp = {
  extends: 'p',
  render({[uso]: useStateObject}) {
    const [state, update] = useStateObject();
    // do something with the state
  }
};

Usage in a nutshell

A component can be defined through both classes or raw object literals.

// <Item props=${{name}} />

// as object literal
const literal = {
  name: 'Item',
  extends: 'li',  // will extends li constructor
  render() {
    this.html`my name is ${this.props.name}`;
  }
};

// as class
class Item extends HTMLLiElement {
  static name = 'Item';   // necessary if code gets transpiled
  static tagName = 'li';  // necessary to indicate the kind
  render() {
    this.html`my name is ${this.props.name}`;
  }
}

While both the name and tag it represents, can be defined within the class or object, it's rather suggested to pre-define at least the tag it's going to represent, but not the name.

const literal = {
  extends: 'li',
  render() { this.html`my name is ${this.props.name}`; }
};

// in this way it's possible to define the name only via
define('Item', literal);

Alternatively, it is possible to not include name and tag, defining these via the Comp:tag or Comp<tag> convention.

class Item extends HTMLLiElement {
  render() { this.html`my name is ${this.props.name}`; }
}

define('MyItem<li>', Item);
// OR
define('MyItem:li', Item);

Which tag ?

The beauty and power of the built-in extends of custom elements is that you can literally represent any tag you want/need.

However, if you'd like to simply extend a non-standard tag, you can always fall back to the element tag kind, which will extend HTMLElement, and represent the component through its retrieved <hyphen-ized-heresy> name.

// either as object
const Component = {
  extends: 'element',
  onconnected() { console.log(this.outerHTML); }
};

// or as class
class Component extends HTMLElement {
  static get tagName() { return 'element'; }
  onconnected() { console.log(this.outerHTML); }
};

const MyElement = heresy.define('MyElement', Component);
document.body.appendChild(MyElement.new());
// in console: <my-element-heresy></my-element-heresy>

Local components in a nutshell

While define(...) will use the global registry to define the specific declarative name, making it a good practice to namespace it (i.e. FWDatePicker, StencilForm etc.), it is possible to define local components through the usage of includes, also aliased as contains.

Such a list will still pass through the registry, so that local components are fully valid custom elements that never name-clash with anything else, so that it's easier to split complex components into various sub-modules and only define their main container globally.

The following example has been rewritten with extra details and is live on codepen.

import {define, ref, render, html} from 'heresy';

import {User, Pass} from './form/ui.js';
import {validate, switchPage} from './form/utils.js';

const Form = {
  extends: 'form',
  includes: {User, Pass},
  oninit() {
    // refs can be declared upfront or inline (see render)
    this.user = ref();
    this.addEventListener('submit', this);
  },
  onsubmit(event) {
    event.preventDefault();
    if (validate(this.user.current, this.pass.current))
      fetch('/log-in').then(switchPage).catch(console.error);
  },
  // render is invoked automatically on connected
  // if no connected, or callback is explicitly defined
  render() {
    this.html`
    <label>Your name: <User ref=${this.user} name="user"></label>
    <label>Your pass: <Pass ref=${ref(this, 'pass')} name="pass"></label>
    `;
  }
};

define('SiteLogin', Form);
render(document.body, html`<SiteLogin/>`);

The includes or contains property, if present, must be a map of "Name": Component pairs, where the name could also define the tag type, like it does with define(...).

In the previous example both User and Pass are components extending input, so that the tag name is not necessary, but {"User<button>": User}, or {"User:button": User}, would eventually be valid as a local component.

How can components be local?

The main difference with local components is that their registry name gets polluted with a unique identifier, so that instead of <input is="user-heresy"> the outcome would be <input is="user-xxx-heresy">. The unique identifier in between (xxx) is added in cases where a component can be defined or used together with many other components, so that name clashing won't ever be an issue.

Class and object API summary

A similar example is live in Code Pen.

import {define, html, render} from 'heresy';

// classes or objects, to define components, are the same
class MyButton extends HTMLButtonElement {

  // (optional) static fields to define the component/class name or tag
  // use define('MyButton:button', MyButton); if you want to avoid this
  static get name() { return 'MyButton'; }
  static get tagName() { return 'button'; }

  // (optional) static callback to style components (once per definition)
  //            when there are local components, it will receive also these
  //            in definition order
  static style(MyButton) {
    // the component could be scoped so that
    // to be sure the selector is the right one
    // always use the received component to define its styles
    return `${MyButton} {
      border: 2px solid black;
    }`
  }

  // (optional) attributes that can either be true or false once accessed
  // reflected on the DOM as either present, or not
  static get booleanAttributes() { return ['checked']; }

  // (optional) store any value directly and dispatch `on${name}` on changes
  static get mappedAttributes() { return ['data']; }
  // if `ondata(event){}` is defined, event.detail will have the new value

  // (optional) native Custom Elements behavior with changes dispatched
  // through the onattributechanged callback
  static get observedAttributes() { return ['name', 'age']; }

  // (optional) event driven initialization that will happen only once
  // the ideal constructor substitute for any sort of one-off init
  // this is triggered only once the component goes live, never before *
  // * unless explicitly dispatched, of course
  oninit(event) {}

  // (optional) event driven lifecycle methods, added automatically when
  // no Custom Elements native methods such as connectedCallback, and others
  // have been explicitly set as methods
  onconnected(event) {}
  ondisconnected(event) {}
  onattributechanged(event = {attributeName, oldValue, newValue}) {}

  // (optional) populate this custom element content
  //            if the signature has at least one argument,
  //            as in render({useState, ...}),
  //            the render will be bound automatically
  //            with hooks capabilities
  render() {
    // this.html or this.svg are provided automatically
    this.html`Click ${this.props.name}!`;
  }

  // (optional) automatically defined to trigger
  // this[`on${event.type}`](event);
  handleEvent(event) {}

  // (optional) automatically defined to return this.getAttribute('is')
  get is () {}
}

// components can be defined both as classes or objects
const Generic = {

  // both name and extends are optional
  // if defined via define('Name:extends', object)
  name: 'Generic',
  extends: 'element', // or div, p, etc

  // statics are defined on the derived class
  style(selector) {},
  observedAttributes: [],
  booleanAttributes: [],

  // all other events supported too
  oninit() {}
};

// define the custom element via class (requires static name and tagName)
define(MyButton);

// or define the custom element via Component:tag
define('MyButton<button>', MyButton);

// populate some node
render(document.body, html`<MyButton props=${{name: 'Magic'}} />`);

setTimeout(() => console.log(document.body.innerHTML));
// <button is='my-button-heresy'>Click Magic!</button>

Compatibility

The test page uses and describes a few techniques to address all browsers, from IE9 to latest evergreen.

The following list describes the heresy's compatibility break down:

Broader wider compatibility in a nutshell

<script>
  // Patch for IE9 and IE10 (browsers with no WeakMap)
  // frozen template literals cannot be addressed by common WeakMap polyfills
  // this patch avoid Object.freeze to break when template literals are passed to WeakMaps
  this.WeakMap||!function(O,f){f=O.freeze;O.freeze=function(o){return 'raw' in o?o:f(o)}}(Object);
</script>
<script>
  // Patch for all IE, Edge, and older browsers without customElements
  // completely ignored/irrelevant for any other modern browser
  // https://github.com/WebReflection/document-register-element
  this.customElements||document.write(
    '<script src="https://unpkg.com/document-register-element"><\x2fscript>'
  );
</script>
<script defer src="https://unpkg.com/@ungap/custom-elements-builtin">/*
  1K Patch for Safari/WebKit
  https://github.com/ungap/custom-elements-builtin
*/</script>

Alternatively, you can use this minified version to never download the Safari-only polyfill.

<script>if(this.customElements)try{customElements.define('built-in',document.createElement('p').constructor,{'extends':'p'})}catch(a){document.write('<script src="//unpkg.com/@ungap/custom-elements-builtin"><'+'/script>')}else document.write('<script src="//unpkg.com/document-register-element"><'+'/script>');</script>

Concept

Custom Elements built-ins are likely the best thing we have to build components the way we want to.

Instead of using a non standard indirection as JSX is, we can use the power of domtagger, the hyperHTML and lighterhtml tag engine, to replace once any <DefinedElement /> with or without nested nodes.

The Custom Elements V1 API provides enough primitives to intercept any sort of attribute (i.e. the props in the example), but also react to events such connectedCallback or disconnectedCallback and attributeChangedCallback.

Mixed up with built-in extends in a way that any component is a real thing on the DOM instead of a facade of itself, heresy makes the creation of apps, from simple to complex, a no-brainer: define the content through this.html or this.svg and that's it.

When any class is defined, it's not just necessarily a useless HTMLElement, it can be pretty much any kind of element.

The following example is live in Code Pen.

import {define, ref, html, render} from 'heresy';

// a div
define(class Div extends HTMLDivElement {
  static get name() { return 'Div'; }
  static get tagName() { return 'div'; }
});

// a paragraph
define('P<p>', class extends HTMLParagraphElement {});

// a h1
define('H1<h1>', class extends HTMLHeadingElement {});

// render them all + ref example
const refs = {};

// refs can be created right away
refs.div = ref();

// or within the render
render(document.body, html`
  <Div ref=${refs.div}>
    <H1 ref=${ref(refs, 'h1')}>Hello there</H1>
    <P>This is how custom elements look via heresy.</P>
    <P>Isn't this awesome?</P>
  </Div>
`);

console.log(refs.h1.current); // the H1 instance/node

Local components live example

You can see the following example live.

// p.js - could be an object too
export default class extends HTMLParagraphElement {
  static get tagName() { return 'p'; }
  oninit() {
    console.log(this.outerHTML);
  }
};

// first.js - it has a local P
import P from './p.js';
export default {
  extends: 'div',
  includes: {P},  // with its own definition
  render() {
    this.html`<P>first</P>`;
  }
};

// second.js - it uses P again as local
import P from './p.js';
export default {
  extends: 'div',
  includes: {P},  // with its own definition
  render() {
    this.html`<P>second</P>`;
  }
};

// index.js
const {define, render, html} = heresy;

import First from './first.js';
import Second from './second.js';

const Div = define('Div', {
  extends: 'div',
  includes: {First, Second},
  render() {
    this.html`<First/><Second/>`;
  }
});

// either
render(document.body, html`<Div/>`);
// or even document.body.appendChild(Div.new());

CSS - The components style precedence

Components are defined once per kind, and the styles of local components are appended live before the outer component, giving it the ability to force extra styles when needed, or improve the specificity for a specific component/style when used within some other.

const Div = define('Div', {
  extends: 'div',
  includes: {First, Second},
  // will receive the selectors for self and included components
  style(Div, First, Second) {
    // since outer component style is injected after
    // it is possible to eventually overwrite nested
    // components through higher priority / specificity
    return `
      ${Div} { font-size: 16px; }
      ${Div} > ${First} { padding: 0; }
      ${Div} ${Second} { font-weight: smaller; }
    `;
    console.log([Div, First, Second].join(', '));
  },
  render() {
    this.html`<First/><Second/>`;
  }
});

You can see what the style(...) receives reading the console in this live demo.

CSS - How to query or style all globally defined components

Every global built-in extend will have a -heresy suffix to ensure both that the Custom Element can be registered, but also grant a common pattern to reach components.

*[is$='-heresy']:hover {
  opacity: .8;
}

/* âš  too specific: it does not work with local components */
tag[is='specific-heresy'] {
  display: block;
}

CSS - How to query or style local components

When components are defined locally, there will be an incremental number between the component name and the -heresy suffix.

Instead of addressing a specific suffix, it is instead suggested to address the known prefix.

/* ℹ usable for both globally registered and nested components */
tag[is^='my-button-'] {
  display: block;
}

Project Showcases

Project Achievements