You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Working with HTML attributes as a list of space separated strings is very intuitive, and used for classes, aria references and more.
It would be great if there was the ability to work with space separate strings more easily with Stimulus, instead of needing parse/split the strings manually whenever used. This convention is also used when wanting to apply multiple actions on the data-action attribute.
Simple use case - a field that cleans its own input value based on some predetermined filters.
Currently if we want an Array we either need to use a string and split it manually, which is not a huge problem but prone to error (handling of trim, additional whitespace, parsing edge cases).
Alternatively we need to use the JSON syntax which is good for automated output but less easy to read visually and manually write out in template code.
Approach Idea 1 - DOMTokenList usage (strings only)
This is very explicit and adheres to the rules and the methods that already come with the classes list type interface from the DOM. However, to create a new DOMTokenList instance you need a DOM element first, there is no exposed constructor, this also assumes that Stimulus will only ever be declared in a browser environment.
// this is not ideal as it creates an element that will never be written to the DOM but will workconstdecoded=((val)=>{constel=document.createElement('template');el.setAttribute('class',val);returnel.classList;})(str);
constencoded=val.value;
Approach Idea 2 - Set usage (strings only)
This leverages the idea of using Set as the value type, while it stretches the usage a bit it could be a nice way to keep things simple. It is not 'smart' about the content of the set, just that it will be unique and will treat whitespace as the splitting mechanism.
This has the benefit of not polluting the Array usage with more confusion and enforces this as a use case for unique things that are set in the data attribute value.
// a bit noisy, could be simpler, goal here is to nicely clear out any inner whitespace to avoid empty entriesconstdecoded=Set(str.trim().split(' ').map(_=>_.trim()).filter(Boolean));
constencoded=[...arr].join(' ');
Approach Idea 3 - [Number] / [String] usage (Array with prescribed types)
Usage
In this scenario we want to support a progressively delayed async request (or something of that nature) and also easily support multiple options for a set of clearing params values.
This backwards compatible approach allows for strings to be nicely parsed by Stimulus and worked with as if they were an array but written and presented in the URL as a string. This is very similar to how the Stimulus classes works now (except that the 'value' will be the first value of the parsed array, this approach would also be suitable but could risk confusion and more surface area for the ...Value getter/setters.
<divdata-controller="example" data-example-clear-value="x y z" data-intervals-value="300 500 950">Content</div>
export default class extends Controller {
static values = {
clear: [String],
intervals: [Number],
}
constructor() {
console.assert(this.clearValue, ['x', 'y', 'z'])
console.assert(this.intervalsValue, [300, 500, 950])
this.clearValue = ['beta'];
console.assert(this.clearValue, ['a'])
this.clearValue = 'beta'; // not sure on what this should do if incorrectly used - maybe spread to an array?
console.assert(this.clearValue, ['b', 'e', 't' ',a'])
}
}
Encoding & Decoding
// clearing extra whitespace could also be a regexconstdecoded=str.trim().split(' ').map(_=>_.trim()).filter(Boolean);// if [Number]constdecoded=str.trim().split(' ').map(_=>_.trim()).filter(Boolean).map(Number);
constencoded=[...arr].join(' ');
The text was updated successfully, but these errors were encountered:
Summary
Working with HTML attributes as a list of space separated strings is very intuitive, and used for classes, aria references and more.
It would be great if there was the ability to work with space separate strings more easily with Stimulus, instead of needing parse/split the strings manually whenever used. This convention is also used when wanting to apply multiple actions on the
data-action
attribute.Simple use case - a field that cleans its own input value based on some predetermined filters.
Current usage
Currently if we want an
Array
we either need to use a string and split it manually, which is not a huge problem but prone to error (handling of trim, additional whitespace, parsing edge cases).Alternatively we need to use the JSON syntax which is good for automated output but less easy to read visually and manually write out in template code.
Approach Idea 1 -
DOMTokenList
usage (strings only)This is very explicit and adheres to the rules and the methods that already come with the classes list type interface from the DOM. However, to create a new
DOMTokenList
instance you need a DOM element first, there is no exposed constructor, this also assumes that Stimulus will only ever be declared in a browser environment.Usage
Decoding & Encoding
Approach Idea 2 -
Set
usage (strings only)This leverages the idea of using
Set
as the value type, while it stretches the usage a bit it could be a nice way to keep things simple. It is not 'smart' about the content of the set, just that it will be unique and will treat whitespace as the splitting mechanism.This has the benefit of not polluting the
Array
usage with more confusion and enforces this as a use case for unique things that are set in the data attribute value.Usage
Decoding & Encoding
Approach Idea 3 -
[Number]
/[String]
usage (Array with prescribed types)Usage
In this scenario we want to support a progressively delayed async request (or something of that nature) and also easily support multiple options for a set of clearing params values.
This backwards compatible approach allows for strings to be nicely parsed by Stimulus and worked with as if they were an array but written and presented in the URL as a string. This is very similar to how the Stimulus classes works now (except that the 'value' will be the first value of the parsed array, this approach would also be suitable but could risk confusion and more surface area for the
...Value
getter/setters.Encoding & Decoding
The text was updated successfully, but these errors were encountered: