Bolero 0.17 released | Bolero: F# in WebAssembly
source link: https://fsbolero.io/blog/20210417-bolero-0-17-released
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bolero 0.17 released
Define static content using Bolero.Html
We are happy to announce the release of Bolero version 0.17. Bolero is a library that enables writing full-stack applications in F#, whose client side runs in WebAssembly using Blazor.
The main highlight of this release is the capability to use Bolero.Html functions to generate the static server-side HTML. This comes as a replacement for the dynamically-compiled Razor page that was previously necessary for ASP.NET Core hosted applications.
Install the latest project template with:
dotnet new -i Bolero.Templates::0.17.10
Changes
#202 Add the ability to generate static HTML content using Bolero.Html functions.
For example, a simple page may look like this:
let index = doctypeHtml [] [ head [] [ title [] [text "Hello, world!"] ] body [] [ div [attr.id "main"] [ rootComp<Client.MyApp> ] boleroScript ] ]
In this sample, the call to
rootComp
inserts the Bolero (or Blazor) componentClient.MyApp
in the page. The call toboleroScript
inserts the script tag required by Blazor.These tags use the configuration passed to
AddBoleroHost
to determine whether the component is server-side or WebAssembly, and whether it is prerendered or not.This new feature is now used by default by the dotnet template instead of a dynamically-compiled Razor page. A new argument to
dotnet new
determines how the static HTML is generated:--hostpage=bolero
is the default and uses Bolero.Html functions.--hostpage=razor
uses a dynamically-compiled Razor page.--hostpage=html
uses a plain index.html file.
Learn more in the documentation.
#216 Add helpers to create virtualized components. This is a Blazor feature that allows rendering only the visible items in a collection.
// Display a virtualized list of 100 items. let items = [1..100] virtualize.comp [] items <| fun item -> div [] [textf "%i" item]
The helpers provide all the features of Blazor's
Virtualize
component, such as loading from a function rather than a collection, and placeholders while items are loading:// Display a virtualized list of items retrieved from a remote function. let getItems (r: ItemsProviderRequest) : ValueTask<ItemProviderResult> = async { let! items, totalCount = remote.GetItems(r.StartIndex, r.Count) return ItemsProviderResult(items, totalCount) } |> Async.StartAsTask |> ValueTask // Displayed while an item is being loaded. let placeholder = div [attr.classes ["my-placeholder"]] [] virtualize.compProvider [ virtualize.placeholder (fun _ -> placeholder) ] getItems <| fun item -> div [] [textf "%i" item]
#205 Breaking change: the
Value
property of ofRef<'T>
andHtmlRef
now has type'T option
rather than'T
. It isNone
if the reference hasn't been set usingattr.ref
.#214 Fix stripping F# metadata from assemblies when building in non-trimmed mode.
Happy coding!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK