Enable TypeScript support

[brawaru]

This pull request enables TypeScript support in Omorphia. It reconfigures Vite, adds two new TSConfig files as a replacement for the old JSConfig, adds TypeScript linting to ESLint configuration.

Why?

TypeScript has became a standard in modern web development. In makes JavaScript a more type-safe language, makes code more maintaible and boosts effeciency by empowering development tools.

What's included in this pull request?

TypeScript config files

Old and plain JSConfig has been replaced with two TSConfigs: one designed for the code, and the other for the Vite configuration file.

JavaScript support is still enabled, therefore TypeScript files can import JavaScript files as well, and vice versa. However, it is recommended that all the new files will be written in TypeScript, and old files are slowly converted over to TypeScript, so this option can be disabled in the future, making this a safe TypeScript only project.

UMD output is replaced with CJS

UMD is an old format that tries to stay compatible with both the Node.js CJS, as well as Require.js. However, nowadays almost everyone is using a transpiler where this format won't be beneficial.

To avoid it being a breaking change, it has been replaced with CJS. But in the future it's worth considering removing CJS output as well and making Omorphia an ESM module only, as it's designed only to be consumed by the Modrinth project, and all of these projects are already ESM-first.

Minification is disabled

Because this is a library, the responsibility of minifying its code lies solely on the consumer. Just like with CJS, all of the supported consumers of this library are already performing minification, so minifying this library beforehand is rather wasteful and harmful, as it negatively impacts debugging experience.

More dependencies are now externalised

Disabling UMD output allows more easily externalise dependencies based on the package.json file, making it way more approachable.

Vue is now a peer dependency

Because this is a component library, Vue is not a direct dependency of this project. Instead, this library relies on consumer having a Vue as its dependency.

lib is no longer included in package

lib folder contains sources for the imports, but it's outside of export map and cannot be imported by the consumers. It is now excluded from the package to reduce the package size and installation time.

Typings

Consumers of this library should also be able to benefit from the type safety. To achieve this, there's now a Vite plugin that generates type declarations that represent the project structure.

To lesser the incompatibility with the consumers, some of the files were changed to import index.js from folders rather than folders themselves.

While both will work for building, not doing this requires consumer to opt in to bundler module dependency, whereas if index.js is imported, the consumer can use both the normal ESM / Node16 module resolution, as well as the bundler module resolution.

ESLint configuration changes

ESLint has been reconfigured to support TypeScript, and include rules recommended by the TypeScript ESLint package. In the future it would be good to review the rules and override rules for TypeScript files to disable rules that would conflict with ones from TypeScript ESLint.

Entry file is now a TypeScript file

To test the changes and begin the slow conversion, the entry point file is now a proper TypeScript file.

SVG imports use ?component parameter

All components are now imported with ?component URL parameter so that they have a proper file. By default, Vite imports all files like .svg as strings containing path to the file.

Unfortunately, vite-svg-loader overrides this behaviour without overriding the Vite import type declaration, leading to incorrect types. However, it does expose a new parameter ?component, which is properly typed and does the same thing you'd expect - export a Vue component, so most of the SVG imports have been converted to use this parameter.

[Mysterious-Dev]

😍