dotnet-websharper / docs Goto Github PK

In this section of the documentation, subsection Inserting Views in the Doc, the following code is presented to exemplify Doc.BindView:

let varTxt = Var.Create ""
let vWords =
    varTxt.View
    |> View.Map (fun s -> s.Split(' '))
    |> Doc.BindView (fun words ->
        words
        |> Array.map (fun w -> li [] [text w] :> Doc)
        |> Doc.Concat
    )
div [] [
    text "You entered the following words:"
    ul [] [ vWords ]
]

Although correct, the above code forces the reader to change the content of the Var for the text in the code itself in order to see the splitting effect in the browser. My suggestion is to change the example to this:

let varTxt = Var.Create ""
let vWords =
    varTxt.View
    |> View.Map (fun s -> s.Split(' '))
    |> Doc.BindView (fun words ->
        words
        |> Array.map (fun w -> li [] [text w])
        |> Doc.Concat
    )
div [] [
    Doc.InputType.Text [] varTxt
    text "You entered the following words:"
    ul [] [ vWords ]
]

In this manner, the reader will be able to interact with the text via the browser and immediately see the reactivity system working as intended (notice also the removal of the :> Doc that at version 6.x throws a warning). If this option is not the best, we could put some initial text in varTxt to generate some list items on the web page for the reader. Can I improve this? Which approach should I go for? I personally think the one with the interactable text box is the best option.

... and give the actual changes compared to an ordinary F# library project file - in the bottom of
http://developers.websharper.com/docs/templates

Hi,

I just started getting my head around WebSharper 2 days ago, so I thought sharing my "fresh" point of view could be beneficial to the project.

The first thing I've tried after getting set up with .NET, WebSharper templates and VSCode F# extension was to build example code snippets that are listed in the Overview page. Unfortunately, even the "Hello world!" example doesn't build successfully (unless I'm doing something wrong). The first obstacle that I came across was that the page doesn't mention where exactly should these snippets be put in order to make them work. After quite a bit of digging I ended up on the WebSharper v3 documentation which describes how to run example snippets which suggests to use SPA template and replace its content.

Taking the "Hello world!" snippet:

module YourApp

open WebSharper
open WebSharper.Sitelets

[<Website>]
    let Main = Application.Text (fun ctx -> "Hello World!")

I've generated the SPA from the template (dotnet new websharper-spa -lang f# -n HelloWorld) and replaced the content of Client.fs with the given code (without replacing the namespace declaration and leaving Startup.fs intact), which results in the following:

namespace HelloWorld

module YourApp

open WebSharper
open WebSharper.Sitelets

[<Website>]
    let Main = Application.Text (fun ctx -> "Hello World!")

dotnet run results in:

C:\source\websharper-samples\HelloWorld\Client.fs(5,1,5,5): parse error FS0010: Unexpected start of structured construct in definition. Expected '=' or other token. [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]
C:\source\websharper-samples\HelloWorld\Client.fs(9,1,9,60): parse error FS0010: Incomplete structured construct at or before this point in implementation file [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

Googling for the first error description I ended up on this SO question, so I've tried defining the "local module" instead:

namespace HelloWorld

module YourApp =

    open WebSharper
    open WebSharper.Sitelets

    [<Website>]
        let Main = Application.Text (fun ctx -> "Hello World!")

now dotnet run results in:

FSC : WebSharper error FS9001: Error during bundling: Missing entry point or export. Add SPAEntryPoint attribute to a static method without arguments, or JavaScriptExport on types/methods to expose them. [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

The build failed. Fix the build errors and run again.

After a bit of digging I ended up replacing Website attribute with SPAEntryPoint, which results in:

namespace HelloWorld

module YourApp =

    open WebSharper
    open WebSharper.Sitelets

    [<SPAEntryPoint>]
        let Main = Application.Text (fun ctx -> "Hello World!")

Output of dotnet run:

C:\source\websharper-samples\HelloWorld\Client.fs(9,20,9,64): WebSharper error FS9001: Type not found in JavaScript compilation: WebSharper.Application [C:\source\websharper-samples\HelloWorld\HelloWorld.fsproj]

The build failed. Fix the build errors and run again.

Googling for this error doesn't give any results. Later I've been trying to modify the code based on the initial content of the template, I've also tried using the let Run = (Main ()).AppendTo "entrypoint" mentioned in v3 documentation (which I guess doesn't work because the API changed between v3 and v4), all to no avail.

So far I can't solve this problem, after at least a few hours of fighting against the "Hello world!" I just gave up... I've followed other WebSharper tutorials with greater success since then, but I think examples from the main page of the documetation which actually work would improve the new starter experience significantly. I'd be keen on trying to contribute to the documentation as well, but I'm still not even able to build these examples.

Carry over the previous pages that were not covered in new Sitelets/UI docs and are not obsolete (about WebSharper.Html).

Additions are needed:

• Attribute reference: split and customize for C#/F#. Add assembly-level uses of JavaScript attribute. Link new Sitelet docs. Update for namespace change in WebSharper 4.1
• Project Templates: cover templates in current installer
• Project Variables: update for BundleOnly, add equivalent command line flags

In this section of the documentation, subsection Inserting Views in the Doc, the following code is presented to exemplify textView:

let varTxt = Var.Create ""
let vLength =
    varTxt.View
    |> View.Map String.length
    |> View.Map (fun l -> sprintf "You entered %i characters." l)
div [] [
    Doc.Input [] varName
    textView vLength
]

I believe the Var used in Doc.Input (which now it is Doc.InputType.Text), varName, should be varTxt, thus resulting in the following:

let varTxt = Var.Create ""
let vLength =
    varTxt.View
    |> View.Map String.length
    |> View.Map (fun l -> sprintf "You entered %i characters." l)
div [] [
    Doc.Input [] varTxt
    textView vLength
]

As far as I know, this typo happens in both the 4.x version of the documentation and the one in the main branch. Can I fix this?

Runtime configuration settings such as resource URL overrides or WebSharper.StdlibUseCdn can be a bit confusing to understand, in particular now that they're not always set the same way (in App.config / Web.config on .NET Framework, and in appsettings.json on .NET Core). See dotnet-websharper/core#936 for an example of this confusion. We need a page similar to the one about compiler settings that lists the runtime settings available and explains how to configure them.

For example:

• Making a library WebSharper-compatible
• Switching from a Single-Page to Multi-Page application
• Converting server-side routing to client-side routing and optionally switch to SPA