I'm developing the design framework for a certain Q&A site. We are currently using an external dependency for the tag selector on the post editor, but it has some disadvantages (not fitting into the design system, not working well without JavaScript, ...). Hence I want to implement a tag autocomplete component in the design framework.

We precompile and precheck the JavaScript by using TypeScript in combination with the npm module "typescript-bundle", which bundles the files into one file.

The command we use to compile the JavaScript is basically ¹

tsc-bundle tsconfig.json

Our tsconfig.json file is:

{
    "compilerOptions": {
        "removeComments": true,
        "outDir": "./js/",
        "outFile": "./js/co-design.js",
        "rootDir": "./js_src/",
        "target": "ES5",
        "alwaysStrict": true
    }
}

Now I have a file that contains this class definition:

export default class AutoComplete {
    private readonly refersToElement: HTMLElement;

    constructor(refersToElement: HTMLElement) {
        this.refersToElement = refersToElement;
        /* ... */
    }

    /* ... */

    static find(query: string) {
        const element = document.querySelector(query);
        return new AutoComplete(element as HTMLElement);
    }
};

Unlike other components, which are invoked by the primary TypeScript file by a general selector, I want this class to be available throughout the site's JavaScript, because it will need to be configured quite much (ex.: tag query and filtering) in comparison to other TS modules. As we have our own "design framework", the Q&A software uses an additional JavaScript codebase, which can't be build together with the Co-Design JS.

However, when I try to access it in "normal JavaScript", I get a Uncaught ReferenceError: AutoComplete is not defined. I tried exporting it from the primary TypeScript file, which didn't work either.

What can I do to make AutoComplete available in non-TS JavaScript?

posted over 4 years ago

CC BY-SA 4.0

luap42‭ staff

471 reputation 2 7 54 2