Merge pull request #7706 from QwikDev/v2-popstate-scroll-events

fix: adding popstate and scroll event for SPA navigation

Author: wmertens

.changeset/better-shrimps-sin.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/router': patch
+---
+
+fix: adding popstate and scroll event for SPA navigation

packages/qwik-router/src/runtime/src/spa-init.ts

@@ -198,8 +198,8 @@ export default event$((_: Event, el: Element) => {
     win[scrollEnabled] = true;
 
     setTimeout(() => {
-      addEventListener('popstate', win[initPopstate]!);
-      addEventListener('scroll', win[initScroll]!, { passive: true });
+      win.addEventListener('popstate', win[initPopstate]!);
+      win.addEventListener('scroll', win[initScroll]!, { passive: true });
       document.body.addEventListener('click', win[initAnchors]!);
 
       if (!(win as any).navigation) {

packages/qwik/src/core/tests/render-api.spec.tsx

@@ -699,15 +699,19 @@ describe('render api', () => {
           containerTagName: 'div',
           debug: true,
         });
-        expect(cleanupAttrs(result.html)).toContain('<script id="qwikloader" async>debug</script>');
+        expect(cleanupAttrs(result.html)).toContain(
+          '<script id="qwikloader" async type="module">debug</script>'
+        );
       });
 
       it('should emit qwik loader without debug mode', async () => {
         const result = await renderToStringAndSetPlatform(<Counter />, {
           containerTagName: 'div',
           debug: false,
         });
-        expect(cleanupAttrs(result.html)).toContain('<script id="qwikloader" async>min</script>');
+        expect(cleanupAttrs(result.html)).toContain(
+          '<script id="qwikloader" async type="module">min</script>'
+        );
       });
     });
     describe('snapshotResult', () => {

packages/qwik/src/server/ssr-container.ts

@@ -835,7 +835,7 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
           debug: this.renderOptions.debug,
         });
         // async allows executing while the DOM is being handled
-        const scriptAttrs = ['id', 'qwikloader', 'async', true];
+        const scriptAttrs = ['id', 'qwikloader', 'async', true, 'type', 'module'];
         const nonce = this.renderOptions.serverData?.nonce;
         if (nonce) {
           scriptAttrs.push('nonce', nonce);