From 21caa76e2c763092b59f8852da474fb90c636b3c Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Tue, 3 Jul 2018 01:40:47 +0930
Subject: [PATCH 1/9] cleanup app-link for tests

---
 .../slim/views/vue-components/app-link.mako   | 150 +++++++++++-------
 .../templates/vue-components/app-link.mako    | 150 +++++++++++-------
 .../templates/vue-components/app-link.mako    | 150 +++++++++++-------
 3 files changed, 270 insertions(+), 180 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index 9c6c9f0bdb..bb7e3ef0c0 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    store,
     props: {
         to: [String, Object],
         href: String,
@@ -22,80 +23,109 @@ Vue.component('app-link', {
         placeholder: {
             type: String,
             default: 'indexer-to-name'
-        }
+        },
+        base: String
     },
     computed: {
+        config() {
+            return this.$store.state.config;
+        },
+        computedBase() {
+            // Return prop before HTML element to allow tests to mock
+            if (this.base) {
+                return this.base;
+            }
+
+            return document.getElementsByTagName('base')[0].getAttribute('href');
+        },
+        computedHref() {
+            const { indexerId, placeholder } = this;
+            if (indexerId && placeholder) {
+                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+            }
+            return this.href;
+        },
+        isIRC() {
+            return this.computedHref.startsWith('irc://');
+        },
+        isAbsolute() {
+            const href = this.computedHref;
+            return /^[a-z][a-z0-9+.-]*:/.test(href);
+        },
+        isExternal() {
+            const base = this.computedBase;
+            const href = this.computedHref;
+            return !href.startsWith(base) && !href.startsWith('webcal://');
+        },
+        isHashPath() {
+            return this.computedHref.startsWith('#');
+        },
+        isAnonymised() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect && href.startsWith(anonRedirect);
+        },
+        anonymisedHref() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect ? anonRedirect + href : href;
+        },
         linkProperties() {
-            const {to, indexerId, placeholder} = this;
-            const href = indexerId && placeholder ? this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId)) : this.href;
-            const base = document.getElementsByTagName('base')[0].getAttribute('href');
-            const isIRC = url => {
-                return url.startsWith('irc://');
-            };
-            const isAbsolute = url => {
-                return /^[a-z][a-z0-9+.-]*:/.test(url);
+            const { to, isIRC, isAbsolute, isExternal, isHashPath, isAnonymised, anonymisedHref } = this;
+            const base = this.computedBase;
+            const href = this.computedHref;
+
+            // Return normal router-link
+            if (to) {
+                return {
+                    is: 'router-link',
+                    to: { name: href }
+                };
             }
-            const isExternal = url => {
-                return !url.startsWith(base) && !url.startsWith('webcal://');
-            };
-            const isHashPath = url => {
-                return url.startsWith('#')
-            };
-            const isAnonymised = url => {
-                return MEDUSA.config.anonRedirect && url.startsWith(MEDUSA.config.anonRedirect);
-            };
-            const anonymise = url => MEDUSA.config.anonRedirect ? MEDUSA.config.anonRedirect + url : url;
-            if (!to) {
-                if (href) {
-                    // @TODO: Remove this once we move to vue only
-                    if (isAnonymised(href)) {
-                        throw new Error('Still using anon_url in Python!');
-                    }
-                    const resolvedHref = () => {
-                        if (isHashPath(href)) {
-                            const {location} = window;
-                            if (location.hash.length === 0) {
-                                // current location might be `url#`
-                                const newHash = location.href.endsWith('#') ? href.substr(1) : href;
-                                return location.href + newHash;
-                            }
-                            return location.href.replace(location.hash, '') + href;
-                        }
-                        if (isIRC(href)) {
-                            return href;
-                        }
-                        if (isAbsolute(href)) {
-                            if (isExternal(href)) {
-                                return anonymise(href)
-                            } else {
-                                return href;
-                            }
-                        } else {
-                            return new URL(href, base).href
-                        }
-                    };
-                    return {
-                        is: 'a',
-                        target: isAbsolute(href) && isExternal(href) ? '_blank' : '_self',
-                        href: resolvedHref(),
-                        rel: isAbsolute(href) && isExternal(href) ? 'noreferrer' : undefined
-                    };
-                }
 
-                // Just return a boring link with other attrs
-                // @NOTE: This is for scroll achors as it uses the id
+            // Just return a boring link with other attrs
+            // @NOTE: This is for scroll achors as it uses the id
+            if (!href) {
                 return {
                     is: 'a',
                     falseLink: true
                 };
             }
+
+            // @TODO: Remove this once we move to vue only
+            if (isAnonymised) {
+                throw new Error('Still using anon_url in Python!');
+            }
+
             return {
-                is: 'router-link',
-                to: { name: href }
+                is: 'a',
+                target: isAbsolute && isExternal ? '_blank' : '_self',
+                href: (() => {
+                    if (isHashPath) {
+                        const { location } = window;
+                        if (location.hash.length === 0) {
+                            // Current location might be `url#`
+                            const newHash = location.href.endsWith('#') ? href.substr(1) : href;
+                            return location.href + newHash;
+                        }
+                        return location.href.replace(location.hash, '') + href;
+                    }
+                    if (isIRC) {
+                        return href;
+                    }
+                    if (isAbsolute) {
+                        if (isExternal) {
+                            return anonymisedHref;
+                        }
+                        return href;
+                    }
+                    return new URL(href, base).href;
+                })(),
+                rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
     },
-    template: `#app-link-template`
+    template: '#app-link-template'
 });
 </script>
 <style>
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index 9c6c9f0bdb..bb7e3ef0c0 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    store,
     props: {
         to: [String, Object],
         href: String,
@@ -22,80 +23,109 @@ Vue.component('app-link', {
         placeholder: {
             type: String,
             default: 'indexer-to-name'
-        }
+        },
+        base: String
     },
     computed: {
+        config() {
+            return this.$store.state.config;
+        },
+        computedBase() {
+            // Return prop before HTML element to allow tests to mock
+            if (this.base) {
+                return this.base;
+            }
+
+            return document.getElementsByTagName('base')[0].getAttribute('href');
+        },
+        computedHref() {
+            const { indexerId, placeholder } = this;
+            if (indexerId && placeholder) {
+                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+            }
+            return this.href;
+        },
+        isIRC() {
+            return this.computedHref.startsWith('irc://');
+        },
+        isAbsolute() {
+            const href = this.computedHref;
+            return /^[a-z][a-z0-9+.-]*:/.test(href);
+        },
+        isExternal() {
+            const base = this.computedBase;
+            const href = this.computedHref;
+            return !href.startsWith(base) && !href.startsWith('webcal://');
+        },
+        isHashPath() {
+            return this.computedHref.startsWith('#');
+        },
+        isAnonymised() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect && href.startsWith(anonRedirect);
+        },
+        anonymisedHref() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect ? anonRedirect + href : href;
+        },
         linkProperties() {
-            const {to, indexerId, placeholder} = this;
-            const href = indexerId && placeholder ? this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId)) : this.href;
-            const base = document.getElementsByTagName('base')[0].getAttribute('href');
-            const isIRC = url => {
-                return url.startsWith('irc://');
-            };
-            const isAbsolute = url => {
-                return /^[a-z][a-z0-9+.-]*:/.test(url);
+            const { to, isIRC, isAbsolute, isExternal, isHashPath, isAnonymised, anonymisedHref } = this;
+            const base = this.computedBase;
+            const href = this.computedHref;
+
+            // Return normal router-link
+            if (to) {
+                return {
+                    is: 'router-link',
+                    to: { name: href }
+                };
             }
-            const isExternal = url => {
-                return !url.startsWith(base) && !url.startsWith('webcal://');
-            };
-            const isHashPath = url => {
-                return url.startsWith('#')
-            };
-            const isAnonymised = url => {
-                return MEDUSA.config.anonRedirect && url.startsWith(MEDUSA.config.anonRedirect);
-            };
-            const anonymise = url => MEDUSA.config.anonRedirect ? MEDUSA.config.anonRedirect + url : url;
-            if (!to) {
-                if (href) {
-                    // @TODO: Remove this once we move to vue only
-                    if (isAnonymised(href)) {
-                        throw new Error('Still using anon_url in Python!');
-                    }
-                    const resolvedHref = () => {
-                        if (isHashPath(href)) {
-                            const {location} = window;
-                            if (location.hash.length === 0) {
-                                // current location might be `url#`
-                                const newHash = location.href.endsWith('#') ? href.substr(1) : href;
-                                return location.href + newHash;
-                            }
-                            return location.href.replace(location.hash, '') + href;
-                        }
-                        if (isIRC(href)) {
-                            return href;
-                        }
-                        if (isAbsolute(href)) {
-                            if (isExternal(href)) {
-                                return anonymise(href)
-                            } else {
-                                return href;
-                            }
-                        } else {
-                            return new URL(href, base).href
-                        }
-                    };
-                    return {
-                        is: 'a',
-                        target: isAbsolute(href) && isExternal(href) ? '_blank' : '_self',
-                        href: resolvedHref(),
-                        rel: isAbsolute(href) && isExternal(href) ? 'noreferrer' : undefined
-                    };
-                }
 
-                // Just return a boring link with other attrs
-                // @NOTE: This is for scroll achors as it uses the id
+            // Just return a boring link with other attrs
+            // @NOTE: This is for scroll achors as it uses the id
+            if (!href) {
                 return {
                     is: 'a',
                     falseLink: true
                 };
             }
+
+            // @TODO: Remove this once we move to vue only
+            if (isAnonymised) {
+                throw new Error('Still using anon_url in Python!');
+            }
+
             return {
-                is: 'router-link',
-                to: { name: href }
+                is: 'a',
+                target: isAbsolute && isExternal ? '_blank' : '_self',
+                href: (() => {
+                    if (isHashPath) {
+                        const { location } = window;
+                        if (location.hash.length === 0) {
+                            // Current location might be `url#`
+                            const newHash = location.href.endsWith('#') ? href.substr(1) : href;
+                            return location.href + newHash;
+                        }
+                        return location.href.replace(location.hash, '') + href;
+                    }
+                    if (isIRC) {
+                        return href;
+                    }
+                    if (isAbsolute) {
+                        if (isExternal) {
+                            return anonymisedHref;
+                        }
+                        return href;
+                    }
+                    return new URL(href, base).href;
+                })(),
+                rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
     },
-    template: `#app-link-template`
+    template: '#app-link-template'
 });
 </script>
 <style>
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index 9c6c9f0bdb..bb7e3ef0c0 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    store,
     props: {
         to: [String, Object],
         href: String,
@@ -22,80 +23,109 @@ Vue.component('app-link', {
         placeholder: {
             type: String,
             default: 'indexer-to-name'
-        }
+        },
+        base: String
     },
     computed: {
+        config() {
+            return this.$store.state.config;
+        },
+        computedBase() {
+            // Return prop before HTML element to allow tests to mock
+            if (this.base) {
+                return this.base;
+            }
+
+            return document.getElementsByTagName('base')[0].getAttribute('href');
+        },
+        computedHref() {
+            const { indexerId, placeholder } = this;
+            if (indexerId && placeholder) {
+                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+            }
+            return this.href;
+        },
+        isIRC() {
+            return this.computedHref.startsWith('irc://');
+        },
+        isAbsolute() {
+            const href = this.computedHref;
+            return /^[a-z][a-z0-9+.-]*:/.test(href);
+        },
+        isExternal() {
+            const base = this.computedBase;
+            const href = this.computedHref;
+            return !href.startsWith(base) && !href.startsWith('webcal://');
+        },
+        isHashPath() {
+            return this.computedHref.startsWith('#');
+        },
+        isAnonymised() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect && href.startsWith(anonRedirect);
+        },
+        anonymisedHref() {
+            const { anonRedirect } = this.config;
+            const href = this.computedHref;
+            return anonRedirect ? anonRedirect + href : href;
+        },
         linkProperties() {
-            const {to, indexerId, placeholder} = this;
-            const href = indexerId && placeholder ? this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId)) : this.href;
-            const base = document.getElementsByTagName('base')[0].getAttribute('href');
-            const isIRC = url => {
-                return url.startsWith('irc://');
-            };
-            const isAbsolute = url => {
-                return /^[a-z][a-z0-9+.-]*:/.test(url);
+            const { to, isIRC, isAbsolute, isExternal, isHashPath, isAnonymised, anonymisedHref } = this;
+            const base = this.computedBase;
+            const href = this.computedHref;
+
+            // Return normal router-link
+            if (to) {
+                return {
+                    is: 'router-link',
+                    to: { name: href }
+                };
             }
-            const isExternal = url => {
-                return !url.startsWith(base) && !url.startsWith('webcal://');
-            };
-            const isHashPath = url => {
-                return url.startsWith('#')
-            };
-            const isAnonymised = url => {
-                return MEDUSA.config.anonRedirect && url.startsWith(MEDUSA.config.anonRedirect);
-            };
-            const anonymise = url => MEDUSA.config.anonRedirect ? MEDUSA.config.anonRedirect + url : url;
-            if (!to) {
-                if (href) {
-                    // @TODO: Remove this once we move to vue only
-                    if (isAnonymised(href)) {
-                        throw new Error('Still using anon_url in Python!');
-                    }
-                    const resolvedHref = () => {
-                        if (isHashPath(href)) {
-                            const {location} = window;
-                            if (location.hash.length === 0) {
-                                // current location might be `url#`
-                                const newHash = location.href.endsWith('#') ? href.substr(1) : href;
-                                return location.href + newHash;
-                            }
-                            return location.href.replace(location.hash, '') + href;
-                        }
-                        if (isIRC(href)) {
-                            return href;
-                        }
-                        if (isAbsolute(href)) {
-                            if (isExternal(href)) {
-                                return anonymise(href)
-                            } else {
-                                return href;
-                            }
-                        } else {
-                            return new URL(href, base).href
-                        }
-                    };
-                    return {
-                        is: 'a',
-                        target: isAbsolute(href) && isExternal(href) ? '_blank' : '_self',
-                        href: resolvedHref(),
-                        rel: isAbsolute(href) && isExternal(href) ? 'noreferrer' : undefined
-                    };
-                }
 
-                // Just return a boring link with other attrs
-                // @NOTE: This is for scroll achors as it uses the id
+            // Just return a boring link with other attrs
+            // @NOTE: This is for scroll achors as it uses the id
+            if (!href) {
                 return {
                     is: 'a',
                     falseLink: true
                 };
             }
+
+            // @TODO: Remove this once we move to vue only
+            if (isAnonymised) {
+                throw new Error('Still using anon_url in Python!');
+            }
+
             return {
-                is: 'router-link',
-                to: { name: href }
+                is: 'a',
+                target: isAbsolute && isExternal ? '_blank' : '_self',
+                href: (() => {
+                    if (isHashPath) {
+                        const { location } = window;
+                        if (location.hash.length === 0) {
+                            // Current location might be `url#`
+                            const newHash = location.href.endsWith('#') ? href.substr(1) : href;
+                            return location.href + newHash;
+                        }
+                        return location.href.replace(location.hash, '') + href;
+                    }
+                    if (isIRC) {
+                        return href;
+                    }
+                    if (isAbsolute) {
+                        if (isExternal) {
+                            return anonymisedHref;
+                        }
+                        return href;
+                    }
+                    return new URL(href, base).href;
+                })(),
+                rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
     },
-    template: `#app-link-template`
+    template: '#app-link-template'
 });
 </script>
 <style>

