Experimental class bindings

.config/dotnet-tools.json

@@ -3,16 +3,22 @@
   "isRoot": true,
   "tools": {
     "fable": {
-      "version": "3.6.1",
+      "version": "3.7.12",
       "commands": [
         "fable"
       ]
     },
     "femto": {
-      "version": "0.9.0",
+      "version": "0.13.0",
       "commands": [
         "femto"
       ]
+    },
+    "fantomas": {
+      "version": "5.0.0-alpha-008",
+      "commands": [
+        "fantomas"
+      ]
     }
   }
 }

global.json

@@ -1,6 +1,6 @@
 {
-  "sdk": {
-    "version": "5.0.300",
-    "rollForward": "minor"
-  }
-}
+    "sdk": {
+        "version": "6.0.200",
+        "rollForward": "latestMinor"
+    }
+}

package.json

@@ -12,7 +12,7 @@
         "docs:deploy": "npm run docs && gh-pages -d build/docs"
     },
     "dependencies": {
-        "lit": "^2.0.0",
+        "lit": "^2.2.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },
@@ -29,4 +29,4 @@
         "vite": "^2.6.14",
         "vscode-theme-onelight": "github:akamud/vscode-theme-onelight"
     }
-}
+}

sample/App.fs

@@ -1,20 +1,22 @@
 module Sample.App
 
 open Browser
+open Fable.Core
 open Elmish
 open Elmish.HMR
 open Lit
 open Lit.Elmish
 open Components
 
-let private hmr = HMR.createToken()
+let private hmr = HMR.createToken ()
 
-Clock.register()
+Clock.register ()
 
-let init() =
+let init () =
     { Value = "World"
       ShowClock = true
-      ShowReact = true }, Cmd.none
+      ShowReact = true },
+    Cmd.none
 
 let update msg model =
     match msg with
@@ -23,24 +25,36 @@ let update msg model =
     | ToggleReact v -> { model with ShowReact = v }, Cmd.none
 
 let view model dispatch =
-    html $"""
+    html
+        $"""
       <div class="vertical-container" style="margin-left: 2rem;">
 
         <button class="button"
             style="margin: 1rem 0"
             @click={Ev(fun _ -> not model.ShowReact |> ToggleReact |> dispatch)}>
-            {if model.ShowReact then "Hide" else "Show"} React
+            {if model.ShowReact then
+                 "Hide"
+             else
+                 "Show"} React
         </button>
 
-        {if not model.ShowReact then Lit.nothing
-         else ReactLitComponent model.ShowClock}
+        {if not model.ShowReact then
+             Lit.nothing
+         else
+             ReactLitComponent model.ShowClock}
 
         <br />
 
         {elmishNameInput model.Value (ChangeValue >> dispatch)}
         {LocalNameInput()}
+        <hello-there .name={model.Value}></hello-there>
+        <hello-there-2></hello-there-2>
 
         {ClockDisplay model dispatch}
