type definition of emited SVGr transformations #191

diego-toro · 2022-01-03T19:00:35Z

diego-toro
Jan 3, 2022

Is it possible to generate type definitions out of transformed imports?

I have a folder of SVG files and I'm importing them as ReactComponents by using the svgr rollup plugin. And want to generate the type definitions out of the react components

// index.ts
export { ReactComponent as HeartFilled } from './heart-filled.svg';
...

But the result end up being

// index.d.ts

export { ReactComponent as HeartFilled } from './heart-filled.svg';
...

And I need a .d.ts with something like

export const HeartFilled: React.FunctionComponent<
  React.SVGProps<SVGSVGElement> & {
    title?: string;
  }
>;

Is there a way to tell rollup-plugin-dts to preserve the rollup transform results?

Here is my rollup config:

import url from '@rollup/plugin-url';
import svgr from '@svgr/rollup';
import filesize from 'rollup-plugin-filesize';
import babel from '@rollup/plugin-babel';
import dts from 'rollup-plugin-dts';

const config = [
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.js',
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      babel({ babelHelpers: 'runtime', plugins: ['@babel/plugin-transform-runtime'] }),
      url(),
      svgr({
        icon: true,
        replaceAttrValues: { '#1D1D1D': 'currentColor' },
        titleProp: true,
        typescript: true,
      }),
      filesize(),
    ],
  },
  {
    input: 'src/index.ts',
    output: [{ file: 'dist/types.d.ts', format: 'es' }],
    external: [/\.svg$/],
    plugins: [dts()],
  },
];

export default config;

diego-toro · 2022-01-03T19:22:06Z

diego-toro
Jan 3, 2022
Author

I just added the plugins in the d.ts setup and kind of worked:

import url from '@rollup/plugin-url';
import svgr from '@svgr/rollup';
import filesize from 'rollup-plugin-filesize';
import babel from '@rollup/plugin-babel';
import dts from 'rollup-plugin-dts';

const config = [
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.js',
      format: 'es',
      sourcemap: true,
    },
    plugins: [
      babel({ babelHelpers: 'runtime', plugins: ['@babel/plugin-transform-runtime'] }),
      url(),
      svgr({
        icon: true,
        replaceAttrValues: { '#1D1D1D': 'currentColor' },
        titleProp: true,
        typescript: true,
      }),
      filesize(),
    ],
  },
  {
    input: 'src/index.ts',
    output: [{ file: 'dist/types.d.ts', format: 'es' }],
    plugins: [
      url(),
      svgr({
        icon: true,
        replaceAttrValues: { '#1D1D1D': 'currentColor' },
        titleProp: true,
        typescript: true,
      }),
      dts(),
    ],
  },
];

export default config;

got this as a result. Not pretty but works

import * as React from 'react';

var _path$1;

var _excluded$1 = ["title", "titleId"];

function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }

function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var SvgHeartFilled = function SvgHeartFilled(_ref) {
  var title = _ref.title,
      titleId = _ref.titleId,
      props = _objectWithoutProperties$1(_ref, _excluded$1);

  return /*#__PURE__*/React.createElement("svg", _extends$1({
    xmlns: "http://www.w3.org/2000/svg",
    width: "1em",
    height: "1em",
    viewBox: "0 0 511.626 511.627",
    style: {
      enableBackground: "new 0 0 511.626 511.627"
    },
    xmlSpace: "preserve",
    "aria-labelledby": titleId
  }, props), title ? /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title) : null, _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
    d: "M475.366 71.951c-24.175-23.606-57.575-35.404-100.215-35.404-11.8 0-23.843 2.046-36.117 6.136-12.279 4.093-23.702 9.615-34.256 16.562-10.568 6.945-19.65 13.467-27.269 19.556a263.828 263.828 0 0 0-21.696 19.414 264.184 264.184 0 0 0-21.698-19.414c-7.616-6.089-16.702-12.607-27.268-19.556-10.564-6.95-21.985-12.468-34.261-16.562-12.275-4.089-24.316-6.136-36.116-6.136-42.637 0-76.039 11.801-100.211 35.404C12.087 95.552 0 128.288 0 170.162c0 12.753 2.24 25.889 6.711 39.398 4.471 13.514 9.566 25.031 15.275 34.546 5.708 9.514 12.181 18.796 19.414 27.837 7.233 9.042 12.519 15.27 15.846 18.699 3.33 3.422 5.948 5.899 7.851 7.419L243.25 469.937c3.427 3.429 7.614 5.144 12.562 5.144s9.138-1.715 12.563-5.137l177.87-171.307c43.588-43.583 65.38-86.41 65.38-128.475.001-41.874-12.088-74.61-36.259-98.211z",
    fill: "currentColor"
  })));
};

var _path;

var _excluded = ["title", "titleId"];

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var SvgHeartOutline = function SvgHeartOutline(_ref) {
  var title = _ref.title,
      titleId = _ref.titleId,
      props = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 471.701 471.701",
    style: {
      enableBackground: "new 0 0 471.701 471.701"
    },
    xmlSpace: "preserve",
    width: "1em",
    height: "1em",
    "aria-labelledby": titleId
  }, props), title ? /*#__PURE__*/React.createElement("title", {
    id: titleId
  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
    d: "M433.601 67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3l-12.9 12.9-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2-24.7 24.7-38.3 57.5-38.2 92.4 0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7-178.7 178-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3s10.7-53.7 30.3-73.2c19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z",
    fill: "currentColor"
  })));
};

export { SvgHeartFilled as HeartFilled, SvgHeartOutline as HeartOutline };

4 replies

Swatinem Jan 3, 2022
Maintainer

But that is JS code, and not typescript definitions?

diego-toro Jan 3, 2022
Author

Yep. SVGr generates ".tsx" components. I was assuming rollup-plugin-dts can extract the type definitions of tsx entry file. Here Just uploaded the POC I have in place. https://github.com/diego-toro/poc-monorepo-rollup check the icons package if you can. Kind of lost setting the definitions in place.

Swatinem Jan 3, 2022
Maintainer

The plugin does not directly convert convert tsx files, only if they are part of the typescript project. You could possibly explore a multi-stage pipeline maybe?

diego-toro Jan 3, 2022
Author

How is a multi-stage pipeline? Not really familiar with it

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

type definition of emited SVGr transformations #191

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

type definition of emited SVGr transformations #191

diego-toro Jan 3, 2022

Replies: 1 comment · 4 replies

diego-toro Jan 3, 2022 Author

Swatinem Jan 3, 2022 Maintainer

diego-toro Jan 3, 2022 Author

Swatinem Jan 3, 2022 Maintainer

diego-toro Jan 3, 2022 Author

diego-toro
Jan 3, 2022

Replies: 1 comment 4 replies

diego-toro
Jan 3, 2022
Author

Swatinem Jan 3, 2022
Maintainer

diego-toro Jan 3, 2022
Author

Swatinem Jan 3, 2022
Maintainer

diego-toro Jan 3, 2022
Author