@@ -52,6 +52,15 @@ export function build_component(node, component_name, context) {
52
52
/** @type {ExpressionStatement[] } */
53
53
const binding_initializers = [ ] ;
54
54
55
+ const is_component_dynamic =
56
+ node . type === 'SvelteComponent' || ( node . type === 'Component' && node . metadata . dynamic ) ;
57
+
58
+ // The variable name used for the component inside $.component()
59
+ const intermediate_name =
60
+ node . type === 'Component' && node . metadata . dynamic
61
+ ? context . state . scope . generate ( node . name )
62
+ : '$$component' ;
63
+
55
64
/**
56
65
* If this component has a slot property, it is a named slot within another component. In this case
57
66
* the slot scope applies to the component itself, too, and not just its children.
@@ -199,7 +208,7 @@ export function build_component(node, component_name, context) {
199
208
b . call (
200
209
'$$ownership_validator.binding' ,
201
210
b . literal ( binding . node . name ) ,
202
- b . id ( component_name ) ,
211
+ b . id ( is_component_dynamic ? intermediate_name : component_name ) ,
203
212
b . thunk ( expression )
204
213
)
205
214
)
@@ -414,8 +423,8 @@ export function build_component(node, component_name, context) {
414
423
// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
415
424
// will be handled separately through the `$.component` function, and then the component name will
416
425
// always be referenced through just the identifier here.
417
- node . type === 'SvelteComponent' || ( node . type === 'Component' && node . metadata . dynamic )
418
- ? component_name
426
+ is_component_dynamic
427
+ ? intermediate_name
419
428
: /** @type {Expression } */ ( context . visit ( b . member_id ( component_name ) ) ) ,
420
429
node_id ,
421
430
props_expression
@@ -432,7 +441,7 @@ export function build_component(node, component_name, context) {
432
441
433
442
const statements = [ ...snippet_declarations ] ;
434
443
435
- if ( node . type === 'SvelteComponent' || ( node . type === 'Component' && node . metadata . dynamic ) ) {
444
+ if ( is_component_dynamic ) {
436
445
const prev = fn ;
437
446
438
447
fn = ( node_id ) => {
@@ -441,11 +450,11 @@ export function build_component(node, component_name, context) {
441
450
node_id ,
442
451
b . thunk (
443
452
/** @type {Expression } */ (
444
- context . visit ( node . type === 'Component' ? b . member_id ( node . name ) : node . expression )
453
+ context . visit ( node . type === 'Component' ? b . member_id ( component_name ) : node . expression )
445
454
)
446
455
) ,
447
456
b . arrow (
448
- [ b . id ( '$$anchor' ) , b . id ( component_name ) ] ,
457
+ [ b . id ( '$$anchor' ) , b . id ( intermediate_name ) ] ,
449
458
b . block ( [ ...binding_initializers , b . stmt ( prev ( b . id ( '$$anchor' ) ) ) ] )
450
459
)
451
460
) ;
0 commit comments