Improved inferno typings, and fixed some inferno-router typings

fixtures/browser/package.json

@@ -18,12 +18,12 @@
     }
   },
   "dependencies": {
-    "@babel/core": "7.18.9",
+    "@babel/core": "7.18.10",
     "@babel/helper-replace-supers": "7.18.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.18.9",
+    "@babel/plugin-proposal-decorators": "7.18.10",
     "@babel/plugin-proposal-object-rest-spread": "7.18.9",
-    "@babel/preset-env": "7.18.9",
+    "@babel/preset-env": "7.18.10",
     "babel-loader": "^8.2.5",
     "jasmine-core": "^4.3.0",
     "karma": "^6.4.0",
@@ -35,6 +35,6 @@
     "karma-webpack": "5.0.0",
     "saucelabs": "^7.2.0",
     "ts-loader": "^9.3.1",
-    "webpack": "^5.73.0"
+    "webpack": "^5.74.0"
   }
 }

package.json

@@ -72,13 +72,13 @@
     "test:package": "node fixtures/packaging/build-all.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.10",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.18.9",
+    "@babel/preset-env": "7.18.10",
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-alias": "^3.1.9",
     "@types/jest": "^28.1.6",
-    "@types/node": "^18.6.0",
+    "@types/node": "^18.6.3",
     "@types/jsdom": "^20.0.0",
     "babel-jest": "^28.1.3",
     "babel-plugin-inferno": "6.5.0",
@@ -96,7 +96,7 @@
     "jest-jasmine2": "^28.1.3",
     "jest-silent-reporter": "^0.5.0",
     "jsdom": "^20.0.0",
-    "lerna": "^5.2.0",
+    "lerna": "^5.3.0",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.6",
     "mobx": "^6.6.1",
@@ -105,7 +105,7 @@
     "pre-commit": "^1.2.2",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.77.0",
+    "rollup": "^2.77.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",

packages/inferno-create-element/__tests__/createElementTyped.spec.tsx

@@ -65,7 +65,7 @@ describe('CreateElement (non-JSX)', () => {
     // render(createElement(App, { className: 1 }), container);
     // render(createElement(App, {}), container);
 
-    /** Would like to be an error but it'd break createElement('hr'): */
+    /** Would like to be an error, but it'd break createElement('hr'): */
     render(createElement(App), container);
   });
 

packages/inferno-create-element/src/index.ts

@@ -1,7 +1,6 @@
-import { createComponentVNode, createFragment, createVNode, getFlagsForElementVnode, IComponentConstructor, Inferno, Key, Props, VNode } from 'inferno';
+import { createComponentVNode, createFragment, createVNode, getFlagsForElementVnode, Inferno, Key, Props, VNode } from 'inferno';
 import { isInvalid, isNullOrUndef, isString, isUndefined } from 'inferno-shared';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
