Migrate to TypeScript (#105)

Migrate to TypeScript

Author: ghengeveld

.eslintrc

@@ -20,5 +20,17 @@
     "react": {
       "version": "detect"
     }
-  }
-}
+  },
+  "overrides": [{
+    "files": "packages/**/*.{ts,tsx}",
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "modules": true
+      }
+    }
+  }]
+}

.storybook/webpack.config.js

@@ -1,4 +1,12 @@
 module.exports = async ({ config }) => {
   delete config.module.rules[0].include
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
   return config
 }

babel.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   presets: ["@babel/preset-react"],
-  plugins: ["@babel/plugin-proposal-object-rest-spread"],
+  plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"],
 
   env: {
     test: {
-      presets: ["@babel/preset-env", "@babel/preset-react"],
-      plugins: ["@babel/plugin-transform-runtime"],
+      presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+      plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"],
     },
   },
 }

examples/with-typescript/package.json

@@ -14,7 +14,7 @@
     "now-build": "SKIP_PREFLIGHT_CHECK=true react-scripts build"
   },
   "dependencies": {
-    "@types/node": "12.12.6",
+    "@types/node": "12.12.7",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "react": "16.11.0",

jest.config.js

@@ -17,7 +17,9 @@ module.exports = {
   coverageDirectory: "<rootDir>/coverage",
   verbose: true,
   bail: true,
-  transform: { "^.+\\.js$": "babel-jest" },
+  transform: {
+    "^.+\\.[tj]sx?$": "babel-jest",
+  },
   projects: ["<rootDir>/packages/*"],
   setupFiles: ["<rootDir>/jest.setup.js"],
   testPathIgnorePatterns: ["/node_modules/", "/pkg/"],

package.json

@@ -15,17 +15,18 @@
     "start": "run-p start:*",
     "start:examples": "now dev",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint packages/*/src/*.js",
+    "lint": "eslint packages/*/src/*.{js,ts,tsx}",
     "test": "jest packages/*/src/*.spec.js",
     "test:watch": "yarn test -- --watch",
     "test:devtools": "jest react-async-devtools/src",
     "test:components": "jest src/Async.spec.js --collectCoverageFrom=src/Async.js",
-    "test:backwards": "yarn add -D -W react@16.3.1 react-dom@16.3.1 && yarn test:components",
-    "test:forwards": "yarn add -D -W react@next react-dom@next && yarn test",
-    "test:latest": "yarn add -D -W react@latest react-dom@latest && yarn test",
+    "test:backwards": "yarn add -D -W react@16.3.1 react-dom@16.3.1 && yarn resolutions:fix-react && yarn test:components",
+    "test:forwards": "yarn add -D -W react@next react-dom@next && yarn resolutions:fix-react && yarn test",
+    "test:latest": "yarn add -D -W react@latest react-dom@latest && yarn resolutions:fix-react && yarn test",
     "test:compat": "yarn test:backwards && yarn test:forwards && yarn test:latest",
     "test:examples": "CI=1 lerna run --scope '*-example' test -- --passWithNoTests --watchAll=false",
     "test:chromatic": "chromatic --app-code iiua39bmt0j --build-script-name build:storybook",
+    "resolutions:fix-react": "jq '.resolutions.react = .devDependencies.react|.resolutions.\"react-dom\"=.devDependencies.react' package.json > package.json.new; mv package.json.new package.json; yarn install",
     "ci": "yarn lint && yarn test:compat && yarn test:examples",
     "build:packages": "lerna run --scope 'react-async*' build",
     "build:examples": "lerna run --scope '*-example' build",
@@ -36,18 +37,25 @@
   },
   "devDependencies": {
     "@babel/core": "7.7.2",
+    "@babel/plugin-proposal-class-properties": "7.7.0",
     "@babel/plugin-proposal-object-rest-spread": "7.6.2",
     "@babel/plugin-transform-runtime": "7.6.2",
     "@babel/preset-env": "7.7.1",
     "@babel/preset-react": "7.7.0",
+    "@babel/preset-typescript": "7.7.2",
     "@pika/pack": "0.5.0",
     "@pika/plugin-build-node": "0.7.1",
     "@pika/plugin-build-types": "0.7.1",
+    "@pika/plugin-build-umd": "0.7.1",
     "@pika/plugin-build-web": "0.7.1",
+    "@pika/plugin-bundle-types": "0.7.1",
     "@pika/plugin-standard-pkg": "0.7.1",
+    "@pika/plugin-ts-standard-pkg": "0.7.1",
     "@storybook/react": "5.2.6",
     "@testing-library/jest-dom": "4.2.3",
     "@testing-library/react": "9.3.2",
+    "@typescript-eslint/eslint-plugin": "2.6.1",
+    "@typescript-eslint/parser": "2.6.1",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
@@ -61,13 +69,15 @@
     "eslint-plugin-react-hooks": "2.2.0",
     "jest": "24.9.0",
     "lerna": "3.18.4",
+    "node-jq": "1.11.0",
     "now": "16.4.4",
     "npm-run-all": "4.1.5",
     "prettier": "1.19.1",
     "prop-types": "15.7.2",
     "react": "16.11.0",
     "react-async": "9.0.0",
     "react-dom": "16.11.0",
-    "storybook-chromatic": "3.1.0"
+    "storybook-chromatic": "3.1.0",
+    "typescript": "3.7.2"
   }
 }

packages/react-async-devtools/src/index.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { actionTypes, reducer, globalScope } from "react-async"
+import { ActionTypes, reducer, globalScope } from "react-async"
 
 import { Root, Range, Checkbox, Label, Small, Ol, Li, Button } from "./components"
 
@@ -17,14 +17,14 @@ globalScope.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
     state.update(action)
   }
   switch (action.type) {
-    case actionTypes.start:
+    case ActionTypes.start:
       if (state.intercept) {
         dispatch({ ...action, payload: undefined })
         state.update(action, run)
       } else run()
       break
-    case actionTypes.fulfill:
-    case actionTypes.reject:
+    case ActionTypes.fulfill:
+    case ActionTypes.reject:
       setTimeout(run, state.latency * 1000)
       break
     default:

packages/react-async/package.json

@@ -29,22 +29,26 @@
   "@pika/pack": {
     "pipeline": [
       [
-        "@pika/plugin-standard-pkg",
-        {
-          "exclude": [
-            "specs.js",
-            "*.spec.js"
-          ]
-        }
+        "@pika/plugin-ts-standard-pkg"
       ],
       [
         "@pika/plugin-build-node"
       ],
       [
-        "@pika/plugin-build-web"
+        "@pika/plugin-build-web",
+        {
+          "entrypoint": [
+            "module",
+            "unpkg",
+            "jsdelivr"
+          ]
+        }
+      ],
+      [
+        "@pika/plugin-build-umd"
       ],
       [
-        "@pika/plugin-build-types"
+        "@pika/plugin-bundle-types"
       ]
     ]
   }

packages/react-async/src/Async.spec.js

@@ -38,6 +38,7 @@ describe("Async", () => {
         <Async.Initial>
           {value => {
             one = value
+            return null
           }}
         </Async.Initial>
       </Async>
@@ -47,6 +48,7 @@ describe("Async", () => {
         <Async.Initial>
           {value => {
             two = value
+            return null
           }}
         </Async.Initial>
       </Async>
@@ -55,6 +57,36 @@ describe("Async", () => {
   })
 })
 
+describe("rendering context consumers without provider should throw an error", () => {
+  for (const Component of [
+    Async.Initial,
+    Async.Pending,
+    Async.Fulfilled,
+    Async.Rejected,
+    Async.Settled,
+  ]) {
+    test("does not throw an error when rendered within <Async>", () => {
+      expect(() =>
+        render(
+          <Async>
+            <Component>{() => null}</Component>
+          </Async>
+        )
+      ).not.toThrowError()
+    })
+    test("does throw an error when not rendered within <Async>", () => {
+      // Prevent the thrown error from showing up in test output by mocking console.error.
+      jest.spyOn(console, "error")
+      global.console.error.mockImplementation(() => {})
+
+      expect(() => render(<Component>{() => null}</Component>)).toThrowError()
+
+      // Restore the original console.error so other tests will still print errors that occur.
+      global.console.error.mockRestore()
+    })
+  }
+})
+
 describe("Async.Fulfilled", () => {
   test("renders only after the promise is resolved", async () => {
     const promiseFn = () => resolveTo("ok")