Merge pull request #7269 from QwikDev/remove-hW

refactor(core): schedule QRLs instead of direct execution

Author: wmertens

.changeset/heavy-radios-dream.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+FIX: QRLs are now scheduled instead of directly executed by qwik-loader, so that they are executed in the right order.

.changeset/olive-cameras-collect.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+CHORE: replace the `_hW` export in segments with a shared export `_task` in core. This opens up using QRLs from core.

.github/workflows/ci.yml

@@ -221,7 +221,7 @@ jobs:
           pnpm install --frozen-lockfile
 
       - name: 'build: qwik'
-        run: pnpm build --qwik --set-dist-tag="${{ needs.changes.outputs.disttag }}"
+        run: pnpm build --qwik --insights --set-dist-tag="${{ needs.changes.outputs.disttag }}"
 
       - name: Print Qwik Dist Build
         continue-on-error: true

package.json

@@ -182,20 +182,20 @@
     "build.clean": "rm -rf packages/qwik/dist/ && rm -rf packages/qwik-router/lib/ && rm -rf packages/docs/dist/ && rm -rf packages/insights/dist/",
     "build.cli": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli --dev",
     "build.cli.prod": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli",
-    "build.core": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --qwikrouter --api --platform-binding",
+    "build.core": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --insights --qwikrouter --api --platform-binding",
     "build.eslint": "tsx --require ./scripts/runBefore.ts scripts/index.ts --eslint",
-    "build.full": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm",
-    "build.local": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy",
-    "build.only_javascript": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --api",
+    "build.full": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm",
+    "build.local": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy",
+    "build.only_javascript": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --api",
     "build.packages.docs": "pnpm -C ./packages/docs/ run build",
     "build.packages.insights": "pnpm -C ./packages/insights/ run build",
     "build.platform": "tsx --require ./scripts/runBefore.ts scripts/index.ts --platform-binding",
     "build.platform.copy": "tsx --require ./scripts/runBefore.ts scripts/index.ts --platform-binding-wasm-copy",
     "build.qwik-router": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwikrouter",
-    "build.validate": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --api --eslint --qwikrouter --platform-binding --wasm --validate",
-    "build.vite": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --api --qwikrouter --eslint --platform-binding-wasm-copy",
+    "build.validate": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --api --eslint --qwikrouter --platform-binding --wasm --validate",
+    "build.vite": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --insights --api --qwikrouter --eslint --platform-binding-wasm-copy",
     "build.wasm": "tsx --require ./scripts/runBefore.ts scripts/index.ts --wasm",
-    "build.watch": "tsx --require ./scripts/runBefore.ts scripts/index.ts --build  --qwikrouter --watch --dev --platform-binding",
+    "build.watch": "tsx --require ./scripts/runBefore.ts scripts/index.ts --qwik --qwikrouter --watch --dev --platform-binding",
     "change": "changeset",
     "cli": "pnpm build.cli && node packages/create-qwik/create-qwik.cjs && tsx --require ./scripts/runBefore.ts scripts/validate-cli.ts --copy-local-qwik-dist",
     "cli.qwik": "pnpm build.cli && node packages/qwik/qwik-cli.cjs",

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

@@ -277,20 +277,6 @@
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts",
       "mdFile": "core.domattributes.md"
     },
-    {
-      "name": "EagernessOptions",
-      "id": "eagernessoptions",
-      "hierarchy": [
-        {
-          "name": "EagernessOptions",
-          "id": "eagernessoptions"
-        }
-      ],
-      "kind": "TypeAlias",
-      "content": "```typescript\nexport type EagernessOptions = 'visible' | 'load' | 'idle';\n```",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts",
-      "mdFile": "core.eagernessoptions.md"
-    },
     {
       "name": "Element",
       "id": "qwikjsx-element",
@@ -2125,24 +2111,10 @@
         }
       ],
       "kind": "Function",
