Function liveState

This typescript class decorator will:

• Adds a connectedCallback method that sets a liveState property and calls connectElement
• Adds a disconnectedCallback method that calls disconnect on the liveState instance

Both will call inherited callbacks.

The decorator expects to passed an object with the following properties, all of which are optional:

• url
• topic
• params
• provide - share this LiveState instance as a context (see below)
  • scope
  • name
• context - connect to an existing LiveState instance (see below)
• properties - passed into connectElement
• attributes - passed into connectElement
• events - passed into connectElement

@liveState({
  url: 'http://foo.bar',
  topic: 'discord_chat:new',
  properties: ['messages'],
  events: {
    send: ['new_message', 'start_chat']
  }
})

Context

As of 0.7.0, we now support sharing LiveState instances via a context. The way this works is that one element will provide an instance like so:

@liveState({
  channelName: "todo:all",
  properties: ['todos'],
  events: {
    send: ['add_todo']
  },
  provide: {
    scope: window,
    name: 'todoLiveState'
  }
})

This will cause the LiveState instance to be set on the window as todoLiveState. An element that wishes to connect to an existing LiveState instance uses the context property:

@liveState({
  events: {
    send: ['add_todo']
  },
  context: 'todoLiveState'
})

This will find an instance with the specified name (in any scope). This will be handled regardless of order, if the consuming instance is created first a queue of consumers will be created that will be resolved and attached when the providing instance is created.