Merge pull request #1 from Namchee/rollup-build

build: Configure 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

@@ -1,38 +1,42 @@
 {
   "name": "@namchee/tetikus",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",
-    "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",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@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",
@@ -56,8 +60,8 @@
     "verbose": true
   },
   "files": [
-    "src/*",
-    "dist/*"
+    "src",
+    "dist"
   ],
   "homepage": "https://github.com/Namchee/tetikus",
   "keywords": [

rollup.config.js

@@ -0,0 +1,87 @@
+import vue from 'rollup-plugin-vue';
+import resolve from '@rollup/plugin-node-resolve';
+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'];
+
+const plugins = [
+  resolve(
+    {
+      extensions,
+      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

@@ -10,11 +10,11 @@ import {
   watch,
 } from 'vue';
 
-import { throttle } from '@/util/throttle';
-import { lerp } from '@/util/math';
-import { generateCSSTransform } from '@/util/dom';
-import { hoverState } from '@/directives/hover';
-import { TransformProps, HoverBehavior } from '@/common/types';
+import { throttle } from './../../util/throttle';
+import { lerp } from './../../util/math';
+import { generateCSSTransform } from './../../util/dom';
+import { hoverState } from './../../directives/hover';
+import { TransformProps, HoverBehavior } from './../../common/types';
 import {
   defaultTransitionSpeed,
   defaultEasingFunction,

src/directives/hover.ts

@@ -1,5 +1,5 @@
 import { DirectiveBinding, ref, Ref, VNode } from 'vue';
-import { HoverBehavior, TransformProps } from '@/common/types';
+import { HoverBehavior, TransformProps } from './../common/types';
 
 export const hoverState: Ref<HoverBehavior | null> = ref(null);
 

src/exceptions/TetikusException.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import { ExceptionLevel } from '@/common/types';
+import { ExceptionLevel } from './../common/types';
 
 /**
  * Custom exception class for firing any exception that comes

src/index.ts

@@ -1,10 +1,10 @@
-import Tetikus from '@/components/Tetikus';
-import { TetikusHover } from '@/directives/hover';
+import Tetikus from './components/Tetikus';
+import { TetikusHover } from './directives/hover';
 import {
   defaultTransitionSpeed,
   defaultEasingFunction,
   defaultDelay,
-} from '@/components/Tetikus/options';
+} from './components/Tetikus/options';
 import { TetikusOptions } from './common/types';
 import { App } from 'vue';
 

src/util/dom.test.ts

@@ -1,7 +1,7 @@
 import test from 'ava';
 import { stub } from 'sinon';
 import { generateCSSTransform } from './dom';
-import { CSSAnimation, TransformProps } from '@/common/types';
+import { CSSAnimation, TransformProps } from './../common/types';
 
 test('should generate CSS transform correctly', (t) => {
   const transformRef = {

src/util/dom.ts

@@ -1,11 +1,11 @@
-import { TransformProps, CSSStyles, CSSAnimation } from '@/common/types';
+import { TransformProps, CSSStyles, CSSAnimation } from './../common/types';
 import {
   defaultTransitionSpeed,
   defaultEasingFunction,
   defaultDelay,
-} from '@/components/Tetikus/options';
-import { TetikusException } from '@/exceptions/TetikusException';
-import { ExceptionLevel } from '@/common/types';
+} from './../components/Tetikus/options';
+import { TetikusException } from './../exceptions/TetikusException';
+import { ExceptionLevel } from './../common/types';
 
 interface CSSMap {
   unit: string;

src/util/math.test.ts

@@ -1,7 +1,7 @@
 import test from 'ava';
 import { stub } from 'sinon';
 import { lerp } from './math';
-import { TetikusException } from '@/exceptions/TetikusException';
+import { TetikusException } from './../exceptions/TetikusException';
 
 test('should return correct result', (t) => {
   const result = lerp(20, 80, 0.5);

src/util/math.ts

@@ -1,4 +1,4 @@
-import { TetikusException } from '@/exceptions/TetikusException';
+import { TetikusException } from './../exceptions/TetikusException';
 
 // utility function to convert CSS computed values to px
 function parseCSSVars(val: number | string): number {

tsconfig.json

@@ -14,9 +14,6 @@
     "baseUrl": ".",
     "outDir": "dist",
     "rootDir": "src",
-    "types": [
-      "webpack-env",
-    ],
     "paths": {
       "@/*": [
         "src/*"
@@ -33,11 +30,10 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx",
   ],
   "exclude": [
     "node_modules",
-    "dist"
+    "dist",
+    "src/**/*.test.ts",
   ]
 }