@jarenjs/view 0.72.0 → 0.72.2

package/docs/VIEW-FORMAT.md

@@ -228,6 +228,14 @@ pure: no state, no DOM, safe in any runtime.
 In trusted mode, a `textarea` carrying a `value` prop serializes that
 value as escaped text content, overriding its children; nullish values
 produce empty text. A leading newline is preserved through HTML parsing.
+For a `select` with a `value` prop, serialization places `selected` on
+the matching `option`, overriding authored selections and omitting the
+select's ineffective `value` attribute. A single select marks its first
+match; a `multiple` select accepts an array. Matching uses string values,
+including an option's normalized text when it has no value attribute,
+and works through `optgroup`. HTML cannot encode a single select's
+`selectedIndex = -1`: with no match, the browser may select its default
+option until the DOM renderer reconciles the control.
 Safe mode keeps its attribute-only policy (§8).
 
 Hydration in 0.1 is a client-side first render into the same container

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jarenjs/view",
   "private": false,
-  "version": "0.72.0",
+  "version": "0.72.2",
   "type": "module",
   "main": "./src/index.js",
   "types": "./dist/types/index.d.ts",
@@ -53,7 +53,7 @@
     "ssr"
   ],
   "dependencies": {
-    "@jarenjs/core": "^0.72.0"
+    "@jarenjs/core": "^0.72.2"
   },
   "scripts": {
     "build": "npm run build:types",

package/src/html.js

@@ -29,12 +29,20 @@ const VOID_ELEMENTS = new Set([
 /** Props that never serialize to markup. */
 const SKIP_PROPS = new Set(['key', 'on', 'memo']);
 
-/** A controlled textarea's value is its text content in HTML markup. */
-const TEXTAREA_SKIP_PROPS = new Set([...SKIP_PROPS, 'value']);
+/** Controlled textareas/selects express their value through their children. */
+const VALUE_SKIP_PROPS = new Set([...SKIP_PROPS, 'value']);
+const OPTION_SKIP_PROPS = new Set([...SKIP_PROPS, 'selected']);
 
 /** Widget-vnode props that configure the widget, not the host element. */
 const WIDGET_SKIP_PROPS = new Set(['key', 'on', 'memo', 'name', 'props', 'tag']);
 
+/** The text of an option whose value attribute is absent. @param {any} vnode */
+function optionText(vnode) {
+  if (isTextNode(vnode)) return String(vnode);
+  if (!isElementNode(vnode) || vnode[0] === 'script') return '';
+  return childrenOf(vnode).map(optionText).join('');
+}
+
 /**
  * Escape text content: `&`, `<`, `>`.
  * @param {string} text
@@ -142,9 +150,10 @@ export function renderToString(vnode, options = {}) {
  * @param {Record<string, { ssr?: (props: any) => any }> | undefined} widgets
  * @param {import('./safe.js').SafePolicy | null} policy
  * @param {((info: { kind: string, name: string }) => void) | null} onUnsafe
+ * @param {{values: Set<string>, multiple: boolean, matched: boolean} | null} [selection]
  * @returns {string}
  */
-function renderNode(vnode, widgets, policy, onUnsafe) {
+function renderNode(vnode, widgets, policy, onUnsafe, selection = null) {
   if (isTextNode(vnode)) {
     return escapeText(String(vnode));
   }
@@ -170,7 +179,7 @@ function renderNode(vnode, widgets, policy, onUnsafe) {
     // `ssr()` (the documented behavior for both)
     const ssr = def !== undefined ? def.ssr : undefined;
     const inner = ssr !== undefined
-      ? renderNode(ssr.call(def, props.props ?? null), widgets, policy, onUnsafe)
+      ? renderNode(ssr.call(def, props.props ?? null), widgets, policy, onUnsafe, selection)
       : '';
     return '<' + hostTag + serializeProps(props, WIDGET_SKIP_PROPS, policy, onUnsafe) + '>'
       + inner + '</' + hostTag + '>';
@@ -188,8 +197,28 @@ function renderNode(vnode, widgets, policy, onUnsafe) {
     onUnsafe({ kind: 'event', name: 'on' });
   }
   const controlledTextarea = policy === null && tag === 'textarea' && 'value' in props;
+  const controlledSelect = policy === null && tag === 'select' && 'value' in props;
+  if (tag === 'select') {
+    const multiple = props.multiple != null && props.multiple !== false;
+    selection = controlledSelect ? {
+      values: new Set(multiple && Array.isArray(props.value)
+        ? props.value.map(String) : [props.value == null ? '' : String(props.value)]),
+      multiple: multiple && Array.isArray(props.value), matched: false,
+    } : null;
+  }
+  const controlledOption = tag === 'option' && selection !== null;
   let out = '<' + tag + serializeProps(props,
-    controlledTextarea ? TEXTAREA_SKIP_PROPS : SKIP_PROPS, policy, onUnsafe);
+    controlledTextarea || controlledSelect ? VALUE_SKIP_PROPS
+      : controlledOption ? OPTION_SKIP_PROPS : SKIP_PROPS, policy, onUnsafe);
+  if (controlledOption) {
+    const value = props.value == null || props.value === false
+      ? optionText(vnode).replace(/[\t\n\f\r ]+/g, ' ').replace(/^ | $/g, '')
+      : props.value === true ? '' : String(props.value);
+    if (selection.values.has(value) && (selection.multiple || !selection.matched)) {
+      out += ' selected';
+      selection.matched = true;
+    }
+  }
   if (VOID_ELEMENTS.has(tag)) {
     return out + '>';
   }
@@ -202,7 +231,7 @@ function renderNode(vnode, widgets, policy, onUnsafe) {
   }
   const children = childrenOf(vnode);
   for (let i = 0; i < children.length; i++) {
-    out += renderNode(children[i], widgets, policy, onUnsafe);
+    out += renderNode(children[i], widgets, policy, onUnsafe, selection);
   }
   return out + '</' + tag + '>';
 }