Skip to content

Releases: starfederation/datastar

v1.0.0-RC.6

21 Oct 15:35
v1.0.0-RC.6
746ddad

Choose a tag to compare

This release contains a syntax change to attributes that must be addressed manually before updating.

The recommended CDN link for Datastar is now version-locked to ensure safer updates and to avoid serving outdated cached files:

<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js"></script>

Breaking changes:

  • The attribute key delimiter has been changed from - to : (data-signals-foo becomes data-signals:foo, data-on-click becomes data-on:click, etc.), as allowed by the HTML Standard. The following regular expression can be used to update attributes.
    • Search: data-(?!(on-(intersect|interval|load|raf|resize|signal-patch|signal-patch-filter)(_|=)))(attr|bind|class|computed|indicator|on|persist|ref|signals|style)-
    • Replace: data-$4:
  • Renamed the data-on-load attribute to data-init.
  • Renamed .trail and .notrail modifier arguments to .trailing and .notrailing respectively.
  • Removed file upload progress monitoring from Datastar Pro, which had limited browser support. It is recommended to use a file upload library instead, or wait for Rocket which will include a file upload web component. (#1049)
  • Fetch requests are now cancelled when the element that initiated them is removed from the DOM. (#1045)
  • The data-bind attribute on an input with type file now only creates one signal instead of {signalName}, {signalName}Names, and {signalName}Mimes. The resultant type of the signal is {name: string, contents: string, mime: string}[]. (#1041)
  • Camel casing no longer capitalizes after a number, and kebab casing now only preserves what was written in the attribute key (data-signals:a2b--foo__case.kebab makes $a2b--foo instead of $a-2-b-foo). (#1030)

Non-breaking changes:

  • Datastar now supports all browsers that have support for ES2021. (#1037)
  • Added support for using object syntax with the data-computed attribute. (#1053)
  • The data-indicator attribute now sets the signal to false even if the signal has already been defined.
  • Fetch requests now respect URIs provided by a base tag. (#1047)
  • Form fields are no longer validated if a novalidate attribute exists on the form tag. (#1056)
  • Setting a signal to null or undefined now actually deletes the signal. (#1058)
  • Attributes can now be used on the html element.
  • Attribute keys and aliases can now start with a non-letter (data-signals:1foo or data-on:-foo). (#1030)
  • Fixed a bug in data-bind when using namespaced signals as arrays.
  • Fixed a bug resulting in data-ignore__self not being applied. (#1064)
  • Fixed a bug preventing the __debounce.leading modifier from working.
  • Fixed a bug preventing the combination of __debounce and __viewtransition modifiers from working.
  • Fixed a bug when using auto request cancellation where the FINISHED fetch event would fire after the STARTED fetch event of the cancelling request.

v1.0.0-RC.5

15 Aug 18:13
v1.0.0-RC.5
a7adbac

Choose a tag to compare

  • The data-on-* attribute no longer requires that the isTrusted property on the event is true for an expression to be executed.
  • The data-on-load attribute no longer wraps the expression in setTimeout when no delay is provided.
  • Changed the filterSignals option in the backend actions to maintain the default include and exclude values if only one or the other is provided.
  • Fixed a bug in which setting the length of an array signal would cause errors when trying to access an element of the array.
  • Fixed a bug in which data-query-string would merge in the path of the object rather than the object itself.
  • Removed the __trusted modifier.

v1.0.0-RC.4

01 Aug 09:35
v1.0.0-RC.4
33feafb

Choose a tag to compare

  • Fixed a bug in which an input element being morphed would not have its value updated.

v1.0.0-RC.3

29 Jul 17:24
v1.0.0-RC.3
1e2adb2

Choose a tag to compare

This release packs some new features, cleans up data-bind behavior, and fixes a rake of minor bugs.

  • Added support for patching html, head, and body elements.
  • Added support for patching arbitrary fragments into the DOM given a selector is provided.
  • Added support for passing include and exclude filters in as strings.
  • Added a __filter modifier to data-query-string that filters out empty values when syncing signals to query string params.
  • When a signal is predefined, its type is now preserved during binding – whenever the element’s value changes, the signal value is automatically converted to match the original type.
  • Custom keys in data-persist are now added as data-persist-mykey, and the __key modifier has been removed.
  • Numeric signal names are now correctly parsed.
  • Fixed a regression in which data-attr values were not being JSON encoded.
  • Fixed a bug in which data-text and data-json-signals would not reapply themselves after their text was changed.
  • Fixed a bug in which attributes that had a prefix with the same length as the alias would not be ignored (e.g. data-option-load would be applied as on-load).
  • Fixed a bug in which the retries-failed event was named retrying.
  • Fixed a bug in which the remove mode would fail when patching elements if no elements were provided.
  • Fixed a bug in which data-class would enter an infinite loop if there were multiple such attributes on the same element.
  • Fixed a bug in which attribute plugins on child elements were not cleaned up when removed.
  • Removed support for using the ID of a provided element as a selector for the remove mode when patching elements.
  • Changed the behavior of how input values are diffed when morphed:
Old input value New input value Behavior
null null preserve old input value
some value the same value preserve old input value
some value null set old input value to ""
null some value set old input value to new input value
some value some other value set old input value to new input value

v1.0.0-RC.2

17 Jul 20:23
v1.0.0-RC.2
84a03ef

Choose a tag to compare

  • Added a data-style attribute that sets the value of inline CSS styles on an element based on an expression, and keeps them in sync.
  • Added a requestCancellation option to backend actions that controls request cancellation behavior.
  • Fixed a bug in which indicator signals were not being set to false after a text/html response completed.
  • Fixed a bug in which a duplicate text/event-stream entry was being added to the Accept header in SSE actions.
  • Fixed a bug in which assigning a computed to an already existing signal would create a signal of a computed instead of a computed.
  • Fixed a bug in which using data-attr with a key would observe the result of the expression rather than the key.
  • Fixed a bug in which signal names were being incorrectly parsed in some edge-cases.
  • Renamed the datastar-sse event to datastar-fetch.

v1.0.0-RC.1

10 Jul 09:01
v1.0.0-RC.1
7e4476c

Choose a tag to compare

Some plugins are now available under Datastar Pro, which adds functionality to the the free open source Datastar framework. These plugins are available under a commercial license that helps fund our open source work.

Of the many changes listed below, one major feature is that objects in signals are now reactive! This means that you can now create complex data structures in signals, and any changes to these objects will automatically propogate to expressions.

SSE event handling has also changed, in addition to all of the SDKs. Please refer to the SSE docs and each of the SDKs for the correct syntax to use.

  • Objects in signals are now reactive, meaning that any changes to these objects will automatically propogate to expressions.
  • Plugins are now reapplied on morph only if their values/keys/modifiers have changed.
  • Added the ability for Datastar to receive text/html, application/json, and text/javascript content types, that patch elements, patch signals, and execute JavaScript respectively.
  • Added a data-effect attribute that executes an expression when any of the signals it references change.
  • Added a data-ignore-morph attribute to the PatchElements watcher that skips morphing the respective element and its children.
  • Added a data-json-signals attribute that sets the text content of an element to a reactive JSON stringified version of all signals.
  • Added a data-on-signal-patch attribute that executes an expression when a signal patch takes place.
  • Added a data-on-signal-patch-filter attribute for filtering the signals that cause the expression in data-on-signal-patch to be executed.
  • Added a data-preserve-attr attribute that preserves the client side state of an attribute through a morph.
  • Added a data-on-resize attribute (PRO) that attaches a ResizeObserver to the element, and executes the expression each time the element’s dimensions change.
  • Added a data-query-string attribute (PRO) that syncs the query string with signal values, including optional history support.
  • Added a datastar-upload-progress event (PRO) for monitoring file upload progress.
  • Added a filterSignals option to SSE actions that filters the signals send to the backend based on include and exclude regular expressions.
  • Added a __trusted modifier to the data-on attribute, which runs the expression even if the isTrusted property on the event is false.
  • Added automatic request cancellation for SSE actions - when a new request is initiated on an element, any existing request on that same element is automatically cancelled.
  • Removed the abort option from SSE actions as request cancellation is now handled automatically at the element level.
  • The URL passed into SSE actions (@get, @post, etc.) is now treated as a relative URI.
  • The default Content-Type header sent with form requests is now application/x-www-form-urlencoded.
  • The value of a clicked button element is now included in the request when using the form content type.
  • The data-star-ignore attribute has been renamed data-ignore.
  • The data-attr attribute now renders true as "" instead of "true" (e.g. checked="" instead of checked="true").
  • The data-attr attribute now preserves the string literals "false", "null", and "undefined" when using a key.
  • Fixed a bug when using the __debounce.leading modifier with the data-on attribute.
  • Removed the data-on-signal-change attribute. Use the new data-on-signal-patch attribute instead.
  • Removed the datastar-signal-change event. Use the new datastar-signal-patch event instead.
  • Removed the includeLocal option in backend action requests. Use the filterSignals option instead.
  • Removed the variable ctx from data attributes. Use the new el variable to access the element the attribute is attached to, use the new $ variable to access the signal root, or the new data-json-signals attribute to output all signals.
  • Removed support for adding a dollar sign prefix to signal names in the value of the data-bind, data-ref, and data-indicator attributes.
  • Removed the auto generated IDs that were assigned to elements using data attributes.

Changes to SSE Event Handling

  • Renamed the datastar-merge-fragments and datastar-merge-signals SSE events to datastar-patch-elements and datastar-patch-signals respectively.
  • Renamed the mergeMode parameter of the datastar-patch-elements SSE event to mode.
  • Renamed the morph mode to outer.
  • Renamed the outer mode to replace.
  • The inner mode now morphs the element’s inner HTML.
  • Removed the upsertAttributes mode.
  • Added the remove mode.
  • The datastar-patch-signals SSE event now patches (adds/updates/removes) signals according to the JSON Merge Patch RFC 7396.
  • Removed the RemoveFragments, RemoveSignals, and ExecuteScript watchers.

v1.0.0-beta.11

30 Mar 17:25
70b77cf

Choose a tag to compare

This release adds wildcard support to data-on-signals-change-*, data-persist, @setAll and @toggleAll using * to match a single path segment and ** to match multiple path segments. Note that this does mean a potentially breaking change if you were relying on path prefixes.

The beta phase is now officially unofficially over, and the next release should be v1.0.0 🚀

Added

  • Added the __debounce, __throttle and __viewtransition modifiers to data-on-intersect.
  • Added the __debounce, __throttle and __viewtransition modifiers to data-on-signal-change.
  • Added the __viewtransition modifier to data-on-interval.
  • Added the __viewtransition modifier to data-on-load.
  • Added the __viewtransition modifier to data-on-raf.

Changed

  • The datastar-sse event is now dispatched on the document element, and using data-on-datastar-sse automatically listens for the event on the document (#802).
  • The data-on-signals-change-* attribute key now accepts a path in which * matches a single path segment and ** matches multiple path segments (data-on-signals-change-foo.*.baz, data-on-signals-change-foo.**).
  • The data-persist attribute now accepts one or more space-separated paths in which * matches a single path segment and ** matches multiple path segments (data-persist="foo.*.baz", data-persist="foo.**").
  • The @setAll action now accepts one or more space-separated paths in which * matches a single path segment and ** matches multiple path segments (@setAll('foo.*.baz', true), @setAll('foo.**', true)) (#793).
  • The @toggleAll action now accepts one or more space-separated paths in which * matches a single path segment and ** matches multiple path segments (@toggleAll('foo.*.baz'), @toggleAll('foo.**')) (#793).

v1.0.0-beta.10

25 Mar 00:37
470a4f8

Choose a tag to compare

We’ve taken the opportunity to button up the API in preparation for the stable v1 release 🚀
Take note of the renamed attributes and the removal of the ability to use a key with data-persist.
data-intersectsdata-on-intersect
data-on-signals-changedata-on-signal-change
data-persist-*data-persist

Added

  • Added a retries-failed event type that is dispatched when the SSE plugin fails after retrying (#785).

Changed

  • Updated Idiomorph to version 0.7.3.
  • Renamed the data-intersects attribute to data-on-intersect.
  • Renamed the data-on-signals-change attribute to data-on-signal-change.
  • Classes used in data-class-* attributes now default to kebab-case (#761).
  • Events used in data-on-* attributes now default to kebab-case (#761).
  • The datastar-sse event is now dispatched on the element itself (#761).
  • The NPM package now also exports all plugins and bundles (#742).
  • Data attributes with plugin names in their prefix are no longer processed (#771).
  • The alias used in the aliased bundle has been renamed to star (data-star-*) (#772).

Fixed

  • Fixed the applying of plugins to give custom plugins a chance to load (#740).
  • Fixed a bug in which the indicator signal was not being reset when the element it was on was removed from the DOM (#749).
  • Fixed a bug in which merging multiple targets was not working correctly (#780).

Removed

  • Removed the ability to use a key with the data-persist attribute.
  • Removed settling from SSE events, which has become redundant (#764).

v1.0.0-beta.9

01 Mar 23:15
d18c9c5

Choose a tag to compare

Added

  • Added the ability for all input elements to set bound signals to an array of values by predefining the signal as an array.

Fixed

  • Fixed a bug in which data-signals was being reapplied each time any attribute changed on an element (#709).
  • Fixed a bug in which focus was not being restored to input elements after merging fragments (#710).
  • Fixed a bug in which the __delay modifier was being ignored (#720).
  • Fixed a bug in which signals bound to text input elements with a value attribute were being reset to the value when the entered value was empty.

v1.0.0-beta.8

25 Feb 15:32
5c69321

Choose a tag to compare

Added

  • Added the ability for checkbox input elements to set bound signals to an array of values by predefining the signal as an array (#664).

Changed

  • Updated Idiomorph to version 0.7.2.
  • When using data-bind on an element, the signal value now defaults to the element’s value attribute, provided the signal has not already been defined (#687).
  • The expression passed into data-on-signals-change is no longer executed on page load (#682).
  • Whitespace is now maintained in merged fragments (#658).
  • Attribute plugins now define a hash of their contents, preventing duplicate applies (#691).
  • Attribute plugins are now applied to the html element instead of the body element (#691).

Fixed

  • Fixed a bug in which datastar-remove-fragments events were not having any effect (#664).
  • Fixed a bug in which datastarNaN could be used as an auto-generated element ID (#679).
  • Fixed a bug in which data-attr was not removing the element attribute when using object syntax and the value was false (#693).

Removed

  • Removed the Datastar class. The apply, load, and setAlias functions are exported instead.