From 2886218339fdffb05d78ae8517896048f9a5d8c3 Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Tue, 3 Jul 2018 12:04:46 +0930
Subject: [PATCH 2/9] remove isAnonymised

---
 themes-default/slim/views/vue-components/app-link.mako | 10 ----------
 themes/dark/templates/vue-components/app-link.mako     | 10 ----------
 themes/light/templates/vue-components/app-link.mako    | 10 ----------
 3 files changed, 30 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index bb7e3ef0c0..c94639f4fc 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -60,11 +60,6 @@ Vue.component('app-link', {
         isHashPath() {
             return this.computedHref.startsWith('#');
         },
-        isAnonymised() {
-            const { anonRedirect } = this.config;
-            const href = this.computedHref;
-            return anonRedirect && href.startsWith(anonRedirect);
-        },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
@@ -92,11 +87,6 @@ Vue.component('app-link', {
                 };
             }
 
-            // @TODO: Remove this once we move to vue only
-            if (isAnonymised) {
-                throw new Error('Still using anon_url in Python!');
-            }
-
             return {
                 is: 'a',
                 target: isAbsolute && isExternal ? '_blank' : '_self',
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index bb7e3ef0c0..c94639f4fc 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -60,11 +60,6 @@ Vue.component('app-link', {
         isHashPath() {
             return this.computedHref.startsWith('#');
         },
-        isAnonymised() {
-            const { anonRedirect } = this.config;
-            const href = this.computedHref;
-            return anonRedirect && href.startsWith(anonRedirect);
-        },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
@@ -92,11 +87,6 @@ Vue.component('app-link', {
                 };
             }
 
-            // @TODO: Remove this once we move to vue only
-            if (isAnonymised) {
-                throw new Error('Still using anon_url in Python!');
-            }
-
             return {
                 is: 'a',
                 target: isAbsolute && isExternal ? '_blank' : '_self',
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index bb7e3ef0c0..c94639f4fc 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -60,11 +60,6 @@ Vue.component('app-link', {
         isHashPath() {
             return this.computedHref.startsWith('#');
         },
-        isAnonymised() {
-            const { anonRedirect } = this.config;
-            const href = this.computedHref;
-            return anonRedirect && href.startsWith(anonRedirect);
-        },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
@@ -92,11 +87,6 @@ Vue.component('app-link', {
                 };
             }
 
-            // @TODO: Remove this once we move to vue only
-            if (isAnonymised) {
-                throw new Error('Still using anon_url in Python!');
-            }
-
             return {
                 is: 'a',
                 target: isAbsolute && isExternal ? '_blank' : '_self',

From ab8e5346d70821bb052c815bf16c9795ab93f198 Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Tue, 3 Jul 2018 12:06:26 +0930
Subject: [PATCH 3/9] moved template property to top

---
 themes-default/slim/views/vue-components/app-link.mako | 4 ++--
 themes/dark/templates/vue-components/app-link.mako     | 4 ++--
 themes/light/templates/vue-components/app-link.mako    | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index c94639f4fc..95456d5795 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    template: '#app-link-template',
     store,
     props: {
         to: [String, Object],
@@ -114,8 +115,7 @@ Vue.component('app-link', {
                 rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
-    },
-    template: '#app-link-template'
+    }
 });
 </script>
 <style>
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index c94639f4fc..95456d5795 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    template: '#app-link-template',
     store,
     props: {
         to: [String, Object],
@@ -114,8 +115,7 @@ Vue.component('app-link', {
                 rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
-    },
-    template: '#app-link-template'
+    }
 });
 </script>
 <style>
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index c94639f4fc..95456d5795 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -13,6 +13,7 @@
 <script>
 Vue.component('app-link', {
     name: 'app-link',
+    template: '#app-link-template',
     store,
     props: {
         to: [String, Object],
@@ -114,8 +115,7 @@ Vue.component('app-link', {
                 rel: isAbsolute && isExternal ? 'noreferrer' : undefined
             };
         }
-    },
-    template: '#app-link-template'
+    }
 });
 </script>
 <style>

From ac325f1d22fb6f8412de739e748828cd7569663e Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Tue, 3 Jul 2018 12:07:43 +0930
Subject: [PATCH 4/9] remove redundant component name

---
 themes-default/slim/views/vue-components/app-link.mako | 2 +-
 themes/dark/templates/vue-components/app-link.mako     | 2 +-
 themes/light/templates/vue-components/app-link.mako    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index 95456d5795..11647e8678 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -11,7 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component('app-link', {
+Vue.component({
     name: 'app-link',
     template: '#app-link-template',
     store,
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index 95456d5795..11647e8678 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -11,7 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component('app-link', {
+Vue.component({
     name: 'app-link',
     template: '#app-link-template',
     store,
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index 95456d5795..11647e8678 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -11,7 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component('app-link', {
+Vue.component({
     name: 'app-link',
     template: '#app-link-template',
     store,

From d806089f26adc036d3863ad894f6d3bcd1e20264 Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Tue, 3 Jul 2018 12:13:38 +0930
Subject: [PATCH 5/9] remove MEDUSA from component

---
 .../slim/views/vue-components/app-link.mako     | 17 ++++++++++++++---
 .../dark/templates/vue-components/app-link.mako | 17 ++++++++++++++---
 .../templates/vue-components/app-link.mako      | 17 ++++++++++++++---
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index 11647e8678..d99610567e 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -31,6 +31,17 @@ Vue.component({
         config() {
             return this.$store.state.config;
         },
+        indexerName() {
+            const { indexerId, config } = this;
+            if (!indexerId) {
+                return '';
+            }
+            return Object.keys(config.indexers).filter(indexer => {
+                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
+                    return config.indexers[indexer].name;
+                }
+            })[0];
+        },
         computedBase() {
             // Return prop before HTML element to allow tests to mock
             if (this.base) {
@@ -40,11 +51,11 @@ Vue.component({
             return document.getElementsByTagName('base')[0].getAttribute('href');
         },
         computedHref() {
-            const { indexerId, placeholder } = this;
+            const { href, indexerId, placeholder, indexerName } = this;
             if (indexerId && placeholder) {
-                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+                return href.replace(placeholder, indexerName);
             }
-            return this.href;
+            return href;
         },
         isIRC() {
             return this.computedHref.startsWith('irc://');
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index 11647e8678..d99610567e 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -31,6 +31,17 @@ Vue.component({
         config() {
             return this.$store.state.config;
         },
+        indexerName() {
+            const { indexerId, config } = this;
+            if (!indexerId) {
+                return '';
+            }
+            return Object.keys(config.indexers).filter(indexer => {
+                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
+                    return config.indexers[indexer].name;
+                }
+            })[0];
+        },
         computedBase() {
             // Return prop before HTML element to allow tests to mock
             if (this.base) {
@@ -40,11 +51,11 @@ Vue.component({
             return document.getElementsByTagName('base')[0].getAttribute('href');
         },
         computedHref() {
-            const { indexerId, placeholder } = this;
+            const { href, indexerId, placeholder, indexerName } = this;
             if (indexerId && placeholder) {
-                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+                return href.replace(placeholder, indexerName);
             }
-            return this.href;
+            return href;
         },
         isIRC() {
             return this.computedHref.startsWith('irc://');
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index 11647e8678..d99610567e 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -31,6 +31,17 @@ Vue.component({
         config() {
             return this.$store.state.config;
         },
+        indexerName() {
+            const { indexerId, config } = this;
+            if (!indexerId) {
+                return '';
+            }
+            return Object.keys(config.indexers).filter(indexer => {
+                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
+                    return config.indexers[indexer].name;
+                }
+            })[0];
+        },
         computedBase() {
             // Return prop before HTML element to allow tests to mock
             if (this.base) {
@@ -40,11 +51,11 @@ Vue.component({
             return document.getElementsByTagName('base')[0].getAttribute('href');
         },
         computedHref() {
-            const { indexerId, placeholder } = this;
+            const { href, indexerId, placeholder, indexerName } = this;
             if (indexerId && placeholder) {
-                return this.href.replace(placeholder, MEDUSA.config.indexers.indexerIdToName(indexerId));
+                return href.replace(placeholder, indexerName);
             }
-            return this.href;
+            return href;
         },
         isIRC() {
             return this.computedHref.startsWith('irc://');

From e313e43904afd4a58e87cf8677df716737ea8b7f Mon Sep 17 00:00:00 2001
From: Alexis Tyler <xo@wvvw.me>
Date: Wed, 4 Jul 2018 19:20:35 +0930
Subject: [PATCH 6/9] add review code

---
 .../slim/views/vue-components/app-link.mako          | 12 +++---------
 themes/dark/templates/vue-components/app-link.mako   | 12 +++---------
 themes/light/templates/vue-components/app-link.mako  | 12 +++---------
 3 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index d99610567e..2a2fe63213 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -32,15 +32,9 @@ Vue.component({
             return this.$store.state.config;
         },
         indexerName() {
-            const { indexerId, config } = this;
-            if (!indexerId) {
-                return '';
-            }
-            return Object.keys(config.indexers).filter(indexer => {
-                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
-                    return config.indexers[indexer].name;
-                }
-            })[0];
+            const { indexers } = config.indexers.config;
+            // Returns `undefined` if not found
+            return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },
         computedBase() {
             // Return prop before HTML element to allow tests to mock
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index d99610567e..2a2fe63213 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -32,15 +32,9 @@ Vue.component({
             return this.$store.state.config;
         },
         indexerName() {
-            const { indexerId, config } = this;
-            if (!indexerId) {
-                return '';
-            }
-            return Object.keys(config.indexers).filter(indexer => {
-                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
-                    return config.indexers[indexer].name;
-                }
-            })[0];
+            const { indexers } = config.indexers.config;
+            // Returns `undefined` if not found
+            return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },
         computedBase() {
             // Return prop before HTML element to allow tests to mock
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index d99610567e..2a2fe63213 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -32,15 +32,9 @@ Vue.component({
             return this.$store.state.config;
         },
         indexerName() {
-            const { indexerId, config } = this;
-            if (!indexerId) {
-                return '';
-            }
-            return Object.keys(config.indexers).filter(indexer => {
-                if (config.indexers[indexer].id === parseInt(indexerId, 10)) {
-                    return config.indexers[indexer].name;
-                }
-            })[0];
+            const { indexers } = config.indexers.config;
+            // Returns `undefined` if not found
+            return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },
         computedBase() {
             // Return prop before HTML element to allow tests to mock

From 76d140a1d5922298f8fc1533ce3dd7a097953fe1 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Wed, 4 Jul 2018 19:04:45 +0300
Subject: [PATCH 7/9] Fix component registration

The first argument for `Vue.component` must be the name.
It won't register the component without it.
---
 themes-default/slim/views/vue-components/app-link.mako | 3 +--
 themes/dark/templates/vue-components/app-link.mako     | 3 +--
 themes/light/templates/vue-components/app-link.mako    | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index 2a2fe63213..f621959cab 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -11,8 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component({
-    name: 'app-link',
+Vue.component('app-link', {
     template: '#app-link-template',
     store,
     props: {
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index 2a2fe63213..f621959cab 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -11,8 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component({
-    name: 'app-link',
+Vue.component('app-link', {
     template: '#app-link-template',
     store,
     props: {
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index 2a2fe63213..f621959cab 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -11,8 +11,7 @@
     </component>
 </script>
 <script>
-Vue.component({
-    name: 'app-link',
+Vue.component('app-link', {
     template: '#app-link-template',
     store,
     props: {

From 2de7d0830e0b3df351d1b059637ea14dc79559c0 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Wed, 4 Jul 2018 19:05:19 +0300
Subject: [PATCH 8/9] `indexerName` computed prop was missing some code

---
 themes-default/slim/views/vue-components/app-link.mako | 2 ++
 themes/dark/templates/vue-components/app-link.mako     | 2 ++
 themes/light/templates/vue-components/app-link.mako    | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index f621959cab..5d6b6c1292 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -31,7 +31,9 @@ Vue.component('app-link', {
             return this.$store.state.config;
         },
         indexerName() {
+            const { config, indexerId } = this;
             const { indexers } = config.indexers.config;
+            if (!indexerId) return undefined;
             // Returns `undefined` if not found
             return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index f621959cab..5d6b6c1292 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -31,7 +31,9 @@ Vue.component('app-link', {
             return this.$store.state.config;
         },
         indexerName() {
+            const { config, indexerId } = this;
             const { indexers } = config.indexers.config;
+            if (!indexerId) return undefined;
             // Returns `undefined` if not found
             return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index f621959cab..5d6b6c1292 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -31,7 +31,9 @@ Vue.component('app-link', {
             return this.$store.state.config;
         },
         indexerName() {
+            const { config, indexerId } = this;
             const { indexers } = config.indexers.config;
+            if (!indexerId) return undefined;
             // Returns `undefined` if not found
             return Object.keys(indexers).find(indexer => indexers[indexer].id === parseInt(indexerId, 10));
         },

From e13d1af5429b2954333886a63e39e036a459db77 Mon Sep 17 00:00:00 2001
From: sharkykh <sharkykh@gmail.com>
Date: Wed, 4 Jul 2018 19:11:21 +0300
Subject: [PATCH 9/9] Fix null computedHref when href is loaded after creation

```
vue.js:597 [Vue warn]: Error in render: "TypeError: Cannot read property 'startsWith' of null"

found in

---> <AppLink>
       <Config>
         <Root>
```
---
 themes-default/slim/views/vue-components/app-link.mako | 5 +++++
 themes/dark/templates/vue-components/app-link.mako     | 5 +++++
 themes/light/templates/vue-components/app-link.mako    | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/themes-default/slim/views/vue-components/app-link.mako b/themes-default/slim/views/vue-components/app-link.mako
index 5d6b6c1292..b6b3058841 100644
--- a/themes-default/slim/views/vue-components/app-link.mako
+++ b/themes-default/slim/views/vue-components/app-link.mako
@@ -53,23 +53,28 @@ Vue.component('app-link', {
             return href;
         },
         isIRC() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('irc://');
         },
         isAbsolute() {
             const href = this.computedHref;
+            if (!href) return;
             return /^[a-z][a-z0-9+.-]*:/.test(href);
         },
         isExternal() {
             const base = this.computedBase;
             const href = this.computedHref;
+            if (!href) return;
             return !href.startsWith(base) && !href.startsWith('webcal://');
         },
         isHashPath() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('#');
         },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
+            if (!href) return;
             return anonRedirect ? anonRedirect + href : href;
         },
         linkProperties() {
diff --git a/themes/dark/templates/vue-components/app-link.mako b/themes/dark/templates/vue-components/app-link.mako
index 5d6b6c1292..b6b3058841 100644
--- a/themes/dark/templates/vue-components/app-link.mako
+++ b/themes/dark/templates/vue-components/app-link.mako
@@ -53,23 +53,28 @@ Vue.component('app-link', {
             return href;
         },
         isIRC() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('irc://');
         },
         isAbsolute() {
             const href = this.computedHref;
+            if (!href) return;
             return /^[a-z][a-z0-9+.-]*:/.test(href);
         },
         isExternal() {
             const base = this.computedBase;
             const href = this.computedHref;
+            if (!href) return;
             return !href.startsWith(base) && !href.startsWith('webcal://');
         },
         isHashPath() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('#');
         },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
+            if (!href) return;
             return anonRedirect ? anonRedirect + href : href;
         },
         linkProperties() {
diff --git a/themes/light/templates/vue-components/app-link.mako b/themes/light/templates/vue-components/app-link.mako
index 5d6b6c1292..b6b3058841 100644
--- a/themes/light/templates/vue-components/app-link.mako
+++ b/themes/light/templates/vue-components/app-link.mako
@@ -53,23 +53,28 @@ Vue.component('app-link', {
             return href;
         },
         isIRC() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('irc://');
         },
         isAbsolute() {
             const href = this.computedHref;
+            if (!href) return;
             return /^[a-z][a-z0-9+.-]*:/.test(href);
         },
         isExternal() {
             const base = this.computedBase;
             const href = this.computedHref;
+            if (!href) return;
             return !href.startsWith(base) && !href.startsWith('webcal://');
         },
         isHashPath() {
+            if (!this.computedHref) return;
             return this.computedHref.startsWith('#');
         },
         anonymisedHref() {
             const { anonRedirect } = this.config;
             const href = this.computedHref;
+            if (!href) return;
             return anonRedirect ? anonRedirect + href : href;
         },
         linkProperties() {