habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: improve build speeds even moar!!!!!! (#8954)

Browse Source 
* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: improve build speeds even moar!!!!!!

While investigating how to improve the integration of Patternfly 5
into our product, I came across a hint on how to pre-process the
stylesheets into CSSStylesheetObjects on the fly. While trying to
integrate that hint into our own build process, I got an error
message about how esbuild plugins can't be used with the synchronous
API yet.

So, being even more curious, I tried to figure out how to make our
multiple builds work with the asynchronous API.

Then I wondered how it behaved with `Promise.allSettled().`

The result is a build time of less than one second.

Can't complain.

* web: moar speed plz!!!

- Re-arrange the build order so the larger components get built first
- Change the criteria for "what is a proxy object."
- Adds some (probably trivial) awaits() where expected.

* add comment for ordering

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
2024-03-19 14:37:05 -07:00
committed by GitHub
parent 1b81973358
commit 3e94b58afb
1 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/build.mjs
View File

@ -55,15 +55,15 @@ for (const [source, rawdest, strip] of otherFiles) {
// This starts the definitions used for esbuild: Our targets, our arguments, the function for running a build, and three
// options for building: watching, building, and building the proxy.
// Ordered by largest to smallest interface to build even faster
const interfaces = [
["polyfill/poly.ts", "."],
["standalone/loading/index.ts", "standalone/loading"],
["flow/FlowInterface.ts", "flow"],
["user/UserInterface.ts", "user"],
["enterprise/rac/index.ts", "enterprise/rac"],
["standalone/api-browser/index.ts", "standalone/api-browser"],
["admin/AdminInterface/AdminInterface.ts", "admin"],
["user/UserInterface.ts", "user"],
["flow/FlowInterface.ts", "flow"],
["standalone/api-browser/index.ts", "standalone/api-browser"],
["enterprise/rac/index.ts", "enterprise/rac"],
["standalone/loading/index.ts", "standalone/loading"],
["polyfill/poly.ts", "."],
];
const baseArgs = {
@ -80,29 +80,32 @@ const baseArgs = {
format: "esm",
};
function buildAuthentik(interfaces) {
for (const [source, dest] of interfaces) {
const DIST = path.join(__dirname, "./dist", dest);
console.log(`[${new Date(Date.now()).toISOString()}] Starting build for target ${source}`);
try {
const start = Date.now();
esbuild.buildSync({
...baseArgs,
entryPoints: [`./src/${source}`],
outdir: DIST,
});
const end = Date.now();
console.log(
`[${new Date(end).toISOString()}] Finished build for target ${source} in ${Date.now() - start}ms`,
);
} catch (exc) {
console.error(
`[${new Date(Date.now()).toISOString()}] Failed to build ${source}: ${exc}`,
);
}
async function buildOneSource(source, dest) {
const DIST = path.join(__dirname, "./dist", dest);
console.log(`[${new Date(Date.now()).toISOString()}] Starting build for target ${source}`);
try {
const start = Date.now();
await esbuild.build({
...baseArgs,
entryPoints: [`./src/${source}`],
outdir: DIST,
});
const end = Date.now();
console.log(
`[${new Date(end).toISOString()}] Finished build for target ${source} in ${
Date.now() - start
}ms`,
);
} catch (exc) {
console.error(`[${new Date(Date.now()).toISOString()}] Failed to build ${source}: ${exc}`);
}
}
async function buildAuthentik(interfaces) {
await Promise.allSettled(interfaces.map(([source, dest]) => buildOneSource(source, dest)));
}
let timeoutId = null;
function debouncedBuild() {
if (timeoutId !== null) {
@ -138,9 +141,11 @@ if (process.argv.length > 2 && (process.argv[2] === "-w" || process.argv[2] ===
});
} else if (process.argv.length > 2 && (process.argv[2] === "-p" || process.argv[2] === "--proxy")) {
// There's no watch-for-proxy, sorry.
buildAuthentik(interfaces.slice(0, 2));
await buildAuthentik(
interfaces.filter(([_, dest]) => ["standalone/loading", "."].includes(dest)),
);
process.exit(0);
} else {
// And the fallback: just build it.
buildAuthentik(interfaces);
await buildAuthentik(interfaces);
}