implement namespaced components

site/content/docs/02-template-syntax.md

@@ -7,7 +7,7 @@ title: Template syntax
 
 ---
 
-A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>`, indicates a *component*.
+A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a *component*.
 
 ```html
 <script>

src/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -63,7 +63,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		this.var = (
 			this.node.name === 'svelte:self' ? renderer.component.name :
 			this.node.name === 'svelte:component' ? 'switch_instance' :
-			this.node.name
+			sanitize(this.node.name)
 		).toLowerCase();
 
 		if (this.node.children.length) {

test/runtime/index.js

@@ -75,7 +75,7 @@ describe("runtime", () => {
 			compileOptions.accessors = 'accessors' in config ? config.accessors : true;
 
 			Object.keys(require.cache)
-				.filter(x => x.endsWith(".svelte"))
+				.filter(x => x.startsWith(cwd))
 				.forEach(file => {
 					delete require.cache[file];
 				});

test/runtime/samples/component-namespaced/Foo.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo {foo}</p>

test/runtime/samples/component-namespaced/_config.js

@@ -0,0 +1,16 @@
+export default {
+	props: {
+		a: 1
+	},
+
+	html: `
+		<p>foo 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 2;
+		assert.htmlEqual(target.innerHTML, `
+			<p>foo 2</p>
+		`);
+	}
+};

test/runtime/samples/component-namespaced/components.js

@@ -0,0 +1,3 @@
+import Foo from './Foo.svelte';
+
+export default { Foo };

test/runtime/samples/component-namespaced/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Components from './components.js';
+
+	export let a;
+</script>
+
+<Components.Foo foo={a}/>

test/server-side-rendering/index.js

@@ -96,10 +96,11 @@ describe("ssr", () => {
 		(config.skip ? it.skip : config.solo ? it.only : it)(dir, () => {
 			const cwd = path.resolve("test/runtime/samples", dir);
 
-			glob('**/*.svelte', { cwd: `test/runtime/samples/${dir}` }).forEach(file => {
+			Object.keys(require.cache)
-				const resolved = require.resolve(`../runtime/samples/${dir}/${file}`);
+				.filter(x => x.startsWith(cwd))
-				delete require.cache[resolved];
+				.forEach(file => {
-			});
+					delete require.cache[file];
+				});
 
 			const compileOptions = Object.assign({ sveltePath }, config.compileOptions, {
 				generate: 'ssr'