Move slot names test to runtime. Allow slot names that start with a digit

src/compile/nodes/Slot.ts

@@ -34,13 +34,6 @@ export default class Slot extends Element {
 						message: `default is a reserved word — it cannot be used as a slot name`
 					});
 				}
-
-				if (/^[0-9]/.test(slot_name)) {
-					component.error(attr, {
-						code: `invalid-slot-name`,
-						message: `<slot> name cannot start with a digit`
-					});
-				}
 			}
 
 			// TODO should duplicate slots be disallowed? Feels like it's more likely to be a
@@ -77,4 +70,4 @@ export default class Slot extends Element {
 
 		return null;
 	}
-}
+}

src/utils/names.ts

@@ -111,5 +111,9 @@ export function quote_prop_if_necessary(name: string) {
 }
 
 export function sanitize(name: string) {
-	return name.replace(/[^a-zA-Z0-9_]+/g, '_').replace(/^_/, '').replace(/_$/, '');
+	return name
+		.replace(/[^a-zA-Z0-9_]+/g, '_')
+		.replace(/^_/, '')
+		.replace(/_$/, '')
+		.replace(/^[0-9]/, '_$&');
 }

test/js/samples/slot-names/expected.js

@@ -1,121 +0,0 @@
-/* generated by Svelte vX.Y.Z */
-import {
-	SvelteComponent as SvelteComponent_1,
-	append,
-	create_slot,
-	detach,
-	element,
-	get_slot_changes,
-	get_slot_context,
-	init,
-	insert,
-	noop,
-	safe_not_equal,
-	space
-} from "svelte/internal";
-
-function create_fragment(ctx) {
-	var div, t0, t1;
-
-	const header_1_slot_1 = ctx.$$slot_header_1;
-	const header_1_slot = create_slot(header_1_slot_1, ctx, null);
-
-	const header_2__slot_1 = ctx.$$slot_header_2_;
-	const header_2__slot = create_slot(header_2__slot_1, ctx, null);
-
-	const header_3_slot_1 = ctx.$$slot_header_3;
-	const header_3_slot = create_slot(header_3_slot_1, ctx, null);
-
-	return {
-		c() {
-			div = element("div");
-
-			if (header_1_slot) header_1_slot.c();
-			t0 = space();
-
-			if (header_2__slot) header_2__slot.c();
-			t1 = space();
-
-			if (header_3_slot) header_3_slot.c();
-		},
-
-		l(nodes) {
-			if (header_1_slot) header_1_slot.l(div_nodes);
-			if (header_2__slot) header_2__slot.l(div_nodes);
-			if (header_3_slot) header_3_slot.l(div_nodes);
-		},
-
-		m(target, anchor) {
-			insert(target, div, anchor);
-
-			if (header_1_slot) {
-				header_1_slot.m(div, null);
-			}
-
-			append(div, t0);
-
-			if (header_2__slot) {
-				header_2__slot.m(div, null);
-			}
-
-			append(div, t1);
-
-			if (header_3_slot) {
-				header_3_slot.m(div, null);
-			}
-		},
-
-		p(changed, ctx) {
-			if (header_1_slot && header_1_slot.p && changed.$$scope) {
-				header_1_slot.p(get_slot_changes(header_1_slot_1, ctx, changed,), get_slot_context(header_1_slot_1, ctx, null));
-			}
-
-			if (header_2__slot && header_2__slot.p && changed.$$scope) {
-				header_2__slot.p(get_slot_changes(header_2__slot_1, ctx, changed,), get_slot_context(header_2__slot_1, ctx, null));
-			}
-
-			if (header_3_slot && header_3_slot.p && changed.$$scope) {
-				header_3_slot.p(get_slot_changes(header_3_slot_1, ctx, changed,), get_slot_context(header_3_slot_1, ctx, null));
-			}
-		},
-
-		i: noop,
-		o: noop,
-
-		d(detaching) {
-			if (detaching) {
-				detach(div);
-			}
-
-			if (header_1_slot) header_1_slot.d(detaching);
-
-			if (header_2__slot) header_2__slot.d(detaching);
-
-			if (header_3_slot) header_3_slot.d(detaching);
-		}
-	};
-}
-
-function instance($$self, $$props, $$invalidate) {
-	let { $$slot_header_1, $$slot_header_2_, $$slot_header_3, $$scope } = $$props;
-
-	$$self.$set = $$props => {
-		if ('$$scope' in $$props) $$invalidate('$$scope', $$scope = $$props.$$scope);
-	};
-
-	return {
-		$$slot_header_1,
-		$$slot_header_2_,
-		$$slot_header_3,
-		$$scope
-	};
-}
-
-class SvelteComponent extends SvelteComponent_1 {
-	constructor(options) {
-		super();
-		init(this, options, instance, create_fragment, safe_not_equal, []);
-	}
-}
-
-export default SvelteComponent;

test/js/samples/slot-names/input.svelte

@@ -1,5 +0,0 @@
-<div>
-	<slot name="_header-1" />
-	<slot name="header-2_-" />
-	<slot name="-header-3-" />
-</div>

test/runtime/samples/slot-names/Nested.svelte

@@ -0,0 +1,6 @@
+<div>
+	<slot name="header1" />
+	<slot name="-header2_" />
+	<slot name="3header" />
+	<slot name="_header4" />
+</div>

test/runtime/samples/slot-names/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: `
+		<div>
+			<h1 slot="header1">Header 1</h1>
+			<h2 slot="-header2_">Header 2</h2>
+			<h3 slot="3header">Header 3</h3>
+			<h4 slot="_header4">Header 4</h4>
+		</div>
+	`
+};

test/runtime/samples/slot-names/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<h1 slot="header1">Header 1</h1>
+	<h2 slot="-header2_">Header 2</h2>
+	<h3 slot="3header">Header 3</h3>
+	<h4 slot="_header4">Header 4</h4>
+</Nested>

test/validator/samples/slot-name-starts-with-a-digit/errors.json

@@ -1,15 +0,0 @@
-[{
-	"code": "invalid-slot-name",
-	"message": "<slot> name cannot start with a digit",
-	"start": {
-		"line": 2,
-		"column": 7,
-		"character": 13
-	},
-	"end": {
-		"line": 2,
-		"column": 21,
-		"character": 27
-	},
-	"pos": 13
-}]

test/validator/samples/slot-name-starts-with-a-digit/input.svelte

@@ -1,3 +0,0 @@
-<div>
-	<slot name="1header" />
-</div>