From bb4aae018ad9d2e81bee8e9f19b296b4220ea219 Mon Sep 17 00:00:00 2001 From: qinmu Date: Fri, 8 Jul 2022 22:17:01 +0800 Subject: [PATCH 1/4] fix: fix let binding value reading error from slot template --- src/compiler/compile/nodes/shared/Expression.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index a773355e3117..0603c15589d2 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -323,7 +323,7 @@ export default class Expression { const func_expression = func_declaration[0]; - if (node.type === 'InlineComponent') { + if (node.type === 'InlineComponent' || node.type === 'SlotTemplate') { // this.replace(func_expression); } else { From 709cc1187dd0df05d52277ebf1db04f08f2d02eb Mon Sep 17 00:00:00 2001 From: qinmu Date: Fri, 8 Jul 2022 22:46:55 +0800 Subject: [PATCH 2/4] feat: add test for slot binding arrow function --- test/parser/samples/slot-binding/Inner.svelte | 6 + .../parser/samples/slot-binding/Outter.svelte | 9 + .../samples/slot-binding/TestButton.svelte | 0 test/parser/samples/slot-binding/input.svelte | 7 + test/parser/samples/slot-binding/output.json | 177 ++++++++++++++++++ 5 files changed, 199 insertions(+) create mode 100644 test/parser/samples/slot-binding/Inner.svelte create mode 100644 test/parser/samples/slot-binding/Outter.svelte create mode 100644 test/parser/samples/slot-binding/TestButton.svelte create mode 100644 test/parser/samples/slot-binding/input.svelte create mode 100644 test/parser/samples/slot-binding/output.json diff --git a/test/parser/samples/slot-binding/Inner.svelte b/test/parser/samples/slot-binding/Inner.svelte new file mode 100644 index 000000000000..a8cda6b4af46 --- /dev/null +++ b/test/parser/samples/slot-binding/Inner.svelte @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/test/parser/samples/slot-binding/Outter.svelte b/test/parser/samples/slot-binding/Outter.svelte new file mode 100644 index 000000000000..64913ce62d20 --- /dev/null +++ b/test/parser/samples/slot-binding/Outter.svelte @@ -0,0 +1,9 @@ + + + + + innerCall()} /> + + \ No newline at end of file diff --git a/test/parser/samples/slot-binding/TestButton.svelte b/test/parser/samples/slot-binding/TestButton.svelte new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/test/parser/samples/slot-binding/input.svelte b/test/parser/samples/slot-binding/input.svelte new file mode 100644 index 000000000000..bc20f61de8bf --- /dev/null +++ b/test/parser/samples/slot-binding/input.svelte @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/test/parser/samples/slot-binding/output.json b/test/parser/samples/slot-binding/output.json new file mode 100644 index 000000000000..7d5663087e5e --- /dev/null +++ b/test/parser/samples/slot-binding/output.json @@ -0,0 +1,177 @@ +{ + "html": { + "start": 67, + "end": 153, + "type": "Fragment", + "children": [ + { + "start": 65, + "end": 67, + "type": "Text", + "raw": "\n\n", + "data": "\n\n" + }, + { + "start": 67, + "end": 153, + "type": "InlineComponent", + "name": "TestButton", + "attributes": [ + { + "start": 79, + "end": 92, + "type": "Let", + "name": "outerCall", + "modifiers": [], + "expression": null + } + ], + "children": [ + { + "start": 93, + "end": 96, + "type": "Text", + "raw": "\n ", + "data": "\n " + }, + { + "start": 96, + "end": 139, + "type": "Element", + "name": "button", + "attributes": [ + { + "start": 104, + "end": 124, + "type": "EventHandler", + "name": "click", + "modifiers": [], + "expression": { + "type": "Identifier", + "start": 114, + "end": 123, + "loc": { + "start": { + "line": 6, + "column": 20 + }, + "end": { + "line": 6, + "column": 29 + } + }, + "name": "outerCall" + } + } + ], + "children": [ + { + "start": 125, + "end": 130, + "type": "Text", + "raw": "Click", + "data": "Click" + } + ] + }, + { + "start": 139, + "end": 140, + "type": "Text", + "raw": "\n", + "data": "\n" + } + ] + } + ] + }, + "instance": { + "type": "Script", + "start": 0, + "end": 65, + "context": "default", + "content": { + "type": "Program", + "start": 8, + "end": 56, + "loc": { + "start": { + "line": 1, + "column": 0 + }, + "end": { + "line": 3, + "column": 0 + } + }, + "body": [ + { + "type": "ImportDeclaration", + "start": 11, + "end": 55, + "loc": { + "start": { + "line": 2, + "column": 2 + }, + "end": { + "line": 2, + "column": 46 + } + }, + "specifiers": [ + { + "type": "ImportDefaultSpecifier", + "start": 18, + "end": 28, + "loc": { + "start": { + "line": 2, + "column": 9 + }, + "end": { + "line": 2, + "column": 19 + } + }, + "local": { + "type": "Identifier", + "start": 18, + "end": 28, + "loc": { + "start": { + "line": 2, + "column": 9 + }, + "end": { + "line": 2, + "column": 19 + } + }, + "name": "TestButton" + } + } + ], + "source": { + "type": "Literal", + "start": 34, + "end": 55, + "loc": { + "start": { + "line": 2, + "column": 25 + }, + "end": { + "line": 2, + "column": 46 + } + }, + "value": "./TestButton.svelte", + "raw": "'./TestButton.svelte'" + } + } + ], + "sourceType": "module" + } + } +} \ No newline at end of file From bcdacf476d1e7c6662c80da004987ea892b5ff5d Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Sun, 10 Jul 2022 15:19:34 +0800 Subject: [PATCH 3/4] move parser test to runtime test --- test/parser/samples/slot-binding/Inner.svelte | 6 - .../samples/slot-binding/TestButton.svelte | 0 test/parser/samples/slot-binding/input.svelte | 7 - test/parser/samples/slot-binding/output.json | 177 ------------------ .../Inner.svelte | 8 + .../Outer.svelte} | 7 +- .../_config.js | 27 +++ .../main.svelte | 12 ++ 8 files changed, 52 insertions(+), 192 deletions(-) delete mode 100644 test/parser/samples/slot-binding/Inner.svelte delete mode 100644 test/parser/samples/slot-binding/TestButton.svelte delete mode 100644 test/parser/samples/slot-binding/input.svelte delete mode 100644 test/parser/samples/slot-binding/output.json create mode 100644 test/runtime/samples/component-slot-let-inline-function/Inner.svelte rename test/{parser/samples/slot-binding/Outter.svelte => runtime/samples/component-slot-let-inline-function/Outer.svelte} (52%) create mode 100644 test/runtime/samples/component-slot-let-inline-function/_config.js create mode 100644 test/runtime/samples/component-slot-let-inline-function/main.svelte diff --git a/test/parser/samples/slot-binding/Inner.svelte b/test/parser/samples/slot-binding/Inner.svelte deleted file mode 100644 index a8cda6b4af46..000000000000 --- a/test/parser/samples/slot-binding/Inner.svelte +++ /dev/null @@ -1,6 +0,0 @@ - - \ No newline at end of file diff --git a/test/parser/samples/slot-binding/TestButton.svelte b/test/parser/samples/slot-binding/TestButton.svelte deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/test/parser/samples/slot-binding/input.svelte b/test/parser/samples/slot-binding/input.svelte deleted file mode 100644 index bc20f61de8bf..000000000000 --- a/test/parser/samples/slot-binding/input.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/test/parser/samples/slot-binding/output.json b/test/parser/samples/slot-binding/output.json deleted file mode 100644 index 7d5663087e5e..000000000000 --- a/test/parser/samples/slot-binding/output.json +++ /dev/null @@ -1,177 +0,0 @@ -{ - "html": { - "start": 67, - "end": 153, - "type": "Fragment", - "children": [ - { - "start": 65, - "end": 67, - "type": "Text", - "raw": "\n\n", - "data": "\n\n" - }, - { - "start": 67, - "end": 153, - "type": "InlineComponent", - "name": "TestButton", - "attributes": [ - { - "start": 79, - "end": 92, - "type": "Let", - "name": "outerCall", - "modifiers": [], - "expression": null - } - ], - "children": [ - { - "start": 93, - "end": 96, - "type": "Text", - "raw": "\n ", - "data": "\n " - }, - { - "start": 96, - "end": 139, - "type": "Element", - "name": "button", - "attributes": [ - { - "start": 104, - "end": 124, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": { - "type": "Identifier", - "start": 114, - "end": 123, - "loc": { - "start": { - "line": 6, - "column": 20 - }, - "end": { - "line": 6, - "column": 29 - } - }, - "name": "outerCall" - } - } - ], - "children": [ - { - "start": 125, - "end": 130, - "type": "Text", - "raw": "Click", - "data": "Click" - } - ] - }, - { - "start": 139, - "end": 140, - "type": "Text", - "raw": "\n", - "data": "\n" - } - ] - } - ] - }, - "instance": { - "type": "Script", - "start": 0, - "end": 65, - "context": "default", - "content": { - "type": "Program", - "start": 8, - "end": 56, - "loc": { - "start": { - "line": 1, - "column": 0 - }, - "end": { - "line": 3, - "column": 0 - } - }, - "body": [ - { - "type": "ImportDeclaration", - "start": 11, - "end": 55, - "loc": { - "start": { - "line": 2, - "column": 2 - }, - "end": { - "line": 2, - "column": 46 - } - }, - "specifiers": [ - { - "type": "ImportDefaultSpecifier", - "start": 18, - "end": 28, - "loc": { - "start": { - "line": 2, - "column": 9 - }, - "end": { - "line": 2, - "column": 19 - } - }, - "local": { - "type": "Identifier", - "start": 18, - "end": 28, - "loc": { - "start": { - "line": 2, - "column": 9 - }, - "end": { - "line": 2, - "column": 19 - } - }, - "name": "TestButton" - } - } - ], - "source": { - "type": "Literal", - "start": 34, - "end": 55, - "loc": { - "start": { - "line": 2, - "column": 25 - }, - "end": { - "line": 2, - "column": 46 - } - }, - "value": "./TestButton.svelte", - "raw": "'./TestButton.svelte'" - } - } - ], - "sourceType": "module" - } - } -} \ No newline at end of file diff --git a/test/runtime/samples/component-slot-let-inline-function/Inner.svelte b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte new file mode 100644 index 000000000000..5a30e1855b69 --- /dev/null +++ b/test/runtime/samples/component-slot-let-inline-function/Inner.svelte @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/test/parser/samples/slot-binding/Outter.svelte b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte similarity index 52% rename from test/parser/samples/slot-binding/Outter.svelte rename to test/runtime/samples/component-slot-let-inline-function/Outer.svelte index 64913ce62d20..40ed99ca63c9 100644 --- a/test/parser/samples/slot-binding/Outter.svelte +++ b/test/runtime/samples/component-slot-let-inline-function/Outer.svelte @@ -1,9 +1,12 @@ - + - innerCall()} /> + innerCall(a)} /> \ No newline at end of file diff --git a/test/runtime/samples/component-slot-let-inline-function/_config.js b/test/runtime/samples/component-slot-let-inline-function/_config.js new file mode 100644 index 000000000000..cb175f476636 --- /dev/null +++ b/test/runtime/samples/component-slot-let-inline-function/_config.js @@ -0,0 +1,27 @@ +let logs; +function log(value) { + logs.push(value); +} + +export default { + html: "", + props: { + a: 'a', + b: 'b', + log, + }, + before_test() { + logs = []; + }, + async test({ assert, component, target, window }) { + const button = target.querySelector("button"); + await button.dispatchEvent(new window.MouseEvent("click")); + + assert.deepEqual(logs, ["a: a, b: b"]); + + component.a = '1'; + component.b = '2'; + await button.dispatchEvent(new window.MouseEvent("click")); + assert.deepEqual(logs, ["a: a, b: b", "a: 1, b: 2"]); + }, +}; diff --git a/test/runtime/samples/component-slot-let-inline-function/main.svelte b/test/runtime/samples/component-slot-let-inline-function/main.svelte new file mode 100644 index 000000000000..6ea417d0f29e --- /dev/null +++ b/test/runtime/samples/component-slot-let-inline-function/main.svelte @@ -0,0 +1,12 @@ + + + + + From 9dd49a33f3d5b1dd772853eb7854759b1561f95b Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Sun, 10 Jul 2022 15:34:40 +0800 Subject: [PATCH 4/4] fix linting errors --- .../_config.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/test/runtime/samples/component-slot-let-inline-function/_config.js b/test/runtime/samples/component-slot-let-inline-function/_config.js index cb175f476636..55318efaea5e 100644 --- a/test/runtime/samples/component-slot-let-inline-function/_config.js +++ b/test/runtime/samples/component-slot-let-inline-function/_config.js @@ -4,24 +4,24 @@ function log(value) { } export default { - html: "", + html: '', props: { a: 'a', b: 'b', - log, + log }, before_test() { logs = []; }, async test({ assert, component, target, window }) { - const button = target.querySelector("button"); - await button.dispatchEvent(new window.MouseEvent("click")); + const button = target.querySelector('button'); + await button.dispatchEvent(new window.MouseEvent('click')); - assert.deepEqual(logs, ["a: a, b: b"]); + assert.deepEqual(logs, ['a: a, b: b']); component.a = '1'; component.b = '2'; - await button.dispatchEvent(new window.MouseEvent("click")); - assert.deepEqual(logs, ["a: a, b: b", "a: 1, b: 2"]); - }, + await button.dispatchEvent(new window.MouseEvent('click')); + assert.deepEqual(logs, ['a: a, b: b', 'a: 1, b: 2']); + } };