feat: Migrate build configuration to vite

Author: nikhin-keyvalue

.eslintrc.cjs

@@ -8,11 +8,13 @@ module.exports = {
     '@vue/airbnb'
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    project: ['./tsconfig.json']
   },
   overrides: [
     {
-      files: ['*.vue'],
+      files: ['*.vue', '*.ts'],
       rules: {
         'vue/multi-word-component-names': 'off'
       }
@@ -63,8 +65,8 @@ module.exports = {
     'vue/html-indent': 'off',
     'vue/max-attributes-per-line': 'off',
     'no-spaced-func': 'off',
-    '@typescript-eslint/consistent-type-imports': 'error',
     'vuejs-accessibility/form-control-has-label': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
     'vue/first-attribute-linebreak': 'off',
     indent: ['off'],
     curly: ['error', 'multi', 'consistent'],

package.json

@@ -2,13 +2,15 @@
   "name": "@siren/vue-inbox",
   "version": "1.0.0",
   "description": "Vue SDK for in-app notification inbox",
-  "main": "dist/index.js",
-  "types": "dist.type.d.ts",
+  "types": "./dist/@siren/index.d.ts",
   "type": "module",
+  "module": "./dist/siren-vue-inbox.js",
   "scripts": {
-    "build": "rm -rf dist && rollup -c",
-    "prepare": "husky",
-    "lint": "eslint src"
+    "dev": "vite",
+    "build": "vite build && vue-tsc",
+    "types": "vue-tsc ",
+    "preview": "vite preview",
+    "lint": "eslint src/"
   },
   "repository": {
     "type": "git",
@@ -26,29 +28,27 @@
     "url": "https://github.com/KeyValueSoftwareSystems/siren-vue-inbox/issues"
   },
   "homepage": "https://github.com/KeyValueSoftwareSystems/siren-vue-inbox#readme",
-  "dependencies": {
+  "devDependencies": {
+    "@types/node": "^20.2.5",
+    "@typescript-eslint/parser": "^7.5.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-airbnb": "^8.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.22.0",
-    "husky": "^9.0.11",
-    "test_notification": "^1.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "path": "^0.12.7",
     "typescript": "^5.3.3",
+    "vite": "^5.1.6",
+    "vite-plugin-css-injected-by-js": "^3.4.0",
     "vue-tsc": "^2.0.5"
   },
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "@vue/tsconfig": "^0.5.1",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "rollup-plugin-vue": "^6.0.0"
-  },
   "peerDependencies": {
-    "vue": "^3.4.15"
+    "vue": ">=3.0.0"
   },
   "files": [
     "dist",
     "package.json",
-    "README.md"
+    "README.md",
+    "license"
   ]
 }

rollup.config.js

@@ -0,0 +1,3 @@
+<template>
+    Siren
+</template>

src/components/SirenInbox.vue

@@ -0,0 +1,3 @@
+import SirenInbox from './components/SirenInbox.vue';
+
+export { SirenInbox };

src/index.ts

@@ -1,17 +1,24 @@
 {
-    "extends": "@vue/tsconfig/tsconfig.dom.json",
     "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "declaration": true,
-    "rootDir": ".",
-    "target": "es5",
-    "module": "esnext",
-    "outDir": "dist",
-    "declarationDir": "dist",
+      "target": "ES2020",
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "skipLibCheck": true,
+      "moduleResolution": "bundler",
+      "allowImportingTsExtensions": true,
+      "noEmit": true,
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "jsx": "preserve",
+      "declaration": true,
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true
     },
-    "include": ["./"],
-    "exclude": ["node_modules"]
-}
+    "include": ["src"],
+    "exclude": ["node_modules"],
+    "references": [{ "path": "./tsconfig.node.json" }]
+  }
+  

src/index.vue

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "composite": true,
+      "skipLibCheck": true,
+      "module": "ESNext",
+      "moduleResolution": "bundler",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["vite.config.ts"]
+  }
+  

tsconfig.json

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import vue from '@vitejs/plugin-vue';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+export default defineConfig({
+  plugins: [vue(), cssInjectedByJsPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'Siren',
+      fileName: 'siren-vue-inbox',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue'
+        },
+        format: 'esm'
+      },
+    }
+  }
+});