fix(transform): optimize && conditionals to use ifElse instead of derive #1966

mathpirate · 2025-10-27T22:56:42Z

CT-1005: Conditional expressions using && operator now generate ifElse calls instead of wrapping entire expression in derive. This optimization improves performance and readability.

Before:
{list.length > 0 &&

...

}
// Became: derive(list, list => list.length > 0 &&

...

)

After:
{list.length > 0 &&

...

}
// Becomes: ifElse(derive(list, list => list.length > 0),

...

, null)

Benefits:

Right-hand side (typically JSX) is not wrapped in derive callback
Clearer separation between predicate (wrapped) and consequent (unwrapped)
Aligns with existing ternary operator transformation pattern

Updates binary-expression emitter to detect && operator and apply ifElse optimization when left side contains opaque refs. Includes test fixture updates to reflect new expected behavior.

🤖 Generated with Claude Code

Summary by cubic

Optimized logical && and || in JSX to use when/unless helpers instead of deriving the whole expression. This preserves JavaScript short-circuit behavior, keeps JSX out of derive, and addresses CT-1005.

Refactors
- Emits when(derive(predicate), value) for && and unless(derive(condition), value) for || when the left side references opaque refs.
- Preserves false-branch semantics for && by returning the falsy left operand; falls back to deriving the full expression when the optimization doesn’t apply.
New Features
- Adds when(condition, value) and unless(condition, value) built-ins, exported in the API and implemented in the runner.
- Updates and adds test fixtures for && and ||, including non-JSX right-hand values.

^{Written for commit 6857e2b. Summary will update automatically on new commits.}

linear · 2025-10-27T22:56:44Z

CT-1005 condition && { } should use ifElse instead of derive

cubic-dev-ai

1 issue found across 5 files

Prompt for AI agents (all 1 issues)


Understand the root cause of the following 1 issues and fix them.


<file name="packages/ts-transformers/src/transformers/opaque-ref/emitters/binary-expression.ts">

<violation number="1" location="packages/ts-transformers/src/transformers/opaque-ref/emitters/binary-expression.ts:64">
The synthesized `ifElse` false branch returns `null`, but `a &amp;&amp; b` evaluates to the left operand when it is falsy. This changes results (e.g., `0 &amp;&amp; &lt;div/&gt;` now yields `null` instead of `0`). Please return the original left value when the predicate is false to preserve semantics.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-10-27T23:05:59Z

packages/ts-transformers/src/transformers/opaque-ref/emitters/binary-expression.ts

+        context.factory.createToken(ts.SyntaxKind.QuestionToken),
+        whenTrue,
+        context.factory.createToken(ts.SyntaxKind.ColonToken),
+        context.factory.createNull(),


The synthesized ifElse false branch returns null, but a && b evaluates to the left operand when it is falsy. This changes results (e.g., 0 && <div/> now yields null instead of 0). Please return the original left value when the predicate is false to preserve semantics.

Prompt for AI agents

Address the following comment on packages/ts-transformers/src/transformers/opaque-ref/emitters/binary-expression.ts at line 64: <comment>The synthesized `ifElse` false branch returns `null`, but `a && b` evaluates to the left operand when it is falsy. This changes results (e.g., `0 && <div/>` now yields `null` instead of `0`). Please return the original left value when the predicate is false to preserve semantics.</comment> <file context> @@ -6,16 +6,74 @@ import { + context.factory.createToken(ts.SyntaxKind.QuestionToken), + whenTrue, + context.factory.createToken(ts.SyntaxKind.ColonToken), + context.factory.createNull(), + ); + </file context>

✅ Addressed in 27e479f

seefeldb · 2025-10-28T21:08:14Z

Ah, what you could do is:

ifElse is already a wrapper around the underlying built-in which takes a 3-tuple!

So we can just add another that takes two parameters and calls the underlying ifElse factory with [a, b, a]. You could even make the || variant, although I'm not sure it's used in practice.

cubic-dev-ai

No issues found across 10 files

cubic-dev-ai

Reviewed changes from recent commits (found 1 issue).

