atom-vue-hyperclick icon indicating copy to clipboard operation
atom-vue-hyperclick copied to clipboard

Support jump-to-definition for template using camelCase and kebab-case in <template>

Open jonboiser opened this issue 6 years ago • 0 comments

Here, jump-to-definition works fine for <SomeItem /> because it matches its symbol in the JS script.

<template>
   <div>
	  <SomeItem />
   </div>
</template>

<script>
import SomeItem from './SomeItem';
export default {
  components: {
    SomeItem
  }
}
...
</script>

But clicking some-item or someItem here would not work.

<template>
   <div>
	  <some-item />
	  <someItem />
   </div>
</template>

<script>
import SomeItem from './SomeItem';
export default {
  components: {
    SomeItem
  }
}
...
</script>

In the template, vue normalizes all component names so <SomeItem />, <someItem />, and <some-item> are considered equivalent.

Here is some code I experimented with to support it, but I may be missing other use cases. I'd be happy to submit a pull request if I could get help thinking through the more subtle implementation points.

        wordRegExp: /[$0-9\w\-]+/g,
getSuggestionForWord(textEditor, text, range) {
            let result;
            if (text.includes('-')) {
              const camelText = camelcase(text);
              const pascalText = camelText[0].toUpperCase() + camelText.slice(1);
              range.end.column = range.end.column - 1;
              result = result || provider.getSuggestionForWord(patchEditor(textEditor), pascalText, range)
              result = result || provider.getSuggestionForWord(patchEditor(textEditor), camelText, range)
            } else {
              result = provider.getSuggestionForWord(patchEditor(textEditor), text, range)
            }

jonboiser avatar May 24 '18 23:05 jonboiser