This repository has been archived by the owner on Aug 28, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
Showing
13 changed files
with
775 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| fetch-retry-mintimeout=20000 | ||
| fetch-retry-maxtimeout=120000 | ||
| auto-install-peers=true |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export * from './highlight' | ||
| export * from './parse' | ||
| export * from './utils' | ||
| export * from './highlight.js' | ||
| export * from './parse.js' | ||
| export * from './utils.js' |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import * as components from './components/index.js' | ||
| import FloatingVue from 'floating-vue' | ||
| import { Plugin } from 'vue' | ||
|
|
||
| const plugin: Plugin = (app) => { | ||
| for (const key in components) { | ||
| app.component(key, components[key as keyof typeof components]) | ||
| } | ||
| app.use(FloatingVue) | ||
| } | ||
|
|
||
| export default plugin | ||
| export * from './components/index.js' | ||
| export * from './helpers/index.js' | ||
|
|
||
| import './assets/omorphia.scss' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| /// <reference types="vite/client" /> | ||
| /// <reference types="vite-svg-loader" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,20 +3,20 @@ | |
| "type": "module", | ||
| "version": "0.4.40", | ||
| "files": [ | ||
| "dist", | ||
| "lib" | ||
| "dist" | ||
| ], | ||
| "main": "./dist/omorphia.umd.cjs", | ||
| "module": "./dist/omorphia.js", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "import": "./dist/omorphia.js", | ||
| "require": "./dist/omorphia.umd.cjs" | ||
| "require": "./dist/omorphia.cjs" | ||
| }, | ||
| "./dist/style.css": "./dist/style.css" | ||
| }, | ||
| "scripts": { | ||
| "build": "vite build", | ||
| "build": "vue-tsc && vite build", | ||
| "lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .", | ||
| "lint": "pnpm run lint:js && prettier --check .", | ||
| "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write .", | ||
|
|
@@ -31,13 +31,14 @@ | |
| "highlight.js": "^11.8.0", | ||
| "markdown-it": "^13.0.1", | ||
| "qrcode.vue": "^3.4.0", | ||
| "vue": "^3.3.4", | ||
| "vue-chartjs": "^5.2.0", | ||
| "vue-router": "^4.2.1", | ||
| "vue-select": "^4.0.0-beta.6", | ||
| "xss": "^1.0.14" | ||
| }, | ||
| "devDependencies": { | ||
| "@typescript-eslint/eslint-plugin": "^6.7.4", | ||
| "@typescript-eslint/parser": "^6.7.4", | ||
| "@vitejs/plugin-vue": "^4.2.3", | ||
| "eslint": "^8.41.0", | ||
| "eslint-config-prettier": "^8.8.0", | ||
|
|
@@ -46,12 +47,19 @@ | |
| "postcss": "^8.4.24", | ||
| "postcss-prefix-selector": "^1.16.0", | ||
| "prettier": "^2.8.8", | ||
| "rollup-plugin-node-externals": "^6.1.2", | ||
| "sass": "^1.62.1", | ||
| "sass-loader": "^13.3.1", | ||
| "typescript": "^5.2.2", | ||
| "vite": "^4.3.9", | ||
| "vite-plugin-dts": "^3.6.0", | ||
| "vite-plugin-eslint": "^1.8.1", | ||
| "vite-svg-loader": "^4.0.0", | ||
| "vitepress": "^1.0.0-beta.1" | ||
| "vitepress": "^1.0.0-beta.1", | ||
| "vue-tsc": "^1.8.16" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^3.3.4" | ||
| }, | ||
| "packageManager": "[email protected]" | ||
| } | ||
Oops, something went wrong.