This repository was archived by the owner on Feb 18, 2026. It is now read-only.
Releases: zeixcom/ui-element
Releases · zeixcom/ui-element
Version 0.8.5
What's Changed
Bugfixes
- fix
setStyle()auto-effect - fix context signals not updating
Minor New Features
- better error handing in derived signals;
derive()is now exported from main bundle as well - allow all auto-effects to revert to server-rendered state by setting signal to
undefined - explicitly remove attribute or style property by setting signal to
null - parse fallback value of string auto-effects (
setText(), maybesetProperty(),setAttribute(), andsetStyle()) according tostatic attributeMap
Documentation and Tests
- prepare full documentation (unfinished yet)
- add more tests for context and auto-effects
Full Changelog: v0.8.3...v0.8.5
Version 0.8.3
What's Changed
New Features
- Built-in auto-effects now accept anonymous functions for passing state (besides state keys)
- Map interface methods on UIElement now accept anything for keys (not just PropertyKey)
Breaking Changes
dispatch()auto-effect has been renamed toemit()as in common EventEmitter libraries
Other Changes
- Under the hood optimizations for context and functions connecting to the UI interface
- Use lastest API in test cases
- Pull Request: Feature/0.8.3 by @estherbrunner in #15
Full Changelog: v8.0.2...v0.8.3
v8.0.2
What's Changed
Bugfixes
- AttributeParser now expects unknown[] as return value to avoid issues with partially applied parser functions
- fixed bug in scheduler where updated state was skipped if another update was already scheduled for the same property
- slightly optimized scheduler by @estherbrunner in #14
Full Changelog: v0.8.1...v8.0.2
v0.8.1
What's Changed
- Feature/0.8.0 embrace functional programming for core by @estherbrunner in #12
- Bugfix/v8.0.1 by @estherbrunner in #13
New Features
- Scheduler that can deduplicate DOM Instructions on same element property in the same tick
- Chainable UI API for everything with elements (using arrays):
this.self,this.first(selector)andthis.all(selector)pass(stateMap)is now a partially applied function to connect to the chainable UI interfaceon(event, handler)andoff(event, handler)are now partially applied functions to connect to the chainable UI interface- Auto-Effects also connect to the chainable UI interface:
setText(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)
- All attribute parser functions and functions to connect to the new chainable UI interface are now part of core
Breaking Changes to Core Features since v0.7.3
attributeMapis now also static (likeobservedAttributes,providedContexts,consumedContextsthis.pass(element, stateMap)is nowthis.[first|all](selector).map(pass(stateMap))– connecting the the new chainable UI interface
Breaking Changes to Non-Core Features since 0.7.3
- All methods to connect to the new chainable UI interface were removed (and some renamed) from the old UI interface
- Function components
component(tag, componentProps, connected)are no longer supported – use standard class-based web components instead
Full Changelog: 0.7.3...v0.8.1
0.7.3
What's Changed
- Feature/v0.7.3 by @estherbrunner in #11
- Bugfixes and tests for context provider and consumer
- Bugfixes and tests for attribute parser functions
- Better types
Breaking Changes since 0.7.2 to Core Feature
- Removed possibility to supply Array as
attributeMapvalue; 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 confusion - Removed possibility to supply
contextMapaltogether; 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 components
Breaking Changes since 0.7.2 to Non-Core Features
component()now takesUIComponentPropsas 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 tostatic consumedContextsprovidedContexts: array of context keys to be assigned tostatic providedContexts
Full Changelog: v0.7.2...0.7.3
Version 0.7.2
What's Changed
- v0.7.2 by @estherbrunner in #10
- Cause & Effect now features a glitch-free
derive()option with memoization for expensive work in computed signals or if the count of execution times matters - Even faster Cause & Effect
- Added tests for async signals and error handling
Non-Core Features
- New methods for auto-effects on
ui()references:ref.text(stateKey)to sync thetextContentof 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 state
- New methods for event binding / unbinding on
ui()references:ref.on(event, handler)to add an event listenerref.off(event, handler)to remove an event listener
- New
asJSON()attribute parser - New
debug-component.tsto parallelcomponent.jswithDebugElementinstead ofUIElement;debug-element.tsanddebug-component.tsare available in TypeScript only insrc/lib/, not as generated JavaScript
Breaking Changes since 0.7.1 to Non-Core Features
- Renamed
uiRef()toui() - Renamed
uiComponent()tocomponent()and it is no longer the default export fromcomponent.js; instead UIElement is default export as in core library - Removed auto-effects using attributes; use
ui(host).<first|all>(selector).<text|prop|attr|bool|class|style>(...args)in JavaScript instead - Removed
highlightTargets()for now; you can implement your own target highlighting usingel.targets(stateKey)and methods onui(element)references.
Full Changelog: v0.7.1...v0.7.2
Version 0.7.1
What's Changed
- 0.7.1 by @estherbrunner in #9
- fix performance issue with derived signals
- fix some types
- better type checking for attribute and context maps
Full Changelog: v0.7.0...v0.7.1
Version 0.7.0
What's Changed
- Source code refactored and converted to TypeScript
- Simple Rollup based build step
New Features
- Context controller in core with static
providedContextsandconsumedContexts/this.contextMap - New core method
this.targets()allowing for target highlighting - Function components:
uiComponent()withautoEffects()andhighlightTargets() - Element references with DOM manipulation methods:
uiRef - Test components with both
UIElementanduiComponentsyntax
Breaking Changes since v0.6.2
- Types renamed with common
UIprefix - Attribute parsing keys
boolean,integerandnumberremoved; importasBoolean,asIntegerorasNumberfromui-componentinstead – or use these functions directly (preferred):boolean=>v => typeof v === 'string'integer=>v => parseInt(v, 10)number=>v => parseFloat(v)
- Since
UIElementnow implementsconnectedCallback()for context controller, you need to callsuper.connectedCallback()when extendingUIElementorDebugElement( not needed inuiComponent()) UIEffect.targetsis now aMap<Element, UIDOMInstructionSet>withUIDOMInstructionSet = Set<() => void>
Full Changelog: v0.6.2...v0.7.0
Version 0.6.2
What's Changed
Licence changed from BSD 3-Clause to MIT
- v0.5.0 API Stabilisation by @estherbrunner in #4
- v0.6.0 add autoEffects in DOM utils; further simplification by @estherbrunner in #5
- v0.6.1 implement effect scheduling and provide more detailed debug logs by @estherbrunner in #6
- v0.6.2 by @estherbrunner in #7
New Features
- New static function
define(tagName: string, registry = customElements: CustomElementRegistry)to register the custom element - Method
this.set()accepts a third optional parameterupdate = true: booleanto set a default not overwriting the current value if set - New method
this.pass(element: UIElement, states: Record<PropertyKey, PropertyKey | () => any>, registry = customElements: CustomElementsRegistry)that awaits the child element being defined and then sets state signals on it - Effect callback functions get a
queuefunction passed to enqueue fine-grained DOM updates for concurrent view refreshes - Effects now have a
targetsproperty containing a map of targeted DOM elements with enqueued DOM updates - Add ancillary utilities:
/lib/cause-effect.jswith the base signals functionscause(),derive()andeffect()used under the hood byUIElement/lib/debug-element.jsis a baseclass DebugElement extends UIElementto log lifecycle callbacks and changes in the signal chain on elements with propertydebug = true;/lib/dom-utils.jsprovidesDOMUpdaterfunctions to be used in effects:setText(),setProp(),setAttr(),setClass()andsetStyle(); in additionautoEffects(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.jsimplements the Context Community Protocol withContextProviderandContextConsumerwhich communicate viaContextRequestEvents/lib/visibility-observer.jsshowcases composition of shared functionality inUIElementclasses with a simpleIntersectionObserverto set avisiblestate on the element
Breaking Changes since v0.4.0
- Property
attributeMappingis now calledattributeMap
Full Changelog: v0.4.0...v0.6.2
Version 0.4.0
New Features
- Consolidate API with
Map-like interface (this.has(key),this.get(key),this.set(key, value)andthis.delete(key)) andthis.effect(fn);thisbeing your custom element, usually called from withinconnectedCallback()in a class that extendsUIElement - Use an signal objects internally that duck-type instances of
Signal.StateandSignal.Computedof the early stage TC39 Signals Proposal, see https://github.com/tc39/proposal-signals - Add types.d.ts definition
- Add more tests
Breaking Changes from v0.3.0
- No longer expose
cause(value)andeffect(fn)functions directly -> use theMap-like interface ofUIElement - Remove ability to return a cleanup function from effect callback functions -> just add cleanup code at the end of effect callback function
- Functions passed to
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 tothis.delete(key)explicitly before you can create a new derived / computed signal