VSCode Intellisense slows down with @gluestack-ui/themed imports

[DavidAmyot]

Description

I expect the @gluestack-ui/themed imports to not impact VSCode Intellisense performance.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Have some imports such as import { Box, Fab, FlatList, Heading, Text } from "@gluestack-ui/themed";
2. Make a typo somewhere to trigger an error.
3. Hover on where you made the typo and wait for it to show there's an error.
4. Remove the typo, comment out the @gluestack-ui/themed imports and repeat step 2 and 3.
5. Notice that the Intellisense is much faster.

gluestack-ui Version

latest

Platform

• 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): #1976
Another related closed PR: #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

[MatheusAVZ]

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
• React Native CLI
• Next
• Web
• Android
• iOS

[ankit-tailor]

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.

[DavidAmyot]

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.

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.

[huix9527]

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

[DavidAmyot]

@ankit-tailor Any update on this? Anyone else in the gluestack team has this issue?

[ankit-tailor]

Hi Everyone, we are working on it to fix it ASAP. Thanks for your patience.

[DavidAmyot]

@ankit-tailor Thank you very much, if you need me to test with the diagnostics afterwards, please don't hesitate to tag me!

[hismethod]

Is there any updates on this?

[huix9527]

Any update?

[jerrywonderr]

I am commenting here so I can get updates on this issue because I am experiencing the same thing currently

[khajimatov]

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?}?"]
  ]
}