Releases: dgp1130/HydroActive
0.1.6
https://www.npmjs.com/package/hydroactive/v/0.1.5
Updates the README.md
to include a more accurate example.
0.1.5
https://www.npmjs.com/package/hydroactive/v/0.1.5
This release lands a number of changes focused on providing stronger abstractions. Notably, ComponentRef
and ElementRef
have been removed and host
has been upgraded to a SignalComponentAccessor
which supports .connected
and .effect
.
- 07e5ffc - Added
ElementAccessor.prototype.write
as a corollary toElementAccessor.prototype.read
. Useful for non-reactive / one-time writes to the DOM. - 55f3344 - Added
AttrAccessor.prototype.write
as a corollary toAttrAccess.prototype.read
. Useful for non-reactive / one-time writes to the DOM. - 027fccd - Deletes
ElementRef
. PreferElementAccessor
orComponentAccessor
. - e26e4d8 - Adds
Connectable
. This is an interface which declaresConnectable.prototype.connected
, used byComponentAccessor
to bind to the lifecycle of a component. - d96979b - Adds
ReactiveRoot
. This is an interface which declaresReactiveRoot.prototype.effect
, used bySignalComponentAccessor
to bind effects to a component's lifecycle. - 3f9a622 - Adds
SignalComponentAccessor
. This is a subclass ofComponentAccessor
but with knowledge of signals, meaning it implementsReactiveRoot
and provides.effect
. - 194b010 - Updates
defineComponent
to provide aSignalComponentAccessor
. This means you can callhost.effect(() => { /* ... */ })
inside a component. - 709874c - Deletes
ComponentRef
. In general you can usehost
/SignalComponentAccessor
to fill the same need. However if you only need.connected
you should accept aConnectable
and if you only need.effect
you should accept aReactiveRoot
. - 0050cfe - Renames
defineComponent
todefineSignalComponent
to make clear the dependency on signals. - 8d5012b - Adds
defineBaseComponent
as a corollary todefineSignalComponent
but which provides aComponentAccessor
(as opposed to aSignalComponentAccessor
) which does not implementReactiveRoot
(no.effect
) and therefore has no dependency on signals. If a component is simple enough to not require signals, preferdefineBaseComponent
for an even smaller bundle size. - 5114b34 - Sets
sideEffects: false
inpackage.json
. This should improve bundle sizes as HydroActive does not rely on top-level side effects and bundlers can take advantage of that to more aggressively eliminate unused code.
0.1.4
https://www.npmjs.com/package/hydroactive/v/0.1.4
This release adds support for shadow roots. Now on any Queryable
you can call .shadow
to get another Queryable
scoped to that element's shadow root. This works like so:
defineComponent('hello-world', (comp, host) => {
host.query('span'); // Queries light DOM.
host.shadow.query('span'); // Queries shadow DOM.
});
This works with open shadow roots across the board. It was implemented via a new QueryRoot
class which serves as as base implementation of the Queryable
interface. To support shadow roots, QueryRoot
as well as Dehydrated
and ElementAccessor
accept a getClosedShadowRoot
function.
import { QueryRoot } from 'hydroactive';
const el: Element = /* ... */;
const root = QueryRoot.from(el, /* getClosedShadowRoot */ () => shadowRootOfEl);
root.shadow.query('...'); // Queries `shadowRootOfEl`.
This parameter does not need to be provided for open shadow roots (which are easily accessible by QueryRoot
without being explicitly given as an input), but is needed for closed shadow roots as they are otherwise inaccessible.
The host
parameter of the defineComponent
callback has been upgraded to ComponentAccessor
(a new subclass of ElementAccessor
specific to HydroActiveComponent
elements) which automatically provides this function, so host.shadow
naturally supports closed shadow roots with no additional effort necessary. This implementation also does not leak the closed shadow root or ElementInternals
object on the HydroActiveComponent
or anywhere else accessible outside the component and its ComponentAccessor
(which is naturally private to the component), so its shadow root is truly closed.
0.1.3
https://www.npmjs.com/package/hydroactive/v/0.1.3
Fixed publish script as the entire JS code has not been published since v0.1.0.
0.1.2
https://www.npmjs.com/package/hydroactive/v/0.1.2
Adds README
to the published output so it displays on the NPM package page.
0.1.1
https://www.npmjs.com/package/hydroactive/v/0.1.1
This release adds improved hydration support and reworks the core DOM manipulation APIs to decouple utilities like comp.live
into smaller, more composable pieces. ComponentRef
is unchanged, but defineComponent
now provides a second host
parameter (an ElementAccessor
of the host element) which serves as an entry point. See the README for a basic introduction into how live
works under the new system.
There are a few new concepts which make this work:
Queryable
- An interface which providesquery
andqueryAll
methods.Dehydrated
- A class which wraps a potentially dehydrated element and only lets you unwrap it by asserting that the element is hydrated or actually hydrating it yourself.ElementAccessor
- Wraps an element and provides convenient functions for reading and interacting with it.AttrAccessor
- Wraps an element and a specific attribute and provides convenient functions for reading and interacting with it.live
andbind
- Work basically the same as before, but have been moved into standalone functions which accept anElementAccessor
as a parameter, rather than being methods onComponentRef
. Part of the goal here is to make signals tree shakable when not used.
The old APIs under ComponentRef
are likely to be removed and heavily reduced. comp.live
is basically obsoleted by the new live
standalone function for instance. Some form of ComponentRef
will likely still exist as a means of accessing ComponentRef.prototype.connected
, but what form that takes long term is still TBD.
Check out this YouTube video discussing the changes in this release and the design decisions which went into hydration support.
0.1.0
https://www.npmjs.com/package/hydroactive/v/0.1.0
BREAKING CHANGES: Basically everything. This is effectively starting a rewrite of HydroActive
. Most of the core developer experience is pretty similar, there's no major radical changes here. However this does not yet have feature parity with 0.0.5, so a number of APIs just don't exist yet.
See this new YouTube video for a breakdown of the project and an introduction to 0.1.0 features. The video does not contain a comprehensive list of all 0.1.0 HydroActive features, but future videos and content should continue to expand on it going forward. Release notes will also be more specific about individual changes in each incremental release.
0.0.5
https://www.npmjs.com/package/hydroactive/v/0.0.5
Changelog:
- e79f9cf - Adds support for binding boolean values to attributes. If the boolean is true, the attribute is set to empty string, and if the boolean is false the attribute is removed.
- a8d1bc5 -
$.live
and$.bind
now acceptElement
references in addition to string queries. - cee36e7 - Adds
$.scope
. This allows chaining additional queries limited to descendents of the scoped selector. - b7d91dd - Disallows extra properties not supported by the component to be passed to
hydrate
.
0.0.4
https://www.npmjs.com/package/hydroactive/v/0.0.4
Changelog:
- 519e458 - Deletes
factory()
and templating implementation, movinghydrate()
out of/testing.js
export as a replacement. Instead of usingfactory()
to create a new instance of an element based on a template with a special attribute, prerender the component inside a template, clone that template, and thenhydrate()
it directly. See examples in 519e458. - 6244237 - Defines custom elements directly in
component('my-tag-name', () => { /* ... */ })
. A separatecustomElements.define()
call is no longer necessary. This makes it impossible to hydrate a HydroActive component without defining its custom element first, which removes a foot-gun that leaked dehydrated elements into user-space. - 144dd0f - Renames
$.hydrate()
to$.read()
. - c5b6d7c - Adds new implementation of
$.hydrate()
(originally named$.hydrateElement()
but subsequently renamed to$.hydrate()
in 6842fb7). This is like$.read()
and$.query()
, except that it requires the target to be dehydrated, and triggers hydration immediately with the given props. This allows fine-grained orchestration of hydration timing. - 6cbaa08 - Updates
$.query()
and$.queryAll()
to throw when they find a custom element. Use$.read()
or$.hydrate()
instead. - 6c85a54 - Removes type check restriction on
$.query()
and$.queryAll()
's selector. This was originally intended to catch accidental dehydrated queries of custom elements, but this is now asserted more thoroughly in 6cbaa08 and is obsoleted.
0.0.3
https://www.npmjs.com/package/hydroactive/v/0.0.3
Changelog:
You can now test HydroActive components in Mocha-compatible environments with the hit()
function, a wrapper of it()
which grabs a DOM component from the page and executes the test with it, then cleans up the element afterwards to provide improved test isolation.
The hydrate()
function triggers hydration on the component and makes it interactive. See examples in d6e5f09 for how to use these functions for effective testing.