Implements custom elements with xml namespaces (for SVG) #622

oderwat · 2021-10-22T10:14:18Z

I added namespaces to elements and added a method to create custom tags. The reason is, that I wrote an auto converter that can translate HTML to go-app declarative syntax. While experimenting with it, I found that SVG support was missing. But adding all of the SVG seems to be a lot of work. After making a simple variant for custom elements I realized that this will not work for SVG because those elements need to be in a special namespace. So I added namespace support.

I think my implementation is quite nice. I added a test and documentation with an example of the usage:

func SVG(w, h int) app.HTMLCustom {
	return app.Custom("svg", false, app.SVG).
		Attr("width", w).Attr("height", h)
}

func Circle(cx, cy, r int, stroke string, width int, fill string) app.HTMLCustom {
	return app.Custom("circle", false, app.SVG).
		Attr("cx", cx).
		Attr("cy", cy).
		Attr("r", r).
		Attr("stroke", stroke).
		Attr("stroke-width", width).
		Attr("fill", fill)
}

func (c *Dynamic) Render() app.UI {
	return SVG(100, 100).Body(
		Circle(50, 50, 40, "black", 3, "red"),
		app.Text("Sorry, your browser does not support inline SVG"),
	)
}

Of course, it adds the "xmlns" field to every element. But I think this is better than having another interface for SVG.

I am contemplating if there should be an "xmlns" method instead which sets the namespace for every element. That may be a better solution than adding the namespace to the Custom() method. Maybe I try that too and push a commit that uses this later on.

EDIT: There is another implementation using an XMLNS() method on the elements instead of the many parameters to Custom(). See below!

oderwat · 2021-10-22T22:20:13Z

The second commit changes how the xmlns is set by using a special method XMLSN(). It also defaults Custom() to non-self-closing elements and adds a CustomSC() for self-closing elements. I think both changes fit better into the existing code and makes the usage more straightforward:

func SVG(w, h int) app.HTMLCustom {
	return app.Custom("svg").
		XMLNS(app.SVG).
		Attr("width", w).Attr("height", h)
}

func Circle(cx, cy, r int, stroke string, width int, fill string) app.HTMLCustom {
	return app.Custom("circle").
		XMLNS(app.SVG).
		Attr("cx", cx).
		Attr("cy", cy).
		Attr("r", r).
		Attr("stroke", stroke).
		Attr("stroke-width", width).
		Attr("fill", fill)
}

func (c *Dynamic) Render() app.UI {
	return SVG(100, 100).Body(
		Circle(50, 50, 40, "black", 3, "red"),
		app.Text("Sorry, your browser does not support inline SVG"),
	)
}

I would love to see this added as it makes SVG handleable without all the Raw() shenanigans.

maxence-charriere

Good idea to use the xmlns to know if a NS element should be created. At this point I'm wondering if there should be just an Elem() and SelfClosing() functions.

The reason a did not implement SVG is that it has its own specs and attributes and I did not want to add this to the main package. I'm really wondering if it is worth translating everything. In my projects I had been pretty successful using them in Raw().

maxence-charriere · 2021-10-25T07:16:26Z

pkg/app/custom.go

