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:
David Taylor
2023-02-02 16:25:57 +00:00
committed by GitHub
parent adbf69c300
commit ca2b2d034f
3 changed files with 98 additions and 0 deletions
@@ -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"]);
});
});