reacl-c.main.wc — de.active-group/reacl-c 0.10.1

Functions to define items as a web component.

Any function that takes an attribute map as the first argument and returns an item, is a simple web component. Methods, properties and several other settings can be added to a web component with the functions in this namespace. Then, it can be registered in the browser under a unique tag name with [[define-wc!]].

accessor-method cljs

(accessor-method wc method f)

Add a method to the given component, which returns a value based on the current state of the component. When the method is called by the user of the component, f is called with the current state and any additional arguments of the method call, and must return the result of method call. The state of the component cannot be changed.

See method if you need to return both a result and change the state of the component.

accessor-property cljs

(accessor-property wc property get & [set options])

Adds an accessor property the the given web component, with the given getter and optional setter functions. The get function is called on the current state of the component and must return the current property value, and the set function is called on the current state and the new value, and must return a new state or a reacl-c.core/return value. Options can be :configurable and :enumerable according to js/Object.defineProperty.

adopted cljs

(adopted wc f)

Adds a handler for the adopted callback to the given web component. The given function f will be called with the current state and must return a new state or a reacl-c.core/return value.

attribute cljs

(attribute wc attr & [key])

Adds an attribute declaration to the given web component. Declared attributes, and only those, will be included with their current value in the first argument of the web component rendering function. The given attr can be a keyword or a string. The current value of the attribute will be in the attribute map of the component under the key key, which defaults to attr if not specified.

attributes cljs

(attributes wc & attrs)

Adds several simple attributes to the given web component, as multiple calls to attribute would.

connected cljs

(connected wc f)

Adds a handler for the connected callback to the given web component. The given function f will be called with the current state and must return a new state or a reacl-c.core/return value.

data-property cljs

(data-property wc property value & [options])

Adds a data property the the given web component, with the given default value. Options can be :writable, :configurable and :enumerable according to js/Object.defineProperty.

define! cljs

(define! name wc & [options])

Registers the given web component under the given name in the browser.

If a web component has beed registered with this name and this library before, and unless the option :no-hot-update? is set, an attempt is made to change the behaviour of the web component at runtime. Note that not all aspects of the web component can be changed at runtime, and some may require a recreation of such DOM elements.

disconnected cljs

(disconnected wc f)

Adds a handler for the disconnected callback to the given web component. The given function f will be called with the current state and must return a new state or a reacl-c.core/return value.

dispatch cljs

(dispatch event)

Returns an action effect that will dispatch the given event when executed. Must be used from the item that implements a web component only, which is set as the target of the event. See event to define what kind of event is emitted.

event cljs

(event type & [options])

Return an object to be used with dispatch, contains the type and options for a DOM event. Options are :bubbles, :cancelable :composed according the the constructor of a js/Event. If the options contain the key :detail, then a js/CustomEvent is created.

initial-state cljs

(initial-state wc initial-state)

Sets an initial state for the given web component.

method cljs

(method wc method f)

Adds a custom method to the given web component.

When the method is called by the user of the web component, f will be called with the current state of the component, a special return function, and then any other arguments passed to it. It must then return a new state, or a reacl-c.core/return value. To actually return a result to the caller of the method itself, return the result of apply the special return function as an action. For example:

(method wc "foo"
  (fn [state return arg-1]
    (c/return :state (update state :called inc)
              :action (return (* arg-1 arg-1)))))

This would update the state of the component, and return the square of the first argument passed to the method invocation.

See accessor-method and mutator-method for simplified versions of this.

mutator-method cljs

(mutator-method wc method f)

Add a method to the given component, which only changes the state of the component and always returns nil. When the method is called by the user of the component, f is called with the current state and any additional arguments of the method call, and must return a new state or a reacl-c.core/return value.

See method if you need to return both a result and change the state of the component.

properties cljs

(properties wc & properties)

Adds several simple properties to the given web component, as multiple calls to property would.

property cljs

(property wc property & [lens options])

Adds a property to the given web component, that directly reflects a value in its current state. The given property can be a keyword, which is then used to get and associate the property value in a map state. Alternatively a lens can be specified for other kinds of state values. If the option :read-only? is set to true, no setter is defined for the property. Other options can be :configurable and :enumerable according to js/Object.defineProperty.

shadow cljs

(shadow wc init)

Specifies that the given web component should be rendered in a 'shadow DOM'. The init argument must specify the encapsulation :mode as either "open" or "closed" and the focus behavious as delegatesFocus. See js/HTMLElement.attachShadow for details.

use cljs

(use wc & args)

Registers the given web component under a unique name, and returns an item using that component. This can be especially useful during development of a web component.