prevent erroneous missing data warnings for custom elements - fixes #1065

7 years ago · 9dda4b0563
parent 29a156957f
commit 9dda4b0563
5 changed files with 39 additions and 3 deletions
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@ -219,7 +219,11 @@ export default function dom(
 				const message = generator.components.has(prop) ?
 					`${debugName} expected to find '${prop}' in \`data\`, but found it in \`components\` instead` :
 					`${debugName} was created without expected data property '${prop}'`;
-				return `if (!('${prop}' in this._state)) console.warn("${message}");`
+
+				const conditions = [`!('${prop}' in this._state)`];
+				if (generator.customElement) conditions.push(`!('${prop}' in this.attributes)`);
+
+				return `if (${conditions.join(' && ')}) console.warn("${message}");`
 			})}
 		${generator.bindingGroups.length &&
 			`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
--- a/test/custom-elements/index.js
+++ b/test/custom-elements/index.js
@ -3,7 +3,7 @@ import * as http from 'http';
 import { rollup } from 'rollup';
 import virtual from 'rollup-plugin-virtual';
 import Nightmare from 'nightmare';
-import { loadSvelte } from "../helpers.js";
+import { loadSvelte, loadConfig } from "../helpers.js";

 const page = `
 <body>
@ -57,6 +57,8 @@ describe('custom-elements', function() {
 		const solo = /\.solo$/.test(dir);

 		(solo ? it.only : it)(dir, () => {
+			const config = loadConfig(`./custom-elements/samples/${dir}/_config.js`);
+
 			return rollup({
 				input: `test/custom-elements/samples/${dir}/test.js`,
 				plugins: [
@ -64,7 +66,8 @@ describe('custom-elements', function() {
 						transform(code, id) {
 							if (id.endsWith('.html')) {
 								const compiled = svelte.compile(code, {
-									customElement: true
+									customElement: true,
+									dev: config.dev
 								});

 								return {
--- a/test/custom-elements/samples/no-missing-prop-warnings/_config.js
+++ b/test/custom-elements/samples/no-missing-prop-warnings/_config.js
@ -0,0 +1,3 @@
+export default {
+	dev: true
+};
--- a/test/custom-elements/samples/no-missing-prop-warnings/main.html
+++ b/test/custom-elements/samples/no-missing-prop-warnings/main.html
@ -0,0 +1,8 @@
+<p>foo: {{foo}}</p>
+<p>bar: {{bar}}</p>
+
+<script>
+	export default {
+		tag: 'my-app'
+	};
+</script>
--- a/test/custom-elements/samples/no-missing-prop-warnings/test.js
+++ b/test/custom-elements/samples/no-missing-prop-warnings/test.js
@ -0,0 +1,18 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	const warnings = [];
+	const warn = console.warn;
+
+	console.warn = warning => {
+		warnings.push(warning);
+	};
+
+	target.innerHTML = '<my-app foo=yes />';
+
+	assert.equal(warnings.length, 1);
+	assert.equal(warnings[0], `<my-app> was created without expected data property 'bar'`);
+
+	console.warn = warn;
+}