UIElement - the "look ma, no JS framework!" library bringing signals-based reactivity to Web Components
MIT License
Bot releases are visible (Hide)
Published by estherbrunner about 2 months ago
Full Changelog: https://github.com/efflore/ui-element/compare/v0.8.1...v8.0.2
Published by estherbrunner 2 months ago
this.self
, this.first(selector)
and this.all(selector)
pass(stateMap)
is now a partially applied function to connect to the chainable UI interfaceon(event, handler)
and off(event, handler)
are now partially applied functions to connect to the chainable UI interfacesetText(state)
setProperty(key, state=key)
setAttribute(name, state=name)
toggleAttribute(name, state=name)
toggleClass(token, state=token)
setStyle(prop, state=prop)
dispatch(event, state=event)
attributeMap
is now also static (like observedAttributes
, providedContexts
, consumedContexts
this.pass(element, stateMap)
is now this.[first|all](selector).map(pass(stateMap))
– connecting the the new chainable UI interfacecomponent(tag, componentProps, connected)
are no longer supported – use standard class-based web components insteadFull Changelog: https://github.com/efflore/ui-element/compare/0.7.3...v0.8.1
attributeMap
value; this means: attribute name is always also the key for states; as it is your custom element, name the attributes like you want your states to be named => this reduces complexity and possible confusioncontextMap
altogether; this means: context key is always also the key for states; derive other states from this for transformations with a new state key => this reduces complexity and increases consistency across componentscomponent()
now takes UIComponentProps
as second argument, an object of:
attributeMap
: UIAttributeMap
– what used to be the seconds argument in version 0.7.0 to 0.7.2consumedContexts
: array of context keys to be assigned to static consumedContexts
providedContexts
: array of context keys to be assigned to static providedContexts
Full Changelog: https://github.com/efflore/ui-element/compare/v0.7.2...0.7.3
Published by estherbrunner 3 months ago
derive()
option with memoization for expensive work in computed signals or if the count of execution times mattersui()
references:
ref.text(stateKey)
to sync the textContent
of an element while preserving HTML comments with a given string stateref.prop(key, stateKey)
to sync a property of the element with a given stateref.attr(name, stateKey)
to sync an attribute of the element with a given string stateref.bool(name, stateKey)
to sync a boolean attribute of the element with a given boolean stateref.class(token, stateKey)
to sync a class token on the element with a given boolean stateref.style(prop, stateKey)
to sync a style property of the element with a given string stateui()
references:
ref.on(event, handler)
to add an event listenerref.off(event, handler)
to remove an event listenerasJSON()
attribute parserdebug-component.ts
to parallel component.js
with DebugElement
instead of UIElement
; debug-element.ts
and debug-component.ts
are available in TypeScript only in src/lib/
, not as generated JavaScriptuiRef()
to ui()
uiComponent()
to component()
and it is no longer the default export from component.js
; instead UIElement is default export as in core libraryui(host).<first|all>(selector).<text|prop|attr|bool|class|style>(...args)
in JavaScript insteadhighlightTargets()
for now; you can implement your own target highlighting using el.targets(stateKey)
and methods on ui(element)
references.Full Changelog: https://github.com/efflore/ui-element/compare/v0.7.1...v0.7.2
Published by estherbrunner 3 months ago
Full Changelog: https://github.com/efflore/ui-element/compare/v0.7.0...v0.7.1
Published by estherbrunner 3 months ago
providedContexts
and consumedContexts
/ this.contextMap
this.targets()
allowing for target highlightinguiComponent()
with autoEffects()
and highlightTargets()
uiRef
UIElement
and uiComponent
syntaxUI
prefixboolean
, integer
and number
removed; import asBoolean
, asInteger
or asNumber
from ui-component
instead – or use these functions directly (preferred):
boolean
=> v => typeof v === 'string'
integer
=> v => parseInt(v, 10)
number
=> v => parseFloat(v)
UIElement
now implements connectedCallback()
for context controller, you need to call super.connectedCallback()
when extending UIElement
or DebugElement
( not needed in uiComponent()
)UIEffect.targets
is now a Map<Element, UIDOMInstructionSet>
with UIDOMInstructionSet = Set<() => void>
Full Changelog: https://github.com/efflore/ui-element/compare/v0.6.2...v0.7.0
Published by estherbrunner 4 months ago
Licence changed from BSD 3-Clause to MIT
define(tagName: string, registry = customElements: CustomElementRegistry)
to register the custom elementthis.set()
accepts a third optional parameter update = true: boolean
to set a default not overwriting the current value if setthis.pass(element: UIElement, states: Record<PropertyKey, PropertyKey | () => any>, registry = customElements: CustomElementsRegistry)
that awaits the child element being defined and then sets state signals on itqueue
function passed to enqueue fine-grained DOM updates for concurrent view refreshestargets
property containing a map of targeted DOM elements with enqueued DOM updates/lib/cause-effect.js
with the base signals functions cause()
, derive()
and effect()
used under the hood by UIElement
/lib/debug-element.js
is a base class DebugElement extends UIElement
to log lifecycle callbacks and changes in the signal chain on elements with property debug = true;
/lib/dom-utils.js
provides DOMUpdater
functions to be used in effects: setText()
, setProp()
, setAttr()
, setClass()
and setStyle()
; in addition autoEffects(this);
will auto-create simple effects from HTML attributes in the DOM subtree: ui-text
, ui-prop
, ui-attr
, ui-class
, ui-style
/lib/context-controller.js
implements the Context Community Protocol with ContextProvider
and ContextConsumer
which communicate via ContextRequestEvent
s/lib/visibility-observer.js
showcases composition of shared functionality in UIElement
classes with a simple IntersectionObserver
to set a visible
state on the elementattributeMapping
is now called attributeMap
Full Changelog: https://github.com/efflore/ui-element/compare/v0.4.0...v0.6.2
Published by estherbrunner 6 months ago
Map
-like interface (this.has(key)
, this.get(key)
, this.set(key, value)
and this.delete(key)
) and this.effect(fn)
; this
being your custom element, usually called from within connectedCallback()
in a class that extends UIElement
Signal.State
and Signal.Computed
of the early stage TC39 Signals Proposal, see https://github.com/tc39/proposal-signals
cause(value)
and effect(fn)
functions directly -> use the Map
-like interface of UIElement
this.set(key, fn)
will be treated as derived or computed signals and are read-only -> if you want to replace the function using the same key, you have to this.delete(key)
explicitly before you can create a new derived / computed signal