Использование WebSharper для рендеринга SVG на стороне сервера - PullRequest
2 голосов
/ 22 сентября 2019

Я пытаюсь генерировать SVG на стороне сервера, передавая их клиенту, используя механизм RPC WebSharper.Я основываю это на шаблоне 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() @>]
        ]

Я определил метод RPC, который возвращает мой 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

Этопока все в порядке, но я не могу при всей жизни понять, как правильно загрузить это в клиент.Самое близкое, что я получил:

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

This:

  1. Проверка типов и компиляция
  2. Выполнения
  3. Выдает ошибки JavaScript во время выполнения

В частности, я получаю TypeError: x is not a function.SourceMaps связывают ошибку глубоко в библиотеке WebSharper, которая называется Snap.fs, и которая проливает ... сравнительно мало света.

Это ошибка в WebSharper? Должно ли это работать?Как правильно включить Async<Doc> в документ на стороне клиента, как это?Если возможно, я бы предпочел бы не использовать jQuery - я бы предпочел вернуть JS, который асинхронно загружается в SVG, а не подключать его позже через jQuery - но я открыт для ответов JQueryесли это лучшая практика здесь.

1 Ответ

1 голос
/ 23 сентября 2019

Быстрый ответ - нет, это, к сожалению, не будет работать, и, к сожалению, извините за то, что не подумал более четко, когда я давал вам руководство ранее на канале F # Slack.С одной стороны, компилятор WebSharper ограничение не должен выдавать предупреждение о том, что вы не можете передать Doc значения из RPC клиенту.На странице документации WebSharper для удаленного взаимодействия перечислены требования к типам, которые могут участвовать в таком обмене, и, к сожалению, Doc не подходит.

С другой стороны, есть предложения посделать вызовы RPC более согласованными при сериализации, например dotnet-websharper / core # 930 , прокладывая путь к включению большего количества типов для работы в RPC, или можно просто подключить поддержку значений Doc в RPCнепосредственно, чтобы включить ваш сценарий, просто потому что они должны работать.Это один из тех немногих угловых случаев, которые действительно необходимо охватить.

Что вы можете сделать сейчас, чтобы обойти проблему, это изменить свой RPC для возврата пользовательского представления SVG (например, некоторых AST фигур)который соответствует вашим потребностям, и используйте его для преобразования в Doc на стороне клиента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...