Repository: sveltejs/svelte (JavaScript)
Date: 2019-11-13 01:04:45+00:00
Task type: Bug Fix

Issue:
Development mode warnings use array.prototype.includes which breaks bundle on IE 11
**Describe the bug**
When bundling in development mode the check for unknown props utilizes the Array.prototype.includes method which isn't supported on ie 11. This causes a break on ie11

**Logs**
![image](https://user-images.githubusercontent.com/33679961/68722687-5a247600-060a-11ea-82fe-3088a26ca1a6.png)
![image](https://user-images.githubusercontent.com/33679961/68722708-68729200-060a-11ea-9fe0-2ac1c1b4965e.png)

**Expected behavior**
Conduitry suggested in the discord that this should be replaced with indexOf to avoid having to use a polyfill

**Information about your Svelte project:**
- Your browser and the version: (IE 11)

- Your operating system: (Windows 7)

- Svelte version (3.12..1)

- Whether your project uses Webpack or **Rollup**

**Severity**
Renders usage in IE 11 while developing useless so decently annoying. Requires excess polyfills simply to develop although it is not a blocking issue as adding a polyfill should fix the issue.




Issue discussion:
[caniuse says](https://caniuse.com/#feat=mdn-javascript_builtins_string_startswith) that IE doesn't support `startsWith` either, so we should replace that with something else as well.

Solution patch:
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -247,7 +247,7 @@ export default function dom(
 			function create_fragment(#ctx) {
 				${block.get_contents()}
 			}
-		`);	
+		`);
 	}
 
 	body.push(b`
@@ -369,7 +369,7 @@ export default function dom(
 			unknown_props_check = b`
 				const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}];
 				@_Object.keys($$props).forEach(key => {
-					if (!writable_props.includes(key) && !key.startsWith('$$')) @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
+					if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
 				});
 			`;
 		}


Test patch:
diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js
--- a/test/js/samples/debug-empty/expected.js
+++ b/test/js/samples/debug-empty/expected.js
@@ -72,7 +72,7 @@ function instance($$self, $$props, $$invalidate) {
 	const writable_props = ["name"];
 
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key) && !key.startsWith("$$")) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
--- a/test/js/samples/debug-foo-bar-baz-things/expected.js
+++ b/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -167,7 +167,7 @@ function instance($$self, $$props, $$invalidate) {
 	const writable_props = ["things", "foo", "bar", "baz"];
 
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key) && !key.startsWith("$$")) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
--- a/test/js/samples/debug-foo/expected.js
+++ b/test/js/samples/debug-foo/expected.js
@@ -165,7 +165,7 @@ function instance($$self, $$props, $$invalidate) {
 	const writable_props = ["things", "foo"];
 
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key) && !key.startsWith("$$")) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
--- a/test/js/samples/dev-warning-missing-data-computed/expected.js
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -69,7 +69,7 @@ function instance($$self, $$props, $$invalidate) {
 	const writable_props = ["foo"];
 
 	Object.keys($$props).forEach(key => {
-		if (!writable_props.includes(key) && !key.startsWith("$$")) console.warn(`<Component> was created with unknown prop '${key}'`);
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<Component> was created with unknown prop '${key}'`);
 	});
 
 	$$self.$set = $$props => {