Where are the types for @svgr/core?

[kaiyoma]

🐛 Bug Report

Can't find the types for @svgr/core.

To Reproduce

Use @svgr/core in a TypeScript file.

Expected behavior

The types should be included with the package.

Link to repl or repo (highly encouraged)

This code:

import svgr from '@svgr/core';

Leads to this error:

<source file>:3:18 - error TS7016: Could not find a declaration file for module '@svgr/core'. '.../node_modules/@svgr/core/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/svgr__core` if it exists or add a new declaration (.d.ts) file containing `declare module '@svgr/core';`

3 import svgr from '@svgr/core';
                   ~~~~~~~~~~~~

System:

• OS: Windows 10 10.0.19042
• CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
• Memory: 6.82 GB / 15.86 GB

Binaries:

• Node: 14.15.0 - C:\Program Files\Node.js\node.EXE
• Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
• npm: 6.14.8 - C:\Program Files\Node.js\npm.CMD

[open-collective-bot]

Hey @kaiyoma 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[pd4d10]

Could we submit TS types to this repo? I'm glad to help.

[gregberge]

Could we submit TS types to this repo? I'm glad to help.

Yeah it would be great, thanks. If you do so, please add type checking to CI.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kaiyoma]

Still an issue AFAIK.

[kaiyoma]

Still an issue.

[jschaf]

I took a stab at this. If someone cares to make it a real package, feel free.

• I couldn't figure out what the TemplateFunc type is supposed to be.
• I'm also unclear on the exported svgr function, especially the last state argument.

declare module '@svgr/core' {

  export interface TemplateOptions extends SvgrOpts {
  }

  export interface TemplateData {
    imports: string[];
    interfaces: string[];
    componentName: string;
    props: string[];
    jsx: string;
    exports: string[];
  }

  export type TemplateFunc = ({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';
    }
  export const svgr: (svgCode: string, opts: SvgrOpts, state: TemplateData) => Promise<void>;
  declare module svgr {
    const sync: (svgCode: string, opts: SvgrOpts, state: TemplateData) => void;
  }
  export default svgr;
}

[nirtamir2]

@jschaf I added PR based on your types
https://github.com/gregberge/svgr/pull/555/files

[dreyks]

now that the library is fully in TS where can I find the Template type if i want to write my template in TS?

UPD: found it

svgr/packages/babel-plugin-transform-svg-component/src/types.ts

Lines 4 to 11 in 1dbc3e2

	export interface TemplateVariables {
	componentName: string
	interfaces: t.TSInterfaceDeclaration[]
	props: (t.ObjectPattern | t.Identifier)[]
	imports: t.ImportDeclaration[]
	exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[]
	jsx: t.JSXElement
	}

[KevinGhadyani-Okta]

@dreyks How are you importing this file?

[dreyks]

i ended up writing the template in javascript, but at some point when it was still in TS I was doing something like this

import { Template } from '@svgr/babel-plugin-transform-svg-component'

const template: Template = ({ componentName, jsx }, { tpl }) => {
}

[KevinGhadyani-Okta]

Yep, that's the way I solved it 👍!

In my case, the JS also had options defined, so mine is slightly different:

const iconTemplate: Template = ({ componentName, jsx }, { tpl, options }) => {