Array parameters to custom components

[Will Crichton]

I'm trying to write a component that turns a list of strings into a bulleted list. Something like:

~~~ js { hide=true }
items = ["Milk", "Eggs", "Cheese"]
~~~

Today I am going shopping for:

::: bullet-list { items=`items` }
:::

I have implemented a custom component like this:

import { DependentElement } from "@living-papers/components";

export default class BulletList extends DependentElement {
  static get properties() {
    return {
      items: { type: Array },
    };
  }

  constructor() {
    super();
    this.items = [];
  }

  render() {    
    var ul = document.createElement("ul");
    this.items.forEach((item) => {
      var li = document.createElement("li");
      var p = document.createElement("p");
      p.textContent = item;
      li.appendChild(p);
      ul.appendChild(li);
    });
    return ul;
  }
}

However, the syntax and semantics of array parameters seems very flaky? I see that the option-text component uses a numeric array input that seems to work. But all of the following seem to bring up issues:

• Using a block element instead of an inline element
• Using an array of strings instead of an array of numbers
• Using a variable to hold the array instead of passing a constant expression
• Putting spaces between the elements of the array (!)

Where "issues" means either the program fails to parse, or the array gets stringified weirdly and the component has a null value for this.items.

Is there a better approach to what I'm trying to do?

[Jeffrey Heer]

Thanks! I believe the crux of this issue was improper string formatting when assigning JavaScript values to HTML attributes. I've updated the Living Papers runtime to use JSON.stringify on object values. This update is included in version 0.1.6 (just released). Hopefully this resolves the issue for you. If not, please let us know!

Also, as you are not using any external dependencies, your custom element can subclass ArticleElement instead. (This will of course be clearer once we have proper documentation in place...)

[Will Crichton]

That fixed my issue. At last, I can write down my shopping list :-)

[Jeffrey Heer]

Enjoy your omelet!