• 
      

    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