change to lit-html

.babelrc

@@ -1,7 +1,7 @@
 {
     "presets": [
-        "@babel/preset-env",
+        ["@babel/preset-env", {"modules": false}],
-        "@babel/preset-typescript"
+        ["@babel/preset-typescript", {"modules": false}]
     ],
     "plugins": [
         [

package.json

@@ -24,6 +24,7 @@
     "connect-history-api-fallback": "^1.6.0",
     "css-loader": "^5.2.6",
     "html-webpack-plugin": "^5.3.1",
+    "lit-html": "^1.4.1",
     "node-sass": "^6.0.0",
     "sass-loader": "^11.1.1",
     "sass-to-string": "^1.5.1",

src/common/core/BaseElement/BaseElement.ts

@@ -1,4 +1,4 @@
-import { html, render, TemplateResult } from "@github/jtml";
+import { html, render, TemplateResult } from "lit-html";
 import {
     AppLoaderElement,
     AppMainElement,
@@ -80,7 +80,7 @@ class BaseElement extends HTMLElement {
         });
     };
 
-    render = (): TemplateResult => {
+    render = (): TemplateResult | Temp => {
         return html``;
     };
 

src/common/pages/BasePageElement/BasePageElement.ts

@@ -1,5 +1,5 @@
 import { attr } from "@github/catalyst";
-import { html, render } from "@github/jtml";
+import { html, render } from "lit-html";
 import { BaseElement } from "common/";
 import { isTrue } from "core/utils";
 
@@ -28,7 +28,7 @@ class BasePageElement extends BaseElement {
     update = (): void => {
         const _render = () => html` ${this.renderTitle()} ${this.render()} `;
         render(_render(), this);
-        this.bindEvents();
+        this.bindEvents("app-action");
         this.updateCallback();
     };
 

src/components/app-dropdown/AppDropdownElement.ts

@@ -1,6 +1,6 @@
 import { attr, controller, target } from "@github/catalyst";
 import { findMethod, firstUpper } from "core/utils";
-import { html } from "@github/jtml";
+import { html } from "lit-html";
 import randomId from "core/utils/random-id";
 import validator from "validator";
 import { validatorErrors } from "core/constants";

src/components/app-form/AppFormElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from "@github/catalyst";
-import { html, TemplateResult, unsafeHTML } from "@github/jtml";
+import { html, TemplateResult, unsafeHTML } from "lit-html";
 import { BaseComponentElement } from "common/";
 import { AppDropdownElement } from "components/app-dropdown/AppDropdownElement";
 import { InputFieldElement } from "components/input-field/InputFieldElement";

src/components/app-link/AppLinkElement.ts

@@ -1,6 +1,6 @@
 import { attr, controller, target } from "@github/catalyst";
 import { isTrue } from "core/utils";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";

src/components/app-loader/AppLoaderElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html } from "@github/jtml";
+import { html } from "lit-html";
 import { BaseComponentElement } from "common/";
 
 @controller

src/components/app-menu/AppMenuElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { MenuItemElement } from "components/menu-item/MenuItemElement";

src/components/app-pagination/AppPaginationElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BaseComponentElement } from "common/";
 import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
 

src/components/circle-loader/CircleLoaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller } from "@github/catalyst";
-import { html } from "@github/jtml";
+import { html } from "lit-html";
 import { BaseComponentElement } from "common/";
 
 @controller

src/components/input-field/InputFieldElement.ts

@@ -1,6 +1,6 @@
 import { attr, controller, target } from "@github/catalyst";
 import { closest, firstUpper } from "core/utils";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { RouterService } from "core/services";
 import randomId from "core/utils/random-id";
 import validator from "validator";

src/components/menu-item/MenuItemElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { BaseComponentElement } from "common/";
 

src/components/wallet-header/WalletHeaderElement.ts

@@ -1,5 +1,5 @@
 import { attr, controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BaseComponentElement } from "common/";
 import { CircleLoaderElement } from "components/circle-loader/CircleLoaderElement";
 import { findMethod } from "core/utils";

src/layouts/initial-layout/InitialLayoutElement.ts

@@ -1,6 +1,6 @@
 import { controller, target } from "@github/catalyst";
 import { closest } from "core/utils";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BaseLayoutElement } from "common/layouts";
 import { AppMainElement } from "components/";
 

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -1,6 +1,6 @@
 import { controller, target } from "@github/catalyst";
 import { closest } from "core/utils";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BaseLayoutElement } from "common/layouts";
 import { AppMainElement } from "components/";
 

src/pages/history-page/HistoryPageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { TransactionsService } from "services/";
 import { AppMainElement, AppPaginationElement } from "components/";
 import { BasePageElement } from "common/";

src/pages/home-page/HomePageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html, TemplateResult, until } from "@github/jtml";
+import { html, TemplateResult, until } from "lit-html";
 import { WalletService } from "services/";
 import { AppMainElement, WalletHeaderElement } from "components/";
 import { BasePageElement } from "common/";

src/pages/login-page/LoginPageElement.ts

@@ -1,5 +1,6 @@
 import { targets, controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+//import { html, TemplateResult } from "lit-html";
+import { html, render, TemplateResult } from "lit-html";
 import { AuthService } from "services/";
 import { AppFormElement, InputFieldElement } from "components/";
 import { RouterService } from "core/services";

src/pages/not-found/NotFoundElement.ts

@@ -1,5 +1,5 @@
 import { controller } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { BasePageElement } from "common/";
 
 @controller

src/pages/register-page/RegisterPageElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AuthService } from "services/";
 import { InputFieldElement } from "components/";
 import { BasePageElement } from "common/";

src/pages/transaction-create/TransactionCreateElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AuthService, TransactionsService, WalletService } from "services/";
 import { InputFieldElement } from "components/";
 import { RouterService } from "core/services";

src/pages/wallet-create/WalletCreateElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AuthService, WalletService } from "services/";
 import { InputFieldElement } from "components/";
 import { RouterService } from "core/services";

src/pages/wallet-list/WalletListElement.ts

@@ -1,5 +1,5 @@
 import { targets, controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { AuthService, WalletService } from "services/";
 import { AppPaginationElement, InputFieldElement } from "components/";
 import { BasePageElement } from "common/";

src/pages/wallet-page/WalletPageElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html, TemplateResult } from "@github/jtml";
+import { html, TemplateResult } from "lit-html";
 import { TransactionsService, WalletService } from "services/";
 import {
     AppMainElement,

tsconfig.json

@@ -8,6 +8,8 @@
             "es2016"
         ],
         "moduleResolution": "node",
+        "jsx": "preserve",
+        "jsxFactory": "h",
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,

webpack.config.js

@@ -62,7 +62,7 @@ module.exports = (env, args) => {
         module: {
             rules: [
                 {
-                    test: /\.(js|ts)?$/,
+                    test: /\.(js|ts)x?$/,
                     exclude: /node_modules/,
                     use: {
                         loader: 'babel-loader'
@@ -106,7 +106,7 @@ module.exports = (env, args) => {
             }),
         ],
         resolve: {
-            extensions: ['.js', '.ts'],
+            extensions: ['.js', '.ts', '.jsx', '.tsx'],
             alias: alias
         },
         devServer: {

yarn.lock

@@ -3787,6 +3787,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lit-html@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0"
+  integrity sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz"