fallback content

src/generators/dom/preprocess.ts

@@ -1,6 +1,7 @@
 import Block from './Block';
 import { trimStart, trimEnd } from '../../utils/trim';
 import { assign } from '../../shared/index.js';
+import getStaticAttributeValue from '../shared/getStaticAttributeValue';
 import { DomGenerator } from './index';
 import { Node } from '../../interfaces';
 import { State } from './interfaces';
@@ -344,15 +345,17 @@ const preprocessors = {
 				isYield: true
 			});
 		} else {
-			const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot');
+			const slot = getStaticAttributeValue(node, 'slot');
 			if (slot) {
 				// TODO validate slots — no nesting, no dynamic names...
 				const component = componentStack[componentStack.length - 1];
-				component._slots.add(slot.value[0].data);
+				component._slots.add(slot);
 			}
 
 			const name = block.getUniqueName(
-				node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
+				node.name === 'slot' ?
+					`slot_${getStaticAttributeValue(node, 'name') || 'default'}`:
+					node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
 			);
 
 			node._state = getChildState(state, {

src/generators/dom/visitors/Element/Attribute.ts

@@ -1,7 +1,7 @@
 import attributeLookup from './lookup';
 import deindent from '../../../../utils/deindent';
 import { stringify } from '../../../../utils/stringify';
-import getStaticAttributeValue from '../shared/getStaticAttributeValue';
+import getStaticAttributeValue from '../../../shared/getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';

src/generators/dom/visitors/Element/Binding.ts

@@ -1,6 +1,6 @@
 import deindent from '../../../../utils/deindent';
 import flattenReference from '../../../../utils/flattenReference';
-import getStaticAttributeValue from '../shared/getStaticAttributeValue';
+import getStaticAttributeValue from '../../../shared/getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';

src/generators/dom/visitors/Element/Element.ts

@@ -73,12 +73,7 @@ export default function visitElement(
 
 	if (generator.hydratable) {
 		block.builders.claim.addBlock(deindent`
-			${name} = ${getClaimStatement(
-			generator,
-			childState.namespace,
-			state.parentNodes,
-			node
-		)};
+			${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)};
 			var ${childState.parentNodes} = @children( ${name} );
 		`);
 	}

src/generators/dom/visitors/Slot.ts

@@ -2,7 +2,7 @@ import { DomGenerator } from '../index';
 import deindent from '../../../utils/deindent';
 import visit from '../visit';
 import Block from '../Block';
-import getStaticAttributeValue from './shared/getStaticAttributeValue';
+import getStaticAttributeValue from '../../shared/getStaticAttributeValue';
 import { Node } from '../../../interfaces';
 import { State } from '../interfaces';
 
@@ -17,7 +17,7 @@ export default function visitSlot(
 	const slotName = getStaticAttributeValue(node, 'name') || 'default';
 	generator.slots.add(slotName);
 
-	const name = block.getUniqueName(`slot_${slotName}`);
+	const name = node._state.name;
 	const content_name = block.getUniqueName(`slot_content_${slotName}`);
 
 	block.addVariable(content_name, `#component._slotted.${slotName}`);
@@ -30,6 +30,12 @@ export default function visitSlot(
 		state.parentNode
 	);
 
+	if (generator.hydratable) {
+		block.builders.claim.addLine(
+			`var ${node._state.parentNodes} = @children(${name});`
+		);
+	}
+
 	if (slotName !== 'default') {
 		block.builders.hydrate.addBlock(deindent`
 			@setAttribute(${name}, 'name', '${slotName}');

src/utils/CodeBuilder.ts

@@ -110,12 +110,14 @@ export default class CodeBuilder {
 
 	pushCondition(condition: string) {
 		this.conditionStack.push(condition);
+		this.addLine(`if (${condition}) {`);
 		this.indent = repeat('\t', this.conditionStack.length);
 	}
 
 	popCondition() {
 		this.conditionStack.pop();
 		this.indent = repeat('\t', this.conditionStack.length);
+		this.addLine('}');
 	}
 
 	toString() {

test/runtime/index.js

@@ -129,7 +129,7 @@ describe("runtime", () => {
 				try {
 					SvelteComponent = require(`./samples/${dir}/main.html`);
 				} catch (err) {
-					showOutput(cwd, { shared }); // eslint-disable-line no-console
+					showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console
 					throw err;
 				}
 
@@ -196,12 +196,12 @@ describe("runtime", () => {
 					config.error(assert, err);
 				} else {
 					failed.add(dir);
-					showOutput(cwd, { shared }); // eslint-disable-line no-console
+					showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console
 					throw err;
 				}
 			}
 
-			if (config.show) showOutput(cwd, { shared });
+			if (config.show) showOutput(cwd, { shared, hydratable: hydrate });
 		});
 	}
 

test/runtime/samples/component-slot-fallback/Nested.html

@@ -0,0 +1,5 @@
+<div>
+	<slot>default fallback content</slot>
+	<slot name='bar'>bar fallback content</slot>
+	<slot name='foo'>foo fallback content</slot>
+</div>

test/runtime/samples/component-slot-fallback/_config.js

@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>
+			<slot>default fallback content</slot>
+			<slot name='bar'>bar fallback content</slot>
+			<slot name='foo'>foo fallback content</slot>
+		</div>
+	`
+};

test/runtime/samples/component-slot-fallback/main.html

@@ -0,0 +1,11 @@
+<Nested ref:nested></Nested>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>