Meta providers accept number or string keys

src/meta/Dimensions.ts

@@ -50,7 +50,7 @@ const defaultDimensions = {
 
 export class Dimensions extends Base {
 
-	public get(key: string): Readonly<DimensionResults> {
+	public get(key: string | number): Readonly<DimensionResults> {
 		const node = this.getNode(key);
 
 		if (!node) {

src/meta/Drag.ts

@@ -232,7 +232,7 @@ const controller = new DragController();
 export class Drag extends Base {
 	private _boundInvalidate: () => void = this.invalidate.bind(this);
 
-	public get(key: string): Readonly<DragResults> {
+	public get(key: string | number): Readonly<DragResults> {
 		const node = this.getNode(key);
 
 		// if we don't have a reference to the node yet, return an empty set of results

src/meta/Intersection.ts

@@ -40,7 +40,7 @@ export class Intersection extends Base {
 	 * @param key The key to return the intersection meta for
 	 * @param options The options for the request
 	 */
-	public get(key: string, options: IntersectionGetOptions = {}): IntersectionResult {
+	public get(key: string | number, options: IntersectionGetOptions = {}): IntersectionResult {
 		let rootNode: HTMLElement | undefined;
 		if (options.root) {
 			rootNode = this.getNode(options.root);

src/meta/Matches.ts

@@ -6,7 +6,7 @@ export default class Matches extends Base {
 	 * @param key The virtual DOM key
 	 * @param event The event object
 	 */
-	public get(key: string, event: Event): boolean {
+	public get(key: string | number, event: Event): boolean {
 		return this.getNode(key) === event.target;
 	}
 }

tests/unit/meta/Dimensions.ts

@@ -59,6 +59,16 @@ registerSuite({
 
 		assert.deepEqual(dimensions.get('foo'), defaultDimensions);
 	},
+	'Will accept a number key'() {
+		const nodeHandler = new NodeHandler();
+
+		const dimensions = new Dimensions({
+			invalidate: () => {},
+			nodeHandler
+		});
+
+		assert.deepEqual(dimensions.get(1234), defaultDimensions);
+	},
 	'Will create event listener for node if not yet loaded'() {
 		const nodeHandler = new NodeHandler();
 		const onSpy = spy(nodeHandler, 'on');

tests/unit/meta/Drag.ts

@@ -62,6 +62,34 @@ registerSuite({
 		document.body.removeChild(div);
 	},
 
+	'standard rendering with a number key'() {
+		const dragResults: DragResults[] = [];
+
+		class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) {
+			render() {
+				dragResults.push(this.meta(Drag).get(1234));
+				return v('div', {
+					innerHTML: 'hello world',
+					key: 1234
+				});
+			}
+		}
+
+		const div = document.createElement('div');
+
+		document.body.appendChild(div);
+
+		const widget = new TestWidget();
+		widget.append(div);
+
+		resolveRAF();
+
+		assert.deepEqual(dragResults, [ emptyResults, emptyResults ], 'should have been called twice, both empty results');
+
+		widget.destroy();
+		document.body.removeChild(div);
+	},
+
 	'pointer dragging a node'() {
 		const dragResults: DragResults[] = [];
 

tests/unit/meta/Intersection.ts

@@ -86,6 +86,19 @@ registerSuite({
 			assert.isTrue(onSpy.calledOnce);
 			assert.isTrue(onSpy.firstCall.calledWith('root'));
 		},
+		'intersections with number key'() {
+			const nodeHandler = new NodeHandler();
+			const onSpy = spy(nodeHandler, 'on');
+
+			const intersection = new Intersection({
+				invalidate: () => {},
+				nodeHandler
+			});
+
+			intersection.get(1234);
+			assert.isTrue(onSpy.calledOnce);
+			assert.isTrue(onSpy.firstCall.calledWith(1234));
+		},
 		'intersection calls invalidate when node available'() {
 			const nodeHandler = new NodeHandler();
 			const onSpy = spy(nodeHandler, 'on');

tests/unit/meta/Matches.ts

@@ -65,6 +65,40 @@ registerSuite({
 		document.body.removeChild(div);
 	},
 
+	'node matches with number key'() {
+		const results: boolean[] = [];
+
+		class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) {
+			private _onclick(evt: MouseEvent) {
+				results.push(this.meta(Matches).get(1234, evt));
+			}
+
+			render() {
+				return v('div', {
+					innerHTML: 'hello world',
+					key: 1234,
+					onclick: this._onclick
+				});
+			}
+		}
+
+		const div = document.createElement('div');
+
+		document.body.appendChild(div);
+
+		const widget = new TestWidget();
+		widget.append(div);
+
+		resolveRAF();
+
+		sendEvent(div.firstChild as Element, 'click');
+
+		assert.deepEqual(results, [ true ], 'should have been called and the target matched');
+
+		widget.destroy();
+		document.body.removeChild(div);
+	},
+
 	'node does not match'() {
 		const results: boolean[] = [];