ui: remove all fetchs

ghivert · Jul 17, 2024 · 10c3594 · 10c3594
1 parent e0abc79
commit 10c3594
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 38 deletions.
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,15 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="preload" as="style" href="/all.css" />
-    <link rel="preload" as="style" href="/main.css" />
-    <link rel="preload" as="style" href="/normalize.css" />
-    <link rel="preload" as="style" href="/hljs-theme.css" />
-    <link rel="stylesheet" href="/main.css" />
-    <link rel="stylesheet" href="/normalize.css" />
-    <link rel="stylesheet" href="/hljs-theme.css" />
-    <link rel="stylesheet" href="/all.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gloogle</title>
     <script

diff --git a/apps/frontend/src/frontend.ts b/apps/frontend/src/frontend.ts
@@ -4,6 +4,10 @@ import hljs from 'highlight.js/lib/core'
 import plaintext from 'highlight.js/lib/languages/plaintext'
 // @ts-ignore
 import { main } from './frontend.gleam'
+import './stylesheets/all.css'
+import './stylesheets/hljs-theme.css'
+import './stylesheets/main.css'
+import './stylesheets/normalize.css'
 
 // @ts-ignore
 Element.prototype._attachShadow = Element.prototype.attachShadow

diff --git a/apps/frontend/public/all.css → apps/frontend/src/stylesheets/all.css b/apps/frontend/public/all.css → apps/frontend/src/stylesheets/all.css
diff --git a/apps/frontend/public/hljs-theme.css → apps/frontend/src/stylesheets/hljs-theme.css b/apps/frontend/public/hljs-theme.css → apps/frontend/src/stylesheets/hljs-theme.css
diff --git a/apps/frontend/public/main.css → apps/frontend/src/stylesheets/main.css b/apps/frontend/public/main.css → apps/frontend/src/stylesheets/main.css
diff --git a/apps/frontend/public/normalize.css → apps/frontend/src/stylesheets/normalize.css b/apps/frontend/public/normalize.css → apps/frontend/src/stylesheets/normalize.css
diff --git a/packages/lustre/src/client-component.ffi.mjs b/packages/lustre/src/client-component.ffi.mjs
@@ -74,36 +74,25 @@ function makeComponent(init, update, view, on_attribute_change) {
       })
     }
 
-    connectedCallback() {
-      new Promise(async resolve => {
-        const links = [...document.querySelectorAll('link')].map(async link => {
-          if (link.rel === 'stylesheet') {
-            const res = await fetch(link.href)
-            const content = await res.text()
-            const styleSheet = new CSSStyleSheet()
-            await styleSheet.replace(content)
-            this.#shadow.adoptedStyleSheets.push(styleSheet)
-          }
+    async connectedCallback() {
+      await Promise.all(
+        [...document.styleSheets].map(stylesheet => {
+          return new Promise(resolve => {
+            const style = document.importNode(stylesheet.ownerNode, true)
+            style.addEventListener('load', resolve)
+            this.#shadow.appendChild(style)
+          })
         })
-        const styles = [...document.querySelectorAll('style')].map(
-          async style => {
-            const styleSheet = new CSSStyleSheet()
-            await styleSheet.replace(style.innerHTML)
-            this.#shadow.adoptedStyleSheets.push(styleSheet)
-          }
-        )
-        await Promise.all([...links, ...styles])
-        resolve()
-      }).then(() => {
-        this.#application = new LustreClientApplication(
-          init(),
-          update,
-          view,
-          this.#root,
-          true
-        )
-        this.#shadow.append(this.#root)
-      })
+      )
+
+      this.#application = new LustreClientApplication(
+        init(),
+        update,
+        view,
+        this.#root,
+        true
+      )
+      this.#shadow.append(this.#root)
     }
 
     attributeChangedCallback(key, _, next) {