Use lit instead of lit-html (dfinity#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

@@ -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)"],
 };

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"
   }
 }

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

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.",

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 = {

src/frontend/src/components/footer.ts

@@ -1,4 +1,4 @@
-import { html } from "lit-html";
+import { html } from "lit";
 
 export const footer = html`<footer class="l-footer">
   <a

src/frontend/src/components/icons.ts

@@ -1,4 +1,4 @@
-import { html } from "lit-html";
+import { html } from "lit";
 
 export const logoutIcon = html`
   <svg

src/frontend/src/components/loader.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 
 const loader = () => html`<style>
     #loader {

src/frontend/src/components/logout.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from "lit-html";
+import { html, TemplateResult } from "lit";
 import { logoutIcon } from "./icons";
 
 // Add a button at the bottom of the page. Clicking the button clears the local

src/frontend/src/components/navbar.ts

@@ -1,4 +1,4 @@
-import { html } from "lit-html";
+import { html } from "lit";
 import { navigationLink } from "../components/navigationLink";
 
 export const navbar = html` <aside aria-label="General links">

src/frontend/src/components/navigationLink.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from "lit-html";
+import { html, TemplateResult } from "lit";
 
 export const navigationLink = (
   props = {

src/frontend/src/components/warnBox.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from "lit-html";
+import { html, TemplateResult } from "lit";
 import { warningIcon } from "./icons";
 
 // The Warning Component can be reused with following custom properties: title, message, slot and htmlElement.

src/frontend/src/flows/about/index.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { compatibilityData } from "../../components/compatibilityChart";
 
 // The About page

src/frontend/src/flows/addDevice/manage/addDevicePickAlias.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { initLogout, logoutSection } from "../../../components/logout";
 import { validateAlias } from "../validateAlias";
 // Regex Pattern for input: All characters, must be alphabet or number

src/frontend/src/flows/addDevice/manage/index.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { networkIcon, securityKeyIcon } from "../../../components/icons";
 import { warnBox } from "../../../components/warnBox";
 

src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { AuthenticatedConnection } from "../../../utils/iiConnection";
 import { renderManage } from "../../manage";
 import { withLoader } from "../../../components/loader";

src/frontend/src/flows/addDevice/manage/verifyTentativeDevice.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { AuthenticatedConnection } from "../../../utils/iiConnection";
 import { withLoader } from "../../../components/loader";
 import { renderManage } from "../../manage";

src/frontend/src/flows/addDevice/welcomeView/deviceRegistrationModeDisabled.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { Connection } from "../../../utils/iiConnection";
 import {
   addTentativeDevice,

src/frontend/src/flows/addDevice/welcomeView/index.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { parseUserNumber } from "../../../utils/userNumber";
 import { registerTentativeDevice } from "./registerTentativeDevice";
 import { toggleErrorMessage } from "../../../utils/errorHelper";

src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { creationOptions, Connection } from "../../../utils/iiConnection";
 import { WebAuthnIdentity } from "@dfinity/identity";
 import { deviceRegistrationDisabledInfo } from "./deviceRegistrationModeDisabled";

src/frontend/src/flows/addDevice/welcomeView/showVerificationCode.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { Connection } from "../../../utils/iiConnection";
 import {
   CredentialId,

src/frontend/src/flows/authenticate/index.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { icLogo, attentionIcon } from "../../components/icons";
 import { footer } from "../../components/footer";
 import {

src/frontend/src/flows/compatibilityNotice.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { compatibilityChart } from "../components/compatibilityChart";
 
 // Taken from: https://caniuse.com/?search=PublicKeyCredential

src/frontend/src/flows/confirmRegister.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { displayUserNumber } from "./displayUserNumber";
 import { displayError } from "../components/displayError";
 import { setUserNumber } from "../utils/userNumber";

src/frontend/src/flows/displayUserNumber.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { warnBox } from "../components/warnBox";
 
 const pageContent = (userNumber: bigint) => html`

src/frontend/src/flows/faq/index.ts

@@ -1,4 +1,4 @@
-import { TemplateResult, html, render } from "lit-html";
+import { TemplateResult, html, render } from "lit";
 
 export interface Link {
   name: string;
@@ -239,9 +239,9 @@ function renderQuestion(faq: Question) {
       </summary>
       <div class="l-stack">
         <p class="faq__answer">
-          ${faq.answer instanceof TemplateResult
-            ? faq.answer
-            : html`<p>${faq.answer}</p>`}
+          ${typeof faq.answer === "string"
+            ? html`<p>${faq.answer}</p>`
+            : faq.answer}
         </p>
         ${faq.links !== undefined && faq.links.length > 0
           ? renderFaqLinks(faq.links)

src/frontend/src/flows/login/knownAnchor.ts

@@ -1,4 +1,4 @@
-import { render, html } from "lit-html";
+import { render, html } from "lit";
 import { navbar } from "../../components/navbar";
 import { footer } from "../../components/footer";
 import { icLogo } from "../../components/icons";

src/frontend/src/flows/login/unknownAnchor.ts

@@ -1,4 +1,4 @@
-import { render, html } from "lit-html";
+import { render, html } from "lit";
 import { Connection } from "../../utils/iiConnection";
 import { parseUserNumber, setUserNumber } from "../../utils/userNumber";
 import { withLoader } from "../../components/loader";

src/frontend/src/flows/manage/deviceSettings.ts

@@ -1,4 +1,4 @@
-import { render, html } from "lit-html";
+import { render, html } from "lit";
 import { DerEncodedPublicKey } from "@dfinity/agent";
 import {
   bufferEqual,

src/frontend/src/flows/manage/index.ts

@@ -1,4 +1,4 @@
-import { render, html } from "lit-html";
+import { render, html } from "lit";
 import { AuthenticatedConnection } from "../../utils/iiConnection";
 import { withLoader } from "../../components/loader";
 import { initLogout, logoutSection } from "../../components/logout";

src/frontend/src/flows/promptUserNumber.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { parseUserNumber } from "../utils/userNumber";
 
 const pageContent = (title: string, userNumber: bigint | null) => html`

src/frontend/src/flows/recovery/chooseRecoveryMechanism.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { DeviceData } from "../../../generated/internet_identity_types";
 import { securityKeyIcon, seedPhraseIcon } from "../../components/icons";
 

src/frontend/src/flows/recovery/displaySafariWarning.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { warnBox } from "../../components/warnBox";
 import { setupRecovery } from "./setupRecovery";
 import { AuthenticatedConnection } from "../../utils/iiConnection";

src/frontend/src/flows/recovery/displaySeedPhrase.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { checkmarkIcon, warningIcon } from "../../components/icons";
 
 const pageContent = (seedPhrase: string) => html`

src/frontend/src/flows/recovery/displaySingleDeviceWarning.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { warnBox } from "../../components/warnBox";
 import { setupRecovery } from "./setupRecovery";
 import { AuthenticatedConnection } from "../../utils/iiConnection";

src/frontend/src/flows/recovery/pickRecoveryDevice.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { DeviceData } from "../../../generated/internet_identity_types";
 
 const pageContent = () => html`

src/frontend/src/flows/recovery/recoverWith/device.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { displayError } from "../../../components/displayError";
 import { unreachable } from "../../../utils/utils";
 import {

src/frontend/src/flows/recovery/recoverWith/phrase.ts

@@ -1,4 +1,4 @@
-import { html, nothing, render, TemplateResult } from "lit-html";
+import { html, nothing, render, TemplateResult } from "lit";
 import { DeviceData } from "../../../../generated/internet_identity_types";
 import {
   apiResultToLoginFlowResult,

src/frontend/src/flows/register.ts

@@ -1,6 +1,6 @@
 import { WebAuthnIdentity } from "@dfinity/identity";
 import { Challenge } from "../../generated/internet_identity_types";
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import {
   IdentifiableIdentity,
   DummyIdentity,

src/frontend/src/flows/registerDisabled.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { warnBox } from "../components/warnBox";
 
 const pageContent = html`

src/frontend/src/flows/successfulDeviceAddition.ts

@@ -1,4 +1,4 @@
-import { html, render } from "lit-html";
+import { html, render } from "lit";
 import { initLogout, logoutSection } from "../components/logout";
 import { AuthenticatedConnection } from "../utils/iiConnection";
 import { renderManage } from "./manage";