dotnet-websharper / docs Goto Github PK
View Code? Open in Web Editor NEWDocumentation for WebSharper <4.x and libraries
Home Page: https://websharper.com
License: Apache License 2.0
Documentation for WebSharper <4.x and libraries
Home Page: https://websharper.com
License: Apache License 2.0
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:
JavaScript
attribute. Link new Sitelet docs. Update for namespace change in WebSharper 4.1BundleOnly
, add equivalent command line flagsIn 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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.