@ -7,7 +7,7 @@ import FragmentWrapper from '../Fragment';
import { stringify , escape_html , escape } from '../../../utils/stringify' ; import { stringify , escape_html , escape } from '../../../utils/stringify' ;
import TextWrapper from '../Text' ; import TextWrapper from '../Text' ;
import fix_attribute_casing from './fix_attribute_casing' ; import fix_attribute_casing from './fix_attribute_casing' ;
import deindent from '../../../utils/deindent ; import { b , x } from 'code-red ;
import { namespaces } from '../../../../utils/namespaces' ; import { namespaces } from '../../../../utils/namespaces' ;
import AttributeWrapper from './Attribute' ; import AttributeWrapper from './Attribute' ;
import StyleAttributeWrapper from './StyleAttribute' ; import StyleAttributeWrapper from './StyleAttribute' ;
@ -250,45 +250,45 @@ export default class ElementWrapper extends Wrapper {
block . add_variable ( node ) ;
block . add_variable ( node ) ;
const render_statement = this . get_render_statement ( ) ;
const render_statement = this . get_render_statement ( ) ;
block . builders. create . add_line (
block . chunks. create . push (
` ${ node } = ${ render_statement } ; `
b ` ${ node } = ${ render_statement } ; `
) ;
) ;
if ( renderer . options . hydratable ) {
if ( renderer . options . hydratable ) {
if ( parent_nodes ) {
if ( parent_nodes ) {
block . builders. claim . add_block ( deindent `
block . chunks. claim . push ( b `
$ { node } = $ { this . get_claim_statement ( parent_nodes ) } ;
$ { node } = $ { this . get_claim_statement ( parent_nodes ) } ;
var $ { nodes } = @children ( $ { this . node . name === 'template' ? ` ${ node } .content ` : node } ) ;
var $ { nodes } = @children ( $ { this . node . name === 'template' ? ` ${ node } .content ` : node } ) ;
` );
` );
} else {
} else {
block . builders. claim . add_line (
block . chunks. claim . push (
` ${ node } = ${ render_statement } ; `
b ` ${ node } = ${ render_statement } ; `
) ;
) ;
}
}
}
}
if ( parent_node ) {
if ( parent_node ) {
block . builders. mount . add_line (
block . chunks. mount . push (
` @append( ${ parent_node } , ${ node } ); `
b ` @append( ${ parent_node } , ${ node } ); `
) ;
) ;
if ( parent_node === '@_document.head' ) {
if ( parent_node === '@_document.head' ) {
block . builders. destroy . add_line ( ` @detach( ${ node } ); ` ) ;
block . chunks. destroy . push ( b ` @detach( ${ node } ); ` ) ;
}
}
} else {
} else {
block . builders. mount . add_line ( ` @insert(#target, ${ node } , anchor); ` ) ;
block . chunks. mount . push ( b ` @insert(#target, ${ node } , anchor); ` ) ;
// TODO we eventually need to consider what happens to elements
// TODO we eventually need to consider what happens to elements
// that belong to the same outgroup as an outroing element...
// that belong to the same outgroup as an outroing element...
block . builders. destroy . add_conditional ( 'detaching' , ` @detach(${ node } ); ` ) ;
block . chunks. destroy . push ( b ` if (detaching) @detach(${ node } ); ` ) ;
}
}
// insert static children with textContent or innerHTML
// insert static children with textContent or innerHTML
if ( ! this . node . namespace && this . can_use_innerhtml && this . fragment . nodes . length > 0 ) {
if ( ! this . node . namespace && this . can_use_innerhtml && this . fragment . nodes . length > 0 ) {
if ( this . fragment . nodes . length === 1 && this . fragment . nodes [ 0 ] . node . type === 'Text' ) {
if ( this . fragment . nodes . length === 1 && this . fragment . nodes [ 0 ] . node . type === 'Text' ) {
block . builders. create . add_line (
block . chunks. create . push (
// @ts-ignore todo: should it be this.fragment.nodes[0].node.data instead?
// @ts-ignore todo: should it be this.fragment.nodes[0].node.data instead?
` ${ node } .textContent = ${ stringify ( this . fragment . nodes [ 0 ] . data ) } ; `
b ` ${ node } .textContent = ${ stringify ( this . fragment . nodes [ 0 ] . data ) } ; `
) ;
) ;
} else {
} else {
const inner_html = escape (
const inner_html = escape (
@ -297,8 +297,8 @@ export default class ElementWrapper extends Wrapper {
. join ( '' )
. join ( '' )
) ;
) ;
block . builders. create . add_line (
block . chunks. create . push (
` ${ node } .innerHTML = \` ${ inner_html } \` ; `
b ` ${ node } .innerHTML = \` ${ inner_html } \` ; `
) ;
) ;
}
}
} else {
} else {
@ -330,8 +330,8 @@ export default class ElementWrapper extends Wrapper {
this . add_classes ( block ) ;
this . add_classes ( block ) ;
if ( nodes && this . renderer . options . hydratable ) {
if ( nodes && this . renderer . options . hydratable ) {
block . builders. claim . add_line (
block . chunks. claim . push (
` ${ nodes } .forEach(@detach); `
b ` ${ nodes } .forEach(@detach); `
) ;
) ;
}
}
@ -367,8 +367,8 @@ export default class ElementWrapper extends Wrapper {
if ( renderer . options . dev ) {
if ( renderer . options . dev ) {
const loc = renderer . locate ( this . node . start ) ;
const loc = renderer . locate ( this . node . start ) ;
block . builders. hydrate . add_line (
block . chunks. hydrate . push (
` @add_location( ${ this . var } , ${ renderer . file_var } , ${ loc . line } , ${ loc . column } , ${ this . node . start } ); `
b ` @add_location( ${ this . var } , ${ renderer . file_var } , ${ loc . line } , ${ loc . column } , ${ this . node . start } ); `
) ;
) ;
}
}
}
}
@ -470,7 +470,7 @@ export default class ElementWrapper extends Wrapper {
if ( has_local_function ) {
if ( has_local_function ) {
// need to create a block-local function that calls an instance-level function
// need to create a block-local function that calls an instance-level function
if ( animation_frame ) {
if ( animation_frame ) {
block . builders. init . add_block ( deindent `
block . chunks. init . push ( b `
function $ { handler } ( ) {
function $ { handler } ( ) {
@_cancelAnimationFrame ( $ { animation_frame } ) ;
@_cancelAnimationFrame ( $ { animation_frame } ) ;
if ( ! $ { this . var } . paused ) {
if ( ! $ { this . var } . paused ) {
@ -481,7 +481,7 @@ export default class ElementWrapper extends Wrapper {
}
}
` );
` );
} else {
} else {
block . builders. init . add_block ( deindent `
block . chunks. init . push ( b `
function $ { handler } ( ) {
function $ { handler } ( ) {
$ { needs_lock && ` ${ lock } = true; ` }
$ { needs_lock && ` ${ lock } = true; ` }
ctx . $ { handler } . call ( $ { this . var } $ { contextual_dependencies . size > 0 ? ', ctx' : '' } ) ;
ctx . $ { handler } . call ( $ { this . var } $ { contextual_dependencies . size > 0 ? ', ctx' : '' } ) ;
@ -494,7 +494,7 @@ export default class ElementWrapper extends Wrapper {
callee = ` ctx. ${ handler } ` ;
callee = ` ctx. ${ handler } ` ;
}
}
this . renderer . component . partly_hoisted . push ( deindent `
this . renderer . component . partly_hoisted . push ( b `
function $ { handler } ( $ { contextual_dependencies . size > 0 ? ` { ${ Array . from ( contextual_dependencies ) . join ( ', ' ) } } ` : ` ` } ) {
function $ { handler } ( $ { contextual_dependencies . size > 0 ? ` { ${ Array . from ( contextual_dependencies ) . join ( ', ' ) } } ` : ` ` } ) {
$ { group . bindings . map ( b = > b . handler . mutation ) }
$ { group . bindings . map ( b = > b . handler . mutation ) }
$ { Array . from ( dependencies ) . filter ( dep = > dep [ 0 ] !== '$' ) . map ( dep = > ` ${ this . renderer . component . invalidate ( dep ) } ; ` ) }
$ { Array . from ( dependencies ) . filter ( dep = > dep [ 0 ] !== '$' ) . map ( dep = > ` ${ this . renderer . component . invalidate ( dep ) } ; ` ) }
@ -507,12 +507,12 @@ export default class ElementWrapper extends Wrapper {
const resize_listener = block . get_unique_name ( ` ${ this . var } _resize_listener ` ) ;
const resize_listener = block . get_unique_name ( ` ${ this . var } _resize_listener ` ) ;
block . add_variable ( resize_listener ) ;
block . add_variable ( resize_listener ) ;
block . builders. mount . add_line (
block . chunks. mount . push (
` ${ resize_listener } = @add_resize_listener( ${ this . var } , ${ callee } .bind( ${ this . var } )); `
b ` ${ resize_listener } = @add_resize_listener( ${ this . var } , ${ callee } .bind( ${ this . var } )); `
) ;
) ;
block . builders. destroy . add_line (
block . chunks. destroy . push (
` ${ resize_listener } .cancel(); `
b ` ${ resize_listener } .cancel(); `
) ;
) ;
} else {
} else {
block . event_listeners . push (
block . event_listeners . push (
@ -539,27 +539,27 @@ export default class ElementWrapper extends Wrapper {
if ( should_initialise ) {
if ( should_initialise ) {
const callback = has_local_function ? handler : ` () => ${ callee } .call( ${ this . var } ) ` ;
const callback = has_local_function ? handler : ` () => ${ callee } .call( ${ this . var } ) ` ;
block . builders. hydrate . add_line (
block . chunks. hydrate . push (
` if ( ${ some_initial_state_is_undefined } ) @add_render_callback( ${ callback } ); `
b ` if ( ${ some_initial_state_is_undefined } ) @add_render_callback( ${ callback } ); `
) ;
) ;
}
}
if ( group . events [ 0 ] === 'resize' ) {
if ( group . events [ 0 ] === 'resize' ) {
block . builders. hydrate . add_line (
block . chunks. hydrate . push (
` @add_render_callback(() => ${ callee } .call( ${ this . var } )); `
b ` @add_render_callback(() => ${ callee } .call( ${ this . var } )); `
) ;
) ;
}
}
} ) ;
} ) ;
if ( lock ) {
if ( lock ) {
block . builders. update . add_line ( ` ${ lock } = false; ` ) ;
block . chunks. update . push ( b ` ${ lock } = false; ` ) ;
}
}
const this_binding = this . bindings . find ( b = > b . node . name === 'this' ) ;
const this_binding = this . bindings . find ( b = > b . node . name === 'this' ) ;
if ( this_binding ) {
if ( this_binding ) {
const binding_callback = bind_this ( renderer . component , block , this_binding . node , this . var ) ;
const binding_callback = bind_this ( renderer . component , block , this_binding . node , this . var ) ;
block . builders. mount . add_line ( binding_callback ) ;
block . chunks. mount . push ( binding_callback ) ;
}
}
}
}
@ -611,7 +611,7 @@ export default class ElementWrapper extends Wrapper {
}
}
} ) ;
} ) ;
block . builders. init . add_block ( deindent `
block . chunks. init . push ( b `
var $ { levels } = [
var $ { levels } = [
$ { initial_props . join ( ',\n' ) }
$ { initial_props . join ( ',\n' ) }
] ;
] ;
@ -622,14 +622,14 @@ export default class ElementWrapper extends Wrapper {
}
}
` );
` );
const fn = this . node . namespace === namespaces . svg ? ` ` : ` ` ;
const fn = this . node . namespace === namespaces . svg ? x ` @ set_svg_attributes` : x ` @ set_attributes` ;
block . builders. hydrate . add_line (
block . chunks. hydrate . push (
` @ ${ fn } ( ${ this . var } , ${ data } ); `
b ` ${ fn } ( ${ this . var } , ${ data } ); `
) ;
) ;
block . builders. update . add_block ( deindent `
block . chunks. update . push ( b `
@ $ { fn } ( $ { this . var } , @get_spread_update ( $ { levels } , [
$ { fn } ( $ { this . var } , @get_spread_update ( $ { levels } , [
$ { updates . join ( ',\n' ) }
$ { updates . join ( ',\n' ) }
] ) ) ;
] ) ) ;
` );
` );
@ -658,36 +658,36 @@ export default class ElementWrapper extends Wrapper {
const fn = component . qualify ( intro . name ) ;
const fn = component . qualify ( intro . name ) ;
const intro_block = deindent `
const intro_block = b `
@add_render_callback ( ( ) = > {
@add_render_callback ( ( ) = > {
if ( ! $ { name } ) $ { name } = @create_bidirectional_transition ( $ { this . var } , $ { fn } , $ { snippet } , true ) ;
if ( ! $ { name } ) $ { name } = @create_bidirectional_transition ( $ { this . var } , $ { fn } , $ { snippet } , true ) ;
$ { name } . run ( 1 ) ;
$ { name } . run ( 1 ) ;
} ) ;
} ) ;
` ;
` ;
const outro_block = deindent `
const outro_block = b `
if ( ! $ { name } ) $ { name } = @create_bidirectional_transition ( $ { this . var } , $ { fn } , $ { snippet } , false ) ;
if ( ! $ { name } ) $ { name } = @create_bidirectional_transition ( $ { this . var } , $ { fn } , $ { snippet } , false ) ;
$ { name } . run ( 0 ) ;
$ { name } . run ( 0 ) ;
` ;
` ;
if ( intro . is_local ) {
if ( intro . is_local ) {
block . builders. intro . add_block ( deindent `
block . chunks. intro . push ( b `
if ( # local ) {
if ( # local ) {
$ { intro_block }
$ { intro_block }
}
}
` );
` );
block . builders. outro . add_block ( deindent `
block . chunks. outro . push ( b `
if ( # local ) {
if ( # local ) {
$ { outro_block }
$ { outro_block }
}
}
` );
` );
} else {
} else {
block . builders. intro . add_block ( intro_block ) ;
block . chunks. intro . push ( intro_block ) ;
block . builders. outro . add_block ( outro_block ) ;
block . chunks. outro . push ( outro_block ) ;
}
}
block . builders. destroy . add_conditional ( 'detaching' , ` if ( ${ name } ) ${ name } .end(); ` ) ;
block . chunks. destroy . push ( b ` if (detaching && ${ name } ) ${ name } .end(); ` ) ;
}
}
else {
else {
@ -705,7 +705,7 @@ export default class ElementWrapper extends Wrapper {
let intro_block ;
let intro_block ;
if ( outro ) {
if ( outro ) {
intro_block = deindent `
intro_block = b `
@add_render_callback ( ( ) = > {
@add_render_callback ( ( ) = > {
if ( $ { outro_name } ) $ { outro_name } . end ( 1 ) ;
if ( $ { outro_name } ) $ { outro_name } . end ( 1 ) ;
if ( ! $ { intro_name } ) $ { intro_name } = @create_in_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
if ( ! $ { intro_name } ) $ { intro_name } = @create_in_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
@ -713,9 +713,9 @@ export default class ElementWrapper extends Wrapper {
} ) ;
} ) ;
` ;
` ;
block . builders. outro . add_line ( ` if ( ${ intro_name } ) ${ intro_name } .invalidate(); ` ) ;
block . chunks. outro . push ( b ` if ( ${ intro_name } ) ${ intro_name } .invalidate(); ` ) ;
} else {
} else {
intro_block = deindent `
intro_block = b `
if ( ! $ { intro_name } ) {
if ( ! $ { intro_name } ) {
@add_render_callback ( ( ) = > {
@add_render_callback ( ( ) = > {
$ { intro_name } = @create_in_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
$ { intro_name } = @create_in_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
@ -726,14 +726,14 @@ export default class ElementWrapper extends Wrapper {
}
}
if ( intro . is_local ) {
if ( intro . is_local ) {
intro_block = deindent `
intro_block = b `
if ( # local ) {
if ( # local ) {
$ { intro_block }
$ { intro_block }
}
}
` ;
` ;
}
}
block . builders. intro . add_block ( intro_block ) ;
block . chunks. intro . push ( intro_block ) ;
}
}
if ( outro ) {
if ( outro ) {
@ -745,28 +745,28 @@ export default class ElementWrapper extends Wrapper {
const fn = component . qualify ( outro . name ) ;
const fn = component . qualify ( outro . name ) ;
if ( ! intro ) {
if ( ! intro ) {
block . builders. intro . add_block ( deindent `
block . chunks. intro . push ( b `
if ( $ { outro_name } ) $ { outro_name } . end ( 1 ) ;
if ( $ { outro_name } ) $ { outro_name } . end ( 1 ) ;
` );
` );
}
}
// TODO hide elements that have outro'd (unless they belong to a still-outroing
// TODO hide elements that have outro'd (unless they belong to a still-outroing
// group) prior to their removal from the DOM
// group) prior to their removal from the DOM
let outro_block = deindent `
let outro_block = b `
$ { outro_name } = @create_out_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
$ { outro_name } = @create_out_transition ( $ { this . var } , $ { fn } , $ { snippet } ) ;
` ;
` ;
if ( outro . is_local ) {
if ( outro . is_local ) {
outro_block = deindent `
outro_block = b `
if ( # local ) {
if ( # local ) {
$ { outro_block }
$ { outro_block }
}
}
` ;
` ;
}
}
block . builders. outro . add_block ( outro_block ) ;
block . chunks. outro . push ( outro_block ) ;
block . builders. destroy . add_conditional ( 'detaching' , ` if ( ${ outro_name } ) ${ outro_name } .end(); ` ) ;
block . chunks. destroy . push ( b ` if (detaching && ${ outro_name } ) ${ outro_name } .end(); ` ) ;
}
}
}
}
}
}
@ -783,11 +783,11 @@ export default class ElementWrapper extends Wrapper {
block . add_variable ( rect ) ;
block . add_variable ( rect ) ;
block . add_variable ( stop_animation , '@noop' ) ;
block . add_variable ( stop_animation , '@noop' ) ;
block . builders. measure . add_block ( deindent `
block . chunks. measure . push ( b `
$ { rect } = $ { this . var } . getBoundingClientRect ( ) ;
$ { rect } = $ { this . var } . getBoundingClientRect ( ) ;
` );
` );
block . builders. fix . add_block ( deindent `
block . chunks. fix . push ( b `
@fix_position ( $ { this . var } ) ;
@fix_position ( $ { this . var } ) ;
$ { stop_animation } ( ) ;
$ { stop_animation } ( ) ;
$ { outro && ` @add_transform( ${ this . var } , ${ rect } ); ` }
$ { outro && ` @add_transform( ${ this . var } , ${ rect } ); ` }
@ -797,7 +797,7 @@ export default class ElementWrapper extends Wrapper {
const name = component . qualify ( this . node . animation . name ) ;
const name = component . qualify ( this . node . animation . name ) ;
block . builders. animate . add_block ( deindent `
block . chunks. animate . push ( b `
$ { stop_animation } ( ) ;
$ { stop_animation } ( ) ;
$ { stop_animation } = @create_animation ( $ { this . var } , $ { rect } , $ { name } , $ { params } ) ;
$ { stop_animation } = @create_animation ( $ { this . var } , $ { rect } , $ { name } , $ { params } ) ;
` );
` );
@ -819,19 +819,16 @@ export default class ElementWrapper extends Wrapper {
snippet = ` ${ quote_prop_if_necessary ( name ) } ` ;
snippet = ` ${ quote_prop_if_necessary ( name ) } ` ;
dependencies = new Set ( [ name ] ) ;
dependencies = new Set ( [ name ] ) ;
}
}
const updater = ` @toggle_class( ${ this . var } , " ${ name } ", ${ snippet } ); ` ;
const updater = b ` @toggle_class( ${ this . var } , " ${ name } ", ${ snippet } ); ` ;
block . builders. hydrate . add_line ( updater ) ;
block . chunks. hydrate . push ( updater ) ;
if ( ( dependencies && dependencies . size > 0 ) || this . class_dependencies . length ) {
if ( ( dependencies && dependencies . size > 0 ) || this . class_dependencies . length ) {
const all_dependencies = this . class_dependencies . concat ( . . . dependencies ) ;
const all_dependencies = this . class_dependencies . concat ( . . . dependencies ) ;
const deps = all_dependencies . map ( dependency = > ` changed ${ quote_prop_if_necessary ( dependency ) } ` ) . join ( ' || ' ) ;
const deps = all_dependencies . map ( dependency = > ` changed ${ quote_prop_if_necessary ( dependency ) } ` ) . join ( ' || ' ) ;
const condition = all_dependencies . length > 1 ? ` ( ${ deps } ) ` : deps ;
const condition = all_dependencies . length > 1 ? ` ( ${ deps } ) ` : deps ;
block . builders . update . add_conditional (
block . chunks . update . push ( b ` if ( ${ condition } ) ${ updater } ` ) ;
condition ,
updater
) ;
}
}
} ) ;
} ) ;
}
}
Richard Harris
6 years ago