gluestack-ui
gluestack-ui copied to clipboard
gluestack
VSCode Intellisense slows down with @gluestack-ui/themed imports
Description
I expect the @gluestack-ui/themed imports to not impact VSCode Intellisense performance.
CodeSandbox/Snack link
No response
Steps to reproduce
- Have some imports such as import { Box, Fab, FlatList, Heading, Text } from "@gluestack-ui/themed";
- Make a typo somewhere to trigger an error.
- Hover on where you made the typo and wait for it to show there's an error.
- Remove the typo, comment out the @gluestack-ui/themed imports and repeat step 2 and 3.
- Notice that the Intellisense is much faster.
gluestack-ui Version
latest
Platform
- [X] Expo
- [ ] React Native CLI
- [ ] Next
- [ ] Web
- [ ] Android
- [ ] iOS
Other Platform
No response
Additional Information
Tagging devs from previous thread: @surajahmed @ankit-tailor
Related prs
Related closed PR I made (unresolved): https://github.com/gluestack/gluestack-ui/issues/1976 Another related closed PR: https://github.com/gluestack/gluestack-ui/issues/903
Diagnostics with Gluestack:
"@gluestack-style/react": "^1.0.53",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.22",
Files: 1890
Lines: 241725
Identifiers: 331450
Symbols: 992031
Types: 130308
Instantiations: 5875268
Memory used: 778107K
I/O read: 0.05s
I/O write: 0.00s
Parse time: 0.79s
Bind time: 0.21s
Check time: 32.26s
Emit time: 0.00s
Total time: 33.26s
Diagnostics without Gluestack:
Files: 1455
Lines: 225476
Identifiers: 302281
Symbols: 229877
Types: 37342
Instantiations: 163721
Memory used: 339399K
I/O read: 0.04s
I/O write: 0.00s
Parse time: 0.62s
Bind time: 0.19s
Check time: 0.51s
Emit time: 0.00s
Total time: 1.31s
Issue
Sometimes it's so slow I have to run the Reload Window command from the command palette on VSCode.
There seems to be a problem with Gluestack and typescript, do you not have those issues on your end @ankit-tailor ? Are your tsc diagnostics fast?
My previous issue here was closed, but the problem is still existing.
Demo video: https://github.com/gluestack/gluestack-ui/assets/60398892/e972600b-e3d4-49aa-9830-8a1ab2ca51c0
Hey, i have the same problem, the VSCode Intellisense slows down with @gluestack-ui/themed imports
- "@gluestack-style/react": "latest",
- "@gluestack-ui/config": "latest",
- "@gluestack-ui/themed": "latest",
Platform
- [ ] Expo
- [x] React Native CLI
- [ ] Next
- [ ] Web
- [ ] Android
- [ ] iOS
Can you try the latest versions of @gluestack-style/react and @gluestack-ui/themed? Also let me know the diagnostics after the update. It has reduce for me.
Can you try the latest versions of
@gluestack-style/reactand@gluestack-ui/themed? Also let me know the diagnostics after the update. It has reduce for me.
No, it did not get better.
Before with my current version:
"@gluestack-style/react": "^1.0.54",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.22",
Files: 1903
Lines: 242215
Identifiers: 332356
Symbols: 976070
Types: 130501
Instantiations: 5812682
Memory used: 769854K
I/O read: 0.05s
I/O write: 0.00s
Parse time: 0.78s
Bind time: 0.21s
Check time: 29.92s
Emit time: 0.00s
Total time: 30.92s
After updating to latest:
"@gluestack-style/react": "^1.0.56",
"@gluestack-ui/config": "^1.1.18",
"@gluestack-ui/themed": "^1.1.24",
Files: 1902
Lines: 242345
Identifiers: 332238
Symbols: 969236
Types: 57002
Instantiations: 4413032
Memory used: 725270K
I/O read: 0.12s
I/O write: 0.00s
Parse time: 0.86s
Bind time: 0.21s
Check time: 29.43s
Emit time: 0.00s
Total time: 30.50s
@ankit-tailor This is 30 seconds for running the diagnostics.. In another project we have for our react frontend website with mui that has twice the amount of files it takes 1.67s. From what I can see from the diagnostics, the amount of types and instantiations is immense compared to if I don't have gluestack installed. Could it be because of some kind of over usage of generic types?
I'm at the point where in our code when I make changes in a file that has gluestack imports I just use the reload window command with vscode instead of waiting because the intellisense is way too slow.
Similar issue, tsserver gets very slow after importing gluestack. "@gluestack-style/react": "^1.0.52", "@gluestack-ui/config": "^1.1.18", "@gluestack-ui/themed": "^1.1.22",
npx tsc --diagnostics --noEmit Files: 1298 Lines: 179610 Identifiers: 164305 Symbols: 809868 Types: 136352 Instantiations: 4853127 Memory used: 628113K I/O read: 0.18s I/O write: 0.00s Parse time: 0.81s Bind time: 0.21s Check time: 17.78s Emit time: 0.00s Total time: 18.81s
@ankit-tailor Any update on this? Anyone else in the gluestack team has this issue?
Hi Everyone, we are working on it to fix it ASAP. Thanks for your patience.
@ankit-tailor Thank you very much, if you need me to test with the diagnostics afterwards, please don't hesitate to tag me!
I am commenting here so I can get updates on this issue because I am experiencing the same thing currently
for those who are still wondering about the reason why intellisense is running slow, the answer may be - if you have added this regex from docs(https://gluestack.io/ui/docs/home/getting-started/tooling-setup) to the ./vscode/settings.json file:
slow
{
"tailwindCSS.experimental.classRegex": [
["tva\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
this regex slows down the tailwind autocomplete, and as a result it gets stuck. the temporary solution I found is to refactor the regex expression:
{
"tailwindCSS.experimental.classRegex": [
["tva\\(([^)]*)\\)", "{?\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?}?"]
]
}
for those who are still wondering about the reason why intellisense is running slow, the answer may be - if you have added this regex from docs(https://gluestack.io/ui/docs/home/getting-started/tooling-setup) to the
./vscode/settings.jsonfile:slow { "tailwindCSS.experimental.classRegex": [ ["tva\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ] }this regex slows down the tailwind autocomplete, and as a result it gets stuck. the temporary solution I found is to refactor the regex expression:
{ "tailwindCSS.experimental.classRegex": [ ["tva\\(([^)]*)\\)", "{?\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?}?"] ] }
I'm using nvim and didn't add the regex, still facing this issue.
This happens in v1 still as well. My tests using npm tsc -p tsconfig.json --generateTrace traceDir and then analyzing with npx analyze-trace traceDir yields https://github.com/gluestack/gluestack-ui/blob/main/packages/styled/react/src/types.ts#L558 as the offending type. Each time I comment out a file it says leads back to this type, another one will show up as a hotspot. Something about this deeply recursive type is incredibly slow.
You end up with a recursive type tree that looks something like:
│
└─ Check deferred node from (line 143, char 12) to (line 149, char 11) (1344ms)
│ └─ Compare types 364891 and 364880 (1343ms)
│ └─ Compare types 364891 and 257528 (1315ms)
│ └─ Compare types 49733 and 55722 (1315ms)
│ └─ Compare types 49732 and 55717 (1302ms)
│ └─ Compare types 49730 and 55715 (1301ms)
│ └─ Compare types 49730 and 55706 (1296ms)
│ └─ Compare types 42338 and 55706 (1200ms)
│ └─ Determine variance of type 31848 (1183ms)
│ └─ Compare types 364906 and 364901 (830ms)
│ └─ Compare types 364900 and 364905 (830ms)
│ └─ Compare types 364899 and 364904 (830ms)
│ └─ Compare types 364903 and 364898 (805ms)
│ └─ Compare types 366696 and 365125 (799ms)
│ └─ Compare types 366696 and 365123 (799ms)
│ └─ Compare types 366694 and 365123 (794ms)
│ └─ Compare types 366692 and 365121 (793ms)
│ └─ Compare types 366647 and 365073 (731ms)
│ └─ Compare types 366647 and 364909 (727ms)
│ └─ Compare types 366483 and 364909 (689ms)
│ └─ Determine variance of type 31861 (689ms)
Any ideas from gluestack devs on this one? It's making the developer experience very painful as typescript will crash or be very slow due to this problem.
Following up, I patched the following lines to "any". This loses you gluestack intellisense on most of the parts of the library you'd need it for, but it's at least a workaround to make the rest of your dev environment useful while this is figured out.
diff --git a/lib/typescript/types.d.ts b/lib/typescript/types.d.ts
index 3578c72d36234615fda7844344f2f02d8f06fcf3..dc159df10c5aad058d84c4df3e2de5d7bc2fb0b6 100644
--- a/lib/typescript/types.d.ts
+++ b/lib/typescript/types.d.ts
@@ -114,11 +114,7 @@ export type Aliases = GSConfig['aliases'];
export type Plugins = GSConfig['plugins'];
export type Components = GSConfig['components'];
export type IMediaQueries = keyof GSConfig['tokens']['mediaQueries'];
-export type SxStyleProps<GenericComponentStyles, Variants, GenericComponentProps, PluginType> = {
- sx?: Partial<SxProps<GenericComponentStyles, Variants, GenericComponentProps, '', '', PluginType> & {
- [Key in `@${IMediaQueries}`]?: SxProps<GenericComponentStyles, Variants, GenericComponentProps, '', Key, PluginType>;
- }>;
-};
+export type SxStyleProps<GenericComponentStyles, Variants, GenericComponentProps, PluginType> = any;
type GlobalVariants = GSConfig['globalStyle']['variants'];
type GlobalThemes = keyof GSConfig['themes'];
export type IComponentStyleConfig<ComCon = any> = Partial<{
@@ -256,13 +252,7 @@ export type SxProps<GenericComponentStyles = AliasesProps, Variants = unknown, G
[key: string]: any;
}>;
});
-export type VariantType<Variants, GenericComponentStyles, GenericComponentProps, PluginTypes> = {
- [Key1 in keyof Variants]: {
- [Key in keyof Variants[Key1]]: Partial<SxProps<GenericComponentStyles, Variants, GenericComponentProps, '', '', PluginTypes> & {
- [K in `@${IMediaQueries}`]?: SxProps<GenericComponentStyles, Variants, GenericComponentProps, '', K, PluginTypes>;
- }>;
- };
-};
+export type VariantType<Variants, GenericComponentStyles, GenericComponentProps, PluginTypes> = any;
type CompoundVariant<Variants, GenericComponentStyles, GenericComponentProps> = {
[Key in keyof Variants]?: keyof Variants[Key] extends 'true' | 'false' ? boolean : keyof Variants[Key];
} & {
VariantType and SxStyleProps being any sped things up immensely.