Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(internal): parse let directive alias as pattern instead of expression #8653

Draft
wants to merge 2 commits into
base: svelte-4
Choose a base branch
from
Draft

fix(internal): parse let directive alias as pattern instead of expression #8653

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1f1434
fix(internal): parse let directive as pattern instead of expression
gtm-nayan May 28, 2023
9d22981
Merge branch 'master' into parser-let-destructure
benmccann Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 3 additions & 6 deletions packages/svelte/src/compiler/compile/Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1664,13 +1664,10 @@ export default class Component {
const { let_attributes } = parent;

for (const attr of let_attributes) {
if (
if (attr.expression) {
// @ts-expect-error
// TODO extract_names only considers patterns but let attributes return expressions
(attr.expression && extract_names(attr.expression).includes(name)) ||
attr.name === name
)
return true;
if (extract_names(attr.expression).includes(name)) return true;
} else if (attr.name === name) return true;
}
}
}
Expand Down
9 changes: 1 addition & 8 deletions packages/svelte/src/compiler/compile/nodes/Let.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Node from './shared/Node.js';
import { walk } from 'estree-walker';
import compiler_errors from '../compiler_errors.js';

const applicable = new Set(['Identifier', 'ObjectExpression', 'ArrayExpression', 'Property']);
const applicable = new Set(['Identifier', 'ObjectPattern', 'ArrayPattern', 'Property']);

