From 95ca93747d3865aaaaf15cfd6a2390f543a01c73 Mon Sep 17 00:00:00 2001
From: halfnelson <dpershouse@gmail.com>
Date: Sat, 21 Nov 2020 09:24:38 +1000
Subject: [PATCH] Introduce an external namespace

A svelte specific custom namespace that preserves attribute case
---
 .../render_dom/wrappers/Element/Attribute.ts  | 29 ++++++++++++++-----
 src/compiler/utils/namespaces.ts              |  6 +++-
 .../_config.js                                | 18 ++++++++++++
 .../main.svelte                               |  4 +++
 4 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 test/runtime/samples/attribute-casing-native-namespace/_config.js
 create mode 100644 test/runtime/samples/attribute-casing-native-namespace/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index 2969a7d82c9e..e4fce39ae916 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -8,6 +8,7 @@ import Expression from '../../../nodes/shared/Expression';
 import Text from '../../../nodes/Text';
 import handle_select_value_binding from './handle_select_value_binding';
 import { Identifier, Node } from 'estree';
+import { external } from '../../../../utils/namespaces';
 
 export class BaseAttributeWrapper {
 	node: Attribute;
@@ -67,15 +68,27 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 			}
 		}
 
-		this.name = fix_attribute_casing(this.node.name);
-		this.metadata = this.get_metadata();
-		this.is_indirectly_bound_value = is_indirectly_bound_value(this);
-		this.property_name = this.is_indirectly_bound_value
-			? '__value'
-			: this.metadata && this.metadata.property_name;
+		if (this.parent.node.namespace && this.parent.node.namespace == external) {
+			// leave attribute case alone for elements in the "external" namespace
+			this.name = this.node.name;
+			this.metadata = this.get_metadata();
+			// since this is an external namespace, the following flags/properties can't apply
+			this.is_indirectly_bound_value = false;
+			this.property_name = null;
+			this.is_select_value_attribute = false;
+			this.is_input_value = false;
+		} else {
+			this.name = fix_attribute_casing(this.node.name);
+			this.metadata = this.get_metadata();
+			this.is_indirectly_bound_value = is_indirectly_bound_value(this);
+			this.property_name = this.is_indirectly_bound_value
+				? '__value'
+				: this.metadata && this.metadata.property_name;
+			this.is_select_value_attribute = this.name === 'value' && this.parent.node.name === 'select';
+			this.is_input_value = this.name === 'value' && this.parent.node.name === 'input';
+		}
+		
 		this.is_src = this.name === 'src'; // TODO retire this exception in favour of https://github.com/sveltejs/svelte/issues/3750
-		this.is_select_value_attribute = this.name === 'value' && this.parent.node.name === 'select';
-		this.is_input_value = this.name === 'value' && this.parent.node.name === 'input';
 		this.should_cache = should_cache(this);
 	}
 
diff --git a/src/compiler/utils/namespaces.ts b/src/compiler/utils/namespaces.ts
index 3db7bc3fae0b..35e445f56e80 100644
--- a/src/compiler/utils/namespaces.ts
+++ b/src/compiler/utils/namespaces.ts
@@ -1,3 +1,4 @@
+export const external = 'https://svelte.dev/docs';
 export const html = 'http://www.w3.org/1999/xhtml';
 export const mathml = 'http://www.w3.org/1998/Math/MathML';
 export const svg = 'http://www.w3.org/2000/svg';
@@ -5,13 +6,16 @@ export const xlink = 'http://www.w3.org/1999/xlink';
 export const xml = 'http://www.w3.org/XML/1998/namespace';
 export const xmlns = 'http://www.w3.org/2000/xmlns';
 
+
 export const valid_namespaces = [
+	'external',
 	'html',
 	'mathml',
 	'svg',
 	'xlink',
 	'xml',
 	'xmlns',
+	external,
 	html,
 	mathml,
 	svg,
@@ -20,4 +24,4 @@ export const valid_namespaces = [
 	xmlns
 ];
 
-export const namespaces: Record<string, string> = { html, mathml, svg, xlink, xml, xmlns };
+export const namespaces: Record<string, string> = { external, html, mathml, svg, xlink, xml, xmlns };
diff --git a/test/runtime/samples/attribute-casing-native-namespace/_config.js b/test/runtime/samples/attribute-casing-native-namespace/_config.js
new file mode 100644
index 000000000000..ff9361b4aabe
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-native-namespace/_config.js
@@ -0,0 +1,18 @@
+// Test support for the external namespace preserving attribute case.
+
+export default {
+	html: `
+		<page horizontalAlignment="center">
+			<button textWrap="true" text="button">
+		</page>
+	`,
+	options: {
+		hydrate: false // Hydration test will fail as case sensitivity is only handled for svg elements.
+	},
+
+	test({ assert, target }) {
+		const attr = sel => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+	}
+};
diff --git a/test/runtime/samples/attribute-casing-native-namespace/main.svelte b/test/runtime/samples/attribute-casing-native-namespace/main.svelte
new file mode 100644
index 000000000000..e854f7d6fccc
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-native-namespace/main.svelte
@@ -0,0 +1,4 @@
+<svelte:options namespace="external" />
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button">
+</page>
\ No newline at end of file