Merge pull request #53 from bcdev/forman-41-fix_registry

Fix registry

Author: forman

chartlets.js/CHANGES.md

@@ -1,3 +1,9 @@
+## Version 0.0.25 (from 2024/11/23)
+
+* `Registry.register()` now requires the `type`
+  to be passed as 1st argument because `component.name` will
+  be a mangled name in most cases.
+
 ## Version 0.0.24 (from 2024/11/23)
 
 * Exporting required `HostStore` type.

chartlets.js/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

chartlets.js/package.json

@@ -10,9 +10,9 @@ describe("Test that RegistryImpl", () => {
     const A = () => void 0;
     const B = () => void 0;
     const C = () => void 0;
-    const unregisterA = registry.register(A);
-    const unregisterB = registry.register(B);
-    const unregisterC = registry.register(C);
+    const unregisterA = registry.register("A", A);
+    const unregisterB = registry.register("B", B);
+    const unregisterC = registry.register("C", C);
 
     expect(registry.lookup("A")).toBe(A);
     expect(registry.lookup("B")).toBe(B);
@@ -32,7 +32,7 @@ describe("Test that RegistryImpl", () => {
     expect(new Set(registry.types)).toEqual(new Set(["C"]));
 
     const C2 = () => void 0;
-    const unregisterC2 = registry.register(C2, "C");
+    const unregisterC2 = registry.register("C", C2);
     expect(registry.lookup("A")).toBeUndefined();
     expect(registry.lookup("B")).toBeUndefined();
     expect(registry.lookup("C")).toBe(C2);

chartlets.js/src/lib/component/Registry.test.ts

@@ -8,11 +8,21 @@ export interface Registry {
   /**
    * Register a React component that renders a Chartlets component.
    *
+   * `component` must be a functional React component with at
+   * least the following two component props:
+   *
+   *   - `type: string`: your component's type name.
+   *      This will be the same as the `type` used for registration.
+   *   - `onChange: ComponentChangeHandler`: an event handler
+   *     that your component may call to signal change events.
+   *
+   * Both props are always be present plus. The component may also
+   * be passed any other props provided by the contribution.
+   *
+   * @param type The Chartlets component's unique type name.
    * @param component A functional React component.
-   * @param type The Chartlets component's type name.
-   *   If not provided, `component.name` is used.
    */
-  register(component: FC<ComponentProps>, type?: string): () => void;
+  register(type: string, component: FC<ComponentProps>): () => void;
 
   /**
    * Lookup the component of the provided type.
@@ -31,8 +41,7 @@ export interface Registry {
 export class RegistryImpl implements Registry {
   private components = new Map<string, FC<ComponentProps>>();
 
-  register(component: FC<ComponentProps>, type?: string): () => void {
-    type = type || component.name;
+  register(type: string, component: FC<ComponentProps>): () => void {
     const oldComponent = this.components.get(type);
     this.components.set(type, component);
     return () => {
@@ -56,7 +65,7 @@ export class RegistryImpl implements Registry {
 /**
  * The Chartly component registry.
  *
- * Use `registry.register(C)` to register your own component `C`.
+ * Use `registry.register("C", C)` to register your own component `C`.
  *
  * `C` must be a functional React component with at least the following
  * two properties:

chartlets.js/src/lib/component/Registry.ts

@@ -47,10 +47,10 @@ import { Plot } from "@/lib/components/Plot";
 import { Select } from "@/lib/components/Select";
 import { Typography } from "@/lib/components/Typography";
 
-registry.register(Box);
-registry.register(Button);
-registry.register(Checkbox);
-registry.register(CircularProgress);
-registry.register(Plot);
-registry.register(Select);
-registry.register(Typography);
+registry.register("Box", Box);
+registry.register("Button", Button);
+registry.register("Checkbox", Checkbox);
+registry.register("CircularProgress", CircularProgress);
+registry.register("Plot", Plot);
+registry.register("Select", Select);
+registry.register("Typography", Typography);