[IDEA] Detect globally registered components

[ShetlandJ]

At the moment, the repository relies on import or require statements to determine if a Vue file has been used. But this doesn't take into account files that are globally registered and can be used in your Vue component without having to import/require. I had a look at trying to do this myself by cloning the repo but I've never worked with TS and the commit instructions were pretty strict so I gave up 🤔. Be cool to have though

[BerniWittmann]

That’s a good idea 👍🏻
Maybe you can outline the idea on how you would solve this so I can then implement it?

[phuze]

A quick thought --- in the case of Vue 2, maybe you could scan main.js looking for all instances of global component registration:

Vue.component('MyComponentName', { /* ... */ })

using some regex:

/Vue\.component\(['"](.*)['"][,]?(\s+)?(.*)?\)/g

Then scan all project .vue files for both PascalCase and kebab-case opening component usage where applicable:

<my-component-name
<MyComponentName

If the user defines the component name using kebab-case, then they will have to reference it in their project using the same. If they define the component name using PascalCase, you'd have to check for both cases, since you can use either case when referencing it in your project.

[BerniWittmann]

Good catch, although it might be difficult to decide which files to scan. Of course main.js is the obvious one, but someone might be using typescript or moving such component declarations to another file and importing that in main…

[ShetlandJ]

So I didn't get a chance to test this specific codebase locally, but I am right in thinking that you guys parse the entire Vue file contents, and then use RegExp to look for a file path? If so, wouldn't it be as easy as also checking if the component name was presented as ComponentName or component-name in that file? Maybe even <ComponentName with the angle bracket at the start to be really sure, since a component could be used like <User but the text in the component could be User

I don't use Vue.component(...) in a main.js file, I created a file called _register-globally.js that looks like this:

import Vue from 'vue';

const requireComponent = require.context(
    // The relative path of the components folder
    '.',
    // Whether or not to look in subfolders
    true,
    // The regular expression used to match base component filenames
    /[A-Z]\w+\.(vue|js)$/
);

const camelize = (text) => {
    text = text.replace(/[-_\s.]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
    return text.substr(0, 1).toLowerCase() + text.substr(1);
}

const upperFirst = (string) => {
    return string ? string.charAt(0).toUpperCase() + string.slice(1) : ''
}

requireComponent.keys().forEach((fileName) => {
    // Get component config
    const componentConfig = requireComponent(fileName);

    // Get PascalCase name of component
    const strippedFilename = fileName.split('/').pop();
    const componentName = upperFirst(camelize(strippedFilename.replace(/^(.*)\.\w+$/, '$1')));

    // Register component globally
    Vue.component(
        componentName,
        // Look for the component options on `.default`, which will
        // exist if the component was exported with `export default`,
        // otherwise fall back to module's root.
        componentConfig.default || componentConfig
    );
});

I'm not sure how common that is, but it always seemed like a DRY-er way of registering. If you want want to tell me how to run your checking function locally I could try to make a fork and PR? Would love to contribute to OS stuff if I can.

Apologies if my understanding about the parsing of the file is incorrect, but that's how I was reading it in the src :)