fix: reenables scroll on sidebar click

apps/frontend/gleam.toml

@@ -18,7 +18,7 @@ modem = ">= 1.1.0 and < 2.0.0"
 plinth = ">= 0.2.0 and < 1.0.0"
 sketch = ">= 2.2.2 and < 3.0.0"
 tardis = ">= 0.1.0 and < 1.0.0"
-lustre = ">= 4.3.0 and < 5.0.0"
+lustre = { path = "../../packages/lustre" }
 
 [dev-dependencies]
 gleeunit = "~> 1.0"

apps/frontend/manifest.toml

@@ -2,20 +2,21 @@
 # You typically do not need to edit this file
 
 packages = [
-  { name = "birl", version = "1.6.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "976CFF85D34D50F7775896615A71745FBE0C325E50399787088F941B539A0497" },
+  { name = "birl", version = "1.7.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "5C66647D62BCB11FE327E7A6024907C4A17954EF22865FE0940B54A852446D01" },
+  { name = "conversation", version = "1.4.3", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_javascript", "gleam_stdlib"], otp_app = "conversation", source = "hex", outer_checksum = "908B46F60444442785A495197D482558AD8B849C3714A38FAA1940358CC8CCCD" },
   { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
   { name = "gleam_fetch", version = "0.4.0", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_javascript", "gleam_stdlib"], otp_app = "gleam_fetch", source = "hex", outer_checksum = "7446410A44A1D1328F5BC1FF4FC9CBD1570479EA69349237B3F82E34521CCC10" },
   { name = "gleam_http", version = "3.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "8C07DF9DF8CC7F054C650839A51C30A7D3C26482AC241C899C1CEA86B22DBE51" },
-  { name = "gleam_javascript", version = "0.8.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "14D5B7E1A70681E0776BF0A0357F575B822167960C844D3D3FA114D3A75F05A8" },
+  { name = "gleam_javascript", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "483631D3001FCE8EB12ADEAD5E1B808440038E96F93DA7A32D326C82F480C0B2" },
   { name = "gleam_json", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "9063D14D25406326C0255BDA0021541E797D8A7A12573D849462CAFED459F6EB" },
   { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" },
-  { name = "gleam_stdlib", version = "0.37.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5398BD6C2ABA17338F676F42F404B9B7BABE1C8DC7380031ACB05BBE1BCF3742" },
-  { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" },
+  { name = "gleam_stdlib", version = "0.38.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "663CF11861179AF415A625307447775C09404E752FF99A24E2057C835319F1BE" },
+  { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
   { name = "grille_pain", version = "1.0.1", build_tools = ["gleam"], requirements = ["birl", "gleam_stdlib", "lustre", "plinth", "sketch", "tardis"], otp_app = "grille_pain", source = "hex", outer_checksum = "F0CA9AA0BD4D03B8E190AB4CBB9429DE9389BC2152CF566C3410261F5729827C" },
-  { name = "lustre", version = "4.3.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "43642C0602D3E2D6FEC3E24173D68A1F8E646969B53A2B0A5EB61238DDA739C4" },
+  { name = "lustre", version = "4.3.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../../packages/lustre" },
   { name = "lustre_http", version = "0.5.2", build_tools = ["gleam"], requirements = ["gleam_fetch", "gleam_http", "gleam_javascript", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_http", source = "hex", outer_checksum = "FB0478CBFA6B16DBE8ECA326DAE2EC15645E04900595EF2C4F039ABFA0512ABA" },
   { name = "modem", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre"], otp_app = "modem", source = "hex", outer_checksum = "4C6E448089B09A57C179455D44526A717E4E217D4000B91201617FD2D9F18E68" },
-  { name = "plinth", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "83211E672D83F3CE14681D0ECD3AD883EE7588E423E7C9DDDB460014AD60AC24" },
+  { name = "plinth", version = "0.4.7", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "BBDD8F05368A1C9AB09A8BF50BBD98E5C23A6AA754DFF2E9B36C87988AC82D47" },
   { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
   { name = "sketch", version = "2.2.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "AE2FE447AB1C993CE4884D9EFE915D1971AEDED335904B77BE875B5BE3D7378B" },
   { name = "tardis", version = "0.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "tardis", source = "hex", outer_checksum = "C8E7BAB95C59EF50332905A06B82BB35526B7BE2F191580F3CD8790903AA49F7" },
@@ -28,7 +29,7 @@ gleam_json = { version = ">= 1.0.1 and < 2.0.0" }
 gleam_stdlib = { version = "~> 0.34 or ~> 1.0" }
 gleeunit = { version = "~> 1.0" }
 grille_pain = { version = ">= 1.0.0 and < 2.0.0" }
-lustre = { version = ">= 4.3.0 and < 5.0.0"}
+lustre = { path = "../../packages/lustre" }
 lustre_http = { version = "~> 0.5" }
 modem = { version = ">= 1.1.0 and < 2.0.0" }
 plinth = { version = ">= 0.2.0 and < 1.0.0" }

apps/frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frontend",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

apps/frontend/src/config.ffi.mjs

@@ -3,8 +3,9 @@ export function is_dev() {
 }
 
 export function scrollTo(id) {
-  const elem = document.getElementById(id)
-  if (!elem) return
+  const cache = document.getElementsByTagName('cache-signatures')
+  if (!cache?.[0]) return
+  const elem = cache[0].shadowRoot.getElementById(id)
   const elemRect = elem.getBoundingClientRect()
   const navbarRect = document.getElementsByClassName('navbar')?.[0]?.getBoundingClientRect()
   const bodyRect = document.body.getBoundingClientRect()
@@ -22,3 +23,11 @@ export function captureMessage(content) {
 export function updateTitle(title) {
   document.title = title
 }
+
+export function coerce(a) {
+  return a
+}
+
+export function coerce_event(a) {
+  return a.detail
+}

apps/frontend/src/frontend.gleam

@@ -8,7 +8,6 @@ import frontend/view/body/cache
 import gleam/bool
 import gleam/dict
 import gleam/dynamic
-import gleam/io
 import gleam/list
 import gleam/option.{None}
 import gleam/result

apps/frontend/src/frontend.ts

@@ -5,6 +5,13 @@ import plaintext from 'highlight.js/lib/languages/plaintext'
 // @ts-ignore
 import { main } from './frontend.gleam'
 
+// @ts-ignore
+Element.prototype._attachShadow = Element.prototype.attachShadow
+Element.prototype.attachShadow = function () {
+  // @ts-ignore
+  return this._attachShadow({ mode: 'open' })
+}
+
 hljs.registerLanguage('gleam', gleamHljs)
 hljs.registerLanguage('plaintext', plaintext)
 document.addEventListener('DOMContentLoaded', main)

apps/frontend/src/frontend/view/body/body.gleam

@@ -8,6 +8,7 @@ import frontend/view/body/styles as s
 import frontend/view/search_input/search_input
 import gleam/dict
 import gleam/int
+import gleam/io
 import gleam/list
 import gleam/option.{None, Some}
 import gleam/result
@@ -129,6 +130,13 @@ pub fn view_trending(model: Model) {
   }
 }
 
+fn on_coerce(value: a) {
+  Ok(coerce_event(value))
+}
+
+@external(javascript, "../../../config.ffi.mjs", "coerce_event")
+fn coerce_event(value: a) -> b
+
 pub fn body(model: Model) {
   s.main([], [
     case model.route {
@@ -162,7 +170,7 @@ pub fn body(model: Model) {
             |> result.map(fn(content) {
               el.element(
                 "cache-signatures",
-                [a.property("content", content)],
+                [a.property("content", content), e.on("child", on_coerce)],
                 [],
               )
             })

apps/frontend/src/frontend/view/body/cache.gleam

@@ -144,21 +144,24 @@ pub fn cache_search_results(
   ])
 }
 
-pub type MsgComponent {
-  UpdateContent(el.Element(MsgComponent))
+pub type MsgComponent(msg) {
+  UpdateContent(el.Element(msg))
+  Received(msg)
 }
 
+@external(javascript, "../../../config.ffi.mjs", "coerce")
+fn coerce(value: a) -> b
+
 pub fn component() {
   lustre.component(
     fn(_flags) { #(el.none(), eff.none()) },
-    fn(_model, msg) {
+    fn(model: el.Element(msg), msg: MsgComponent(msg)) {
       case msg {
         UpdateContent(c) -> #(c, eff.none())
+        Received(msg) -> #(model, e.emit("child", coerce(msg)))
       }
     },
-    fn(model) { model },
-    dict.from_list([
-      #("content", fn(dyn) { Ok(UpdateContent(dynamic.unsafe_coerce(dyn))) }),
-    ]),
+    fn(model) { el.map(model, Received) |> io.debug },
+    dict.from_list([#("content", fn(dyn) { Ok(UpdateContent(coerce(dyn))) })]),
   )
 }

apps/frontend/vite.config.js

@@ -1,11 +1,13 @@
 import { sentryVitePlugin } from '@sentry/vite-plugin'
 import 'dotenv/config'
+import { defineConfig } from 'vite'
 import gleam from 'vite-gleam'
 
-export default {
+export default defineConfig(({ mode }) => ({
   plugins: [
     gleam(),
     sentryVitePlugin({
+      disable: mode === 'development',
       org: process.env.SENTRY_ORG,
       project: process.env.SENTRY_PROJECT,
       authToken: process.env.SENTRY_AUTH_TOKEN,
@@ -19,4 +21,4 @@ export default {
       interop: 'auto',
     },
   },
-}
+}))