refactor(primer-miso): Use IDs instead of unique classes

This makes no functional difference, but is good practice due to indicating the semantics as well as providing a theoretical performance improvement. Signed-off-by: George Thomas <georgefsthomas@gmail.com>
hackworthltd · Jan 9, 2025 · a5a6d45 · a5a6d45
1 parent c28342f
commit a5a6d45
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/primer-miso/frontend/style.css b/primer-miso/frontend/style.css
@@ -67,7 +67,7 @@ body {
   height: 100vh;
 }
 
-.miso-root {
+#miso-root {
   height: 100%;
   display: grid;
   grid-template-columns: 12rem 1fr 2fr;
@@ -81,7 +81,7 @@ body {
   }
 }
 
-.def-panel {
+#def-panel {
   grid-row-start: 1;
   grid-row-end: 3;
   background-color: var(--grey-primary);
@@ -103,7 +103,7 @@ body {
   }
 }
 
-.selection-type {
+#selection-type {
   grid-column-start: 2;
   grid-column-end: 4;
 }

diff --git a/primer-miso/src/Primer/Miso.hs b/primer-miso/src/Primer/Miso.hs
@@ -45,6 +45,7 @@ import Miso (
   defaultEvents,
   div_,
   fromTransition,
+  id_,
   img_,
   onClick,
   src_,
@@ -174,9 +175,9 @@ updateModel =
 viewModel :: Model -> View Action
 viewModel Model{..} =
   div_
-    [class_ "miso-root"]
+    [id_ "miso-root"]
     $ [ div_
-          [class_ "def-panel"]
+          [id_ "def-panel"]
           $ Map.keys module_.defs <&> \(qualifyName module_.name -> def) ->
             button_
               [ class_ $ mwhen (Just def == ((.def) <$> selection)) "selected"
@@ -188,19 +189,19 @@ viewModel Model{..} =
         Nothing -> [text "no selection"]
         Just defSel ->
           [ div_
-              [ class_ "sig"
+              [ id_ "sig"
               ]
               [ SelectNode . NodeSelection SigNode
                   <$> fst (viewTree (viewTreeType (Just . Right &&& isSelected) def.sig))
               ]
           , div_
-              [ class_ "body"
+              [ id_ "body"
               ]
               [ SelectNode . NodeSelection BodyNode
                   <$> fst (viewTree (viewTreeExpr (Just &&& isSelected) def.expr))
               ]
           , div_
-              [ class_ "selection-type"
+              [ id_ "selection-type"
               ]
               [ fst $ viewTree case defSel.node of
                   Nothing -> viewTreeType mkMeta $ forgetTypeMetadata def.sig