Fix && and || not short-circuiting in CSP evaluator

[joshhanley]

The Scenario

In an app running Livewire's CSP build, a single Flux::toast(...) call renders two toasts instead of one when the page uses a grouped toast setup.

<flux:toast.group position="top end">
    <flux:toast />
</flux:toast.group>

One toast appears correctly inside the group; a second appears separately, originating from the inner <ui-toast> element. Swapping the CSP build for the regular Livewire build makes it behave correctly.

The Problem

Flux's inner <ui-toast> guards against handling the toast-show event when nested inside a group with a short-circuit expression:

<ui-toast x-on:toast-show.document="! $el.closest('ui-toast-group') && $el.showToast($event.detail)" ...>

Under the regular Alpine build this works correctly: when $el.closest('ui-toast-group') returns the group, the expression short-circuits and showToast is never called. Under the CSP build it doesn't, because the BinaryExpression handler in packages/csp/src/parser.js evaluates both operands up front before applying the operator:

case 'BinaryExpression':
    const left = this.evaluate({ node: node.left, ... });
    const right = this.evaluate({ node: node.right, ... });

    switch (node.operator) {
        // ...
        case '&&': return left && right;
        case '||': return left || right;
    }

By the time left && right is computed, the right side has already run. Any && or || expression with a side effect on the right leaks that side effect, regardless of the left value.

The Solution

Wrap the right-hand evaluation in a function and only call it when short-circuiting doesn't apply:

case 'BinaryExpression':
    const left = this.evaluate({ node: node.left, ... });

    // Wrapped in a function so && and || can skip it when short-circuiting.
    const evalRight = () => this.evaluate({ node: node.right, ... });

    // Short-circuit && and || so side-effects on the right aren't evaluated when the result is already determined.
    if (node.operator === '&&') return left && evalRight();
    if (node.operator === '||') return left || evalRight();

    const right = evalRight();

    switch (node.operator) { ... }

Four new tests in tests/vitest/csp-evaluator.spec.js cover both the happy path (right side runs when needed) and the short-circuit path (right side does not run) for both && and ||.

Fixes livewire/flux#2571

[codeldev]

Any ETA on when this may get merged? I have a client live project waiting on this fix :) Thanks!