atom-vue-hyperclick
atom-vue-hyperclick copied to clipboard
Support jump-to-definition for template using camelCase and kebab-case in <template>
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)
}