Skip to content

React-Native with TypeScript breaks on typecheck #465#488

Merged
gregberge merged 4 commits intogregberge:masterfrom
Ztarbox:my_branch
Nov 15, 2020
Merged

React-Native with TypeScript breaks on typecheck #465#488
gregberge merged 4 commits intogregberge:masterfrom
Ztarbox:my_branch

Conversation

@Ztarbox
Copy link
Copy Markdown
Contributor

@Ztarbox Ztarbox commented Aug 20, 2020

Summary

To fix #465 I updated the type annotations for react-native.

I also found to support the eslint rule @typescript-eslint/explicit-function-return-type we would need to add the return type if the typescript flag is present. But I have no idea how to implement that.

Test plan

I didn't get it with jest. It gave me (w/o changes) so much errors and deprecated snapshots. I lost sight.
Also I tried to just add to cli/src/index.test.js to 'should support various args', but jest didn't run it.
So I did manual tests:

  1. target functionality
    svgr --native --typescript ../../../__fixtures__/simple/file.svg --silent
import * as React from 'react'
import Svg, { SvgProps, Path } from 'react-native-svg'

function SvgFile(props: SvgProps) {
  return (
    <Svg width={48} height={1} {...props}>
      <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </Svg>
  )
}

export default SvgFile
  1. default functionality still working:
    node svgr --native ../../../__fixtures__/simple/file.svg --silent
import * as React from 'react'
import Svg, { Path } from 'react-native-svg'

function SvgFile(props) {
  return (
    <Svg width={48} height={1} {...props}>
      <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </Svg>
  )
}

export default SvgFile
  1. with ref
    node svgr --native --typescript --ref ../../../__fixtures__/simple/file.svg --silent
import * as React from 'react'
import Svg, { SvgProps, Path } from 'react-native-svg'

function SvgFile(
  props: SvgProps,
  svgRef?: React.Ref<React.Component<SvgProps>>,
) {
  return (
    <Svg width={48} height={1} ref={svgRef} {...props}>
      <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </Svg>
  )
}

const ForwardRef = React.forwardRef(SvgFile)
export default ForwardRef

@vercel
Copy link
Copy Markdown

vercel bot commented Aug 20, 2020 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/gregberge/svgr/468u6w8fe
✅ Preview: https://svgr-git-mybranch.gregberge.vercel.app

@Ztarbox
Copy link
Copy Markdown
Contributor Author

Ztarbox commented Aug 21, 2020

By looking into Travis output and reducing the test down to yarn jest --runInBand --ci --coverage packages/babel-plugin-transform-svg-component/src/index.test.js I was able to run some tests (the full package or even only the cli packages results in a lot of timeouts and other errors travis isn't showing on my machine). So I found one bug and extended the babel-plugin-transform-svg-component/src/index.test.js with some additional native tests.

@gregberge
Copy link
Copy Markdown
Owner

gregberge commented Aug 21, 2020

@Ztarbox thanks, could you please remove the change in the yarn.lock. I don't know why it is there?

@Ztarbox
Copy link
Copy Markdown
Contributor Author

Ztarbox commented Aug 22, 2020

@Ztarbox thanks, could you please remove the change in the yarn.lock. I don't know why it is there?

I reset my changes of yarn.lock. But I did nothing manually. These were created by just running yarn.
I did a double check on this and it created the same changes again.

@yjose
Copy link
Copy Markdown

yjose commented Sep 23, 2020 •
edited
Loading

👋 @gregberge , When you can merge this PR, please? Any expectation!

@gregberge gregberge merged commit d61e0cf into gregberge:master Nov 15, 2020
@dependabot dependabot bot mentioned this pull request Mar 16, 2021
Merged
@NOUIY NOUIY mentioned this pull request Sep 7, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

React-Native with TypeScript breaks on typecheck

3 participants

@Ztarbox @gregberge @yjose