Component Style

UnOpinionated Composability

The composability builderJS provides is really whatever you want it to be.

The only 🔧 tool builderJS provides to create your components is the component() function. The source code for the function is dead simple:

this.component = function(process) {
  return process
}

The component() is just a function that accepts anything and returns it. This provides a small bit of entirely optional syntactic sugar that doesn't get in the way. Moreover, it gets out of the way whenever you don't want to use it. It's also easy to refactor existing code without components into components, or to take existing components and break them out into smaller pieces.

component() function use cases

Builds a statically built div component.

# build
var staticComponent = b.component(b.div())

# use
staticComponent

Builds a dynamically built div component function.

# build
var dynamicComponent = function() { b.component(b.div()) }

# use
dynamicComponent()

Return a dynamically built div component that accepts options.

# build
var dynamicOptionsComponent = function(options = {}) { b.component(b.div(options)) }

# use
dynamicOptionsComponent()
# or 
dynamicOptionsComponent({ id: "example" })

Builds a statically built div component in the div key for the component.

# build
var staticComponentStyle = b.component({ 
  div: b.div()
})

# use
staticComponentStyle.div

Builds a dynamically built div component in the div key for the component.

# build
var dynamicComponentStyle = b.component({ 
  div: function() { b.div() }
})

# use
dynamicComponentStyle.div()

Builds a dynamically built div component in the div key for the component that accepts options.

# build
var dynamicOptionsComponentStyle = b.component({ 
  div: function(options) { b.component(b.div(options)) }
})

# use
dynamicOptionsComponentStyle.div()
# or 
dynamicOptionsComponentStyle.div({ id: "example" })

Builds a dynamically built div component in the div key for the component that accepts options with default options already set for you.

# build
var dynamicOptions2ComponentStyle = b.component({ 
  div: function(options = { id: "example" }) { b.component(b.div(options)) }
})

# use
dynamicOptions2ComponentStyle.div()
# or 
dynamicOptions2ComponentStyle.div({ id: "differentExample" })