Empty fn to noop

.changeset/big-rocks-roll.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+FEAT: The optimizer now hoists QRLs without captures to the module scope. This means that only one instance of the QRL will be created.

.changeset/big-rocks-rumble.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+FEAT: The optimizer will now extract captures from QRL event handlers and move them to their string tag. This allows moving the QRL to the module scope, giving better performance.

.changeset/big-rocks-start.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+FEAT: The optimizer can now handle self-references. This means that e.g. an `AsyncSignal` can write to itself.

.changeset/eighty-pandas-write.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': minor
+---
+
+FEAT: the optimizer can now detect empty QRL segments and replace them with a more efficient noopQrl. This means that for example, you can put code meant only for the server inside `if (isServer)` blocks and they will not cause an empty QRL to be downloaded. `event$()` is therefore no longer needed.

AGENTS.md

@@ -40,25 +40,25 @@ Prefer `pnpm build --qwik --qwikrouter --dev` to build qwik and qwik-city faster
 
 ## Key Commands
 
-| Task                     | Command                                | Notes                                                                                                                                                     |
-| ------------------------ | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Install**              | `pnpm install`                         |                                                                                                                                                           |
-| **Build (no Rust)**      | `pnpm build.local`                     | For a fresh start                                                                                                                                         |
-| **Build (with Rust)**    | `pnpm build.full`                      | Only for optimizer changes                                                                                                                                |
-| **Build core only**      | `pnpm build.core`                      | Fast — just Qwik + Router + types                                                                                                                         |
-| **Dev rebuild**          | `pnpm build --dev --qwik --qwikrouter` | Very fast iterative rebuild                                                                                                                               |
-| **Watch mode**           | `pnpm build.watch`                     | Rebuilds on change                                                                                                                                        |
-| **Unit tests**           | `pnpm vitest run`                      | Vitest — runs `packages/**/*.unit.{ts,tsx}` and `*.spec.{ts,tsx}`, or specify a single file. Add `-u` to update snapshots. **NEVER use `pnpm test.unit`** |
-| **E2E tests (Chromium)** | `pnpm test.e2e.chromium`               | Playwright - always run the dev rebuild first!                                                                                                            |
-| **E2E tests (Router)**   | `pnpm test.e2e.router`                 | Router-specific E2E - always run the dev rebuild first!                                                                                                   |
-| **Lint**                 | `pnpm lint`                            | ESLint + Prettier + Rust lint                                                                                                                             |
-| **Lint fix**             | `pnpm lint.fix`                        | Auto-fix ESLint issues                                                                                                                                    |
-| **Format**               | `pnpm fmt`                             | Prettier + syncpack                                                                                                                                       |
-| **Type check**           | `pnpm tsc.check`                       | Full TypeScript check                                                                                                                                     |
-| **Update API docs**      | `pnpm api.update`                      | Regenerates public API `.md` files                                                                                                                        |
-| **Create changeset**     | `pnpm change`                          | Interactive — creates `.changeset/*.md`                                                                                                                   |
-| **Dev server**           | `pnpm serve`                           | Port 3300                                                                                                                                                 |
-| **Docs dev**             | `pnpm docs.dev`                        | Documentation site                                                                                                                                        |
+| Task                     | Command                  | Notes                                                                                                                                                     |
+| ------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Install**              | `pnpm install`           |                                                                                                                                                           |
+| **Build (no Rust)**      | `pnpm build.local`       | For a fresh start                                                                                                                                         |
+| **Build (with Rust)**    | `pnpm build.full`        | Only for optimizer changes                                                                                                                                |
+| **Build core only**      | `pnpm build.core`        | Fast — just Qwik + Router + types                                                                                                                         |
+| **Dev rebuild**          | `pnpm build.core.dev`    | Very fast iterative rebuild                                                                                                                               |
+| **Watch mode**           | `pnpm build.watch`       | Rebuilds on change                                                                                                                                        |
+| **Unit tests**           | `pnpm vitest run`        | Vitest — runs `packages/**/*.unit.{ts,tsx}` and `*.spec.{ts,tsx}`, or specify a single file. Add `-u` to update snapshots. **NEVER use `pnpm test.unit`** |
+| **E2E tests (Chromium)** | `pnpm test.e2e.chromium` | Playwright - always run the dev rebuild first!                                                                                                            |
+| **E2E tests (Router)**   | `pnpm test.e2e.router`   | Router-specific E2E - always run the dev rebuild first!                                                                                                   |
+| **Lint**                 | `pnpm lint`              | ESLint + Prettier + Rust lint                                                                                                                             |
+| **Lint fix**             | `pnpm lint.fix`          | Auto-fix ESLint issues                                                                                                                                    |
+| **Format**               | `pnpm fmt`               | Prettier + syncpack                                                                                                                                       |
+| **Type check**           | `pnpm tsc.check`         | Full TypeScript check                                                                                                                                     |
+| **Update API docs**      | `pnpm api.update`        | Regenerates public API `.md` files                                                                                                                        |
+| **Create changeset**     | `pnpm change`            | Interactive — creates `.changeset/*.md`                                                                                                                   |
+| **Dev server**           | `pnpm serve`             | Port 3300                                                                                                                                                 |
+| **Docs dev**             | `pnpm docs.dev`          | Documentation site                                                                                                                                        |
 
 ### Running a Single Test File
 

