WIP start preparing to use new reload behaviour in live

lamdera · supermario · Jul 7, 2024 · Jul 7, 2024 · Jul 12, 2024 · Jul 13, 2024
commit 3b6d23e663151b1e0279a66a4138fffa7dff2821
diff --git a/elm.cabal b/elm.cabal
@@ -229,6 +229,7 @@ Executable lamdera
 
         Lamdera.CLI
         Lamdera.CLI.Live
+        Lamdera.CLI.Live.Output
         Lamdera.CLI.Login
         Lamdera.CLI.Check
         Lamdera.CLI.Deploy

diff --git a/ext-sentry/Ext/Sentry.hs b/ext-sentry/Ext/Sentry.hs
@@ -15,25 +15,36 @@ import Ext.Common
 data Cache =
   Cache
     { jsOutput :: MVar BS.ByteString
+    , htmlWrapper :: MVar (BS.ByteString, BS.ByteString)
     }
 
 
 init :: IO Cache
 init = do
   mJsOutput <- newMVar "cacheInit!"
-  pure $ Cache mJsOutput
+  mHtmlWrapper <- newMVar ("cacheInit!", "cacheInit!")
+  pure $ Cache mJsOutput mHtmlWrapper
 
 
 getJsOutput :: Cache -> IO BS.ByteString
 getJsOutput cache =
   readMVar $ jsOutput cache
 
 
-asyncUpdateJsOutput :: Cache -> IO BS.ByteString -> IO ()
-asyncUpdateJsOutput (Cache mJsOutput) recompile = do
+getHtmlOutput :: Cache -> IO BS.ByteString
+getHtmlOutput cache = do
+  (htmlPre, htmlPost) <- readMVar $ htmlWrapper cache
+  js <- getJsOutput cache
+  pure $ htmlPre <> js <> htmlPost
+
+
+asyncUpdateJsOutput :: Cache -> IO (BS.ByteString, BS.ByteString, BS.ByteString) -> IO ()
+asyncUpdateJsOutput (Cache mJsOutput mHtmlWrapper) recompile = do
   trackedForkIO "Ext.Sentry.asyncUpdateJsOutput" $ do
     takeMVar mJsOutput
-    !bs <- track "recompile" $ recompile
-    putMVar mJsOutput bs
+    takeMVar mHtmlWrapper
+    (!pre, !js, !post) <- track "recompile" $ recompile
+    putMVar mJsOutput js
+    putMVar mHtmlWrapper (pre, post)
     System.Mem.performMajorGC
     pure ()
diff --git a/extra/Lamdera/CLI/Live.hs b/extra/Lamdera/CLI/Live.hs
@@ -212,7 +212,10 @@ lamderaLocalDev =
 
 
 refreshClients (mClients, mLeader, mChan, beState) =
-  SocketServer.broadcastImpl mClients "{\"t\":\"r\"}" -- r is refresh, see live.js
+  SocketServer.broadcastImpl mClients "{\"t\":\"r\"}" -- r is refresh, see live.ts
+
+reloadClientsJS (mClients, mLeader, mChan, beState) =
+  SocketServer.broadcastImpl mClients "{\"t\":\"j\"}" -- j is refresh, see live.ts
 
 
 serveWebsocket root (mClients, mLeader, mChan, beState) =

