@qwik.dev/core 2.0.0-beta.27 → 2.0.0-beta.28

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.27-dev+7fc6984
+ * @qwik.dev/core 2.0.0-beta.28-dev+fac55b7
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -1008,7 +1008,7 @@ const COMMA = ',';
  *
  * @public
  */
-const version = "2.0.0-beta.27-dev+7fc6984";
+const version = "2.0.0-beta.28-dev+fac55b7";
 
 // keep this import from core/build so the cjs build works
 const createPlatform = () => {
@@ -10235,6 +10235,211 @@ function addQwikEventToSerializationContext(serializationCtx, key, qrl) {
     }
 }
 
+// <docs markdown="../readme.md#useOn">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ../readme.md#useOn instead and run `pnpm docs.sync`)
+/**
+ * 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.
+ *
+ * @public
+ * @see `useOn`, `useOnWindow`, `useOnDocument`.
+ */
+// </docs>
+const useOn = (event, eventQrl) => {
+    _useOn("q-e:" /* EventNameHtmlScope.on */, event, eventQrl);
+};
+// <docs markdown="../readme.md#useOnDocument">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ../readme.md#useOnDocument instead and run `pnpm docs.sync`)
+/**
+ * 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.
+ *
+ * @public
+ * @see `useOn`, `useOnWindow`, `useOnDocument`.
+ *
+ * ```tsx
+ * function useScroll() {
+ *   useOnDocument(
+ *     'scroll',
+ *     $((event) => {
+ *       console.log('body scrolled', event);
+ *     })
+ *   );
+ * }
+ *
+ * const Cmp = component$(() => {
+ *   useScroll();
+ *   return <div>Profit!</div>;
+ * });
+ * ```
+ */
+// </docs>
+const useOnDocument = (event, eventQrl) => {
+    _useOn("q-d:" /* EventNameHtmlScope.document */, event, eventQrl);
+};
+// <docs markdown="../readme.md#useOnWindow">
+// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
+// (edit ../readme.md#useOnWindow instead and run `pnpm docs.sync`)
+/**
+ * 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.
+ *
+ * @public
+ * @see `useOn`, `useOnWindow`, `useOnDocument`.
+ *
+ * ```tsx
+ * function useAnalytics() {
+ *   useOnWindow(
+ *     'popstate',
+ *     $((event) => {
+ *       console.log('navigation happened', event);
+ *       // report to analytics
+ *     })
+ *   );
+ * }
+ *
+ * const Cmp = component$(() => {
+ *   useAnalytics();
+ *   return <div>Profit!</div>;
+ * });
+ * ```
+ */
+// </docs>
+const useOnWindow = (event, eventQrl) => {
+    _useOn("q-w:" /* EventNameHtmlScope.window */, event, eventQrl);
+};
+const _useOn = (prefix, eventName, eventQrl) => {
+    const { isAdded, addEvent } = useOnEventsSequentialScope();
+    if (isAdded) {
+        return;
+    }
+    if (eventQrl) {
+        if (Array.isArray(eventName)) {
+            for (const event of eventName) {
+                addEvent(prefix + fromCamelToKebabCase(event), eventQrl);
+            }
+        }
+        else {
+            addEvent(prefix + fromCamelToKebabCase(eventName), eventQrl);
+        }
+    }
+};
+/**
+ * This hook is like the `useSequentialScope` but it is specifically for `useOn`. This is needed
+ * because we want to execute the `useOn` hooks only once and store the event listeners on the host
+ * element. From Qwik V2 the component is rerunning when the promise is thrown, so we need to make
+ * sure that the event listeners are not added multiple times.
+ *
+ * - The event listeners are stored in the `USE_ON_LOCAL` property.
+ * - The `USE_ON_LOCAL_SEQ_IDX` is used to keep track of the index of the hook that calls this.
+ * - The `USE_ON_LOCAL_FLAGS` is used to keep track of whether the event listener has been added or
+ *   not.
+ */
+const useOnEventsSequentialScope = () => {
+    const iCtx = useInvokeContext();
+    const hostElement = iCtx.$hostElement$;
+    const host = hostElement;
+    let onMap = iCtx.$container$.getHostProp(host, USE_ON_LOCAL);
+    if (onMap === null) {
+        onMap = {};
+        iCtx.$container$.setHostProp(host, USE_ON_LOCAL, onMap);
+    }
+    let seqIdx = iCtx.$container$.getHostProp(host, USE_ON_LOCAL_SEQ_IDX);
+    if (seqIdx === null) {
+        seqIdx = 0;
+    }
+    iCtx.$container$.setHostProp(host, USE_ON_LOCAL_SEQ_IDX, seqIdx + 1);
+    let addedFlags = iCtx.$container$.getHostProp(host, USE_ON_LOCAL_FLAGS);
+    if (addedFlags === null) {
+        addedFlags = [];
+        iCtx.$container$.setHostProp(host, USE_ON_LOCAL_FLAGS, addedFlags);
+    }
+    while (addedFlags.length <= seqIdx) {
+        addedFlags.push(false);
+    }
+    const addEvent = (eventName, eventQrl) => {
+        addedFlags[seqIdx] = true;
+        let events = onMap[eventName];
+        if (!events) {
+            onMap[eventName] = events = [];
+        }
+        events.push(eventQrl);
+    };
+    return {
+        isAdded: addedFlags[seqIdx],
+        addEvent,
+    };
+};
+
+/**
+ * HMR event handler. Replaces the component QRL with a fresh one and marks dirty.
+ *
+ * @internal
+ */
+const _hmr = (event, element) => {
+    const ctx = newInvokeContextFromDOM(event, element);
+    const container = ctx.$container$;
+    let host = ctx.$hostElement$;
+    if (!container || !host) {
+        return;
+    }
+    // host is a VNode from vnode_locate. Walk up to the nearest component VirtualVNode
+    // (the one with OnRenderProp) so we can replace its QRL and mark it dirty.
+    if (!container.getHostProp(host, OnRenderProp)) {
+        const parent = container.getParentHost(host);
+        if (!parent) {
+            return;
+        }
+        host = parent;
+    }
+    // Replace the component QRL with a fresh one to bypass caching
+    // TODO use a qrl registry to invalidate all QRLs from a parent
+    const oldQrl = container.getHostProp(host, OnRenderProp);
+    if (oldQrl) {
+        const chunk = oldQrl.$chunk$;
+        const now = Date.now();
+        const bustUrl = chunk.includes('?') ? chunk + '&t=' + now : chunk + '?t=' + now;
+        const freshQrl = qrl(bustUrl, oldQrl.$symbol$);
+        freshQrl.$container$ = container;
+        freshQrl.dev = oldQrl.dev;
+        container.setHostProp(host, OnRenderProp, freshQrl);
+    }
+    markVNodeDirty(container, host, 4 /* ChoreBits.COMPONENT */);
+};
+/** Sanitize path to a valid CSS-safe event name (no colons, dots, slashes). */
+const toEventName = (devPath) => 'qHmr' + devPath.replace(/[^a-zA-Z0-9_]/g, '_');
+let hmrQrl;
+/**
+ * Injected by the optimizer into component$ bodies in HMR mode. Registers a document event listener
+ * that triggers component re-render on HMR updates.
+ *
+ * @internal
+ */
+function _useHmr(devPath) {
+    const iCtx = tryGetInvokeContext();
+    if (!iCtx) {
+        return;
+    }
+    hmrQrl ||= inlinedQrl(_hmr, '_hmr');
+    // The event name must be CSS-attribute-safe (no colons, dots) because
+    // the qwikloader uses querySelectorAll('[q-d\\:eventName]') to find handlers.
+    useOnDocument(toEventName(devPath), hmrQrl);
+}
+
 let loading = Promise.resolve();
 const inflate = (container, target, typeId, data) => {
     if (typeId === 0 /* TypeIds.Plain */) {
@@ -12301,7 +12506,7 @@ const makeResolveFunction = (qrl, symbolFn) => {
         symbolRef = maybeThen(importP, (resolved) => {
             // We memoize the result on the symbolFn
             // Make sure not to memoize the wrapped function!
-            if (symbolFn) {
+            if (!isDev && symbolFn) {
                 symbolFn[symbol] = resolved;
             }
             return (symbolRef = qrl.resolved = bindCaptures(qrl, resolved));
@@ -13231,156 +13436,6 @@ const _useStyles = (styleQrl, transform, scoped) => {
     return styleId;
 };
 
-// <docs markdown="../readme.md#useOn">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useOn instead and run `pnpm docs.sync`)
-/**
- * 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.
- *
- * @public
- * @see `useOn`, `useOnWindow`, `useOnDocument`.
- */
-// </docs>
-const useOn = (event, eventQrl) => {
-    _useOn("q-e:" /* EventNameHtmlScope.on */, event, eventQrl);
-};
-// <docs markdown="../readme.md#useOnDocument">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useOnDocument instead and run `pnpm docs.sync`)
-/**
- * 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.
- *
- * @public
- * @see `useOn`, `useOnWindow`, `useOnDocument`.
- *
- * ```tsx
- * function useScroll() {
- *   useOnDocument(
- *     'scroll',
- *     $((event) => {
- *       console.log('body scrolled', event);
- *     })
- *   );
- * }
- *
- * const Cmp = component$(() => {
- *   useScroll();
- *   return <div>Profit!</div>;
- * });
- * ```
- */
-// </docs>
-const useOnDocument = (event, eventQrl) => {
-    _useOn("q-d:" /* EventNameHtmlScope.document */, event, eventQrl);
-};
-// <docs markdown="../readme.md#useOnWindow">
-// !!DO NOT EDIT THIS COMMENT DIRECTLY!!!
-// (edit ../readme.md#useOnWindow instead and run `pnpm docs.sync`)
-/**
- * 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.
- *
- * @public
- * @see `useOn`, `useOnWindow`, `useOnDocument`.
- *
- * ```tsx
- * function useAnalytics() {
- *   useOnWindow(
- *     'popstate',
- *     $((event) => {
- *       console.log('navigation happened', event);
- *       // report to analytics
- *     })
- *   );
- * }
- *
- * const Cmp = component$(() => {
- *   useAnalytics();
- *   return <div>Profit!</div>;
- * });
- * ```
- */
-// </docs>
-const useOnWindow = (event, eventQrl) => {
-    _useOn("q-w:" /* EventNameHtmlScope.window */, event, eventQrl);
-};
-const _useOn = (prefix, eventName, eventQrl) => {
-    const { isAdded, addEvent } = useOnEventsSequentialScope();
-    if (isAdded) {
-        return;
-    }
-    if (eventQrl) {
-        if (Array.isArray(eventName)) {
-            for (const event of eventName) {
-                addEvent(prefix + fromCamelToKebabCase(event), eventQrl);
-            }
-        }
-        else {
-            addEvent(prefix + fromCamelToKebabCase(eventName), eventQrl);
-        }
-    }
-};
-/**
- * This hook is like the `useSequentialScope` but it is specifically for `useOn`. This is needed
- * because we want to execute the `useOn` hooks only once and store the event listeners on the host
- * element. From Qwik V2 the component is rerunning when the promise is thrown, so we need to make
- * sure that the event listeners are not added multiple times.
- *
- * - The event listeners are stored in the `USE_ON_LOCAL` property.
- * - The `USE_ON_LOCAL_SEQ_IDX` is used to keep track of the index of the hook that calls this.
- * - The `USE_ON_LOCAL_FLAGS` is used to keep track of whether the event listener has been added or
- *   not.
- */
-const useOnEventsSequentialScope = () => {
-    const iCtx = useInvokeContext();
-    const hostElement = iCtx.$hostElement$;
-    const host = hostElement;
-    let onMap = iCtx.$container$.getHostProp(host, USE_ON_LOCAL);
-    if (onMap === null) {
-        onMap = {};
-        iCtx.$container$.setHostProp(host, USE_ON_LOCAL, onMap);
-    }
-    let seqIdx = iCtx.$container$.getHostProp(host, USE_ON_LOCAL_SEQ_IDX);
-    if (seqIdx === null) {
-        seqIdx = 0;
-    }
-    iCtx.$container$.setHostProp(host, USE_ON_LOCAL_SEQ_IDX, seqIdx + 1);
-    let addedFlags = iCtx.$container$.getHostProp(host, USE_ON_LOCAL_FLAGS);
-    if (addedFlags === null) {
-        addedFlags = [];
-        iCtx.$container$.setHostProp(host, USE_ON_LOCAL_FLAGS, addedFlags);
-    }
-    while (addedFlags.length <= seqIdx) {
-        addedFlags.push(false);
-    }
-    const addEvent = (eventName, eventQrl) => {
-        addedFlags[seqIdx] = true;
-        let events = onMap[eventName];
-        if (!events) {
-            onMap[eventName] = events = [];
-        }
-        events.push(eventQrl);
-    };
-    return {
-        isAdded: addedFlags[seqIdx],
-        addEvent,
-    };
-};
-
 const getSignal = (initialState) => {
     const value = isFunction(initialState) && !isQwikComponent(initialState)
         ? invoke(undefined, initialState)
@@ -13855,5 +13910,5 @@ if (import.meta.hot) {
     });
 }
 
-export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _regSymbol, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, scheduleTask as _task, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
+export { $, Fragment, NoSerializeSymbol, PrefetchGraph, PrefetchServiceWorker, RenderOnce, Resource, SSRComment, SSRRaw, SSRStream, SSRStreamBlock, SerializerSymbol, SkipRender, Slot, _CONST_PROPS, DomContainer as _DomContainer, _EFFECT_BACK_REF, EMPTY_ARRAY as _EMPTY_ARRAY, EMPTY_OBJ as _EMPTY_OBJ, _IMMUTABLE, _SharedContainer, SubscriptionData as _SubscriptionData, _UNINITIALIZED, _VAR_PROPS, _captures, _chk, createQRL as _createQRL, _deserialize, _dumpState, _executeSsrChores, _fnSignal, _getConstProps, _getContextContainer, _getContextEvent, _getContextHostElement, getDomContainer as _getDomContainer, _getQContainerElement, _getVarProps, _hasStoreEffects, _hmr, isJSXNode as _isJSXNode, isStore as _isStore, isStringifiable as _isStringifiable, isTask as _isTask, _jsxBranch, _jsxC, _jsxQ, _jsxS, _jsxSorted, _jsxSplit, mapApp_findIndx as _mapApp_findIndx, mapArray_get as _mapArray_get, mapArray_set as _mapArray_set, _noopQrl, _noopQrlDEV, preprocessState as _preprocessState, _qrlSync, qrlToString as _qrlToString, _regSymbol, _res, _resolveContextWithoutSequentialScope, _restProps, _rsc, _run, _serialize, setEvent as _setEvent, scheduleTask as _task, _useHmr, _val, verifySerializable as _verifySerializable, vnode_ensureElementInflated as _vnode_ensureElementInflated, vnode_getAttrKeys as _vnode_getAttrKeys, vnode_getFirstChild as _vnode_getFirstChild, vnode_isMaterialized as _vnode_isMaterialized, vnode_isTextVNode as _vnode_isTextVNode, vnode_isVirtualVNode as _vnode_isVirtualVNode, vnode_toString as _vnode_toString, _waitUntilRendered, _walkJSX, _wrapProp, _wrapSignal, component$, componentQrl, createAsync$, createAsyncSignal as createAsyncQrl, createComputed$, createComputedSignal as createComputedQrl, createContextId, h as createElement, createSerializer$, createSerializerSignal as createSerializerQrl, createSignal, event$, eventQrl, forceStoreEffects, getDomContainer, getLocale, getPlatform, h, implicit$FirstArg, inlinedQrl, inlinedQrlDEV, isSignal, jsx, jsxDEV, jsxs, noSerialize, qrl, qrlDEV, render, setPlatform, sync$, untrack, unwrapStore, useAsync$, useAsyncQrl, useComputed$, useComputedQrl, useConstant, useContext, useContextProvider, useErrorBoundary, useId, useLexicalScope, useOn, useOnDocument, useOnWindow, useResource$, useResourceQrl, useSerializer$, useSerializerQrl, useServerData, useSignal, useStore, useStyles$, useStylesQrl, useStylesScoped$, useStylesScopedQrl, useTask$, useTaskQrl, useVisibleTask$, useVisibleTaskQrl, version, withLocale };
 //# sourceMappingURL=core.mjs.map