Use web component for app

2021-12-02 11:19:13 +09:00
parent 7558e33799
commit c6ff8debc2
2 changed files with 17 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -34,7 +34,8 @@
 </head>

 <body>
-    <div id="app-container"></div>
+    <!-- <div id="app-container"></div> -->
+    <sample-app></sample-app>
    <script type="module" src="./build/sample/App.js"></script>
 </body>

--- a/sample/App.fs
+++ b/sample/App.fs
@@ -1,11 +1,14 @@
 module Sample.App

+open Browser
 open Elmish
 open Elmish.HMR
 open Lit
 open Lit.Elmish
 open Components

+let private hmr = HMR.createToken()
+
 Clock.register()

 let init() =
@@ -41,6 +44,15 @@ let view model dispatch =
      </div>
    """

-Program.mkProgram init update view
-|> Program.withLit "app-container"
-|> Program.run
+// Program.mkProgram init update view
+// |> Program.withLit "app-container"
+// |> Program.run
+
+[<LitElement("sample-app")>]
+let App() =
+    Hook.useHmr(hmr)
+    let _ = LitElement.init(fun config ->
+        config.useShadowDom <- false
+    )
+    let model, dispatch = Hook.useElmish(init, update)
+    view model dispatch