Closed RobinBertilsson closed 1 year ago
Update
Since it's trying to look for InputProps
inside ~/components/form/input
i tried refactor it into a different file, so it wouldn't have to reference itself, and that worked!
Thanks for the report! I will look into this. This is an interesting one. I think it brings a valid issue to light.
I don't believe that we visit the children of an import call, but I'll have to look into this to confirm.
Can you show me the code you switched it to that does work?
Hi @nonara, sure! So, in the example repository, we have a input.tsx
inside ./components/form
, which looks like the following
import { forwardRef, Ref } from 'react';
export interface InputProps {
innerRef?: Ref<HTMLInputElement>
}
const InputElement = ({ innerRef }: InputProps) => (
<input type="text" ref={innerRef} />
)
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
return (
<InputElement innerRef={ref} {...props} />
)
})
But when i instead extract the InputProps
to a different file, eg InputProps.ts
, and just reference it from within input.tsx
, it works... Eg.
import { InputProps } from '~/models/InputProps' // <-- Changed
import { forwardRef, Ref } from 'react'
const InputElement = ({ innerRef }: InputProps) => (
<input type="text" ref={innerRef} />
)
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
return (
<InputElement innerRef={ref} {...props} />
)
})
I'm also seeing this problem in some of my compiled .d
files
export declare const responseTransform: {
readonly 16384: (args: Field[]) => {
itemsAvailable: number;
};
readonly 16387: (_args: Field[]) => null;
readonly 16385: (_args: Field[]) => null;
readonly 16897: (_args: Field[]) => null;
readonly 16641: (args: Field[]) => import("./item").Item<import("src/remotedb/message/item").ItemType.Path> | import("./item").Item<import("src/remotedb/message/item").ItemType.Folder> | import("./item").Item<import("src/remotedb/message/item").ItemType.AlbumTitle> | import("./item").Item<import("src/remotedb/message/item").ItemType.Disc> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitle> | import("./item").Item<import("src/remotedb/message/item").ItemType.Genre> | import("./item").Item<import("src/remotedb/message/item").ItemType.Artist> | import("./item").Item<import("src/remotedb/message/item").ItemType.Playlist> | import("./item").Item<import("src/remotedb/message/item").ItemType.Rating> | import("./item").Item<import("src/remotedb/message/item").ItemType.Duration> | import("./item").Item<import("src/remotedb/message/item").ItemType.Tempo> | import("./item").Item<import("src/remotedb/message/item").ItemType.Label> | import("./item").Item<import("src/remotedb/message/item").ItemType.Key> | import("./item").Item<import("src/remotedb/message/item").ItemType.BitRate> | import("./item").Item<import("src/remotedb/message/item").ItemType.Year> | import("./item").Item<import("src/remotedb/message/item").ItemType.Comment> | import("./item").Item<import("src/remotedb/message/item").ItemType.HistoryPlaylist> | import("./item").Item<import("src/remotedb/message/item").ItemType.OrigianlArtist> | import("./item").Item<import("src/remotedb/message/item").ItemType.Remixer> | import("./item").Item<import("src/remotedb/message/item").ItemType.DateAdded> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorNone> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorPink> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorRed> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorOrange> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorYellow> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorGreen> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorAqua> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorBlue> | import("./item").Item<import("src/remotedb/message/item").ItemType.ColorPurple> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuGenre> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuArtist> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuAlbum> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuTrack> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuPlaylist> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuBPM> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuRating> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuYear> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuRemixer> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuLabel> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuOriginal> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuKey> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuColor> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuFolder> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuSearch> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuTime> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuBit> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuFilename> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuHistory> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuAll> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleAlbum> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleGenre> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleArtist> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleRating> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleTime> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleBPM> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleLabel> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleKey> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleBitRate> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleColor> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleComment> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleOriginalArtist> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleRemixer> | import("./item").Item<import("src/remotedb/message/item").ItemType.TrackTitleDJPlayCount> | import("./item").Item<import("src/remotedb/message/item").ItemType.MenuTrackTitleDateAdded>;
readonly 16386: (args: Field[]) => Buffer;
readonly 17922: (args: Field[]) => BeatGrid;
readonly 18178: (args: Field[]) => CueAndLoop[];
readonly 17410: (args: Field[]) => WaveformPreview;
readonly 18946: (args: Field[]) => WaveformDetailed;
readonly 20226: (args: Field[]) => WaveformHD;
readonly 19970: (args: Field[]) => CueAndLoop[];
};
Here fieldsToItem
is imported from item
. It seems to struggle because it's passing in a template argument here https://github.com/EvanPurkhiser/prolink-connect/blob/0166963896bbfbd9fa22581ac0d4cdc9b5f61204/src/remotedb/message/item.ts#L211-L213
Background I'm building a React Component Library, and some components are nested, eg.
<Form.Button />
&<Form.Input />
, but it also has a root element, named<Form />
.Issue If you take a look at the example repository (provided down below), especially the
./dist/components/form/form.d.ts
file. You'll see that it exports aconst
namedForm
which is of typeFunctionComponent
, but it also have to other properties,Button
&Input
.The
Button
property is fine, but theInput
property isn't correct since it still imports the Input component from the following path:~/components/form/input
.The source code for
Form.tsx
looks like the followingActual output of form.d.ts
Expected output of form.d.ts
Example Repository https://github.com/RobinBertilsson/ts-transform-paths-nested-issue
All help appreciated ❤️
Maintainers Note
This is likely because the child nodes are not visited with the transformer