Adds typescript typings tests

Author: ctrlplusb

.eslintignore

@@ -2,3 +2,4 @@ node_modules/
 commonjs/
 coverage/
 umd/
+src/__tests__/typescript/

package.json

@@ -43,6 +43,8 @@
     "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
   },
   "devDependencies": {
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.2",
     "app-root-dir": "1.0.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
@@ -84,7 +86,9 @@
     "rimraf": "^2.6.2",
     "rollup": "^0.60.7",
     "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-uglify": "^4.0.0"
+    "rollup-plugin-uglify": "^4.0.0",
+    "typescript": "^3.4.5",
+    "typings-tester": "^0.3.2"
   },
   "jest": {
     "collectCoverageFrom": [

react-sizeme.d.ts

@@ -1,25 +1,28 @@
-import { Component, ComponentType } from 'react'
+import { Component, ComponentType, ReactNode } from 'react'
 
-type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 
 interface SizeMeProps {
   size: {
-    width: number | null;
-    height: number | null;
-  };
+    width: number | null
+    height: number | null
+  }
 }
 
 export interface SizeMeOptions {
-  monitorWidth?: boolean;
-  monitorHeight?: boolean;
-  monitorPosition?: boolean;
-  refreshRate?: number;
-  refreshMode?: 'throttle' | 'debounce';
-  noPlaceholder?: boolean;
-  children(props: SizeMeProps): JSX.Element;
+  monitorWidth?: boolean
+  monitorHeight?: boolean
+  monitorPosition?: boolean
+  refreshRate?: number
+  refreshMode?: 'throttle' | 'debounce'
+  noPlaceholder?: boolean
+  children(props: SizeMeProps): ReactNode
 }
 
-export class SizeMe extends Component<SizeMeOptions> {
-}
+export class SizeMe extends Component<SizeMeOptions> {}
 
-export const withSize: (options?: SizeMeOptions) => <P extends SizeMeProps>(component: ComponentType<P>) => ComponentType<Omit<P, 'size'>>;
+export const withSize: (
+  options?: SizeMeOptions,
+) => <P extends SizeMeProps>(
+  component: ComponentType<P>,
+) => ComponentType<Omit<P, 'size'>>

src/__tests__/typescript.test.js

@@ -0,0 +1,7 @@
+import { checkDirectory } from 'typings-tester'
+
+describe('TypeScript definitions', () => {
+  it('should compile against easy-peasy.d.ts', () => {
+    checkDirectory(`${__dirname}/typescript`)
+  })
+})

src/__tests__/typescript/component.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { SizeMe } from 'react-sizeme'
+
+function MyApp() {
+  return (
+    <SizeMe>
+      {({ size }) => {
+        const { width, height } = size
+        if (width) {
+          const foo = width + 1
+        }
+        if (height) {
+          const foo = height + 1
+        }
+        // typings:expect-error
+        const h1 = height + 1
+        // typings:expect-error
+        const w1 = width + 1
+        return <div />
+      }}
+    </SizeMe>
+  )
+}

src/__tests__/typescript/hoc.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { withSize, SizeMeProps } from 'react-sizeme'
+
+interface MyComponentProps extends SizeMeProps {
+  id: number
+}
+
+function MyComponent({ id, size }: MyComponentProps) {
+  const { width, height } = size
+  if (width) {
+    const foo = width + 1
+  }
+  if (height) {
+    const foo = height + 1
+  }
+  // typings:expect-error
+  const h1 = height + 1
+  // typings:expect-error
+  const w1 = width + 1
+  return <div>My width is {size.width}px</div>
+}
+
+const SizedMyComponent = withSize()(MyComponent)
+
+const foo = <SizedMyComponent id={1} />

src/__tests__/typescript/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "lib": ["esnext", "dom"],
+    "jsx": "preserve",
+    "strict": true,
+    "baseUrl": "../../..",
+    "paths": {
+      "react-sizeme": ["react-sizeme.d.ts"]
+    }
+  }
+}

yarn.lock

@@ -124,6 +124,26 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.8.tgz#e5d71173c95533be9842b2c798978f095f912aab"
   integrity sha512-szA3x/3miL90ZJxUCzx9haNbK5/zmPieGraZEe4WI+3srN0eGLiT22NXeMHmyhNEopn+IrxqMc7wdVwvPl8meg==
 
+"@types/prop-types@*":
+  version "15.7.1"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
+  integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
+
+"@types/react-dom@^16.8.2":
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88"
+  integrity sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.8.8":
+  version "16.8.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18"
+  integrity sha512-26tFVJ1omGmzIdFTFmnC5zhz1GTaqCjxgUxV4KzWvsybF42P7/j4RBn6UeO3KbHPXqKWZszMXMoI65xIWm954A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 abab@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
@@ -1535,7 +1555,7 @@ combined-stream@^1.0.5, combined-stream@^1.0.6, combined-stream@~1.0.5, combined
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.11.0, commander@^2.14.1, commander@^2.19.0, commander@^2.9.0, commander@~2.20.0:
+commander@^2.11.0, commander@^2.12.2, commander@^2.14.1, commander@^2.19.0, commander@^2.9.0, commander@~2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -1680,6 +1700,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
+  integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
+
 damerau-levenshtein@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -6072,6 +6097,18 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99"
+  integrity sha512-YycBxUb49UUhdNMU5aJ7z5Ej2XGmaIBL0x34vZ82fn3hGvD+bgrMrVDpatgz2f7YxUMJxMkbWxJZeAvDxVe7Vw==
+
+typings-tester@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/typings-tester/-/typings-tester-0.3.2.tgz#04cc499d15ab1d8b2d14dd48415a13d01333bc5b"
+  integrity sha512-HjGoAM2UoGhmSKKy23TYEKkxlphdJFdix5VvqWFLzH1BJVnnwG38tpC6SXPgqhfFGfHY77RlN1K8ts0dbWBQ7A==
+  dependencies:
+    commander "^2.12.2"
+
 uglify-js@^3.1.4:
   version "3.5.9"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.5.9.tgz#372fbf95939555b1f460b1777d33a67d4a994ac9"