Support length property on strings and arrays on the server

[jonsurrell]

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.

​String and ​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.

Add .length to directives processing on the server on strings and numeric arrays.

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.

​String and ​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.

Trac ticket: https://core.trac.wordpress.org/ticket/62582

This is ready for review @luisherranz @michalczaplinski @darerodz @cbravobernal.

[gziolo]

In 59477:

Interactivity API: Support length property on strings and arrays on the server

The Interactivity API tries to align client and server rendering so that the behavior is the same. Adds missing handling for .length to directives processing on the server on strings and numeric arrays which is inherently supported through JavaScript language on the client.

Props jonsurrell, gziolo, luisherranz.
Fixes #62582.

Committed with https://core.trac.wordpress.org/changeset/59477.

[JeffPaul]

Note that the dev note has been published as ​Interactivity API best practices in 6.8.