in custom elements, call oncreate in connectedCallback - fixes #1117

7 years ago · 009c082d23
parent 37d5260036
commit 009c082d23
5 changed files with 33 additions and 1 deletions
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@ -323,6 +323,16 @@ export default function dom(
 				attributeChangedCallback(attr, oldValue, newValue) {
 					this.set({ [attr]: newValue });
 				}
+
+				${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
+					connectedCallback() {
+						${generator.hasComponents && `this._lock = true;`}
+						${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
+						${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+						${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
+						${generator.hasComponents && `this._lock = false;`}
+					}
+				`}
 			}

 			customElements.define("${generator.tag}", ${name});
--- a/test/custom-elements/assert.js
+++ b/test/custom-elements/assert.js
@ -1,3 +1,7 @@
 export function equal(a, b, message) {
 	if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
+}
+
+export function ok(condition, message) {
+	if (!condition) throw new Error(message || `Expected ${condition} to be truthy`);
 }
--- 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 { addLineNumbers, loadSvelte } from "../helpers.js";

 const page = `
 <body>
@ -93,6 +93,7 @@ describe('custom-elements', function() {
 							if (result) console.log(result);
 						})
 						.catch(message => {
+							console.log(addLineNumbers(bundle));
 							throw new Error(message);
 						});
 				});
--- a/test/custom-elements/samples/oncreate/main.html
+++ b/test/custom-elements/samples/oncreate/main.html
@ -0,0 +1,9 @@
+<script>
+	export default {
+		tag: 'my-app',
+
+		oncreate() {
+			this.wasCreated = true;
+		}
+	};
+</script>
--- a/test/custom-elements/samples/oncreate/test.js
+++ b/test/custom-elements/samples/oncreate/test.js
@ -0,0 +1,8 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	target.innerHTML = '<my-app/>';
+	const el = target.querySelector('my-app');
+	assert.ok(el.wasCreated);
+}