AUR0819

Error Message

AUR0819: Spreading to bindables onto non custom element

Description

This error indicates an attempt to use the spread syntax (...) to bind properties onto a target element that is not a custom element or doesn't support receiving spread bindings. The spread syntax is primarily intended for passing multiple bindable properties to custom elements or custom attributes designed to handle them.

(Note: As of the current analysis, the exact code location throwing this specific error could not be identified, suggesting it might be related to experimental features, legacy code, or specific edge cases in template compilation/runtime processing. The description is based on the error message's intent.)

Cause

The likely cause is using the spread syntax on a standard HTML element or a component that isn't configured to accept spread bindings.

Example scenario leading to this error:

<template>
  <require from="./my-view-model-data-provider"></require>

  <!-- Incorrect: Trying to spread onto a standard <div> -->
  <div ...${someObject}></div>

  <!-- Incorrect: Trying to spread onto a custom element not designed for it -->
  <some-element ...${someObject}></some-element>
</template>

The spread syntax (...${expression}) is typically used like this:

<template>
  <require from="./my-component"></require>

  <!-- Correct: Spreading an object onto a custom element 'my-component' -->
  <!-- This assumes 'my-component' has bindables matching the keys in 'componentProps' -->
  <my-component ...${componentProps}></my-component>
</template>

Where componentProps might be an object like { title: 'Hello', count: 5 }, and my-component would have corresponding @bindable properties title and count.

Solution

1. Target a Custom Element/Attribute: Ensure the spread syntax (...) is used only on custom elements or custom attributes specifically designed to accept spread bindings.

2. Bind Properties Individually: If you intend to bind properties to a standard HTML element or a component not supporting spread, bind each property individually using standard binding commands (.bind, .one-time, attribute interpolation, etc.).

3. Verify Component Implementation: If spreading onto a custom element, ensure the element's definition correctly declares the corresponding @bindable properties.

Example

<template>
  <require from="./my-component"></require>

  <!-- Data to bind -->
  <!-- viewModel.componentData = { message: 'Welcome!', enabled: true }; -->

  <!-- Incorrect: Spreading onto a standard div -->
  <div ...${componentData}></div>

  <!-- Correct: Binding properties individually to a standard div (using hypothetical attributes) -->
  <div data-message.bind="componentData.message" data-enabled.bind="componentData.enabled"></div>

  <!-- Correct: Spreading onto a custom element designed for these bindables -->
  <my-component ...${componentData}></my-component>

</template>

// my-component.ts (Example Custom Element)
import { bindable, customElement } from 'aurelia';

@customElement('my-component')
export class MyComponent {
  @bindable message: string = '';
  @bindable enabled: boolean = false;

  // This component is designed to accept 'message' and 'enabled'
  // properties, making it suitable for spread syntax with an object
  // containing these keys.
}

Debugging Tips

• Identify the element where the spread syntax (...) is being used.

• Verify if the target element is a standard HTML element (like div, span, input) or a custom element (<my-component>).

• If it's a custom element, check its definition to ensure it has @bindable properties matching the keys in the object being spread.

• If it's a standard HTML element, refactor the binding to set attributes/properties individually.

• Consult the documentation or implementation of the target component if you are unsure whether it supports spread bindings.