Often, our Components will need access to more complex data or values derived from State and/or Attributes. For these cases, we can use computedProperties, which allow specifying values or functions which the Component's Template can use when rendering to fetch these values.

Computed Properties use the * prefix in Template Notations:

<example-component :class="*classnames" :data-account-id="*account.id">
  <!-- ... -->
</example-component>
Copy

function getAccount(userId) {
  const accountInfo = accounts.get(userId);

  return {
    id: userId,
    ...accountInfo,
  };
}

define("example-component", {
  template: /* ... */,

  // Can be an object or a function that returns an object.
  // Functions returned in the object will be evaluated during renders and are
  // passed a reference to the relevant HTML element
  computedProperties() {
    return {
      // Assigning a value to a `class` attribute automatically converts it to
      // a valid HTML classlist string, similar to classnames()
      classnames: ["profile", {
        admin: this.state.user.isAdministrator
      }],

      // Provide any shape of data to the template. Nested properties are
      // accessible using dot-style path accessors in notations
      account: getAccount(this.state.user.id),
    }
  }
})
Copy

Computed Properties are extremely powerful and can be used in a variety of ways. Sometimes they'll just be quick calculations like the current time of day, but they can also access any application state to allow for sharing large, complex data structures across all components in your app though, for example, a State object shared as a singleton.

import UserRepository from "#app/stores";

define("user-profile", {
  template: html`
    <div>
      <h2>${"*profile.name"}</h2>
      <p>${"*profile.bio"}</p>
    </div>
  `,

  computedProperties() {
    const userId = this.getAttribute("user-id");

    if (userId === null) {
      throw new Error("Missing User ID");
    }

    const user = UserRepository.findOneById(userId);
    return {
      name: user.name,
      bio: user.bio,
    };
  }
});
Copy