package.json

@@ -189,6 +189,7 @@
     "build.cli": "node --require ./scripts/runBefore.ts scripts/index.ts --cli --dev",
     "build.cli.prod": "node --require ./scripts/runBefore.ts scripts/index.ts --cli",
     "build.core": "node --require ./scripts/runBefore.ts scripts/index.ts --tsc --qwik --insights --qwikrouter --api --platform-binding",
+    "build.core.dev": "node --require ./scripts/runBefore.ts scripts/index.ts --qwik --insights --qwikrouter --platform-binding --dev",
     "build.eslint": "node --require ./scripts/runBefore.ts scripts/index.ts --eslint",
     "build.full": "node --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding --wasm",
     "build.local": "node --require ./scripts/runBefore.ts scripts/index.ts --tsc --tsc-docs --qwik --insights --supabaseauthhelpers --api --eslint --qwikrouter --qwikworker --qwikreact --cli --platform-binding-wasm-copy",

packages/docs/src/routes/(blog)/blog/components/mdx/article-block.tsx

@@ -9,7 +9,7 @@ export const ArticleBlock = component$<Props>(({ authorLink }) => {
   const location = useLocation();
   const { frontmatter } = useDocumentHead();
   const article = blogArticles.find(({ path }) => path === location.url.pathname);
-  const authorLinks = frontmatter.authors.map((author: string) => authors[author].socialLink);
+  const authorLinks = frontmatter.authors?.map((author: string) => authors[author].socialLink);
 
   return (
     <div class="docs">

packages/docs/src/routes/docs/(qwik)/core/state/index.mdx

@@ -352,20 +352,18 @@ As we see in the example above, `useAsync$()` returns an `AsyncSignal<T>` object
 #### Channel example
 
 In this example, we use `useAsync$()` to get updates from a server using Server-Sent Events (SSE). Note that it writes to its own value, updating its subscribers.
-To be able to refer to itself, the signal needs to be in an object.
 
 ```tsx
 import { component$, useAsync$ } from '@qwik.dev/core';
 
 export default component$(() => {
-  const _ref = {} as { state: AsyncSignal<string> };
-  _ref.state = useAsync$<string[]>(
+  const state = useAsync$<string[]>(
     ({ track, abortSignal }) => {
       const url = new URL('/api/state-channel');
       const eventSource = new EventSource(url);
 
       eventSource.onmessage = (event) => {
-        _ref.state.value = event.data;
+        state.value = event.data;
       };
 
       abortSignal.addEventListener('abort', () => {
@@ -377,7 +375,6 @@ export default component$(() => {
     // Close the channel as soon as there are no subscribers
     { eagerCleanup: true }
   );
-  const state = _ref.state;
 
   return <div>Current state is: {state.value}</div>;
 });

packages/qwik/src/core/client/vnode-diff.ts

@@ -543,7 +543,7 @@ function descendContentToProject(
 ) {
   const projectionChildren = Array.isArray(children) ? children : [children];
   const createProjectionJSXNode = (slotName: string) => {
-    return new JSXNodeImpl(Projection, null, null, [], slotName);
+    return new JSXNodeImpl(Projection, null, null, [], 0, slotName);
   };
 
   const projections: Array<string | JSXNodeInternal> = [];

packages/qwik/src/core/reactive-primitives/cleanup.unit.tsx

@@ -307,7 +307,7 @@ describe('cleanup', () => {
         const vnode = vnode_newVirtual();
         vnode_setProp(vnode, ELEMENT_SEQ, []);
 
-        const jsxNode = new JSXNodeImpl('div', { name: 'John', age: 30 }, null, null, 0, false);
+        const jsxNode = new JSXNodeImpl('div', { name: 'John', age: 30 }, null, null, 0, 0, false);
         const handler = new PropsProxyHandler(jsxNode);
         const props = new Proxy({}, handler);
         const effect = new EffectSubscription(vnode, EffectProperty.VNODE);
@@ -335,7 +335,7 @@ describe('cleanup', () => {
         const vnode = vnode_newVirtual();
         vnode_setProp(vnode, ELEMENT_SEQ, []);
 
-        const jsxNode = new JSXNodeImpl('div', { name: 'John' }, null, null, 0, false);
+        const jsxNode = new JSXNodeImpl('div', { name: 'John' }, null, null, 0, 0, false);
         const props = new Proxy({}, new PropsProxyHandler(jsxNode));
         const effect = new EffectSubscription(vnode, EffectProperty.VNODE);
 

packages/qwik/src/core/shared/component-execution.ts

@@ -329,5 +329,5 @@ function injectPlaceholderElement(
 
 /** @returns An empty <script> element for adding qwik metadata attributes to */
 function createPlaceholderScriptNode(): JSXNodeInternal<string> {
-  return new JSXNodeImpl('script', null, { hidden: '' }, null, null);
+  return new JSXNodeImpl('script', null, { hidden: '' }, null, 0, null);
 }

packages/qwik/src/core/shared/error/error.ts

@@ -12,7 +12,7 @@ export const codeToText = (code: number, ...parts: any[]): string => {
       'Only primitive and object literals can be serialized. {{0}}', // 3
       'You can render over a existing q:container. Skipping render().', // 4
       'QRL is not a function', // 5
-      'Dynamic import not found', // 6
+      'Dynamic import {{0}} not found', // 6
       'Unknown type argument', // 7
       `Actual value for useContext({{0}}) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.`, // 8
       "Invoking 'use*()' method outside of invocation context.", // 9

packages/qwik/src/core/shared/jsx/jsx-internal.ts

@@ -41,7 +41,7 @@ export const _jsxSorted = <T>(
   key: string | number | null | undefined,
   dev?: DevJSX
 ): JSXNodeInternal<T> => {
-  return new JSXNodeImpl(type, varProps, constProps, children, key, false, dev);
+  return new JSXNodeImpl(type, varProps, constProps, children, flags, key, false, dev);
 };
 
 /**
@@ -259,7 +259,7 @@ export const _jsxSplit = <T extends string | FunctionComponent<any>>(
       }
     }
   }
-  return new JSXNodeImpl(type, varProps, constProps, children, key, toSort || true, dev);
+  return new JSXNodeImpl(type, varProps, constProps, children, flags, key, toSort || true, dev);
 };
 /** @internal @deprecated v1 compat */
 export const _jsxC = (type: any, mutable: any, _flags: any, key: any) => jsx(type, mutable, key);

packages/qwik/src/core/shared/jsx/jsx-node.ts

@@ -7,7 +7,7 @@ import { isObject } from '../utils/types';
 import { _chk, _val } from './bind-handlers';
 import { type Props } from './jsx-runtime';
 import { createPropsProxy, isPropsProxy } from './props-proxy';
-import type { DevJSX, FunctionComponent, JSXNodeInternal } from './types/jsx-node';
+import type { DevJSX, FunctionComponent, JSXNodeFlags, JSXNodeInternal } from './types/jsx-node';
 import type { JSXChildren } from './types/jsx-qwik-attributes';
 
 const _hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -26,6 +26,7 @@ export class JSXNodeImpl<T = unknown> implements JSXNodeInternal<T> {
     varProps: Props | null,
     constProps: Props | null,
     public children: JSXChildren,
+    public flags: JSXNodeFlags,
     key: string | number | null | undefined,
     toSort?: boolean,
     dev?: DevJSX

packages/qwik/src/core/shared/jsx/jsx-runtime.ts

@@ -84,5 +84,5 @@ export const RenderOnce: FunctionComponent<{
   children?: unknown;
   key?: string | number | null | undefined;
 }> = (props: any, key) => {
-  return new JSXNodeImpl(Virtual, null, null, props.children, key);
+  return new JSXNodeImpl(Virtual, null, null, props.children, 0, key);
 };

packages/qwik/src/core/shared/jsx/types/jsx-node.ts

@@ -27,6 +27,12 @@ export interface DevJSX {
   stack?: string;
 }
 
+export const enum JSXNodeFlags {
+  None = 0,
+  StaticSubtree = 1 << 1,
+  HasCapturedProps = 1 << 2,
+}
+
 /**
  * A JSX Node, an internal structure. You probably want to use `JSXOutput` instead.
  *
@@ -54,6 +60,8 @@ export interface JSXNodeInternal<
   toSort: boolean;
   /** The key property */
   key: string | null;
+  /** Flags */
+  flags: JSXNodeFlags;
   /**
    * Props that are not guaranteed shallow equal across runs.
    *

packages/qwik/src/core/shared/platform/platform.unit.ts

@@ -46,7 +46,7 @@ describe('core platform', () => {
         didThrow = true;
         // The error should be a QError with code for dynamic import failed
         expect(e.message).toMatch(/Code\(Q\d+\)/);
-        expect(e.message).toContain('Dynamic import not found');
+        expect(e.message).toContain(`Dynamic import ${symbolName} not found`);
       }
       expect(didThrow).toBe(true);
     });

packages/qwik/src/core/shared/qrl/qrl.ts

@@ -95,21 +95,25 @@ export const inlinedQrl = <T>(
   return createQRL<T>(null, symbolName, symbol, null, lexicalScopeCapture);
 };
 
+const noopFn = () => {};
+
 /** @internal */
-export const _noopQrl = <T>(
+export const _noopQrl = (
   symbolName: string,
-  lexicalScopeCapture?: Readonly<unknown[]>
-): QRL<T> => {
-  return createQRL<T>(null, symbolName, null, null, lexicalScopeCapture);
+  lexicalScopeCapture?: Readonly<unknown[]> | null,
+  isFn = false
+): QRLInternal<() => void> => {
+  return createQRL(isFn ? '_' : null, symbolName, isFn ? noopFn : null, null, lexicalScopeCapture);
 };
 
 /** @internal */
-export const _noopQrlDEV = <T>(
+export const _noopQrlDEV = (
   symbolName: string,
   opts: QRLDev,
-  lexicalScopeCapture?: Readonly<unknown[]>
-): QRL<T> => {
-  const newQrl = _noopQrl(symbolName, lexicalScopeCapture) as QRLInternal<T>;
+  lexicalScopeCapture?: Readonly<unknown[]> | null,
+  isFn = false
+): QRLInternal<() => void> => {
+  const newQrl = _noopQrl(symbolName, lexicalScopeCapture, isFn) as QRLInternal<() => void>;
   newQrl.dev = opts;
   return newQrl;
 };

packages/qwik/src/core/shared/serdes/allocate.ts

@@ -113,7 +113,7 @@ export const allocate = (container: DeserializeContainer, typeId: number, value:
     case TypeIds.FormData:
       return new FormData();
     case TypeIds.JSXNode:
-      return new JSXNodeImpl(null!, null, null, null, null);
+      return new JSXNodeImpl(null!, null, null, null, 0, null);
     case TypeIds.BigInt:
       return BigInt(value as string);
     case TypeIds.Set:

packages/qwik/src/core/shared/serdes/inflate.ts

@@ -275,7 +275,7 @@ export const inflate = (
       ];
       let owner = d[0];
       if (owner === _UNINITIALIZED) {
-        owner = new JSXNodeImpl(Fragment, d[1], d[2], null, null);
+        owner = new JSXNodeImpl(Fragment, d[1], d[2], null, 0, null);
         owner._proxy = propsProxy;
       }
       propsProxy[_OWNER] = owner;