Introduce the foreign namespace to preserve attribute case and skip html specific a11y validations

[halfnelson]

What

Improve support for non HTML usage of svelte (eg Svelte Native and Svelte node-gui) by retaining the original attribute case when calling setAttribute
(This supersedes #5387 as a more comprehensive solution)

Why

Svelte Native has been around since Svelte 3 providing support for writing native mobile applications in Svelte. Svelte node-gui is a new project which supports writing native desktop apps (Node-Gui/Qt) in Svelte.

Both projects require the original attribute case to set properties on their native elements. This is currently achieved by reflecting over the native objects to find the correct casing which is less than ideal.

How

Svelte Native has always injected a custom namespace xmlns="tns" into the top level element of a svelte component. This was needed to prevent svelte from generating .innerHtml = code in the component. This PR introduces an official supported namespace external which allows tools handling non html5 dom to inject <svelte:options namespace="extermal" />

Like the custom handling that applies to elements that are in the SVG and other custom namespaces (eg MathML), the external namespace is used to opt out of attribute name lowercasing.

Next Steps

If this PR lands, svelte-native and svelte node-gui etc will need to change themselves to insert a svelte options tag with namespace set to "external", and any code that normalizes that attribute names will need to be removed.

EDIT: This PR originally proposed a "native" namespace, and skipped a11y checks when present. The PR has been updated to add an "external" namespace to make it more general. It only impacts case sensitivity of attributes. A11y warnings for external namespaces will need to be solved in another manner

[Conduitry]

I'm a bit wary about adding an official new namespace that is for use in specific third-party libraries, and which doesn't actually do anything useful without them, and which has a name that only makes sense in the context of these third-party libraries. This feels a bit like the hacky way preload was a Svelte feature prior to Svelte 3 that didn't do anything useful except expose something Sapper to use. In Svelte 3, this was replaced with the more general module-level exports feature. Is there something more general-purpose we could do here besides having a namespace called native?

[shirakaba]

Is there something more general-purpose we could do here besides having a namespace called native?

@Conduitry Perhaps the Svelte compiler could instead expose a setting to specify how the casing of attributes should be handled? A value of "preserve" could keep attributes as-is (and not run any validations on them), as appropriate for non-web environments; whilst the default value could be "lowercase" (or whatever would best describe how Svelte handles attributes for web projects).

As for accessibility, it could additionally expose an option to enable web accessibility checks, with the default value being true.

[halfnelson]

Maybe better to have an namespace called externaldom we could even point the uri to https://svelte.dev/docs/#externaldom

• Solves the problem of making svelte-native specific.
• Opts out of html5 specific dom processing (forced lower attributes, and a11y warnings that assume html5)
• unlike having svelte apply the behaviour to arbitrary namespaces that aren't defined in valid_namespaces, having a custom externaldom namespace saves us from any future incompatibilities.
• Helps out both svelte-native, svelte nodegui and possible future svelte-blessed and svelte-unity etc without requiring futher namespaces

[halfnelson]

after speaking with @Conduitry it seems the a11y changes are the sticking point. I will remove the checks around a11y so I can get the case sensitivity thing in. I will also change the namespace to "external" and point the url at "https://svelte.dev/docs#svelte_options"

[shirakaba]

That would be a great path forwards, thanks! Really looking forward to preserved attribute casing. I can live with accessibility warnings in the short term.

[halfnelson]

I have changed the namespace to "external" and it now only impacts the attribute case, an alternative method for disabling warnings is in discussion

[halfnelson]

As a result of previous discussion, this PR has been updated with the following changes

• external namespace becomes foreign
• validation code in component was moved around a little so that sections could be skipped for foreign namespaced components
• a namespace option was added to the compiler which mirrors the component option of the same name.

[benmccann]

Is there anything under site/content/docs/ that should be updated? If we don't mention foreign there then it might be good to add a comment to namespaces.ts describing what foreign is

[halfnelson]

Good point. I added docs in three places, svelte:options, compiler options, and namespaces.ts

[Conduitry]

This has been released in 3.32.0 - thank you for your efforts and for your patience!