chore: migrate code base to TypeScript [ci skip]

Author: JounQin

.eslintrc.js

@@ -1,8 +1,39 @@
 module.exports = {
   root: true,
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
   extends: [
     'plugin:jest/recommended',
     '1stg/react',
     'plugin:@rxts/mdx/recommended',
   ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/array-type': [
+      0,
+      {
+        default: 'array-simple',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'react/prop-types': 0,
+      },
+    },
+    {
+      files: ['*.d.ts'],
+      rules: {
+        'import/order': 0,
+        'import/no-unresolved': 0,
+      },
+    },
+  ],
 }

config/index.js

@@ -1,5 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path')
 
-require('@babel/register')
+require('ts-node').register({
+  project: path.resolve('src/tsconfig.json'),
+  transpileOnly: true,
+})
 
 module.exports = require(path.resolve('src'))

package.json

@@ -11,29 +11,38 @@
   ],
   "scripts": {
     "prepublishOnly": "yarn build",
-    "build": "babel src -d dist --copy-files",
+    "build": "tsc -P src",
     "test": "jest",
-    "lint": "eslint . --ext js,mdx"
+    "lint": "eslint . --ext ts,mdx"
   },
   "peerDependencies": {
     "eslint": ">=4.7.0"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^1.1.0"
+    "@mdx-js/mdx": "^1.1.0",
+    "eslint-utils": "^1.4.0",
+    "eslint-visitor-keys": "^1.0.0",
+    "remark-mdx": "^1.1.0",
+    "remark-parse": "^7.0.0",
+    "remark-stringify": "^7.0.1",
+    "unified": "^8.3.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/register": "^7.5.5",
     "@rxts/eslint-plugin-mdx": "file:config",
+    "@types/eslint": "^4.16.6",
+    "@types/eslint-visitor-keys": "^1.0.0",
+    "@types/estree": "^0.0.39",
+    "@types/node": "^12.6.8",
+    "@types/unist": "^2.0.3",
     "eslint": "^6.1.0",
-    "eslint-config-1stg": "^4.2.3",
+    "eslint-config-1stg": "~5.4.1",
     "eslint-plugin-jest": "^22.14.0",
     "husky": "^3.0.1",
     "jest": "^24.8.0",
     "prettier": "1.18.2",
     "prettier-config-1stg": "^0.1.0",
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "ts-node": "^8.3.0",
+    "typescript": "^3.5.3"
   }
 }

shim.d.ts

@@ -0,0 +1,79 @@
+declare module 'eslint-utils' {}
+
+declare module 'espree' {
+  import * as estree from 'estree'
+
+  // The version of espree that's loaded, like "v3.4.0".
+  export const version: string
+
+  // Parse the given text as javascript into an abstract syntax tree.
+  export function parse(text: string, opts?: Options): estree.Program
+
+  // Walk the given text and produce an array of tokens.
+  export function tokenize(text: string, opts?: Options): Token[]
+
+  interface Token {
+    type: string
+    value: string
+    start: number
+    end: number
+  }
+
+  // A map from node type to the properties on that type that contain more nodes.
+  export const VisitorKeys: { [kind: string]: string[] }
+
+  const node: estree.Node
+  // A map of node types to themselves.
+  export const Syntax: { [type: string]: typeof node.type }
+
+  // Options for parsing.
+  interface Options {
+    // attach range information to each node
+    range?: boolean
+
+    // attach line/column location information to each node
+    loc?: boolean
+
+    // create a top-level comments array containing all comments
+    comment?: boolean
+
+    // attach comments to the closest relevant node as leadingComments and
+    // trailingComments
+    attachComment?: boolean
+
+    // create a top-level tokens array containing all tokens
+    tokens?: true
+
+    // set to 3, 5 (default), 6, 7, or 8 to specify the version of ECMAScript
+    // syntax you want to use.
+    // You can also set to 2015 (same as 6), 2016 (same as 7), or 2017 (same as 8)
+    // to use the year-based naming.
+    ecmaVersion?: number
+
+    // specify which type of script you're parsing (script or module, default is script)
+    sourceType?: 'script' | 'module'
+
+    // specify additional language features
+    ecmaFeatures?: {
+      // enable JSX parsing
+      jsx?: boolean
+
+      // enable return in global scope
+      globalReturn?: boolean
+
+      // enable implied strict mode (if ecmaVersion >= 5)
+      impliedStrict?: boolean
+
+      // allow experimental object rest/spread
+      experimentalObjectRestSpread?: boolean
+    }
+  }
+}
+
+declare module 'remark-mdx' {
+  import * as unified from 'unified'
+
+  const mdx: unified.Attacher
+
+  export = mdx
+}