1 issue found across 12 files

Prompt for AI agents (all 1 issues)


Understand the root cause of the following 1 issues and fix them.


<file name="packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx">

<violation number="1" location="packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx:108">
The inner derive already yields an OpaqueRef, so wrapping it in an outer derive produces an OpaqueRef&lt;OpaqueRef&gt; instead of the expected string fallback; drop the outer derive so the JSX receives a single OpaqueRef result.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-10-28T22:09:26Z

packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx

                  Go to Charm {__ctHelpers.derive(index, index => index + 1)}
                </ct-button>
-                <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => charm[NAME] || "Unnamed")}</span>
+                <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span>


The inner derive already yields an OpaqueRef, so wrapping it in an outer derive produces an OpaqueRef instead of the expected string fallback; drop the outer derive so the JSX receives a single OpaqueRef result.

Prompt for AI agents

Address the following comment on packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx at line 108: <comment>The inner derive already yields an OpaqueRef, so wrapping it in an outer derive produces an OpaqueRef<OpaqueRef> instead of the expected string fallback; drop the outer derive so the JSX receives a single OpaqueRef result.</comment> <file context> @@ -105,7 +105,7 @@ export default recipe("Charms Launcher", () => { Go to Charm {__ctHelpers.derive(index, index => index + 1)} </ct-button> - <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => charm[NAME] || "Unnamed")}</span> + <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span> </li>))} </ul>)} </file context>

Suggested change

<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span>

<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed")}</span>

cubic-dev-ai

Reviewed changes from recent commits (found 4 issues).

4 issues found across 12 files

Prompt for AI agents (all 4 issues)


Understand the root cause of the following 4 issues and fix them.


<file name="packages/ts-transformers/test/fixtures/jsx-expressions/logical-or-unless.input.tsx">

<violation number="1" location="packages/ts-transformers/test/fixtures/jsx-expressions/logical-or-unless.input.tsx:11">
Because `!items.length` becomes `true` when the list is empty, this `||` expression resolves to the boolean `true`, so the fallback never displays in the empty state and instead shows when items exist. Replace the left operand with `items.length` (or invert via ternary) so the fallback renders only when the list is empty.</violation>
</file>

<file name="packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx">

<violation number="1" location="packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx:11">
Passing the dynamic string directly to when() evaluates `user.name` eagerly, so the greeting never updates when the cell changes and can even read `undefined`. Wrap the consequent in a derive (or use ifElse) so the string recomputes reactively.</violation>

<violation number="2" location="packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx:14">
The numeric branch reads `user.age` eagerly before the predicate is true, so the value never updates and can access the cell while null. Keep the consequent lazy/reactive (e.g., wrap it in derive alongside the predicate) to preserve correct semantics.</violation>
</file>

<file name="packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx">

<violation number="1" location="packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx:108">
The derive callback now invokes __ctHelpers.derive on the already-resolved charm object, so we pass a plain object where an OpaqueRef is expected. This will throw or mis-wire subscriptions at runtime; please derive the property directly instead.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-10-28T22:11:33Z

packages/ts-transformers/test/fixtures/jsx-expressions/logical-or-unless.input.tsx

