From bc77070c091ea220d412abe8b3ea2a712efcbc5f Mon Sep 17 00:00:00 2001
From: Ivan Demidov <Scrum@list.ru>
Date: Thu, 14 May 2020 15:54:13 +0300
Subject: [PATCH] feat: migrate to TS, close #70

---
 src/components/breadcrumbs.vue | 39 ----------------------
 src/index.js                   |  6 ----
 src/index.ts                   | 60 ++++++++++++++++++++++++++++++++++
 src/plugin.js                  | 19 -----------
 src/shims-vue.d.ts             | 14 ++++++++
 5 files changed, 74 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/breadcrumbs.vue
 delete mode 100644 src/index.js
 create mode 100644 src/index.ts
 delete mode 100644 src/plugin.js
 create mode 100644 src/shims-vue.d.ts

diff --git a/src/components/breadcrumbs.vue b/src/components/breadcrumbs.vue
deleted file mode 100644
index da38331..0000000
--- a/src/components/breadcrumbs.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-export default {
-    name:"breadcrumbs",
-    methods: {
-        getBreadcrumb(bc) {
-            return typeof bc === 'function' ? bc.call(this, this.$route.params) : bc;
-        },
-        getPath(crumb) {
-            let {path} = crumb;
-
-            for (let [key, value] of Object.entries(this.$route.params)) {
-                path = path.replace(`:${key}`, value);
-            }
-
-            return path;
-        }
-    },
-    template: `
-        <ol
-            class="breadcrumb"
-            v-if="$breadcrumbs.length"
-        >
-            <li
-                class="breadcrumb-item"
-                v-if="crumb.meta.breadcrumb"
-                v-for="(crumb, i) in $breadcrumbs"
-                :key="i"
-            >
-                <router-link
-                    active-class="active"
-                    :to="{ path: getPath(crumb) }"
-                    :tag="i != $breadcrumbs.length - 1 ? 'a' : 'span'"
-                >
-                    {{ getBreadcrumb(crumb.meta.breadcrumb) }}
-                </router-link>
-            </li>
-        </ol>`
-}
-</script>
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 964f328..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import plugin from './plugin';
-
-export {
-  plugin as default,
-  plugin as VueBreadcrumbsPlugin
-};
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..59a6258
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,60 @@
+import {ComponentOptions, PluginObject, VueConstructor} from 'vue'
+import { Route } from 'vue-router';
+
+type CallbackFunction = () => string;
+
+class VueBreadcrumbs implements PluginObject<ComponentOptions<Vue>> {
+  install(Vue: VueConstructor<Vue>, options = {}) {
+
+    Object.defineProperties(Vue.prototype, {
+      $breadcrumbs: {
+        get(): Route[] {
+          return this.$route.matched.map((route: Route) => ({
+            ...route,
+            path: route.path.length > 0 ? route.path : '/'
+          }));
+        }
+      }
+    });
+
+    Vue.component('Breadcrumbs', Vue.extend({
+      methods: {
+        getBreadcrumb(bc: string | CallbackFunction): string {
+          return typeof bc === 'function' ? bc.call(this, this.$route.params) : bc;
+        },
+        getPath(crumb: Route): string {
+          let {path} = crumb;
+
+          for (const [key, value] of Object.entries(this.$route.params)) {
+            path = path.replace(`:${key}`, value);
+          }
+
+          return path;
+        }
+      },
+      template: `
+      <ol
+          class="breadcrumb"
+          v-if="$breadcrumbs.length"
+      >
+          <li
+              class="breadcrumb-item"
+              v-if="crumb.meta.breadcrumb"
+              v-for="(crumb, i) in $breadcrumbs"
+              :key="i"
+          >
+              <router-link
+                  active-class="active"
+                  :to="{ path: getPath(crumb) }"
+                  :tag="i != $breadcrumbs.length - 1 ? 'a' : 'span'"
+              >
+                  {{ getBreadcrumb(crumb.meta.breadcrumb) }}
+              </router-link>
+          </li>
+      </ol>`,
+      ...options
+    }))
+  }
+}
+
+export default new VueBreadcrumbs();
diff --git a/src/plugin.js b/src/plugin.js
deleted file mode 100644
index 372a5ea..0000000
--- a/src/plugin.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import breadcrumbs from './components/breadcrumbs.vue';
-
-export default (Vue, options) => {
-  Object.defineProperties(Vue.prototype, {
-    $breadcrumbs: {
-      get() {
-        return this.$route.matched.map(route => ({
-          ...route,
-          path: route.path.length > 0 ? route.path : '/'
-        }));
-      }
-    }
-  });
-
-  Vue.component(breadcrumbs.name, {
-    ...breadcrumbs,
-    ...options
-  });
-};
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..b265563
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,14 @@
+// import VueRouter, { Route } from 'vue-router'
+
+// declare module 'vue/types/vue' {
+//   interface Vue {
+//     $router: VueRouter,
+//     $route: Route
+//   }
+// }
+
+// declare module 'vue/types/vue' {
+//   interface VueConstructor {
+//     $breadcrumbs: string
+//   }
+// }