Skip to content
New issue

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

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

Already on GitHub? # 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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant