From a19aec1ea91005b708c2639a3f4ab093ab5dc56e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 28 Apr 2018 22:26:18 -0400 Subject: [PATCH] assign custom methods to custom element prototype - fixes #1369 --- src/compile/dom/index.ts | 13 +++++++------ .../custom-elements/samples/custom-method/main.html | 13 +++++++++++++ test/custom-elements/samples/custom-method/test.js | 12 ++++++++++++ test/js/samples/action/expected-bundle.js | 2 +- test/js/samples/action/expected.js | 2 +- .../css-shadow-dom-keyframes/expected-bundle.js | 6 ++++-- .../js/samples/css-shadow-dom-keyframes/expected.js | 6 ++++-- 7 files changed, 42 insertions(+), 12 deletions(-) create mode 100644 test/custom-elements/samples/custom-method/main.html create mode 100644 test/custom-elements/samples/custom-method/test.js diff --git a/src/compile/dom/index.ts b/src/compile/dom/index.ts index 3db1158449..f835272b3f 100644 --- a/src/compile/dom/index.ts +++ b/src/compile/dom/index.ts @@ -113,8 +113,6 @@ export default function dom( ? 'svelte/shared.js' : options.shared || ''; - let prototypeBase = `${name}.prototype`; - const proto = sharedPath ? `@proto` : deindent` @@ -294,8 +292,9 @@ export default function dom( `} } - customElements.define("${compiler.tag}", ${name}); - @assign(@assign(${prototypeBase}, ${proto}), { + @assign(${name}.prototype, ${proto}); + ${templateProperties.methods && `@assign(${name}.prototype, %methods);`} + @assign(${name}.prototype, { _mount(target, anchor) { target.insertBefore(this, anchor); }, @@ -304,6 +303,8 @@ export default function dom( this.parentNode.removeChild(this); } }); + + customElements.define("${compiler.tag}", ${name}); `); } else { builder.addBlock(deindent` @@ -311,8 +312,8 @@ export default function dom( ${constructorBody} } - @assign(${prototypeBase}, ${proto}); - ${templateProperties.methods && `@assign(${prototypeBase}, %methods);`} + @assign(${name}.prototype, ${proto}); + ${templateProperties.methods && `@assign(${name}.prototype, %methods);`} `); } diff --git a/test/custom-elements/samples/custom-method/main.html b/test/custom-elements/samples/custom-method/main.html new file mode 100644 index 0000000000..b388472f23 --- /dev/null +++ b/test/custom-elements/samples/custom-method/main.html @@ -0,0 +1,13 @@ +

{foo}

+ + \ No newline at end of file diff --git a/test/custom-elements/samples/custom-method/test.js b/test/custom-elements/samples/custom-method/test.js new file mode 100644 index 0000000000..f6ef68c8c0 --- /dev/null +++ b/test/custom-elements/samples/custom-method/test.js @@ -0,0 +1,12 @@ +import * as assert from 'assert'; +import './main.html'; + +export default function (target) { + target.innerHTML = ''; + const el = target.querySelector('custom-element'); + + el.updateFoo(42); + + const p = el.shadowRoot.querySelector('p'); + assert.equal(p.textContent, '42'); +} \ No newline at end of file diff --git a/test/js/samples/action/expected-bundle.js b/test/js/samples/action/expected-bundle.js index f1ee2f4b20..1998828627 100644 --- a/test/js/samples/action/expected-bundle.js +++ b/test/js/samples/action/expected-bundle.js @@ -136,7 +136,7 @@ var proto = { /* generated by Svelte vX.Y.Z */ function link(node) { - + function onClick(event) { event.preventDefault(); history.pushState(null, null, event.target.href); diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js index 40459f03f9..50c235340a 100644 --- a/test/js/samples/action/expected.js +++ b/test/js/samples/action/expected.js @@ -2,7 +2,7 @@ import { assign, createElement, detachNode, init, insertNode, noop, proto } from "svelte/shared.js"; function link(node) { - + function onClick(event) { event.preventDefault(); history.pushState(null, null, event.target.href); diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js index 86200cb8c0..6788ad53e3 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js @@ -185,8 +185,8 @@ class SvelteComponent extends HTMLElement { } } -customElements.define("custom-element", SvelteComponent); -assign(assign(SvelteComponent.prototype, proto), { +assign(SvelteComponent.prototype, proto); +assign(SvelteComponent.prototype, { _mount(target, anchor) { target.insertBefore(this, anchor); }, @@ -196,4 +196,6 @@ assign(assign(SvelteComponent.prototype, proto), { } }); +customElements.define("custom-element", SvelteComponent); + export default SvelteComponent; diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js index fa4eec75b0..81c7818b0c 100644 --- a/test/js/samples/css-shadow-dom-keyframes/expected.js +++ b/test/js/samples/css-shadow-dom-keyframes/expected.js @@ -51,8 +51,8 @@ class SvelteComponent extends HTMLElement { } } -customElements.define("custom-element", SvelteComponent); -assign(assign(SvelteComponent.prototype, proto), { +assign(SvelteComponent.prototype, proto); +assign(SvelteComponent.prototype, { _mount(target, anchor) { target.insertBefore(this, anchor); }, @@ -61,4 +61,6 @@ assign(assign(SvelteComponent.prototype, proto), { this.parentNode.removeChild(this); } }); + +customElements.define("custom-element", SvelteComponent); export default SvelteComponent; \ No newline at end of file