DEV: Introduce API for rendering Glimmer inside posts (#20140)
`helper.renderGlimmer` will return an HTML element which can be added to a post's `cooked`
Example usage:
```
import { hbs } from "ember-cli-htmlbars";
api.decorateCookedElement((cooked, helper) => {
const glimmerElement = helper.renderGlimmer(
"div.my-wrapper-class",
hbs`<DButton @icon={{@data.param}} @translatedLabel="Hello world from Glimmer Component"/>`,
{ param: "user-plus" }
);
cooked.appendChild(glimmerElement);
}, { onlyStream: true, id: "my-id" });
```
See `widgets/render-glimmer.js` for more detailed usage information.
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { hbs } from "ember-cli-htmlbars";
|
||||
import { setComponentTemplate } from "@ember/component";
|
||||
import { test } from "qunit";
|
||||
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
|
||||
import { visit } from "@ember/test-helpers";
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
|
||||
acceptance("Acceptance | decorateCookedElement", function () {
|
||||
test("decorator with renderGlimmer works", async function (assert) {
|
||||
class DemoComponent extends Component {
|
||||
static eventLog = [];
|
||||
constructor() {
|
||||
DemoComponent.eventLog.push("created");
|
||||
return super(...arguments);
|
||||
}
|
||||
willDestroy() {
|
||||
DemoComponent.eventLog.push("willDestroy");
|
||||
}
|
||||
}
|
||||
setComponentTemplate(
|
||||
hbs`<span class='glimmer-component-content'>Hello world</span>`,
|
||||
DemoComponent
|
||||
);
|
||||
|
||||
withPluginApi(0, (api) => {
|
||||
api.decorateCookedElement((cooked, helper) => {
|
||||
if (helper.getModel().post_number !== 1) {
|
||||
return;
|
||||
}
|
||||
cooked.appendChild(
|
||||
helper.renderGlimmer(
|
||||
"div.glimmer-wrapper",
|
||||
hbs`<@data.component />`,
|
||||
{ component: DemoComponent }
|
||||
)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
await visit("/t/internationalization-localization/280");
|
||||
|
||||
assert.dom("div.glimmer-wrapper").exists();
|
||||
assert.dom("span.glimmer-component-content").exists();
|
||||
assert.deepEqual(DemoComponent.eventLog, ["created"]);
|
||||
|
||||
await visit("/");
|
||||
|
||||
assert.deepEqual(DemoComponent.eventLog, ["created", "willDestroy"]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user