feat(typescript): add types everywhere

The whole codebase has been rewritten to TypeScript.

BREAKING CHANGE: template signature has changed

.eslintignore

@@ -1,8 +1,8 @@
 node_modules/
-lib/
 __fixtures__/
 __fixtures_build__/
 coverage/
 examples/
 svgr.now.sh/
-/website/
+/website/
+dist/

.eslintrc.json

@@ -1,26 +1,26 @@
 {
   "root": true,
-  "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
   "env": {
-    "jest": true
+    "node": true
   },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended"
+  ],
   "rules": {
-    "no-plusplus": "off",
-    "no-shadow": "off",
-    "class-methods-use-this": "off",
-    "no-param-reassign": "off",
-    "no-use-before-define": "off",
-    "import/prefer-default-export": "off",
-    "import/no-extraneous-dependencies": "off",
-    "import/extensions": "off",
-    "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
-    "react/jsx-wrap-multilines": "off",
-    "react/no-unused-state": "off",
-    "react/destructuring-assignment": "off",
-    "react/prop-types": "off",
-    "react/sort-comp": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/state-in-constructor": "off"
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-function": "warn",
+    "@typescript-eslint/ban-types": "warn",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.github/workflows/ci.yml

@@ -25,8 +25,8 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
 
-      - name: Use npm v7
-        run: npm i -g npm@7 --registry=https://registry.npmjs.org
+      - name: Use latest npm
+        run: npm i -g npm@latest --registry=https://registry.npmjs.org
         if: ${{ matrix.node-version == '12.x' || matrix.node-version == '14.x' }}
 
       - name: Install dependencies
@@ -38,9 +38,6 @@ jobs:
       - name: Lint
         run: npm run lint
 
-      - name: Check DTS
-        run: npx check-dts
-
       - name: Test
         run: npm run test -- --ci --coverage
 

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 lib/
+dist/
 !svgr.now.sh/lib/
 __fixtures_build__/
 src/__fixtures__/dist/

.prettierignore

@@ -3,7 +3,7 @@ __fixtures__/
 CHANGELOG.md
 package.json
 lerna.json
-lib/
+dist/
 .next/
 /website/.cache/
 /website/public/

CONTRIBUTING.md

@@ -37,7 +37,7 @@ _Before_ submitting a pull request, please make sure the following is done…
 
     Note: Replace `<your_username>` with your GitHub username
 
-2.  Run `npm install`.
+2.  Run `npm install` and `npm run build`.
 
 3.  If you've added code that should be tested, add tests. You can use watch mode that continuously transforms changed files to make your life easier.
 

__fixtures__/custom-index.config.js

@@ -1,11 +1,10 @@
 const indexTemplate = require('./custom-index-template.js')
 
 function template(
-  { template },
-  opts,
   { imports, componentName, props, jsx, exports },
+  { tpl }
 ) {
-  return template.ast`${imports}
+  return tpl`${imports}
 export function ${componentName}(${props}) {
   return ${jsx};
 }

api/api/svgr.js

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-unresolved */
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { default: svgr } = require('@svgr/core')
 const { default: jsx } = require('@svgr/plugin-jsx')
 const { default: svgo } = require('@svgr/plugin-svgo')

babel.config.js

@@ -1,6 +1,10 @@
-const path = require('path')
-const fs = require('fs')
+module.exports = (api) => {
+  api.cache(true)
 
-const config = fs.readFileSync(path.join(__dirname, '.babelrc'))
-
-module.exports = JSON.parse(config)
+  return {
+    presets: [
+      ['@babel/preset-env', { targets: { node: '12' }, loose: true }],
+      '@babel/preset-typescript',
+    ],
+  }
+}

build/build.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -e
+
+npm run build --workspace @svgr/babel-plugin-add-jsx-attribute
+npm run build --workspace @svgr/babel-plugin-remove-jsx-attribute
+npm run build --workspace @svgr/babel-plugin-remove-jsx-empty-expression
+npm run build --workspace @svgr/babel-plugin-replace-jsx-attribute-value
+npm run build --workspace @svgr/babel-plugin-svg-dynamic-title
+npm run build --workspace @svgr/babel-plugin-svg-em-dimensions
+npm run build --workspace @svgr/babel-plugin-transform-react-native-svg
+npm run build --workspace @svgr/babel-plugin-transform-svg-component
+npm run build --workspace @svgr/babel-preset
+npm run build --workspace @svgr/core
+npm run build --workspace @svgr/hast-util-to-babel-ast
+npm run build --workspace @svgr/plugin-jsx
+npm run build --workspace @svgr/plugin-prettier
+npm run build --workspace @svgr/plugin-svgo
+npm run build --workspace @svgr/cli
+npm run build --workspace @svgr/rollup
+npm run build --workspace @svgr/webpack

build/rollup.config.js

@@ -0,0 +1,39 @@
+import path from 'path'
+import json from '@rollup/plugin-json'
+import dts from 'rollup-plugin-dts'
+import esbuild from 'rollup-plugin-esbuild'
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkg = require(path.resolve(process.cwd(), './package.json'))
+const name = pkg.main ? pkg.main.replace(/\.js$/, '') : './dist/index'
+
+const bundle = (config) => ({
+  ...config,
+  input: 'src/index.ts',
+  external: (id) => !/^[./]/.test(id),
+})
+
+export default [
+  bundle({
+    plugins: [json(), esbuild()],
+    output: [
+      {
+        file: `${name}.js`,
+        format: 'cjs',
+        sourcemap: Boolean(pkg.main),
+        exports: 'auto',
+      },
+    ],
+  }),
+  ...(pkg.main
+    ? [
+        bundle({
+          plugins: [dts()],
+          output: {
+            file: `${name}.d.ts`,
+            format: 'es',
+          },
+        }),
+      ]
+    : []),
+]

deprecated-packages/svgr/message.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console, import/no-unresolved */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const githubCurrentUser = require('github-current-user')
 
 githubCurrentUser.verify((err, verified, username) => {

jest.config.js

@@ -1,4 +1,7 @@
 module.exports = {
   watchPathIgnorePatterns: ['__fixtures__', '__fixtures__build__'],
   rootDir: 'packages',
+  transform: {
+    '^.+\\.(j|t)sx?$': 'babel-jest',
+  },
 }