escompose

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

The escompose library transforms ES Components into Web Components that respond to each other.

escompose is a core library 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, // Runs 10 times every second
    // "__animate": true, // Runs on the default animation loop
    "__compose": "./components/time.js'
}

Acknowledgments

This library is maintained by Garrett Flynn and Joshua Brewster, who use contract work and community contributions through Open Collective to support themselves.

Backers

Support us with a monthly donation and help us continue our activities!

Sponsors

Become a sponsor and get your logo here with a link to your site!