Help with view() and Jeremy Ashkenas' Inputs in Framework

[aaronkyle]

Hi everyone,
I have an application that was built just before the official Observable Inputs were released, so it relies heavily on Jeremy Ashkenas’s custom inputs. I’ve started the process of porting them over to the Observable Framework: here in GitHub and here as a deployed Framework page. While most inputs are working, I’ve run into a few cases where the I am having trouble with the view() in Framework not behaving as expected.^[ref1][ref2]

For example, when trying 'select' as:

const dd = view(select(["Spring", "Summer", "Fall", "Winter"]))

I get Error: invalid binding

This doesn't happen, e.g. with 'slider', where this works:

const a1_1 = view(slider({
  min: 0, 
  max: 1, 
  step: 0.01, 
  format: v => `${Math.round(100 * v)} per cent`,
  description: "Zero to one, formatted with a custom function"
}))

Any tips for how to correct?

Thanks in advance for your time and help! 🙏

[aaronkyle]

.. It feels like the issue is related to Framework’s view() expecting an Element, but that Jeremy's select is returning a DocumentFragment here:

form: html`
  <form>…</form>
`

I have tried playing around with html.fragment but I am not getting anywhere. I am having difficulties trying to unpack this problem... and how to solve.

[mbostock]

Jeremy’s Inputs relies on the unsafe behavior of the html tagged template literal in notebooks. When you switch it to using Hypertext Literal, you get the invalid binding error because it’s using forms of interpolation that Hypertext Literal doesn’t support. Specifically it comes from this part:

<select name="input" ${multiple ? `multiple size="${size || options.length}"` : ""}>

In Hypertext Literal, you have to rewrite this as:

<select name="input" multiple=${multiple} size=${multiple ? size || options.length : undefined}>

As you also discovered, you’ll probably also need to strip the whitespace around the <form> element; otherwise Hypertext Literal will wrap the form element with a DIV (to preserve the given whitespace).

To make Jeremy’s select work, you’d need to rewrite it as something like:

function select(config = {}) {
  let {
    value: formValue,
    title,
    description,
    disabled,
    submit,
    multiple,
    size,
    options
  } = Array.isArray(config) ? {options: config} : config;
  options = options.map((o) =>
    typeof o === "object" ? o : {value: o, label: o}
  );
  const form = input({
    type: "select",
    title,
    description,
    submit,
    attributes: {disabled},
    getValue: (input) => {
      const selected = Array.prototype.filter
        .call(input.options, (i) => i.selected)
        .map((i) => i.value);
      return multiple ? selected : selected[0];
    },
    form: html`<form>
        <select name="input" multiple=${multiple} size=${multiple ? size || options.length : undefined}>
          ${options.map(
            ({value, label, disabled}) =>
              html`<option value=${value} selected=${
                Array.isArray(formValue)
                  ? formValue.includes(value)
                  : formValue === value
              } disabled=${disabled}>${label}</option>`
          )}
        </select>
      </form>`
  });
  form.output.remove();
  return form;
}

I think it will be easier (and more beneficial) to port your application to Observable Inputs than it will be to rewrite Jeremy’s Inputs to use Hypertext Literal. You might find our Legacy Inputs especially helpful.

Alternatively, you could avoid using Hypertext Literal, and instead use the unsafe version of html from the older Observable Standard Library used by notebooks. One way to do that would be:

import {html} from "npm:@observablehq/stdlib@5/src/html";

[aaronkyle]

Thank you @mbostock for this enlightening response! I am excited to continue to adapt and learn. I have implemented 'inputs 3 ways' at the original /inputs URL for the deployed projects, where I include the legacy html (which immediately worked) as well as one where I was re-writing to avoid the template literal (hacky but effective), as well as one that is safe and involves a copy of direct conversion (thank you for that link) and some hacky workarounds for edge cases. I will aim to update everything to use Observable Inputs, but expect that change to be time intensive. For the moment, my goal is to get a 'working archive', so to speak. Thank you for your time and help!