Add the base TypeScript component and DOM support for Ink.

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

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.

Summary ID
Add the base TypeScript component and DOM support for Ink.
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 grammar 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. There's also a set of DOM utilities to help handle rendering and setting properties. Upcoming changes will build on all this to begin introducing components for Ink.
5d5190107207ccc1125c55064697bcac4ccfa997
Description From Last Updated

Do we want to use T* instead of *T in order to match our other code?

daviddavid
david
  1. 
      
  2. src/ink/js/core/components.ts (Diff revision 1)
     
     
     
    Show all issues

    Do we want to use T* instead of *T in order to match our other code?

    1. I kind of prefer *T, as that seems to be more standard in places (and more closely matche the alternate naming of stuff like "FooType", rather than "TypeFoo").

      But that said, we do use T* in RB and in Spina (I got that from the Backbone bindings).

      I'm not sure what's really ideal there.

    2. I'll go ahead and use what we're using elsewhere.

  3. 
      
chipx86
david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to master (b23267f)