This commit 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 commit?
===============================
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.
* Disableability, Up or down rendering
* Switch to scale animation
* Update DropdownSelect.vue
* Fix animation
* bump
* adjustments
---------
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
