Update React dependencies

package.json

@@ -27,14 +27,14 @@
     "lint": "eslint src/**/*{.ts,.tsx}"
   },
   "devDependencies": {
-    "@stencil/core": "^1.17.2",
+    "@stencil/core": "^1.17.3",
     "@stencil/eslint-plugin": "^0.3.1",
+    "@stencil/react-output-target": "^0.0.8",
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
     "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.5",
-    "gh-pages": "^3.1.0",
-    "@stencil/react-output-target": "^0.0.7"
+    "gh-pages": "^3.1.0"
   },
   "license": "MIT",
   "repository": {

react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proyecto26/animatable-component-react",
   "sideEffects": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React specific wrapper for animatable-component",
   "repository": {
     "type": "git",
@@ -12,7 +12,7 @@
     "clean": "rm -rf dist",
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
-    "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix --ignore-pattern 'src/react-component-lib/*'"
+    "lint": "tsc --noEmit && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix --ignore-pattern 'src/react-component-lib/*' --resolve-plugins-relative-to ."
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -21,21 +21,20 @@
     "dist/"
   ],
   "devDependencies": {
-    "@types/jest": "23.3.9",
-    "@types/node": "13.13.0",
-    "@types/react": "16.7.6",
-    "@types/react-dom": "16.0.9",
-    "@typescript-eslint/eslint-plugin": "^2.28.0",
-    "@typescript-eslint/parser": "^2.28.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.19.0",
-    "jest": "^25.4.0",
-    "jest-dom": "^3.0.2",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "rollup": "^1.21.2",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "typescript": "^3.3.4000"
+    "@stencil/core": "^1.17.3",
+    "@types/jest": "^26.0.0",
+    "@types/node": "^14.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
+    "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "jest": "^26.0.0",
+    "jest-dom": "^4.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "typescript": "^3.0.0"
   },
   "dependencies": {
     "@proyecto26/animatable-component": "^1.1.8"

react/src/hocs/index.tsx

@@ -10,7 +10,7 @@ export type AnimatableComponentType = ComponentType<AnimatableProps>;
  */
 export function createAnimatableComponent<T> (
   WrappedComponent: ComponentType<T>
-) {
+): ComponentType<T & AnimatableProps> {
   return function WrappedWithAnimatable (props: T & AnimatableProps) {
     const {
       ref,
@@ -74,4 +74,4 @@ export function createAnimatableComponent<T> (
       </AnimatableComponent>
     );
   };
-};
+}

react/src/react-component-lib/createComponent.tsx

@@ -10,7 +10,7 @@ import {
 import { HTMLStencilElement } from '@stencil/core/internal/stencil-public-runtime';
 
 interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
-  forwardedRef?: React.RefObject<ElementType>;
+  forwardedRef: React.RefObject<ElementType>;
   ref?: React.Ref<any>;
 }
 
@@ -22,15 +22,15 @@ export const createReactComponent = <
 >(
   tagName: string,
   ReactComponentContext?: React.Context<ContextStateType>,
-  manipulatePropsFunction: (
+  manipulatePropsFunction?: (
     originalProps: StencilReactInternalProps<ElementType>,
     propsToPass: any,
-  ) => ExpandedPropsTypes = undefined,
+  ) => ExpandedPropsTypes,
 ) => {
   const displayName = dashToPascalCase(tagName);
 
   const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
-    componentEl: ElementType;
+    componentEl!: ElementType;
 
     setComponentElRef = (element: ElementType) => {
       this.componentEl = element;
@@ -54,7 +54,7 @@ export const createReactComponent = <
       let propsToPass = Object.keys(cProps).reduce((acc, name) => {
         if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
           const eventName = name.substring(2).toLowerCase();
-          if (isCoveredByReact(eventName)) {
+          if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
             (acc as any)[name] = (cProps as any)[name];
           }
         }
@@ -65,7 +65,7 @@ export const createReactComponent = <
         propsToPass = manipulatePropsFunction(this.props, propsToPass);
       }
 
-      let newProps: StencilReactInternalProps<ElementType> = {
+      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
         ...propsToPass,
         ref: mergeRefs(forwardedRef, this.setComponentElRef),
         style,

react/src/react-component-lib/interfaces.ts

@@ -1,4 +1,7 @@
-import { EventEmitter } from '@stencil/core';
+// General types important to applications using stencil built components
+export interface EventEmitter<T = any> {
+  emit: (data?: T) => CustomEvent<T>;
+}
 
 export interface StyleReactProps {
   class?: string;