EPA-WG / custom-element

Declarative Custom Element
Apache License 2.0
18 stars 1 forks source link

diary - slice, value, select relations #45

Open sashafirsov opened 4 months ago

sashafirsov commented 4 months ago

There is a need to alling

Ideas to think about

# markup sl. init sl. from event effect
1 <input slice="s"> no value change 1:1 slice⮂value
2 <input slice="s" value="A"> A value change slice⮂value, w/ initial
3 <input slice="s" value="A" slice-event="tap"/> A value tap ^, on sync on type
4 <input slice="s" value="{$a}" slice-event="tap" /> attr a attr tap ^ w/ initial from attr
5 <input slice="s" value="B" slice-value="'x'+@value" /> expr expr change on click s="xBchanged", init by expr, static value
6 <input slice="s" slice-value="'x:'+@pageX" slice-event="mousemove" /> mouse on move s="x:123"

Aspects

Things to think over:

sashafirsov commented 4 months ago

Slice related attributes

Attributes passed to slice-value made as combination of element attributes (@value is a runtime value of element).

Event object fileds

In slice-value xPath those are available with event/@prop notation. Like for MouseEvent event/@pageX

datadom in slice-value xPath

In order to access data from whole dataset the XML have to be same as in slice and any another selector: {xPath}, <value-of select="xPath">,...

The properties of slice-ed element is primary subject of data access, hence have to be presented in datadom as

? Should the event target properties be exposed or attributes are sufficient?

sashafirsov commented 4 months ago

related: #42

jasvir commented 4 months ago

Does the removable of the slice=s element trigger the slice-update event?

sashafirsov commented 4 months ago

@jasvir , that has to be defined in the scope of this issue. IMO the slice-event ( replacement for slice-update ) should disable the slot initialization. The syntetic init event can be used if there is a need.

<input slice="s" > IMO is equals to 
<input slice="s" slice-event="change init" slice-value="/datadom/slice/s">

The reason of init disabling:

Does the removable of the slice=s element trigger the slice-update event?

I guess you meant would remove or adding the element with slice and value would trigger the change of slot?

<if test="some condition"
    <input value="when included by condition ^^, this is assigned to slice" slice="s" type="hidden">
</if>

The answer is yes. But removing of element would not trigger the slice change.

sashafirsov commented 4 months ago

@jasvir , are there concerns on naming convention for slice attributes ?

jasvir commented 4 months ago

I'm a little confused by when you have hyphens and when not - that seems inconsistent. slot-event vs slotvalue. It's not a big deal but I would avoid hyphens if possible. if they were ever in the future to be reflected to javascript, the properties would need to be turned into camel case (so slot-event would be slotEvent).

sashafirsov commented 4 months ago

@jasvir , you right. It has to be consistent. And during conversation I have misused slot and slice sometimes. The slot is UI DOM injection in current HTML template standard. slice is datadom part ( /datadom/slice/xxx ) which is part of this discussion.

So slice-event can be later translated to sliceEvent as you mentioned.

Now to the match of attributes to elements.

slice is an attribute and slice-event is another attribute on same element. Like

<input slice="xxx" slice-event="keyup" />

But sometimes we would need to populate into different slices with own values. For that own tag has to be used for each slice to avoid confusion.

<textarea>
    <slice name="a" slice-event="keyup" slice-value="'typed '+$value" ></slice>
    <slice name="b" slice-event="keyup" slice-value="char_count($value)" ></slice>

In scenario ^^ the same event to populate different values into different slices. I.e. a="typed GFDFAHGF", b=22.

More in #42

jasvir commented 4 months ago

One more thought but I'm not sure this is the right issue for me to add it to... DOM elements have a convention of making executable code in attributes ie event handlers have the convention of starting with on...so onload, onmousedown etc (heh except online). This makes the life of sanitizers easier. I don't fully understand the semantics of slice-value but if you have expressions in there, it's worth thinking through if you want a convention between dead data attributes and active code.

sashafirsov commented 4 months ago

@jasvir , the custom-element syntax is a mix of HTML and XSLT conventions. It does not use onXxx event handlers with JS code on it. It does not prohibit its use though. At least for now.

XSLT and custom-element attributes do expression evaluation via XPath. There are various attributes and {xPath} convention for such expressions. select, test, etc... Those do not have prefixes and special convention, just hardcoded names.

The slot attribute prefix can be used for recognition that the value is XPath expression. I.e. "active" attributes:

Regarding the “active” component, it’s not just the attributes that are active, but the entire template is considered active markup. A custom-element is primarily composed of this template.

sashafirsov commented 4 months ago

Sample of default value and slot assignment: image

sashafirsov commented 4 months ago

Status update. Implemented in develop branch. Unit tests tbd for release. Will be shipped along with #42