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

Duplicate type imports with expandProp + native + typescript #891

Closed
atomicpages opened this issue Aug 1, 2023 · 0 comments · Fixed by #894
Closed

Duplicate type imports with expandProp + native + typescript #891

atomicpages opened this issue Aug 1, 2023 · 0 comments · Fixed by #894

Comments

@atomicpages
Copy link

Hey there! First and foremost, I've been a big fan of this project for many years. Thank you for maintaining it! I found a bug with react-native w/ typescript codegen. I created a repro example here: https://stackblitz.com/edit/stackblitz-starters-hxprjb

The issue is when I combine native and typescript in my config I have conflicting imports.

import * as React from "react";

import Svg, { Path } from "react-native-svg";
//     ^^^   ^^^^^
import type { SvgProps, Svg, Path } from "react-native-svg";
//                      ^^^^^^^^^

import { Ref, forwardRef, memo } from "react";
const SvgPlus = (props: SvgProps, ref: Ref<SVGSVGElement>) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    xmlSpace="preserve"
    width={24}
    height={24}
    style={{
      enableBackground: "new 0 0 512 512",
    }}
    viewBox="0 0 512 512"
    ref={ref}
    {...props}
  >
    <Path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm128 240H272v112h-32V272H128v-32h112V128h32v112h112v32z" />
  </Svg>
);
const ForwardRef = forwardRef(SvgPlus);
const Memo = memo(ForwardRef);
export default Memo;

const tsTypeReferenceSVGProps = (ctx: Context) => {
if (ctx.opts.native) {
const identifier = t.identifier('SvgProps')
getOrCreateImport(ctx, 'react-native-svg', 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(identifier)
}
const identifier = t.identifier('SVGProps')
getOrCreateImport(ctx, ctx.importSource, 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(
identifier,
t.tsTypeParameterInstantiation([
t.tsTypeReference(t.identifier('SVGSVGElement')),
]),
)
}

and it's usage here:

if (opts.expandProps) {
const identifier = t.identifier('props')
if (t.isObjectPattern(props[0])) {
props[0].properties.push(t.restElement(identifier))
if (opts.typescript) {
props[0].typeAnnotation = t.tsTypeAnnotation(
t.tsIntersectionType([
tsTypeReferenceSVGProps(ctx),

If I set expandProps to false the duplicate imports don't show up. I'm happy to contribute a fix, but I want to discuss solutions before I dive into the deep

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 a pull request may close this issue.

1 participant