Sutil icon indicating copy to clipboard operation
Sutil copied to clipboard

Compatibility with code produced from Html2Feliz

Open DejanMilicic opened this issue 3 years ago • 7 comments

I tested it and we are still missing these two

  1. Html.svg
  2. prop.children

example usage of children is like this

            Html.aside [
                prop.classes [ "fixed"; "z-50"; "md:relative" ]
                prop.children [
                    Html.input [
                        prop.type' "checkbox"
                        prop.classes [ "peer"; "hidden" ]
                        prop.id "sidebar-open"
                    ]
                ]                

DejanMilicic avatar Dec 07 '22 12:12 DejanMilicic

children is a strange one. We can just alias it to fragment though. SVG in general is going to be sketchy. Can I see the full example?

davedawkins avatar Dec 07 '22 13:12 davedawkins

Html.svg [
        prop.classes [ "h-6"; "w-6" ]
        prop.fill "none"
        prop.stroke "currentColor"
        prop.strokeWidth "2"
        prop.viewbox "0 0 24 24"
        prop.xmlns "http://www.w3.org/2000/svg"
        prop.children [
            Html.path [
                prop.strokeLinecap "round"
                prop.strokeLinejoin "round"
                prop.d "M4 6h16M4 12h16M4 18h16"
            ]
        ]
    ]

DejanMilicic avatar Dec 07 '22 13:12 DejanMilicic

We're a long way short on the SVG aspect. I'll take a look at FelizEngine and see what we have there

davedawkins avatar Dec 07 '22 13:12 davedawkins

I think we may omit Svg for now if it is too much work

DejanMilicic avatar Dec 07 '22 13:12 DejanMilicic

Hi Dave

I am interested in exploring what it would take to make complete or more complete the SVG support in Sutil. However, I am struggling to get my head around where to even start.
I am still learning about Sutil. To learn, I want to build something a bit more than a toy example. Any thoughts / pointers will be helpful .

Many thanks

PiotrW3106 avatar Aug 12 '23 12:08 PiotrW3106

Hi Piotr The SVG support is fairly good right now (or so I thought), as of around 2-3 releases ago. I may need to update the docs and create more examples.

Is there anything in particular you want to learn about? For example, "how to create SVG with Sutil", or "how to contribute to SVG in Sutil", or ... ?

For "something more than a toy example", I find that it's best to create something I need, or that might help with an interest I have, or is just fun to implement. I created https://doodletoy.net exactly for that reason, to do something more than a toy (well, it is a toy, but the scope goes beyond a "todo list").

Let me know if I can help you Dave

davedawkins avatar Aug 12 '23 23:08 davedawkins

Hi Dave

Thank you for the prompt response. I have clearly mis-understood Sutil's SVG capabilities based on skim reading the issues and the doc site and assuming stuff incorrectly.

I really like the idea of a pure F# light svelte like framework with no major dependencies on the JS ecosystem.

Your suggestion for me to explore doodletoy is really helpful as scanning the doodletoy docs I can see already there are a whole bunch of observations to the thoughts I was starting to form in preparation for building a "bigger than a toy" project.

Now I just need to "go for it" ;-)

Thanks again

Piotr

PiotrW3106 avatar Aug 13 '23 17:08 PiotrW3106