+)
+
+// HTMLCustom is the interface that describes a custom HTML element including its namespace.
+type HTMLCustom interface {


It seems like this could be generated since it takes global attrs and global event handlers.

Yes! I missed that because my first implementation did not use the "XMLNS" attribute. But this can go. I make the modification.

maxence-charriere · 2021-10-25T07:21:07Z

pkg/app/custom.go

+}
+
+// CustomSC returns an self closing HTML element of the given name in the given namespace
+func CustomSC(name string) HTMLCustom {


This still returns HTMLCustom which has the Body method. User might make errors with this by setting a body.

Yes. I agree that is bad.

oderwat · 2021-10-25T10:35:11Z

The reason a did not implement SVG is that it has its own specs and attributes and I did not want to add this to the main package. I'm really wondering if it is worth translating everything. In my projects I had been pretty successful using them in Raw().

I had the "raw" version in my HTML 2 go-app declarative converter but think it would be more useful to have those "custom" ways to create an abstraction. Like with my example. You can build a little library of SVG helpers to create graphs and don't need to go back to string manipulation.

I don't think that the whole SVG spec should be included and if, then in a separate package maybe.

oderwat · 2021-10-25T11:14:18Z

I added a new implementation using generate and Elem("custom")

I extended generate so it can also handle Elem() (which needs a parameter that leads to a slightly different implementation and test)
I still added a test for Elem() (elem_test.go) to make sure it works as expected
I did not like to add SelfClosing() as method to HTMLElem when ElemSC() is so much easier to do.

What do you think?

oderwat · 2021-10-25T11:31:42Z

I don't understand why it changes scripts.go. Shouldn't the script be the same for all Go installations with the same version? I use v1.17.2 of Go which is the most current one and should have the "best" wasm file with it.

If the file differs between systems or is dependent on Go versions it may be better to have it included in another way maybe?

oderwat · 2021-11-01T12:27:46Z

@maxence-charriere I actually need to know if you will take this (or a similar) PR eventually.

maxence-charriere · 2021-11-01T12:31:34Z

I think so, I see the need for a custom element.

oderwat · 2021-11-01T12:42:05Z

What did it need to make this go through then?

maxence-charriere · 2021-11-01T14:33:07Z

I need a bit time to think it. I ll probably take your branch and modify it directly.

oderwat · 2021-11-01T14:34:16Z

OK!

oderwat · 2021-11-01T14:37:27Z

As mentioned I wrote a HTML to declarative converter which helps us to translate sites quickly esp. for prototyping. It may help you to see some example of what the current implementation looks like:

func Calendar() app.UI {
	return app.Section().Body(
	app.Div().Class("mx-auto", "container", "py-20", "px-5").Body(
		app.Div().Class("w-full", "flex", "items-cente", "justify-between").Body(
			app.Div().Body(
				app.A().TabIndex(0).Role("link").Class("cursor-pointer", "focus:text-gray-400", "hover:text-gray-400", "text-xs", "xl:text-base", "text-gray-900", "dark:text-gray-100").Text("September 2018"),
				),
			app.Div().Class("md:flex", "justify-center", "hidden", "w-1/2").Body(
				app.Div().Class("flex", "items-center").Body(
					app.Button().Class("cursor-pointer", "focus:text-gray-400", "hover:text-gray-400").Aria("label", "calendar backward").Body(
						app.Elem("svg").XMLNS("http://www.w3.org/2000/svg").Class("").Attr("width", "12").Attr("height", "12").Attr("viewBox", "0 0 24 24").Attr("stroke-width", "1.5").Attr("stroke", "#353F47").Attr("fill", "none").Attr("stroke-linecap", "round").Attr("stroke-linejoin", "round").Body(
							app.Elem("path").XMLNS("http://www.w3.org/2000/svg").Attr("stroke", "none").Attr("d", "M0 0h24v24H0z").Attr("fill", "none"),
							app.Elem("polyline").XMLNS("http://www.w3.org/2000/svg").Attr("points", "15 6 9 12 15 18"),
							),
						),
					app.Button().Class("cursor-pointer", "ml-20", "focus:text-gray-400", "hover:text-gray-400").Aria("label", "calendar forward").Body(
						app.Elem("svg").XMLNS("http://www.w3.org/2000/svg").Class("").Attr("width", "12").Attr("height", "12").Attr("viewBox", "0 0 24 24").Attr("stroke-width", "1.5").Attr("stroke", "#353F47").Attr("fill", "none").Attr("stroke-linecap", "round").Attr("stroke-linejoin", "round").Body(
							app.Elem("path").XMLNS("http://www.w3.org/2000/svg").Attr("stroke", "none").Attr("d", "M0 0h24v24H0z").Attr("fill", "none"),
							app.Elem("polyline").XMLNS("http://www.w3.org/2000/svg").Attr("points", "9 6 15 12 9 18"),
							),
						),
					),
				),
			app.Div().Body(
				app.A().Class("text-indigo-700", "cursor-pointer", "focus:text-indigo-400", "hover:text-indigo-400").Href("javascript:void(0)").Body(
					app.H4().Class("", "text-xs", "lg:text-base", "font-light", "text-right").Text("Month view"),
					),
				),
			app.Div().Body(
				app.A().Class("cursor-pointer", "text-gray-700", "focus:text-gray-400", "hover:text-gray-400").Href("javascript:void(0)").Body(
					app.H4().Class("text-xs", "lg:text-base", "", "dark:text-gray-200", "font-light", "text-right", "ml-6").Text("Week view"),
					),
				),
			app.Div().Body(
				app.A().Class("cursor-pointer", "text-gray-700", "focus:text-gray-400", "hover:text-gray-400").Href("javascript:void(0)").Body(
					app.H4().Class("text-xs", "lg:text-base", "", "dark:text-gray-200", "font-light", "text-right", "ml-6").Text("Day view"),
					),
				),
			),
....

P.S.: Seeing this I wonder why we create empty Class("") attributes. Maybe I want to clean that up in the converter. It seems like they are in the original HTML. Well fair enough.

oderwat · 2022-01-09T19:33:14Z

I just updated this to the latest version of go-app (as we use it quite a lot now in our projects).

oderwat · 2022-01-09T19:37:11Z

Looks like I missed something as I got build errors. No time to check this currently. Our apps seem to compile fine.

oderwat · 2022-03-14T13:09:09Z

Those test results do not make any sense to me. Do you have an idea what the problem is?

For:

How can stob() be undefined in line 484?

go test -v -race ./... also runs totally fine on my local system.

maxence-charriere · 2022-03-14T15:31:48Z

I removed stob. Had some problems with some go versions.

oderwat · 2022-03-14T15:41:27Z

I removed stob. Had some problems with some go versions.

I see. I forgot to update my forks master for some mysterious reason ;-)

oderwat · 2022-04-11T16:35:02Z

@maxence-charriere What do you think about this PR? Is there anything I can do, to increase your acceptance?

maxence-charriere · 2022-04-11T17:20:14Z

I want to make some work about how the html elements are dealt with. Keep this open since your work as often be very insightful about how the package should evolve.

oderwat · 2022-04-11T18:12:45Z

Sadly this PR is holding us back to use your releases for our development as we use app.Elem (mostly for SVG) instead of app.Raw and I actually do not want to rewrite the pages using this.

The other PRs (especially the loading progress) are more optional, even if the SkipAllUpdates seem to have quite some impact. We can gate those more easily in builds and just use them on checkpoint releases.

So if you only think about the implementation itself, but not about the "how to use it". then you may consider accepting the PR and changing the implementation later, maybe together with the introduction of generics.

I think having app.Elem() and the accompanying XMLNS will remove the app.Raw() usage at least for SVG and its sub-elements.

P.S.: I came back to this because pojntfx/html2goapp#1 (comment) mention this same problem and I noticed that you started to add notifications to the master branch which makes some of my later work obsolete in the near future.

- Extended generate so it can also handle Elem() - Added a test for Elem() (elem_test.go) - I did not like to add SelfClosing() as method to HTMLElem when ElemSC() is so much easier to do.

oderwat · 2022-05-25T12:50:42Z

We are (extensively) using this in our projects and it proves quite usefull when creating SVG on the fly. So I hope that this PR or something similar will finally be accepted.

maxence-charriere · 2022-05-26T07:41:07Z

An update on this. I’m planning changes where this will be possible. Keeping this open since i am using it as a reference for the need.

Working on it now.

oderwat · 2022-06-25T13:50:52Z

Closing because #739 is making the dream true ;-)

oderwat changed the title ~~Implements custom tags e.g. app.custom("svg")~~ Implements custom tags e.g. app.Custom("svg") Oct 22, 2021

oderwat force-pushed the mtx-custom-tags branch from 821c94e to cc9dc7e Compare October 22, 2021 21:39

oderwat changed the title ~~Implements custom tags e.g. app.Custom("svg")~~ Implements custom tags and element namespaces Oct 22, 2021

oderwat force-pushed the mtx-custom-tags branch from cc9dc7e to 2ecc455 Compare October 22, 2021 21:51

oderwat changed the title ~~Implements custom tags and element namespaces~~ Implements custom tags and element namespaces (for SVG) Oct 22, 2021

oderwat changed the title ~~Implements custom tags and element namespaces (for SVG)~~ Implements custom elements with xml namespaces (for SVG) Oct 22, 2021

maxence-charriere reviewed Oct 25, 2021

View reviewed changes

oderwat requested a review from maxence-charriere October 28, 2021 09:20

oderwat force-pushed the mtx-custom-tags branch from bcad00d to 6a379fb Compare November 15, 2021 00:19

oderwat force-pushed the mtx-custom-tags branch from 6a379fb to a51f91d Compare January 9, 2022 19:32

oderwat force-pushed the mtx-custom-tags branch from a51f91d to e43fc14 Compare January 9, 2022 20:46

oderwat force-pushed the mtx-custom-tags branch from e43fc14 to 57ae299 Compare March 14, 2022 11:05

oderwat force-pushed the mtx-custom-tags branch from 57ae299 to da82f9e Compare March 14, 2022 15:39

oderwat force-pushed the mtx-custom-tags branch from da82f9e to 4a424eb Compare March 26, 2022 12:54

oderwat mentioned this pull request Apr 11, 2022

How to hook up an event handler for Raw html content #717

Closed

oderwat force-pushed the mtx-custom-tags branch from 4a424eb to 13ff2a3 Compare May 24, 2022 19:37

Implements custom tags with xml namespaces

b695408

- Extended generate so it can also handle Elem() - Added a test for Elem() (elem_test.go) - I did not like to add SelfClosing() as method to HTMLElem when ElemSC() is so much easier to do.

oderwat force-pushed the mtx-custom-tags branch from 13ff2a3 to b695408 Compare May 25, 2022 10:52

maxence-charriere mentioned this pull request Jun 16, 2022

Elem refactoring and customizable element #735

Closed

oderwat closed this Jun 25, 2022

nathanhack mentioned this pull request Sep 25, 2023

SVG #890

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implements custom elements with xml namespaces (for SVG) #622

Implements custom elements with xml namespaces (for SVG) #622

oderwat commented Oct 22, 2021 •

edited

Loading

oderwat commented Oct 22, 2021

maxence-charriere left a comment

maxence-charriere Oct 25, 2021

oderwat Oct 25, 2021

maxence-charriere Oct 25, 2021

oderwat Oct 25, 2021

oderwat commented Oct 25, 2021

oderwat commented Oct 25, 2021

oderwat commented Oct 25, 2021

oderwat commented Nov 1, 2021

maxence-charriere commented Nov 1, 2021

oderwat commented Nov 1, 2021

maxence-charriere commented Nov 1, 2021

oderwat commented Nov 1, 2021

oderwat commented Nov 1, 2021 •

edited

Loading

oderwat commented Jan 9, 2022

oderwat commented Jan 9, 2022

oderwat commented Mar 14, 2022

maxence-charriere commented Mar 14, 2022 •

edited

Loading

oderwat commented Mar 14, 2022

oderwat commented Apr 11, 2022

maxence-charriere commented Apr 11, 2022

oderwat commented Apr 11, 2022

oderwat commented May 25, 2022

maxence-charriere commented May 26, 2022 •

edited

Loading

oderwat commented Jun 25, 2022

Implements custom elements with xml namespaces (for SVG) #622

Implements custom elements with xml namespaces (for SVG) #622

Conversation

oderwat commented Oct 22, 2021 • edited Loading

oderwat commented Oct 22, 2021

maxence-charriere left a comment

Choose a reason for hiding this comment

maxence-charriere Oct 25, 2021

Choose a reason for hiding this comment

oderwat Oct 25, 2021

Choose a reason for hiding this comment

maxence-charriere Oct 25, 2021

Choose a reason for hiding this comment

oderwat Oct 25, 2021

Choose a reason for hiding this comment

oderwat commented Oct 25, 2021

oderwat commented Oct 25, 2021

oderwat commented Oct 25, 2021

oderwat commented Nov 1, 2021

maxence-charriere commented Nov 1, 2021

oderwat commented Nov 1, 2021

maxence-charriere commented Nov 1, 2021

oderwat commented Nov 1, 2021

oderwat commented Nov 1, 2021 • edited Loading

oderwat commented Jan 9, 2022

oderwat commented Jan 9, 2022

oderwat commented Mar 14, 2022

maxence-charriere commented Mar 14, 2022 • edited Loading

oderwat commented Mar 14, 2022

oderwat commented Apr 11, 2022

maxence-charriere commented Apr 11, 2022

oderwat commented Apr 11, 2022

oderwat commented May 25, 2022

maxence-charriere commented May 26, 2022 • edited Loading

oderwat commented Jun 25, 2022

oderwat commented Oct 22, 2021 •

edited

Loading

oderwat commented Nov 1, 2021 •

edited

Loading

maxence-charriere commented Mar 14, 2022 •

edited

Loading

maxence-charriere commented May 26, 2022 •

edited

Loading