src/index.js

@@ -0,0 +1,18 @@
+import path from 'path'
+
+export { parseForESLint } from './parser'
+
+export const configs = {
+  recommended: {
+    overrides: [
+      {
+        files: '*.mdx',
+        parser: path.resolve(__dirname, 'parser'),
+        plugins: ['@rxts/mdx'],
+        rules: {
+          'react/react-in-jsx-scope': 0,
+        },
+      },
+    ],
+  },
+}

src/index.ts

@@ -0,0 +1,111 @@
+// eslint-disable-next-line @typescript-eslint/no-triple-slash-reference
+/// <reference path="../shim.d.ts" />
+
+import { parse as esParse } from 'espree'
+import remarkMdx from 'remark-mdx'
+import remarkParse from 'remark-parse'
+import remarkStringify from 'remark-stringify'
+import unified from 'unified'
+
+import { Position, Parent } from 'unist'
+import { AST, Linter } from 'eslint'
+import { Statement, ModuleDeclaration } from 'estree'
+
+const transNodePos = (position: Position) => {
+  const start = position.start.offset
+  const end = position.end.offset
+  return {
+    range: [start, end] as AST.Range,
+    loc: {
+      ...position,
+    },
+    start,
+    end,
+  }
+}
+
+const getRawText = (code: string, position: Position) =>
+  code.slice(position.start.offset, position.end.offset)
+
+export const parseForESLint = (
+  code: string,
+  options: Linter.ParserOptions,
+): Linter.ESLintParseResult => {
+  const root = unified()
+    .use<any>(remarkParse)
+    .use<any>(remarkStringify)
+    .use(remarkMdx)
+    .parse(code) as Parent
+
+  const tokens: AST.Token[] = []
+
+  return {
+    ast: {
+      ...transNodePos(root.position),
+      comments: [],
+      body: root.children.reduce<Array<Statement | ModuleDeclaration>>(
+        (nodes, { position, type }) => {
+          if (!['export', 'import', 'jsx'].includes(type)) {
+            return nodes
+          }
+
+          const rawText = getRawText(code, position)
+
+          let node = {
+            ...transNodePos(position),
+            value: rawText,
+          }
+
+          const { tokens: esTokens, ...AST } = esParse(
+            rawText,
+            options,
+          ) as AST.Program
+
+          const offset = node.start - AST.range[0]
+
+          node = {
+            ...AST,
+            ...node,
+          }
+
+          nodes.push(node as any)
+          tokens.push(
+            ...esTokens.map(token => {
+              const {
+                loc: { start: tokenStart, end: tokenEnd },
+              } = token
+              const start = token.range[0] + offset
+              const end = token.range[1] + offset
+              const startLine = node.loc.start.line + tokenStart.line - 1
+              const startColumn = node.loc.start.column + tokenStart.column - 1
+              return {
+                ...token,
+                start,
+                end,
+                range: [start, end],
+                loc: {
+                  start: {
+                    line: startLine,
+                    column: startColumn,
+                  },
+                  end: {
+                    line: startLine + tokenEnd.line - 1,
+                    column: startLine + tokenEnd.column - 1,
+                  },
+                },
+              } as AST.Token
+            }),
+          )
+
+          return nodes
+        },
+        [],
+      ),
+      type: 'Program',
+      sourceType: 'module',
+      tokens,
+    },
+    scopeManager: null,
+    visitorKeys: null,
+  }
+}

src/parser.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "module": "commonjs",
+    "outDir": "../dist"
+  }
+}

src/tsconfig.json

@@ -1,4 +1,4 @@
-import { Test } from './test';
+import { Test } from './test'
 
 # Hello
 

test/test.mdx

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "strict": true,
+    "strictNullChecks": false,
+    "target": "es5"
+  }
+}