/** @extends Node<'Let'> */
export default class Let extends Node {
Expand Down Expand Up @@ -36,13 +36,6 @@ export default class Let extends Node {
if (node.type === 'Identifier') {
names.push(/** @type {import('estree').Identifier} */ (node).name);
}
// slightly unfortunate hack
if (node.type === 'ArrayExpression') {
node.type = 'ArrayPattern';
}
if (node.type === 'ObjectExpression') {
node.type = 'ObjectPattern';
}
}
});
} else {
Expand Down
14 changes: 9 additions & 5 deletions packages/svelte/src/compiler/parse/state/tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import read_expression from '../read/expression.js';
import read_script from '../read/script.js';
import read_style from '../read/style.js';
import { closing_tag_omitted, decode_character_references } from '../utils/html.js';
import read_context from '../read/context.js';

// eslint-disable-next-line no-useless-escape
const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
Expand Down Expand Up @@ -348,7 +349,7 @@ function read_attribute(parser, unique_names) {
let value = true;
if (parser.eat('=')) {
parser.allow_whitespace();
value = read_attribute_value(parser);
value = read_attribute_value(parser, type === 'Let');
end = parser.index;
} else if (parser.match_regex(regex_starts_with_quote_characters)) {
parser.error(parser_errors.unexpected_token('='), parser.index);
Expand Down Expand Up @@ -438,8 +439,9 @@ function get_directive_type(name) {

/**
* @param {import('../index.js').Parser} parser
* @param {boolean} as_pattern
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be optional since there's a default? (same below)

Suggested change
* @param {boolean} as_pattern
* @param {boolean} [as_pattern]

*/
function read_attribute_value(parser) {
function read_attribute_value(parser, as_pattern = false) {
const quote_mark = parser.eat("'") ? "'" : parser.eat('"') ? '"' : null;
if (quote_mark && parser.eat(quote_mark)) {
return [
Expand All @@ -461,7 +463,8 @@ function read_attribute_value(parser) {
if (quote_mark) return parser.match(quote_mark);
return !!parser.match_regex(regex_starts_with_invalid_attr_value);
},
'in attribute value'
'in attribute value',
as_pattern
);
} catch (error) {
if (error.code === 'parse-error') {
Expand All @@ -486,9 +489,10 @@ function read_attribute_value(parser) {
* @param {import('../index.js').Parser} parser
* @param {() => boolean} done
* @param {string} location
* @param {boolean} as_pattern
* @returns {import('../../interfaces.js').TemplateNode[]}
*/
function read_sequence(parser, done, location) {
function read_sequence(parser, done, location, as_pattern = false) {
/**
* @type {import('../../interfaces.js').Text}
*/
Expand Down Expand Up @@ -534,7 +538,7 @@ function read_sequence(parser, done, location) {
}
flush(parser.index - 1);
parser.allow_whitespace();
const expression = read_expression(parser);
const expression = as_pattern ? read_context(parser) : read_expression(parser);
parser.allow_whitespace();
parser.eat('}', true);
chunks.push({
Expand Down
2 changes: 1 addition & 1 deletion packages/svelte/test/parser/samples/attribute-style-directive-string/output.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
"start": 35,
"end": 52,
"type": "StyleDirective",
"modifiers": [],
"name": "color",
"modifiers": [],
"value": [
{
"start": 48,
Expand Down
14 changes: 7 additions & 7 deletions packages/svelte/test/parser/samples/dynamic-element-string/output.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
"tag": "div"
},
{
"type": "Text",
"start": 44,
"end": 45,
"data": "\n",
"raw": "\n"
"type": "Text",
"raw": "\n",
"data": "\n"
},
{
"start": 45,
Expand All @@ -27,17 +27,17 @@
"name": "svelte:element",
"attributes": [
{
"type": "Attribute",
"start": 72,
"end": 83,
"type": "Attribute",
"name": "class",
"value": [
{
"type": "Text",
"start": 79,
"end": 82,
"data": "foo",
"raw": "foo"
"type": "Text",
"raw": "foo",
"data": "foo"
}
]
}
Expand Down
24 changes: 12 additions & 12 deletions packages/svelte/test/parser/samples/dynamic-element-variable/output.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"attributes": [],
"children": [],
"tag": {
"type": "Identifier",
"start": 22,
"end": 25,
"loc": {
Expand All @@ -24,41 +25,41 @@
"column": 25
}
},
"name": "tag",
"type": "Identifier"
"name": "tag"
}
},
{
"type": "Text",
"start": 44,
"end": 45,
"data": "\n",
"raw": "\n"
"type": "Text",
"raw": "\n",
"data": "\n"
},
{
"start": 45,
"end": 101,
"type": "Element",
"name": "svelte:element",
"children": [],
"attributes": [
{
"type": "Attribute",
"start": 72,
"end": 83,
"type": "Attribute",
"name": "class",
"value": [
{
"type": "Text",
"start": 79,
"end": 82,
"data": "foo",
"raw": "foo"
"type": "Text",
"raw": "foo",
"data": "foo"
}
]
}
],
"children": [],
"tag": {
"type": "Identifier",
"start": 67,
"end": 70,
"loc": {
Expand All @@ -71,8 +72,7 @@
"column": 25
}
},
"name": "tag",
"type": "Identifier"
"name": "tag"
}
}
]
Expand Down
3 changes: 3 additions & 0 deletions packages/svelte/test/parser/samples/let-directive-destructure/input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<Component let:x={{foo = 1}}>

</Component>
133 changes: 133 additions & 0 deletions packages/svelte/test/parser/samples/let-directive-destructure/output.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
{
"html": {
"start": 0,
"end": 43,
"type": "Fragment",
"children": [
{
"start": 0,
"end": 43,
"type": "InlineComponent",
"name": "Component",
"attributes": [
{
"start": 11,
"end": 28,
"type": "Let",
"name": "x",
"modifiers": [],
"expression": {
"type": "ObjectPattern",
"start": 18,
"end": 27,
"loc": {
"start": {
"line": 1,
"column": 18
},
"end": {
"line": 1,
"column": 27
}
},
"properties": [
{
"type": "Property",
"start": 19,
"end": 26,
"loc": {
"start": {
"line": 1,
"column": 19
},
"end": {
"line": 1,
"column": 26
}
},
"method": false,
"shorthand": true,
"computed": false,
"key": {
"type": "Identifier",
"start": 19,
"end": 22,
"loc": {
"start": {
"line": 1,
"column": 19
},
"end": {
"line": 1,
"column": 22
}
},
"name": "foo"
},
"kind": "init",
"value": {
"type": "AssignmentPattern",
"start": 19,
"end": 26,
"loc": {
"start": {
"line": 1,
"column": 19
},
"end": {
"line": 1,
"column": 26
}
},
"left": {
"type": "Identifier",
"start": 19,
"end": 22,
"loc": {
"start": {
"line": 1,
"column": 19
},
"end": {
"line": 1,
"column": 22
}
},
"name": "foo"
},
"right": {
"type": "Literal",
"start": 25,
"end": 26,
"loc": {
"start": {
"line": 1,
"column": 25
},
"end": {
"line": 1,
"column": 26
}
},
"value": 1,
"raw": "1"
}
}
}
]
}
}
],
"children": [
{
"start": 29,
"end": 31,
"type": "Text",
"raw": "\n\n",
"data": "\n\n"
}
]
}
]
}
}
2 changes: 2 additions & 0 deletions packages/svelte/test/parser/update.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import * as fs from 'node:fs';
import glob from 'tiny-glob/sync.js';

const __dirname = new URL('.', import.meta.url).pathname;

glob('samples/*/_actual.json', { cwd: __dirname }).forEach((file) => {
const actual = fs.readFileSync(`${__dirname}/${file}`, 'utf-8');
fs.writeFileSync(`${__dirname}/${file.replace('_actual.json', 'output.json')}`, actual);
Expand Down