Typescript improvements, removed rollup plugin bubble and replaced it…

… with babel, changed component to be abstract class to indicate it needs to be derived from.

docs/build.js

@@ -2,12 +2,12 @@ import {rollup} from "rollup";
 import { existsSync, readdirSync, statSync } from "fs";
 import commonjsPlugin from "rollup-plugin-commonjs";
 import nodeResolvePlugin from "rollup-plugin-node-resolve";
-import babelPlugin from "rollup-plugin-babel";
 import { dirname, join, resolve } from "path";
 import replace from "rollup-plugin-replace";
 import { terser } from "rollup-plugin-terser";
 import alias from "@rollup/plugin-alias";
 import { fileURLToPath } from "url";
+import babel from "@rollup/plugin-babel";
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -27,7 +27,7 @@ const plugins = [
   nodeResolvePlugin({
     preferBuiltins: false
   }),
-  babelPlugin({
+  babel({
     exclude: 'node_modules/**',
     sourceMaps: false,
     babelrc: false,

fixtures/browser/package.json

@@ -18,12 +18,12 @@
     }
   },
   "dependencies": {
-    "@babel/core": "7.19.1",
+    "@babel/core": "7.19.3",
     "@babel/helper-replace-supers": "7.19.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.19.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.18.9",
-    "@babel/preset-env": "7.19.1",
+    "@babel/plugin-proposal-decorators": "7.19.3",
+    "@babel/plugin-proposal-object-rest-spread": "7.19.4",
+    "@babel/preset-env": "7.19.4",
     "babel-loader": "^8.2.5",
     "jasmine-core": "^4.4.0",
     "karma": "^6.4.1",

package.json

@@ -73,48 +73,47 @@
     "test:package": "node fixtures/packaging/build-all.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.19.1",
+    "@babel/preset-env": "7.19.4",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@types/jest": "^29.0.3",
-    "@types/node": "^18.7.23",
+    "@rollup/plugin-alias": "^4.0.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@types/jest": "^29.1.2",
+    "@types/node": "^18.8.4",
     "@types/jsdom": "^20.0.0",
-    "babel-jest": "^29.0.3",
+    "babel-jest": "^29.1.2",
     "babel-plugin-inferno": "6.5.0",
     "cli-table": "^0.3.11",
     "concat-stream-es6": "0.0.1",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "d3-scale-chromatic": "^3.0.0",
-    "filesize": "^9.0.11",
+    "filesize": "^10.0.5",
     "fs-extra": "^10.1.0",
     "gzip-size": "^7.0.0",
     "history": "^5.3.0",
-    "jest": "^29.0.3",
-    "jest-environment-jsdom": "^29.0.3",
-    "jest-jasmine2": "^29.0.3",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "jest-jasmine2": "^29.1.2",
     "jest-silent-reporter": "^0.5.0",
-    "jsdom": "^20.0.0",
-    "lerna": "^5.5.2",
+    "jsdom": "^20.0.1",
+    "lerna": "^5.6.2",
     "lint-staged": "^13.0.3",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.7",
     "mobx": "^6.6.2",
     "npm-run-all": "^4.1.5",
     "perf-monitor": "^0.4.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.4"
   }
 }

packages/inferno-animation/src/AnimatedAllComponent.ts

@@ -6,7 +6,7 @@ type AnimationProp = {
   children?: Inferno.InfernoNode;
 };
 
-export class AnimatedAllComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
+export abstract class AnimatedAllComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
   public componentDidAppear(dom: HTMLElement) {
     componentDidAppear(dom, this.props);
   }

packages/inferno-animation/src/AnimatedComponent.ts

@@ -6,7 +6,7 @@ type AnimationProp = {
   children?: Inferno.InfernoNode;
 };
 
-export class AnimatedComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
+export abstract class AnimatedComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
   public componentDidAppear(dom: HTMLElement) {
     componentDidAppear(dom, this.props);
   }

packages/inferno-animation/src/AnimatedMoveComponent.ts

@@ -6,7 +6,7 @@ type AnimationProp = {
   children?: Inferno.InfernoNode;
 };
 
-export class AnimatedMoveComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
+export abstract class AnimatedMoveComponent<P = {}, S = {}> extends Component<AnimationProp & P, S> {
   public componentWillMove(parentVNode, parent: HTMLElement, dom: HTMLElement, props: any) {
     componentWillMove(parentVNode, parent, dom, props);
   }

packages/inferno-compat/src/index.ts

@@ -287,13 +287,14 @@ function shallowDiffers(a, b): boolean {
   return false;
 }
 
-class PureComponent<P, S> extends Component<P, S> {
+abstract class PureComponent<P, S> extends Component<P, S> {
   public shouldComponentUpdate(props, state) {
     return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
   }
 }
 
 interface ContextProps {
+  children?: Inferno.InfernoChild | undefined
   context: any;
 }
 

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

@@ -1,4 +1,4 @@
-import { Component } from 'inferno';
+import {Component, Inferno} from 'inferno';
 import { isFunction, throwError } from 'inferno-shared';
 
 export interface Mixin<P, S> extends Component<P, S> {
@@ -186,6 +186,11 @@ export function createClass<P, S>(obj: ComponentSpec<P, S>): ClassicComponentCla
     public isMounted(): boolean {
       return this.$LI !== null && !this.$UN;
     }
+
+    // @ts-expect-error TS6133
+    public render(props: Readonly<{ children?: Inferno.InfernoNode } & P>, state: Readonly<S>, context: any) {
+      return null;
+    }
   }
 
   extend(Cl.prototype, obj);

packages/inferno-extras/src/findDOMNode.ts

@@ -1,20 +1,20 @@
-import { findDOMFromVNode } from 'inferno';
+import {Component, VNode, findDOMFromVNode} from 'inferno';
 
-export function findDOMNode(ref) {
-  if (ref && ref.nodeType) {
-    return ref;
+export function findDOMNode(ref: VNode | Component | Node): Node | null {
+  if (ref && (ref as Node).nodeType) {
+    return ref as Node;
   }
 
-  if (!ref || ref.$UN) {
+  if (!ref || (ref as Component).$UN) {
     return null;
   }
 
-  if (ref.$LI) {
-    return findDOMFromVNode(ref.$LI, true);
+  if ((ref as Component).$LI) {
+    return findDOMFromVNode((ref as Component).$LI, true);
   }
 
-  if (ref.flags) {
-    return findDOMFromVNode(ref, true);
+  if ((ref as VNode).flags) {
+    return findDOMFromVNode((ref as VNode), true);
   }
 
   return null;

packages/inferno/__tests__/defaultprops-typings.spec.tsx

@@ -28,6 +28,10 @@ describe('default prop typings', () => {
       name: 'custom-component',
       value: 107
     };
+
+    public render() {
+      return null;
+    }
   }
 
   it('TSX Should not require properties from default props', () => {

packages/inferno/__tests__/setState.spec.tsx

@@ -23,6 +23,9 @@ describe('setState', () => {
           state: 'Something'
         });
       }
+      public render() {
+        return null;
+      }
     }
 
     expect(() => render(<TestComponent />, container)).toThrowError(Error);

packages/inferno/__tests__/state.spec.tsx

@@ -54,6 +54,10 @@ describe('state', () => {
 
         expect(this.state).toBeNull();
       }
+
+      public render() {
+        return null;
+      }
     }
 
     const f = new Foo({}, {});

packages/inferno/__tests__/types.spec.tsx

@@ -1,4 +1,5 @@
-import { Component, Inferno, linkEvent, render } from 'inferno';
+import {Component, createRef, Inferno, linkEvent, render} from 'inferno';
+import {emptyFn} from "inferno-shared";
 
 describe('top level context', () => {
   let container;
@@ -162,4 +163,34 @@ describe('top level context', () => {
       render(<div style="background-color: red" />, container);
     });
   });
+
+  describe('ChildFlags', function () {
+    it('Should allow special flags on all elements', function () {
+      const refObj = createRef<HTMLDivElement>();
+      const text = "foobar";
+      const row = <div className="floating-row-number" $HasTextChildren onClick={emptyFn}>{text}</div>;
+
+
+      render(
+        <div className="floating-row-numbers" ref={refObj} $HasVNodeChildren>
+          {row}
+        </div>,
+        container
+      );
+    });
+
+    it('Should allow special flags on SVG', function () {
+      const refObj = createRef<SVGSVGElement>();
+      const text = "foobar";
+      const row = <div className="floating-row-number" $HasTextChildren onClick={emptyFn}>{text}</div>;
+
+
+      render(
+        <svg className="floating-row-numbers" ref={refObj} $HasVNodeChildren>
+          {row}
+        </svg>,
+        container
+      );
+    });
+  })
 });

packages/inferno/src/DOM/utils/common.ts

@@ -17,15 +17,9 @@ export type MoveQueueItem = {
 };
 
 export class AnimationQueues {
-  public componentDidAppear: Function[];
-  public componentWillDisappear: Function[];
-  public componentWillMove: MoveQueueItem[];
-
-  constructor() {
-    this.componentDidAppear = [];
-    this.componentWillDisappear = [];
-    this.componentWillMove = [];
-  }
+  public componentDidAppear: Function[] = [];
+  public componentWillDisappear: Function[] = [];
+  public componentWillMove: MoveQueueItem[] = [];
 }
 
 if (process.env.NODE_ENV !== 'production') {

packages/inferno/src/core/component.ts

@@ -123,7 +123,7 @@ function applyState<P, S>(component: Component<P, S>, force: boolean): void {
 }
 export type ComponentType<P = {}> = Component<P> | Inferno.StatelessComponent<P>;
 
-export class Component<P = {}, S = {}> implements IComponent<P, S> {
+export abstract class Component<P = {}, S = {}> implements IComponent<P, S> {
   // Public
   public state: Readonly<S | null> = null;
   public props: Readonly<{ children?: Inferno.InfernoNode | undefined }> & Readonly<P>;
@@ -178,25 +178,26 @@ export class Component<P = {}, S = {}> implements IComponent<P, S> {
 
   public componentWillMount?(): void;
 
-  public componentWillReceiveProps?(nextProps: { children?: Inferno.InfernoNode } & P, nextContext: any): void;
+  public componentWillReceiveProps?(nextProps: Readonly<{ children?: Inferno.InfernoNode } & P>, nextContext: any): void;
 
-  public shouldComponentUpdate?(nextProps: { children?: Inferno.InfernoNode } & P, nextState: Readonly<S>, context: any): boolean;
+  public shouldComponentUpdate?(nextProps: Readonly<{ children?: Inferno.InfernoNode } & P>, nextState: Readonly<S>, context: any): boolean;
 
-  public componentWillUpdate?(nextProps: { children?: Inferno.InfernoNode } & P, nextState: Readonly<S>, context: any): void;
+  public componentWillUpdate?(nextProps: Readonly<{ children?: Inferno.InfernoNode } & P>, nextState: Readonly<S>, context: any): void;
 
-  public componentDidUpdate?(prevProps: { children?: Inferno.InfernoNode } & P, prevState: Readonly<S>, snapshot: any): void;
+  public componentDidUpdate?(prevProps: Readonly<{ children?: Inferno.InfernoNode } & P>, prevState: Readonly<S>, snapshot: any): void;
 
   public componentWillUnmount?(): void;
 
   public getChildContext?(): void;
 
-  public getSnapshotBeforeUpdate?(prevProps: { children?: Inferno.InfernoNode } & P, prevState: Readonly<S>): any;
+  public getSnapshotBeforeUpdate?(prevProps: Readonly<{ children?: Inferno.InfernoNode } & P>, prevState: Readonly<S>): any;
 
-  public static defaultProps?: {};
+  public static defaultProps?: {} | null = null;
 
   public static getDerivedStateFromProps?(nextProps: any, state: any): any;
 
-  public render(_nextProps: { children?: Inferno.InfernoNode } & P, _nextState: Readonly<S>, _nextContext: any): Inferno.InfernoNode {
+  // @ts-expect-error TS6133
+  public render(props: Readonly<{ children?: Inferno.InfernoNode } & P>, state: Readonly<S>, context: any): Inferno.InfernoNode {
     return null;
   }
 }

packages/inferno/src/core/implementation.ts

@@ -106,7 +106,7 @@ function resolveComponentFlags(flags, type) {
 export function createComponentVNode<P>(
   flags: VNodeFlags,
   type: Function | Inferno.ComponentClass<P> | ForwardRef<P, any>,
-  props?: (Readonly<P> & P) | null,
+  props?: Readonly<P> | null,
   key?: null | string | number,
   ref?: Ref | Refs<P> | null
 ) {
@@ -204,7 +204,7 @@ export function normalizeProps(vNode) {
 }
 
 /*
- * Fragment is different than normal vNode,
+ * Fragment is different from normal vNode,
  * because when it needs to be cloned we need to clone its children too
  * But not normalize, because otherwise those possibly get KEY and re-mount
  */