+    [UI]: (
+      <div>
+        {/* Pattern: falsy check || fallback */}
+        {!items.length || <span>List is empty</span>}


Because !items.length becomes true when the list is empty, this || expression resolves to the boolean true, so the fallback never displays in the empty state and instead shows when items exist. Replace the left operand with items.length (or invert via ternary) so the fallback renders only when the list is empty.

Prompt for AI agents

Address the following comment on packages/ts-transformers/test/fixtures/jsx-expressions/logical-or-unless.input.tsx at line 11: <comment>Because `!items.length` becomes `true` when the list is empty, this `||` expression resolves to the boolean `true`, so the fallback never displays in the empty state and instead shows when items exist. Replace the left operand with `items.length` (or invert via ternary) so the fallback renders only when the list is empty.</comment> <file context> @@ -0,0 +1,15 @@ + [UI]: ( + <div> + {/* Pattern: falsy check || fallback */} + {!items.length || <span>List is empty</span>} + </div> + ), </file context>

✅ Addressed in acd174a

cubic-dev-ai · 2025-10-28T22:11:33Z

packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx

+    return {
+        [UI]: (<div>
+        {/* Non-JSX right side: string template with complex expression */}
+        <p>{__ctHelpers.when(__ctHelpers.derive(user.name, _v1 => _v1.length > 0), `Hello, ${user.name}!`)}</p>


Passing the dynamic string directly to when() evaluates user.name eagerly, so the greeting never updates when the cell changes and can even read undefined. Wrap the consequent in a derive (or use ifElse) so the string recomputes reactively.

Prompt for AI agents

Address the following comment on packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx at line 11: <comment>Passing the dynamic string directly to when() evaluates `user.name` eagerly, so the greeting never updates when the cell changes and can even read `undefined`. Wrap the consequent in a derive (or use ifElse) so the string recomputes reactively.</comment> <file context> @@ -0,0 +1,21 @@ + return { + [UI]: (<div> + {/* Non-JSX right side: string template with complex expression */} + <p>{__ctHelpers.when(__ctHelpers.derive(user.name, _v1 => _v1.length > 0), `Hello, ${user.name}!`)}</p> + + {/* Non-JSX right side: number expression */} </file context>

cubic-dev-ai · 2025-10-28T22:11:34Z

packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx

+        <p>{__ctHelpers.when(__ctHelpers.derive(user.name, _v1 => _v1.length > 0), `Hello, ${user.name}!`)}</p>
+
+        {/* Non-JSX right side: number expression */}
+        <p>Age: {__ctHelpers.when(__ctHelpers.derive(user.age, _v1 => _v1 > 18), user.age)}</p>


The numeric branch reads user.age eagerly before the predicate is true, so the value never updates and can access the cell while null. Keep the consequent lazy/reactive (e.g., wrap it in derive alongside the predicate) to preserve correct semantics.

Prompt for AI agents

Address the following comment on packages/ts-transformers/test/fixtures/jsx-expressions/logical-and-non-jsx.expected.tsx at line 14: <comment>The numeric branch reads `user.age` eagerly before the predicate is true, so the value never updates and can access the cell while null. Keep the consequent lazy/reactive (e.g., wrap it in derive alongside the predicate) to preserve correct semantics.</comment> <file context> @@ -0,0 +1,21 @@ + <p>{__ctHelpers.when(__ctHelpers.derive(user.name, _v1 => _v1.length > 0), `Hello, ${user.name}!`)}</p> + + {/* Non-JSX right side: number expression */} + <p>Age: {__ctHelpers.when(__ctHelpers.derive(user.age, _v1 => _v1 > 18), user.age)}</p> + </div>), + }; </file context>

cubic-dev-ai · 2025-10-28T22:11:34Z

packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx

                  Go to Charm {__ctHelpers.derive(index, index => index + 1)}
                </ct-button>
-                <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => charm[NAME] || "Unnamed")}</span>
+                <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span>


The derive callback now invokes __ctHelpers.derive on the already-resolved charm object, so we pass a plain object where an OpaqueRef is expected. This will throw or mis-wire subscriptions at runtime; please derive the property directly instead.

Prompt for AI agents

Address the following comment on packages/ts-transformers/test/fixtures/jsx-expressions/opaque-ref-cell-map.expected.tsx at line 108: <comment>The derive callback now invokes __ctHelpers.derive on the already-resolved charm object, so we pass a plain object where an OpaqueRef is expected. This will throw or mis-wire subscriptions at runtime; please derive the property directly instead.</comment> <file context> @@ -105,7 +105,7 @@ export default recipe("Charms Launcher", () => { Go to Charm {__ctHelpers.derive(index, index => index + 1)} </ct-button> - <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => charm[NAME] || "Unnamed")}</span> + <span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span> </li>))} </ul>)} </file context>

Suggested change

<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span>

<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(charm[NAME], "Unnamed"))}</span>

