Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Support mobile-specific template overrides of colocated components (#20307) 

Long-term, we may aim to remove the ability to have mobile-specific component templates. But for now, this commit will allow us to colocate a component's template, while keeping the mobile-specific-override functionality for core, plugins and themes.
This commit is contained in:
David Taylor 2023-02-15 10:55:08 +00:00 committed by GitHub
parent a8fa3299de
commit 0b1ce9cede
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/assets/javascripts/discourse/app/initializers/colocated-template-overrides.js
View File

@ -15,20 +15,23 @@ GlimmerManager.getComponentTemplate = (component) => {
export default {
name: "colocated-template-overrides",
after: "populate-template-map",
after: ["populate-template-map", "mobile"],
initialize(container) {
this.eachThemePluginTemplate((templateKey, moduleNames) => {
if (!templateKey.startsWith("components/")) {
return;
}
this.site = container.lookup("service:site");
if (DiscourseTemplateMap.coreTemplates.has(templateKey)) {
this.eachThemePluginTemplate((templateKey, moduleNames, mobile) => {
if (!mobile && DiscourseTemplateMap.coreTemplates.has(templateKey)) {
// It's a non-colocated core component. Template will be overridden at runtime.
return;
}
const componentName = templateKey.slice("components/".length);
let componentName = templateKey;
if (mobile) {
componentName = componentName.slice("mobile/".length);
}
componentName = componentName.slice("components/".length);
const component = container.owner.resolveRegistration(
`component:${componentName}`
);
@ -43,12 +46,28 @@ export default {
},
eachThemePluginTemplate(cb) {
for (const [key, value] of DiscourseTemplateMap.pluginTemplates) {
cb(key, value);
const { coreTemplates, pluginTemplates, themeTemplates } =
DiscourseTemplateMap;
const orderedOverrides = [
[pluginTemplates, "components/", false],
[themeTemplates, "components/", false],
];
if (this.site.mobileView) {
orderedOverrides.push(
[coreTemplates, "mobile/components/", true],
[pluginTemplates, "mobile/components/", true],
[themeTemplates, "mobile/components/", true]
);
}
for (const [key, value] of DiscourseTemplateMap.themeTemplates) {
cb(key, value);
for (const [map, prefix, mobile] of orderedOverrides) {
for (const [key, value] of map) {
if (key.startsWith(prefix)) {
cb(key, value, mobile);
}
}
}
},

64
app/assets/javascripts/discourse/tests/integration/template-override-test.js
View File

@ -5,6 +5,7 @@ import { hbs } from "ember-cli-htmlbars";
import { registerTemporaryModule } from "../helpers/temporary-module-helper";
import { setComponentTemplate } from "@glimmer/manager";
import Component from "@glimmer/component";
import { forceMobile, resetMobile } from "discourse/lib/mobile";
class MockColocatedComponent extends Component {}
setComponentTemplate(hbs`Colocated Original`, MockColocatedComponent);
@ -22,6 +23,10 @@ function registerBaseComponents(namespace = "discourse") {
`${namespace}/components/mock-colocated`,
MockColocatedComponent
);
registerTemporaryModule(
`${namespace}/templates/mobile/components/mock-colocated`,
hbs`Core mobile template`
);
registerTemporaryModule(
`${namespace}/components/mock-resolved`,
MockResolvedComponent
@ -30,6 +35,10 @@ function registerBaseComponents(namespace = "discourse") {
`${namespace}/templates/components/mock-resolved`,
MockResolvedComponentTemplate
);
registerTemporaryModule(
`${namespace}/templates/mobile/components/mock-resolved`,
hbs`Core resolved mobile`
);
}
function registerThemeOverrides() {
@ -37,10 +46,18 @@ function registerThemeOverrides() {
"discourse/theme-12/discourse/templates/components/mock-colocated",
hbs`Colocated Theme Override`
);
registerTemporaryModule(
`discourse/theme-12/discourse/templates/mobile/components/mock-colocated`,
hbs`Colocated Mobile Theme Override`
);
registerTemporaryModule(
"discourse/theme-12/discourse/templates/components/mock-resolved",
hbs`Resolved Theme Override`
);
registerTemporaryModule(
"discourse/theme-12/discourse/templates/mobile/components/mock-resolved",
hbs`Resolved Mobile Theme Override`
);
}
function registerPluginOverrides() {
@ -81,6 +98,26 @@ module("Integration | Initializers | template-overrides", function () {
});
});
module("with core mobile overrides", function (hooks) {
hooks.beforeEach(() => {
registerBaseComponents();
forceMobile();
});
hooks.afterEach(resetMobile);
setupRenderingTest(hooks);
test("core mobile overrides are used", async function () {
await render(TestTemplate);
assert
.dom("#mock-colocated")
.hasText("Core mobile template", "colocated component correct");
assert
.dom("#mock-resolved")
.hasText("Core resolved mobile", "resolved component correct");
});
});
module("with theme overrides", function (hooks) {
hooks.beforeEach(() => registerBaseComponents());
hooks.beforeEach(registerThemeOverrides);
@ -97,6 +134,33 @@ module("Integration | Initializers | template-overrides", function () {
});
});
module("with mobile theme overrides", function (hooks) {
hooks.beforeEach(() => {
registerThemeOverrides();
forceMobile();
registerBaseComponents();
});
hooks.afterEach(resetMobile);
setupRenderingTest(hooks);
test("mobile theme overrides are used", async function () {
await render(TestTemplate);
assert
.dom("#mock-colocated")
.hasText(
"Colocated Mobile Theme Override",
"colocated component correct"
);
assert
.dom("#mock-resolved")
.hasText(
"Resolved Mobile Theme Override",
"resolved component correct"
);
});
});
module("with plugin overrides", function (hooks) {
hooks.beforeEach(() => registerBaseComponents());
hooks.beforeEach(registerPluginOverrides);