Merge branch 'main' into twitter-embed

README.md

@@ -63,6 +63,15 @@ visitors.
 (Technically the # and @ in the URL fragment should probably be escaped, but in
 practice for legibility we bend the rules and include it verbatim)
 
+### Optional parameters
+
+https://matrix.to/#/#matrix:matrix.org?web-instance[element.io]=chat.mozilla.org
+
+- `client`, e.g. `client=im.fluffychat`, `client=element.io`
+- `web-instance[]`, e.g. `web-instance[element.io]=chat.mozilla.org`.
+    - For [matrix.to](https://matrix.to/), we have this list of [trusted web instances](https://github.com/matrix-org/matrix.to/blob/260d2b61cdb6b0e4318bc1bd59b4e2deef86d2a5/src/open/clients/Element.js#L20-L25) configured.
+-  `via`, e.g. `via=mozilla.org`
+
 You can discuss matrix.to in
 [`#matrix.to:matrix.org`](https://matrix.to/#/#matrix.to:matrix.org)
 

images/client-icons/org.kde.neochat.svg

@@ -0,0 +1,34 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51 12C51 10.8954 50.1046 10 49 10H13C11.8954 10 11 10.8954 11 12V38C11 39.1046 11.8954 40 13 40H30.5858C30.851 40 31.1054 40.1054 31.2929 40.2929L39.2929 48.2929C39.9229 48.9229 41 48.4767 41 47.5858V41C41 40.4477 41.4477 40 42 40H49C50.1046 40 51 39.1046 51 38V12Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 37V38C11 39.1046 11.8954 40 13 40H30.5858C30.851 40 31.1054 40.1054 31.2929 40.2929L39.2929 48.2929C39.9229 48.9229 41 48.4767 41 47.5858V46.5858C41 47.4767 39.9229 47.9229 39.2929 47.2929L31.2929 39.2929C31.1054 39.1054 30.851 39 30.5858 39H13C11.8954 39 11 38.1046 11 37ZM41 41C41 40.4477 41.4477 40 42 40H49C50.1046 40 51 39.1046 51 38V37C51 38.1046 50.1046 39 49 39H42C41.4477 39 41 39.4477 41 40V41Z" fill="#000405" fill-opacity="0.1"/>
+<path d="M8 10C8 8.89543 8.89543 8 10 8H46C47.1046 8 48 8.89543 48 10V36C48 37.1046 47.1046 38 46 38H28.4142C28.149 38 27.8946 38.1054 27.7071 38.2929L19.7071 46.2929C19.0771 46.9229 18 46.4767 18 45.5858V39C18 38.4477 17.5523 38 17 38H10C8.89543 38 8 37.1046 8 36V10Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 35V36C8 37.1046 8.89543 38 10 38H17C17.5523 38 18 38.4477 18 39V38C18 37.4477 17.5523 37 17 37H10C8.89543 37 8 36.1046 8 35ZM18 44.5858V45.5858C18 46.4767 19.0771 46.9229 19.7071 46.2929L27.7071 38.2929C27.8946 38.1054 28.149 38 28.4142 38H46C47.1046 38 48 37.1046 48 36V35C48 36.1046 47.1046 37 46 37H28.4142C28.149 37 27.8946 37.1054 27.7071 37.2929L19.7071 45.2929C19.0771 45.9229 18 45.4767 18 44.5858Z" fill="#031C5A" fill-opacity="0.1"/>
+<rect x="13" y="14" width="30" height="4" rx="2" fill="url(#paint2_linear)"/>
+<rect x="12.5" y="13.5" width="31" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
+<rect x="13" y="21" width="25" height="4" rx="2" fill="url(#paint3_linear)"/>
+<rect x="12.5" y="20.5" width="26" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
+<rect x="13" y="28" width="20" height="4" rx="2" fill="url(#paint4_linear)"/>
+<rect x="12.5" y="27.5" width="21" height="5" rx="2.5" stroke="#004E6E" stroke-opacity="0.1"/>
+<defs>
+<linearGradient id="paint0_linear" x1="51" y1="10" x2="11" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6EB4D9"/>
+<stop offset="1" stop-color="#004E6E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="8" y1="8" x2="48" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44F0D3"/>
+<stop offset="1" stop-color="#3DAEE9"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="43" y1="18" x2="19.5854" y2="-11.2683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D1D5D9"/>
+<stop offset="1" stop-color="#FCFFFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="38" y1="25" x2="14.02" y2="0.0208158" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D1D5D9"/>
+<stop offset="1" stop-color="#FCFFFF"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="33" y1="32" x2="9.39344" y2="12.3279" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D1D5D9"/>
+<stop offset="1" stop-color="#FCFFFF"/>
+</linearGradient>
+</defs>
+</svg>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix.to",
-  "version": "1.2.12",
+  "version": "1.2.16",
   "type": "module",
   "license": "Apache-2.0",
   "engines": {

scripts/build.js

@@ -146,7 +146,7 @@ function buildAppleAssociatedAppsFile(clients) {
 async function buildCss(entryPath, targetDir, assets) {
     entryPath = path.join(projectDir, entryPath);
     const assetUrlMapper = ({absolutePath}) => {
-        const relPath = absolutePath.substr(projectDir.length);
+        const relPath = absolutePath.slice(projectDir.length);
         return assets.resolve(path.join(targetDir, relPath));
     };
 
@@ -211,7 +211,7 @@ class AssetMap {
             if (!resourcePath.startsWith(this._targetDir)) {
                 throw new Error(`absolute path ${resourcePath} that is not within target dir ${this._targetDir}`);
             }
-            relPath = resourcePath.substr(this._targetDir.length + 1); // + 1 for the /
+            relPath = resourcePath.slice(this._targetDir.length + 1); // + 1 for the /
         }
         return relPath;
     }
@@ -267,7 +267,7 @@ class AssetMap {
         if (!assetMap.directory.startsWith(this.directory)) {
             throw new Error(`map directory doesn't start with this directory: ${assetMap.directory} ${this.directory}`);
         }
-        const relSubRoot = assetMap.directory.substr(this.directory.length + 1);
+        const relSubRoot = assetMap.directory.slice(this.directory.length + 1);
         for (const [key, value] of assetMap._assets.entries()) {
             this._assets.set(path.join(relSubRoot, key), path.join(relSubRoot, value));
         }

src/Link.js

@@ -45,8 +45,8 @@ function getWebInstanceMap(queryParams) {
     const postfix = "]";
     const webInstanceParams = queryParams.filter(([key]) => key.startsWith(prefix) && key.endsWith(postfix));
     const webInstances = webInstanceParams.map(([key, value]) => {
-        const noPrefix = key.substr(prefix.length);
+        const noPrefix = key.slice(prefix.length);
-        const clientId = noPrefix.substr(0, noPrefix.length - postfix.length);
+        const clientId = noPrefix.slice(0, -postfix.length);
         return [clientId, value];
     });
     return webInstances.reduce((map, [clientId, host]) => {
@@ -110,7 +110,7 @@ export class Link {
         if (!linkStr.startsWith("#/")) {
             return null;
         }
-        linkStr = linkStr.substr(2);
+        linkStr = linkStr.slice(2);
         const [identifier, eventId] = linkStr.split("/");
 
         let viaServers = [];

src/RootViewModel.js

@@ -66,7 +66,7 @@ export class RootViewModel extends ViewModel {
         this.createLinkViewModel = null;
         let newLink;
         if (hash.startsWith("#/policy/")) {
-            const server = hash.substr(9);
+            const server = hash.slice(9);
             this._updateChildVMs(null, oldLink);
             this.loadServerPolicyViewModel = new LoadServerPolicyViewModel(this.childOptions({server}));
             this.loadServerPolicyViewModel.load();

src/open/ClientViewModel.js

@@ -139,7 +139,7 @@ export class ClientViewModel extends ViewModel {
             let label = preferredWebInstance;
             const subDomainIdx = preferredWebInstance.lastIndexOf(".", preferredWebInstance.lastIndexOf("."));
             if (subDomainIdx !== -1) {
-                label = preferredWebInstance.substr(preferredWebInstance.length - subDomainIdx + 1);
+                label = preferredWebInstance.slice(preferredWebInstance.length - subDomainIdx + 1);
             }
             return `Hosted by ${label}`;
         }

src/open/clients/Element.js

@@ -52,18 +52,23 @@ export class Element {
         let fragmentPath;
         switch (link.kind) {
             case LinkKind.User:
-                fragmentPath = `user/${link.identifier}`;
+                fragmentPath = `user/${encodeURIComponent(link.identifier)}`;
                 break;
             case LinkKind.Room:
-                fragmentPath = `room/${link.identifier}`;
+                fragmentPath = `room/${encodeURIComponent(link.identifier)}`;
                 break;
             case LinkKind.Group:
-                fragmentPath = `group/${link.identifier}`;
+                fragmentPath = `group/${encodeURIComponent(link.identifier)}`;
                 break;
             case LinkKind.Event:
-                fragmentPath = `room/${link.identifier}/${link.eventId}`;
+                fragmentPath = `room/${encodeURIComponent(link.identifier)}/${encodeURIComponent(link.eventId)}`;
                 break;
         }
+
+        if ((link.kind === LinkKind.Event || link.kind === LinkKind.Room) && link.servers.length > 0) {
+            fragmentPath += '?' + link.servers.map(server => `via=${encodeURIComponent(server)}`).join('&');
+        }
+
         const isWebPlatform = platform === Platform.DesktopWeb || platform === Platform.MobileWeb;
         if (isWebPlatform || platform === Platform.iOS) {
             let instanceHost = trustedWebInstances[0];

src/open/clients/Fluffychat.js

@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Maturity, Platform, LinkKind, FlathubLink, AppleStoreLink, PlayStoreLink, WebsiteLink } from "../types.js";
+import { Maturity, Platform, LinkKind, FlathubLink, AppleStoreLink, PlayStoreLink, FDroidLink, WebsiteLink } from "../types.js";
 
 /**
  * Information on how to deep link to a given matrix client.
@@ -44,8 +44,14 @@ export class Fluffychat {
     getInstallLinks(platform) {
         switch (platform) {
             case Platform.iOS: return [new AppleStoreLink("fluffychat", "id1551469600")];
-            case Platform.Android: return [new PlayStoreLink("chat.fluffy.fluffychat")];
+            case Platform.Android: return [
-            case Platform.Linux: return [new FlathubLink("im.fluffychat.Fluffychat")];
+                new PlayStoreLink("chat.fluffy.fluffychat"),
+                new FDroidLink('chat.fluffy.fluffychat'),
+            ];
+            case Platform.Linux: return [
+                new FlathubLink("im.fluffychat.Fluffychat"),
+                new WebsiteLink("https://fluffychat.im"),
+            ];
             default: return [new WebsiteLink("https://fluffychat.im")];
         }
     }
@@ -73,7 +79,13 @@ export class Fluffychat {
         }
     }
 
-    getDeepLink(platform, link) { }
+    getDeepLink(platform, link) {
+        switch (platform) {
+            case Platform.Android: return `im.fluffychat://chat/${link.identifier}`;
+            case Platform.iOS: return `im.fluffychat://chat/${link.identifier}`;
+            default: break;
+        }
+    }
     canInterceptMatrixToLinks(platform) {
         return platform === Platform.Android;
     }

src/open/clients/NeoChat.js

@@ -0,0 +1,79 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2021 Carl Schwan <carl@carlschwan.eu>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js";
+
+export class NeoChat {
+    get id() { return "neochat"; }
+    get name() { return "NeoChat"; }
+    get icon() { return "images/client-icons/org.kde.neochat.svg"; }
+    get author() { return "Tobias Fella and Carl Schwan"; }
+    get homepage() { return "https://apps.kde.org/neochat/"; }
+    get platforms() { return [Platform.Linux]; }
+    get description() { return 'NeoChat is a convergent, cross-platform Matrix client.'; }
+    getMaturity(platform) { return Maturity.Beta; }
+    getDeepLink(platform, link) {
+        if (platform === Platform.Linux || platform === Platform.Windows) {
+            let identifier = encodeURIComponent(link.identifier.substring(1));
+            let isRoomid = link.identifier.substring(0, 1) === '!';
+            let fragmentPath;
+            switch (link.kind) {
+                case LinkKind.User:
+                    fragmentPath = `u/${identifier}?action=chat`;
+                    break;
+                case LinkKind.Room:
+                case LinkKind.Event:
+                    if (isRoomid)
+                        fragmentPath = `roomid/${identifier}`;
+                    else
+                        fragmentPath = `r/${identifier}`;
+
+                    if (link.kind === LinkKind.Event)
+                        fragmentPath += `/e/${encodeURIComponent(link.eventId.substring(1))}`;
+                    fragmentPath += '?action=join';
+                    fragmentPath += link.servers.map(server => `&via=${encodeURIComponent(server)}`).join('');
+                    break;
+                case LinkKind.Group:
+                    return;
+            }
+            return `matrix:${fragmentPath}`;
+        }
+    }
+    canInterceptMatrixToLinks(platform) { return false; }
+
+    getLinkInstructions(platform, link) {
+        switch (link.kind) {
+            case LinkKind.User: return [`Type `, style.code(`/invite ${link.identifier}`)];
+            case LinkKind.Room: return [`Type `, style.code(`/join ${link.identifier}`)];
+        }
+    }
+
+    getCopyString(platform, link) {
+        switch (link.kind) {
+            case LinkKind.User: return `/invite ${link.identifier}`;
+            case LinkKind.Room: return `/join ${link.identifier}`;
+        }
+    }
+
+    getInstallLinks(platform) {
+        if (platform === Platform.Linux) {
+            return [new FlathubLink("org.kde.neochat")];
+        }
+    }
+
+    getPreferredWebInstance(link) {}
+}

src/open/clients/Nheko.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js";
+import {Maturity, Platform, LinkKind, FlathubLink, WebsiteLink, style} from "../types.js";
 
 /**
  * Information on how to deep link to a given matrix client.
@@ -72,8 +72,12 @@ export class Nheko {
     }
 
     getInstallLinks(platform) {
-        if (platform === Platform.Linux) {
+        switch (platform) {
-            return [new FlathubLink("io.github.NhekoReborn.Nheko")];
+            case Platform.Linux: return [
+                new FlathubLink("io.github.NhekoReborn.Nheko"),
+                new WebsiteLink("https://github.com/Nheko-Reborn/nheko/releases/latest"),
+            ];
+            default: return [new WebsiteLink("https://github.com/Nheko-Reborn/nheko/releases/latest")];
         }
     }
 

src/open/clients/Quaternion.js

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js";
+import {Maturity, Platform, LinkKind, FlathubLink, WebsiteLink, style} from "../types.js";
 
 export class Quaternion {
     get id() { return "quaternion"; }
     get name() { return "Quaternion"; }
     get icon() { return "images/client-icons/quaternion.svg"; }
-    get author() { return "Felix Rohrbach"; }
+    get author() { return "The Quotient project"; }
-    get homepage() { return "https://github.com/Fxrh/Quaternion"; }
+    get homepage() { return "https://github.com/quotient-im/Quaternion"; }
     get platforms() { return [Platform.Windows, Platform.macOS, Platform.Linux]; }
     get description() { return 'Qt5 and C++ cross-platform desktop Matrix client.'; }
     getMaturity(platform) { return Maturity.Beta; }
@@ -43,8 +43,12 @@ export class Quaternion {
     }
 
     getInstallLinks(platform) {
-        if (platform === Platform.Linux) {
+        switch (platform) {
-            return [new FlathubLink("com.github.quaternion")];
+            case Platform.Linux: return [
+                new FlathubLink("com.github.quaternion"),
+                new WebsiteLink("https://github.com/quotient-im/Quaternion/releases/latest"),
+            ];
+            default: return [new WebsiteLink("https://github.com/quotient-im/Quaternion/releases/latest")];
         }
     }
 

src/open/clients/Syphon.js

@@ -0,0 +1,91 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2022 0x1a8510f2 <admin@0x1a8510f2.space>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Maturity, Platform, LinkKind, FlathubLink, AppleStoreLink, PlayStoreLink, FDroidLink, WebsiteLink } from "../types.js";
+
+export class Syphon {
+    get id() { return "org.syphon.syphon"; }
+    get name() { return "Syphon"; }
+    get icon() { return "images/client-icons/syphon.svg"; }
+    get author() { return "Taylor Ereio"; }
+    get homepage() { return "https://syphon.org"; }
+    get platforms() {
+        return [
+            Platform.Android,
+            Platform.iOS,
+            Platform.Linux,
+            Platform.Windows,
+            Platform.macOS,
+            //Platform.DesktopWeb, // Supported by flutter but no builds yet
+        ];
+    }
+    get description() {
+        return "chat with your privacy and freedom intact";
+    }
+
+    getMaturity(platform) {
+        return Maturity.Alpha;
+    }
+
+    getInstallLinks(platform) {
+        switch (platform) {
+            case Platform.Android: return [
+                new PlayStoreLink("org.tether.tether"),
+                new FDroidLink("org.tether.tether"),
+            ];
+            case Platform.iOS: return [
+                new AppleStoreLink("syphon", "id1496285352")
+            ];
+            case Platform.Linux: return [
+                new FlathubLink("org.syphon.Syphon"),
+                new WebsiteLink("https://syphon.org"),
+            ];
+            default: return [new WebsiteLink("https://syphon.org")];
+        }
+    }
+
+    getLinkInstructions(platform, link) {
+        if (link.kind === LinkKind.User) {
+            return "Open the app, click on the direct message button (inside the floating button \
+                    at the bottom), then paste the identifier.";
+        }
+        if (link.kind === LinkKind.Room) {
+            return "Open the app, click on the search public rooms button (inside the floating button \
+                at the bottom), then paste the identifier.";
+        }
+    }
+
+    getCopyString(platform, link) {
+        if (link.kind === LinkKind.User || link.kind === LinkKind.Room) {
+            return link.identifier;
+        }
+    }
+
+    getDeepLink(platform, link) {
+        /*switch (platform) {
+            case Platform.Android: return `org.tether.tether://chat/${link.identifier}`;
+            case Platform.iOS: return `org.tether.tether://chat/${link.identifier}`;
+            default: break;
+        }*/
+    }
+
+    canInterceptMatrixToLinks(platform) {
+        return platform === Platform.Android;
+    }
+
+    getPreferredWebInstance(link) {}
+}

src/open/clients/Thunderbird.js

@@ -0,0 +1,65 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Maturity, Platform, LinkKind, WebsiteLink, style} from "../types.js";
+
+/**
+ * Information on how to deep link to a given matrix client.
+ */
+export class Thunderbird {
+    get id() { return "thunderbird"; }
+    get name() { return "Thunderbird"; }
+    get icon() { return "images/client-icons/thunderbird.svg"; }
+    get author() { return "MZLA Technologies Corporation"; }
+    get homepage() { return "https://www.thunderbird.net"; }
+    get platforms() {
+        return [
+            Platform.Windows, Platform.macOS, Platform.Linux,
+        ];
+    }
+    get description() { return "Thunderbird is a free open-source email, calendar & chat app."; }
+    getMaturity(platform) {
+        return Maturity.Beta;
+    }
+
+    getInstallLinks(platform) {
+        return [new WebsiteLink(this.homepage)];
+    }
+
+    getLinkInstructions(platform, link) {
+        if (link.kind === LinkKind.User) {
+            return "Open the Chat tab, click on 'Add Contact' and paste the username.";
+        }
+        if (link.kind === LinkKind.Room) {
+            return [
+                "Open the Chat tab, click on 'Join Chat' and paste the identifier or type ",
+                style.code(`/join ${link.identifier}`),
+                " in an existing Matrix conversation."
+            ];
+        }
+    }
+
+    getCopyString(platform, link) {
+        if (link.kind === LinkKind.User || link.kind === LinkKind.Room) {
+            return link.identifier;
+        }
+    }
+
+    getDeepLink(platform, link) {}
+
+    canInterceptMatrixToLinks(platform) {
+        return false;
+    }
+
+    getPreferredWebInstance(link) {}
+}

src/open/clients/index.js

@@ -21,6 +21,9 @@ import {Fractal} from "./Fractal.js";
 import {Quaternion} from "./Quaternion.js";
 import {Tensor} from "./Tensor.js";
 import {Fluffychat} from "./Fluffychat.js";
+import {NeoChat} from "./NeoChat.js";
+import {Syphon} from "./Syphon.js";
+import {Thunderbird} from "./Thunderbird.js";
 
 export function createClients() {
     return [
@@ -31,5 +34,8 @@ export function createClients() {
         new Quaternion(),
         new Tensor(),
         new Fluffychat(),
+        new NeoChat(),
+        new Syphon(),
+        new Thunderbird(),
     ];
 }

src/preview/HomeServer.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 function noTrailingSlash(url) {
-    return url.endsWith("/") ? url.substr(0, url.length - 1) : url;
+    return url.endsWith("/") ? url.slice(0, -1) : url;
 }
 
 export async function resolveServer(request, baseURL) {
@@ -123,7 +123,7 @@ export class HomeServer {
 function parseMxcUrl(url) {
     const prefix = "mxc://";
     if (url.startsWith(prefix)) {
-        return url.substr(prefix.length).split("/", 2);
+        return url.slice(prefix.length).split("/", 2);
     } else {
         return null;
     }

src/utils/TemplateView.js

@@ -210,7 +210,7 @@ class TemplateBuilder {
                     setAttribute(node, key, classNames(value));
                 }
             } else if (key.startsWith("on") && key.length > 2 && isFn) {
-                const eventName = key.substr(2, 1).toLowerCase() + key.substr(3);
+                const eventName = key.slice(2, 3).toLowerCase() + key.slice(3);
                 const handler = value;
                 this._templateView._addEventListener(node, eventName, handler);
             } else if (isFn) {

yarn.lock

@@ -815,6 +815,46 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/source-map@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
+  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
+  integrity sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@rollup/plugin-babel@^5.1.0":
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.2.2.tgz#e5623a01dd8e37e004ba87f2de218c611727d9b2"
@@ -900,6 +940,11 @@
   dependencies:
     "@types/node" "*"
 
+acorn@^8.5.0:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -956,9 +1001,9 @@ browserslist@^4.14.5, browserslist@^4.15.0:
     node-releases "^1.1.71"
 
 buffer-from@^1.0.0:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 builtin-modules@^3.1.0:
   version "3.1.0"
@@ -1797,10 +1842,10 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
-source-map-support@~0.5.19:
+source-map-support@~0.5.20:
-  version "0.5.19"
+  version "0.5.21"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -1815,11 +1860,6 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@~0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
 sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -1859,13 +1899,14 @@ supports-color@^7.0.0:
     has-flag "^4.0.0"
 
 terser@^5.0.0:
-  version "5.5.1"
+  version "5.14.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
-  integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==
+  integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==
   dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
     commander "^2.20.0"
-    source-map "~0.7.2"
+    source-map-support "~0.5.20"
-    source-map-support "~0.5.19"
 
 to-fast-properties@^2.0.0:
   version "2.0.0"