You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Ember.js 6.8 introduces <insertnumberhere> new features.
32
+
Ember.js 6.8 introduces 2 new features.
33
+
34
+
##### `renderComponent`
35
+
36
+
The new `renderComponent` API provides a powerful way to render components into any DOM element, making it easier to integrate components in other environments like d3, ag-grid, WYSIWYG editors, and more! This feature is particularly useful for micro applications, REPLs, and "islands"-based tools.
37
+
38
+
`renderComponent` can be imported from `@ember/renderer` and accepts a component definition along with configuration options:
39
+
40
+
```gjs
41
+
import { renderComponent } from '@ember/renderer';
You can read more about this on the page for [RFC #1068](https://rfcs.emberjs.com/id/1099-rendercomponent/)
62
+
63
+
64
+
##### `@ember/reactive/collections`
65
+
66
+
Ember 6.8 introduces a new package `@ember/reactive/collections` that provides built-in tracking utilities for common collections. This package includes tracked versions of JavaScript's native collection types: `trackedArray`, `trackedObject`, `trackedMap`, `trackedSet`, `trackedWeakMap`, and `trackedWeakSet`.
67
+
68
+
These utilities offer performance and ergonomics improvements over what has been used via public APIs.
69
+
70
+
```gjs
71
+
import { trackedArray } from '@ember/reactive/collections';
72
+
73
+
const items = ['apple', 'banana'];
74
+
const addItem = (arr, item) => arr.push(item);
75
+
76
+
<template>
77
+
{{#let (trackedArray items) as |list|}}
78
+
{{#each list as |item|}}
79
+
<div>{{item}}</div>
80
+
{{/each}}
81
+
82
+
<button {{on 'click' (fn addItem list 'cherry')}}>
0 commit comments