@@ -15,125 +15,125 @@ const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => {
1515 return hrefConfig ;
1616} ;
1717
18- export const decorators : Decorator [ ] = [
19- ( Story , ctx ) => {
20- const svelteKitParameters : SvelteKitParameters = ctx . parameters ?. sveltekit_experimental ?? { } ;
21- setPage ( svelteKitParameters ?. stores ?. page ) ;
22- setNavigating ( svelteKitParameters ?. stores ?. navigating ) ;
23- setUpdated ( svelteKitParameters ?. stores ?. updated ) ;
24- setAfterNavigateArgument ( svelteKitParameters ?. navigation ?. afterNavigate ) ;
18+ const svelteKitMocksDecorator : Decorator = ( Story , ctx ) => {
19+ const svelteKitParameters : SvelteKitParameters = ctx . parameters ?. sveltekit_experimental ?? { } ;
20+ setPage ( svelteKitParameters ?. stores ?. page ) ;
21+ setNavigating ( svelteKitParameters ?. stores ?. navigating ) ;
22+ setUpdated ( svelteKitParameters ?. stores ?. updated ) ;
23+ setAfterNavigateArgument ( svelteKitParameters ?. navigation ?. afterNavigate ) ;
2524
26- onMount ( ( ) => {
27- const globalClickListener = ( e : MouseEvent ) => {
28- // we add a global click event listener and we check if there's a link in the composedPath
29- const path = e . composedPath ( ) ;
30- const element = path . findLast ( ( el ) => el instanceof HTMLElement && el . tagName === 'A' ) ;
31- if ( element && element instanceof HTMLAnchorElement ) {
32- // if the element is an a-tag we get the href of the element
33- // and compare it to the hrefs-parameter set by the user
34- const to = element . getAttribute ( 'href' ) ;
35- if ( ! to ) {
36- return ;
37- }
38- e . preventDefault ( ) ;
39- const defaultActionCallback = ( ) => action ( 'navigate' ) ( to , e ) ;
40- if ( ! svelteKitParameters . hrefs ) {
41- defaultActionCallback ( ) ;
42- return ;
43- }
44-
45- let callDefaultCallback = true ;
46- // we loop over every href set by the user and check if the href matches
47- // if it does we call the callback provided by the user and disable the default callback
48- Object . entries ( svelteKitParameters . hrefs ) . forEach ( ( [ href , hrefConfig ] ) =>
10000
{
49- const { callback, asRegex } = normalizeHrefConfig ( hrefConfig ) ;
50- const isMatch = asRegex ? new RegExp ( href ) . test ( to ) : to === href ;
51- if ( isMatch ) {
52- callDefaultCallback = false ;
53- callback ?.( to , e ) ;
54- }
55- } ) ;
56- if ( callDefaultCallback ) {
57- defaultActionCallback ( ) ;
58- }
25+ onMount ( ( ) => {
26+ const globalClickListener = ( e : MouseEvent ) => {
27+ // we add a global click event listener and we check if there's a link in the composedPath
28+ const path = e . composedPath ( ) ;
29+ const element = path . findLast ( ( el ) => el instanceof HTMLElement && el . tagName === 'A' ) ;
30+ if ( element && element instanceof HTMLAnchorElement ) {
31+ // if the element is an a-tag we get the href of the element
32+ // and compare it to the hrefs-parameter set by the user
33+ const to = element . getAttribute ( 'href' ) ;
34+ if ( ! to ) {
35+ return ;
36+ }
37+ e . preventDefault ( ) ;
38+ const defaultActionCallback = ( ) => action ( 'navigate' ) ( to , e ) ;
39+ if ( ! svelteKitParameters . hrefs ) {
40+ defaultActionCallback ( ) ;
41+ return ;
5942 }
60- } ;
61-
62- /**
63- * Function that create and add listeners for the event that are emitted by the mocked
64- * functions. The event name is based on the function name
65- *
66- * Eg. storybook:goto, storybook:invalidateAll
67- *
68- * @param baseModule The base module where the function lives (navigation|forms)
69- * @param functions The list of functions in that module that emit events
70- * @param {boolean } [defaultToAction] The list of functions in that module that emit events
71- * @returns A function to remove all the listener added
72- */
73- function createListeners (
74- baseModule : keyof SvelteKitParameters ,
75- functions : string [ ] ,
76- defaultToAction ?: boolean
77- ) {
78- // the array of every added listener, we can use this in the return function
79- // to clean them
80- const toRemove : Array < {
81- eventType : string ;
82- listener : ( event : { detail : any [ ] } ) => void ;
83- } > = [ ] ;
84- functions . forEach ( ( func ) => {
85- // we loop over every function and check if the user actually passed
86- // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto
87- const hasFunction =
88- ( svelteKitParameters as any ) [ baseModule ] ?. [ func ] &&
89- ( svelteKitParameters as any ) [ baseModule ] [ func ] instanceof Function ;
90- // if we default to an action we still add the listener (this will be the case for goto, invalidate, invalidateAll)
91- if ( hasFunction || defaultToAction ) {
92- // we create the listener that will just get the detail array from the custom element
93- // and call the user provided function spreading this args in...this will basically call
94- // the function that the user provide with the same arguments the function is invoked to
9543
96- // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto
97- // it provided to storybook will be called with "/my-route"
98- const listener = ( { detail = [ ] as any [ ] } ) => {
99- const args = Array . isArray ( detail ) ? detail : [ ] ;
100- // if it has a function in the parameters we call that function
101- // otherwise we invoke the action
102- const fnToCall = hasFunction
103- ? ( svelteKitParameters as any ) [ baseModule ] [ func ]
104- : action ( func ) ;
105- fnToCall ( ...args ) ;
106- } ;
107- const eventType = `storybook:${ func } ;
108- toRemove . push ( { eventType, listener } ) ;
109- // add the listener to window
110- ( window . addEventListener as any ) ( eventType , listener ) ;
44+ let callDefaultCallback = true ;
45+ // we loop over every href set by the user and check if the href matches
46+ // if it does we call the callback provided by the user and disable the default callback
47+ Object . entries ( svelteKitParameters . hrefs ) . forEach ( ( [ href , hrefConfig ] ) => {
48+ const { callback, asRegex } =<
D7AE
/span> normalizeHrefConfig ( hrefConfig ) ;
49+ const isMatch = asRegex ? new RegExp ( href ) . test ( to ) : to === href ;
50+ if ( isMatch ) {
51+ callDefaultCallback = false ;
52+ callback ?.( to , e ) ;
11153 }
11254 } ) ;
113- return ( ) => {
114- // loop over every listener added and remove them
115- toRemove . forEach ( ( { eventType, listener } ) => {
116- // @ts -expect-error apparently you can't remove a custom listener to the window with TS
117- window . removeEventListener ( eventType , listener ) ;
118- } ) ;
119- } ;
55+ if ( callDefaultCallback ) {
56+ defaultActionCallback ( ) ;
57+ }
12058 }
59+ } ;
12160
122- const removeNavigationListeners = createListeners (
123- 'navigation' ,
124- [ 'goto' , 'invalidate' , 'invalidateAll' , 'pushState' , 'replaceState' ] ,
125- true
126- ) ;
127- const removeFormsListeners = createListeners ( 'forms' , [ 'enhance' ] ) ;
128- window . addEventListener ( 'click' , globalClickListener ) ;
61+ /**
62+ * Function that create and add listeners for the event that are emitted by the mocked
63+ * functions. The event name is based on the function name
64+ *
65+ * Eg. storybook:goto, storybook:invalidateAll
66+ *
67+ * @param baseModule The base module where the function lives (navigation|forms)
68+ * @param functions The list of functions in that module that emit events
69+ * @param {boolean } [defaultToAction] The list of functions in that module that emit events
70+ * @returns A function to remove all the listener added
71+ */
72+ function createListeners (
73+ baseModule : keyof SvelteKitParameters ,
74+ functions : string [ ] ,
75+ defaultToAction ?: boolean
76+ ) {
77+ // the array of every added listener, we can use this in the return function
78+ // to clean them
79+ const toRemove : Array < {
80+ eventType : string ;
81+ listener : ( event : { detail : any [ ] } ) => void ;
82+ } > = [ ] ;
83+ functions . forEach ( ( func ) => {
84+ // we loop over every function and check if the user actually passed
85+ // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto
86+ const hasFunction =
87+ ( svelteKitParameters as any ) [ baseModule ] ?. [ func ] &&
88+ ( svelteKitParameters as any ) [ baseModule ] [ func ] instanceof Function ;
89+ // if we default to an action we still add the listener (this will be the case for goto, invalidate, invalidateAll)
90+ if ( hasFunction || defaultToAction ) {
91+ // we create the listener that will just get the detail array from the custom element
92+ // and call the user provided function spreading this args in...this will basically call
93+ // the function that the user provide with the same arguments the function is invoked to
12994
95+ // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto
96+ // it provided to storybook will be called with "/my-route"
97+ const listener = ( { detail = [ ] as any [ ] } ) => {
98+ const args = Array . isArray ( detail ) ? detail : [ ] ;
99+ // if it has a function in the parameters we call that function
100+ // otherwise we invoke the action
101+ const fnToCall = hasFunction
102+ ? ( svelteKitParameters as any ) [ baseModule ] [ func ]
103+ : action ( func ) ;
104+ fnToCall ( ...args ) ;
105+ } ;
106+ const eventType = `storybook:${ func } ;
107+ toRemove . push ( { eventType, listener } ) ;
108+ // add the listener to window
109+ ( window . addEventListener as any ) ( eventType , listener ) ;
110+ }
111+ } ) ;
130112 return ( ) => {
131- window . removeEventListener ( 'click' , globalClickListener ) ;
132- removeNavigationListeners ( ) ;
133- removeFormsListeners ( ) ;
113+ // loop over every listener added and remove them
114+ toRemove . forEach ( ( { eventType, listener } ) => {
115+ // @ts -expect-error apparently you can't remove a custom listener to the window with TS
116+ window . removeEventListener ( eventType , listener ) ;
117+ } ) ;
134118 } ;
135- } ) ;
119+ }
120+
121+ const removeNavigationListeners = createListeners (
122+ 'navigation' ,
123+ [ 'goto' , 'invalidate' , 'invalidateAll' , 'pushState' , 'replaceState' ] ,
124+ true
125+ ) ;
126+ const removeFormsListeners = createListeners ( 'forms' , [ 'enhance' ] ) ;
127+ window . addEventListener ( 'click' , globalClickListener ) ;
128+
129+ return ( ) => {
130+ window . removeEventListener ( 'click' , globalClickListener ) ;
131+ removeNavigationListeners ( ) ;
132+ removeFormsListeners ( ) ;
133+ } ;
134+ } ) ;
135+
136+ return Story ( ) ;
137+ } ;
136138
137- return Story ( ) ;
138- } ,
139- ] ;
139+ export const decorators : Decorator [ ] = [ svelteKitMocksDecorator ] ;
0 commit comments