-import StatelessComponent = Inferno.StatelessComponent;
 
 const componentHooks = {
   onComponentDidAppear: 1,
@@ -21,8 +20,8 @@ const componentHooks = {
  * @param {...{object}=} _children Optional children for virtual node
  * @returns {VNode} new virtual node
  */
-export function createElement<P>(type: string | IComponentConstructor<P> | StatelessComponent<P>, props?: (P & Props<P>) | null, ..._children: any[]): VNode;
-export function createElement<P>(type: string | IComponentConstructor<P> | StatelessComponent<P>, props?: (P & Props<P>) | null, _children?: any): VNode {
+export function createElement<P>(type: string | Inferno.ComponentClass<P> | Inferno.StatelessComponent<P>, props?: (P & Props<P>) | null, ..._children: any[]): VNode;
+export function createElement<P>(type: string | Inferno.ComponentClass<P> | Inferno.StatelessComponent<P>, props?: (P & Props<P>) | null, _children?: any): VNode {
   if (process.env.NODE_ENV !== 'production') {
     if (isInvalid(type)) {
       throw new Error(

packages/inferno-router/__tests__/Route.typings.spec.tsx

@@ -1,6 +1,7 @@
-import { render } from 'inferno';
+import { Component, render } from "inferno";
 import { Route, Router } from 'inferno-router';
 import { createMemoryHistory } from 'history';
+import { IRouteProps } from "../src/Route";
 
 describe('<Route component>', () => {
   const history = createMemoryHistory();
@@ -17,11 +18,11 @@ describe('<Route component>', () => {
       location: null,
       match: null
     };
-    const Component = (props: RouteProps) => (actual = props) && null;
+    const ComponentAb = (props: RouteProps) => (actual = props) && null;
 
     render(
       <Router history={history}>
-        <Route path="/" component={Component} />
+        <Route path="/" component={ComponentAb} />
       </Router>,
       node
     );
@@ -30,4 +31,40 @@ describe('<Route component>', () => {
     expect(typeof actual.match).toBe('object');
     expect(typeof actual.location).toBe('object');
   });
+
+  it('type check props class component', () => {
+    class ComponentA extends Component<any, any> {
+      public render() {
+        return "foo";
+      }
+    }
+
+    render(
+      <Router history={history}>
+        <Route path="/" component={ComponentA} />
+      </Router>,
+      node
+    );
+  });
+
+  it('type check props render method', () => {
+    class ComponentA extends Component<any, any> {
+      public render() {
+        return "foo";
+      }
+    }
+
+    const props: IRouteProps = {
+      component: ComponentA
+    };
+
+    const C = props.component!;
+
+    render(
+      <Router history={history}>
+        <Route path="/" render={(_) => <C {...props} />} />
+      </Router>,
+      node
+    );
+  });
 });

packages/inferno-router/__tests__/Switch.spec.jsx → packages/inferno-router/__tests__/Switch.spec.tsx

@@ -1,5 +1,6 @@
-import { render, rerender } from 'inferno';
-import { MemoryRouter, Redirect, Route, Switch } from 'inferno-router';
+/* tslint:disable:no-console */
+import { render, rerender } from "inferno";
+import { MemoryRouter, Redirect, Route, Switch } from "inferno-router";
 
 describe('Switch (jsx)', () => {
   it('renders the first <Route> that matches the URL', () => {
@@ -115,10 +116,10 @@ describe('Switch (jsx)', () => {
 
   it('warns when redirecting to same route, both strings', () => {
     const node = document.createElement('div');
-    let redirected = false;
+    const redirected = false;
     let done = false;
 
-    spyOn(console, 'error');
+    const consoleErrSpy = spyOn(console, 'error');
 
     render(
       <MemoryRouter initialEntries={['/one']}>
@@ -144,16 +145,16 @@ describe('Switch (jsx)', () => {
     rerender();
 
     expect(node.innerHTML).not.toContain('done');
-    expect(console.error.calls.count()).toBe(1);
-    expect(console.error.calls.argsFor(0)[0]).toContain('/one');
+    expect(consoleErrSpy.calls.count()).toBe(1);
+    expect(consoleErrSpy.calls.argsFor(0)[0]).toContain('/one');
   });
 
   it('warns when redirecting to same route, mixed types', () => {
     const node = document.createElement('div');
     let redirected = false;
     let done = false;
 
-    spyOn(console, 'error');
+    const consoleErrSpy = spyOn(console, 'error');
 
     render(
       <MemoryRouter initialEntries={['/one']}>
@@ -180,17 +181,16 @@ describe('Switch (jsx)', () => {
     rerender();
 
     expect(node.innerHTML).not.toContain('done');
-    expect(console.error.calls.count()).toBe(1);
-    expect(console.error.calls.argsFor(0)[0]).toContain('/one');
-    //expect(console.error.calls.argsFor(0)[0]).toMatch(/Warning:.*"\/one"/)
+    expect(consoleErrSpy.calls.count()).toBe(1);
+    expect(consoleErrSpy.calls.argsFor(0)[0]).toContain('/one');
   });
 
   it('warns when redirecting to same route, mixed types, string with query', () => {
     const node = document.createElement('div');
     let redirected = false;
     let done = false;
 
-    spyOn(console, 'error');
+    const consoleErrSpy = spyOn(console, 'error');
 
     render(
       <MemoryRouter initialEntries={['/one']}>
@@ -217,17 +217,16 @@ describe('Switch (jsx)', () => {
     rerender();
 
     expect(node.innerHTML).not.toContain('done');
-    expect(console.error.calls.count()).toBe(1);
-    expect(console.error.calls.argsFor(0)[0]).toContain('/one?utm=1');
-    //expect(console.error.calls.argsFor(0)[0]).toMatch(/Warning:.*"\/one\?utm=1"/)
+    expect(consoleErrSpy.calls.count()).toBe(1);
+    expect(consoleErrSpy.calls.argsFor(0)[0]).toContain('/one?utm=1');
   });
 
   it('does NOT warn when redirecting to same route with different `search`', () => {
     const node = document.createElement('div');
     let redirected = false;
     let done = false;
 
-    spyOn(console, 'error');
+    const consoleErrSpy = spyOn(console, 'error');
 
     render(
       <MemoryRouter initialEntries={['/one']}>
@@ -254,7 +253,7 @@ describe('Switch (jsx)', () => {
     rerender();
 
     expect(node.innerHTML).toContain('done');
-    expect(console.error.calls.count()).toBe(0);
+    expect(consoleErrSpy.calls.count()).toBe(0);
   });
 
   it('handles comments', () => {
@@ -348,6 +347,50 @@ describe('Switch (jsx)', () => {
     expect(node.innerHTML).not.toContain('bib');
     expect(node.innerHTML).not.toContain('cup');
   });
+
+  // TODO: This will not work because component is not mandatory
+  // it('Should allow using component child parameter as result, Github #1601', () => {
+  //   const node = document.createElement('div');
+  //
+  //   class Component1 extends Component<any, any> {
+  //     constructor(p, s) {
+  //       super(p, s);
+  //
+  //       this.state.foo = 1;
+  //     }
+  //     public render() {
+  //       return (
+  //         <div>
+  //           Component
+  //         </div>
+  //       );
+  //     }
+  //   }
+  //
+  //   const routes: IRouteProps[] = [
+  //     {
+  //       component: Component1,
+  //       exact: true,
+  //       path: `/`
+  //     }
+  //   ];
+  //
+  //   render(
+  //     <MemoryRouter initialEntries={['/bubblegum']}>
+  //       <Switch>
+  //         {routes.map(({ path, exact, component: Comp, ...rest }) => (
+  //           <Route
+  //             key={path}
+  //             path={path}
+  //             exact={exact}
+  //             render={props => <Comp {...props} {...rest} />}
+  //           />
+  //         ))}
+  //       </Switch>
+  //     </MemoryRouter>,
+  //     node
+  //   );
+  // });
 });
 
 describe('A <Switch location>', () => {

packages/inferno-router/src/Redirect.ts

@@ -5,7 +5,7 @@ import { isString } from 'inferno-shared';
 
 export interface RedirectProps {
   from?: string;
-  to: string | Location;
+  to: string | Partial<Location>;
   exact?: any;
   push?: boolean;
 }

packages/inferno-router/src/Route.ts

@@ -1,4 +1,4 @@
-import { Component, createComponentVNode, IComponentConstructor, Inferno } from 'inferno';
+import { Component, createComponentVNode, Inferno } from "inferno";
 import { VNodeFlags } from 'inferno-vnode-flags';
 import { invariant, warning } from './utils';
 import { matchPath } from './matchPath';
@@ -25,9 +25,9 @@ export interface IRouteProps {
   exact?: boolean;
   strict?: boolean;
   sensitive?: boolean;
-  component?: IComponentConstructor<any> | ((props: any, context: any) => Inferno.InfernoNode);
+  component?: Inferno.ComponentClass<any> | ((props: any, context: any) => Inferno.InfernoNode);
   render?: (props: RouteComponentProps<any>, context: any) => Inferno.InfernoNode;
-  location?: Location;
+  location?: Partial<Location>;
   children?: ((props: RouteComponentProps<any>) => Inferno.InfernoNode) | Inferno.InfernoNode;
 }
 
@@ -38,7 +38,7 @@ type RouteState = {
   match: boolean;
 };
 
-class Route extends Component<IRouteProps, RouteState> {
+class Route extends Component<Partial<IRouteProps>, RouteState> {
   public getChildContext() {
     const childContext: any = combineFrom(this.context.router, null);
 

packages/inferno-router/src/StaticRouter.ts

@@ -71,7 +71,7 @@ export class StaticRouter<S> extends Component<IStaticRouterProps<any>, S> {
           push: this.handlePush,
           replace: this.handleReplace
         }
-      })
+      }) as any
     );
   }
 }

packages/inferno-shared/src/index.ts

@@ -48,8 +48,8 @@ export function warning(message: string) {
   console.error(message);
 }
 
-export function combineFrom(first: {} | null, second: {} | null): object {
-  const out = {};
+export function combineFrom<A, B>(first: A, second: B): A & B {
+  const out = {} as any;
   if (first) {
     for (const key in first) {
       out[key] = first[key];

packages/inferno/__tests__/types.spec.tsx

@@ -1,4 +1,4 @@
-import { Component, render } from 'inferno';
+import { Component, Inferno, render } from "inferno";
 
 describe('top level context', () => {
   let container;
@@ -107,6 +107,31 @@ describe('top level context', () => {
 
         render(<MyComponent />, container);
       });
+
+      it('Should be possible to return InfernoNode from class component render', () => {
+        class FooBar extends Component<any, any> {
+          public render() {
+            return "foobar";
+          }
+        }
+
+        class MyComponent extends Component<any, any> {
+          public render() {
+
+            let Val : Inferno.InfernoNode = <FooBar/>;
+
+            if (this.props.check) {
+              Val = <div>1</div>;
+            } else {
+              Val = <div>{Val}</div>
+            }
+
+            return Val;
+          }
+        }
+
+        render(<MyComponent />, container);
+      });
     });
   });
 });