Allow for multiple Slots and add ability to render multiple children

src/slot-content.js

@@ -4,24 +4,25 @@ export class SlotContent {
 		if (slot) {
 			slots.named[slot] = content;
 			if (fireChange) {
-				for (let i=0; i<slots.onChange.length; i++) {
-					slots.onChange[i]();
+				let update = slots.onChange[slot]
+				if (update) {
+					update();
 				}
 			}
 		}
 	}
 
-	componentWillMount() {
-		this.apply(this.props.slot, this.props.children[0], true);
+	componentDidMount() {
+		this.apply(this.props.slot, this.props.children, true);
 	}
 
 	componentWillReceiveProps({ slot, children }) {
 		if (slot!==this.props.slot) {
 			this.apply(this.props.slot, null, false);
-			this.apply(slot, children[0], true);
+			this.apply(slot, children, true);
 		}
-		else if (children[0]!==this.props.children[0]) {
-			this.apply(slot, children[0], true);
+		else if (children!==this.props.children) {
+			this.apply(slot, children, true);
 		}
 	}
 
@@ -32,4 +33,4 @@ export class SlotContent {
 	render() {
 		return null;
 	}
-}
+}

src/slot-provider.js

@@ -3,7 +3,7 @@ export class SlotProvider {
 		return {
 			slots: {
 				named: {},
-				onChange: []
+				onChange: {}
 			}
 		};
 	}

src/slot.js

@@ -3,21 +3,22 @@ import { Component } from 'preact';
 export function Slot(props, context) {
 	Component.call(this, props, context);
 	let update = () => {
-		let content = this.context.slots.named[this.props.name];
-		if (content!=this.state.content) {
-			this.setState({ content });
+		const {props, state} = this;
+		let content = this.context.slots.named[props.name];
+		if (!state.content || content != state.content[props.name]) {
+			this.setState({ content: Object.assign({}, state.content, {[props.name]: content}) });
 		}
 	};
 	this.componentDidMount = () => {
-		this.context.slots.onChange.push(update);
+		this.context.slots.onChange[this.props.name] = update;
 	};
 	this.componentWillUnmount = () => {
-		this.context.slots.onChange.push(update);
+		this.context.slots.onChange[this.props.name] = update;
 	};
 	update();
 }
 (Slot.prototype = new Component()).constructor = Slot;
-Slot.prototype.render = function(props, state) {
+Slot.prototype.render = function(props, { content = {} }) {
 	let child = props.children[0];
-	return typeof child==='function' ? child(state.content) : (state.content || child);
+	return typeof child==='function' ? child(content[props.name]) : (content[props.name] && content[props.name][0]) || child;
 };

test/slot-content.test.js

@@ -18,9 +18,9 @@ describe('Slot', () => {
 		expect(Spy).toHaveBeenCalledWith(jasmine.any(Object), {
 			slots: {
 				named: {
-					foo: 'bar'
+					foo: ['bar']
 				},
-				onChange: []
+				onChange: {}
 			}
 		});
 	});

test/slot-provider.test.js

@@ -14,7 +14,7 @@ describe('SlotProvider', () => {
 		expect(Spy).toHaveBeenCalledWith(jasmine.any(Object), {
 			slots: {
 				named: {},
-				onChange: []
+				onChange: {}
 			}
 		});
 	});

test/slot.test.js

@@ -25,7 +25,7 @@ describe('Slot', () => {
 			named: {
 				foo: 'bar'
 			},
-			onChange: []
+			onChange: {}
 		};
 
 		render((
@@ -43,7 +43,7 @@ describe('Slot', () => {
 
 		const slots = {
 			named: {},
-			onChange: []
+			onChange: {}
 		};
 
 		render((
@@ -52,13 +52,13 @@ describe('Slot', () => {
 			</Provider>
 		), document.createElement('x-root'));
 
-		expect(slots.onChange).toContain(jasmine.any(Function));
+		expect(slots.onChange.foo).toEqual(jasmine.any(Function));
 
 		expect(spy).toHaveBeenCalledTimes(1);
 		expect(spy).toHaveBeenCalledWith(undefined);
 
 		slots.named.foo = 'bar';
-		slots.onChange[0]();
+		slots.onChange['foo']();
 		await tick();
 
 		expect(spy).toHaveBeenCalledTimes(2);
@@ -72,7 +72,7 @@ describe('Slot', () => {
 			named: {
 				foo: 'bar'
 			},
-			onChange: []
+			onChange: {}
 		};
 
 		render((
@@ -84,7 +84,7 @@ describe('Slot', () => {
 		expect(spy).toHaveBeenCalledTimes(1);
 		expect(spy).toHaveBeenCalledWith('bar');
 
-		slots.onChange[0]();
+		slots.onChange['foo']();
 		await tick();
 
 		expect(spy).toHaveBeenCalledTimes(1);

test/with-slot.test.js

@@ -12,7 +12,7 @@ describe('withSlot()', () => {
 			named: {
 				foo: 'bar'
 			},
-			onChange: []
+			onChange: {}
 		};
 
 		const Child = withSlot('foo')(Spy);
@@ -32,7 +32,7 @@ describe('withSlot()', () => {
 
 		const slots = {
 			named: {},
-			onChange: []
+			onChange: {}
 		};
 
 		const Child = withSlot('foo')(Spy);
@@ -46,10 +46,10 @@ describe('withSlot()', () => {
 		expect(Spy).toHaveBeenCalledTimes(1);
 		expect(Spy).toHaveBeenCalledWith({ foo: undefined, children: [] }, jasmine.anything());
 
-		expect(slots.onChange).toContain(jasmine.any(Function));
+		expect(slots.onChange.foo).toEqual(jasmine.any(Function));
 
 		slots.named.foo = 'bar';
-		slots.onChange[0]();
+		slots.onChange['foo']();
 		await tick();
 
 		expect(Spy).toHaveBeenCalledTimes(2);