diff --git a/extra/Lamdera/CLI/Live/Output.hs b/extra/Lamdera/CLI/Live/Output.hs
@@ -0,0 +1,88 @@
+{-# LANGUAGE OverloadedStrings #-}
+{-# LANGUAGE QuasiQuotes #-}
+module Lamdera.CLI.Live.Output where
+
+import qualified Data.ByteString.Builder as B
+import Data.Monoid ((<>))
+import qualified Data.Name as Name
+import Text.RawString.QQ (r)
+
+import qualified Lamdera
+import qualified Lamdera.Live
+import qualified Lamdera.UiSourceMap
+
+
+-- For when we already have the combined JS from cache and just need to wrap the HTML around it
+parts :: FilePath -> Name.Name -> B.Builder -> (B.Builder, B.Builder, B.Builder)
+parts root moduleName javascript =
+  let
+    name = Name.toBuilder moduleName
+
+    (hasCustom, customHead) = Lamdera.unsafe $ Lamdera.Live.lamderaLiveHead root
+    htmlHead =
+      if hasCustom
+        then
+          customHead
+        else
+          "<title>" <> name <> "</title>"
+
+    combinedjs = js root moduleName javascript
+
+    pre = [r|<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <style>body { padding: 0; margin: 0; } body.boot-unhandled-js-error { padding: 10px } @media (prefers-color-scheme: dark) { body.boot-unhandled-js-error { background-color: #000; color: #fff; } } </style>
+  |] <> htmlHead <> [r|
+</head>
+
+<body>
+
+<pre id="elm"></pre>
+
+<script>
+|]
+
+    post = [r|
+</script>
+
+</body>
+</html>|]
+
+  in
+  (pre, combinedjs, post)
+
+
+-- The Elm app, `lamdera live` JS harness (live.ts) and UI sourcemaps combined into a single JS snippet
+js :: FilePath -> Name.Name -> B.Builder -> B.Builder
+js root moduleName javascript =
+  let
+    name = Name.toBuilder moduleName
+  in
+  [r|
+try {
+|] <> javascript <> [r|
+|] <> Lamdera.Live.lamderaLiveSrc <> Lamdera.UiSourceMap.src <> [r|
+  setupApp("|] <> name <> [r|", "elm")
+}
+catch (e)
+{
+  // document.body.classList.add("boot-unhandled-js-error");
+  // // display initialization errors (e.g. bad flags, infinite recursion)
+  // var header = document.createElement("h1");
+  // header.style.fontFamily = "monospace";
+  // header.innerText = "Initialization Error";
+  // var pre = document.createElement("pre");
+  // document.body.insertBefore(header, pre);
+  // pre.innerText = e;
+  throw e;
+}
+|]
+
+
+-- For when we need to generate the HTML and combined JS from scratch
+-- html :: FilePath -> Name.Name -> B.Builder -> B.Builder
+-- html root moduleName javascript =
+--   wrapjs root moduleName (js root moduleName javascript)
diff --git a/extra/Lamdera/Live.hs b/extra/Lamdera/Live.hs
@@ -15,7 +15,7 @@ import Data.FileEmbed (bsToExp)
 import qualified System.Directory as Dir
 
 import Lamdera
-import qualified Lamdera.Relative
+import qualified Lamdera.Relative as Relative
 import qualified Ext.Common
 
 
@@ -26,18 +26,18 @@ lamderaLiveSrc =
       then do
         Lamdera.debug $ "🗿  Using debug mode lamderaLive"
         userHome <- Dir.getHomeDirectory
-        let overrideRoot = userHome </> "dev/projects/lamdera-compiler/extra"
-            overridePath = overrideRoot </> "live.js"
-            overridePathBuilt = overrideRoot </> "dist/live.js"
+        overrideRoot <- Relative.findDir "extra"
+        overridePath <- Relative.requireFile $ overrideRoot </> "live.ts"
+        overridePathBuilt <- Relative.requireFile $ overrideRoot </> "dist/live.js"
 
         exists <- doesFileExist overridePath
         if exists
           then do
-            Lamdera.debug $ "🗿 Using " ++ overridePathBuilt ++ " for lamderaLive"
+            Lamdera.debug $ "🗿 Compiling " ++ overridePath ++ " to " ++ overridePathBuilt ++ " for lamderaLive"
             Ext.Common.requireBinary "npm"
             Ext.Common.requireBinary "esbuild"
-            Ext.Common.bash $ "cd " <> overrideRoot <> " && npm i && esbuild " <> overridePath <> " --bundle --minify --target=chrome58,firefox57,safari11,edge16 > " <> overridePathBuilt
-            -- Ext.Common.bash $ "cd " <> overrideRoot <> " && npm i && esbuild " <> overridePath <> " --bundle --target=chrome58,firefox57,safari11,edge16 > " <> overridePathBuilt
+            -- Ext.Common.bash $ "cd " <> overrideRoot <> " && npm i && esbuild " <> overridePath <> " --bundle --minify --target=chrome58,firefox57,safari11,edge16 > " <> overridePathBuilt
+            Ext.Common.bash $ "cd " <> overrideRoot <> " && npm i && esbuild " <> overridePath <> " --bundle --target=chrome58,firefox57,safari11,edge16 > " <> overridePathBuilt
             overrideM <- readUtf8Text overridePathBuilt
             case overrideM of
               Just override -> do
@@ -67,4 +67,4 @@ lamderaLiveHead root = do
 
 lamderaLive :: BS.ByteString
 lamderaLive =
-  $(bsToExp =<< runIO (Lamdera.Relative.readByteString "extra/dist/live.js"))
+  $(bsToExp =<< runIO (Relative.readByteString "extra/dist/live.js"))