Add namespace support to patchElements #1108
Conversation
yurivish
force-pushed
the
svg-math-namespace
branch
4 times, most recently
from
088cc5a to
4814af5
Compare
|
This looks great! I made some minor tweaks for the sake of consistency. |
yurivish
force-pushed
the
svg-math-namespace
branch
from
810ad68 to
f3114c9
Compare
|
@bencroker oops – sorry, I just force-pushed over your changes with a docs update 🤦♂️. Was using force push to keep the commit history clean. Can you please re-apply your changes? Edit: Looks like I have them locally; applying… |
|
Having discussed it internally and reviewing the ADR changes, I think |
|
I agree that's cleaner. How's this? |
Replace the `wrap` property with a `namespace` property that accepts
a type-safe enum ('html' | 'svg' | 'mathml') instead of an arbitrary
tag name. The namespace defaults to 'html', matching the current
default behavior.
tidy
Tweak the description in the ADR
omit word
remove unneeded `as const`
ADR: for clarity, use backticks rather than quotes when enumerating possible values for the namespace option
update the namespace validity check to a form that typescript can use for narrowing
remove link to namespaceURI docs since the namespace option does not directly allow specifying namespaces (the connection can be elucidated in the user-facing docs)
yurivish
force-pushed
the
svg-math-namespace
branch
from
57f6257 to
46da741
Compare
|
Much better! I refactored to use const arrays, and added a generic |
text/html response
…1.json for the new namespace option Update datastar-sdk-config-v1.json
yurivish
force-pushed
the
svg-math-namespace
branch
from
53d2ab0 to
c9796ce
Compare
|
Added the |
|
🎉 |
2 participants
I confirm that I have read the contribution guidelines and will include a clear explanation of the problem, solution, and alternatives for any proposed change in behavior.
Problem Statement
There is currently no way to control the namespace of patched elements, which prevents insertion of new elements into
<svg>and<math>contexts where children must be created in the appropriate XML namespace.This PR came out of a discussion in issue #1088.
Proposed Solution
Add a new option,
wrap, todatastar-patch-elements, which specifies a tag name (such assvgormath) that is used as a wrapper element when parsing the elements to be patched. The wrapper element is never inserted into the document, and is used only to influence the namespace of the elements being inserted by the patch operation.I'm not sure about the name
wrap, since the wrapping technique is an implementation detail and the wrapper element does not appear in the document. I considered calling itnamespacebut sayingdata: namespace divfeels weird. MaybenamespaceTag?Alternatives Considered
One alternative considered was to wrap patched elements individually in
<svg>or<math>tags as a way to set their namespace, but this comes at a performance and memory cost since the wrapper elements persist in the document after patching. The cost of these wrapper elements can be significant when using SVG for data visualization since it's not uncommon to have thousands of elements (eg. circles in a scatterplot) that you might want to individually add/animate/remove.Full proposal
The HTML spec specifies
<svg>and<math>as the only allowed "foreign elements", and the namespace of children is determined by these parent tags.The proposal is to add an optional patch-elements argument,
wrap, which can be used to specify the name of a wrapper tag during element creation, allowing the namespace URI to be set while avoiding the costs associated with inserting wrapper elements into the document itself.When using
wrapDatastar will construct one extra wrapper element per patch call (which can of course patch multiple elements at once), which is in addition to the<body>and<template>elements that Datastar already typically creates. The wrapper element is never placed into the document and is only used to influence the namespaces of its children.Examples:
Since elements can now be created in multiple namespaces, there is also a small change/bugfix to morphing to inherit the namespace from the existing element when creating a new empty child to morph into, ie. keeping the namespaces of any elements that already exist.