Migrate project to Typescript (#63)

* Migrate to Typescript
roderickhsiao · Mar 29, 2022 · 81f3b62 · 81f3b62
1 parent fef3a93
commit 81f3b62
Show file tree

Hide file tree

Showing 16 changed files with 4,375 additions and 3,805 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,60 +1,75 @@
 {
-  "presets": [
+  "presets":[
     [
       "@babel/preset-env",
       {
-        "loose": true
+        "loose":true
       }
     ],
-    "@babel/preset-react",
-    "@babel/preset-flow"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-flow-strip-types",
-    "@babel/plugin-transform-spread",
-    "@babel/plugin-proposal-class-properties"
+    [
+      "@babel/preset-react",
+      {
+        "runtime":"automatic"
+      }
+    ],
+    "@babel/preset-typescript"
   ],
-  "env": {
-    "next": {
-      "presets": [
+  "env":{
+    "next":{
+      "presets":[
         [
           "@babel/preset-env",
           {
-            "modules": false,
-            "loose": true
+            "modules":false,
+            "loose":true
+          }
+        ],
+        [
+          "@babel/preset-react",
+          {
+            "runtime":"automatic"
           }
         ],
-        "@babel/preset-react",
-        "@babel/preset-flow"
+        "@babel/preset-typescript"
       ]
     },
-    "es": {
-      "presets": [
+    "es":{
+      "presets":[
         [
           "@babel/preset-env",
           {
-            "targets": {
-              "esmodules": true
+            "targets":{
+              "esmodules":true
             },
-            "loose": true
+            "loose":true
           }
         ],
-        "@babel/preset-react",
-        "@babel/preset-flow"
+        [
+          "@babel/preset-react",
+          {
+            "runtime":"automatic"
+          }
+        ],
+        "@babel/preset-typescript"
       ]
     },
-    "umd": {
-      "presets": [
+    "umd":{
+      "presets":[
         [
           "@babel/preset-env",
           {
-            "modules": "umd",
-            "loose": true
+            "modules":"umd",
+            "loose":true
+          }
+        ],
+        [
+          "@babel/preset-react",
+          {
+            "runtime":"automatic"
           }
         ],
-        "@babel/preset-react",
-        "@babel/preset-flow"
+        "@babel/preset-typescript"
       ]
     }
   }
-}
+}
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -38,5 +38,5 @@ jobs:
 
       # run tests!
       - run: yarn test:ci
-      - run: yarn flow
+      - run: yarn tsc --noEmit
       - run: yarn bundlesize
diff --git a/.eslintrc b/.eslintrc
@@ -1,39 +1,47 @@
 {
   "extends": [
     "airbnb",
-    "plugin:flowtype/recommended"
+    "airbnb-typescript",
   ],
   "plugins": [
-    "flowtype"
+    "@typescript-eslint"
   ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    },
+    "project": "./tsconfig.json"
+  },
   "rules": {
-    # We use _ to define private variables and methods in clases
     "no-underscore-dangle": 0,
-    # This seems to be buggy we don't want eslint to check this
     "import/no-extraneous-dependencies": 0,
-    # This is a depricated rule. So we turned off it.
     "react/require-extension": 0,
-    # We can write JSX in anyfile we want.
     "react/jsx-filename-extension": 0,
     "react/destructuring-assignment": 0,
     "react/default-props-match-prop-types": 0,
     "react/jsx-props-no-spreading": 0,
     "react/static-property-placement": 0,
-    # We don't like this rule.
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "arrow-body-style": 0,
-    # We don't like this rule. We write arrow functions only when we needed.
     "prefer-arrow-callback": 0,
-    # We don't need to write function names always.
     "func-names": 0,
-    # propTypes can be object
     "react/forbid-prop-types": 0,
-    # trailing comma
     "comma-dangle": 0,
     "react/sort-comp": 0,
     "react/prop-types": 0,
-    "arrow-parens": 0
+    "arrow-parens": 0,
+    "import/extensions": [
+     "error", "always", {
+       "js": "never",
+       "jsx": "never",
+       "ts": "never",
+       "tsx": "never"
+     }
+    ],
   },
   "env": {
     "jest": true
-  }
+  },
 }
diff --git a/.flowconfig b/.flowconfig
diff --git a/.scripts/prepublish.sh b/.scripts/prepublish.sh
@@ -9,16 +9,16 @@
 echo "=> Transpiling 'src' into ES5 ..."
 echo ""
 rm -rf ./dist
-NODE_ENV=production BABEL_ENV=cjs ./node_modules/.bin/babel --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist
+NODE_ENV=production BABEL_ENV=cjs ./node_modules/.bin/babel --extensions ".ts,.tsx" --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist
 
 echo "=> Transpiling 'src' into ES6 ..."
-NODE_ENV=production BABEL_ENV=es ./node_modules/.bin/babel --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/es
+NODE_ENV=production BABEL_ENV=es ./node_modules/.bin/babel --extensions ".ts,.tsx" --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/es
 
 echo "=> Transpiling 'src' into UMD ..."
-NODE_ENV=production BABEL_ENV=umd ./node_modules/.bin/babel --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/umd
+NODE_ENV=production BABEL_ENV=umd ./node_modules/.bin/babel --extensions ".ts,.tsx" --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/umd
 
 echo "=> Transpiling 'src' into NEXT ..."
-NODE_ENV=production BABEL_ENV=next ./node_modules/.bin/babel --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/next
+NODE_ENV=production BABEL_ENV=next ./node_modules/.bin/babel --extensions ".ts,.tsx" --ignore "./src/__tests__/**,./src/stories/**" ./src --out-dir ./dist/next
 
 echo ""
 echo "=> Transpiling completed."

diff --git a/jest-config.js b/jest-config.js
@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.(jsx|tsx|js|ts)?$': 'babel-jest'
   },
   reporters: ['default', 'jest-junit']
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-aspect-ratio",
-  "version": "1.0.50",
+  "version": "1.1.0",
   "description": "React Component to maintain a consistent width-to-height ratio (aspect ratio), preventing cumulative layout shift.",
   "author": "Roderick Hsiao <roderickhsiao@gmail.com>",
   "repository": {
@@ -20,14 +20,13 @@
   ],
   "scripts": {
     "bundlesize": "bundlesize",
-    "flow": "flow src",
     "lint": "eslint src",
     "lintfix": "eslint src --fix",
     "postpublish": "npm run publish-storybook",
-    "prepublish": ". ./.scripts/prepublish.sh",
+    "prepublish": ". ./.scripts/prepublish.sh && tsc --build tsconfig.publish.json",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
     "storybook": "start-storybook -p 9010",
-    "test-watch": "npm run testonly -- --watch --watch-extensions js",
+    "test-watch": "npm run testonly -- --watch --watch-extensions js,ts",
     "test": "npm run lint && npm run testonly",
     "test:ci": "npm run lint && npm run testonly:ci",
     "testonly": "jest --config jest-config.js",
@@ -36,34 +35,39 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.2.3",
-    "@babel/plugin-transform-spread": "7.12.1",
+    "@babel/plugin-transform-typescript": "^7.16.8",
     "@storybook/react": "^6.0.0",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.5",
-    "babel-preset-react-app": "^9.1.1",
+    "babel-preset-react-app": "^10.0.0",
     "babel-runtime": "^6.11.6",
     "bundlesize": "^0.18.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-flowtype": "^4.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-airbnb": "^19.0.0",
+    "eslint-config-airbnb-typescript": "^16.1.4",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.0.0",
-    "flow-bin": "^0.119.0",
     "git-url-parse": "^11.1.1",
     "jest": "^25.1.0",
     "jest-cli": "^25.1.0",
     "jest-junit": "^10.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
-    "storybook-addon-jsx": "^7.0.0"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-test-renderer": "^17.0.0",
+    "storybook-addon-jsx": "^7.0.0",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
-    "react": "^0.14.7 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+    "react": "^0.14.7 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "main": "dist/index.js",
   "module": "dist/es/index.js",

diff --git a/src/__tests__/__snapshots__/index.js.snap → src/__tests__/__snapshots__/index.tsx.snap b/src/__tests__/__snapshots__/index.js.snap → src/__tests__/__snapshots__/index.tsx.snap
diff --git a/src/__tests__/index.js → src/__tests__/index.tsx b/src/__tests__/index.js → src/__tests__/index.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
-import OldAspectRatio, { AspectRatio } from '../index'; // // eslint-disable-line import/no-named-as-default
+import OldAspectRatio, { AspectRatio } from '../index';
 
 describe('Aspect Ratio', () => {
   describe('React < 15.6', () => {
@@ -21,13 +20,13 @@ describe('Aspect Ratio', () => {
       expect(node).toMatchSnapshot();
     });
 
-    it('custom style willl be adpoted', () => {
+    it('custom style will be adpoted', () => {
       const innerImage = <img src="https://foo.bar" alt="demo" />;
       const node = renderer
         .create(
           <OldAspectRatio ratio="4/3" style={{ color: '#fff' }}>
             {innerImage}
-          </OldAspectRatio>
+          </OldAspectRatio>,
         )
         .toJSON();
 
@@ -38,13 +37,17 @@ describe('Aspect Ratio', () => {
   describe('React > 15.6', () => {
     it('should render wrapper for children', () => {
       const innerImage = <img src="https://foo.bar" alt="demo" />;
-      const node = renderer.create(<AspectRatio ratio="4/3">{innerImage}</AspectRatio>).toJSON();
+      const node = renderer
+        .create(<AspectRatio ratio="4/3">{innerImage}</AspectRatio>)
+        .toJSON();
       expect(node).toMatchSnapshot();
     });
 
     it('should support number as props', () => {
       const innerImage = <img src="https://foo.bar" alt="demo" />;
-      const node = renderer.create(<AspectRatio ratio={0.75}>{innerImage}</AspectRatio>).toJSON();
+      const node = renderer
+        .create(<AspectRatio ratio={0.75}>{innerImage}</AspectRatio>)
+        .toJSON();
       expect(node).toMatchSnapshot();
     });
 
@@ -54,7 +57,7 @@ describe('Aspect Ratio', () => {
         .create(
           <AspectRatio ratio="4/3" style={{ color: '#fff' }}>
             {innerImage}
-          </AspectRatio>
+          </AspectRatio>,
         )
         .toJSON();
 

diff --git a/src/index.js → src/index.ts b/src/index.js → src/index.ts