Extract to file not working

[danielo515]

Issue Type: Bug

The "Extract to file" function on an existing component does not work.

Extension version: 5.1.1 VS Code version: Code 1.52.1 (ea3859d4ba2f3e577a159bc91e3074c5d85c0523, 2020-12-16T16:30:02.420Z) OS version: Darwin x64 20.2.0

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz (12 x 2900)| |GPU Status|2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|4, 3, 3| |Memory (System)|32.00GB (0.21GB free)| |Process Argv|--crash-reporter-id 3bf10e6d-54c9-4df4-8aaa-781f2b9fc1b9| |Screen Reader|no| |VM|0%|

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 openlogontheside:30221877 python383:30185418 vspyt653:30244269 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492cf:30211402 wsl2promptcf:30224613 vstry244:30244299 pythonvsdeb440:30242242 unusedprompt:30224610 folderexplorercf:30224615 openfilemenucf:30224648 pythonvsded773:30236629 pythonvspyt875:30241730 ```

[borislit]

Hi! Thanks for the issue! Could you pls provide a code snippet you have tried to extract @danielo515

[danielo515]

If I have to be honest with you, any function/component fails. I think this may be because I use flow instead of typescript and therefore I have the built-in typescript extension disabled. Maybe you depend on some features from them?

But, in any case, here is an example piece of code that failed:

// Converts between spring locales and our custom locales
function springLocaleToLocale(str: string): Locale {
  if (str === 'en' || str === 'dk') return str
  if (str === 'en-GB') return 'en_GB'
  throw new Error(`Invalid locale provided ${str}`)
}

export function usePolyglot(...phrases: Phrases[]): UsePolyglot {
  const { locale } = useContext(SpringContext)
  // We are using different locale convention in `SpringContext` than what we use in translations.
  const translationLocale = springLocaleToLocale(locale)

  const combinedPhrases = combinePhrases(...phrases)

  const { __ } = createPolyglot(combinedPhrases, translationLocale)
  return { __ }
}

And here is a small screencast showing you how I used it, and what happened:

https://user-images.githubusercontent.com/2270425/105169032-3c5e7500-5b1b-11eb-87b7-8374878d0b89.mov

[borislit]

Actually currently we don't support Flow at the moment, although I don't see any Flow specific syntax in your snippet.We'll investigate

[danielo515]

Thanks!

[lampapos]

Hello @danielo515! Could you, plz, provide some extra details about your environment:

• from the screencast looks like you are using some VIM extension - which one?
• when you select text the selection is not visible - how come?)

I'm asking because currently "Extract to File" action works only on highlighted code block (and you should select the entire block - from export function usePolyglot to the last }) otherwise action should not be proposed at all. From your screencast, I see that you select the part of this block (from usePolyglot to the last }). It would be great if you could make an experiment with an entirely selected block.

[danielo515]

• from the screencast looks like you are using some VIM extension - which one?

VSCodeVim and VSpaceCode

when you select text the selection is not visible - how come?)

Probably I didn't selected it. I'm pretty sure I tried with it fully selected, but I can test it again

[danielo515]

Ok, I tested it selecting the function and this is what happens:

• The new file is no longer empty
• The import is still empty (as I sown on my screencast)
• None of the dependencies are carried along (react, other imports, depending functions, etc)

Not sure if that is the expected behaviour. Regards

[borislit]

@danielo515 In terms of dependencies, this indeed has to do with you not using typescript. Behind the scene, we are triggering typescript's built-in "import missing dependencies" refactor which brings in all the deps

[danielo515]

Ok, that makes sense. I hate having to deactivate the typescript extension, but it is so annoying about not using types on normal JS types... Why can't they just split those... Well, not your problem. You can close the issue.

Many thanks.