-      "content": "Reruns the `taskFn` when the observed inputs change.\n\nUse `useTask` to observe changes on a set of inputs, and then re-execute the `taskFn` when those inputs change.\n\nThe `taskFn` only executes if the observed inputs change. To observe the inputs, use the `obs` function to wrap property reads. This creates subscriptions that will trigger the `taskFn` to rerun.\n\n\n```typescript\nuseTask$: (qrl: import(\"./use-task\").TaskFn, opts?: import(\"./use-task\").UseTaskOptions | undefined) => 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\nqrl\n\n\n</td><td>\n\nimport(\"./use-task\").[TaskFn](#taskfn)\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\nimport(\"./use-task\").[UseTaskOptions](#usetaskoptions) \\| undefined\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nvoid",
+      "content": "Reruns the `taskFn` when the observed inputs change.\n\nUse `useTask` to observe changes on a set of inputs, and then re-execute the `taskFn` when those inputs change.\n\nThe `taskFn` only executes if the observed inputs change. To observe the inputs, use the `obs` function to wrap property reads. This creates subscriptions that will trigger the `taskFn` to rerun.\n\n\n```typescript\nuseTask$: (qrl: import(\"./use-task\").TaskFn) => 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\nqrl\n\n\n</td><td>\n\nimport(\"./use-task\").[TaskFn](#taskfn)\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nvoid",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task-dollar.ts",
       "mdFile": "core.usetask_.md"
     },
