@ -27,22 +27,17 @@ import {
get ,
get ,
is _signal ,
is _signal ,
push _destroy _fn ,
push _destroy _fn ,
set ,
execute _effect ,
execute _effect ,
UNINITIALIZED ,
UNINITIALIZED ,
derived ,
untrack ,
untrack ,
effect ,
effect ,
flushSync ,
flushSync ,
safe _not _equal ,
safe _not _equal ,
current _block ,
current _block ,
source ,
managed _effect ,
managed _effect ,
push ,
push ,
current _component _context ,
current _component _context ,
pop ,
pop
unwrap ,
mutable _source
} from './runtime.js' ; } from './runtime.js' ;
import { import {
current _hydration _fragment ,
current _hydration _fragment ,
@ -56,12 +51,13 @@ import {
get _descriptor ,
get _descriptor ,
get _descriptors ,
get _descriptors ,
is _array ,
is _array ,
is _function ,
object _assign ,
object _assign ,
object _entries ,
object _keys
object _keys
} from './utils.js' ; } from './utils.js' ;
import { is _promise } from '../common.js' ; import { is _promise } from '../common.js' ;
import { bind _transition , trigger _transitions } from './transitions.js' ; import { bind _transition , trigger _transitions } from './transitions.js' ;
import { proxy } from './proxy/proxy.js' ;
/** @type {Set<string>} */ /** @type {Set<string>} */
const all _registerd _events = new Set ( ) ; const all _registerd _events = new Set ( ) ;
@ -227,7 +223,7 @@ export function close_frag(anchor, dom) {
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function trusted ( fn ) { export function trusted ( fn ) {
@ -235,13 +231,13 @@ export function trusted(fn) {
const event = /** @type {Event} */ ( args [ 0 ] ) ;
const event = /** @type {Event} */ ( args [ 0 ] ) ;
if ( event . isTrusted ) {
if ( event . isTrusted ) {
// @ts-ignore
// @ts-ignore
unwrap( fn) . apply ( this , args ) ;
. apply ( this , args ) ;
}
}
} ;
} ;
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function self ( fn ) { export function self ( fn ) {
@ -250,13 +246,13 @@ export function self(fn) {
// @ts-ignore
// @ts-ignore
if ( event . target === this ) {
if ( event . target === this ) {
// @ts-ignore
// @ts-ignore
unwrap( fn) . apply ( this , args ) ;
. apply ( this , args ) ;
}
}
} ;
} ;
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function stopPropagation ( fn ) { export function stopPropagation ( fn ) {
@ -264,12 +260,12 @@ export function stopPropagation(fn) {
const event = /** @type {Event} */ ( args [ 0 ] ) ;
const event = /** @type {Event} */ ( args [ 0 ] ) ;
event . stopPropagation ( ) ;
event . stopPropagation ( ) ;
// @ts-ignore
// @ts-ignore
return unwrap( fn) . apply ( this , args ) ;
return . apply ( this , args ) ;
} ;
} ;
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function once ( fn ) { export function once ( fn ) {
@ -280,12 +276,12 @@ export function once(fn) {
}
}
ran = true ;
ran = true ;
// @ts-ignore
// @ts-ignore
return unwrap( fn) . apply ( this , args ) ;
return . apply ( this , args ) ;
} ;
} ;
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function stopImmediatePropagation ( fn ) { export function stopImmediatePropagation ( fn ) {
@ -293,12 +289,12 @@ export function stopImmediatePropagation(fn) {
const event = /** @type {Event} */ ( args [ 0 ] ) ;
const event = /** @type {Event} */ ( args [ 0 ] ) ;
event . stopImmediatePropagation ( ) ;
event . stopImmediatePropagation ( ) ;
// @ts-ignore
// @ts-ignore
return unwrap( fn) . apply ( this , args ) ;
return . apply ( this , args ) ;
} ;
} ;
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < ( event : Event , ... args : Array < unknown > ) => void > } fn
* @ param { ( event : Event , ... args : Array < unknown > ) => void } fn
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* @ returns { ( event : Event , ... args : unknown [ ] ) => void }
* /
* /
export function preventDefault ( fn ) { export function preventDefault ( fn ) {
@ -306,7 +302,7 @@ export function preventDefault(fn) {
const event = /** @type {Event} */ ( args [ 0 ] ) ;
const event = /** @type {Event} */ ( args [ 0 ] ) ;
event . preventDefault ( ) ;
event . preventDefault ( ) ;
// @ts-ignore
// @ts-ignore
return unwrap( fn) . apply ( this , args ) ;
return . apply ( this , args ) ;
} ;
} ;
} }
@ -1188,27 +1184,25 @@ export function bind_property(property, event_name, type, dom, get_value, update
}
}
} ) ;
} ) ;
} }
/ * * / * *
* Makes an ` export ` ed ( non - prop ) variable available on the ` $ $ props ` object
* Makes an ` export ` ed ( non - prop ) variable available on the ` $ $ props ` object
* so that consumers can do ` bind:x ` on the component .
* so that consumers can do ` bind:x ` on the component .
* @ template V
* @ template V
* @ param { import ( './types.js' ) . MaybeSignal < Record < string , unknown > >} props
* @ param { Record < string , unknown } props
* @ param { string } prop
* @ param { string } prop
* @ param { V } value
* @ param { V } value
* @ returns { void }
* @ returns { void }
* /
* /
export function bind _prop ( props , prop , value ) { export function bind _prop ( props , prop , value ) {
/** @param {V | null} value */
const desc = get _descriptor ( props , prop ) ;
const update = ( value ) => {
const current _props = unwrap ( props ) ;
if ( desc && desc . set ) {
if ( get _descriptor ( current _props , prop ) ? . set !== undefined ) {
props [ prop ] = value ;
current _props [ prop ] = value ;
render _effect ( ( ) => ( ) => {
}
props [ prop ] = null ;
} ;
} ) ;
update ( value ) ;
}
render _effect ( ( ) => ( ) => {
update ( null ) ;
} ) ;
} }
/ * * / * *
@ -2531,68 +2525,98 @@ export function spread_dynamic_element_attributes(node, prev, attrs, css_hash) {
} }
/ * * / * *
* @ param { import ( './types.js' ) . Signal < Record < string , unknown >> | Record < string , unknown > } props _signal
* The proxy handler for rest props ( i . e . ` const { x, ...rest } = $ props() ` ) .
* @ param { string [ ] } rest
* Is passed the full ` $ $ props ` object and excludes the named props .
* @ returns { Record < string , unknown > }
* @ type { ProxyHandler < { props : Record < string | symbol , unknown > , exclude : Array < string | symbol > } > } }
* /
* /
export function rest _props ( props _signal , rest ) { const rest _props _handler = {
return derived ( ( ) => {
get ( target , key ) {
var props = unwrap ( props _signal ) ;
if ( target . exclude . includes ( key ) ) return ;
return target . props [ key ] ;
/** @type {Record<string, unknown>} */
} ,
var rest _props = { } ;
getOwnPropertyDescriptor ( target , key ) {
if ( target . exclude . includes ( key ) ) return ;
for ( var key in props ) {
if ( key in target . props ) {
if ( rest . includes ( key ) ) continue ;
return {
enumerable : true ,
const { get , value , enumerable } = /** @type {PropertyDescriptor} */ (
configurable : true ,
get _descriptor ( props , key )
value : target . props [ key ]
) ;
} ;
}
} ,
has ( target , key ) {
if ( target . exclude . includes ( key ) ) return false ;
return key in target . props ;
} ,
ownKeys ( target ) {
/** @type {Array<string | symbol>} */
const keys = [ ] ;
define _property ( rest _props , key , get ? { get , enumerable } : { value , enumerable } ) ;
for ( let key in target . props ) {
if ( ! target . exclude . includes ( key ) ) keys . push ( key ) ;
}
}
return rest _props ;
return key s;
} ) ;
}
} } ;
/ * * / * *
* @ param { Record < string , unknown > [ ] | ( ( ) => Record < string , unknown > [ ] ) } props
* @ param { import ( './types.js' ) . Signal < Record < string , unknown >> | Record < string , unknown > } props
* @ returns { any }
* @ param { string [ ] } rest
* @ returns { Record < string , unknown > }
* /
* /
export function spread _props ( props ) { export function rest _props ( props , rest ) {
if ( typeof props === 'function' ) {
return new Proxy ( { props , exclude : rest } , rest _props _handler ) ;
return derived ( ( ) => {
}
return spread _props ( props ( ) ) ;
} ) ;
/ * *
}
* The proxy handler for spread props . Handles the incoming array of props
* that looks like ` () => { dynamic: props }, { static: prop }, .. ` and wraps
/** @type {Record<string, unknown>} */
* them so that the whole thing is passed to the component as the ` $ $ props ` argument .
const merged _props = { } ;
* @ template { Record < string | symbol , unknown > } T
let key ;
* @ type { ProxyHandler < { props : Array < T | ( ( ) => T ) > } > } }
for ( let i = 0 ; i < props . length ; i ++ ) {
* /
const obj = props [ i ] ;
const spread _props _handler = {
for ( key in obj ) {
get ( target , key ) {
const desc = /** @type {PropertyDescriptor} */ ( get _descriptor ( obj , key ) ) ;
let i = target . props . length ;
const getter = desc . get ;
while ( i -- ) {
if ( getter !== undefined ) {
let p = target . props [ i ] ;
define _property ( merged _props , key , {
if ( is _function ( p ) ) p = p ( ) ;
enumerable : true ,
if ( typeof p === 'object' && p !== null && key in p ) return p [ key ] ;
configurable : true ,
}
get : getter
} ,
} ) ;
getOwnPropertyDescriptor ( ) {
} else if ( desc . get !== undefined ) {
return { enumerable : true , configurable : true } ;
merged _props [ key ] = obj [ key ] ;
} ,
} else {
has ( target , key ) {
define _property ( merged _props , key , {
for ( let p of target . props ) {
enumerable : true ,
if ( is _function ( p ) ) p = p ( ) ;
configurable : true ,
if ( key in p ) return true ;
value : obj [ key ]
}
} ) ;
return false ;
} ,
ownKeys ( target ) {
/** @type {Array<string | symbol>} */
const keys = [ ] ;
for ( let p of target . props ) {
if ( is _function ( p ) ) p = p ( ) ;
for ( const key in p ) {
if ( ! keys . includes ( key ) ) keys . push ( key ) ;
}
}
}
}
return keys ;
}
}
return merged _props ;
} ;
/ * *
* @ param { Array < Record < string , unknown > | ( ( ) => Record < string , unknown > ) > } props
* @ returns { any }
* /
export function spread _props ( ... props ) {
return new Proxy ( { props } , spread _props _handler ) ;
} }
/ * * / * *
@ -2616,73 +2640,14 @@ export function spread_props(props) {
* @ returns { Exports & { $destroy : ( ) => void ; $set : ( props : Partial < Props > ) => void ; } }
* @ returns { Exports & { $destroy : ( ) => void ; $set : ( props : Partial < Props > ) => void ; } }
* /
* /
export function createRoot ( component , options ) { export function createRoot ( component , options ) {
// The following definitions aren't duplicative. We need _sources to update single props and
const props = proxy ( /** @type {any} */ ( options . props ) || { } , false ) ;
// _props in case the component uses $$props / $$restProps / const { x, ...rest } = $props().
/** @type {any} */
const _props = { } ;
/** @type {any} */
const _sources = { } ;
/ * *
* @ param { string } name
* @ param { any } value
* /
function add _prop ( name , value ) {
const prop = source ( value ) ;
_sources [ name ] = prop ;
define _property ( _props , name , {
get ( ) {
return get ( prop ) ;
} ,
enumerable : true
} ) ;
}
for ( const prop in options . props || { } ) {
let [ accessors , $destroy ] = mount ( component , { ... options , props } ) ;
add _prop (
prop ,
// @ts-expect-error TS doesn't understand this properly
options . props [ prop ]
) ;
}
// The proxy ensures that we can add new signals on the fly when a prop signal is accessed from within the component
// but no corresponding prop value was set from the outside. The whole things becomes a _propsSignal
// so that adding new props is reflected in the component if it uses $$props or $$restProps.
const props _proxy = new Proxy ( _props , {
/ * *
* @ param { any } target
* @ param { any } property
* /
get : ( target , property ) => {
if ( typeof property !== 'string' ) return target [ property ] ;
if ( ! ( property in _sources ) ) {
add _prop ( property , undefined ) ;
}
return _props [ property ] ;
}
} ) ;
// We're resetting the same proxy instance for updates, therefore bypass equality checks
const props _source = mutable _source ( props _proxy ) ;
let [ accessors , $destroy ] = mount ( component , {
... options ,
// @ts-expect-error We hide the "the props object could be a signal" fact from the public typings
props : props _source
} ) ;
const result =
const result =
/** @type {Exports & { $destroy: () => void; $set: (props: Partial<Props>) => void; }} */ ( {
/** @type {Exports & { $destroy: () => void; $set: (props: Partial<Props>) => void; }} */ ( {
$set : ( props ) => {
$set : ( next ) => {
for ( const [ prop , value ] of object _entries ( props ) ) {
object _assign ( props , next ) ;
if ( prop in _sources ) {
set ( _sources [ prop ] , value ) ;
} else {
add _prop ( prop , value ) ;
set ( props _source , props _proxy ) ;
}
}
} ,
} ,
$destroy
$destroy
} ) ;
} ) ;
@ -2837,11 +2802,10 @@ export function access_props(props) {
} }
/ * * / * *
* @ param { import ( './types.js' ) . MaybeSignal < Record < string , any > >} props
* @ param { Record < string , any } props
* @ returns { Record < string , any > }
* @ returns { Record < string , any > }
* /
* /
export function sanitize _slots ( props ) { export function sanitize _slots ( props ) {
props = unwrap ( props ) ;
const sanitized = { ... props . $$slots } ;
const sanitized = { ... props . $$slots } ;
if ( props . children ) sanitized . default = props . children ;
if ( props . children ) sanitized . default = props . children ;
return sanitized ;
return sanitized ;
Rich Harris
2 years ago
committed by
GitHub