DEV: Modernise CustomHtml implementation (#20266)

Dynamically setting `layoutName` is not compatible with template colocation. This commit updates `<CustomHTML` to remove the `custom-html-container.hbs` template, and instead dynamically sets the `layout` property as required. Once the deprecated 'custom hbs' feature is removed, this can be updated to be a regular colocated component template.
This commit is contained in:
David Taylor 2023-02-13 18:58:59 +00:00 committed by GitHub
parent a5e45d90fe
commit 87f9583dcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 6 deletions

View File

@ -1,3 +0,0 @@
import Component from "@ember/component";
export default Component.extend({});

View File

@ -1,6 +1,7 @@
import Component from "@ember/component"; import Component from "@ember/component";
import { getCustomHTML } from "discourse/helpers/custom-html"; import { getCustomHTML } from "discourse/helpers/custom-html";
import { getOwner } from "discourse-common/lib/get-owner"; import { getOwner } from "discourse-common/lib/get-owner";
import { hbs } from "ember-cli-htmlbars";
import deprecated from "discourse-common/lib/deprecated"; import deprecated from "discourse-common/lib/deprecated";
export default Component.extend({ export default Component.extend({
@ -13,7 +14,7 @@ export default Component.extend({
if (html) { if (html) {
this.set("html", html); this.set("html", html);
this.set("layoutName", "components/custom-html-container"); this.set("layout", hbs`{{this.html}}`);
} else { } else {
const template = getOwner(this).lookup(`template:${name}`); const template = getOwner(this).lookup(`template:${name}`);
if (template) { if (template) {
@ -21,7 +22,7 @@ export default Component.extend({
"Defining an hbs template for CustomHTML rendering is deprecated. Use plugin outlets instead.", "Defining an hbs template for CustomHTML rendering is deprecated. Use plugin outlets instead.",
{ id: "discourse.custom_html_template" } { id: "discourse.custom_html_template" }
); );
this.set("layoutName", name); this.set("layout", template);
} }
} }
}, },