@outletArgs are now available as top-level arguments

AI-generated summary

Discourse has updated its connector components to allow @outletArgs to be accessed as top-level arguments, simplifying usage. In templates, @outletArgs.foo can now be written as @foo, and in Glimmer Component JS, this.args.outletArgs.foo becomes this.args.foo. The old @outletArgs is still supported, with no immediate deprecation plans, though a future ESLint rule may help modernize code. The plugin outlet inspector has already been updated to reflect this change. Two methods exist for rendering connector components: placing them in /connectors/{outlet-name}/ or using api.renderInOutlet(), both of which pass through outlet arguments. Documentation updates are forthcoming. david explains the change, merefield approves, and NateDhaliwal asks for clarification on where to access the args, which david clarifies applies to both methods.

In the latest version of Discourse, outlet arguments can be accessed as top-level arguments to your connector components.

In a template, that means that @outletArgs.foo can be replaced with @foo. In Glimmer Component JS, this.args.outletArgs.foo can be replaced with this.args.foo.

The old @outletArgs argument is still available, and we don’t have any plans to deprecate it. So there’s no rush to update any existing code. In the future we may introduce a custom eslint rule to detect & automatically modernize uses of @outletArgs and this.args.outletArgs.

The plugin outlet inspector has already been updated to display arguments in the modern way:

We’ll be following up with changes to documentation in the near future.

Much more consistent :+1:t2:

Pardon my ignorance, but where do you access these args? In a connector .gjs file? Or in a renderInOutlet?

There are two ways to render a connector component into a plugin outlet.

One is to place your component in /connectors/{outlet-name}/my-connector.gjs (or a .js/.hbs combo). The other way is to author your component elsewhere, and call api.renderInOutlet("{outlet-name}", MyConnectorComponent)

In both cases, the outlet args will be passed through to your component.