Back to Questions
3.6k
views3
comments
WebSharper: Issue with private functions in class constructor let bindings
websharperf#

I have a class I'm trying to use in a small WebSharper application. The constructor contains several private functions defined in let bindings, and then calls them in the do binding. In the JavaScript code that WebSharper generates, however, the private functions do not get defined within the scope of the object, but the constructor expects to find them on the object, so the constructor fails. Here is a (stripped down) example; I'm hoping I haven't omitted anything essential:

The F# is like this:

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

module LifeHtml

type Canvas [<JavaScript>] (width, height, cellSide, canvasXOffset, canvasYOffset) =
    [<JavaScript>]
    let element = HTML5.Tags.Canvas []

    [<JavaScript>]
    let canvas  = As<CanvasElement> element.Dom

    [<JavaScript>]
    let drawLife (gameState: Set<int*int>) =
        gameState |> (doSomeStuff canvas)

    do
        canvas.Width  <- width
        drawLife !currentState

Assuming I've stripped down the code correctly, this translates into:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

(function()
{
 var Global=this,Runtime=this.IntelliFactory.Runtime,WebSharper,Html,Operators,Default,List,Life,Game,Number,Seq,Collections,BalancedTree,_FSharpSet_1,SetModule,HTML5,T,Unchecked,G_vmlCanvasManager,Util,_,LifeHtml,Control,_FSharpEvent_1;
 Runtime.Define(Global,{
  "":{
   LifeHtml:{
    Canvas:Runtime.Class({
     drawLife:function(gameState)
     {
		<snip>
     },;{
     New:function(width,height,cellSide,canvasXOffset,canvasYOffset)
     {
      var r,_this,x,_this1,target,elem,gameState,_this2;
      r={};
      r.canvas=(_this1=r.element,_this1.Body);
      r.canvas.width=width;
      r.drawLife(gameState);
      return Runtime.New(this,r);
     }
    }),
    GameEvents:Runtime.Field(function()
    {
     return _FSharpEvent_1.New();
    })
   }
  }
 });

The JavaScript New function calls r.drawLife, whereupon the browser says "TypeError: r.drawLife is not a function." This also happens if I try to define drawLife using a variable binding an anonymous function.

I have also tried making drawLife a method and calling the member from the constructor. I then get a compile-time error: "Quotations cannot contain inline assembly code or pattern matching on arrays." This appears to be where the member is trying to reference one of the let binding private variables.

Is there any way around this issue? I had a working version that was functional, but the result was that the function signatures had a lot more arguments, where the parameters held values that were initialized once and not mutable thereafter. I could avoid passing these around from function to function by assigning them to mutable values at the module level, but then I lose immutability. The nice thing about using a class is that I can pass parameters into the constructor which can't be mutated once they're set.

.

Hi Paul,

I have reported the problem here:

[link:bitbucket.org]

Briefly, WebSharper uses F# quotations to perform the translation. In general, the constructor quotations produced by F# are not always correct. We perform some ad-hoc correction logic in WebSharper to try to restore their original meaning in some simple cases, but do not guarantee to be correct in general. Specifically, your example translates incorrectly.

I have reviewed the "correction" code and found a way to improve it so that your example will actually work as written. It involves shifting the Runtime.New call up the code, so that it replaces r={}. The change seems harmless with respect to other code, and we will be including this as a fix for your issue in the upcoming WebSharper release.

In the meanwhile, you can consider several workarounds, for example:

1
2
3
4
5
6
7
8
9
10

    type Canvas2 [<JavaScript>] (width, height, cellSide, canvasXOffset, canvasYOffset) =

        [<JavaScript>]
        let () =
            let element = HTML5.Tags.Canvas [] 
            let canvas = element.Dom
            let drawLife () =
                JavaScript.Log("OKAY", canvas, width, height)
            canvas?width <- width
            drawLife ()

Concerning the error "Quotations cannot contain inline assembly code or pattern matching on arrays", this is another limitation of F# quotation model for which we have no cure. It usually involves array code and can be worked around by dealing with arrays as sequences. If you post some code that generates this error I can try to help you convert it.

Thanks,
Anton.

By on 10/22/2012 9:30 AM ()

Thanks for the help; sorry for the delay in responding. The code that gives the "Quotations cannot contain inline assembly code" when I call a member from the constructor is as follows:

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

type Canvas [<JavaScript>] (width, height, cellSide, canvasXOffset, canvasYOffset) as this =
    [<JavaScript>]
    let element = HTML5.Tags.Canvas []
 
    [<JavaScript>]
    let canvas  = As<CanvasElement> element.Dom
 
    do
        canvas.Width  <- width
        this.drawLife !currentState

    [<JavaScript>]
    member this.drawLife (gameState: Set<int*int>) =
        gameState |> ignore

This gives me the abovementioned error as a little red squiggly in Visual Studio under 

1

gameState |> ignore

I don't even need to use the WebSharper compiler. (Naturally, the actual code was doing something a lot more involved in drawLife, but I got the same error.)

By on 10/30/2012 12:58 PM ()

This is indeed a bug, and was filed as such by Anton (a.k.a. toyvo): [link:bitbucket.org]

By on 10/22/2012 9: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