Comments (21)
Basically we'd need to define SVG tags and attributes in the same manner as we defined those for HTML elements. So in terms of types it's all very similar to what we already have.
If I recall correctly, ScalaTags already has those listings. I'm not sure how complete those are, as we saw we needed quite a bit of work to get its HTML attribute listings to our desired shape.
However, I haven't looked at SVG spec in detail. I don't know how complicated the types are, and whether we'd need reflected attributes for SVG elements.
So, in practical terms, to a first approximation, we need to:
- Create generic
svg/Attrs.scala
trait with typed listings of SVG attributes - Same for
svg/Tags.scala
(might need multiple files similar to how HTML tags are done) - Add JS-specific type aliases of the above to
jsdom/defs/package.scala
- Probably need a new key class:
SvgAttr
(I don't think we should reuse Attr for that), and a canonical builder for it (seecanonical
dir). Don't want to accidentally use SVG attrs on HTML elements, and without #13 not sure what else we can do. Not sure about this, and IIRC you're not using these concrete classes in Outwatch, so I guess I'll need to think about this some time later. - For the
Tag
class, I think no need to createSvgTag
, maybe Tag[SVGElement] would be enough. Not sure. - Lastly, we'd need to add SVG to the bundle in CompileTest. I think I'm ok allowing naming collisions between SVG and HTML, since most librarries will probably choose to namespace everything svg-related. Things within SVG should probably be free of collisions and follow the same naming guidelines as our HTML stuff
Unfortunately I don't think I'll have the time to do all this work any time soon (I also don't expect my own need for SVG in the next few months), so you'll need to carry the load on this one, sorry. I can still help with soft stuff like advice / reviews / design.
For reference: https://developer.mozilla.org/en-US/docs/Web/SVG
from scala-dom-types.
Thank you for the explanation, I will give it a try soon.
from scala-dom-types.
Would like to work on this together ,what's the current status?
from scala-dom-types.
Is it possible to provide some implicits and reuse part of scalatags
library?
from scala-dom-types.
@doofin Probably, but it would need to be part of your app, not part of SDT.
You can create a Modifier
that gets the JS DOM element created by ScalaTags and appends it to the given element in its apply
method. Then you could use that Modifier
as a child element in your code.
from scala-dom-types.
@doofin Nice, let's do that together. I think I will have some time tomorrow to start on a branch.
from scala-dom-types.
@fdietze Great! I think we can just copy-paste lots of code from scalatags.
from scala-dom-types.
@raquo thanks! After adding svg support for scala dom types ,how to add that to laminar?
from scala-dom-types.
@doofin As a starting point, Laminar's bundle
object will need to include new svg traits, most probably in an inner svg
object to namespace things better.
Laminar will probably need a bunch of changes to introduce the distinction between DOM Elements and DOM HTMLElements. Some of those changes will actually need to happen in Scala DOM Builder, and maybe even also in Scala DOM TestUtils. I was anticipating an eventual need for this distinction from the very beginning and can deal with the Laminar / SDB side of things once the design of SVG support in SDT is established.
from scala-dom-types.
PS if borrowing code from ScalaTags please make sure to preserve any "MDN" marking in the comments – this is an indicator for a different license which we also honor in SDT's license.
from scala-dom-types.
@raquo Thanks,we do have to pay attention to license while using code from other project
from scala-dom-types.
@doofin I just started the branch and made a PR: #22
Help is much appreciated as my time is also limited.
from scala-dom-types.
I have added the svgAttrs file and a few props,please check their correctness
from scala-dom-types.
It seems that pull requests page is not a good place to put information,for that a merge would permanently close the pr,so I put everything here:
For reference:
- https://developer.mozilla.org/en-US/docs/Web/SVG
- SVG-Tags in scalatags with MDN documentation:
https://github.com/lihaoyi/scalatags/blob/44cbd0602d40186d33d39b8d4a259f681d2e4a3b/scalatags/shared/src/main/scala/scalatags/generic/SvgTags.scala - SVG tag to dom-type association in scalatags
https://github.com/lihaoyi/scalatags/blob/44cbd0602d40186d33d39b8d4a259f681d2e4a3b/scalatags/js/src/main/scala/scalatags/jsdom/SvgTags.scala
- (half finished) Create generic
svg/Attrs.scala
trait with typed listings of SVG attributes
(created : https://github.com/raquo/scala-dom-types/blob/svg/shared/src/main/scala/com/raquo/domtypes/generic/defs/attrs/svgAttrs.scala ) - Same for
svg/Tags.scala
(might need multiple files similar to how HTML tags are done)
(created: https://github.com/raquo/scala-dom-types/blob/svg/shared/src/main/scala/com/raquo/domtypes/generic/defs/tags/SvgTags.scala ) - Add JS-specific type aliases of the above to
jsdom/defs/package.scala
(https://github.com/raquo/scala-dom-types/blob/svg/js/src/main/scala/com/raquo/domtypes/jsdom/defs/package.scala) - Probably need a new key class:
SvgAttr
(I don't think we should reuse Attr for that), and a canonical builder for it (seecanonical
dir). Don't want to accidentally use SVG attrs on HTML elements, and without #13 not sure what else we can do. Not sure about this, and IIRC you're not using these concrete classes in Outwatch, so I guess I'll need to think about this some time later.
(Don't understand this point,Currently I am reusinglazy val accentHeight = stringAttr("accent-height")
,will there be problems?
) - For the
Tag
class, I think no need to createSvgTag
, maybe Tag[SVGElement] would be enough. Not sure.
(Currently as T[SvgElement]) - Lastly, we'd need to add SVG to the bundle in CompileTest. I think I'm ok allowing naming collisions between SVG and HTML, since most librarries will probably choose to namespace everything svg-related. Things within SVG should probably be free of collisions and follow the same naming guidelines as our HTML stuff
- SVG Namespaces? (No need to do this in domtypes?)
fixes #20
from scala-dom-types.
It seems that SVG Namespaces?
thing should be done in dom-builders and replace dom.document.createElement
with dom.document.createElementNs
?
from scala-dom-types.
Let's clear up the terminology first. When I said "choose to namespace everything svg-related" I meant that consuming libraries such as Scala DOM Builder and Laminar will be responsible for making an svg
object that would extend all the new traits you created.
Now there's also the XML/SVG namespacing that you're referring to now, let's think how to deal with that.
Dom Builder has a trait ElementApi
, which has a method def createNode[Ref <: BaseElementRef](element: N with Element[N, Ref, BaseRef]): Ref
. Despite a bit misleading name and type signature, we currently use it to create HTML elements only.
I think createNode should really be called createElement, and we need a new method called createElementNs that we would use for namespaced SVG. Now, JsElement
will probably need to become a trait that is extended by JsHtmlElement (same implementation as right now), and JsSvgElement (kind of the same as JsHtmlElement but calling the createElementNS method).
Roughly I think that's the idea. I didn't have a chance to look deeper into this yet, sorry.
from scala-dom-types.
Seems that svg support is close to finish! @fdietze But I can't find where to do this Lastly, we'd need to add SVG to the bundle in CompileTest
(instructions given by @raquo )
from scala-dom-types.
@doofin I took care of the CompileTest setup, see latest commit in #25
from scala-dom-types.
@doofin So we will need to start working this up the chain to Scala DOM Builder, and at that point we will need to make a simple test, and for this I need an example SVG file from you. It should have a few different SVG elements in it (not more than 10), and those elements should have attributes which accept different kinds of values – for example numbers and strings, or I don't know, booleans? The more different types the better. This SVG file should render something obvious like maybe geometric shapes of various colors and sizes.
We will then take this SVG file and use it as a test case in Scala DOM Builder to make sure that our functionality works.
from scala-dom-types.
@raquo Great! I have started a PR on dom builder and with more time I will look more closely to reviews and improve
from scala-dom-types.
@doofin Awesome, thanks!
from scala-dom-types.
Related Issues (20)
- Make it possible to have a different API for cls / className / classNames HOT 4
- Unescaped text entity -- raw() HOT 9
- Separation of reflected attributes and attributes with complex keys HOT 5
- Automatically generate dom types HOT 4
- Key renaming proposals HOT 4
- Discussion about lazy val definitions HOT 8
- implicit def eventPropToEventPropTransformation interferes sometimes HOT 2
- img loading attribute not supported HOT 2
- Support fullscreenchange event HOT 2
- Merge colliding html and svg attr names into shared namespace. HOT 3
- More complete code example HOT 1
- Aria Attributes should be usable from SVG too, not just HTML HOT 3
- Add flow-relative CSS properties HOT 2
- Server Side Rendering HOT 4
- Support HTML Dialog Element HOT 6
- Switch definitions from lazy vals to vals? HOT 2
- RFC: Use concrete types instead of generic type params? HOT 20
- Add info about supported tags to props/attrs HOT 6
- Publish defs (and generators?) for popular web component libraries, e.g. UI5, Material HOT 10
- Add ff4s to list of UI libs that use scala-dom-types HOT 13
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scala-dom-types.