Added a new type InfernoSingleNode to allow restricting children to any

valid single child #1630
infernojs · Mar 25, 2023 · a78124c · a78124c
1 parent c8551c4
commit a78124c
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 2 deletions.
diff --git a/packages/inferno/__tests__/types.children.spec.tsx b/packages/inferno/__tests__/types.children.spec.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'inferno';
+import { Component, InfernoNode, InfernoSingleNode } from 'inferno';
 
 describe('children types', () => {
   it('Should be possible to type child as component', () => {
@@ -94,4 +94,106 @@ describe('children types', () => {
     expect(valid1).toBeDefined();
     expect(alsoValidForNow).toBeDefined();
   });
+
+  it('Should be possible to type child as InfernoNode', () => {
+    interface ParentComponentProps {
+      children?: InfernoNode;
+    }
+
+    class FooBarCom extends Component<any, any> {
+      constructor(p, c) {
+        super(p, c);
+      }
+
+      public myMethod() {
+        return 'foobar';
+      }
+
+      public render({ children }) {
+        return <div>{children}</div>;
+      }
+    }
+
+    class ParentComponent extends Component<ParentComponentProps, any> {
+      constructor(p, c) {
+        super(p, c);
+      }
+      public render({ children }: ParentComponentProps) {
+        // children.myMethod();
+        // this.props.children.myMethod();
+        return <div>{children}</div>;
+      }
+    }
+
+    // InfernoNode accepts any valid JSX as children
+    const valid = (
+      <ParentComponent>
+        <FooBarCom />
+        <FooBarCom />
+      </ParentComponent>
+    );
+
+    // Children defined optional so leaving it empty is also ok
+    const valid2 = <ParentComponent></ParentComponent>;
+
+    // Single child also ok
+    const valid3 = <ParentComponent><FooBarCom /></ParentComponent>;
+
+    expect(valid).toBeDefined();
+    expect(valid2).toBeDefined();
+    expect(valid3).toBeDefined();
+  });
+
+  it('Should be possible to type child as InfernoNode', () => {
+    interface ParentComponentProps {
+      children: InfernoSingleNode;
+    }
+
+    class FooBarCom extends Component<any, any> {
+      constructor(p, c) {
+        super(p, c);
+      }
+
+      public myMethod() {
+        return 'foobar';
+      }
+
+      public render({ children }) {
+        return <div>{children}</div>;
+      }
+    }
+
+    class ParentComponent extends Component<ParentComponentProps, any> {
+      constructor(p, c) {
+        super(p, c);
+      }
+      public render({ children }: ParentComponentProps) {
+        // children.myMethod();
+        // this.props.children.myMethod();
+        return <div>{children}</div>;
+      }
+    }
+
+    // Children defined InfernoSingleNode so array is not acceptable
+    // @ts-expect-error
+    const invalid1 = <ParentComponent>
+        <FooBarCom />
+        <FooBarCom />
+      </ParentComponent>;
+
+    // Children not defined optional so leaving it empty is error
+    // @ts-expect-error
+    const invalid2 = <ParentComponent></ParentComponent>;
+
+    // Single child component is ok
+    const valid1 = <ParentComponent><FooBarCom /></ParentComponent>;
+
+    // Single child div is ok
+    const valid2 = <ParentComponent><div>1</div></ParentComponent>;
+
+    expect(invalid1).toBeDefined();
+    expect(invalid2).toBeDefined();
+    expect(valid1).toBeDefined();
+    expect(valid2).toBeDefined();
+  });
 });
diff --git a/packages/inferno/src/core/types.ts b/packages/inferno/src/core/types.ts
@@ -13,7 +13,8 @@ type InfernoChild = Inferno.InfernoElement | InfernoText;
 interface InfernoNodeArray extends Array<InfernoNode> {}
 
 export type InfernoFragment = {} | InfernoNodeArray;
-export type InfernoNode = InfernoChild | InfernoFragment | boolean | null | undefined;
+export type InfernoSingleNode = InfernoChild | boolean | null | undefined;
+export type InfernoNode = InfernoSingleNode | InfernoFragment;
 
 // IComponent is defined here, instead of Component to de-couple implementation from interface
 export interface IComponent<P, S> {