Skip to content

Releases: zeixcom/ui-element

Version 0.10.0

13 Feb 08:30
Compare
Choose a tag to compare
Version 0.10.0 Pre-release
Pre-release

What's Changed

Full Changelog: v0.8.5...v0.10.0

Version 0.8.5

04 Oct 22:28
0085a51
Compare
Choose a tag to compare
Version 0.8.5 Pre-release
Pre-release

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(), maybe setProperty(), setAttribute(), and setStyle()) according to static 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

23 Sep 13:27
19b2dcf
Compare
Choose a tag to compare
Version 0.8.3 Pre-release
Pre-release

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 to emit() 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

30 Aug 12:39
6a76d5c
Compare
Choose a tag to compare
v8.0.2 Pre-release
Pre-release

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

21 Aug 18:05
Compare
Choose a tag to compare
v0.8.1 Pre-release
Pre-release

What's Changed

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: 0.7.3...v0.8.1

0.7.3

01 Aug 13:16
b7f3d79
Compare
Choose a tag to compare
0.7.3 Pre-release
Pre-release

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 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: v0.7.2...0.7.3

Version 0.7.2

22 Jul 08:09
Compare
Choose a tag to compare
Version 0.7.2 Pre-release
Pre-release

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 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: v0.7.1...v0.7.2

Version 0.7.1

15 Jul 14:55
Compare
Choose a tag to compare
Version 0.7.1 Pre-release
Pre-release

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

15 Jul 07:57
a1265f3
Compare
Choose a tag to compare
Version 0.7.0 Pre-release
Pre-release

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: v0.6.2...v0.7.0

Version 0.6.2

03 Jul 08:11
Compare
Choose a tag to compare
Version 0.6.2 Pre-release
Pre-release

What's Changed

Licence changed from BSD 3-Clause to MIT

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: v0.4.0...v0.6.2