discourse · davidtaylorhq · May 19, 2025 · May 15, 2025 · May 16, 2025 · May 16, 2025
diff --git a/app/assets/javascripts/discourse/app/components/plugin-outlet.gjs b/app/assets/javascripts/discourse/app/components/plugin-outlet.gjs
@@ -1,9 +1,11 @@
 import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
+import ClassicComponent from "@ember/component";
 import { concat } from "@ember/helper";
 import { get } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
+import curryComponent from "ember-curry-component";
 import { or } from "truth-helpers";
 import PluginConnector from "discourse/components/plugin-connector";
 import PluginOutlet from "discourse/components/plugin-outlet";
@@ -124,6 +126,29 @@ export default class PluginOutletComponent extends Component {
     );
   }
 
+  @bind
+  safeCurryComponent(component, args) {
+    if (component.prototype instanceof ClassicComponent) {
+      for (const arg of Object.keys(args)) {
+        if (component.prototype.hasOwnProperty(arg)) {
+          deprecated(
+            `Unable to set @${arg} on connector for ${this.args.name}, because a property on the component class clashes with the argument name. Resolve the clash, or convert to a glimmer component.`,
+            {
+              id: "discourse.plugin-outlet-classic-args-clash",
+            }
+          );
+
+          // Build a clone of `args`, without the offending key, while preserving getters
+          const descriptors = Object.getOwnPropertyDescriptors(args);
+          delete descriptors[arg];
+          args = Object.defineProperties({}, descriptors);
+        }
+      }
+    }
+
+    return curryComponent(component, args, getOwner(this));
+  }
+
   <template>
     {{#if (this.connectorsExist hasBlock=(has-block))~}}
       {{~#if (has-block)~}}
@@ -135,9 +160,16 @@ export default class PluginOutletComponent extends Component {
 
       {{~#each (this.getConnectors hasBlock=(has-block)) as |c|~}}
         {{~#if c.componentClass~}}
-          <c.componentClass
-            @outletArgs={{this.outletArgsWithDeprecations}}
-          >{{yield}}</c.componentClass>
+          {{#let
+            (this.safeCurryComponent
+              c.componentClass this.outletArgsWithDeprecations
+            )
+            as |CurriedComponent|
+          }}
+            <CurriedComponent
+              @outletArgs={{this.outletArgsWithDeprecations}}
+            >{{yield}}</CurriedComponent>
+          {{/let}}
         {{~else if @defaultGlimmer~}}
           <c.templateOnly
             @outletArgs={{this.outletArgsWithDeprecations}}

diff --git a/app/assets/javascripts/discourse/app/services/deprecation-warning-handler.js b/app/assets/javascripts/discourse/app/services/deprecation-warning-handler.js
@@ -31,6 +31,7 @@ export const CRITICAL_DEPRECATIONS = [
   "discourse.mobile-view",
   "discourse.mobile-templates",
   "discourse.component-template-overrides",
+  "discourse.plugin-outlet-classic-args-clash",
 ];
 
 if (DEBUG) {

diff --git a/app/assets/javascripts/discourse/app/static/dev-tools/plugin-outlet-debug/args-table.gjs b/app/assets/javascripts/discourse/app/static/dev-tools/plugin-outlet-debug/args-table.gjs
@@ -43,7 +43,7 @@ export default class ArgsTable extends Component {
     window[`arg${globalI}`] = value;
     /* eslint-disable no-console */
     console.log(
-      `[plugin outlet debug] \`@outletArgs.${key}\` saved to global \`arg${globalI}\`, and logged below:`
+      `[plugin outlet debug] \`@${key}\` saved to global \`arg${globalI}\`, and logged below:`
     );
     console.log(value);
     /* eslint-enable no-console */
@@ -53,7 +53,7 @@ export default class ArgsTable extends Component {
 
   <template>
     {{#each this.renderArgs as |arg|}}
-      <div class="key"><span class="fw">{{arg.key}}</span>:</div>
+      <div class="key"><span class="fw">@{{arg.key}}</span>:</div>
       <div class="value">
         <span class="fw">{{arg.value}}</span>
         <a

diff --git a/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-test.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import ClassicComponent from "@ember/component";
 import templateOnly from "@ember/component/template-only";
 import { hash } from "@ember/helper";
 import { getOwner } from "@ember/owner";
@@ -1056,3 +1057,80 @@ module(
     });
   }
 );
+
+module(
+  "Integration | Component | plugin-outlet | argument currying",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("makes arguments available at top level", async function (assert) {
+      extraConnectorComponent(
+        "test-name",
+        <template>
+          <span class="glimmer-test">{{@arg1}} from glimmer</span>
+        </template>
+      );
+
+      await render(
+        <template>
+          <PluginOutlet
+            @name="test-name"
+            @outletArgs={{hash arg1="Hello world"}}
+          />
+        </template>
+      );
+      assert.dom(".glimmer-test").hasText("Hello world from glimmer");
+    });
+
+    test("makes arguments available at top level in classic components", async function (assert) {
+      extraConnectorComponent(
+        "test-name",
+        class extends ClassicComponent {
+          <template>
+            <span class="classic-test">{{this.arg1}} from classic</span>
+          </template>
+        }
+      );
+
+      await render(
+        <template>
+          <PluginOutlet
+            @name="test-name"
+            @outletArgs={{hash arg1="Hello world"}}
+          />
+        </template>
+      );
+      assert.dom(".classic-test").hasText("Hello world from classic");
+    });
+
+    test("guards against name clashes in classic components", async function (assert) {
+      extraConnectorComponent(
+        "test-name",
+        class extends ClassicComponent {
+          get arg1() {
+            return "overridden";
+          }
+
+          <template>
+            <span class="classic-test">{{this.arg1}} from classic</span>
+          </template>
+        }
+      );
+
+      await withSilencedDeprecationsAsync(
+        "discourse.plugin-outlet-classic-args-clash",
+        async () => {
+          await render(
+            <template>
+              <PluginOutlet
+                @name="test-name"
+                @outletArgs={{hash arg1="Hello world"}}
+              />
+            </template>
+          );
+        }
+      );
+      assert.dom(".classic-test").hasText("overridden from classic");
+    });
+  }
+);