From 47f620779805e72cf7e29535dafd2d91169b24a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Fri, 11 Jun 2021 18:30:01 +0200 Subject: [PATCH] change to lit-html --- .babelrc | 4 ++-- package.json | 1 + src/common/core/BaseElement/BaseElement.ts | 4 ++-- src/common/pages/BasePageElement/BasePageElement.ts | 4 ++-- src/components/app-dropdown/AppDropdownElement.ts | 2 +- src/components/app-form/AppFormElement.ts | 2 +- src/components/app-link/AppLinkElement.ts | 2 +- src/components/app-loader/AppLoaderElement.ts | 2 +- src/components/app-menu/AppMenuElement.ts | 2 +- src/components/app-pagination/AppPaginationElement.ts | 2 +- src/components/circle-loader/CircleLoaderElement.ts | 2 +- src/components/input-field/InputFieldElement.ts | 2 +- src/components/menu-item/MenuItemElement.ts | 2 +- src/components/wallet-header/WalletHeaderElement.ts | 2 +- src/layouts/initial-layout/InitialLayoutElement.ts | 2 +- src/layouts/menu-layout/MenuLayoutElement.ts | 2 +- src/pages/history-page/HistoryPageElement.ts | 2 +- src/pages/home-page/HomePageElement.ts | 2 +- src/pages/login-page/LoginPageElement.ts | 3 ++- src/pages/not-found/NotFoundElement.ts | 2 +- src/pages/register-page/RegisterPageElement.ts | 2 +- src/pages/transaction-create/TransactionCreateElement.ts | 2 +- src/pages/wallet-create/WalletCreateElement.ts | 2 +- src/pages/wallet-list/WalletListElement.ts | 2 +- src/pages/wallet-page/WalletPageElement.ts | 2 +- tsconfig.json | 2 ++ webpack.config.js | 4 ++-- yarn.lock | 5 +++++ 28 files changed, 38 insertions(+), 29 deletions(-) diff --git a/.babelrc b/.babelrc index a7db752..c4fcb6d 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,7 @@ { "presets": [ - "@babel/preset-env", - "@babel/preset-typescript" + ["@babel/preset-env", {"modules": false}], + ["@babel/preset-typescript", {"modules": false}] ], "plugins": [ [ diff --git a/package.json b/package.json index a895961..663e410 100644 --- a/package.json +++ b/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", diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index 1a314e9..5b0a71f 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/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``; }; diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts index 81ac3a2..c503c84 100644 --- a/src/common/pages/BasePageElement/BasePageElement.ts +++ b/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(); }; diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index 495907a..9956bfa 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/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"; diff --git a/src/components/app-form/AppFormElement.ts b/src/components/app-form/AppFormElement.ts index 0f75060..30d7ff3 100644 --- a/src/components/app-form/AppFormElement.ts +++ b/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"; diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index f7bcd68..3e17963 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/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/"; diff --git a/src/components/app-loader/AppLoaderElement.ts b/src/components/app-loader/AppLoaderElement.ts index 1c9a96e..0afd334 100644 --- a/src/components/app-loader/AppLoaderElement.ts +++ b/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 diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 8801d11..6d95e93 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/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"; diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index 376c24b..55a8281 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/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"; diff --git a/src/components/circle-loader/CircleLoaderElement.ts b/src/components/circle-loader/CircleLoaderElement.ts index bd3beee..8927703 100644 --- a/src/components/circle-loader/CircleLoaderElement.ts +++ b/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 diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 64b87c5..92e6cca 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/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"; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index cb49a63..bd6e999 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/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/"; diff --git a/src/components/wallet-header/WalletHeaderElement.ts b/src/components/wallet-header/WalletHeaderElement.ts index ef99abf..ddf6078 100644 --- a/src/components/wallet-header/WalletHeaderElement.ts +++ b/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"; diff --git a/src/layouts/initial-layout/InitialLayoutElement.ts b/src/layouts/initial-layout/InitialLayoutElement.ts index f3b7275..20642a9 100644 --- a/src/layouts/initial-layout/InitialLayoutElement.ts +++ b/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/"; diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts index 2805cb3..e37f38b 100644 --- a/src/layouts/menu-layout/MenuLayoutElement.ts +++ b/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/"; diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts index 1466d42..b0b4c4b 100644 --- a/src/pages/history-page/HistoryPageElement.ts +++ b/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/"; diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index 297a1a0..ebdab51 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/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/"; diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts index 7b0e0e4..fa4af6a 100644 --- a/src/pages/login-page/LoginPageElement.ts +++ b/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"; diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts index b4edf79..a6e4ed0 100644 --- a/src/pages/not-found/NotFoundElement.ts +++ b/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 diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index d353875..7f81746 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/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/"; diff --git a/src/pages/transaction-create/TransactionCreateElement.ts b/src/pages/transaction-create/TransactionCreateElement.ts index 4ab10a7..5735d13 100644 --- a/src/pages/transaction-create/TransactionCreateElement.ts +++ b/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"; diff --git a/src/pages/wallet-create/WalletCreateElement.ts b/src/pages/wallet-create/WalletCreateElement.ts index f1e2082..03ea1e7 100644 --- a/src/pages/wallet-create/WalletCreateElement.ts +++ b/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"; diff --git a/src/pages/wallet-list/WalletListElement.ts b/src/pages/wallet-list/WalletListElement.ts index e9aed95..5e639d1 100644 --- a/src/pages/wallet-list/WalletListElement.ts +++ b/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/"; diff --git a/src/pages/wallet-page/WalletPageElement.ts b/src/pages/wallet-page/WalletPageElement.ts index 8326f82..a1c4ac5 100644 --- a/src/pages/wallet-page/WalletPageElement.ts +++ b/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, diff --git a/tsconfig.json b/tsconfig.json index a860eb5..c9829dd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,8 @@ "es2016" ], "moduleResolution": "node", + "jsx": "preserve", + "jsxFactory": "h", "resolveJsonModule": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, diff --git a/webpack.config.js b/webpack.config.js index 425c1be..3fc1049 100644 --- a/webpack.config.js +++ b/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: { diff --git a/yarn.lock b/yarn.lock index 210fac2..018ea5e 100644 --- a/yarn.lock +++ b/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"