Add namespace compiler option.

Author: halfnelson

src/compiler/compile/Component.ts

@@ -1349,7 +1349,8 @@ function process_component_options(component: Component, nodes) {
 			'accessors' in component.compile_options
 				? component.compile_options.accessors
 				: !!component.compile_options.customElement,
-		preserveWhitespace: !!component.compile_options.preserveWhitespace
+		preserveWhitespace: !!component.compile_options.preserveWhitespace,
+		namespace: component.compile_options.namespace
 	};
 
 	const node = nodes.find(node => node.name === 'svelte:options');

src/compiler/compile/index.ts

@@ -6,6 +6,7 @@ import { CompileOptions, Warning } from '../interfaces';
 import Component from './Component';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_name_from_filename from './utils/get_name_from_filename';
+import { valid_namespaces } from '../utils/namespaces';
 
 const valid_options = [
 	'format',
@@ -22,6 +23,7 @@ const valid_options = [
 	'hydratable',
 	'legacy',
 	'customElement',
+	'namespace',
 	'tag',
 	'css',
 	'loopGuardTimeout',
@@ -30,7 +32,7 @@ const valid_options = [
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
-	const { name, filename, loopGuardTimeout, dev } = options;
+	const { name, filename, loopGuardTimeout, dev, namespace } = options;
 
 	Object.keys(options).forEach(key => {
 		if (!valid_options.includes(key)) {
@@ -65,6 +67,15 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 			toString: () => message
 		});
 	}
+
+	if (namespace && valid_namespaces.indexOf(namespace) === -1) {
+		const match = fuzzymatch(namespace, valid_namespaces);
+		if (match) {
+			throw new Error(`Invalid namespace '${namespace}' (did you mean '${match}'?)`);
+		} else {
+			throw new Error(`Invalid namespace '${namespace}'`);
+		}
+	}
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {

src/compiler/interfaces.ts

@@ -124,6 +124,7 @@ export interface CompileOptions {
 	tag?: string;
 	css?: boolean;
 	loopGuardTimeout?: number;
+	namespace?: string;
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;

test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js

@@ -0,0 +1,20 @@
+// Test support for the native namespaces preserving attribute case (eg svelte-native, svelte-nodegui).
+
+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.
+	},
+	compileOptions: {
+		namespace: 'foreign'
+	},
+	test({ assert, target }) {
+		const attr = sel => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+	}
+};

test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte

@@ -0,0 +1,3 @@
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button">
+</page>

test/validator/index.ts

@@ -101,4 +101,22 @@ describe('validate', () => {
 
 		assert.deepEqual(warnings, []);
 	});
+
+	it('errors if namespace is provided but unrecognised', () => {
+		assert.throws(() => {
+			svelte.compile('<div></div>', {
+				name: 'test',
+				namespace: 'svefefe'
+			});
+		}, /Invalid namespace 'svefefe'/);
+	});
+
+	it('errors with a hint if namespace is provided but unrecognised but close', () => {
+		assert.throws(() => {
+			svelte.compile('<div></div>', {
+				name: 'test',
+				namespace: 'foriegn'
+			});
+		}, /Invalid namespace 'foriegn' \(did you mean 'foreign'\?\)/);
+	});
 });