stopping here

Author: forman

chartlets.js/CHANGES.md

@@ -3,12 +3,12 @@
 * Add `multiple` property for `Select` component to enable the selection
   of multiple elements. The `default` mode is supported at the moment.
 
+* Relaxed requirements for adding new components to Chartlets.js via
+  plugins. Implementing `ComponentProps` is now optional. (#115)
+
 * Static information about callbacks retrieved from API is not cached
   reducing unnecessary processing and improving performance. (#113)
 
-* Relaxed requirements for adding new components to Chartlets.js via 
-  plugins. Implementing `ComponentProps` is now optional. (#115)
-
 * Callbacks will now only be invoked when there’s an actual change in state, 
   reducing unnecessary processing and improving performance. (#112)
 

chartlets.js/packages/lib/src/actions/configureFramework.test.tsx

@@ -1,20 +1,19 @@
-import type { ComponentType, FC } from "react";
+import type { FC } from "react";
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { configureFramework, resolvePlugin } from "./configureFramework";
 import { store } from "@/store";
-import { registry } from "@/components/registry";
+import { type ComponentRegistration, registry } from "@/components/registry";
 import type { HostStore } from "@/types/state/host";
 import type { Plugin } from "@/types/state/plugin";
-import type { ComponentProps } from "@/components/Component";
 
-function getComponents(): [string, ComponentType<ComponentProps>][] {
-  interface DivProps extends ComponentProps {
+function getComponents(): [string, ComponentRegistration][] {
+  interface DivProps {
     text: string;
   }
   const Div: FC<DivProps> = ({ text }) => <div>{text}</div>;
   return [
-    ["A", Div as FC<ComponentProps>],
-    ["B", Div as FC<ComponentProps>],
+    ["A", Div],
+    ["B", Div],
   ];
 }
 
@@ -61,6 +60,14 @@ describe("configureFramework", () => {
     });
     expect(registry.types.length).toBe(2);
   });
+
+  it("should allow adding plain components", () => {
+    expect(registry.types.length).toBe(0);
+    configureFramework({
+      plugins: [{ components: getComponents() }],
+    });
+    expect(registry.types.length).toBe(2);
+  });
 });
 
 describe("resolvePlugin", () => {

chartlets.js/packages/lib/src/components/Children.test.tsx

@@ -37,7 +37,7 @@ describe("Children", () => {
       text: string;
     }
     const Div: FC<DivProps> = ({ text }) => <div>{text}</div>;
-    registry.register("Div", Div as FC<ComponentProps>);
+    registry.register("Div", Div);
     const divProps = {
       type: "Div",
       text: "Hello",

chartlets.js/packages/lib/src/components/Children.tsx

@@ -1,3 +1,4 @@
+import { type FC } from "react";
 import { type ComponentChangeHandler } from "@/types/state/event";
 import { type ComponentNode, isComponentState } from "@/types/state/component";
 import { Component } from "./Component";
@@ -7,7 +8,10 @@ export interface ChildrenProps {
   onChange: ComponentChangeHandler;
 }
 
-export function Children({ nodes, onChange }: ChildrenProps) {
+export const Children: FC<ChildrenProps> = ({
+  nodes,
+  onChange,
+}: ChildrenProps) => {
   if (!nodes || nodes.length === 0) {
     return null;
   }
@@ -27,4 +31,4 @@ export function Children({ nodes, onChange }: ChildrenProps) {
       })}
     </>
   );
-}
+};

chartlets.js/packages/lib/src/components/Component.test.tsx

@@ -31,7 +31,7 @@ describe("Component", () => {
       text: string;
     }
     const Div: FC<DivProps> = ({ text }) => <div>{text}</div>;
-    registry.register("Div", Div as FC<ComponentProps>);
+    registry.register("Div", Div);
     const divProps = {
       type: "Div",
       id: "root",

chartlets.js/packages/lib/src/components/Component.tsx

@@ -1,14 +1,15 @@
+import { type FC } from "react";
 import { type ComponentChangeHandler } from "@/types/state/event";
+import { isString } from "@/utils/isString";
 import { registry } from "@/components/registry";
 
 export interface ComponentProps {
   type: string;
   onChange: ComponentChangeHandler;
 }
 
-export function Component(props: ComponentProps) {
-  const { type: componentType } = props;
-  const ActualComponent = registry.lookup(componentType);
+export const Component: FC<ComponentProps> = (props: ComponentProps) => {
+  const ActualComponent = isString(props.type) && registry.lookup(props.type);
   if (typeof ActualComponent === "function") {
     return <ActualComponent {...props} />;
   } else {
@@ -20,4 +21,4 @@ export function Component(props: ComponentProps) {
     // );
     return null;
   }
-}
+};

chartlets.js/packages/lib/src/components/registry.ts

@@ -2,15 +2,21 @@ import type { ComponentType } from "react";
 
 import type { ComponentProps } from "@/components/Component";
 
+export type ComponentRegistration =
+  | ComponentType<Record<string, unknown>>
+  | ComponentType<ComponentProps>;
+
 /**
  * A registry for Chartlets components.
  */
 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:
+   * `component` can be any React component. However, if you want to register
+   * a custom, reactive component, then `component` must be of type
+   * `ComponentType<ComponentProps>` where a `ComponentProps` has at
+   * least the following two properties:
    *
    *   - `type: string`: your component's type name.
    *      This will be the same as the `type` used for registration.
@@ -23,14 +29,14 @@ export interface Registry {
    * @param type The Chartlets component's unique type name.
    * @param component A functional React component.
    */
-  register(type: string, component: ComponentType<ComponentProps>): () => void;
+  register(type: string, component: ComponentRegistration): () => void;
 
   /**
    * Lookup the component of the provided type.
    *
    * @param type The Chartlets component's type name.
    */
-  lookup(type: string): ComponentType<ComponentProps> | undefined;
+  lookup(type: string): ComponentRegistration | undefined;
 
   /**
    * Clears the registry.
@@ -46,9 +52,9 @@ export interface Registry {
 
 // export for testing only
 export class RegistryImpl implements Registry {
-  private components = new Map<string, ComponentType<ComponentProps>>();
+  private components = new Map<string, ComponentRegistration>();
 
-  register(type: string, component: ComponentType<ComponentProps>): () => void {
+  register(type: string, component: ComponentRegistration): () => void {
     const oldComponent = this.components.get(type);
     this.components.set(type, component);
     return () => {
@@ -60,7 +66,7 @@ export class RegistryImpl implements Registry {
     };
   }
 
-  lookup(type: string): ComponentType<ComponentProps> | undefined {
+  lookup(type: string): ComponentRegistration | undefined {
     return this.components.get(type);
   }
 
@@ -77,12 +83,5 @@ export class RegistryImpl implements Registry {
  * The Chartlets component registry.
  *
  * 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:
- *
- *   - `type: string`: your component's type name.
- *   - `onChange: ComponentChangeHandler`: an event handler
- *     that your component may call to signal change events.
  */
 export const registry = new RegistryImpl();

chartlets.js/packages/lib/src/types/state/plugin.ts

@@ -5,7 +5,10 @@ import type { ComponentProps } from "@/components/Component";
  * A component registration - a pair comprising the component type name
  * and the React component.
  */
-export type ComponentRegistration = [string, ComponentType<ComponentProps>];
+export type ComponentRegistration = [
+  string,
+  ComponentType<ComponentProps> | ComponentType,
+];
 
 /**
  * A framework plugin.