feat: add TypeScript declarations to @svgr/core (#555)

__fixtures__/simple-existing/index..js

@@ -1 +1 @@
-export { default as File. } from './File.'
+export { default as File } from './File'

package.json

@@ -5,7 +5,8 @@
   ],
   "scripts": {
     "build": "lerna run build",
-    "ci": "yarn build && yarn lint && yarn test --ci --coverage && codecov",
+    "ci": "yarn build && yarn lint && yarn check-dts && yarn test --ci --coverage && codecov",
+    "check-dts": "check-dts",
     "dev": "lerna run build --parallel -- --watch",
     "format": "prettier --write \"**/*.{js,json,md}\"",
     "lint": "eslint .",
@@ -24,6 +25,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^27.1.1",
     "babel-loader": "^8.2.2",
+    "check-dts": "^0.4.4",
     "codecov": "^3.8.3",
     "conventional-github-releaser": "^3.1.5",
     "eslint": "^7.32.0",

packages/core/package.json

@@ -18,6 +18,7 @@
   "engines": {
     "node": ">=10"
   },
+  "types": "src",
   "homepage": "https://react-svgr.com",
   "funding": {
     "type": "github",

packages/core/src/index.d.ts

@@ -0,0 +1,96 @@
+export interface TemplateOptions extends SvgrOpts {}
+
+export interface TemplateData {
+  imports?: string[]
+  interfaces?: string[]
+  componentName?: string
+  props?: string[]
+  jsx?: string
+  exports?: string[]
+}
+
+export type TemplateFunc = (
+  templateOptions: { template: unknown },
+  opts: TemplateOptions,
+  data: TemplateData,
+) => string
+
+export interface SvgrOpts {
+  /** Specify a custom config file. */
+  configFile?: string
+  /** Replace SVG width and height with 1em to make SVG inherit text size. */
+  icon?: boolean
+  /** Custom extension for generated files (default "js"). */
+  ext?: string
+  /** Modify all SVG nodes with uppercase and use react-native-svg template. */
+  native?: boolean | { expo: boolean }
+  /** Generate .tsx files with TypeScript bindings. */
+  typescript?: boolean
+  /** Keep width and height attributes from the root SVG tag. */
+  dimensions?: boolean
+  /** Forward all properties on the React component to the SVG tag. */
+  expandProps?: 'start' | 'end' | false
+  /** Use Prettier to format JavaScript code output. */
+  prettier?: boolean
+  /** Specify prettier config. */
+  prettierConfig?: Record<string, unknown>
+  /** Use SVGO to optimize SVG code before transforming into a React component. Default: true. */
+  svgo?: boolean
+  /** Specify SVGO config. https://gist.github.com/pladaria/69321af86ce165c2c1fc1c718b098dd0 */
+  svgoConfig?: Record<string, unknown>
+  /** Forward the ref to the root SVG tag if true. */
+  ref?: boolean
+  /** Wrap the exported component in React.memo if true. */
+  memo?: boolean
+  /**
+   * Replace an attribute value by another. Intended for changing an Icon
+   * color to currentColor to inherit from text color.
+   *
+   * Specify dynamic property using curly braces: { '#000': "{props.color}" }
+   */
+  replaceAttrValues?: Record<string, string>
+  /**
+   * Add props to the SVG tag.
+   *
+   * Specify dynamic property using curly braces: { focusable: "{true}" }.
+   * Particularly useful with a custom template.
+   */
+  svgProps?: Record<string, string>
+  /**
+   * Add title tag via title property. If titleProp is set to true and no
+   * title is provided (title={undefined}) at render time, this will fallback
+   * to an existing title element in the svg if it exists.
+   */
+  titleProp?: boolean
+  /**
+   * Specify a template file (CLI) or a template function (API) to use.
+   * For an example of template, see the default one.
+   * https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/index.js
+   */
+  template?: TemplateFunc
+  /** Output files into a directory. */
+  outDir?: string
+  /**
+   * Specify a template function (API) to change default index.js output
+   * (when --out-dir is used).
+   *
+   * https://github.com/gregberge/svgr/blob/main/packages/cli/src/dirCommand.js#L39
+   */
+  indexTemplate?: (filePaths: string[]) => string
+  /** When used with --out-dir, it ignores already existing files. */
+  ignoreExisting?: boolean
+  /**
+   * Specify a custom filename case. Possible values: pascal for PascalCase,
+   * kebab for kebab-case or camel for camelCase.
+   */
+  filenameCase?: 'kebab' | 'camel' | 'pascal'
+}
+
+type ConvertT = {
+  (svgCode: string, opts?: SvgrOpts, state?: TemplateData): Promise<void>
+  sync: (svgCode: string, opts?: SvgrOpts, state?: TemplateData) => void
+}
+
+declare const convert: ConvertT
+
+export default convert

packages/core/src/index.errors.ts

@@ -0,0 +1,10 @@
+import svgr from '.'
+
+// THROWS Argument of type 'null' is not assignable to parameter of type 'string'.
+svgr(null)
+
+// THROWS Argument of type 'undefined' is not assignable to parameter of type 'string'.
+svgr(undefined)
+
+// THROWS Expected 1-3 arguments, but got 0.
+svgr()

packages/core/src/index.types.ts

@@ -0,0 +1,15 @@
+import svgr from '.'
+
+const svgCode = `
+<svg xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="10" y="10" height="100" width="100"
+    style="stroke:#ff0000; fill: #0000ff"/>
+</svg>
+`
+
+svgr(svgCode)
+svgr(svgCode, { icon: false }, { componentName: 'MyComponent' })
+svgr(svgCode, { icon: false, memo: true })
+svgr(svgCode, undefined, { componentName: 'MyComponent' })
+svgr.sync(svgCode, { replaceAttrValues: { '#000': '{props.color}' } })