Llama toolkit

Wooly, sure-footed, a thin layer above vanilla JS for SPA dev (no dependencies).

Provides:

• a Component API
• an event-bus
• a router

API Doc

Table of Contents

• llama
  • Parameters
• RouteTarget
  • Properties
• Component
  • Parameters
  • listen
  • call
  • load
  • unload
  • prepareBox
  • populate
  • addChildren
  • removeChildren
  • init
  • postLoad
  • clean
  • on
  • emit
  • gId
  • addEvtById
  • hasHTML
  • empty
  • fragmentFromHtml
  • injectCSS
  • injectHTML
• HostComponent
  • setSubRoute
• SimpleEventBus
  • Parameters
  • on
  • emit
  • clear
• SequenceEventBus
  • Parameters
  • on
  • emit
  • clear
• Router
  • Parameters
  • routes
  • before
  • on
  • run
  • stop
  • go
  • route

llama

Set all the Llama goodness together

Parameters

• options Object the configuration options

  • options.box string? the id of the div we load components in
  • options.eventBus EventBus? an event-bus to pass to the different Components
  • options.context Object? a shared context object for all the routes
  • options.routes Object<string, (Class<Component> | RouteTarget)> the description of routes
  • options.logger Console? define a logger, can be {logger: console} to send on the javascript console

RouteTarget

Type: Object

Properties

• type Class<Component>?
• name string? name of the component to serve as source for event listeners
• box string? the id of an HTML element the component is rendered into
• sub_box string? the id of an HTML element the embedded sub-component are rendered into
• css string? a string of CSS to be injected
• logger Console? define a logger, can be {logger: console} to send on the javascript console
• embed Object<string, RouteTarget> embedded route

Component

Common ground for vanilla Widget Component

Parameters

• options Object a set of option al

  • options.name string? name of the component to serve as source for event listeners
  • options.box string? the id of the HTMLElement to which we want to plug the component
  • options.eventBus EventBus? to receive and send events
  • options.context Object<string, any>?
  • options.logger Console? define a logger, can be {logger: console} to send on the javascript console
  • options.css string?

listen

Listen events

call

Call for loading of the component

Parameters

• args object
• path string

load

Load component inside the box

Parameters

• args object
• path string

unload

Unload component

prepareBox

Returns (ShadowRoot | HTMLElement)

populate

Parameters

• args object
• path string

addChildren

Parameters

• args object?
• path string?
• children ...Component

removeChildren

Parameters

• children ...Component

init

init the component after appending to DOM

Parameters

• args object
• path string

postLoad

activate after load

Parameters

• args object
• path string

clean

clean the component after removing from DOM

on

Attach an event listener for this source component

Parameters

• e (string | Array<string>) the event(s) key(s) to attach the listener
• f

emit

Emit an event for a given key that are sent to every attached events listeners

Parameters

• k string the event key
• p ...any the optional args

gId

Parameters

• id string

Returns HTMLElement

addEvtById

Parameters

• id string
• evt any
• cb any

hasHTML

Returns boolean

empty

Clear the box contents

Parameters

• box Node (optional, default this.prepareBox())

fragmentFromHtml

Generate DOM Element from source HTML

Parameters

• html string some HTML code

Returns DocumentFragment the generated DOM Element

injectCSS

Inject component defined CSS into the box (if it exists)

Parameters

• box Node (optional, default this.prepareBox())

injectHTML

Inject component defined HTML into the box (if it exists)

Parameters

• box Node (optional, default this.prepareBox())
• args object?
• path string?

HostComponent

A component that host embedded Component

setSubRoute

Parameters

• subRoute Object<string, number>

SimpleEventBus

A simple event bus to enable event-driven architecture

Parameters

• options Object optional parameters

  • options.name string? define a name, in a multi EventBus scenario
  • options.logger Console? define a logger, can be {logger: console} to send on the javascript console

on

Attach an event listener for a source

Parameters

• s string name of the source of the listener
• e (string | Array<string>) the event(s) key(s) to attach the listener
• f

emit

Emit an event for a given key that are sent to every attached events listeners

Parameters

• k string the event key
• p ...any the optional args

clear

Clear event listeners for a source

Parameters

• s string the name of the source to clear events for
• filter (optional, default ()=>true)

SequenceEventBus

A Complex event bus to enable event-driven architecture with a before and after event hook

Parameters

• options Object optional parameters

  • options.logger Console? define a logger, can be {logger: console} to send on the javascript console

on

Attach an event listener for a source

Parameters

• s string name of the source of the listener
• e (string | Array<string>) the event(s) key(s) to attach the listener
• f

emit

Emit an event for a given key that are sent to every attached events listeners

Parameters

• k string the event key
• p ...any the optional args

clear

Clear event listeners for a source

Parameters

• s string the name of the source to clear events for
• filter (optional, default ()=>true)

Router

A simple router for Llama Component

Parameters

• eventBus EventBus

• options object?

  • options.logger Console? define a logger, can be {logger: console} to send on the javascript console

routes

Properties

• routes Array<Path>

before

Parameters

• action function

on

Parameters

• path string
• action (function | Component)

run

Run the router

stop

Stop the router

go

Go to a route matching the given path

Parameters

• path string

route

Route the browser