element
+ const inner_div = window.document.createElement('div');
+ div.insertBefore(inner_div, null);
+ event = new window.InputEvent('input');
+ await div.dispatchEvent(event);
+ assert.equal(div.textContent, 'a');
+
+ text = window.document.createTextNode('b');
+ inner_div.insertBefore(text, null);
+ event = new window.InputEvent('input');
+ await div.dispatchEvent(event);
+ assert.equal(div.textContent, 'ab');
+ }
+};
diff --git a/test/runtime/samples/component-event-handler-contenteditable/main.svelte b/test/runtime-puppeteer/samples/component-event-handler-contenteditable/main.svelte
similarity index 100%
rename from test/runtime/samples/component-event-handler-contenteditable/main.svelte
rename to test/runtime-puppeteer/samples/component-event-handler-contenteditable/main.svelte
diff --git a/test/runtime/samples/component-event-handler-contenteditable/_config.js b/test/runtime/samples/component-event-handler-contenteditable/_config.js
deleted file mode 100644
index cfd51e500591..000000000000
--- a/test/runtime/samples/component-event-handler-contenteditable/_config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
- html: '
',
-
- async test({ assert, target, window }) {
- const div = target.querySelector('div');
- const text = window.document.createTextNode('a');
- div.insertBefore(text, null);
- const event = new window.InputEvent('input');
- await div.dispatchEvent(event);
- assert.equal(div.textContent, 'a');
- }
-};
diff --git a/test/runtime/samples/component-event-handler-contenteditable2/_config.js b/test/runtime/samples/component-event-handler-contenteditable2/_config.js
deleted file mode 100644
index 10736ec1b2b1..000000000000
--- a/test/runtime/samples/component-event-handler-contenteditable2/_config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
- html: '
',
-
- async test({ assert, target, window }) {
- const div = target.querySelector('div');
- const text = window.document.createTextNode('a');
- div.insertBefore(text, null);
- const event = new window.InputEvent('input');
- await div.dispatchEvent(event);
- assert.equal(div.textContent, 'a');
- }
-};
diff --git a/test/runtime/samples/component-event-handler-contenteditable2/main.svelte b/test/runtime/samples/component-event-handler-contenteditable2/main.svelte
deleted file mode 100644
index e540ceff2571..000000000000
--- a/test/runtime/samples/component-event-handler-contenteditable2/main.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
{text}
diff --git a/test/runtime/samples/component-event-handler-contenteditable3/_config.js b/test/runtime/samples/component-event-handler-contenteditable3/_config.js
deleted file mode 100644
index 957be6388b49..000000000000
--- a/test/runtime/samples/component-event-handler-contenteditable3/_config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
- html: '
',
- ssrHtml: '
',
-
- async test({ assert, target, window }) {
- const div = target.querySelector('div');
- const text = window.document.createTextNode('a');
- div.insertBefore(text, null);
- const event = new window.InputEvent('input');
- await div.dispatchEvent(event);
- assert.equal(div.textContent, 'a');
- }
-};
diff --git a/test/runtime/samples/component-event-handler-contenteditable3/main.svelte b/test/runtime/samples/component-event-handler-contenteditable3/main.svelte
deleted file mode 100644
index 34bc4300e08e..000000000000
--- a/test/runtime/samples/component-event-handler-contenteditable3/main.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
{text}
From 55209c44f5ad684db1cb777c6287516f132a561d Mon Sep 17 00:00:00 2001
From: Simon Holthausen
Date: Tue, 21 Mar 2023 13:56:28 +0100
Subject: [PATCH 13/14] optimize for static contenteditable value
---
.../compile/render_dom/wrappers/MustacheTag.ts | 16 ++++++++++++----
src/runtime/internal/dev.ts | 12 ++++++++----
src/runtime/internal/dom.ts | 10 +++++++---
3 files changed, 27 insertions(+), 11 deletions(-)
diff --git a/src/compiler/compile/render_dom/wrappers/MustacheTag.ts b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
index 08d2b9ee87d5..0bfa0198aea8 100644
--- a/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
@@ -25,10 +25,14 @@ export default class MustacheTagWrapper extends Tag {
this.parent instanceof ElementWrapper &&
this.parent.attributes.filter((a) => a.node.is_spread);
- let contenteditable_attr_value: Expression | undefined = undefined;
+ let contenteditable_attr_value: Expression | true | undefined = undefined;
if (contenteditable_attributes.length > 0) {
- const value = (contenteditable_attributes[0] as AttributeWrapper).get_value(block);
- contenteditable_attr_value = x`${value}`;
+ const attribute = contenteditable_attributes[0] as AttributeWrapper;
+ if ([true, 'true', ''].includes(attribute.node.get_static_value())) {
+ contenteditable_attr_value = true;
+ } else {
+ contenteditable_attr_value = x`${attribute.get_value(block)}`;
+ }
} else if (spread_attributes.length > 0 && data.element_data_name) {
contenteditable_attr_value = x`${data.element_data_name}['contenteditable']`;
}
@@ -37,7 +41,11 @@ export default class MustacheTagWrapper extends Tag {
block,
value => {
if (contenteditable_attr_value) {
- return x`@set_data_maybe_contenteditable(${this.var}, ${value}, ${contenteditable_attr_value})`;
+ if (contenteditable_attr_value === true) {
+ return x`@set_data_contenteditable(${this.var}, ${value})`;
+ } else {
+ return x`@set_data_maybe_contenteditable(${this.var}, ${value}, ${contenteditable_attr_value})`;
+ }
} else {
return x`@set_data(${this.var}, ${value})`;
}
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
index ae50e365d2e9..cd47138fefcc 100644
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -91,12 +91,16 @@ export function set_data_dev(text: Text, data: unknown) {
text.data = (data as string);
}
+export function set_data_contenteditable_dev(text: Text, data: unknown) {
+ data = '' + data;
+ if (text.wholeText === data) return;
+ dispatch_dev('SvelteDOMSetData', { node: text, data });
+ text.data = (data as string);
+}
+
export function set_data_maybe_contenteditable_dev(text: Text, data: unknown, attr_value: string) {
if (~contenteditable_truthy_values.indexOf(attr_value)) {
- data = '' + data;
- if (text.wholeText === data) return;
- dispatch_dev('SvelteDOMSetData', { node: text, data });
- text.data = (data as string);
+ set_data_contenteditable_dev(text, data);
} else {
set_data_dev(text, data);
}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 2e54305c46f3..bbe9ed2e0859 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -587,11 +587,15 @@ export function set_data(text: Text, data: unknown) {
text.data = (data as string);
}
+export function set_data_contenteditable(text: Text, data: unknown) {
+ data = '' + data;
+ if (text.wholeText === data) return;
+ text.data = (data as string);
+}
+
export function set_data_maybe_contenteditable(text: Text, data: unknown, attr_value: string) {
if (~contenteditable_truthy_values.indexOf(attr_value)) {
- data = '' + data;
- if (text.wholeText === data) return;
- text.data = (data as string);
+ set_data_contenteditable(text, data)
} else {
set_data(text, data);
}
From 05f0927f556092bc7f32136713e2d99ac29fac02 Mon Sep 17 00:00:00 2001
From: Simon Holthausen
Date: Tue, 21 Mar 2023 13:59:58 +0100
Subject: [PATCH 14/14] ffs
---
src/runtime/internal/dom.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index bbe9ed2e0859..a7466131708e 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -595,7 +595,7 @@ export function set_data_contenteditable(text: Text, data: unknown) {
export function set_data_maybe_contenteditable(text: Text, data: unknown, attr_value: string) {
if (~contenteditable_truthy_values.indexOf(attr_value)) {
- set_data_contenteditable(text, data)
+ set_data_contenteditable(text, data);
} else {
set_data(text, data);
}