Skip to content

DEV: Improve template-override deprecations (stable) #32801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 22, 2025
Merged

DEV: Improve template-override deprecations (stable) #32801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 30 additions & 4 deletions app/assets/javascripts/discourse/app/instance-initializers/component-templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import deprecated from "discourse/lib/deprecated";
import DiscourseTemplateMap from "discourse/lib/discourse-template-map";
import { isTesting } from "discourse/lib/environment";
import { RAW_TOPIC_LIST_DEPRECATION_OPTIONS } from "discourse/lib/plugin-api";
import { getThemeInfo } from "discourse/lib/source-identifier";

let THROW_GJS_ERROR = isTesting();

Expand All @@ -18,6 +19,24 @@ export function overrideThrowGjsError(value) {

const LEGACY_TOPIC_LIST_OVERRIDES = ["topic-list", "topic-list-item"];

function sourceForModuleName(name) {
const pluginMatch = name.match(/^discourse\/plugins\/([^\/]+)\//)?.[1];
if (pluginMatch) {
return {
type: "plugin",
name: pluginMatch,
};
}

const themeMatch = name.match(/^discourse\/theme-(\d+)\//)?.[1];
if (themeMatch) {
return {
...getThemeInfo(parseInt(themeMatch, 10)),
type: "theme",
};
}
}

export default {
after: ["populate-template-map", "mobile"],

Expand All @@ -31,11 +50,15 @@ export default {
}

let componentName = templateKey;
const finalOverrideModuleName = moduleNames[moduleNames.length - 1];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🏌️

Suggested change
const finalOverrideModuleName = moduleNames[moduleNames.length - 1];
const finalOverrideModuleName = moduleNames.at(-1);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! But will skip for now though, since I want to keep this backport as close to the main version as possible so that there are fewer conflicts on the next stable bump.

(and it's not worth changing in main, since we'll be dropping this initializer in a couple of weeks)


if (mobile) {
deprecated(
`Mobile-specific hbs templates are deprecated. Use responsive CSS or {{#if this.site.mobileView}} instead. [${templateKey}]`,
{
id: "discourse.mobile-templates",
url: "https://meta.discourse.org/t/355668",
source: sourceForModuleName(finalOverrideModuleName),
}
);
if (this.site.mobileView) {
Expand All @@ -58,7 +81,6 @@ export default {
// it's safe to call it original template here because the override wasn't set yet.
const originalTemplate = GlimmerManager.getComponentTemplate(component);
const isStrictMode = originalTemplate?.()?.parsedLayout?.isStrictMode;
const finalOverrideModuleName = moduleNames[moduleNames.length - 1];

if (isStrictMode) {
const message =
Expand All @@ -75,14 +97,18 @@ export default {
// Special handling for these, with a different deprecation id, so the auto-feature-flag works correctly
deprecated(
`Overriding '${componentName}' template is deprecated. Use the value transformer 'topic-list-columns' and other new topic-list plugin APIs instead.`,
RAW_TOPIC_LIST_DEPRECATION_OPTIONS
{
...RAW_TOPIC_LIST_DEPRECATION_OPTIONS,
source: sourceForModuleName(finalOverrideModuleName),
}
);
} else {
deprecated(
`[${finalOverrideModuleName}] Overriding component templates is deprecated, and will soon be disabled. Use plugin outlets, CSS, or other customization APIs instead.`,
`Overriding component templates is deprecated, and will soon be disabled. Use plugin outlets, CSS, or other customization APIs instead. [${finalOverrideModuleName}]`,
{
id: "discourse.component-template-overrides",
url: "https://meta.discourse.org/t/247487",
url: "https://meta.discourse.org/t/355668",
source: sourceForModuleName(finalOverrideModuleName),
}
);
}
Expand Down
5 changes: 3 additions & 2 deletions app/assets/javascripts/discourse/app/lib/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ let emberDeprecationSilencer;
* @param {boolean} [options.raiseError] Raise an error when this deprecation is triggered. Defaults to `false`
*/
export default function deprecated(msg, options = {}) {
const { id, since, dropFrom, url, raiseError } = options;
const { id, since, dropFrom, url, raiseError, source } = options;

if (id && disabledDeprecations.has(id)) {
return;
Expand All @@ -42,7 +42,8 @@ export default function deprecated(msg, options = {}) {
if (require.has("discourse/lib/source-identifier")) {
// This module doesn't exist in pretty-text/wizard/etc.
consolePrefix =
require("discourse/lib/source-identifier").consolePrefix() || "";
require("discourse/lib/source-identifier").consolePrefix(null, source) ||
"";
}

handlers.forEach((h) => h(msg, options));
Expand Down
6 changes: 5 additions & 1 deletion app/assets/javascripts/discourse/app/services/deprecation-warning-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export const CRITICAL_DEPRECATIONS = [
"discourse.qunit.global-exists",
"discourse.post-stream.trigger-new-post",
"discourse.hbr-topic-list-overrides",
"discourse.mobile-templates",
"discourse.mobile-view",
"discourse.mobile-templates",
"discourse.component-template-overrides",
];

if (DEBUG) {
Expand Down Expand Up @@ -76,7 +80,7 @@ export default class DeprecationWarningHandler extends Service {
return;
}

const source = identifySource();
const source = opts.source || identifySource();
if (source?.type === "browser-extension") {
return;
}
Expand Down
43 changes: 0 additions & 43 deletions app/assets/javascripts/discourse/tests/integration/component-templates-test.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { setComponentTemplate } from "@glimmer/manager";
import { render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import { module, test } from "qunit";
import sinon from "sinon";
import { overrideThrowGjsError } from "discourse/instance-initializers/component-templates";
import { withSilencedDeprecationsAsync } from "discourse/lib/deprecated";
import { forceMobile } from "discourse/lib/mobile";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
Expand Down Expand Up @@ -288,45 +286,4 @@ module("Integration | Initializers | plugin-component-templates", function (h) {
.hasText("Resolved Theme Override", "resolved component correct");
});
});

module("overriding gjs component", function (hooks) {
let errorStub;

hooks.beforeEach(() => {
registerTemporaryModule(
`discourse/components/mock-gjs-component`,
class MyComponent extends Component {
<template>
<span class="greeting">Hello world</span>
</template>
}
);

registerTemporaryModule(
`discourse/plugins/my-plugin/discourse/templates/components/mock-gjs-component`,
hbs`doomed override`
);

errorStub = sinon
.stub(console, "error")
.withArgs(sinon.match(/mock-gjs-component was authored using gjs/));

overrideThrowGjsError(false);
});

hooks.afterEach(() => {
overrideThrowGjsError(true);
});

setupRenderingTest(hooks);

test("theme overrides plugin component", async function (assert) {
await render(hbs`<MockGjsComponent />`);
assert
.dom(".greeting")
.hasText("Hello world", "renders original implementation");

sinon.assert.calledOnce(errorStub);
});
});
});
Loading