-    {
-      "name": "UseTaskOptions",
-      "id": "usetaskoptions",
-      "hierarchy": [
-        {
-          "name": "UseTaskOptions",
-          "id": "usetaskoptions"
-        }
-      ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface UseTaskOptions \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\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\n[eagerness?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[EagernessOptions](#eagernessoptions)\n\n\n</td><td>\n\n_(Optional)_ - `visible`<!-- -->: run the effect when the element is visible. - `load`<!-- -->: eagerly run the effect when the application resumes.\n\n\n</td></tr>\n</tbody></table>",
-      "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts",
-      "mdFile": "core.usetaskoptions.md"
-    },
     {
       "name": "useVisibleTask$",
       "id": "usevisibletask_",

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

@@ -873,14 +873,6 @@ _(Optional)_
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/shared/jsx/types/jsx-qwik-attributes.ts)
 
-## EagernessOptions
-
-```typescript
-export type EagernessOptions = "visible" | "load" | "idle";
-```
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts)
-
 ## Element
 
 ```typescript
@@ -5252,7 +5244,7 @@ Use `useTask` to observe changes on a set of inputs, and then re-execute the `ta
 The `taskFn` only executes if the observed inputs change. To observe the inputs, use the `obs` function to wrap property reads. This creates subscriptions that will trigger the `taskFn` to rerun.
 
 ```typescript
-useTask$: (qrl: import("./use-task").TaskFn, opts?: import("./use-task").UseTaskOptions | undefined) => void
+useTask$: (qrl: import("./use-task").TaskFn) => void
 ```
 
 <table><thead><tr><th>
@@ -5278,19 +5270,6 @@ import("./use-task").[TaskFn](#taskfn)
 
 </td><td>
 
-</td></tr>
-<tr><td>
-
-opts
-
-</td><td>
-
-import("./use-task").[UseTaskOptions](#usetaskoptions) \| undefined
-
-</td><td>
-
-_(Optional)_
-
 </td></tr>
 </tbody></table>
 **Returns:**
@@ -5299,48 +5278,6 @@ void
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task-dollar.ts)
 
-## UseTaskOptions
-
-```typescript
-export interface UseTaskOptions
-```
-
-<table><thead><tr><th>
-
-Property
-
-</th><th>
-
-Modifiers
-
-</th><th>
-
-Type
-
-</th><th>
-
-Description
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[eagerness?](#)
-
-</td><td>
-
-</td><td>
-
-[EagernessOptions](#eagernessoptions)
-
-</td><td>
-
-_(Optional)_ - `visible`: run the effect when the element is visible. - `load`: eagerly run the effect when the application resumes.
-
-</td></tr>
-</tbody></table>
-
-[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts)
-
 ## useVisibleTask$
 
 ```tsx

packages/qwik-router/src/runtime/src/link-component.tsx

@@ -73,10 +73,7 @@ export const Link = component$<LinkProps>((props) => {
     ? $(async (event: Event, elm: HTMLAnchorElement) => {
         if (event.defaultPrevented) {
           // If default was prevented, than it is up to us to make client side navigation.
-          if (elm.hasAttribute('q:nbs')) {
-            // Allow bootstrapping into useNavigate.
-            await nav(location.href, { type: 'popstate' });
-          } else if (elm.href) {
+          if (elm.href) {
             elm.setAttribute('aria-pressed', 'true');
             await nav(elm.href, { forceReload: reload, replaceState, scroll });
             elm.removeAttribute('aria-pressed');

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -624,9 +624,6 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
             removeEventListener('scroll', win._qRouterInitScroll!);
             win._qRouterInitScroll = undefined;
 
-            win._qRouterBootstrap?.remove();
-            win._qRouterBootstrap = undefined;
-
             // Cache SPA recovery script.
             spaInit.resolve();
           }
@@ -760,8 +757,6 @@ export interface ClientSPAWindow extends Window {
   _qCityInitVisibility?: () => void;
   /** @deprecated Use "_qRouterInitScroll" instead. Will be removed in V3 */
   _qCityInitScroll?: () => void;
-  /** @deprecated Use "_qRouterBootstrap" instead. Will be removed in V3 */
-  _qCityBootstrap?: HTMLAnchorElement;
   _qRouterHistoryPatch?: boolean;
   _qRouterSPA?: boolean;
   _qRouterScrollEnabled?: boolean;
@@ -770,6 +765,5 @@ export interface ClientSPAWindow extends Window {
   _qRouterInitAnchors?: (event: MouseEvent) => void;
   _qRouterInitVisibility?: () => void;
   _qRouterInitScroll?: () => void;
-  _qRouterBootstrap?: HTMLAnchorElement;
   _qcs?: boolean;
 }

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

@@ -1,6 +1,7 @@
+import type { ContextId, DomContainer, _ContainerElement } from 'packages/qwik/core-internal';
 import type { ClientSPAWindow } from './qwik-router-component';
 import type { ScrollHistoryState } from './scroll-restoration';
-import type { ScrollState } from './types';
+import type { RouteNavigate, ScrollState } from './types';
 
 import { event$, isDev } from '@qwik.dev/core';
 
@@ -30,7 +31,6 @@ export default event$((_: Event, el: Element) => {
     const currentPath = location.pathname + location.search;
 
     const historyPatch = '_qRouterHistoryPatch';
-    const bootstrap = '_qRouterBootstrap';
     const scrollEnabled = '_qRouterScrollEnabled';
     const debounceTimeout = '_qRouterScrollDebounce';
     const scrollHistory = '_qRouterScroll';
@@ -71,21 +71,17 @@ export default event$((_: Event, el: Element) => {
       if (currentPath !== location.pathname + location.search) {
         const getContainer = (el: Element) =>
           el.closest('[q\\:container]:not([q\\:container=html]):not([q\\:container=text])');
-        // Hook into useNavigate context, if available.
-        // We hijack a <Link> here, goes through the loader, resumes, app, etc. Simple.
-        // TODO Will only work with <Link>, is there a better way?
-        const link = getContainer(el)?.querySelector('a[q\\:link]');
-
-        if (link) {
-          // Re-acquire container, link may be in a nested container.
-          const container = getContainer(link)!;
-          const bootstrapLink = link.cloneNode() as HTMLAnchorElement;
-          bootstrapLink.setAttribute('q:nbs', '');
-          bootstrapLink.style.display = 'none';
-
-          container.appendChild(bootstrapLink);
-          win[bootstrap] = bootstrapLink;
-          bootstrapLink.click();
+
+        const container = getContainer(el);
+        const domContainer = (container as _ContainerElement).qContainer as DomContainer;
+        const hostElement = domContainer.vNodeLocate(el);
+
+        const nav = domContainer?.resolveContext(hostElement, {
+          id: 'qc--n',
+        } as ContextId<RouteNavigate>);
+
+        if (nav) {
+          nav(location.href, { type: 'popstate' });
         } else {
           // No useNavigate ctx available, fallback to reload.
           location.reload();

packages/qwik/handlers.mjs

@@ -0,0 +1,9 @@
+/**
+ * This re-exports the QRL handlers so that they can be used as QRLs.
+ *
+ * In vite dev mode, this file is referenced directly. This ensures that the correct path to core is
+ * used so that there's only one instance of Qwik.
+ *
+ * Make sure that these handlers are listed in manifest.ts
+ */
+export { _run, _task } from '@qwik.dev/core';

packages/qwik/package.json

@@ -41,6 +41,7 @@
     "./cli": {
       "require": "./dist/cli.cjs"
     },
+    "./handlers.mjs": "./handlers.mjs",
     "./internal": {
       "types": "./dist/core-internal.d.ts",
       "import": {
@@ -144,6 +145,7 @@
     "bindings",
     "build.d.ts",
     "cli.d.ts",
+    "handlers.mjs",
     "jsx-dev-runtime.d.ts",
     "jsx-runtime.d.ts",
     "loader.d.ts",

packages/qwik/src/core/api.md

@@ -211,15 +211,14 @@ class DomContainer extends _SharedContainer implements ClientContainer {
     setContext<T>(host: HostElement, context: ContextId<T>, value: T): void;
     // (undocumented)
     setHostProp<T>(host: HostElement, name: string, value: T): void;
+    // (undocumented)
+    vNodeLocate: (id: string | Element) => _VNode;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "DomContainer" should be prefixed with an underscore because the declaration is marked as @internal
 export { DomContainer }
 export { DomContainer as _DomContainer }
 
-// @public (undocumented)
-export type EagernessOptions = 'visible' | 'load' | 'idle';
-
 // @internal (undocumented)
 export class _EffectData {
     constructor(data: NodePropData);
@@ -316,9 +315,6 @@ function h<TYPE extends string | FunctionComponent<PROPS>, PROPS extends {} = {}
 export { h as createElement }
 export { h }
 
-// @internal
-export const _hW: () => void;
-
 // @internal @deprecated (undocumented)
 export const _IMMUTABLE: unique symbol;
 
@@ -810,6 +806,9 @@ export type ResourceReturn<T> = ResourcePending<T> | ResourceResolved<T> | Resou
 // @internal (undocumented)
 export const _restProps: (props: PropsProxy, omit: string[], target?: Props) => Props;
 
+// @internal
+export const _run: (...args: unknown[]) => ValueOrPromise<void>;
+
 // @internal
 export function _serialize(data: unknown[]): Promise<string>;
 
@@ -999,6 +998,9 @@ export interface SyncQRL<TYPE extends Function = any> extends QRL<TYPE> {
     resolved: TYPE;
 }
 
+// @internal
+export const _task: (_event: Event, element: Element) => void;
+
 // @public (undocumented)
 export interface TaskCtx {
     // (undocumented)
@@ -1139,17 +1141,12 @@ export interface UseStylesScoped {
 export const useStylesScopedQrl: (styles: QRL<string>) => UseStylesScoped;
 
 // @public
-export const useTask$: (qrl: TaskFn, opts?: UseTaskOptions | undefined) => void;
-
-// @public (undocumented)
-export interface UseTaskOptions {
-    eagerness?: EagernessOptions;
-}
+export const useTask$: (qrl: TaskFn) => void;
 
 // Warning: (ae-internal-missing-underscore) The name "useTaskQrl" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
-export const useTaskQrl: (qrl: QRL<TaskFn>, opts?: UseTaskOptions) => void;
+export const useTaskQrl: (qrl: QRL<TaskFn>) => void;
 
 // @public
 export const useVisibleTask$: (qrl: TaskFn, opts?: OnVisibleTaskOptions | undefined) => void;
@@ -1236,17 +1233,9 @@ export const _waitUntilRendered: (elm: Element) => Promise<void>;
 //
 // @internal (undocumented)
 export function _walkJSX(ssr: SSRContainer, value: JSXOutput, options: {
-    allowPromises: true;
-    currentStyleScoped: string | null;
-    parentComponentFrame: ISsrComponentFrame | null;
-}): ValueOrPromise<void>;
-
-// @internal (undocumented)
-export function _walkJSX(ssr: SSRContainer, value: JSXOutput, options: {
-    allowPromises: false;
     currentStyleScoped: string | null;
     parentComponentFrame: ISsrComponentFrame | null;
-}): false;
+}): Promise<void>;
 
 // @internal (undocumented)
 export const _weakSerialize: <T extends object>(input: T) => Partial<T>;