Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: SVGPresentationAttributes types #2363

Merged
merged 3 commits into from
Jan 14, 2024
Merged

Conversation

azmy60
Copy link
Contributor

@azmy60 azmy60 commented Jul 17, 2023

So I was playing around with <Svg> component in @react-pdf/renderer, and I got some ts errors:

  • Using Presentation Attributes as component props like this <Svg stroke="#00000"> will throw an error.
  • There is a missing strokeLinejoin prop which I think it should be supported based on this?
  • There is a typo for the attribute strokeLinecap.

The value options of strokeLinejoin was provided by looking at the options from pdf-lib.

Fixes #1873

@changeset-bot
Copy link

changeset-bot bot commented Jul 17, 2023

🦋 Changeset detected

Latest commit: 3bb0cc0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@react-pdf/render Patch
@react-pdf/renderer Patch
@react-pdf/examples Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@@ -236,7 +236,7 @@ declare namespace ReactPDF {

class Canvas extends React.Component<CanvasProps> {}

interface SVGProps extends NodeProps {
interface SVGProps extends NodeProps, SVGPresentationAttributes {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure SVG supports all the props in SVGPresentationAttributes. All other fixes look correct

Copy link
Contributor Author

@azmy60 azmy60 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct me if I'm wrong, but I just checked the w3 spec, and it seems like SVG supports all Presentation Attributes, except some Geometry Properties like cx, cy, r, rx, and d. Also, if you try using the native <svg> element, the TS will autocomplete all the props in SVGPresentationAttributes.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure our <Svg /> component supports passing all of these, but I'll include it. I don't actively maintain types tbh, so I'll let base it on what the community finds :)

@azmy60 azmy60 requested a review from diegomura July 27, 2023 05:10
@TheMikeyRoss
Copy link
Contributor

image
strokeLinejoin works fine but it shows a TS warning

@diegomura diegomura changed the title Fix SVGPresentationAttributes typing fix: SVGPresentationAttributes types Jan 14, 2024
@diegomura diegomura merged commit 8654d00 into diegomura:master Jan 14, 2024
1 check passed
mskec pushed a commit to mskec/react-pdf that referenced this pull request Feb 26, 2024
* fix SVGPresentationAttributes typing

* chore: add changeset

---------

Co-authored-by: Diego Muracciole <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Presentation attributes in Svg tag show TS error
3 participants