使用 WebSharper 在服务器端渲染 SVG

Question

我正在尝试在服务器端生成 SVG，并使用 WebSharper 的 RPC 机制将它们传递给客户端。我基于websharper-web 模板，使用dotnet 核心。

为了完整起见，我将模板渲染如下：

// Site.fs
    let Draw ctx =
        Templating.Main ctx EndPoint.Home "Home" [
            h1 [] [text "Say Hi to the server!"]
            div [] [client <@ Artery.Main() @>]
        ]

我已经定义了一个返回我的 SVG 的 RPC 方法：

module Server =
    [<Rpc>]
    let FetchDrawing () =
        let center = {Svg.Point.X=50; Svg.Point.Y=50}
        let r = 25
        let circle = Svg.Shape.Circle(center=center, radius=r)
        async {
            return circle |> Svg.render
        }
    // Returns an SvgElement.circle with cx, cy, and r set

到目前为止这很好，但我一辈子都无法弄清楚如何在客户端中正确加载它。我得到的最接近的是：

[<JavaScript>]
module Artery =
    let Main() =
        let circle = Server.FetchDrawing()
        div [] [
            SvgElements.svg [SvgAttributes.height "100"
                             SvgAttributes.width "100"] [
                Doc.Async circle
                ]
            ]

这个：

1. 类型检查和编译
2. 跑步
3. 引发运行时 JavaScript 错误

具体来说，我得到了TypeError: x is not a function。 SourceMaps 将错误链接到一个名为Snap.fs 的 WebSharper 库中，它揭示了……相对较少的光。

这是 WebSharper 中的错误吗？ 应该这行得通吗？在这样的客户端文档中包含Async<Doc> 的正确方法是什么？如果可能，我宁愿不使用 jQuery——我宁愿返回异步加载到 SVG 中的 JS，而不是让 jQuery 稍后插入——但我对 JQuery 持开放态度如果这是这里的最佳做法，请回答。

Answer 1

快速回答是否定的，不幸的是，这不会按原样工作，并且很抱歉当我早些时候在 F# Slack 频道上为您提供指导时没有更清楚地思考。一方面，WebSharper 编译器限制不会发出警告，即您不能将 Doc 值从 RPC 传递给客户端。 WebSharper documentation page for remoting 列出了可以参与此类交换的类型的要求，不幸的是Doc 不符合条件。

另一方面，有一些建议可以使 RPC 调用更符合序列化，例如dotnet-websharper/core#930，为使更多类型在 RPC 中工作铺平道路，或者可以只支持Doc 值直接在 RPC 中启用您的场景，仅仅是因为它们应该工作。确实，这是少数需要涵盖的极端案例之一。

您现在可以做的就是更改您的 RPC 以返回适合您需求的自定义 SVG 表示（例如一些形状的 AST），并使用它在客户端转换为 Doc .