knupfer / type-of-html

High performance type safe html generation
BSD 3-Clause "New" or "Revised" License
126 stars 5 forks source link

How do I deal with inline Svg with type-of-html? #5

Open tonyalaribe opened 3 years ago

tonyalaribe commented 3 years ago

It seems there are no svg elements or attributes defined. Is there any recommended workaround?

I also tried creating custom attributes, but couldn't get it to work. It just says the bool constructors are not in scope: image

knupfer commented 3 years ago

Well, it seams you don't have the Prelude imported. You can import Data.Bool if you wish to avoid the Prelude, Data.Type.Bool isn't needed in this snippet. Please make also sure, that you use the DataKinds language pragma. Just as you tried, you can define your custom attributes and your custom elements just fine. For custom elements, you'll need probably as well TypeOperators language pragma.

Please report if this works for you. Perhaps I'll add natively svg stuff in the coming weeks (pr welcome). Greets

tonyalaribe commented 3 years ago

That's true. Simply importing the Prelude fixed it. Thanks!!! I'm still new to haskell, so I was mostly following the examples from the repository. But it seems to work now. Or at least, I get a different set of errors now. Mostly related to the custom elements which I will try.

About Svg, I'm happy to make a PR for that. Thanks!

tonyalaribe commented 3 years ago

Just on the topic of making a pr for Svg support, How would you recommend implementing this? I feel Svg would be better in a different file/namespace. Then we could do something like import Html.Svg or something similar, because the Svg elements and attributes list is quite large as well, so maybe we can benefit from keeping it separate from HTML?

Also, I imagine just doing this via Custom elements (CustomElement and CustomA) is not really clean, or what do you think? How can I extend the attributes and elements list from a different module?

-- | 4 The elements of HTML
data Element (name :: Symbol) (categories :: [ContentCategory]) (contentModel :: ContentCategory) (contentAttributes :: [Symbol]) where

  DOCTYPE
    :: Element
    "!DOCTYPE html"
    '[]
    None
    '[]

  -- | \ 4.1 The document element
  --     4.1.1
  Html
    :: Element
    "html"
    '[]
    -- A head element followed by a body element.
    (Elements ["head", "body"])
    (ManifestA & '[])

Sorry I'm really new to haskell, so I don't have a good grasp of type level things. But if you point me in the right direction, this should be doable. The bulk of the work is mostly the manual work of listing out the elements and the attributes.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

tonyalaribe commented 3 years ago

Hi, gentle reminder about this. I know this issue is closed, but it would be nice to get a heads-up, which will help me work on the svg support or. :)

knupfer commented 3 years ago

Hi, sorry for the late answer. There are at least some options to implement this.

Just put it all into data Element and export everything, or put everything into data Element and make a handcrafted exportlist of constructors. The second option is a headache for maintenance, but allows for an Html.SVG module...

I'll think a bit more, but it seems to me, that svg is widely used and therefore well put into data Element.

knupfer commented 3 years ago

Thinking more about it, perhaps a data family would be a good extensible fit...

tonyalaribe commented 3 years ago

Could you give a little code example?

On Mon, 7 Jun 2021 at 19:32, quxbar @.***> wrote:

Thinking more about it, perhaps a data family would be a good extensible fit...

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/knupfer/type-of-html/issues/5#issuecomment-856125004, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSCVAXM2RVWU46BCCDOPCTTRT7BDANCNFSM4436SGGA .

knupfer commented 3 years ago

Just pushed a new version to github, look at the Html.Aria module for examples for attributes and at the Html.Obsolete module for examples for elements. If your stuck, just write a message