Skip to content

Commit 49c47f6

Browse files
committed
Add notes about renderComponent and tracked utilities
1 parent 88bb307 commit 49c47f6

File tree

1 file changed

+64
-1
lines changed

1 file changed

+64
-1
lines changed

content/ember-released-6-8.md

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,70 @@ Ember.js 6.8 introduced <insert number here> bug fixes.
2929

3030
#### Features
3131

32-
Ember.js 6.8 introduces <insert number here> 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';
42+
43+
const Greeting = <template>Hello {{@name}}!</template>;
44+
45+
const result = renderComponent(Greeting, {
46+
into: document.querySelector('#my-element'),
47+
args: { name: 'World' }
48+
});
49+
50+
// Clean up when done
51+
result.destroy();
52+
```
53+
54+
The API supports several configuration options including:
55+
- `into`: The DOM element to render into
56+
- `args`: Arguments to pass to the component - these can be a `trackedObject`
57+
- `owner`: Optional owner object for service access, (or minimal partial implementation of what your component needs)
58+
59+
[Live Demo](https://limber.glimdown.com/edit?c=JYWwDg9gTgLgBAbzlApgOwCYqgYQuCNdeAXzgDMp84ByAARRACNsB6VTbbGgbgChQkWIjgwoAQwDGAaxQYA8kwBWKSaQpUQtBszaopMYADcUrSRAA2F1YcIBnXnz7m0d%2BG-EwUcALyiJMnKKKmoAFEh8cHDmAK5oMABccAAMADRwkXDAaJKhAJQiHl4AdLHxANTlcGR8JHn8zvbwAGIQEL5wADxe4BaeKAB8mZ3kwCgWGHYoMAOd1gDm6BgDrRCdrAtLQ1FRCAhFKKUQcTAkJJlRnUwxMDCEcISSFsAyPnsHxdmSZyttlevXW6EbZdVijcaTaZDdY9MB9LwDBrkOJqYD3DhYKD5RCZazwcaMYgdDAQSQxEDEUr6LwAUWsFPioRoGGMNHqmQx2DwBCIjNW6SQ2TuSQJDNI7KiqBgMSgaDgouI-HOfG6jDh-RBAGUYP04OJMMgUAZjMAYABPPWoOB2AAW4lQGASTku4ImUxmcxQi0wAwASm0YOtNj6Loh9jqSmVTucdl1AXc5Y9nq93hHDl8fqt-qx48DhmCxm6oZlMntQpyoHkzirWLD4YMgA&format=gjs&shadowdom=on)
60+
61+
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')}}>
83+
Add Item
84+
</button>
85+
{{/let}}
86+
</template>
87+
```
88+
89+
[Live Demo](https://limber.glimdown.com/edit?c=JYWwDg9gTgLgBAbzjKBDAxgawKYBMCCUaAnnAL5wBmUEIcA5AALYgBG2UA9FNhjMADdsndBAA2Y7On4QAdgGd6AbgBQoSLERw55KjTpMW7LiAi5glYB2Vrw0eEkqzd1Wg2ZsOnABbYxYa1UVUQV4YBgWeTgAXjgAbXpUMDBJegAaBlZUWWzUegBdVRD5eFRcXABJCLpYgApUIgzwlgBKGIA%2BOAaoADowAFd5b1rmkBaggB5qlNQI9pU4RAQAYkl4WpQMHAIiVFJR%2BTbUKIAfMWASk7IyBcWl5d50bzhzkq7T0aubu7uJ8wF2ggEKNrhNOP95j8gZxHt5rrdFgi4BNWP0YDAdECdPR0OcsPQ4LUnF1ylUWC8LvAcb4iMR6C1rpCfnB8OU4GSQEiwaj0XImdC1vCwdMxLNsO0gA&format=gjs)
90+
91+
You can read more about this on the page for [RFC #1068](https://rfcs.emberjs.com/id/1068-tracked-collections/)
92+
93+
This feature was inspired by `tracked-built-ins` and brings these essential reactivity primitives directly into the framework core.
94+
95+
3396

3497
#### Deprecations
3598

0 commit comments

Comments
 (0)