build(deps): Add manually optimized rollup as bundler

README.md

@@ -6,6 +6,8 @@ Tetikus is a custom cursor component made for Vue 3.
 
 > ⚠️ WARNING: This component **DOES NOT WORK** with Vue 2! Consider upgrading to Vue 3 as it's really close from being released.
 
+> ⚠️ WARNING: This library **DOES NOT** work on older browsers that doesn't support `esnext`, the reason is stated [here](https://github.com/vuejs/vue-next)
+
 ## Features
 
 - Easily customizable, you're not locked with basic circle shape and most

package.json

@@ -4,18 +4,19 @@
   "description": "A custom cursor component for Vue 3 ✌️",
   "author": "Cristopher Namchee <[email protected]>",
   "scripts": {
-    "build": "vue-cli-service build --target lib --name tetikus ./src/index.ts",
-    "lint": "vue-cli-service lint",
-    "build:report": "npm run build -- --report",
+    "lint": "eslint",
+    "build": "rm -rf dist/ && rollup -c",
     "build:watch": "npm run build -- --watch",
-    "build:bili": "rm -rf dist/ && bili src/index.ts",
-    "build:rollup": "rollup -c",
-    "postuninstall": "npm prune",
-    "test": "ava"
+    "build:verbose": "npm run build -- --verbose",
+    "test": "ava",
+    "postuninstall": "npm prune"
   },
-  "main": "dist/tetikus.common.js",
-  "unpkg": "dist/tetikus.umd.min.js",
-  "cdn": "dist/tetikus.umd.min.js",
+  "main": "dist/tetikus.cjs.js",
+  "module": "dist/tetikus.esm.js",
+  "unpkg": "dist/tetikus.min.js",
+  "cdn": "dist/tetikus.min.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
   "devDependencies": {
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
@@ -24,22 +25,19 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-plugin-typescript": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
     "@vue/compiler-sfc": "^3.0.0-rc.10",
     "@vue/eslint-config-typescript": "^5.0.2",
     "ava": "^3.12.1",
-    "bili": "^5.0.5",
-    "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
     "esm": "^3.2.25",
     "postcss-nesting": "^7.0.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.10",
+    "rollup-plugin-scss": "^2.6.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sinon": "^9.0.3",
     "ts-node": "^9.0.0",
@@ -62,8 +60,8 @@
     "verbose": true
   },
   "files": [
-    "src/*",
-    "dist/*"
+    "src",
+    "dist"
   ],
   "homepage": "https://github.com/Namchee/tetikus",
   "keywords": [

rollup.config.js

@@ -1,37 +1,87 @@
 import vue from 'rollup-plugin-vue';
 import resolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
-import cssNest from 'postcss-nesting';
+import { terser } from 'rollup-plugin-terser';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import scss from 'rollup-plugin-scss';
 
 const extensions = ['.vue', '.ts', '.tsx', '.js', '.jsx'];
 
-export default {
-  input: './src/index.ts',
-  plugins: [
-    resolve(
-      {
-        extensions,
-        browser: true,
-      },
-    ),
-    vue({
-      postcssPlugins: [
-        cssNest,
-      ],
-    }),
-    babel({
+const plugins = [
+  resolve(
+    {
       extensions,
-      babelHelpers: 'bundled',
-      include: [
-        'src/**/*',
-      ],
-      exclude: [
-        'node_modules',
-      ],
-    }),
-  ],
-  output: {
-    format: 'esm',
-    file: 'dist/tetikus.esm.js',
+      browser: true,
+    },
+  ),
+  commonjs(),
+  typescript(),
+  scss(
+    {
+      output: 'dist/tetikus.css',
+      failOnError: true,
+    },
+  ),
+  vue(
+    {
+      css: false,
+    },
+  ),
+];
+
+export default [
+  {
+    input: './src/index.ts',
+    external: ['vue'],
+    plugins,
+    output: {
+      format: 'cjs',
+      file: 'dist/tetikus.cjs.js',
+      sourcemap: false,
+      exports: 'named',
+    },
+  },
+  {
+    input: './src/index.ts',
+    external: ['vue'],
+    plugins,
+    output: {
+      format: 'umd',
+      file: 'dist/tetikus.js',
+      name: 'tetikus',
+      sourcemap: false,
+      exports: 'named',
+      globals: {
+        vue: 'Vue',
+      },
+    },
+  },
+  {
+    input: './src/index.ts',
+    external: ['vue'],
+    plugins: [
+      ...plugins,
+      terser(),
+    ],
+    output: {
+      format: 'umd',
+      file: 'dist/tetikus.min.js',
+      name: 'tetikus',
+      sourcemap: false,
+      exports: 'named',
+      globals: {
+        vue: 'Vue',
+      },
+    },
+  },
+  {
+    input: './src/index.ts',
+    external: ['vue'],
+    plugins,
+    output: {
+      format: 'esm',
+      file: 'dist/tetikus.esm.js',
+      sourcemap: false,
+    },
   },
-};
+];

src/components/Tetikus/Tetikus.vue

@@ -478,25 +478,25 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .tetikus {
   pointer-events: none;
   position: fixed;
   z-index: 999;
   display: flex;
+}
 
-  &.tetikus--leave {
-    display: none;
-  }
+.tetikus--leave {
+  display: none;
+}
 
-  & .tetikus__cursor {
-    box-sizing: border-box;
-  }
+.tetikus__cursor {
+  box-sizing: border-box;
+}
 
-  & .tetikus__default__cursor {
-    border-radius: 9999px;
-    transition: transform 150ms ease-in-out;
-    transform: scale(1);
-  }
+.tetikus__default__cursor {
+  border-radius: 9999px;
+  transition: transform 150ms ease-in-out;
+  transform: scale(1);
 }
 </style>

tsconfig.json

@@ -30,11 +30,10 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
   ],
   "exclude": [
     "node_modules",
-    "dist"
+    "dist",
+    "src/**/*.test.ts",
   ]
 }