feat(typescript): typescript

jafin · Apr 2, 2022 · 4f93dfe · 4f93dfe
1 parent fa67036
commit 4f93dfe
Show file tree

Hide file tree

Showing 38 changed files with 2,492 additions and 1,365 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,14 @@
 {
+  "env": {
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-typescript",
+        ["@babel/preset-react", { "runtime": "automatic" }]
+      ],
+      "plugins": []
+    }
+  },
   "plugins": [
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-syntax-dynamic-import",

diff --git a/.eslintrc b/.eslintrc
@@ -1,53 +1,57 @@
-{
-  "parser": "@babel/eslint-parser",
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "extends": ["standard", "prettier", "eslint:recommended", "plugin:react/recommended"],
-  "env": {
-    "es6": true,
-    "jest": true
-  },
-  "plugins": ["react", "prettier"],
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2018,
-    "requireConfigFile": false,
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "jsx": true,
-      "arrowFunctions": true,
-      "blockBindings": true,
-      "defaultParams": true,
-      "destructuring": true,
-      "forOf": true,
-      "generators": true,
-      "objectLiteralComputedProperties": true,
-      "objectLiteralShorthandMethods": true,
-      "objectLiteralShorthandProperties": true,
-      "experimentalObjectRestSpread": true,
-      "restParams": true,
-      "spread": true,
-      "templateStrings": true,
-      "modules": true,
-      "classes": true
-    }
-  },
-  "rules": {
-    "react/jsx-no-bind": "off",
-    "space-before-function-paren": 0,
-    "react/jsx-boolean-value": 0,
-    "max-len": [2, { "code": 120, "ignoreComments": true }],
-    "newline-per-chained-call": 0,
-    "no-trailing-spaces": ["error"],
-    "quotes": ["error", "single", { "avoidEscape": true }],
-    "comma-dangle": ["error", "never"],
-    "no-template-curly-in-string": "off",
-    "semi": ["error", "always"],
-    "object-curly-spacing": ["error", "always"],
-    "quote-props": ["error", "consistent"],
-    "no-var": ["error"]
-  }
-}
+{
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    // "standard",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "env": {
+    //error with "es2021": true
+    "es6": true,
+    "jest": true,
+    "node": true,
+    "browser": true
+  },
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "requireConfigFile": false,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/jsx-no-bind": [
+      "warn",
+      {
+        "ignoreRefs": true
+      }
+    ],
+    "space-before-function-paren": 0,
+    "react/jsx-boolean-value": 0,
+    "max-len": [2, { "code": 120, "ignoreComments": true }],
+    "newline-per-chained-call": 0,
+    "no-trailing-spaces": ["error"],
+    "quotes": ["error", "single", { "avoidEscape": true }],
+    "comma-dangle": ["error", "never"],
+    "no-template-curly-in-string": "off",
+    "semi": ["error", "always"],
+    "object-curly-spacing": ["error", "always"],
+    "quote-props": ["error", "consistent"],
+    "no-var": ["error"],
+    "indent": "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@
 node_modules/
 dist/
 build/
+/out-tsc/**
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,11 +1,10 @@
 // prettier.config.js or .prettierrc.js
 module.exports = {
   singleQuote: true,
-  trailingComma: "none",
+  trailingComma: 'none',
   tabWidth: 2,
   printWidth: 80,
   semi: true,
   bracketSpacing: true,
-  jsxBracketSameLine: false,
-  endOfLine: "lf"
+  endOfLine: 'lf'
 };
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite React TypeScript Tailwind Starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -4,13 +4,22 @@
   "version": "1.0.0",
   "license": "MIT",
   "dependencies": {
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@vitejs/plugin-react": "^1.3.0",
     "gh-pages": "^2.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "^5.0.0",
-    "react-tooltip": "link:.."
+    "react-tooltip": "link:..",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1",
+    "vite-tsconfig-paths": "^3.4.1"
   },
   "scripts": {
+    "dev": "vite",
+    "build:vite": "tsc && vite build",
+    "serve": "vite preview",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

diff --git a/example/src/App.jsx → example/src/App.tsx b/example/src/App.jsx → example/src/App.tsx
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-
 import ReactTooltip from 'react-tooltip';
 
-export default class App extends Component {
+export default class App extends Component<any, any> {
   constructor(props) {
     super(props);
     this.state = {

diff --git a/example/src/index.jsx → example/src/index.tsx b/example/src/index.jsx → example/src/index.tsx
diff --git a/example/src/vite.config.ts b/example/src/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()]
+});