🎁 Unwrapping the Eighth festive release for 2024: New & Improved App Element API

[Hendrik]

We’re excited to announce an update to the App Element API, now in beta! This upgrade gives developers more control and resolves long-standing issues like race conditions when managing app elements in designs. It’s like giving your app a holiday gift—wrapping it in functionality and tying it with a bow of reliability.

Here’s what’s shiny and new:

• addElement Functionality: Always add new elements with precision—no more relying on user selections

• Scoped Updates: The AppElementChangeHandler now includes an update method that ensures updates are scoped to the correct element, even when users selects a different app element

• Eliminated Race Conditions: User selection no longer interfere with app element updates

How to Get Started

1. Explore the Docs:

Dive into our beta documentation and updated App Elements guide for full details. (Note: This is a beta feature and subject to change.)

2. Check Out the Examples:

We added an example app in the starter kit repository that leverages this new API.
See how you can integrate it into your app!

3. Code Overview:

Here’s how to use the new API:

Initialize the App Element:

const appElementClient = initAppElement<AppElementData>({
  render: (data) => (...)
});

// Add a new app element
await appElementClient.addElement({
  data: state.data,
});

Handle Element Changes:

appElementClient.registerOnElementChange((appElement) => {
  if (appElement) {
    console.log('Element data:', appElement.data);
    // Use the beta `update` method to atomically update the selected element
    appElement.update({
      data: { /* updated data */ },
      placement: { /* updated placement */ },
    });
  } else {
    console.log('No element selected');
  }
}

Stay Tuned for More

With more releases rolling out daily this week, be sure to keep an eye out for even more exciting updates!