((state) => {
+ return {
+ [UI]: (
+
+ {/* Map callback references handler - should NOT capture it */}
+ {state.items.map((item) => (
+
+ {item.name}
+
+ ))}
+
+ ),
+ };
+});
diff --git a/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.expected.tsx b/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.expected.tsx
new file mode 100644
index 000000000..ca4b50a42
--- /dev/null
+++ b/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.expected.tsx
@@ -0,0 +1,46 @@
+import * as __ctHelpers from "commontools";
+import { recipe, UI } from "commontools";
+interface State {
+ items: Array<{
+ price: number;
+ }>;
+ discount: number;
+}
+export default recipe({
+ type: "object",
+ properties: {
+ items: {
+ type: "array",
+ items: {
+ type: "object",
+ properties: {
+ price: {
+ type: "number"
+ }
+ },
+ required: ["price"]
+ }
+ },
+ discount: {
+ type: "number"
+ }
+ },
+ required: ["items", "discount"]
+} as const satisfies __ctHelpers.JSONSchema, (state: State) => {
+ return {
+ [UI]: (
+ {state.items.map((item) => ({__ctHelpers.derive({
+ item: {
+ price: item.price
+ },
+ state: {
+ discount: state.discount
+ }
+ }, ({ item, state }) => item.price * state.discount)}))}
+
),
+ };
+});
+// @ts-ignore: Internals
+function h(...args: any[]) { return __ctHelpers.h.apply(null, args); }
+// @ts-ignore: Internals
+h.fragment = __ctHelpers.h.fragment;
diff --git a/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.input.tsx b/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.input.tsx
new file mode 100644
index 000000000..d40767aa4
--- /dev/null
+++ b/packages/ts-transformers/test/fixtures/closures/map-single-capture-no-name.input.tsx
@@ -0,0 +1,19 @@
+///
+import { recipe, UI } from "commontools";
+
+interface State {
+ items: Array<{ price: number }>;
+ discount: number;
+}
+
+export default recipe((state: State) => {
+ return {
+ [UI]: (
+
+ {state.items.map((item) => (
+ {item.price * state.discount}
+ ))}
+
+ ),
+ };
+});
diff --git a/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.expected.tsx b/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.expected.tsx
new file mode 100644
index 000000000..c461ca0a6
--- /dev/null
+++ b/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.expected.tsx
@@ -0,0 +1,81 @@
+import * as __ctHelpers from "commontools";
+import { recipe, UI } from "commontools";
+interface State {
+ items: Array<{
+ price: number;
+ }>;
+ discount: number;
+}
+export default recipe({
+ type: "object",
+ properties: {
+ items: {
+ type: "array",
+ items: {
+ type: "object",
+ properties: {
+ price: {
+ type: "number"
+ }
+ },
+ required: ["price"]
+ }
+ },
+ discount: {
+ type: "number"
+ }
+ },
+ required: ["items", "discount"]
+} as const satisfies __ctHelpers.JSONSchema, (state) => {
+ return {
+ [UI]: (
+ {state.items.mapWithPattern(__ctHelpers.recipe({
+ $schema: "https://json-schema.org/draft/2020-12/schema",
+ type: "object",
+ properties: {
+ element: {
+ type: "object",
+ properties: {
+ price: {
+ type: "number"
+ }
+ },
+ required: ["price"]
+ },
+ params: {
+ type: "object",
+ properties: {
+ state: {
+ type: "object",
+ properties: {
+ discount: {
+ type: "number",
+ asOpaque: true
+ }
+ },
+ required: ["discount"]
+ }
+ },
+ required: ["state"]
+ }
+ },
+ required: ["element", "params"]
+ } as const satisfies __ctHelpers.JSONSchema, ({ element: item, params: { state } }) => ({__ctHelpers.derive({
+ item: {
+ price: item.price
+ },
+ state: {
+ discount: state.discount
+ }
+ }, ({ item, state }) => item.price * state.discount)})), {
+ state: {
+ discount: state.discount
+ }
+ })}
+
),
+ };
+});
+// @ts-ignore: Internals
+function h(...args: any[]) { return __ctHelpers.h.apply(null, args); }
+// @ts-ignore: Internals
+h.fragment = __ctHelpers.h.fragment;
diff --git a/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.input.tsx b/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.input.tsx
new file mode 100644
index 000000000..6431c01ac
--- /dev/null
+++ b/packages/ts-transformers/test/fixtures/closures/map-single-capture-with-type-arg-no-name.input.tsx
@@ -0,0 +1,19 @@
+///
+import { recipe, UI } from "commontools";
+
+interface State {
+ items: Array<{ price: number }>;
+ discount: number;
+}
+
+export default recipe((state) => {
+ return {
+ [UI]: (
+
+ {state.items.map((item) => (
+ {item.price * state.discount}
+ ))}
+
+ ),
+ };
+});
\ No newline at end of file
diff --git a/packages/ts-transformers/test/fixtures/closures/map-with-array-param-no-name.expected.tsx b/packages/ts-transformers/test/fixtures/closures/map-with-array-param-no-name.expected.tsx
new file mode 100644
index 000000000..04f65d170
--- /dev/null
+++ b/packages/ts-transformers/test/fixtures/closures/map-with-array-param-no-name.expected.tsx
@@ -0,0 +1,33 @@
+import * as __ctHelpers from "commontools";
+import { cell, recipe, UI } from "commontools";
+export default recipe(true as const satisfies __ctHelpers.JSONSchema, (_state: any) => {
+ const items = cell([1, 2, 3, 4, 5]);
+ return {
+ [UI]: (
+ {items.mapWithPattern(__ctHelpers.recipe({
+ $schema: "https://json-schema.org/draft/2020-12/schema",
+ type: "object",
+ properties: {
+ element: {
+ type: "number"
+ },
+ index: {
+ type: "number"
+ },
+ array: true,
+ params: {
+ type: "object",
+ properties: {}
+ }
+ },
+ required: ["element", "params"]
+ } as const satisfies __ctHelpers.JSONSchema, ({ element: item, index: index, array: array, params: {} }) => (
+ Item {item} at index {index} of {array.length} total items
+
)), {})}
+
+ {items.map((item, index, array) => (
+
+ Item {item} at index {index} of {array.length} total items
+
+ ))}
+
+
Basic Ternary
+
{__ctHelpers.ifElse(state.isActive, "Active", "Inactive")}
+
{__ctHelpers.ifElse(state.hasPermission, "Authorized", "Denied")}
+
+
Ternary with Comparisons
+
{__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ count: state.count
+ } }, ({ state }) => state.count > 10), "High", "Low")}
+
{__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ score: state.score
+ } }, ({ state }) => state.score >= 90), "A", __ctHelpers.derive({ state: {
+ score: state.score
+ } }, ({ state }) => state.score >= 80 ? "B" : "C"))}
+
+ {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ count: state.count
+ } }, ({ state }) => state.count === 0), "Empty", __ctHelpers.derive({ state: {
+ count: state.count
+ } }, ({ state }) => state.count === 1
+ ? "Single"
+ : "Multiple"))}
+
+
+
Nested Ternary
+
+ {__ctHelpers.ifElse(state.isActive, __ctHelpers.derive({ state: {
+ isPremium: state.isPremium
+ } }, ({ state }) => (state.isPremium ? "Premium Active" : "Regular Active")), "Inactive")}
+
+
+ {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ userType: state.userType
+ } }, ({ state }) => state.userType === "admin"), "Admin", __ctHelpers.derive({ state: {
+ userType: state.userType
+ } }, ({ state }) => state.userType === "user"
+ ? "User"
+ : "Guest"))}
+
+
+
Complex Conditions
+
+ {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ isActive: state.isActive,
+ hasPermission: state.hasPermission
+ } }, ({ state }) => state.isActive && state.hasPermission), "Full Access", "Limited Access")}
+
+
+ {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ count: state.count
+ } }, ({ state }) => state.count > 0 && state.count < 10), "In Range", "Out of Range")}
+
+
+ {__ctHelpers.ifElse(__ctHelpers.derive({ state: {
+ isPremium: state.isPremium,
+ score: state.score
+ } }, ({ state }) => state.isPremium || state.score > 100), "Premium Features", "Basic Features")}
+
+
+
IfElse Component
+ {ifElse(state.isActive,
User is active with {state.count} items
,
User is inactive
)}
+
+ {ifElse(__ctHelpers.derive({ state: {
+ count: state.count
+ } }, ({ state }) => state.count > 5),
+ - Many items: {state.count}
+
,
Few items: {state.count}
)}
+
+
Basic Ternary
+
{state.isActive ? "Active" : "Inactive"}
+
{state.hasPermission ? "Authorized" : "Denied"}
+
+
Ternary with Comparisons
+
{state.count > 10 ? "High" : "Low"}
+
{state.score >= 90 ? "A" : state.score >= 80 ? "B" : "C"}
+
+ {state.count === 0
+ ? "Empty"
+ : state.count === 1
+ ? "Single"
+ : "Multiple"}
+
+
+
Nested Ternary
+
+ {state.isActive
+ ? (state.isPremium ? "Premium Active" : "Regular Active")
+ : "Inactive"}
+
+
+ {state.userType === "admin"
+ ? "Admin"
+ : state.userType === "user"
+ ? "User"
+ : "Guest"}
+
+
+
Complex Conditions
+
+ {state.isActive && state.hasPermission
+ ? "Full Access"
+ : "Limited Access"}
+
+
+ {state.count > 0 && state.count < 10 ? "In Range" : "Out of Range"}
+
+
+ {state.isPremium || state.score > 100
+ ? "Premium Features"
+ : "Basic Features"}
+
+
+
IfElse Component
+ {ifElse(
+ state.isActive,
+
User is active with {state.count} items
,
+
User is inactive
,
+ )}
+
+ {ifElse(
+ state.count > 5,
+
+ - Many items: {state.count}
+
,
+
Few items: {state.count}
,
+ )}
+
+ {__ctHelpers.derive({
+ showList: showList,
+ items: items
+ }, ({ showList, items }) => showList && (
+ {items.map((item) => (
+ {__ctHelpers.derive({ item: {
+ name: item.name
+ } }, ({ item }) => item.name && {item.name})}
+
))}
+
))}
+
+ {showList && (
+
+ {items.map((item) => (
+
+ {item.name && {item.name}}
+
+ ))}
+
+ )}
+
+ {__ctHelpers.derive(people, ({ people }) => people.length > 0 && (
+ {people.map((person) => (- {person.name}
))}
+
))}
+
+ {people.length > 0 && (
+
+ {people.map((person) => (
+ - {person.name}
+ ))}
+
+ )}
+