Estoy tratando de generar SVG en el lado del servidor, pasándolos a un cliente usando el mecanismo RPC de WebSharper. Estoy basando esto en la plantilla websharper-web, usando dotnet core.

En aras de la minuciosidad, renderizo la plantilla así:

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

Definí un método RPC que devuelve mi SVG:

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

Esto está bien hasta ahora, pero no puedo, por mi vida, averiguar cómo cargar esto correctamente en el cliente. Lo más cerca que he estado es:

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

Éste:

  1. Verificaciones de tipo y compilaciones
  2. Carreras
  3. Lanza errores de JavaScript en tiempo de ejecución

Específicamente, obtengo TypeError: x is not a function. SourceMaps vincula el error profundamente en una biblioteca de WebSharper llamada Snap.fs, y que arroja ... comparativamente poca luz.

¿Es esto un error en WebSharper? ¿Debería estar funcionando? ¿Cuál es la forma correcta de incluir un Async<Doc> en un documento del lado del cliente como este? Si es posible, preferiría no usar jQuery; prefiero devolver JS que se carga de forma asincrónica en el SVG, en lugar de que jQuery lo conecte más tarde, pero estoy abierto a JQuery responde si esa es la mejor práctica aquí.

2
Gastove 22 sep. 2019 a las 23:01

1 respuesta

La mejor respuesta

La respuesta rápida es no, esto no funcionará como está, desafortunadamente, y lamento no haber pensado con más claridad cuando les di orientación anteriormente en el canal F # Slack. Por un lado, es una limitación del compilador de WebSharper no dar una advertencia de que no puede pasar valores Doc desde una RPC al cliente. La página de documentación de WebSharper para la comunicación remota enumera los requisitos de los tipos que pueden participar en dicho intercambio y, lamentablemente, Doc no califica.

Por otro lado, existen propuestas para hacer que las llamadas RPC estén más alineadas con la serialización, por ejemplo, dotnet -websharper / core # 930, allanando el camino para permitir que más tipos funcionen en RPC, o simplemente se podría conectar en soporte para valores Doc en RPC directamente para habilitar su escenario, simplemente porque debería funcionar. Este es uno de esos pocos casos de esquina que deben cubrirse, de hecho.

Lo que puede hacer ahora para evitar el problema es cambiar su RPC para devolver una representación SVG personalizada (algunas formas AST, por ejemplo) que se adapte a sus necesidades, y usarla para convertir a Doc en el lado del cliente.

1
Adam Granicz 23 sep. 2019 a las 00:14