Add the base TypeScript component and DOM support for Ink.
Review Request #13585 — Created Feb. 28, 2024 and submitted
This provides the foundation for Ink's JavaScript/TypeScript codebase.
It's built on Spina 3.0, TypeScript, Babel, and thehtm
library.There are three main concepts introduced here:
Component support
Ink has a concept of components, which is any class or prototype
that provides, at a minimum, anel
attribute andrender()
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.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.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. Thecraft
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 |
---|---|
5d5190107207ccc1125c55064697bcac4ccfa997 |
Description | From | Last Updated |
---|---|---|
Do we want to use T* instead of *T in order to match our other code? |
david |