Back to Questions
737
views5
comments
How to guess (know) parameter type for inline function in JS?
websharperjavascriptui.next

I created a class called Val that wraps around the Var/View classes to provide a simpler syntax for creating html content.

1
2
3
4

type Val<'a> =
    | Constant  of 'a
    | DynamicV  of IRef<'a>
    | Dynamic   of View<'a>

This allows me to invoke html tags and attributes like so:

1
2
3
4
5
6
7

let inline textIn3Sizes txt styleP =
    div [
      style styleP
      htmlText txt
      h2 [ htmlText txt ]
      h1 [ htmlText txt ]
    ]

where txt and styleP can be a constant, Var, View or Val:

1
2
3
4
5

let varA = Create "Hello"
textIn3Sizes "Hello"      "color: blue"
textIn3Sizes varA         "color: red"
textIn3Sizes varA.View    "color: green"
textIn3Sizes <| Val.map (fun s -> s.ToUpper()) varA <| varA

This is achieved using a function I call fixit that can receive many types of values and returns a Val<type>.

Implemented like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module Val =
    
    type HelperType = HelperType with
        static member (&>) (HelperType, a :     string option   ) = Constant  a
        static member (&>) (HelperType, a :     string          ) = Constant  a
        static member (&>) (HelperType, a :     bool            ) = Constant  a
        static member (&>) (HelperType, a :     int             ) = Constant  a
        static member (&>) (HelperType, a :     float           ) = Constant  a
        static member (&>) (HelperType, a :     Doc             ) = Constant  a
        static member (&>) (HelperType, va: Val<string option>  ) =          va
        static member (&>) (HelperType, va: Val<string       >  ) =          va
        static member (&>) (HelperType, va: Val<bool         >  ) =          va
        static member (&>) (HelperType, va: Val<int          >  ) =          va
        static member (&>) (HelperType, va: Val<float        >  ) =          va
        static member (&>) (HelperType, va: Val<Doc          >  ) =          va
        static member (&>) (HelperType, va: Val<_            >  ) =          va
        static member (&>) (HelperType, vr: IRef<_           >  ) = DynamicV vr
        static member (&>) (HelperType, vw: View<_           >  ) = Dynamic  vw

    let inline fixit v = HelperType &> v

This works in F# but not in Websharper so to get around that limitation I use this hack to guess the type of the incoming parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    [< Inline @"(
            typeof($v) == 'function' ? {$:2, $0:$v} // View
            :   typeof($v) == 'object'
                      ? typeof($v.$) != 'undefined' // Val
                            ? $v 
                            : typeof($v.Id) == 'number' || typeof($v.i) == 'number' || typeof($v.RView == 'function')// Var
                                 ? {$:1, $0:$v}
                                 : typeof($v.docNode) != 'undefined'
                                     ? {$:0, $0:$v} // Doc
                                     : {$:2, $0:$v} // View?
                      : {$:0, $0:$v}) // other
                                     " >]
    let fixit0 v = Constant v
    let fixit2 v = let result = fixit0 v
                   result
                   
    [< Direct "FSSGlobal.HtmlNode.Val.fixit2($v)" >]
    let inline fixit v = HelperType &> v

It works beautifully but it is horrible. Here is the question: is there a better way to accomplish this in Websharper?

code in try.Websharper.com:

http://try.websharper.com/snippet/user3359/0000Gz

.

Yeah, this is pretty cool! We did actually consider using this kind of SRTP-based solution for HTML construction, but we decided against it because of the confusing error messages you can get from the compiler if you type something wrong.

We do have something similar to your type-checking inline though, but written using F# type tests: Doc.ToMixedDoc (see the implementation). It is used for C# support, where docs are constructed using methods taking params obj[] as argument.

By on 10/18/2017 12:41 AM ()

Excellent! Thank you for the tips. I replaced the hack with the following code and it seems to work well:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    let toVal (o: obj) =
        match o with
        | :?      string   as t   -> Val.Constant t 
        | :?      int      as t   -> Val.Constant t |> As<Val<string>> 
        | :?      bool     as t   -> Val.Constant t |> As<Val<string>>  
        | :?      Doc      as t   -> Val.Constant t |> As<Val<string>>  
        | :? Val< string>  as v   ->              v        
        | :? Var< string>  as v   -> Val.DynamicV v        
        | v when JS.In "RSet" v   -> Val.DynamicV (As<IRef<string>> v)
        | :? Function      as vw  -> Val.Dynamic  (As<View<string>> vw)        
        | _                       -> failwith <| sprintf "Could not convert %A" o

    [< Direct "$f($v)" >]
    let inline fixitF f v = HelperType &> v
    let inline fixit    v = fixitF toVal v
By on 10/18/2017 5:26 AM ()

http://try.websharper.com/snippet/user3359/0000H5

By on 10/18/2017 6:43 AM ()

This is seriously cool, impressive and clever.

By on 10/17/2017 2:46 PM ()

I'm glad you like it. You probably also noticed I combine Tags, Attributes & Texts in a single Seq which is the only input to each tag. That makes it easier to read but it is also is easier to add more children (attributes, elements or events) when necessary .

By on 10/18/2017 6:28 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper