@ -839,26 +839,37 @@ function serialize_inline_component(node, component_name, context) {
}
}
}
}
children [ slot _name ] = children [ slot _name ] || [ ] ;
( children [ slot _name ] || = [ ] ) . push ( child ) ;
children [ slot _name ] . push ( child ) ;
}
}
// Serialize each slot
// Serialize each slot
/** @type {import('estree').Property[]} */
/** @type {import('estree').Property[]} */
const serialized _slots = [ ] ;
const serialized _slots = [ ] ;
for ( const slot _name of Object . keys ( children ) ) {
for ( const slot _name of Object . keys ( children ) ) {
const body = create _block (
const block = /** @type {import('estree').BlockStatement} */ (
node ,
context . visit (
node . fragment ,
{
` ${ node . name } _ ${ slot _name } ` ,
... node . fragment ,
children [ slot _name ] ,
// @ts-expect-error
context
nodes : children [ slot _name ]
} ,
{
... context . state ,
scope :
context . state . scopes . get ( slot _name === 'default' ? children [ slot _name ] [ 0 ] : node ) ? ?
context . state . scope
}
)
) ;
) ;
if ( body . length === 0 ) continue ;
if ( block . body . length === 0 ) continue ;
const slot _fn = b . arrow (
const slot _fn = b . arrow (
[ b . id ( '$$anchor' ) , b . id ( '$$slotProps' ) ] ,
[ b . id ( '$$anchor' ) , b . id ( '$$slotProps' ) ] ,
b . block ( [ ... ( slot _name === 'default' && ! slot _scope _applies _to _itself ? lets : [ ] ) , ... body ] )
b . block ( [
... ( slot _name === 'default' && ! slot _scope _applies _to _itself ? lets : [ ] ) ,
... block . body
] )
) ;
) ;
if ( slot _name === 'default' && ! has _children _prop ) {
if ( slot _name === 'default' && ! has _children _prop ) {
@ -905,6 +916,27 @@ function serialize_inline_component(node, component_name, context) {
) ;
) ;
}
}
if ( node . type === 'SvelteComponent' ) {
const prev = fn ;
fn = ( node _id ) => {
let component = b . call (
'$.component' ,
b . thunk ( /** @type {import('estree').Expression} */ ( context . visit ( node . expression ) ) ) ,
b . arrow (
[ b . id ( component _name ) ] ,
b . block ( [
b . stmt (
context . state . options . dev
? b . call ( '$.validate_dynamic_component' , b . thunk ( prev ( node _id ) ) )
: prev ( node _id )
)
] )
)
) ;
return component ;
} ;
}
if ( Object . keys ( custom _css _props ) . length > 0 ) {
if ( Object . keys ( custom _css _props ) . length > 0 ) {
const prev = fn ;
const prev = fn ;
fn = ( node _id ) =>
fn = ( node _id ) =>
@ -1016,189 +1048,6 @@ function serialize_locations(locations) {
) ;
) ;
} }
/ * *
* Creates a new block which looks roughly like this :
* ` ` ` js
* // hoisted:
* const block _name = $ . template ( ` ... ` ) ;
*
* // for the main block:
* const id = block _name ( ) ;
* // init stuff and possibly render effect
* $ . append ( $$anchor , id ) ;
* ` ` `
* Adds the hoisted parts to ` context.state.hoisted ` and returns the statements of the main block .
* @ param { import ( '#compiler' ) . SvelteNode } parent
* @ param { import ( '#compiler' ) . Fragment } fragment
* @ param { string } name
* @ param { import ( '#compiler' ) . SvelteNode [ ] } nodes
* @ param { import ( '../types.js' ) . ComponentContext } context
* @ returns { import ( 'estree' ) . Statement [ ] }
* /
function create _block ( parent , fragment , name , nodes , context ) {
const namespace = infer _namespace ( context . state . metadata . namespace , parent , nodes ) ;
const { hoisted , trimmed } = clean _nodes (
parent ,
nodes ,
context . path ,
namespace ,
context . state . preserve _whitespace ,
context . state . options . preserveComments
) ;
if ( hoisted . length === 0 && trimmed . length === 0 ) {
return [ ] ;
}
const is _single _element = trimmed . length === 1 && trimmed [ 0 ] . type === 'RegularElement' ;
const is _single _child _not _needing _template =
trimmed . length === 1 &&
( trimmed [ 0 ] . type === 'SvelteFragment' || trimmed [ 0 ] . type === 'TitleElement' ) ;
const template _name = context . state . scope . root . unique ( name ) ;
/** @type {import('estree').Statement[]} */
const body = [ ] ;
/** @type {import('estree').Statement | undefined} */
let close = undefined ;
/** @type {import('../types').ComponentClientTransformState} */
const state = {
... context . state ,
scope : context . state . scopes . get ( fragment ) ? ? context . state . scope ,
before _init : [ ] ,
init : [ ] ,
update : [ ] ,
after _update : [ ] ,
template : [ ] ,
locations : [ ] ,
metadata : {
context : {
template _needs _import _node : false ,
template _contains _script _tag : false
} ,
namespace ,
bound _contenteditable : context . state . metadata . bound _contenteditable
}
} ;
for ( const node of hoisted ) {
context . visit ( node , state ) ;
}
/ * *
* @ param { import ( 'estree' ) . Identifier } template _name
* @ param { import ( 'estree' ) . Expression [ ] } args
* /
const add _template = ( template _name , args ) => {
let call = b . call ( get _template _function ( namespace , state ) , ... args ) ;
if ( context . state . options . dev ) {
call = b . call (
'$.add_locations' ,
call ,
b . member ( b . id ( context . state . analysis . name ) , b . id ( 'filename' ) ) ,
serialize _locations ( state . locations )
) ;
}
context . state . hoisted . push ( b . var ( template _name , call ) ) ;
} ;
if ( is _single _element ) {
const element = /** @type {import('#compiler').RegularElement} */ ( trimmed [ 0 ] ) ;
const id = b . id ( context . state . scope . generate ( element . name ) ) ;
context . visit ( element , {
... state ,
node : id
} ) ;
/** @type {import('estree').Expression[]} */
const args = [ b . template ( [ b . quasi ( state . template . join ( '' ) , true ) ] , [ ] ) ] ;
if ( state . metadata . context . template _needs _import _node ) {
args . push ( b . literal ( TEMPLATE _USE _IMPORT _NODE ) ) ;
}
add _template ( template _name , args ) ;
body . push ( b . var ( id , b . call ( template _name ) ) , ... state . before _init , ... state . init ) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
} else if ( is _single _child _not _needing _template ) {
context . visit ( trimmed [ 0 ] , state ) ;
body . push ( ... state . before _init , ... state . init ) ;
} else if ( trimmed . length > 0 ) {
const id = b . id ( context . state . scope . generate ( 'fragment' ) ) ;
const use _space _template =
trimmed . some ( ( node ) => node . type === 'ExpressionTag' ) &&
trimmed . every ( ( node ) => node . type === 'Text' || node . type === 'ExpressionTag' ) ;
if ( use _space _template ) {
// special case — we can use `$.text` instead of creating a unique template
const id = b . id ( context . state . scope . generate ( 'text' ) ) ;
process _children ( trimmed , ( ) => id , false , {
... context ,
state
} ) ;
body . push ( b . var ( id , b . call ( '$.text' , b . id ( '$$anchor' ) ) ) , ... state . before _init , ... state . init ) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
} else {
/** @type {(is_text: boolean) => import('estree').Expression} */
const expression = ( is _text ) =>
is _text ? b . call ( '$.first_child' , id , b . true ) : b . call ( '$.first_child' , id ) ;
process _children ( trimmed , expression , false , { ... context , state } ) ;
const use _comment _template = state . template . length === 1 && state . template [ 0 ] === '<!>' ;
if ( use _comment _template ) {
// special case — we can use `$.comment` instead of creating a unique template
body . push ( b . var ( id , b . call ( '$.comment' ) ) ) ;
} else {
let flags = TEMPLATE _FRAGMENT ;
if ( state . metadata . context . template _needs _import _node ) {
flags |= TEMPLATE _USE _IMPORT _NODE ;
}
add _template ( template _name , [
b . template ( [ b . quasi ( state . template . join ( '' ) , true ) ] , [ ] ) ,
b . literal ( flags )
] ) ;
body . push ( b . var ( id , b . call ( template _name ) ) ) ;
}
body . push ( ... state . before _init , ... state . init ) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
}
} else {
body . push ( ... state . before _init , ... state . init ) ;
}
if ( state . update . length > 0 ) {
body . push ( serialize _render _stmt ( state ) ) ;
}
body . push ( ... state . after _update ) ;
if ( close !== undefined ) {
// It's important that close is the last statement in the block, as any previous statements
// could contain element insertions into the template, which the close statement needs to
// know of when constructing the list of current inner elements.
body . push ( close ) ;
}
return body ;
}
/ * * / * *
*
*
* @ param { import ( '#compiler' ) . Namespace } namespace
* @ param { import ( '#compiler' ) . Namespace } namespace
@ -1688,7 +1537,184 @@ function serialize_template_literal(values, visit, state) {
/** @type {import('../types').ComponentVisitors} */ /** @type {import('../types').ComponentVisitors} */
export const template _visitors = { export const template _visitors = {
Fragment ( node , context ) {
Fragment ( node , context ) {
const body = create _block ( context . path . at ( - 1 ) ? ? node , node , 'root' , node . nodes , context ) ;
// Creates a new block which looks roughly like this:
// ```js
// // hoisted:
// const block_name = $.template(`...`);
//
// // for the main block:
// const id = block_name();
// // init stuff and possibly render effect
// $.append($$anchor, id);
// ```
// Adds the hoisted parts to `context.state.hoisted` and returns the statements of the main block.
const parent = context . path . at ( - 1 ) ? ? node ;
const namespace = infer _namespace ( context . state . metadata . namespace , parent , node . nodes ) ;
const { hoisted , trimmed } = clean _nodes (
parent ,
node . nodes ,
context . path ,
namespace ,
context . state ,
context . state . preserve _whitespace ,
context . state . options . preserveComments
) ;
if ( hoisted . length === 0 && trimmed . length === 0 ) {
return b . block ( [ ] ) ;
}
const is _single _element = trimmed . length === 1 && trimmed [ 0 ] . type === 'RegularElement' ;
const is _single _child _not _needing _template =
trimmed . length === 1 &&
( trimmed [ 0 ] . type === 'SvelteFragment' || trimmed [ 0 ] . type === 'TitleElement' ) ;
const template _name = context . state . scope . root . unique ( 'root' ) ; // TODO infer name from parent
/** @type {import('estree').Statement[]} */
const body = [ ] ;
/** @type {import('estree').Statement | undefined} */
let close = undefined ;
/** @type {import('../types').ComponentClientTransformState} */
const state = {
... context . state ,
before _init : [ ] ,
init : [ ] ,
update : [ ] ,
after _update : [ ] ,
template : [ ] ,
locations : [ ] ,
metadata : {
context : {
template _needs _import _node : false ,
template _contains _script _tag : false
} ,
namespace ,
bound _contenteditable : context . state . metadata . bound _contenteditable
}
} ;
for ( const node of hoisted ) {
context . visit ( node , state ) ;
}
/ * *
* @ param { import ( 'estree' ) . Identifier } template _name
* @ param { import ( 'estree' ) . Expression [ ] } args
* /
const add _template = ( template _name , args ) => {
let call = b . call ( get _template _function ( namespace , state ) , ... args ) ;
if ( context . state . options . dev ) {
call = b . call (
'$.add_locations' ,
call ,
b . member ( b . id ( context . state . analysis . name ) , b . id ( 'filename' ) ) ,
serialize _locations ( state . locations )
) ;
}
context . state . hoisted . push ( b . var ( template _name , call ) ) ;
} ;
if ( is _single _element ) {
const element = /** @type {import('#compiler').RegularElement} */ ( trimmed [ 0 ] ) ;
const id = b . id ( context . state . scope . generate ( element . name ) ) ;
context . visit ( element , {
... state ,
node : id
} ) ;
/** @type {import('estree').Expression[]} */
const args = [ b . template ( [ b . quasi ( state . template . join ( '' ) , true ) ] , [ ] ) ] ;
if ( state . metadata . context . template _needs _import _node ) {
args . push ( b . literal ( TEMPLATE _USE _IMPORT _NODE ) ) ;
}
add _template ( template _name , args ) ;
body . push ( b . var ( id , b . call ( template _name ) ) , ... state . before _init , ... state . init ) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
} else if ( is _single _child _not _needing _template ) {
context . visit ( trimmed [ 0 ] , state ) ;
body . push ( ... state . before _init , ... state . init ) ;
} else if ( trimmed . length > 0 ) {
const id = b . id ( context . state . scope . generate ( 'fragment' ) ) ;
const use _space _template =
trimmed . some ( ( node ) => node . type === 'ExpressionTag' ) &&
trimmed . every ( ( node ) => node . type === 'Text' || node . type === 'ExpressionTag' ) ;
if ( use _space _template ) {
// special case — we can use `$.text` instead of creating a unique template
const id = b . id ( context . state . scope . generate ( 'text' ) ) ;
process _children ( trimmed , ( ) => id , false , {
... context ,
state
} ) ;
body . push (
b . var ( id , b . call ( '$.text' , b . id ( '$$anchor' ) ) ) ,
... state . before _init ,
... state . init
) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
} else {
/** @type {(is_text: boolean) => import('estree').Expression} */
const expression = ( is _text ) =>
is _text ? b . call ( '$.first_child' , id , b . true ) : b . call ( '$.first_child' , id ) ;
process _children ( trimmed , expression , false , { ... context , state } ) ;
const use _comment _template = state . template . length === 1 && state . template [ 0 ] === '<!>' ;
if ( use _comment _template ) {
// special case — we can use `$.comment` instead of creating a unique template
body . push ( b . var ( id , b . call ( '$.comment' ) ) ) ;
} else {
let flags = TEMPLATE _FRAGMENT ;
if ( state . metadata . context . template _needs _import _node ) {
flags |= TEMPLATE _USE _IMPORT _NODE ;
}
add _template ( template _name , [
b . template ( [ b . quasi ( state . template . join ( '' ) , true ) ] , [ ] ) ,
b . literal ( flags )
] ) ;
body . push ( b . var ( id , b . call ( template _name ) ) ) ;
}
body . push ( ... state . before _init , ... state . init ) ;
close = b . stmt ( b . call ( '$.append' , b . id ( '$$anchor' ) , id ) ) ;
}
} else {
body . push ( ... state . before _init , ... state . init ) ;
}
if ( state . update . length > 0 ) {
body . push ( serialize _render _stmt ( state ) ) ;
}
body . push ( ... state . after _update ) ;
if ( close !== undefined ) {
// It's important that close is the last statement in the block, as any previous statements
// could contain element insertions into the template, which the close statement needs to
// know of when constructing the list of current inner elements.
body . push ( close ) ;
}
return b . block ( body ) ;
return b . block ( body ) ;
} ,
} ,
Comment ( node , context ) {
Comment ( node , context ) {
@ -2116,6 +2142,7 @@ export const template_visitors = {
node . fragment . nodes ,
node . fragment . nodes ,
context . path ,
context . path ,
child _metadata . namespace ,
child _metadata . namespace ,
state ,
node . name === 'script' || state . preserve _whitespace ,
node . name === 'script' || state . preserve _whitespace ,
state . options . preserveComments
state . options . preserveComments
) ;
) ;
@ -2229,16 +2256,15 @@ export const template_visitors = {
}
}
inner . push ( ... inner _context . state . after _update ) ;
inner . push ( ... inner _context . state . after _update ) ;
inner . push (
inner . push (
... create _block ( node , node . fragment , 'dynamic_element' , node . fragment . nodes , {
... /** @type {import('estree').BlockStatement} */ (
... context ,
context . visit ( node . fragment , {
state : {
... context . state ,
... context . state ,
metadata : {
metadata : {
... context . state . metadata ,
... context . state . metadata ,
namespace : determine _namespace _for _children ( node , context . state . metadata . namespace )
namespace : determine _namespace _for _children ( node , context . state . metadata . namespace )
}
}
}
} )
} )
) . body
) ;
) ;
const location = context . state . options . dev && locator ( node . start ) ;
const location = context . state . options . dev && locator ( node . start ) ;
@ -2456,8 +2482,7 @@ export const template_visitors = {
}
}
}
}
// TODO should use context.visit?
const block = /** @type {import('estree').BlockStatement} */ ( context . visit ( node . body ) ) ;
const children = create _block ( node , node . body , 'each_block' , node . body . nodes , context ) ;
const key _function = node . key
const key _function = node . key
? b . arrow (
? b . arrow (
@ -2490,7 +2515,7 @@ export const template_visitors = {
b . literal ( each _type ) ,
b . literal ( each _type ) ,
each _node _meta . array _name ? each _node _meta . array _name : b . thunk ( collection ) ,
each _node _meta . array _name ? each _node _meta . array _name : b . thunk ( collection ) ,
key _function ,
key _function ,
b . arrow ( [ b . id ( '$$anchor' ) , item , index ] , b . block ( declarations . concat ( children ) ) )
b . arrow ( [ b . id ( '$$anchor' ) , item , index ] , b . block ( declarations . concat ( block. body ) ) )
] ;
] ;
if ( node . fallback ) {
if ( node . fallback ) {
@ -2743,10 +2768,9 @@ export const template_visitors = {
'$.bind_property' ,
'$.bind_property' ,
b . literal ( node . name ) ,
b . literal ( node . name ) ,
b . literal ( property . event ) ,
b . literal ( property . event ) ,
b . literal ( property . type ? ? 'get' ) ,
state . node ,
state . node ,
g etter,
s etter,
s etter
property. bidirectional && g etter
) ;
) ;
} else {
} else {
// special cases
// special cases
@ -2773,6 +2797,11 @@ export const template_visitors = {
call _expr = b . call ( '$.bind_window_size' , b . literal ( node . name ) , setter ) ;
call _expr = b . call ( '$.bind_window_size' , b . literal ( node . name ) , setter ) ;
break ;
break ;
// document
case 'activeElement' :
call _expr = b . call ( '$.bind_active_element' , setter ) ;
break ;
// media
// media
case 'muted' :
case 'muted' :
call _expr = b . call ( ` $ .bind_muted ` , state . node , getter , setter ) ;
call _expr = b . call ( ` $ .bind_muted ` , state . node , getter , setter ) ;
@ -2930,7 +2959,6 @@ export const template_visitors = {
b . stmt (
b . stmt (
b . call (
b . call (
'$.component' ,
'$.component' ,
context . state . node ,
// TODO use untrack here to not update when binding changes?
// TODO use untrack here to not update when binding changes?
// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
b . thunk (
b . thunk (
@ -2954,19 +2982,8 @@ export const template_visitors = {
context . state . template . push ( '<!>' ) ;
context . state . template . push ( '<!>' ) ;
let component = serialize _inline _component ( node , '$$component' , context ) ;
let component = serialize _inline _component ( node , '$$component' , context ) ;
if ( context . state . options . dev ) {
component = b . stmt ( b . call ( '$.validate_dynamic_component' , b . thunk ( b . block ( [ component ] ) ) ) ) ;
context . state . init . push ( component ) ;
}
context . state . init . push (
b . stmt (
b . call (
'$.component' ,
context . state . node ,
b . thunk ( /** @type {import('estree').Expression} */ ( context . visit ( node . expression ) ) ) ,
b . arrow ( [ b . id ( '$$component' ) ] , b . block ( [ component ] ) )
)
)
) ;
} ,
} ,
Attribute ( node , context ) {
Attribute ( node , context ) {
if ( is _event _attribute ( node ) ) {
if ( is _event _attribute ( node ) ) {
@ -3027,13 +3044,7 @@ export const template_visitors = {
context . state . init . push ( ... lets ) ;
context . state . init . push ( ... lets ) ;
context . state . init . push (
context . state . init . push (
... create _block (
... /** @type {import('estree').BlockStatement} */ ( context . visit ( node . fragment ) ) . body
node ,
node . fragment ,
'slot_template' ,
/** @type {import('#compiler').SvelteNode[]} */ ( node . fragment . nodes ) ,
context
)
) ;
) ;
} ,
} ,
SlotElement ( node , context ) {
SlotElement ( node , context ) {
@ -3083,12 +3094,13 @@ export const template_visitors = {
spreads . length === 0
spreads . length === 0
? b . object ( props )
? b . object ( props )
: b . call ( '$.spread_props' , b . object ( props ) , ... spreads ) ;
: b . call ( '$.spread_props' , b . object ( props ) , ... spreads ) ;
const fallback =
const fallback =
node . fragment . nodes . length === 0
node . fragment . nodes . length === 0
? b . literal ( null )
? b . literal ( null )
: b . arrow (
: b . arrow (
[ b . id ( '$$anchor' ) ] ,
[ b . id ( '$$anchor' ) ] ,
b . block ( create _block ( node , node . fragment , 'fallback' , node . fragment . nodes , contex ) )
/** @type {import('estree').BlockStatement} */ ( context . visit ( node . fragmen ) )
) ;
) ;
const expression = is _default
const expression = is _default
@ -3106,7 +3118,7 @@ export const template_visitors = {
'$.head' ,
'$.head' ,
b . arrow (
b . arrow (
[ b . id ( '$$anchor' ) ] ,
[ b . id ( '$$anchor' ) ] ,
b . block ( create _block ( node , node . fragment , 'head' , node . fragment . nodes , contex ) )
/** @type {import('estree').BlockStatement} */ ( context . visit ( node . fragmen ) )
)
)
)
)
)
)
Rich Harris
2 years ago