@@ -439,66 +439,92 @@ function processThisAttribute(
439
439
( c ) => Boolean ( c . trim ( ) ) ,
440
440
eqIndex + 1 ,
441
441
) ;
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 ] ,
488
465
} ) ;
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
+ // =
496
504
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 ,
499
518
} ) ;
519
+ if ( quote ) {
520
+ // "
521
+ ctx . addToken ( "Punctuator" , {
522
+ start : literalEndIndex ,
523
+ end : endIndex ,
524
+ } ) ;
525
+ }
526
+ thisNode = thisAttr ;
500
527
}
501
- thisNode = thisAttr ;
502
528
} else {
503
529
// this={...}
504
530
const eqIndex = ctx . code . lastIndexOf ( "=" , getWithLoc ( thisValue ) . start ) ;
@@ -509,6 +535,30 @@ function processThisAttribute(
509
535
( c ) => c === ">" || ! c . trim ( ) ,
510
536
closeIndex ,
511
537
) ;
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 {
512
562
const thisDir : SvelteSpecialDirective = {
513
563
type : "SvelteSpecialDirective" ,
514
564
kind : "this" ,
@@ -532,19 +582,11 @@ function processThisAttribute(
532
582
start : eqIndex ,
533
583
end : eqIndex + 1 ,
534
584
} ) ;
535
- ctx . scriptLet . addExpression ( thisValue , thisDir , null , ( es ) => {
585
+ ctx . scriptLet . addExpression ( expression , thisDir , null , ( es ) => {
536
586
thisDir . expression = es ;
537
587
} ) ;
538
- thisNode = thisDir ;
539
- }
540
588
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 ;
548
590
}
549
591
}
550
592
0 commit comments