• 
      

    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)