Merge pull request sveltejs#2051 from thgh/v2

Rich-Harris · web-flow · commit 7f7e1bec8b52 · 2019-02-08T08:37:14.000-05:00
Fix "this._recompute is not a function"
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts
@@ -289,8 +289,6 @@ export default function dom(
 					target.insertBefore(this, anchor);
 				}
 			});
-
-			customElements.define("${component.tag}", ${name});
 		`);
 	} else {
 		builder.addBlock(deindent`
@@ -328,6 +326,10 @@ export default function dom(
 		${immutable && `${name}.prototype._differs = @_differsImmutable;`}
 	`);
 
+	if (component.customElement) {
+		builder.addBlock(`customElements.define("${component.tag}", ${name});`);
+	}
+
 	let result = builder.toString();
 
 	return component.generate(result, options, {
diff --git a/test/cli/samples/custom-element/expected/Main.js b/test/cli/samples/custom-element/expected/Main.js
@@ -67,10 +67,10 @@ assign(Main.prototype, {
 	}
 });
 
-customElements.define("my-element", Main);
-
 Main.prototype._recompute = noop;
 
+customElements.define("my-element", Main);
+
 function createElement(name) {
 	return document.createElement(name);
 }
diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js
@@ -7,6 +7,7 @@ import { addLineNumbers, loadConfig, loadSvelte } from "../helpers.js";
 
 const page = `
 <body>
+	<custom-element name="world"></custom-element>
 	<main></main>
 	<script src='/https/github.com/bundle.js'></script>
 </body>
diff --git a/test/custom-elements/samples/initial-props/main.html b/test/custom-elements/samples/initial-props/main.html
@@ -0,0 +1,8 @@
+<p>Hello {name}</p>
+
+<script>
+  export default {
+    tag: 'custom-element',
+    props: ['name']
+  };
+</script>
diff --git a/test/custom-elements/samples/initial-props/test.js b/test/custom-elements/samples/initial-props/test.js
@@ -0,0 +1,8 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+  const el = target.ownerDocument.body.querySelector('custom-element');
+  const p = el.shadowRoot.querySelector('p');
+  assert.equal(p.textContent, 'Hello world');
+}
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -59,5 +59,7 @@ assign(SvelteComponent.prototype, {
 	}
 });
 
+
+
 customElements.define("custom-element", SvelteComponent);
 export default SvelteComponent;

Original file line number	Diff line number	Diff line change
`@@ -67,10 +67,10 @@ assign(Main.prototype, {`
`67`	`67`	`}`
`68`	`68`	`});`
`69`	`69`
`70`		`-customElements.define("my-element", Main);`
`71`		`-`
`72`	`70`	`Main.prototype._recompute = noop;`
`73`	`71`
	`72`	`+customElements.define("my-element", Main);`
	`73`	`+`
`74`	`74`	`function createElement(name) {`
`75`	`75`	`return document.createElement(name);`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,5 +59,7 @@ assign(SvelteComponent.prototype, {`
`59`	`59`	`}`
`60`	`60`	`});`
`61`	`61`
	`62`	`+`
	`63`	`+`
`62`	`64`	`customElements.define("custom-element", SvelteComponent);`
`63`	`65`	`export default SvelteComponent;`