From 502171b15c598940525031f563976c96c2a04572 Mon Sep 17 00:00:00 2001 From: Guillaume Hivert Date: Sat, 29 Jun 2024 17:24:30 +0200 Subject: [PATCH] fix: reenables scroll on sidebar click --- apps/frontend/gleam.toml | 2 +- apps/frontend/manifest.toml | 15 ++++++++------- apps/frontend/package.json | 1 + apps/frontend/src/config.ffi.mjs | 13 +++++++++++-- apps/frontend/src/frontend.gleam | 1 - apps/frontend/src/frontend.ts | 7 +++++++ apps/frontend/src/frontend/view/body/body.gleam | 10 +++++++++- .../frontend/src/frontend/view/body/cache.gleam | 17 ++++++++++------- apps/frontend/vite.config.js | 6 ++++-- 9 files changed, 51 insertions(+), 21 deletions(-) diff --git a/apps/frontend/gleam.toml b/apps/frontend/gleam.toml index 3b8c3ca..784dab5 100644 --- a/apps/frontend/gleam.toml +++ b/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" diff --git a/apps/frontend/manifest.toml b/apps/frontend/manifest.toml index 326780e..801de2c 100644 --- a/apps/frontend/manifest.toml +++ b/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" } diff --git a/apps/frontend/package.json b/apps/frontend/package.json index a8e7b4e..4352b36 100644 --- a/apps/frontend/package.json +++ b/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", diff --git a/apps/frontend/src/config.ffi.mjs b/apps/frontend/src/config.ffi.mjs index d9d416a..a1c86ba 100644 --- a/apps/frontend/src/config.ffi.mjs +++ b/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 +} diff --git a/apps/frontend/src/frontend.gleam b/apps/frontend/src/frontend.gleam index 7bfcf9a..e7d0169 100644 --- a/apps/frontend/src/frontend.gleam +++ b/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 diff --git a/apps/frontend/src/frontend.ts b/apps/frontend/src/frontend.ts index 03705f2..862b3a1 100644 --- a/apps/frontend/src/frontend.ts +++ b/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) diff --git a/apps/frontend/src/frontend/view/body/body.gleam b/apps/frontend/src/frontend/view/body/body.gleam index f34d44f..a90ab18 100644 --- a/apps/frontend/src/frontend/view/body/body.gleam +++ b/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)], [], ) }) diff --git a/apps/frontend/src/frontend/view/body/cache.gleam b/apps/frontend/src/frontend/view/body/cache.gleam index dad3149..678f0bc 100644 --- a/apps/frontend/src/frontend/view/body/cache.gleam +++ b/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))) })]), ) } diff --git a/apps/frontend/vite.config.js b/apps/frontend/vite.config.js index db170c9..fedf98b 100644 --- a/apps/frontend/vite.config.js +++ b/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', }, }, -} +}))