Skip to content

Commit 586288c

Browse files
ota-meshiota-meshi
committed
update
1 parent cb6cccc commit 586288c

File tree

12 files changed

+1375
-74
lines changed

12 files changed

+1375
-74
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
"prettier-plugin-svelte": "^3.0.0",
104104
"rimraf": "^5.0.1",
105105
"semver": "^7.5.1",
106-
"svelte": "^5.0.0-0",
106+
"svelte": "^5.0.0-next.2",
107107
"svelte2tsx": "^0.6.20",
108108
"typescript": "~5.1.3",
109109
"typescript-eslint-parser-for-extra-files": "^0.5.0"

‎src/parser/converts/element.ts‎

Lines changed: 108 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -439,66 +439,92 @@ function processThisAttribute(
439439
(c) => Boolean(c.trim()),
440440
eqIndex + 1,
441441
);
442-
const quote = ctx.code.startsWith(thisValue, valueStartIndex)
443-
? null
444-
: ctx.code[valueStartIndex];
445-
const literalStartIndex = quote
446-
? valueStartIndex + quote.length
447-
: valueStartIndex;
448-
const literalEndIndex = literalStartIndex + thisValue.length;
449-
const endIndex = quote ? literalEndIndex + quote.length : literalEndIndex;
450-
const thisAttr: SvelteAttribute = {
451-
type: "SvelteAttribute",
452-
key: null as any,
453-
boolean: false,
454-
value: [],
455-
parent: element.startTag,
456-
...ctx.getConvertLocation({ start: startIndex, end: endIndex }),
457-
};
458-
thisAttr.key = {
459-
type: "SvelteName",
460-
name: "this",
461-
parent: thisAttr,
462-
...ctx.getConvertLocation({ start: startIndex, end: eqIndex }),
463-
};
464-
thisAttr.value.push({
465-
type: "SvelteLiteral",
466-
value: thisValue,
467-
parent: thisAttr,
468-
...ctx.getConvertLocation({
469-
start: literalStartIndex,
470-
end: literalEndIndex,
471-
}),
472-
});
473-
// this
474-
ctx.addToken("HTMLIdentifier", {
475-
start: startIndex,
476-
end: startIndex + 4,
477-
});
478-
// =
479-
ctx.addToken("Punctuator", {
480-
start: eqIndex,
481-
end: eqIndex + 1,
482-
});
483-
if (quote) {
484-
// "
485-
ctx.addToken("Punctuator", {
486-
start: valueStartIndex,
487-
end: literalStartIndex,
442+
if (ctx.code[valueStartIndex] === "{") {
443+
// Svelte v5 `this={"..."}`
444+
const openingQuoteIndex = indexOf(
445+
ctx.code,
446+
(c) => c === '"' || c === "'",
447+
valueStartIndex + 1,
448+
);
449+
const quote = ctx.code[openingQuoteIndex];
450+
const closingQuoteIndex = indexOf(
451+
ctx.code,
452+
(c) => c === quote,
453+
openingQuoteIndex + thisValue.length,
454+
);
455+
const closeIndex = ctx.code.indexOf("}", closingQuoteIndex + 1);
456+
const endIndex = indexOf(
457+
ctx.code,
458+
(c) => c === ">" || !c.trim(),
459+
closeIndex,
460+
);
461+
thisNode = createSvelteSpecialDirective(startIndex, endIndex, eqIndex, {
462+
type: "Literal",
463+
value: thisValue,
464+
range: [openingQuoteIndex, closingQuoteIndex + 1],
488465
});
489-
}
490-
ctx.addToken("HTMLText", {
491-
start: literalStartIndex,
492-
end: literalEndIndex,
493-
});
494-
if (quote) {
495-
// "
466+
} else {
467+
const quote = ctx.code.startsWith(thisValue, valueStartIndex)
468+
? null
469+
: ctx.code[valueStartIndex];
470+
const literalStartIndex = quote
471+
? valueStartIndex + quote.length
472+
: valueStartIndex;
473+
const literalEndIndex = literalStartIndex + thisValue.length;
474+
const endIndex = quote ? literalEndIndex + quote.length : literalEndIndex;
475+
const thisAttr: SvelteAttribute = {
476+
type: "SvelteAttribute",
477+
key: null as any,
478+
boolean: false,
479+
value: [],
480+
parent: element.startTag,
481+
...ctx.getConvertLocation({ start: startIndex, end: endIndex }),
482+
};
483+
thisAttr.key = {
484+
type: "SvelteName",
485+
name: "this",
486+
parent: thisAttr,
487+
...ctx.getConvertLocation({ start: startIndex, end: eqIndex }),
488+
};
489+
thisAttr.value.push({
490+
type: "SvelteLiteral",
491+
value: thisValue,
492+
parent: thisAttr,
493+
...ctx.getConvertLocation({
494+
start: literalStartIndex,
495+
end: literalEndIndex,
496+
}),
497+
});
498+
// this
499+
ctx.addToken("HTMLIdentifier", {
500+
start: startIndex,
501+
end: startIndex + 4,
502+
});
503+
// =
496504
ctx.addToken("Punctuator", {
497-
start: literalEndIndex,
498-
end: endIndex,
505+
start: eqIndex,
506+
end: eqIndex + 1,
507+
});
508+
if (quote) {
509+
// "
510+
ctx.addToken("Punctuator", {
511+
start: valueStartIndex,
512+
end: literalStartIndex,
513+
});
514+
}
515+
ctx.addToken("HTMLText", {
516+
start: literalStartIndex,
517+
end: literalEndIndex,
499518
});
519+
if (quote) {
520+
// "
521+
ctx.addToken("Punctuator", {
522+
start: literalEndIndex,
523+
end: endIndex,
524+
});
525+
}
526+
thisNode = thisAttr;
500527
}
501-
thisNode = thisAttr;
502528
} else {
503529
// this={...}
504530
const eqIndex = ctx.code.lastIndexOf("=", getWithLoc(thisValue).start);
@@ -509,6 +535,30 @@ function processThisAttribute(
509535
(c) => c === ">" || !c.trim(),
510536
closeIndex,
511537
);
538+
thisNode = createSvelteSpecialDirective(
539+
startIndex,
540+
endIndex,
541+
eqIndex,
542+
thisValue,
543+
);
544+
}
545+
546+
const targetIndex = element.startTag.attributes.findIndex(
547+
(attr) => thisNode.range[1] <= attr.range[0],
548+
);
549+
if (targetIndex === -1) {
550+
element.startTag.attributes.push(thisNode);
551+
} else {
552+
element.startTag.attributes.splice(targetIndex, 0, thisNode);
553+
}
554+
555+
/** Create SvelteSpecialDirective */
556+
function createSvelteSpecialDirective(
557+
startIndex: number,
558+
endIndex: number,
559+
eqIndex: number,
560+
expression: ESTree.Expression,
561+
): SvelteSpecialDirective {
512562
const thisDir: SvelteSpecialDirective = {
513563
type: "SvelteSpecialDirective",
514564
kind: "this",
@@ -532,19 +582,11 @@ function processThisAttribute(
532582
start: eqIndex,
533583
end: eqIndex + 1,
534584
});
535-
ctx.scriptLet.addExpression(thisValue, thisDir, null, (es) => {
585+
ctx.scriptLet.addExpression(expression, thisDir, null, (es) => {
536586
thisDir.expression = es;
537587
});
538-
thisNode = thisDir;
539-
}
540588

541-
const targetIndex = element.startTag.attributes.findIndex(
542-
(attr) => thisNode.range[1] <= attr.range[0],
543-
);
544-
if (targetIndex === -1) {
545-
element.startTag.attributes.push(thisNode);
546-
} else {
547-
element.startTag.attributes.splice(targetIndex, 0, thisNode);
589+
return thisDir;
548590
}
549591
}
550592

‎tests/fixtures/parser/ast/await03-requirements.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"TODO": "As of now, Svelte v5 gives an error with single-line await blocks.",
3-
"test": {
2+
"FIXME": "As of now, Svelte v5 gives an error with single-line await blocks.",
3+
"all": {
44
"svelte": "^4 || ^3"
55
}
66
}

‎tests/fixtures/parser/ast/docs/template-syntax/19-svelte-options/01-requirements.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"test": {
2+
"all": {
33
"svelte": "^4 || ^3"
44
}
55
}

‎tests/fixtures/parser/ast/docs/template-syntax/19-svelte-options/02-old-requirements.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"test": {
2+
"all": {
33
"svelte": "^4 || ^3"
44
}
55
}

‎tests/fixtures/parser/ast/if-block01-requirements.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"FIXME": "Probably a bug in the current Svelte v5. The position information in the else block is incorrect.",
3+
"all": {
4+
"svelte": "^4 || ^3"
5+
}
6+
}

‎tests/fixtures/parser/ast/this-attr05-input.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<svelte:element class="foo" this={'input'} type="number"/>
2+
<svelte:element class="foo" this={`input`} type="number"/>

0 commit comments

Comments
 (0)