svg import breaks html

[mohe2015]

Hi,

as shown in the last commit in the following reproducer repository https://github.com/mohe2015/outwatch-issue-1/blob/master/webapp/src/main/scala/webapp/Main.scala the svg import breaks the html.

object Main {
  def main(args: Array[String]): Unit =
    Outwatch.renderInto[SyncIO]("body", app).unsafeRunSync()

  def app = {
    import svg._ // breaks the link
    a("Hello World!")
  }
}

If you open that page in chromium based browsers it shows nothing but if you click "edit as html" and e.g. change the text it suddenly appears. If you open the page in firefox it also shows nothing but if you inspect the element it says "edit as svg" which hints that this somehow is interpreted as an svg element.

I think this is highly unexpected behaviour especially when it's not that clearly visible in the code after each other. I think the svg behaviour should only happen within svg elements except if there is a good reason for other behaviour.

Kind regards
Moritz

[cornerman]

Good point, I also stumbled over this in the past, it is really confusing.

Currently i would recommend to use the svg import only locally. Alternatively you could refer to it by full package name or alias.

There are some things to consider with the svg/html conflicts. @busti looked into it as well some time ago.

[busti]

Unfortunately abstracting over SVG / HTML elements any further is not worth the effort. Solving this on the type-level would need 3 type parameters on VNode and one on VModifier, which we decided would make the library to heavy.

I have some ideas about making it work in scala 3, but adoption is slow.

When using SVG and HTML tags within the same scope it can also be helpful to redirect some imports like this: import outwatch.dsl.svg.{a => _, _}. This imports everything from the svg namespace without the a.

[mohe2015]

Would it be possible to print a warning to the console at runtime or is that similar effort?

[busti]

I don't think that there is an easy way to detect that during compile time without using a macro or a compiler plugin.

Scapegoat has a linting feature for variable shadowing, but I do not know it that works for imports since these often share names.

Unfortunately inserting an SVG into an HTML element at runtime is perfectly valid.

It could probably be checked by the vdom at runtime, but that would require a string comparison on each insertion and wouldn't really help much against programmer errors.

I found that creating a method or a custom file for each SVG component that I write and importing the svg namespace only locally worked out fine.