From 75651bb0705a4af1cbaaedcc6fba3d29a542b5ac Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 3 Sep 2017 10:24:45 -0400
Subject: [PATCH] use component name in runtime dev warnings - fixes #781

---
 src/generators/dom/index.ts                               | 8 +++++---
 src/shared/index.js                                       | 2 +-
 .../samples/dev-warning-missing-data-binding/_config.js   | 2 +-
 test/runtime/samples/dev-warning-missing-data/_config.js  | 4 ++--
 .../samples/dev-warning-readonly-computed/_config.js      | 2 +-
 .../dev-warning-readonly-window-binding/_config.js        | 2 +-
 6 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 1c810ddeb7..fa1fdd8380 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -147,7 +147,10 @@ export default function dom(
 				.join(',\n')}
 		}`;
 
+	const debugName = `<${generator.customElement ? generator.tag : name}>`;
+
 	const constructorBody = deindent`
+		${options.dev && `this._debugName = '${debugName}';`}
 		${options.dev && !generator.customElement &&
 			`if ( !options || (!options.target && !options._root) ) throw new Error( "'target' is a required option" );`}
 		this.options = options;
@@ -160,7 +163,7 @@ export default function dom(
 		${options.dev &&
 			Array.from(generator.expectedProperties).map(
 				prop =>
-					`if ( !( '${prop}' in this._state ) ) console.warn( "Component was created without expected data property '${prop}'" );`
+					`if ( !( '${prop}' in this._state ) ) console.warn( "${debugName} was created without expected data property '${prop}'" );`
 			)}
 		${generator.bindingGroups.length &&
 			`this._bindingGroups = [ ${Array(generator.bindingGroups.length)
@@ -290,13 +293,12 @@ export default function dom(
 		`);
 	}
 
-	// TODO deprecate component.teardown()
 	builder.addBlock(deindent`
 		${options.dev && deindent`
 			${name}.prototype._checkReadOnly = function _checkReadOnly ( newState ) {
 				${Array.from(generator.readonly).map(
 					prop =>
-						`if ( '${prop}' in newState && !this._updatingReadonlyProperty ) throw new Error( "Cannot set read-only property '${prop}'" );`
+						`if ( '${prop}' in newState && !this._updatingReadonlyProperty ) throw new Error( "${debugName}: Cannot set read-only property '${prop}'" );`
 				)}
 			};
 		`}
diff --git a/src/shared/index.js b/src/shared/index.js
index 0b4ccb85c5..34d85897df 100644
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -151,7 +151,7 @@ export function _set(newState) {
 export function _setDev(newState) {
 	if (typeof newState !== 'object') {
 		throw new Error(
-			'Component .set was called without an object of data key-values to update.'
+			this._debugName + ' .set was called without an object of data key-values to update.'
 		);
 	}
 
diff --git a/test/runtime/samples/dev-warning-missing-data-binding/_config.js b/test/runtime/samples/dev-warning-missing-data-binding/_config.js
index a95a23b2b0..020a0e0ede 100644
--- a/test/runtime/samples/dev-warning-missing-data-binding/_config.js
+++ b/test/runtime/samples/dev-warning-missing-data-binding/_config.js
@@ -2,6 +2,6 @@ export default {
 	dev: true,
 
 	warnings: [
-		`Component was created without expected data property 'value'`
+		`<Main$> was created without expected data property 'value'`
 	]
 };
diff --git a/test/runtime/samples/dev-warning-missing-data/_config.js b/test/runtime/samples/dev-warning-missing-data/_config.js
index 90238c598b..9a16714885 100644
--- a/test/runtime/samples/dev-warning-missing-data/_config.js
+++ b/test/runtime/samples/dev-warning-missing-data/_config.js
@@ -2,7 +2,7 @@ export default {
 	dev: true,
 
 	warnings: [
-		`Component was created without expected data property 'foo'`,
-		`Component was created without expected data property 'bar'`
+		`<Main$> was created without expected data property 'foo'`,
+		`<Main$> was created without expected data property 'bar'`
 	]
 };
diff --git a/test/runtime/samples/dev-warning-readonly-computed/_config.js b/test/runtime/samples/dev-warning-readonly-computed/_config.js
index afa3a65667..2706b9610a 100644
--- a/test/runtime/samples/dev-warning-readonly-computed/_config.js
+++ b/test/runtime/samples/dev-warning-readonly-computed/_config.js
@@ -6,7 +6,7 @@ export default {
 			component.set({ foo: 1 });
 			throw new Error( 'Expected an error' );
 		} catch ( err ) {
-			assert.equal( err.message, `Cannot set read-only property 'foo'` );
+			assert.equal( err.message, `<Main$>: Cannot set read-only property 'foo'` );
 		}
 	}
 };
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-readonly-window-binding/_config.js b/test/runtime/samples/dev-warning-readonly-window-binding/_config.js
index 81d48e1619..0a534bc1e5 100644
--- a/test/runtime/samples/dev-warning-readonly-window-binding/_config.js
+++ b/test/runtime/samples/dev-warning-readonly-window-binding/_config.js
@@ -6,7 +6,7 @@ export default {
 			component.set({ width: 99 });
 			throw new Error( 'Expected an error' );
 		} catch ( err ) {
-			assert.equal( err.message, `Cannot set read-only property 'width'` );
+			assert.equal( err.message, `<Main$>: Cannot set read-only property 'width'` );
 		}
 	}
 };
\ No newline at end of file