ui-element

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 https://github.com/efflore/ui-element/pull/14

Full Changelog: https://github.com/efflore/ui-element/compare/v0.8.1...v8.0.2

What's Changed

• Feature/0.8.0 embrace functional programming for core by @estherbrunner in https://github.com/efflore/ui-element/pull/12
• Bugfix/v8.0.1 by @estherbrunner in https://github.com/efflore/ui-element/pull/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) and this.all(selector)
  • pass(stateMap) is now a partially applied function to connect to the chainable UI interface
  • on(event, handler) and off(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

• 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 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: https://github.com/efflore/ui-element/compare/0.7.3...v0.8.1

What's Changed

• Feature/v0.7.3 by @estherbrunner in https://github.com/efflore/ui-element/pull/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 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 confusion
• Removed possibility to supply contextMap 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 components

Breaking Changes since 0.7.2 to Non-Core Features

• component() 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.2
  • consumedContexts: 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

What's Changed

• v0.7.2 by @estherbrunner in https://github.com/efflore/ui-element/pull/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 the textContent of an element while preserving HTML comments with a given string state
  • ref.prop(key, stateKey) to sync a property of the element with a given state
  • ref.attr(name, stateKey) to sync an attribute of the element with a given string state
  • ref.bool(name, stateKey) to sync a boolean attribute of the element with a given boolean state
  • ref.class(token, stateKey) to sync a class token on the element with a given boolean state
  • ref.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 listener
  • ref.off(event, handler) to remove an event listener
• New asJSON() attribute parser
• New debug-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 JavaScript

Breaking Changes since 0.7.1 to Non-Core Features

• Renamed uiRef() to ui()
• Renamed uiComponent() to component() and it is no longer the default export from component.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 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

What's Changed

• 0.7.1 by @estherbrunner in https://github.com/efflore/ui-element/pull/9
• fix performance issue with derived signals
• fix some types
• better type checking for attribute and context maps

Full Changelog: https://github.com/efflore/ui-element/compare/v0.7.0...v0.7.1

What's Changed

• Source code refactored and converted to TypeScript
• Simple Rollup based build step

New Features

• Context controller in core with static providedContexts and consumedContexts / this.contextMap
• New core method this.targets() allowing for target highlighting
• Function components: uiComponent() with autoEffects() and highlightTargets()
• Element references with DOM manipulation methods: uiRef
• Test components with both UIElement and uiComponent syntax

Breaking Changes since v0.6.2

• Types renamed with common UI prefix
• Attribute parsing keys boolean, 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)
• Since 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

What's Changed

Licence changed from BSD 3-Clause to MIT

• v0.5.0 API Stabilisation by @estherbrunner in https://github.com/efflore/ui-element/pull/4
• v0.6.0 add autoEffects in DOM utils; further simplification by @estherbrunner in https://github.com/efflore/ui-element/pull/5
• v0.6.1 implement effect scheduling and provide more detailed debug logs by @estherbrunner in https://github.com/efflore/ui-element/pull/6
• v0.6.2 by @estherbrunner in https://github.com/efflore/ui-element/pull/7

New Features

• New static function define(tagName: string, registry = customElements: CustomElementRegistry) to register the custom element
• Method this.set() accepts a third optional parameter update = true: boolean to 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 queue function passed to enqueue fine-grained DOM updates for concurrent view refreshes
• Effects now have a targets property containing a map of targeted DOM elements with enqueued DOM updates
• Add ancillary utilities:
  • /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 ContextRequestEvents
  • /lib/visibility-observer.js showcases composition of shared functionality in UIElement classes with a simple IntersectionObserver to set a visible state on the element

Breaking Changes since v0.4.0

• Property attributeMapping is now called attributeMap

Full Changelog: https://github.com/efflore/ui-element/compare/v0.4.0...v0.6.2

New Features

• Consolidate API with 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
• Use an signal objects internally that duck-type instances of Signal.State and Signal.Computed of 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) and effect(fn) functions directly -> use the Map-like interface of UIElement
• 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 to this.delete(key) explicitly before you can create a new derived / computed signal