Implement api for extension point typings (#1638)

Currently, the only way to explore available extension points is through our documentation or by browsing the source code. Once you find them, there is no guard rails and the usage is prone to user errors. This new api allows the declaration of extension points as types in code. This way, exposing an extension point is as easy as exporting it from a module. Both the implementation and the developer who uses the extension point work with the same shared type that allows auto-completion and type-checks for safety. This feature is backwards-compatible as the generic methods all have sensible defaults for the type parameters.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-extensions/src/binder.test.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Binder } from "./binder";
+import { Binder, ExtensionPointDefinition, SimpleDynamicExtensionPointDefinition } from "./binder";
 
 describe("binder tests", () => {
   let binder: Binder;
@@ -99,4 +99,48 @@ describe("binder tests", () => {
     expect(extensions[0]).toEqual("planetD");
     expect(extensions[1]).toEqual("planetB");
   });
+
+  it("should allow typings for extension points but still be backwards-compatible", () => {
+    type TestExtensionPointA = ExtensionPointDefinition<"test.extension.a", number, undefined>;
+    type TestExtensionPointB = ExtensionPointDefinition<"test.extension.b", number, { testProp: boolean[] }>;
+
+    binder.bind<TestExtensionPointA>("test.extension.a", 2, () => false);
+    const binderExtensionA = binder.getExtension<TestExtensionPointA>("test.extension.a");
+    expect(binderExtensionA).not.toBeNull();
+    binder.bind<TestExtensionPointB>("test.extension.b", 2);
+    const binderExtensionsB = binder.getExtensions<TestExtensionPointB>("test.extension.b", {
+      testProp: [true, false]
+    });
+    expect(binderExtensionsB).toHaveLength(1);
+    binder.bind("test.extension.c", 2, () => false);
+    const binderExtensionC = binder.getExtension("test.extension.c");
+    expect(binderExtensionC).not.toBeNull();
+  });
+
+  it("should allow typings for dynamic extension points", () => {
+    type MarkdownCodeLanguageRendererProps = {
+      language?: string;
+      value: string;
+    };
+
+    type MarkdownCodeLanguageRendererExtensionPoint<
+      S extends string | undefined = undefined
+    > = SimpleDynamicExtensionPointDefinition<
+      "markdown-renderer.code.",
+      (props: any) => any,
+      MarkdownCodeLanguageRendererProps,
+      S
+    >;
+    type UmlExtensionPoint = MarkdownCodeLanguageRendererExtensionPoint<"uml">;
+
+    binder.bind<UmlExtensionPoint>("markdown-renderer.code.uml", props => props.value);
+
+    const language = "uml";
+    const extensionPointName = `markdown-renderer.code.${language}` as const;
+    const dynamicExtension = binder.getExtension<MarkdownCodeLanguageRendererExtensionPoint>(extensionPointName, {
+      language: "uml",
+      value: "const a = 2;"
+    });
+    expect(dynamicExtension).not.toBeNull();
+  });
 });