Migrate eslint/prettier to biome

Update node js version
Update packages

.github/workflows/build.yml

@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        node-version: [16, 18, 20]
+        node-version: [18, 20, 22]
     uses: yoriiis/actions/.github/workflows/test-and-build.yml@main
     with:
       node-version: ${{ matrix.node-version }}

.github/workflows/lint.yml

@@ -15,5 +15,7 @@ jobs:
   lint:
     uses: yoriiis/actions/.github/workflows/lint.yml@main
     with:
-      eslint-config: 'config/.eslintrc.cjs'
-      stylelint-config: 'config/stylelint.config.cjs'
+      node-version: 20
+      eslint-status: false
+      stylelint-status: false
+      biome-status: true

.nvmrc

@@ -1 +1 @@
-18.16.0
+lts/jod

biome.json

@@ -0,0 +1,41 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
+	"files": {
+		"ignoreUnknown": false,
+		"ignore": ["**/node_modules", "**/examples", "**/config", "**/dist"]
+	},
+	"formatter": {
+		"enabled": true,
+		"useEditorconfig": true,
+		"formatWithErrors": false,
+		"indentStyle": "tab",
+		"indentWidth": 2,
+		"lineEnding": "lf",
+		"lineWidth": 100,
+		"attributePosition": "auto",
+		"bracketSpacing": true
+	},
+	"organizeImports": { "enabled": true },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"complexity": { "noForEach": "off" },
+			"suspicious": { "noExplicitAny": "off" }
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"jsxQuoteStyle": "double",
+			"quoteProperties": "asNeeded",
+			"trailingCommas": "none",
+			"semicolons": "asNeeded",
+			"arrowParentheses": "always",
+			"bracketSameLine": true,
+			"quoteStyle": "single",
+			"attributePosition": "auto",
+			"bracketSpacing": true
+		}
+	}
+}

config/package.js

@@ -1,12 +1,6 @@
-import { license, name, version, author } from '../package.json'
-
-export const banner =
-	'/*!\n' +
-	` * @license ${license}\n` +
-	` * @name ${name}\n` +
-	` * @version ${version}\n` +
-	` * @copyright ${new Date().getUTCFullYear()} ${author}\n` +
-	' */'
+import pkg from '../package.json' with { type: 'json' }
+const { author, license, name, version } = pkg
 
+export const banner = `/*!\n * @license ${license}\n * @name ${name}\n * @version ${version}\n * @copyright ${new Date().getUTCFullYear()} ${author}\n */`
 export const providers = ['youtube', 'vimeo', 'dailymotion']
 export const plugins = ['subtitle', 'pip', 'cast', 'airplay', 'ima', 'volume-bar', 'sticky']

config/rollup.config.js

@@ -1,14 +1,18 @@
-import { resolve } from 'path'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import alias from '@rollup/plugin-alias'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
-import svg from 'rollup-plugin-svg'
 import postcss from 'rollup-plugin-postcss'
-import alias from '@rollup/plugin-alias'
-import { terser } from 'rollup-plugin-terser'
-import { banner, providers, plugins } from './package'
+import svg from 'rollup-plugin-svg'
+import terser from '@rollup/plugin-terser'
+import { banner, plugins, providers } from './package.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const isProduction = process.env.ENV === 'production'
-const outputDirectory = resolve(__dirname, '../dist')
+const outputDirectory = path.resolve(__dirname, '../dist')
 
 const createConfig = ({ input, outputFile }) => {
 	return {
@@ -28,17 +32,17 @@ const createConfig = ({ input, outputFile }) => {
 			svg(),
 			postcss({
 				config: {
-					path: resolve(__dirname, 'postcss.config.cjs')
+					path: path.resolve(__dirname, 'postcss.config.cjs')
 				},
 				extract: true,
 				minimize: isProduction
 			}),
 			alias({
 				entries: [
-					{ find: 'shared', replacement: resolve('src/shared') },
-					{ find: 'components', replacement: resolve('src/components') },
-					{ find: 'providers', replacement: resolve('src/providers') },
-					{ find: 'plugins', replacement: resolve('src/plugins') }
+					{ find: 'shared', replacement: path.resolve('src/shared') },
+					{ find: 'components', replacement: path.resolve('src/components') },
+					{ find: 'providers', replacement: path.resolve('src/providers') },
+					{ find: 'plugins', replacement: path.resolve('src/plugins') }
 				]
 			}),
 			...(isProduction ? [terser()] : [])
@@ -60,7 +64,7 @@ export default [
 		})
 	),
 	createConfig({
-		input: `./src/core/vlite.ts`,
-		outputFile: `vlite.js`
+		input: './src/core/vlite.ts',
+		outputFile: 'vlite.js'
 	})
 ]

examples/audio/config.js

@@ -1,7 +1,7 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/volume-bar.css'
-import Vlitejs from '../../dist/vlite.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
 

