Pass inputs as Object props instead of setting properties on the web component's reference

[MantisClone]

Problem

Today, the end-user must pass inputs into the web component by storing a reference to it and setting properties on it before passing the ref as a prop.

This is a lot of boilerplate code for the end-user to write.

Solution

Configure the web component to accept Object props. This would reduce the amount of boilerplate code that the end user must write.

<svelte:options
  customElement={{
    tag: 'invoice-dashboard',
    props: {
      config: { type: 'Object' },
      wallet: {type: 'Object' },
      requestnetwork: { type: 'Object', attribute: 'request-network' },
    },

Definition of Done

• Update the READMEs and documentation

Reference

https://svelte.dev/docs/custom-elements-api#component-options

• props: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
  • attribute: string: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning attribute: "".
  • reflect: boolean: By default, updated prop values do not reflect back to the DOM. To enable this behavior, set reflect: true.
  • type: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object': While converting an attribute value to a prop value and reflecting it back, the prop value is assumed to be a String by default. This may not always be accurate. For instance, for a number type, define it using type: "Number" You don't need to list all properties, those not listed will use the default settings.

[MantisClone]

@sstefdev if this is not possible, please leave a comment here explaining why. Ideally, we'd have a PR showing what you tried but I don't want to create unnecessary busy work. Please consider committing and pushing your work as you go, in the future.

[sstefdev]

It's not possible to pass complex objects as props in Svelte web components due to limitations in the get_custom_element_value function. This function serializes objects to JSON strings when setting attributes and then tries to parse them back into objects. This approach fails with complex objects, especially those with methods or circular references.

function get_custom_element_value(a, e, n, o) {
  var u;
  const c = (u = n[a]) == null ? void 0 : u.type;
  if (e = c === "Boolean" && typeof e != "boolean" ? e != null : e, !o || !n[a])
    return e;
  if (o === "toAttribute")
    switch (c) {
      case "Object":
      case "Array":
        return e == null ? null : JSON.stringify(e);
      case "Boolean":
        return e ? "" : null;
      case "Number":
        return e ?? null;
      default:
        return e;
    }
  else
    switch (c) {
      case "Object":
      case "Array":
        return e && JSON.parse(e);
      case "Boolean":
        return e;
      case "Number":
        return e != null ? +e : e;
      default:
        return e;
    }
}

Since this function is not overridable, it limits the ability to pass and handle complex objects. We should consider setting properties directly in JavaScript instead of using attributes for complex objects.

[MantisClone]

Closing as not possible.