DEV: Introduce block registration API and deprecate ember resolution

In the near future, runtime resolution of components via the ember resolver will no longer be possible. This commit introduces a dedicated list of Right Sidebar Blocks components, and allows other themes/plugins to register additional ones.

This also avoids the issue of normal component names clashing with rsb block names, so specific handling of cases like `custom-html-rsb` is no longer necessary.

Other themes/plugins can register new blocks via the new `right-sidebar-blocks` value transformer

```js
api.registerValueTransformer(
  "right-sidebar-blocks",
  ({ value: blocks }) => blocks.set("my-amazing-block", MyAmazingBlock)
);
```

For now, resolution of components via the Ember resolver is still supported, but will print a deprecation message to the console with upgrade instructions.

Author: davidtaylorhq

javascripts/discourse/components/right-sidebar-blocks.gjs

@@ -1,26 +1,34 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
+import { cached } from "@glimmer/tracking";
 import { getOwner } from "@ember/owner";
 import curryComponent from "ember-curry-component";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import lazyHash from "discourse/helpers/lazy-hash";
-import CustomHtmlRsb from "./custom-html-rsb";
+import deprecated from "discourse/lib/deprecated";
+import { getAvailableBlocks } from "../pre-initializers/right-sidebar-blocks-registry";
 
 export default class RightSidebarBlocks extends Component {
-  @tracked blocks = [];
-
-  constructor() {
-    super(...arguments);
+  @cached
+  get blocks() {
+    const availableBlocks = getAvailableBlocks();
 
     const blocksArray = [];
 
     JSON.parse(settings.blocks).forEach((block) => {
-      if (block.name === "custom-html") {
-        block.component = CustomHtmlRsb;
+      const rsbRegistryResult = availableBlocks.get(block.name);
+      if (rsbRegistryResult) {
+        block.component = rsbRegistryResult;
       } else {
-        block.component = getOwner(this).resolveRegistration(
+        const emberRegistryResult = getOwner(this).resolveRegistration(
           `component:${block.name}`
         );
+        if (emberRegistryResult) {
+          block.component = emberRegistryResult;
+          deprecated(
+            `The block "${block.name}" is not registered in the right-sidebar-blocks registry. Register it using \`api.registerValueTransformer("right-sidebar-blocks", ({ value: blocks }) => blocks.set("${block.name}", MyImportantComponent));\``,
+            { id: "discourse.right-sidebar-blocks.component-resolution" }
+          );
+        }
       }
 
       if (block.component) {
@@ -41,7 +49,7 @@ export default class RightSidebarBlocks extends Component {
       }
     });
 
-    this.blocks = blocksArray;
+    return blocksArray;
   }
 
   <template>

javascripts/discourse/pre-initializers/right-sidebar-blocks-registry.js

@@ -0,0 +1,36 @@
+import SignupCta from "discourse/components/signup-cta";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { applyValueTransformer } from "discourse/lib/transformer";
+import CategoryList from "../components/category-list";
+import CategoryTopics from "../components/category-topics";
+import CustomHtmlRsb from "../components/custom-html-rsb";
+import PopularTags from "../components/popular-tags";
+import RecentReplies from "../components/recent-replies";
+import SubcategoryList from "../components/subcategory-list";
+import TopContributors from "../components/top-contributors";
+
+const TRANSFORMER_NAME = "right-sidebar-blocks";
+
+const DefaultBlocks = new Map();
+DefaultBlocks.set("popular-tags", PopularTags);
+DefaultBlocks.set("top-contributers", TopContributors);
+DefaultBlocks.set("recent-replies", RecentReplies);
+DefaultBlocks.set("category-topics", CategoryTopics);
+DefaultBlocks.set("custom-html", CustomHtmlRsb);
+DefaultBlocks.set("category-list", CategoryList);
+DefaultBlocks.set("subcategory-list", SubcategoryList);
+DefaultBlocks.set("signup-cta", SignupCta);
+
+export function getAvailableBlocks() {
+  const results = new Map(DefaultBlocks);
+  return applyValueTransformer(TRANSFORMER_NAME, results, null, {
+    mutable: true,
+  });
+}
+
+export default {
+  before: "freeze-valid-transformers",
+  initialize() {
+    withPluginApi((api) => api.addValueTransformerName(TRANSFORMER_NAME));
+  },
+};