From f2eb632bc9e9483f4663277fa9e500d6e1d25b42 Mon Sep 17 00:00:00 2001 From: Pontus Lundin Date: Wed, 18 Dec 2019 12:34:55 +0000 Subject: [PATCH 1/4] pseudo code --- src/runtime/internal/lifecycle.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts index a8e37e9632a3..809a39d717f5 100644 --- a/src/runtime/internal/lifecycle.ts +++ b/src/runtime/internal/lifecycle.ts @@ -28,6 +28,8 @@ export function onDestroy(fn) { } export function createEventDispatcher() { + // is compile target customElement? + // always dispatch! const component = get_current_component(); return (type: string, detail?: any) => { @@ -61,4 +63,4 @@ export function bubble(component, event) { if (callbacks) { callbacks.slice().forEach(fn => fn(event)); } -} \ No newline at end of file +} From 6ebffd2882576aa23cda26b9dd193217ffcf51d5 Mon Sep 17 00:00:00 2001 From: Pontus Lundin Date: Wed, 18 Dec 2019 12:37:34 +0000 Subject: [PATCH 2/4] pseudo code --- src/runtime/internal/dom.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index c641315bc37b..5b3c70261d98 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -268,6 +268,9 @@ export function toggle_class(element, name, toggle) { } export function custom_event(type: string, detail?: T) { + // is compile target customElement? + // is event not a Svelte event? + // use new CustomEvent with bubbles/composed = true for non, svelte event const e: CustomEvent = document.createEvent('CustomEvent'); e.initCustomEvent(type, false, false, detail); return e; @@ -307,4 +310,4 @@ export class HtmlTag { d() { this.n.forEach(detach); } -} \ No newline at end of file +} From bab037e60e9b05ff4b65388bcae7a132bf5c511e Mon Sep 17 00:00:00 2001 From: hontas Date: Sat, 7 Mar 2020 23:20:28 +0100 Subject: [PATCH 3/4] let this point to instance --- src/runtime/internal/Component.ts | 2 +- test/custom-elements/samples/instance-this/main.svelte | 7 +++++++ test/custom-elements/samples/instance-this/test.js | 8 ++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 test/custom-elements/samples/instance-this/main.svelte create mode 100644 test/custom-elements/samples/instance-this/test.js diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 10588a08046b..3c8bf9d0f2cd 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -127,7 +127,7 @@ export function init(component, options, instance, create_fragment, not_equal, p let ready = false; $$.ctx = instance - ? instance(component, prop_values, (i, ret, ...rest) => { + ? instance.call(component, component, prop_values, (i, ret, ...rest) => { const value = rest.length ? rest[0] : ret; if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) { if ($$.bound[i]) $$.bound[i](value); diff --git a/test/custom-elements/samples/instance-this/main.svelte b/test/custom-elements/samples/instance-this/main.svelte new file mode 100644 index 000000000000..47ff31e4922a --- /dev/null +++ b/test/custom-elements/samples/instance-this/main.svelte @@ -0,0 +1,7 @@ + + + diff --git a/test/custom-elements/samples/instance-this/test.js b/test/custom-elements/samples/instance-this/test.js new file mode 100644 index 000000000000..8520710ca059 --- /dev/null +++ b/test/custom-elements/samples/instance-this/test.js @@ -0,0 +1,8 @@ +import * as assert from 'assert'; +import './main.svelte'; + +export default function (target) { + target.innerHTML = ''; + const el = target.querySelector('my-app'); + assert.ok(el.self === el); +} \ No newline at end of file From 49bd6d4d6a5f84e757078caa3b3380ee8f9fa40f Mon Sep 17 00:00:00 2001 From: hontas Date: Sat, 7 Mar 2020 23:49:21 +0100 Subject: [PATCH 4/4] clean up --- src/runtime/internal/dom.ts | 5 +---- src/runtime/internal/lifecycle.ts | 4 +--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 9745e4a50896..9ab9a4395f40 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -273,9 +273,6 @@ export function toggle_class(element, name, toggle) { } export function custom_event(type: string, detail?: T) { - // is compile target customElement? - // is event not a Svelte event? - // use new CustomEvent with bubbles/composed = true for non, svelte event const e: CustomEvent = document.createEvent('CustomEvent'); e.initCustomEvent(type, false, false, detail); return e; @@ -319,4 +316,4 @@ export class HtmlTag { d() { this.n.forEach(detach); } -} +} \ No newline at end of file diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts index 809a39d717f5..a8e37e9632a3 100644 --- a/src/runtime/internal/lifecycle.ts +++ b/src/runtime/internal/lifecycle.ts @@ -28,8 +28,6 @@ export function onDestroy(fn) { } export function createEventDispatcher() { - // is compile target customElement? - // always dispatch! const component = get_current_component(); return (type: string, detail?: any) => { @@ -63,4 +61,4 @@ export function bubble(component, event) { if (callbacks) { callbacks.slice().forEach(fn => fn(event)); } -} +} \ No newline at end of file