From 326159d7db353cdea3c1d0799ab90de9590d9617 Mon Sep 17 00:00:00 2001 From: Nicolas Mattia Date: Tue, 20 Sep 2022 12:02:59 +0200 Subject: [PATCH] Use lit instead of lit-html (#898) * Use lit instead of lit-html This upgrades our version of `lit`, as well as import from `lit` instead of `lit-html` (now the correct way to import it). Use `lit` also gives us access to some extra [directives](https://lit.dev/docs/templates/directives/) which will come in handy when factoring out (non-Web) components. * Make jest happy --- jest.config.ts | 4 +- package-lock.json | 78 +++++++++++++++++-- package.json | 2 +- src/frontend/src/banner.ts | 2 +- .../src/components/compatibilityChart.ts | 2 +- src/frontend/src/components/displayError.ts | 2 +- src/frontend/src/components/footer.ts | 2 +- src/frontend/src/components/icons.ts | 2 +- src/frontend/src/components/loader.ts | 2 +- src/frontend/src/components/logout.ts | 2 +- src/frontend/src/components/navbar.ts | 2 +- src/frontend/src/components/navigationLink.ts | 2 +- src/frontend/src/components/warnBox.ts | 2 +- src/frontend/src/flows/about/index.ts | 2 +- .../addDevice/manage/addDevicePickAlias.ts | 2 +- .../src/flows/addDevice/manage/index.ts | 2 +- .../manage/pollForTentativeDevice.ts | 2 +- .../addDevice/manage/verifyTentativeDevice.ts | 2 +- .../deviceRegistrationModeDisabled.ts | 2 +- .../src/flows/addDevice/welcomeView/index.ts | 2 +- .../welcomeView/registerTentativeDevice.ts | 2 +- .../welcomeView/showVerificationCode.ts | 2 +- src/frontend/src/flows/authenticate/index.ts | 2 +- src/frontend/src/flows/compatibilityNotice.ts | 2 +- src/frontend/src/flows/confirmRegister.ts | 2 +- src/frontend/src/flows/displayUserNumber.ts | 2 +- src/frontend/src/flows/faq/index.ts | 8 +- src/frontend/src/flows/login/knownAnchor.ts | 2 +- src/frontend/src/flows/login/unknownAnchor.ts | 2 +- .../src/flows/manage/deviceSettings.ts | 2 +- src/frontend/src/flows/manage/index.ts | 2 +- src/frontend/src/flows/promptUserNumber.ts | 2 +- .../flows/recovery/chooseRecoveryMechanism.ts | 2 +- .../flows/recovery/displaySafariWarning.ts | 2 +- .../src/flows/recovery/displaySeedPhrase.ts | 2 +- .../recovery/displaySingleDeviceWarning.ts | 2 +- .../src/flows/recovery/pickRecoveryDevice.ts | 2 +- .../src/flows/recovery/recoverWith/device.ts | 2 +- .../src/flows/recovery/recoverWith/phrase.ts | 2 +- src/frontend/src/flows/register.ts | 2 +- src/frontend/src/flows/registerDisabled.ts | 2 +- .../src/flows/successfulDeviceAddition.ts | 2 +- src/frontend/src/showcase.ts | 2 +- src/frontend/src/styleguide.ts | 2 +- src/frontend/src/utils/countdown.ts | 2 +- 45 files changed, 118 insertions(+), 56 deletions(-) diff --git a/jest.config.ts b/jest.config.ts index 5438142659..db92d8eaff 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -13,7 +13,5 @@ export default { // These two transform options make sure that jest can process files that include ES modules // (in particular, files that have lit-html import) transform: { "\\.[jt]sx?$": "ts-jest", }, - transformIgnorePatterns: [ - "node_modules/(?!lit-html/.*)" - ] + transformIgnorePatterns: ["node_modules/(?!\@?lit)"], }; diff --git a/package-lock.json b/package-lock.json index c1e785a8cb..e5bcf1e725 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "biguintle": "^1.0.3", "bip39": "^3.0.4", "kjua": "^0.9.0", - "lit-html": "^1.4.1", + "lit": "^2.3.1", "text-encoding": "^0.7.0" }, "devDependencies": { @@ -1931,6 +1931,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@lit/reactive-element": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz", + "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -2498,6 +2503,11 @@ "integrity": "sha512-LfATA7bH+MtAPlOshYgQ1M3n2r0TSB6Ns5ESvKYlVugkKErQg5oFbR2qO7XrKtNsrtzedDvTeqQfyTjdPJH7jw==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, "node_modules/@types/ua-parser-js": { "version": "0.7.36", "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", @@ -11589,10 +11599,32 @@ "node": ">=10" } }, + "node_modules/lit": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.3.1.tgz", + "integrity": "sha512-TejktDR4mqG3qB32Y8Lm5Lye3c8SUehqz7qRsxe1PqGYL6me2Ef+jeQAEqh20BnnGncv4Yxy2njEIT0kzK1WCw==", + "dependencies": { + "@lit/reactive-element": "^1.4.0", + "lit-element": "^3.2.0", + "lit-html": "^2.3.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, "node_modules/lit-html": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", - "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", + "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } }, "node_modules/loader-runner": { "version": "4.2.0", @@ -17578,6 +17610,11 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@lit/reactive-element": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz", + "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw==" + }, "@nodelib/fs.scandir": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz", @@ -18101,6 +18138,11 @@ "integrity": "sha512-LfATA7bH+MtAPlOshYgQ1M3n2r0TSB6Ns5ESvKYlVugkKErQg5oFbR2qO7XrKtNsrtzedDvTeqQfyTjdPJH7jw==", "dev": true }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, "@types/ua-parser-js": { "version": "0.7.36", "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", @@ -25013,10 +25055,32 @@ "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==", "dev": true }, + "lit": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.3.1.tgz", + "integrity": "sha512-TejktDR4mqG3qB32Y8Lm5Lye3c8SUehqz7qRsxe1PqGYL6me2Ef+jeQAEqh20BnnGncv4Yxy2njEIT0kzK1WCw==", + "requires": { + "@lit/reactive-element": "^1.4.0", + "lit-element": "^3.2.0", + "lit-html": "^2.3.0" + } + }, + "lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, "lit-html": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", - "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==" + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", + "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } }, "loader-runner": { "version": "4.2.0", diff --git a/package.json b/package.json index b6dccd0255..0d8e4b3953 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "biguintle": "^1.0.3", "bip39": "^3.0.4", "kjua": "^0.9.0", - "lit-html": "^1.4.1", + "lit": "^2.3.1", "text-encoding": "^0.7.0" } } diff --git a/src/frontend/src/banner.ts b/src/frontend/src/banner.ts index 90888f0621..d3391b7c6b 100644 --- a/src/frontend/src/banner.ts +++ b/src/frontend/src/banner.ts @@ -1,4 +1,4 @@ -import { render, html, TemplateResult } from "lit-html"; +import { render, html, TemplateResult } from "lit"; import { anyFeatures } from "./features"; // Show a warning banner if the build is not "official". This happens if either the build diff --git a/src/frontend/src/components/compatibilityChart.ts b/src/frontend/src/components/compatibilityChart.ts index 63b6f1ac4d..cdb9621b77 100644 --- a/src/frontend/src/components/compatibilityChart.ts +++ b/src/frontend/src/components/compatibilityChart.ts @@ -1,4 +1,4 @@ -import { html } from "lit-html"; +import { html } from "lit"; export const compatibilityData = { note: "Browser support for WebAuthentication is constantly evolving. Your preferred browser may not support WebAuthentication, or may only support it using a security key. If you run into issues, please try again with one of our recommended browsers.", diff --git a/src/frontend/src/components/displayError.ts b/src/frontend/src/components/displayError.ts index 7fcaae3ec6..8a1ae0e490 100644 --- a/src/frontend/src/components/displayError.ts +++ b/src/frontend/src/components/displayError.ts @@ -1,4 +1,4 @@ -import { html, render, TemplateResult } from "lit-html"; +import { html, render, TemplateResult } from "lit"; import { warnBox } from "./warnBox"; export type ErrorOptions = { diff --git a/src/frontend/src/components/footer.ts b/src/frontend/src/components/footer.ts index 0faf46fc9b..90224fff4b 100644 --- a/src/frontend/src/components/footer.ts +++ b/src/frontend/src/components/footer.ts @@ -1,4 +1,4 @@ -import { html } from "lit-html"; +import { html } from "lit"; export const footer = html`