wip - install vite

w/ typescript, vitest, eslint, prettier

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier"
+  ],
+  "env": {
+    "vue/setup-compiler-macros": true
+  }
+}

.eslintrc.js

@@ -1,22 +0,0 @@
-module.exports = {
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module',
-  },
-  plugins: ['prettier'],
-  extends: [
-    'plugin:prettier/recommended',
-    'plugin:vue/recommended',
-    'prettier/vue',
-  ],
-  ignorePatterns: [
-    '!.*.js',
-    '!docs/.vuepress',
-    'docs/.vuepress/dist',
-    'node_modules',
-    'dist',
-    'coverage',
-    'yarn.lock',
-  ],
-}

.gitignore

@@ -7,6 +7,10 @@ node_modules
 .env.*.local
 
 # Log files
+logs
+*.log
+pnpm-debug.log*
+lerna-debug.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -26,5 +30,7 @@ dist
 test/unit/coverage
 package-lock.json
 dev/dist
-docs/.vuepress/dist
+dist-ssr
+*.local
 .netlify
+docs/.vuepress/dist

build/webpack.base.conf.js

@@ -1,69 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'
-
-const devtool = env === 'production' ? 'source-map' : 'eval-source-map'
-
-const extractOrInjectStyles =
-  env !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader
-
-module.exports = {
-  mode: env,
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    publicPath: '/',
-    filename: '[name].js',
-  },
-  devtool,
-  resolve: {
-    extensions: ['.js', '.vue'],
-    alias: {
-      src: path.resolve(__dirname, '../src'),
-      assets: path.resolve(__dirname, '../docs/assets'),
-      mixins: path.resolve(__dirname, '../src/mixins'),
-      components: path.resolve(__dirname, '../src/components'),
-      vue$: 'vue/dist/vue.runtime.esm-bundler.js',
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: path.resolve(__dirname, '../'),
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.s?css$/,
-        use: [
-          extractOrInjectStyles,
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': env,
-      __VUE_OPTIONS_API__: true,
-      __VUE_PROD_DEVTOOLS__: false,
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'vue-select.css',
-    }),
-    new VueLoaderPlugin(),
-  ],
-  stats: {
-    children: false,
-    modules: false,
-  },
-}

build/webpack.dev.conf.js

@@ -1,37 +0,0 @@
-const merge = require('webpack-merge')
-const chokidar = require('chokidar')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const baseWebpackConfig = require('./webpack.base.conf')
-
-/**
- *
- */
-module.exports = merge(baseWebpackConfig, {
-  entry: './dev/dev.js',
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './dev/dev.html',
-      inject: true,
-    }),
-  ],
-  optimization: {
-    noEmitOnErrors: true,
-  },
-  devServer: {
-    hot: true,
-    hotOnly: true,
-    open: true,
-    inline: true,
-    stats: {
-      children: false,
-      modules: false,
-      chunks: false,
-    },
-    port: 8080,
-    before(app, server) {
-      chokidar.watch(['./**/*.html']).on('all', function () {
-        server.sockWrite(server.sockets, 'content-changed')
-      })
-    },
-  },
-})

build/webpack.prod.conf.js

@@ -1,23 +0,0 @@
-const TerserPlugin = require('terser-webpack-plugin')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-
-module.exports = merge(baseWebpackConfig, {
-  entry: './src/index.js',
-  output: {
-    filename: 'vue-select.js',
-    library: 'VueSelect',
-    libraryTarget: 'umd',
-    globalObject: "typeof self !== 'undefined' ? self : this",
-  },
-  externals: {
-    vue: 'vue',
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        sourceMap: true,
-      }),
-    ],
-  },
-})

dev/Dev.vue

@@ -5,9 +5,8 @@
 </template>
 
 <script>