cubic-dev-ai

No issues found across 2 files

seefeldb

looks good to me. i'm realizing reading this that we might need to add schema information to ifElse/when/unless. not 100% let's discuss. either way not a blocker to merge.

- Transform `condition && value` to `when(condition, value)` - Transform `condition || fallback` to `unless(condition, fallback)` - Add when() and unless() built-in functions to runner - Add comprehensive test fixtures for logical operator transformations - Add runtime unit tests for when/unless - Add integration pattern tests for when/unless operators 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

cubic-dev-ai bot reviewed Oct 27, 2025

View reviewed changes

mathpirate temporarily deployed to ci October 28, 2025 18:25 — with GitHub Actions Inactive

mathpirate temporarily deployed to ci October 28, 2025 19:21 — with GitHub Actions Inactive

cubic-dev-ai bot reviewed Oct 28, 2025

View reviewed changes

mathpirate temporarily deployed to ci October 28, 2025 22:04 — with GitHub Actions Inactive

mathpirate had a problem deploying to ci October 28, 2025 22:04 — with GitHub Actions Failure

cubic-dev-ai bot reviewed Oct 28, 2025

View reviewed changes

mathpirate temporarily deployed to ci October 29, 2025 22:16 — with GitHub Actions Inactive

mathpirate had a problem deploying to ci October 29, 2025 22:16 — with GitHub Actions Failure

mathpirate temporarily deployed to ci October 29, 2025 22:16 — with GitHub Actions Inactive

cubic-dev-ai bot reviewed Oct 29, 2025

View reviewed changes

mathpirate force-pushed the gideon/ct-1005-ifelse-for-logical-and branch from acd174a to f3d9ddd Compare December 1, 2025 20:07

mathpirate temporarily deployed to ci December 1, 2025 20:36 — with GitHub Actions Inactive

mathpirate had a problem deploying to ci December 1, 2025 20:36 — with GitHub Actions Failure

mathpirate temporarily deployed to ci December 1, 2025 20:36 — with GitHub Actions Inactive

mathpirate temporarily deployed to ci December 1, 2025 21:16 — with GitHub Actions Inactive

seefeldb approved these changes Dec 2, 2025

View reviewed changes

mathpirate temporarily deployed to ci December 2, 2025 22:57 — with GitHub Actions Inactive

mathpirate and others added 2 commits December 2, 2025 15:36

update fixtures to typecheck

6857e2b

mathpirate force-pushed the gideon/ct-1005-ifelse-for-logical-and branch from dcbc3e3 to 6857e2b Compare December 2, 2025 23:52

mathpirate temporarily deployed to ci December 2, 2025 23:57 — with GitHub Actions Inactive

mathpirate merged commit 03ee049 into main Dec 3, 2025
9 checks passed

mathpirate deleted the gideon/ct-1005-ifelse-for-logical-and branch December 3, 2025 00:18

	<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.derive(charm, charm => __ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed"))}</span>
	<span>Charm {__ctHelpers.derive(index, index => index + 1)}: {__ctHelpers.unless(__ctHelpers.derive(charm, charm => charm[NAME]), "Unnamed")}</span>

fix(transform): optimize && conditionals to use ifElse instead of derive #1966

fix(transform): optimize && conditionals to use ifElse instead of derive #1966

Uh oh!

Conversation

mathpirate commented Oct 27, 2025 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by cubic

Uh oh!

linear bot commented Oct 27, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seefeldb commented Oct 28, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

seefeldb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mathpirate commented Oct 27, 2025 •

edited by cubic-dev-ai bot

Loading

cubic-dev-ai bot Oct 27, 2025 •

edited

Loading

cubic-dev-ai bot Oct 28, 2025 •

edited

Loading

cubic-dev-ai bot Oct 28, 2025 •

edited

Loading

cubic-dev-ai bot Oct 28, 2025 •

edited

Loading

cubic-dev-ai bot Oct 28, 2025 •

edited

Loading

cubic-dev-ai bot Oct 28, 2025 •

edited

Loading