use component name in runtime dev warnings - fixes #781

Author: Rich-Harris

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}'" );`
 				)}
 			};
 		`}

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.'
 		);
 	}
 

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'`
 	]
 };

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'`
 	]
 };

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'` );
 		}
 	}
 };

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'` );
 		}
 	}
 };