examples/dailymotion/config.js

@@ -1,8 +1,8 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/volume-bar.css'
-import Vlitejs from '../../dist/vlite.js'
-import VlitejsDailymotion from '../../dist/providers/dailymotion.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
+import VlitejsDailymotion from '../../dist/providers/dailymotion.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerProvider('dailymotion', VlitejsDailymotion, {
 	playerId: 'x9scg'

examples/html5-hls/config.js

@@ -1,6 +1,6 @@
 import '../../dist/vlite.css'
-import Vlitejs from '../../dist/vlite.js'
 import VlitejsPip from '../../dist/plugins/pip.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerPlugin('pip', VlitejsPip)
 
@@ -26,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
 			autoHide: true
 		},
 		plugins: ['pip'],
-		onReady: function (player) {
+		onReady: (player) => {
 			console.log(player)
 		}
 	})

examples/html5-ima/config.js

@@ -1,7 +1,7 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/ima.css'
-import Vlitejs from '../../dist/vlite.js'
 import VlitejsIma from '../../dist/plugins/ima.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerPlugin('ima', VlitejsIma, {
 	adTagUrl:
@@ -29,7 +29,7 @@ const vlite = new Vlitejs('#player', {
 		autoHide: true
 	},
 	plugins: ['ima'],
-	onReady: function (player) {
+	onReady: (player) => {
 		console.log(player)
 
 		player.on('adsmanager', (e) => console.log('adsmanager', e.detail))

examples/html5-sticky/config.js

@@ -1,7 +1,7 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/sticky.css'
-import Vlitejs from '../../dist/vlite.js'
 import VlitejsSticky from '../../dist/plugins/sticky.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerPlugin('sticky', VlitejsSticky, {
 	mode: 'instant',
@@ -28,7 +28,7 @@ const vlite = new Vlitejs('#player', {
 		autoHide: true
 	},
 	plugins: ['sticky'],
-	onReady: function (player) {
+	onReady: (player) => {
 		console.log(player)
 
 		player.on('entersticky', () => console.log('entersticky'))

examples/html5/config.js

@@ -4,12 +4,12 @@ import '../../dist/plugins/pip.css'
 import '../../dist/plugins/cast.css'
 import '../../dist/plugins/airplay.css'
 import '../../dist/plugins/volume-bar.css'
-import Vlitejs from '../../dist/vlite.js'
-import VlitejsSubtitle from '../../dist/plugins/subtitle.js'
-import VlitejsPip from '../../dist/plugins/pip.js'
-import VlitejsCast from '../../dist/plugins/cast.js'
 import VlitejsAirplay from '../../dist/plugins/airplay.js'
+import VlitejsCast from '../../dist/plugins/cast.js'
+import VlitejsPip from '../../dist/plugins/pip.js'
+import VlitejsSubtitle from '../../dist/plugins/subtitle.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
 Vlitejs.registerPlugin('pip', VlitejsPip)
@@ -43,7 +43,7 @@ const vlite = new Vlitejs('#player', {
 		autoHide: true
 	},
 	plugins: ['subtitle', 'pip', 'cast', 'airplay', 'volume-bar'],
-	onReady: function (player) {
+	onReady: (player) => {
 		console.log(player)
 
 		player.on('play', () => console.log('play'))

examples/vimeo/config.js

@@ -1,8 +1,8 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/volume-bar.css'
-import Vlitejs from '../../dist/vlite.js'
-import VlitejsVimeo from '../../dist/providers/vimeo.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
+import VlitejsVimeo from '../../dist/providers/vimeo.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerProvider('vimeo', VlitejsVimeo)
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)

examples/webpack.config.js

@@ -1,9 +1,9 @@
-import fs from 'fs'
-import path from 'path'
-import webpack from 'webpack'
+import fs from 'node:fs'
+import path from 'node:path'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import TerserPlugin from 'terser-webpack-plugin'
-import HtmlWebpackPlugin from 'html-webpack-plugin'
+import webpack from 'webpack'
 
 const appDirectory = fs.realpathSync(process.cwd())
 const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)

examples/youtube/config.js

@@ -1,8 +1,8 @@
 import '../../dist/vlite.css'
 import '../../dist/plugins/volume-bar.css'
-import Vlitejs from '../../dist/vlite.js'
-import VlitejsYoutube from '../../dist/providers/youtube.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
+import VlitejsYoutube from '../../dist/providers/youtube.js'
+import Vlitejs from '../../dist/vlite.js'
 
 Vlitejs.registerProvider('youtube', VlitejsYoutube)
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
@@ -27,7 +27,7 @@ const vlite = new Vlitejs('#player', {
 	},
 	provider: 'youtube',
 	plugins: ['volume-bar'],
-	onReady: function (player) {
+	onReady: (player) => {
 		console.log(player)
 
 		player.on('play', () => console.log('play'))