[wp-trac] [WordPress Trac] #62582: Support length property on strings and arrays on the server

[WordPress Trac]

#62582: Support length property on strings and arrays on the server
-------------------------------+------------------------------
 Reporter:  jonsurrell         |       Owner:  (none)
     Type:  enhancement        |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Interactivity API  |     Version:  6.5
 Severity:  normal             |  Resolution:
 Keywords:  has-patch          |     Focuses:
-------------------------------+------------------------------
Description changed by jonsurrell:

Old description:

> The Interactivity API does not support the `.length` property on numeric
> arrays or strings on the server. This is one place where the behavior of
> server rendering is markedly different from client side rendering. The
> Interactivity API tries to align client and server rendering so that the
> behavior is the same.
>
> [https://developer.mozilla.org/en-
> US/docs/Web/JavaScript/Reference/Global_Objects/String/length String] and
> [https://developer.mozilla.org/en-
> US/docs/Web/JavaScript/Reference/Global_Objects/Array/length array] have
> a `.length` property in JavaScript that the directives processor can
> provide in order to support directives like the following:
>
> {{{
> <div data-wp-interactive="example">
>   <div data-wp-bind--hidden="!state.list.length">
>     <input type="range" min="1" data-wp-bind--max="state.list.length">
>   </div>
>   <div data-wp-bind--hidden="!state.string.length">
>     <h1 data-wp-text="state.string"></h1>
>   </div>
> </div>
> }}}
>
> Testing for falsy `.length` is a common JavaScript idiom.

New description:

 The Interactivity API does not support the `.length` property on numeric
 arrays or strings on the server. This is one place where the behavior of
 server rendering is markedly different from client side rendering. The
 Interactivity API tries to align client and server rendering so that the
 behavior is the same.

 [https://developer.mozilla.org/en-
 US/docs/Web/JavaScript/Reference/Global_Objects/String/length String] and
 [https://developer.mozilla.org/en-
 US/docs/Web/JavaScript/Reference/Global_Objects/Array/length array] have a
 `.length` property in JavaScript that the directives processor can provide
 in order to support directives like the following:

 {{{
 #!xml
 <div data-wp-interactive="example">
   <div data-wp-bind--hidden="!state.list.length">
     <input type="range" min="1" data-wp-bind--max="state.list.length">
   </div>
   <div data-wp-bind--hidden="!state.string.length">
     <h1 data-wp-text="state.string"></h1>
   </div>
 </div>
 }}}

 Testing for falsy `.length` is a common JavaScript idiom.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62582#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform