Add the base TypeScript component and DOM support for Ink.

Review Request #13585 — Created Feb. 28, 2024 and submitted — Latest diff uploaded

Information

Ink
master

Reviewers

This provides the foundation for Ink's JavaScript/TypeScript codebase.
It's built on Spina 3.0, TypeScript, Babel, and the htm library.

There are three main concepts introduced here:

  1. Component support

    Ink has a concept of components, which is any class or prototype
    that provides, at a minimum, an el attribute and render()
    method (though with a preference toward Spina-based classes).

    Components are registered with a central registry, using a
    vendor-prefixed name. They may contain registered subcomponents,
    which are component-prefixed names that get passed to a component
    for crafting.

  2. Crafting

    Components are crafted, which is just a convenience around
    constructing a component view or a DOM element. When crafting, you
    pass the name of a DOM element, registered component, or a
    component's subcomponent, along with properties and any children.

    When constructing an element, properties are correctly turned into
    element attributes, class list additions, dataset additions, or
    style additions, and set on the element. Any children are then
    constructed and added to the element.

    When constructing a component, some properties are set on the
    element (the CSS class, data attributes, and ARIA properties), and
    the rest are passed to the component constructor. Any children or
    subcomponents are handed over to the component for processing. The
    component is then rendered.

  3. Painting

    Painting is a layer around crafting, and the result will always be
    one or more DOM elements. Both DOM elements and components can be
    painted, and painting can either take the same name, proeprties,
    and children that crafting takes, or it can take something already
    crafted.

This is all fairly light-weight, and standardizes a lot of how DOM and
component construction is managed and rendered.

This is made easier with a JSX-like dialect making use of tagged
template literals. This is parsed to build up a nested tree of names,
properties, and children. The craft tag is used for crafting, and
paint for painting. An upcoming change will introduce a Babel plugin
that can handle the parsing at compilation time, rather than at runtime.

The feel of the dialect is very much like working with JSX/React, but
without a Virtual DOM. It's also flexible enough where other component
systems could be tied in on the component layer and then used for
crafting and painting.

A set of DOM utilities is provided to help handle rendering and setting
properties.

Upcoming changes will build on all this to begin introducing components
for Ink.

Unit tests pass.

Made extensive use of all this with in-progress component work.

Commits

Files