-import vSelect from '../src/components/Select'
+import vSelect from '@/components/Select.vue'
-import countries from '../docs/.vuepress/data/countryCodes'
+import countries from '../docs/.vuepress/data/countryCodes.js'
-import books from '../docs/.vuepress/data/books'
 
 export default {
   components: { vSelect },

dev/dev.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Vue Select Dev</title>
-  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
-  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">-->
-  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">-->
-  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
-  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
-</head>
-<body>
-<div id="app"></div>
-</body>
-</html>

dev/dev.js

@@ -1,6 +1,4 @@
 import { createApp, h } from 'vue'
 import Dev from './Dev.vue'
 
-createApp({
+createApp(Dev).mount('#app')
-  render: () => h(Dev),
-}).mount('#app')

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Select Dev</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="./dev/dev.js"></script>
+</body>
+</html>

package.json

@@ -13,16 +13,16 @@
   "license": "MIT",
   "prepare": "npm run build",
   "scripts": {
-    "serve": "webpack-dev-server --config build/webpack.dev.conf.js --hot --progress -d",
+    "dev:docs": "cd docs && yarn serve",
-    "serve:docs": "cd docs && yarn serve",
-    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js --progress",
     "build:docs": "cd docs && yarn build",
-    "build:preview": "cd docs && yarn build",
-    "test": "jest",
-    "eslint": "eslint '{**/*,*}.{js,ts,jsx,tsx,vue}'",
-    "eslint:fix": "npm run eslint -- --fix",
     "semantic-release": "semantic-release",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --port 5050",
+    "test:unit": "vitest --environment jsdom",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "repository": {
     "type": "git",
@@ -31,60 +31,33 @@
   "peerDependencies": {
     "vue": "3.x"
   },
-  "resolutions": {
-    "ajv": "6.8.1"
-  },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
+    "@rushstack/eslint-patch": "^1.1.0",
-    "@babel/eslint-parser": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
-    "@babel/runtime": "^7.4.2",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/github": "^7.0.4",
-    "@vue/compiler-sfc": "^3.2.20",
+    "@types/jsdom": "^16.2.14",
-    "@vue/test-utils": "^2.0.0-rc.16",
+    "@types/node": "^16.11.22",
-    "autoprefixer": "^9.4.7",
+    "@vitejs/plugin-vue": "^2.1.0",
-    "babel-core": "^7.0.0-bridge.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
-    "babel-eslint": "^10.0.3",
+    "@vue/eslint-config-typescript": "^10.0.0",
-    "babel-loader": "^8.0.5",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.2",
     "bundlewatch": "^0.2.5",
-    "chokidar": "^2.1.5",
     "commitizen": "^4.0.3",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
-    "css-loader": "^2.1.0",
-    "cssnano": "^4.1.10",
     "cz-conventional-changelog": "3.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^8.5.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-vue": "^8.2.0",
-    "eslint-loader": "^3.0.3",
+    "jsdom": "^19.0.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "prettier": "^2.5.1",
-    "eslint-plugin-vue": "^6.2.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.1.0",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-scss": "^2.0.0",
-    "prettier": "2.2.1",
-    "sass-loader": "^7.1.0",
     "semantic-release": "^17.0.4",
-    "terser-webpack-plugin": "^1.2.3",
+    "typescript": "~4.5.5",
-    "url-loader": "^1.1.2",
+    "vite": "^2.7.13",
+    "vitest": "^0.2.5",
     "vue": "^3.2.20",
-    "vue-html-loader": "^1.2.4",
+    "vue-tsc": "^0.31.1"
-    "vue-jest": "5.0.0-alpha.8",
-    "vue-loader": "^16.8.1",
-    "vue-server-renderer": "^2.6.10",
-    "vue-style-loader": "^4.1.2",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1",
-    "webpack-merge": "^4.2.1"
   },
   "jest": {
     "moduleFileExtensions": [

postcss.config.js

@@ -1,8 +1,3 @@
 module.exports = {
-  plugins: [
+  plugins: [require('autoprefixer')],
-    require('autoprefixer'),
-    require('cssnano')({
-      preset: 'default',
-    }),
-  ],
 }

src/__tests__/HelloWorld.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+    expect(wrapper.text()).toContain('Hello Vitest')
+  })
+})

src/components/Select.vue

@@ -34,7 +34,7 @@
             <button
               v-if="multiple"
               ref="deselectButtons"
-              :ref="el => deselectButtons[i] = el"
+              :ref="(el) => (deselectButtons[i] = el)"
               :disabled="disabled"
               type="button"
               class="vs__deselect"
@@ -137,13 +137,13 @@
 </template>
 
 <script>
-import pointerScroll from '../mixins/pointerScroll'
+import pointerScroll from '@/mixins/pointerScroll.js'
-import typeAheadPointer from '../mixins/typeAheadPointer'
+import typeAheadPointer from '@/mixins/typeAheadPointer.js'
-import ajax from '../mixins/ajax'
+import ajax from '@/mixins/ajax.js'
-import childComponents from './childComponents'
+import childComponents from '@/components/childComponents.js'
-import appendToBody from '../directives/appendToBody'
+import appendToBody from '@/directives/appendToBody.js'
-import sortAndStringify from '../utility/sortAndStringify'
+import sortAndStringify from '@/utility/sortAndStringify.js'
-import uniqueId from '../utility/uniqueId'
+import uniqueId from '@/utility/uniqueId.js'
 
 /**
  * @name VueSelect
@@ -694,7 +694,7 @@ export default {
       pushedTags: [],
       // eslint-disable-next-line vue/no-reserved-keys
       _value: [], // Internal value managed by Vue Select if no `value` prop is passed
-      deselectButtons: []
+      deselectButtons: [],
     }
   },
 
@@ -746,7 +746,7 @@ export default {
      * @returns {HTMLInputElement}
      */
     searchEl() {
-      return !!this.$slots['search']
+      return this.$slots['search']
         ? this.$refs.selectedOptions.querySelector(
             this.searchInputQuerySelector
           )

src/components/childComponents.js

@@ -1,5 +1,5 @@
-import Deselect from './Deselect'
+import Deselect from './Deselect.vue'
-import OpenIndicator from './OpenIndicator'
+import OpenIndicator from './OpenIndicator.vue'
 
 export default {
   Deselect,

src/index.js

@@ -1,5 +1,5 @@
 import VueSelect from './components/Select.vue'
-import mixins from './mixins/index'
+import mixins from './mixins/index.js'
 
 export default VueSelect
 export { VueSelect, mixins }

src/mixins/index.js

@@ -1,5 +1,5 @@
-import ajax from './ajax'
+import ajax from '@/mixins/ajax.js'
-import pointer from './typeAheadPointer'
+import pointer from '@/mixins/typeAheadPointer.js'
-import pointerScroll from './pointerScroll'
+import pointerScroll from '@/mixins/pointerScroll.js'
 
 export default { ajax, pointer, pointerScroll }

tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.vite-config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}

tsconfig.vite-config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node", "vitest"]
+  }
+}

tsconfig.vitest.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

vite.config.ts

@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    publicDir: false,
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+})