rewritten in typescript

.eslintrc.js

@@ -1,45 +1,26 @@
 module.exports = {
   root: true,
-
   env: {
     node: true
   },
-
-  extends: ["plugin:vue/recommended", "@vue/prettier"],
-
+  extends: [
+    "plugin:vue/essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint"
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
   rules: {
-    "no-console": "off",
-    "no-debugger": "off",
-    "vue/array-bracket-spacing": "error",
-    "vue/arrow-spacing": "error",
-    "vue/block-spacing": "error",
-    "vue/brace-style": "error",
-    "vue/camelcase": "error",
-    "vue/comma-dangle": "error",
-    "vue/component-name-in-template-casing": "error",
-    "vue/eqeqeq": "error",
-    "vue/key-spacing": "error",
-    "vue/match-component-file-name": "error",
-    "vue/object-curly-spacing": "error",
-    "vue/require-direct-export": "error",
-    "vue/script-indent": "error",
-    "vue/space-infix-ops": "error",
-    "vue/space-unary-ops": "error",
-    "vue/v-on-function-call": "error",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-useless-escape": "off"
   },
-
-  parserOptions: {
-    parser: "babel-eslint"
-  },
-
   overrides: [
-    {
-      files: ["**/__tests__/*.{j,t}s?(x)"],
-      env: {
-        jest: true
-      }
-    },
     {
       files: [
         "**/__tests__/*.{j,t}s?(x)",

.gitignore

@@ -1,8 +1,7 @@
 .DS_Store
 node_modules
 /dist
-/build
-/docs
+/demo
 
 # local env files
 .env.local

.travis.yml

@@ -9,12 +9,12 @@ cache:
 script:
   - yarn lint:no-fix
   - yarn test
-  - yarn docs
+  - yarn build:demo
 
 
 deploy:
   provider: pages
-  local_dir: docs
+  local_dir: demo
   skip_cleanup: true
   github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
   keep_history: true

README.md

@@ -115,8 +115,7 @@ this.$toast("I'm a toast!");
 
 // Or with options
 this.$toast("My toast content", {
-    timeout: 2000,
-    onClose: () => console.log("closed!")
+    timeout: 2000
 });
 // These options will override the options defined in the "Vue.use" plugin registration for this specific toast
 ```
@@ -130,8 +129,7 @@ this._vm.$toast("I'm a toast!");
 import Vue from "vue";
 
 Vue.$toast("My toast content", {
-    timeout: 2000,
-    onClose: () => console.log("closed!")
+    timeout: 2000
 });
 ```
 
@@ -725,7 +723,8 @@ Vue.use(Toast, { filterToasts });
 | pauseOnFocusLoss       | Boolean                                      | `true`       | Whether or not the toast is paused when the window loses focus.                                                                                                                                               |
 | pauseOnHover           | Boolean                                      | `true`       | Whether or not the toast is paused when it is hovered by the mouse.                                                                                                                                           |
 | closeOnClick           | Boolean                                      | `true`       | Whether or not the toast is closed when clicked.                                                                                                                                                              |
-| onClick                | Function                                     | `NOOP`       | Callback for when the toast is clicked. A `closeToast` callback is passed as an argument to `onClick` when it is called.                                                                                      |
+| onClick                | Function                                     | `NOOP`       | Callback executed when the toast is clicked. A `closeToast` callback is passed as an argument to `onClick` when it is called.                                                                                      |
+| onClose                | Function                                     | `NOOP`       | Callback executed when the toast is closed.                                                                                      |
 | timeout                | Positive Integer or false                    | `5000`       | How many milliseconds for the toast to be auto dismissed, or false to disable.                                                                                                                                |
 | toastClassName         | String or Array of Strings                   | `[]`         | Custom classes applied to the toast.                                                                                                                                                                          |
 | bodyClassName          | String or Array of Strings                   | `[]`         | Custom classes applied to the body of the toast.                                                                                                                                                              |

babel.config.js

@@ -4,7 +4,7 @@ module.exports = {
     [
       "@babel/preset-env",
       {
-        modules: false,
+        modules: "auto",
         forceAllTransforms: true,
         targets: {
           browsers: ["defaults", "not ie > 0", "not ie_mob > 0"]

build/config.js

@@ -0,0 +1,46 @@
+import { terser } from "rollup-plugin-terser";
+
+export default {
+  umd: {
+    output: "dist/umd/index.js",
+    format: "umd",
+    target: "es5",
+    globals: {
+      vue: "Vue",
+      "vue-class-component": "Component",
+      "vue-property-decorator": "vuePropertyDecorator"
+    },
+    env: "development"
+  },
+  umdMin: {
+    output: "dist/umd/index.min.js",
+    format: "umd",
+    target: "es5",
+    globals: {
+      vue: "Vue",
+      "vue-class-component": "Component",
+      "vue-property-decorator": "vuePropertyDecorator"
+    },
+    plugins: {
+      post: [
+        terser({
+          output: {
+            comments: false
+          }
+        })
+      ]
+    },
+    env: "production"
+  },
+  esm: {
+    output: "dist/esm/index.js",
+    format: "esm",
+    target: "es2015",
+    genDts: true
+  },
+  cjs: {
+    output: "dist/cjs/index.js",
+    format: "cjs",
+    target: "es2015"
+  }
+};

build/rollup.config.js

@@ -0,0 +1,67 @@
+import typescript from "rollup-plugin-typescript2";
+import commonjs from "rollup-plugin-commonjs";
+import vue from "rollup-plugin-vue";
+import scss from "rollup-plugin-scss";
+import filesize from "rollup-plugin-filesize";
+import configs from "./config";
+
+const externals = ["vue-property-decorator", "vue", "vue-class-component"];
+
+const genTsPlugin = configOpts =>
+  typescript({
+    useTsconfigDeclarationDir: true,
+    tsconfigOverride: {
+      compilerOptions: {
+        target: configOpts.target,
+        declaration: configOpts.genDts
+      }
+    }
+  });
+
+const genCommonJsPlugin = () => commonjs();
+
+const genVuePlugin = () =>
+  vue({
+    css: false
+  });
+
+const genScssPlugin = () => scss({ output: "dist/index.css" });
+
+const genFileSizePlugin = () => filesize();
+
+const genPlugins = configOpts => {
+  const plugins = [];
+  if (configOpts.plugins && configOpts.plugins.pre) {
+    plugins.push(...configOpts.plugins.pre);
+  }
+
+  plugins.push(genTsPlugin(configOpts));
+  plugins.push(genCommonJsPlugin(configOpts));
+  plugins.push(genScssPlugin(configOpts));
+  plugins.push(genVuePlugin(configOpts));
+  plugins.push(filesize(configOpts));
+
+  if (configOpts.plugins && configOpts.plugins.post) {
+    plugins.push(...configOpts.plugins.post);
+  }
+  return plugins;
+};
+
+const genConfig = configOpts => ({
+  input: "src/index.ts",
+  output: {
+    file: configOpts.output,
+    format: configOpts.format,
+    name: "VueToastification",
+    sourcemap: true,
+    exports: "named",
+    globals: configOpts.globals
+  },
+  external: externals,
+  plugins: genPlugins(configOpts)
+});
+
+const genAllConfigs = configs =>
+  Object.keys(configs).map(key => genConfig(configs[key]));
+
+export default genAllConfigs(configs);

jest.config.js

@@ -1,31 +1,3 @@
 module.exports = {
-  moduleFileExtensions: ["js", "jsx", "json", "vue"],
-
-  transform: {
-    "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
-      "jest-transform-stub",
-    "^.+\\.jsx?$": "babel-jest"
-  },
-
-  transformIgnorePatterns: ["/node_modules/"],
-
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1"
-  },
-
-  snapshotSerializers: ["jest-serializer-vue"],
-
-  testMatch: [
-    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-  ],
-
-  testURL: "http://localhost/",
-
-  watchPlugins: [
-    "jest-watch-typeahead/filename",
-    "jest-watch-typeahead/testname"
-  ],
-
-  preset: "@vue/cli-plugin-unit-jest"
+  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
 };