fix: avoid undefined/null expression values (#461)

src/picker/components/Picker/PickerTemplate.js

@@ -37,7 +37,7 @@ export function render (container, state, helpers, events, actions, refs, abortS
         data-ref="rootElement"
         class="picker"
         aria-label="${state.i18n.regionLabel}"
-        style="${state.pickerStyle}">
+        style="${state.pickerStyle || ''}">
         <!-- using a spacer div because this allows us to cover up the skintone picker animation -->
         <div class="pad-top"></div>
          <div class="search-row">
@@ -81,7 +81,7 @@ export function render (container, state, helpers, events, actions, refs, abortS
                 aria-expanded="${state.skinTonePickerExpanded}"
                 aria-controls="skintone-list"
                 data-on-click="onClickSkinToneButton">
-          ${state.skinToneButtonText}
+          ${state.skinToneButtonText || ''}
         </button>
       </div>
       <span id="skintone-description" class="sr-only">${state.i18n.skinToneDescription}</span>
@@ -152,7 +152,7 @@ export function render (container, state, helpers, events, actions, refs, abortS
         <div class="message ${state.message ? '' : 'gone'}"
              role="alert"
              aria-live="polite">
-          ${state.message}
+          ${state.message || ''}
         </div>
 
         <!--The tabindex=0 is so people can scroll up and down with the keyboard. The element has a role and a label, so I

src/picker/components/Picker/framework.js

@@ -79,6 +79,10 @@ function patch (expressions, instanceBindings) {
 
     const expression = expressions[expressionIndex]
 
+    if (import.meta.env.MODE !== 'production' && (expression === undefined || expression === null)) {
+      throw new Error('framework does not support undefined or null expressions - these would get stringified as-is')
+    }
+
     if (currentExpression === expression) {
       // no need to update, same as before
       continue

test/spec/picker/framework.test.js

@@ -76,6 +76,33 @@ describe('framework', () => {
     expect(node.outerHTML).toBe('<div>baz</div>')
   })
 
+  test('set expression to undefined/null', () => {
+    const state = {}
+    const { html } = createFramework(state)
+
+    const renders = [
+      () => html`<div class="${state.value}"></div>`,
+      () => html`<div class=${state.value}></div>`,
+      () => html`<div class="foo ${state.value}"></div>`,
+      () => html`<div class="${state.value} bar"></div>`,
+      () => html`<div class="foo ${state.value} bar"></div>`,
+      () => html`<div>${state.value}</div>`,
+      () => html`<div>foo ${state.value}</div>`,
+      () => html`<div>${state.value} bar</div>`,
+      () => html`<div>foo ${state.value} bar</div>`
+    ]
+
+    state.value = undefined
+    for (const render of renders) {
+      expect(render).toThrow(/framework does not support undefined or null expressions/)
+    }
+
+    state.value = null
+    for (const render of renders) {
+      expect(render).toThrow(/framework does not support undefined or null expressions/)
+    }
+  })
+
   // Framework no longer supports this since we switched from HTML comments to text nodes
   test.skip('render two dynamic expressions inside the same element', () => {
     const state = { name1: 'foo', name2: 'bar' }