+
+        <user-profile .name={model.Value} age="25"></user-profile>
+
+        <element-with-controller><element-with-controller>
       </div>
     """
 
@@ -49,10 +63,58 @@ let view model dispatch =
 // |> 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
+let App () =
+    Hook.useHmr (hmr)
+    let _ = LitElement.init (fun config -> config.useShadowDom <- false)
+    let model, dispatch = Hook.useElmish (init, update)
+    view model dispatch
+
+open Experimental
+
+[<LitElementExperimental(true)>]
+let Sample () =
+    let name = Controllers.GetProperty("name", "Peter")
+
+    let state: StateController<int> =
+        Controllers.GetController<StateController<int>>(10)
+
+    let twoArgs = Controllers.GetController<TwoArgsCtrl>(10, 20)
+
+
+    let inline updateValues _ =
+        state.SetState(state.Value + 1)
+        let (initial, secondial) = twoArgs.Values
+        twoArgs.updateValues ((initial + 1, secondial + 2))
+
+
+    html $"<p>{state.Value}, {twoArgs.Values}, {name}</p> <button @click={updateValues}>Increment</button>"
+
+
+registerFuncElement ("hello-there", Sample) {
+    css $"p {{ color: blue; }}"
+
+    property "name" {
+        use_attribute
+        use_type PropType.String
+    }
+}
+// registerFuncElement ("hello-there-2", Sample2) { css $"p {{ color: blue; }}" }
+
+registerElement<ClassComponents.UserProfile> "user-profile" {
+    property "name" {
+        use_attribute
+        use_type PropType.String
+    }
+
+    property "age" {
+        use_attribute
+        use_type PropType.Number
+    }
+
+    css $"p {{ color: red; }}"
+}
+
+registerElement<ClassComponents.ElementWithController> "element-with-controller" {
+    css $"p {{ color: red; }}"
+    css $"li {{ color: rebeccapurple; }}"
+}

sample/ClassComponents.fs

@@ -0,0 +1,76 @@
+module ClassComponents
+
+open Lit
+open Fable.Core
+open Fetch
+open Fable.Core.JsInterop
+
+[<ImportMember("./controllers.js")>]
+type MouseController(host) =
+    inherit ReactiveController(host)
+    member _.x: float = jsNative
+    member _.y: float = jsNative
+
+type Post =
+    {| usedId: int
+       id: int
+       title: string
+       body: string |}
+
+type ApiController(host: LitElement) =
+    inherit ReactiveController(host)
+
+    member val Posts: Post array = Array.empty with get, set
+    member val Page: int = 1 with get, set
+    member val Limit: int = 10 with get, set
+
+    member this.FetchUsers(?page: int, ?limit: int) =
+        let page = defaultArg page this.Page
+        let limit = defaultArg limit this.Limit
+
+        promise {
+            let! posts =
+                promise {
+                    let! result = tryFetch $"https://jsonplaceholder.typicode.com/posts?_page={page}&_limit={limit}" []
+
+                    match result with
+                    | Ok res ->
+                        let! result = res.json () :?> JS.Promise<Post array>
+                        return result
+                    | Error err -> return Array.empty<Post>
+                }
+
+            this.Posts <- posts
+            host.requestUpdate ()
+        }
+
+    member this.NextPage() =
+        this.Page <- this.Page + 1
+        this.FetchUsers() |> Promise.start
+
+    override this.hostConnected() : unit = this.FetchUsers() |> Promise.start
+
+type UserProfile() =
+    inherit LitElement()
+
+    let name = ""
+    let age = 0
+
+    override _.render() = html $"<p>{name} - {age}</p>"
+
+type ElementWithController() =
+    inherit LitElement()
+
+    let mouse = MouseController jsThis
+    let api = ApiController jsThis
+
+    let posts (post: Post) = html $"<li>{post.title}</li>"
+
+    override _.render() =
+        html
+            $"""
+            <p>{mouse.x} - {mouse.y}</p>
+            <p>Page: {api.Page}</p>
+            <button @click={fun _ -> api.NextPage()}>Next Page</button>
+            <ul>{Lit.mapUnique (fun (p: Post) -> $"{p.id}") posts api.Posts}</li>
+        """

sample/Clock.fs

@@ -10,13 +10,11 @@ open Lit.Elmish
 module Helpers =
     let hmr = HMR.createToken()
 
-    type MouseController =
-        inherit ReactiveController
-        abstract x: float
-        abstract y: float
-
-    [<Import("MouseController", from="./controllers.js"); Emit("new $0($1)")>]
-    let createMouseController (host: LitElement): MouseController = jsNative
+    [<ImportMember("./controllers.js")>]
+    type MouseController(host) =
+        inherit ReactiveController(host)
+        member _.x: float = jsNative
+        member _.y: float = jsNative
 
     type Time =
         | Hour of int
@@ -123,12 +121,12 @@ let clockHand (color: string) (time: Time) =
 
 let select options selected dispatch =
     let option value =
-        html $"""<option ?selected={value = selected} value={value}>{value}</option>"""
+        html $"""<option ?selected={value = selected} .value={value}>{value}</option>"""
 
     html $"""
         <div class="select mb-2">
             <select @change={EvVal dispatch}>
-                {options |> List.map option}
+                {Lit.mapUnique id option options}
             </select>
         </div>
     """
@@ -137,7 +135,7 @@ let initEl (config: LitConfig<_,_>) =
     let split (str: string) =
         str.Split(',') |> Array.map (fun x -> x.Trim()) |> Array.toList
 
-    config.controllers <- {| mouse = Controller.Of(createMouseController) |}
+    config.controllers <- {| mouse = Controller.Of(MouseController) |}
 
     config.props <-
         {|

sample/Sample.fsproj

@@ -1,8 +1,9 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
   </PropertyGroup>
   <ItemGroup>
+    <Compile Include="ClassComponents.fs" />
     <Compile Include="Clock.fs" />
     <Compile Include="Types.fs" />
     <Compile Include="Components.fs" />
@@ -16,6 +17,7 @@
     <!-- <PackageReference Include="Fable.Lit.Elmish" Version="1.0.0-rc-001" /> -->
     <!-- <PackageReference Include="Fable.Lit.React" Version="1.0.0-rc-001" /> -->
     <PackageReference Include="Fable.Elmish.HMR" Version="4.3.1" />
+    <PackageReference Include="Fable.Fetch" Version="2.4.0" />
     <PackageReference Include="Feliz" Version="1.52.0" />
   </ItemGroup>
 </Project>