Merge pull request #8091 from QwikDev/fix-inline

fix: inline qwik loader location

Author: wmertens

packages/docs/src/routes/api/qwik-testing/api.json

@@ -209,7 +209,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any, options?: {\n    waitForIdle?: boolean;\n}): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\noptions\n\n\n</td><td>\n\n{ waitForIdle?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
+      "content": "Trigger an event in unit tests on an element. Needs to be kept in sync with the Qwik Loader event dispatching.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any, options?: {\n    waitForIdle?: boolean;\n}): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\noptions\n\n\n</td><td>\n\n{ waitForIdle?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;void&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/element-fixture.ts",
       "mdFile": "core.trigger.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -499,7 +499,7 @@ superParent: HTMLElement;
 
 ## trigger
 
-Trigger an event in unit tests on an element.
+Trigger an event in unit tests on an element. Needs to be kept in sync with the Qwik Loader event dispatching.
 
 Future deprecation candidate.
 

packages/docs/src/routes/api/qwik/api.json

@@ -2385,7 +2385,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Register a listener on the current component's host element.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. Otherwise, it's adding a JSX listener in the `<div>` is a better idea.\n\n\n```typescript\nuseOn: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
+      "content": "Register a listener on the current component's host element.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. Otherwise, it's adding a JSX listener in the `<div>` is a better idea.\n\nEvents are case sensitive.\n\n\n```typescript\nuseOn: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts",
       "mdFile": "core.useon.md"
     },
@@ -2399,7 +2399,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Register a listener on `document`<!-- -->.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.\n\n\n```typescript\nuseOnDocument: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
+      "content": "Register a listener on `document`<!-- -->.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.\n\nEvents are case sensitive.\n\n\n```typescript\nuseOnDocument: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts",
       "mdFile": "core.useondocument.md"
     },
@@ -2413,7 +2413,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Register a listener on `window`<!-- -->.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.\n\n\n```typescript\nuseOnWindow: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
+      "content": "Register a listener on `window`<!-- -->.\n\nUsed to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.\n\nEvents are case sensitive.\n\n\n```typescript\nuseOnWindow: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nevent\n\n\n</td><td>\n\nT \\| T\\[\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventQrl\n\n\n</td><td>\n\nEventQRL&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nvoid",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-on.ts",
       "mdFile": "core.useonwindow.md"
     },

packages/docs/src/routes/api/qwik/index.mdx

@@ -9208,6 +9208,8 @@ Register a listener on the current component's host element.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX. Otherwise, it's adding a JSX listener in the `<div>` is a better idea.
 
+Events are case sensitive.
+
 ```typescript
 useOn: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
 ```
@@ -9261,6 +9263,8 @@ Register a listener on `document`.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.
 
+Events are case sensitive.
+
 ```typescript
 useOnDocument: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
 ```
@@ -9314,6 +9318,8 @@ Register a listener on `window`.
 
 Used to programmatically add event listeners. Useful from custom `use*` methods, which do not have access to the JSX.
 
+Events are case sensitive.
+
 ```typescript
 useOnWindow: <T extends KnownEventNames>(event: T | T[], eventQrl: EventQRL<T>) => void
 ```

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

@@ -445,6 +445,28 @@ describe('render api', () => {
             '(window.qwikevents||(window.qwikevents=[]))'
           );
         });
+        it('should only render inside body', async () => {
+          const bigText = 'hello world '.repeat(4000);
+          const result = await renderToStringAndSetPlatform(
+            <>
+              <head>
+                <script>{bigText}</script>
+              </head>
+              <body>
+                <Counter />
+                <div>{bigText}</div>
+              </body>
+            </>,
+            {
+              containerTagName: 'html',
+              qwikLoader: 'inline',
+            }
+          );
+          const document = createDocument({ html: result.html });
+          const qwikLoaderScriptElements = document.querySelectorAll('script[id=qwikloader]');
+          expect(qwikLoaderScriptElements).toHaveLength(1);
+          expect(qwikLoaderScriptElements[0]?.parentNode?.nodeName.toLowerCase()).toEqual('body');
+        });
         it('should not render inside template', async () => {
           const bigText = 'hello world '.repeat(3000); // ~30kB of text
           const result = await renderToStringAndSetPlatform(

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

@@ -348,6 +348,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
   openContainer() {
     if (this.tag == 'html') {
       this.write('<!DOCTYPE html>');
+      // -1 so we only emit inside body
+      this.$noScriptHere$ = -1;
     }
 
     const containerAttributes = this.renderOptions.containerAttributes || {};
@@ -379,7 +381,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
     return this.closeElement();
   }
 
-  private $noScriptHere$ = 0;
+  // -1 so we only emit inside body
+  private $noScriptHere$: number = 0;
 
   /** Renders opening tag for DOM element */
   openElement(
@@ -393,8 +396,8 @@ class SSRContainer extends _SharedContainer implements ISSRContainer {
         // We waited long enough, on slow connections the page is already partially visible
         this.emitQwikLoaderInline();
       }
-      // keep track of noscript and template
-      else if (elementName === 'noscript' || elementName === 'template') {
+      // keep track of noscript and template, and for html we only emit inside body
+      else if (elementName === 'noscript' || elementName === 'template' || elementName === 'body') {
         this.$noScriptHere$++;
       }
     }