ES Components

ES Components (ESC) is a standard for transforming ES Modules into standardized Web Components to simplify the process of authoring composable web applications.

ESC is a core specification of the Brains@Play framework.

The Specification

Each Component contains one default export and any number of named exports.

export let nExecutions = 0

export default function(){
    this.nExecutions++
    return this.nExecutions
}

As such, this specification treats namespace imports (which access default and named exports) as first-class citizens.

Default Exports

The default export defines the behavior of the Component.

Named Exports

named exports define the states of the Component.

However, multiple named exports without a default function may also be passed. These are transformed into individual Components within the same graph.

Special Properties

Cross-File Properties

__define

This is a registry of ESC that you'd like to transform into Web Components.

Note: This has to be loaded

__compose

This is a key that allows you to specify how this ESC inherits from another.

__children

This is a tree of ESC instances that determine how they will be displayed on the screen—as well as how they're referenced in listener scope.

__listeners

This is a collection of configuration objects that specify how ESC will listen to each other.

JSON / HTML Properties

__trigger

This allows you to run the default function of an ESC using the arguments specified here.

{
    "__trigger": [true],
    "__compose": "./components/trigger.js"
}

__animate

This allows you to specify an animation loop for your component.

{
    "__animate": 10,
    "__compose": "./components/time.js"
}

Roadmap

Declare ESC with similar detail to ESM.

Acknowledgments

This specification has been drafted by Garrett Flynn and Joshua Brewster, who use contract work and community contributions through Open Collective to support themselves.