Releases: zeixcom/ui-element
Releases · zeixcom/ui-element
Version 0.10.0
What's Changed
- docs: update example on installation & setup page by @estherbrunner in #23
- docs: quick fixes for installation-setup.html by @estherbrunner in #24
- V0.8.5 docs by @estherbrunner in #25
- V0.8.5 docs by @estherbrunner in #26
- docs: tab-list and accordion-panel examples by @estherbrunner in #27
- docs: examples for inputs and code-block by @estherbrunner in #28
- docs: todo-app and lazy-load examples by @estherbrunner in #29
- test: refactor lazy-load example by @estherbrunner in #31
- Feature/docs by @estherbrunner in #32
- chore: update project name and location by @estherbrunner in #33
- Feature/docs by @estherbrunner in #34
- Feature/docs by @estherbrunner in #35
- Feature/docs revise introduction, installation & setup, core concepts and introduce markdown based SSG for docs by @estherbrunner in #36
- fix: broken links in docs menu by @estherbrunner in #37
- Feature/docs by @estherbrunner in #38
- docs: about & community page, CONTRIBUTING.md by @estherbrunner in #39
- Feature/refactor event handling by @estherbrunner in #40
- docs: new README by @estherbrunner in #41
Full Changelog: v0.8.5...v0.10.0
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
attributeMap
is now also static (likeobservedAttributes
,providedContexts
,consumedContexts
this.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
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 takesUIComponentProps
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 tostatic consumedContexts
providedContexts
: 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 thetextContent
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 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.ts
to parallelcomponent.js
withDebugElement
instead ofUIElement
;debug-element.ts
anddebug-component.ts
are 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
providedContexts
andconsumedContexts
/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
UIElement
anduiComponent
syntax
Breaking Changes since v0.6.2
- Types renamed with common
UI
prefix - Attribute parsing keys
boolean
,integer
andnumber
removed; importasBoolean
,asInteger
orasNumber
fromui-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 implementsconnectedCallback()
for context controller, you need to callsuper.connectedCallback()
when extendingUIElement
orDebugElement
( not needed inuiComponent()
) UIEffect.targets
is 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: 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 functionscause()
,derive()
andeffect()
used under the hood byUIElement
/lib/debug-element.js
is a baseclass DebugElement extends UIElement
to log lifecycle callbacks and changes in the signal chain on elements with propertydebug = true;
/lib/dom-utils.js
providesDOMUpdater
functions 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.js
implements the Context Community Protocol withContextProvider
andContextConsumer
which communicate viaContextRequestEvent
s/lib/visibility-observer.js
showcases composition of shared functionality inUIElement
classes with a simpleIntersectionObserver
to set avisible
state on the element
Breaking Changes since v0.4.0
- Property
attributeMapping
is now calledattributeMap
Full Changelog: v0.4.0...v0.6.2