Allow default import with TypeScript (#72)

danreeves · Feb 25, 2018 · 43a4c0d · 43a4c0d
1 parent 8e89a46
commit 43a4c0d
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 26 deletions.
diff --git a/.babelrc b/.babelrc
@@ -3,8 +3,5 @@
     "es2015",
     "stage-0",
     "react"
-  ],
-  "plugins": [
-    "add-module-exports"
   ]
 }
diff --git a/example/index.html b/example/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-<head>
+  <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>React Tether</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-</head>
-<body>
+  </head>
+  <body>
     <div id="app"></div>
     <script src="./index.js"></script>
-</body>
+    <a id='commonjs' href="../tests/examples/commonjs/index.html" />
+    <a id='esm' href="../tests/examples/esm/index.html" />
+    <a id='typescript' href="../tests/examples/typescript/index.html" />
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,22 +3,24 @@
   "version": "0.6.1",
   "description": "Drop content anywhere on the page.",
   "main": "lib/react-tether.js",
+  "types": "lib/react-tether.d.ts",
   "scripts": {
     "build:lib": "babel src --out-dir lib",
-    "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
+    "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js && cp src/react-tether.d.ts lib/react-tether.d.ts",
     "postbuild": "NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js",
-    "prebuild": "rm -rf dist && mkdir dist",
+    "prebuild": "rm -rf dist && mkdir dist && rm -rf lib && mkdir lib",
     "prepublish": "npm run build",
     "demo": "parcel example/index.html",
     "demo:deploy": "./bin/build-demo",
     "unit": "jest tests/unit",
     "e2e": "testcafe chrome tests/e2e --app 'npm run demo'",
     "e2e:full": "testcafe \"saucelabs:Chrome\",\"saucelabs:Firefox\",\"saucelabs:Safari\",\"saucelabs:MicrosoftEdge\" tests/e2e --app 'npm run demo'",
-    "test": "npm run unit",
+    "test": "npm run typescript && npm run unit",
     "tdd": "npm run unit -- --watch",
     "react:16": "enzyme-adapter-react-install 16",
     "react:15": "enzyme-adapter-react-install 15",
-    "danger": "danger ci"
+    "danger": "danger ci",
+    "typescript": "tsc -p tsconfig.json"
   },
   "repository": {
     "type": "git",
@@ -46,10 +48,12 @@
     "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@types/react": "^16.0.38",
+    "@types/react-dom": "^16.0.4",
+    "@types/tether": "^1.4.3",
     "babel-cli": "^6.16.0",
     "babel-core": "^6.17.0",
     "babel-loader": "^6.2.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
@@ -68,6 +72,7 @@
     "styled-components": "^2.2.3",
     "testcafe": "^0.18.3",
     "testcafe-browser-provider-saucelabs": "^1.3.0",
+    "typescript": "^2.7.2",
     "webpack": "^1.13.2"
   },
   "prettier": {

diff --git a/src/react-tether.d.ts b/src/react-tether.d.ts
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as Tether from 'tether';
+
+export default TetherComponent;
+export as namespace ReactTether;
+
+declare class TetherComponent extends React.Component<ReactTether.TetherComponentProps> {
+  props: ReactTether.TetherComponentProps;
+
+  static propTypes: ReactTether.TetherComponentProps;
+
+  static defaultProps: {
+    renderElementTag: string;
+    renderElementTo: any;
+  };
+
+  getTetherInstance(): Tether;
+
+  disable(): void;
+
+  enable(): void;
+
+  on(event: any, handler: any, ctx?: any): void;
+
+  once(event: any, handler: any, ctx?: any): void;
+
+  off(event: any, handler: any): void;
+
+  position(): void;
+}
+
+declare namespace ReactTether {
+  interface TetherComponentProps extends React.Props<TetherComponent>, Tether.ITetherOptions {
+    children: React.ReactNode;
+    renderElementTag?: string;
+    renderElementTo?: Element | string;
+  }
+}
diff --git a/tests/e2e/demo.js b/tests/e2e/demo.js
@@ -1,13 +1,15 @@
 import { Selector } from 'testcafe';
 
-fixture`My first test`.page`http://localhost:1234/`;
+const home = 'http://localhost:1234';
 
-const target = Selector('#DRAG_ME');
-const tooltip = Selector('#WATCH_ME');
-const button = Selector('#CLICK_ME');
+fixture`My first test`.page`${home}`;
 
 test(`It handles repositioning, constraints,
       and unmounting the tethered component`, async t => {
+  const target = Selector('#DRAG_ME');
+  const tooltip = Selector('#WATCH_ME');
+  const button = Selector('#CLICK_ME');
+
   await t.hover(target);
   // Target is to the left of the tooltip
   const { left: targetInitialLeft } = await target.boundingClientRect;
@@ -17,6 +19,7 @@ test(`It handles repositioning, constraints,
     .ok(`${targetInitialLeft} < ${tooltipInitialLeft}`);
 
   await t.drag(target, 600, 0);
+
   // Target is to the right of the tooltip
   const { left: targetAfterLeft } = await target.boundingClientRect;
   const { left: tooltipAfterLeft } = await tooltip.boundingClientRect;
@@ -31,3 +34,27 @@ test(`It handles repositioning, constraints,
   await t.click(button);
   await t.drag(target, -300, 0);
 });
+
+test('CommonJS example works', async t => {
+  const cjs = Selector('#commonjs');
+  const app = Selector('#app');
+  await t.navigateTo((await cjs.attributes).href);
+  await t.expect(await app.hasChildElements).ok();
+  await t.navigateTo(home);
+});
+
+test('ESM example works', async t => {
+  const esm = Selector('#esm');
+  const app = Selector('#app');
+  await t.navigateTo((await esm.attributes).href);
+  await t.expect(await app.hasChildElements).ok();
+  await t.navigateTo(home);
+});
+
+test('TypeScript example works', async t => {
+  const tsc = Selector('#typescript');
+  const app = Selector('#app');
+  await t.navigateTo((await tsc.attributes).href);
+  await t.expect(await app.hasChildElements).ok();
+  await t.navigateTo(home);
+});
diff --git a/tests/examples/commonjs/index.html b/tests/examples/commonjs/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>CommonJS example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/tests/examples/commonjs/index.js b/tests/examples/commonjs/index.js
@@ -0,0 +1,17 @@
+const React = require('react');
+const { render } = require('react-dom');
+const { default: ReactTether } = require('../../../lib/react-tether');
+
+function App() {
+  return (
+    <div>
+      <h1>CommonJS example</h1>
+      <ReactTether attachment="top left">
+        <span>Child 1</span>
+        <span>Child 2</span>
+      </ReactTether>
+    </div>
+  );
+}
+
+render(<App />, document.querySelector('#app'));
diff --git a/tests/examples/esm/index.html b/tests/examples/esm/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>ES Modules example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/tests/examples/esm/index.js b/tests/examples/esm/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ReactTether from '../../../lib/react-tether';
+
+function App() {
+  return (
+    <div>
+      <h1>ES Modules example</h1>
+      <ReactTether attachment="top left">
+        <span>Child 1</span>
+        <span>Child 2</span>
+      </ReactTether>
+    </div>
+  );
+}
+
+render(<App />, document.querySelector('#app'));
diff --git a/tests/examples/typescript/index.html b/tests/examples/typescript/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TypeScript example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/tests/examples/typescript/index.tsx b/tests/examples/typescript/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ReactTether from '../../../lib/react-tether';
+
+function App () {
+  return <div>
+      <h1>TypeScript example</h1>
+      <ReactTether attachment="top left">
+        <span>Child 1</span>
+        <span>Child 2</span>
+      </ReactTether>
+    </div>
+}
+
+ReactDOM.render(<App/>, document.querySelector('#app'));
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "jsx": "react",
+    "noEmit": true,
+
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*", "tests/examples/**/*.tsx"]
+}