web: upgrade to lit 3

[kensternberg-authentik]

Details

web: upgrade to Lit3

This commit replaces our Lit2 implementation with a Lit3 implementation. This commit is built on top of the ESBuild commit, and is compatible with it.

This upgrade required two major shifts within our code, both of them consequential.

First, the restructuring of the way the get/set decorators for properties and states meant that a lot of the code we were using needed to be refactored. More than that, a lot of those custom accessors were implemented to trigger side-effects, such as when a providerID is set or changed triggering the ProviderView to fetch the requsted Provider. The Lit2 and Lit3 documentation both say there is a better way to handle this by detecting the change in the willUpdate() point of an elements Lifecycle and triggering the side effect there instead. I’ve done this in several places with a pattern of detecting the change, and then naming the corresponding change as fetchRequestedThing(). The resulting code is cleaner and uses fewer controversial features.

The other is that the type signature for LitElement.createRenderRoot() has changed to be either an HTMLElement or a DocumentFragment. This required some serious refactoring of type changes through Base and Interface codes. Noteably, the custom AdoptedStyleSheetsElement interface has been superseded by the supplied and standardized DocumentOrShadowRoot interface. Unfortunately, that interface is a mixin, and casting or instance checking are still in place to make sure the objects being manipulated are typed “correctly.”

In keeping with the current recommendation, I'm leaving the experimental Typescript decorator transformer as-is, as ESBuild does not yet have a fix for handling "standard" decorators.

Three files I touched during the course of this triggered SonarJS, so there are some minor fixes, replacing some awkward syntax with more idiomatic code. These are very minor, such as replacing:

const result = someFunction();
return result;

/* with */

return someFunction();

and

const result = x();
if (!result) { return true } else { return false }

/* with */

return !x();

REPLACE ME

---

Checklist

• Local tests pass (ak test authentik/)
• The code has been formatted (make lint-fix)

If an API change has been made

• The API schema has been updated (make gen-build)

If changes to the frontend have been made

• The code has been formatted (make web)

If applicable

• The documentation has been updated
• The documentation has been formatted (make website)

[netlify]

✅ Deploy Preview for authentik-docs canceled.

Name	Link
🔨 Latest commit	182c02d
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/65ef4050922537000899422d

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	182c02d
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/65ef4050a2ee5c0008ca3ab1
😎 Deploy Preview	https://deploy-preview-8781--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-182c02d6569ab45bce68ac10d6bdd70a4920bcc5
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-182c02d6569ab45bce68ac10d6bdd70a4920bcc5-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-182c02d6569ab45bce68ac10d6bdd70a4920bcc5

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-182c02d6569ab45bce68ac10d6bdd70a4920bcc5-arm64

Afterwards, run the upgrade commands from the latest release notes.