@wix/origami-lint 1.34.5 → 1.34.7

package/dist/rules/bindings.js

@@ -1,24 +1,30 @@
-import { RUNTIME_ONLY_BUILDERS, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_PACKAGE, SHARED_COMP_ID, bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isStructure, ownerOf, } from "../rules-api/index.js";
+import { BUILDERS, CALLBACK_PROP, EVENT_ATTRIBUTE, RESERVED_ENTRY_KEYS, RUNTIME_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, bare, getAttribute, getExpression, getKey, getCallbackKind, getName, getObject, getParamReadKind, getProperties, getProperty, isBound, isReservedAttribute, isStructure, ownerOf, } from "../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 /** The converter's reserved sources (identity.ts `isReservedRegistry`) and the DM's own `document`: no fn()/ctx() names. */
 const RESERVED_FOR_BINDINGS = ['runtime', 'interactReact', 'interact', 'motionPresets', 'menu', 'document', 'core'];
-/** The keys of a `bindings` object. */
-const BINDINGS_KEYS = ['props', 'visibility', 'states'];
+/** The key of a `bindings` object (parseJsx.ts bindingsIrOfExpression); the other two sections are written in `className` since converter 0.79. */
+const BINDINGS_KEY = 'props';
+const CLASS_NAME_SECTIONS = ['visibility', 'states'];
+/** A `className` term for a visibility: the viewer's utility class (reservedAttributes.ts CLASS_NAME_UTILITIES). */
+const VISIBILITY_PREFIX = 'wix-visibility-';
 const VISIBILITY_KEYS = ['collapsed', 'hidden'];
 const REMOVED = 'removed';
 const CTX_OPTIONS = ['from', 'placeholder'];
-const STATE_OPTIONS = ['kind', 'id', 'pseudoClass'];
 const BINDINGS_LIST = 'BindingsList';
 const STATIC_PREFIX = 'Static.';
+/** The types of an object the import reads as an argument's data item (decode.ts decodeDataRef); an object with no type and an `href` is a link. */
+const DATA_ITEM_TYPES = ['Builder.Image', 'Builder.Video', 'Builder.VectorArt', 'Builder.Audio', 'Builder.RichText', 'Builder.MenuItems', 'Builder.MenuItem', 'PageLink', 'ExternalLink',
+    'EmailLink', 'AnchorLink', 'DocumentLink', 'PhoneLink', 'DynamicPageLink', 'TextLink', 'LoginToWixLink', 'WhatsAppLink', 'AddressLink', 'TpaPageLink'];
 const PLACES = {
-    prop: { name: "a prop's binding", builders: ['ctx', 'fn', 'raw'], literals: false },
-    fnArg: { name: 'an `fn()` argument', builders: ['ctx', 'fn', 'raw'], literals: true },
-    isBinding: { name: "`is()`'s binding", builders: ['ctx', 'fn'], literals: false },
-    condition: { name: 'a condition', builders: ['is', 'all', 'ctx', 'fn', 'raw'], literals: true },
-    allItem: { name: 'an `all()` item', builders: ['is', 'ctx', 'fn', 'raw'], literals: true },
-    statesItem: { name: 'a `states` item', builders: ['state', 'raw'], literals: false },
+    prop: { name: "a prop's binding", builders: ['ctx', 'fn', 'raw', 'callback', 'map', 'shape'], literals: false },
+    fnArg: { name: 'an `fn()` argument', builders: ['ctx', 'fn', 'raw', 'callback', 'map', 'shape'], literals: true },
+    isBinding: { name: "`is()`'s binding", builders: ['ctx', 'fn', 'callback'], literals: false },
+    condition: { name: 'a condition', builders: ['is', 'all', 'ctx', 'fn', 'raw', 'callback'], literals: true },
+    allItem: { name: 'an `all()` item', builders: ['is', 'ctx', 'fn', 'raw', 'callback'], literals: true },
 };
 const PLAIN = 'a string, number or true / false';
+/** The builders whose value runs at render: a callback prop gets their value, not a function. */
+const RENDER_BUILDERS = ['ctx', 'fn', ...TRANSFORM_BUILDERS];
 export default defineRule({
     name: 'bindings',
     editors: ['studio2'],
@@ -47,13 +53,14 @@ function checkRemoveCondition(at) {
         condition(at, when, '`when`', true);
     removeTarget(at);
 }
-/** A component's builders, its `states` and `bindings`, and the props it binds as data attributes. */
+/** A component's builders, its callback props, its `bindings` and `className` conditions, and the props it binds as data attributes. */
 function checkComponentBindings(at) {
-    const { node } = at.input;
+    const { node, rulesApi } = at.input;
     builderInPlace(at);
-    statesAttribute(at, getAttribute(node, 'states'));
+    checkCallbackProps(at);
     bindingsAttribute(at, getAttribute(node, 'bindings'));
-    if (!hasData(node))
+    classNameAttribute(at, getAttribute(node, 'className'));
+    if (!rulesApi.hasDataAttributes(node))
         return;
     boundPropOnce(at);
     for (const [name, , value] of boundAttributes(node))
@@ -69,6 +76,9 @@ function checkEntryBindings(at, entry) {
     const bindings = getProperty(object, 'bindings');
     if (bindings)
         bindingsValue(entryAt, bindings.value, true);
+    const className = getObject(getProperty(object, 'className')?.value);
+    if (className)
+        classNameConditions(entryAt, className, '`className`');
     entryPropBoundOnce(entryAt, object);
     for (const [key, property] of boundEntryKeys(object))
         prop(entryAt, key, property.value, true);
@@ -84,7 +94,7 @@ function checkCallExpressionImports(input) {
         ctxSourceHasName(input, ctxHook);
 }
 /** Each builder's own row: the shape of its call, a key written twice in it. */
-const ROW_OF_BUILDER = { all: 'CONV-decode.ts:196', ctx: 'CONV-astValue.ts:276', fn: 'CONV-astValue.ts:287', is: 'CONV-decode.ts:172', raw: 'CONV-decode.ts:28', state: 'CONV-decode.ts:145' };
+const ROW_OF_BUILDER = { all: 'CONV-decode.ts:196', callback: 'CONV-astValue.ts:287', ctx: 'CONV-astValue.ts:276', fn: 'CONV-astValue.ts:287', is: 'CONV-decode.ts:172', raw: 'CONV-decode.ts:28' };
 const tracked = (message, row) => `${message.slice(0, -1)} (tracker ${row}).`;
 const say = ({ input }, node, message, row) => input.report({ loc: node.loc, message: tracked(message, row) });
 const textOf = ({ input }, node) => input.context.sourceCode.getText(node);
@@ -110,12 +120,9 @@ function removeTarget(at) {
         if (!value || builderOf(value, rulesApi) !== 'raw')
             continue;
         const item = getObject(value.arguments[0]);
-        const target = `${at.owner} wraps ${ownerOf(component)}, whose \`bindings\` are \`raw()\``;
-        if (!item || stringValue(getProperty(item, 'type')?.value) !== BINDINGS_LIST) {
-            say(at, value, `${target} of an item that isn't \`{ type: '${BINDINGS_LIST}', … }\`. Write the bindings as an object, or set ${REMOVED} in a ${BINDINGS_LIST} item instead of using \`<Remove>\`.`, 'CONV-decode.ts:296');
-        }
-        else if (setsRemoved(item)) {
-            say(at, value, `${target} of an item that already sets \`features.visibility.${REMOVED}\`. Keep only one of them.`, 'CONV-decode.ts:280');
+        // An item of another type is the bindings' own line (checkRawBindingsType).
+        if (item && stringValue(getProperty(item, 'type')?.value) === BINDINGS_LIST && setsRemoved(item)) {
+            say(at, value, `${at.owner} wraps ${ownerOf(component)}, whose \`bindings\` are \`raw()\` of an item that already sets \`features.visibility.${REMOVED}\`. Keep only one of them.`, 'CONV-decode.ts:280');
         }
     }
 }
@@ -125,6 +132,20 @@ function builderInPlace(at) {
         say(at, call, `\`${builderOf(call, rulesApi)}()\` on ${at.owner} is inside ${where}, where the import reads only plain values. Write a builder as the whole value of a data attribute (\`label={ctx(…)}\`) or of an elementProps entry key (\`navbar: { label: ctx(…) }\`), or in \`bindings\`.`, 'CONV-astValue.ts:98');
     }
 }
+/** A callback prop takes a function: the import reads it only in `bindings.props`, and there the site's runtime throws on anything but `callback()` (withOrigami). */
+function checkCallbackProps(at) {
+    const { node, rulesApi } = at.input;
+    for (const [name, attribute] of getCallbackAttributes(node)) {
+        say(at, attribute, `\`${name}\` on ${at.owner} is an attribute, which the import doesn't read for a callback prop. Bind it in \`bindings\` with \`callback()\`: \`bindings={{ props: { ${name}: callback(goHome) } }}\`.`, 'OUR-031');
+    }
+    if (!isWrappedByRuntime(node, rulesApi))
+        return;
+    for (const [name, value] of getBoundCallbacks(getAttribute(node, 'bindings'))) {
+        const what = runsAtRender(at, value);
+        if (what)
+            say(at, value, `\`bindings.props.${name}\` on ${at.owner} is ${what}, which runs at render and gives a value, not a function: the site's runtime throws on it. Write \`${name}: callback(goHome)\`.`, 'OUR-031');
+    }
+}
 function boundPropOnce(at) {
     const { node, rulesApi } = at.input;
     const bindings = getAttribute(node, 'bindings');
@@ -156,7 +177,7 @@ function bindingsAttribute(at, attribute) {
     else
         say(at, attribute, notBindings(at, attribute.value ? `\`${at.input.context.sourceCode.getText(attribute.value)}\`` : 'empty'), 'CONV-parseJsx.ts:700');
 }
-const notBindings = (at, what) => `\`bindings\` on ${at.owner} is ${what}. Write an object in place, \`bindings={{ props: {…}, visibility: {…}, states: {…} }}\`, or \`raw({…})\`.`;
+const notBindings = (at, what) => `\`bindings\` on ${at.owner} is ${what}. Write an object in place, \`bindings={{ props: {…} }}\`, or \`raw({…})\`.`;
 function bindingsValue(at, node, isEntry = false) {
     const value = bare(node);
     if (value.type === 'ObjectExpression')
@@ -167,6 +188,8 @@ function bindingsValue(at, node, isEntry = false) {
         if (hasDuplicateKey(at, value, 'raw') || !isRawWrittenOut(at, value))
             return;
         const object = bare(item);
+        if (!isEntry)
+            checkRawBindingsType(at, value, object);
         if (!isEntry && setsRemoved(object))
             say(at, value, `${at.owner} sets \`features.visibility.${REMOVED}\` in its \`raw()\` bindings. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
         const propertyMap = getProperty(object, 'properties');
@@ -179,7 +202,7 @@ function bindingsValue(at, node, isEntry = false) {
         }
     }
     else if (builder) {
-        say(at, value, `\`bindings\` on ${at.owner} is a \`${builder}()\` call. Write an object and put the call under props, visibility or states, or use \`raw({…})\`.`, 'CONV-decode.ts:263');
+        say(at, value, `\`bindings\` on ${at.owner} is a \`${builder}()\` call. Write an object and put the call under props, or use \`raw({…})\`.`, 'CONV-decode.ts:263');
     }
     else if (!isCallByName(value)) {
         say(at, value, notBindings(at, describeIn(at, value)), 'CONV-parseJsx.ts:700');
@@ -191,15 +214,27 @@ function bindingsObject(at, bindings, isEntry) {
             : property.computed ? 'a computed key'
                 : property.key.type === 'Literal' && typeof property.key.value === 'string' ? `the quoted key \`${textOf(at, property.key)}\``
                     : property.key.type !== 'Identifier' ? `the key \`${textOf(at, property.key)}\``
-                        : BINDINGS_KEYS.includes(property.key.name) ? null
+                        : property.key.name === BINDINGS_KEY || CLASS_NAME_SECTIONS.includes(property.key.name) ? null
                             : `the key \`${property.key.name}\``;
         if (what)
-            say(at, property, `\`bindings\` on ${at.owner} has ${what}. Use only the keys props, visibility and states, written as plain names.`, 'CONV-parseJsx.ts:708');
+            say(at, property, `\`bindings\` on ${at.owner} has ${what}. Use only the key props, written as a plain name.`, 'CONV-parseJsx.ts:708');
+        else if (getKey(property) === BINDINGS_KEY)
+            section(at, BINDINGS_KEY, property.value);
         else
-            section(at, property.key.name, property.value, isEntry);
+            classNameSection(at, property, isEntry);
     }
 }
-function section(at, name, node, isEntry) {
+/** `bindings.visibility` and `bindings.states`: the import reads them in `className` since converter 0.79, and `removed` in `<Remove when>` (parseJsx.ts assertNoClassNameSections). */
+function classNameSection(at, property, isEntry) {
+    const key = getKey(property);
+    const removed = key === 'visibility' && !isEntry && getObject(property.value) && getProperty(getObject(property.value), REMOVED);
+    if (removed)
+        return say(at, removed, `${at.owner} sets \`visibility.${REMOVED}\` in its \`bindings\`. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
+    const term = key === 'states' ? '{ hover: is(…) }' : "{ 'wix-visibility-hidden': is(…) }";
+    const fix = isEntry ? `in the entry's \`className: ${term}\`` : `as a \`className\` term: \`className={['comp-x', ${term}]}\``;
+    say(at, property, `\`bindings.${key}\` on ${at.owner} isn't read: the import reads states and visibility in \`className\`. Write each condition ${fix}.`, 'CONV-parseJsx.ts:708');
+}
+function section(at, name, node) {
     const fix = `Write an object of \`key: value\` entries: \`${name}: { label: … }\`.`;
     const value = bare(node);
     if (value.type !== 'ObjectExpression')
@@ -216,23 +251,36 @@ function section(at, name, node, isEntry) {
             say(at, property, `\`bindings.${name}\` on ${at.owner} ${problem}. ${fix}`, 'CONV-parseJsx.ts:669');
             continue;
         }
+        prop(at, getKey(property), property.value, false);
+    }
+}
+/** `className={['comp-x', 'open', { hover: is(…) }]}`: each object term's key holds a condition, as `bindings.states` and `bindings.visibility` did (parseJsx.ts mergeClassName). */
+function classNameAttribute(at, attribute) {
+    const value = getExpression(attribute);
+    if (value?.type !== 'ArrayExpression')
+        return;
+    for (const term of value.elements.slice(1)) {
+        if (term?.type === 'ObjectExpression')
+            classNameConditions(at, term, '`className`');
+    }
+}
+function classNameConditions(at, terms, where) {
+    for (const property of getProperties(terms)) {
         const key = getKey(property);
-        const where = `\`bindings.${name}.${key}\``;
-        if (name === 'props')
-            prop(at, key, property.value, false);
-        else if (name === 'visibility' && key === REMOVED && !isEntry)
-            say(at, property, `${at.owner} sets \`visibility.${REMOVED}\` in its \`bindings\`. Move the condition out, and wrap the component in \`<Remove when={…}>\`.`, 'CONV-decode.ts:280');
-        else if (name === 'visibility' && key !== REMOVED && !VISIBILITY_KEYS.includes(key))
-            say(at, property, `\`bindings.visibility\` on ${at.owner} has the key \`${key}\`. Use \`collapsed\` or \`hidden\`.`, 'CONV-decode.ts:221');
+        if (key === null)
+            continue;
+        if (key.startsWith(VISIBILITY_PREFIX) && !VISIBILITY_KEYS.includes(key.slice(VISIBILITY_PREFIX.length))) {
+            say(at, property, `${where} on ${at.owner} has the term \`${key}\`, which isn't a visibility. Use \`${VISIBILITY_PREFIX}hidden\` or \`${VISIBILITY_PREFIX}collapsed\`.`, 'CONV-decode.ts:221');
+        }
         else
-            condition(at, property.value, where);
+            condition(at, property.value, `${where} term \`${key}\``);
     }
 }
 function prop(at, name, node, placeholderAllowed) {
     const value = bare(node);
     if (value.type === 'ArrayExpression')
         return say(at, value, `\`bindings.props.${name}\` on ${at.owner} is an array. Bind the prop to one value: \`ctx()\`, \`fn()\` or \`raw()\`.`, 'CONV-decode.ts:209');
-    if (isPlain(value) || rawOnly(value) || isStaticRaw(at, value))
+    if (isPlain(value) || rawOnly(value) || isStaticRaw(at, value) || isTyped(value, at.input.rulesApi))
         return say(at, value, fixedValue(at, name), 'CONV-decode.ts:252');
     binding(at, value, 'prop', placeholderAllowed);
 }
@@ -255,10 +303,17 @@ function condition(at, node, where, inRemove = false) {
 function binding(at, node, place, placeholderAllowed = false) {
     const value = bare(node);
     const { name } = PLACES[place];
+    // A read of the renderItem row or of a map() item (`item.name`) is a binding in every place (decode.ts decodeRef).
+    if (getParamReadKind(value))
+        return;
+    if (isInvoke(value))
+        return invoke(at, value);
     if (isCallByName(value)) {
         const builder = builderOf(value, at.input.rulesApi);
         if (!builder)
             return;
+        if (TYPED_BUILDERS.includes(builder))
+            return PLACES[place].literals ? undefined : wrongPlace(at, value, `\`${builder}()\``, place);
         if (!PLACES[place].builders.includes(builder))
             return wrongPlace(at, value, `\`${builder}()\``, place);
         return call(at, value, builder, place, placeholderAllowed);
@@ -269,31 +324,46 @@ function binding(at, node, place, placeholderAllowed = false) {
         return;
     }
     const raw = rawOnly(value);
-    if (raw && place === 'statesItem')
-        return wrongPlace(at, value, raw, place);
+    if (raw === 'an object' && place === 'fnArg' && isDataItem(value))
+        return;
+    if (raw === 'an object' && place === 'fnArg')
+        return say(at, value, `${capitalize(name)} on ${at.owner} is an object that isn't a data item. Write ${PLAIN}, a link (\`{ href: … }\`) or a typed item (\`{ type: 'Builder.Image', … }\`), or wrap it in \`raw()\`.`, 'CONV-decode.ts:86');
     if (raw)
         return say(at, value, `${capitalize(name)} on ${at.owner} is ${raw}. Write ${PLAIN}, or wrap it in \`raw()\`.`, 'CONV-decode.ts:86');
     say(at, value, `${capitalize(name)} on ${at.owner} is ${describeIn(at, value)}. Write it out. ${hintFor(place)}`, 'CONV-decode.ts:86');
 }
-const wrongPlace = (at, node, what, place) => say(at, node, `${capitalize(what)} can't be ${PLACES[place].name} on ${at.owner}. ${hintFor(place)}`, place === 'statesItem' ? 'CONV-decode.ts:132' : 'CONV-decode.ts:126');
+const wrongPlace = (at, node, what, place) => say(at, node, `${capitalize(what)} can't be ${PLACES[place].name} on ${at.owner}. ${hintFor(place)}`, 'CONV-decode.ts:126');
+/** A called ctx() or row member: `ctx('cart.add', { from: useCart })(item.id)`, `item.actions.select('quick')` (decode.ts decodeInvoke). */
+function invoke(at, node) {
+    const { callee } = node;
+    if (!isMethodTarget(callee, at.input.rulesApi))
+        return say(at, node, `${capitalize(describeIn(at, node))} on ${at.owner} calls what isn't a context or the renderItem row. Call only \`ctx(…)\` or a member of the row: \`ctx('cart.add', { from: useCart })(item.id)\`.`, 'CONV-decode.ts:86');
+    if (callee.type === 'CallExpression')
+        ctxCall(at, callee, false);
+    if (node.arguments.some((argument) => argument.type === 'SpreadElement'))
+        return say(at, node, `A called \`ctx()\` or row member on ${at.owner} spreads its arguments. Write each argument out.`, 'CONV-astValue.ts:310');
+    for (const argument of node.arguments)
+        binding(at, argument, 'fnArg');
+}
 function call(at, node, builder, place, placeholderAllowed) {
     if (node.arguments.some((argument) => argument.type === 'SpreadElement')) {
         return say(at, node, `\`${builder}()\` on ${at.owner} spreads its arguments. Write each argument out.`, 'CONV-astValue.ts:310');
     }
-    if (hasDuplicateKey(at, node, builder))
+    // map() and shape() hold a callback, read in its own scope: no tracker row checks its shape yet.
+    if (builder === 'map' || builder === 'shape' || hasDuplicateKey(at, node, builder))
         return;
     if (builder === 'ctx')
         ctxCall(at, node, placeholderAllowed);
     else if (builder === 'fn')
         fnCall(at, node, placeholderAllowed);
+    else if (builder === 'callback')
+        callbackCall(at, node);
     else if (builder === 'is')
         isCall(at, node);
     else if (builder === 'all')
         allCall(at, node, place);
-    else if (builder === 'raw')
-        isRawWrittenOut(at, node);
     else
-        stateCall(at, node);
+        isRawWrittenOut(at, node);
 }
 function hasDuplicateKey(at, node, builder) {
     const twice = node.arguments.map(duplicateKeyIn).find(Boolean);
@@ -334,6 +404,21 @@ function fnCall(at, node, placeholderAllowed) {
             binding(at, argument, 'fnArg');
     }
 }
+/** `callback(goHome, 2)`: the function (an imported one, a `ctx()` or a member of the row), then its bound arguments (decode.ts decodeCallback). */
+function callbackCall(at, node) {
+    const [first, ...bound] = node.arguments;
+    if (!first)
+        return say(at, node, `\`callback()\` on ${at.owner} has no arguments. Write the function first: \`callback(goHome, …)\`.`, 'CONV-astValue.ts:287');
+    const target = bare(first);
+    // A name that isn't a parameter is the imported function: bindingNameImported checks its import.
+    const isFunctionName = target.type === 'Identifier' && !getParamReadKind(target);
+    if (!isFunctionName && !isMethodTarget(target, at.input.rulesApi))
+        return say(at, target, `\`callback()\`'s function on ${at.owner} is ${describeIn(at, target)}. Write an imported function, a \`ctx()\` or a member of the renderItem row: \`callback(goHome, …)\`.`, 'CONV-decode.ts:86');
+    if (target.type === 'CallExpression')
+        ctxCall(at, target, false);
+    for (const argument of bound)
+        binding(at, argument, 'fnArg');
+}
 function placeholderValue(at, node) {
     const value = bare(node);
     if (!isPlain(value))
@@ -344,14 +429,26 @@ function isCall(at, node) {
     if (node.arguments.length !== 2)
         return say(at, node, `\`is()\` on ${at.owner} has ${node.arguments.length} argument${node.arguments.length === 1 ? '' : 's'}. ${fix}`, 'CONV-decode.ts:172');
     const [binded, compared] = node.arguments.map((argument) => bare(argument));
-    if (isPlain(binded) || rawOnly(binded) || builderOf(binded, at.input.rulesApi) === 'raw')
-        say(at, binded, `\`is()\` on ${at.owner} compares ${isCallByName(binded) ? '`raw()`' : 'a literal'}, not a binding. ${fix}`, 'CONV-decode.ts:172');
+    if (isPlain(binded) || rawOnly(binded) || builderOf(binded, at.input.rulesApi) === 'raw' || isTyped(binded, at.input.rulesApi))
+        say(at, binded, `\`is()\` on ${at.owner} compares ${isCallByName(binded) ? `\`${builderOf(binded, at.input.rulesApi)}()\`` : 'a literal'}, not a binding. ${fix}`, 'CONV-decode.ts:172');
     else
         binding(at, binded, 'isBinding');
     const isStringOrBoolean = compared.type === 'Literal' && ['string', 'boolean'].includes(typeof compared.value);
     if (!isStringOrBoolean)
         say(at, compared, `\`is()\` on ${at.owner} compares to ${rawOnly(compared) ?? describeIn(at, compared)}. ${fix}`, 'CONV-decode.ts:172');
 }
+/**
+ * A component's `raw()` bindings are one item of the bindings namespace, and its one schema is BindingsList (reservedAttributes.ts
+ * BINDINGS_WRAPPER_TYPE): the import refuses an item with no type, or another one ("Cannot find schema … for namespace: bindings").
+ * An elementProps entry's bindings are stored inline in the component's inner elements, so they have no such item.
+ */
+function checkRawBindingsType(at, node, item) {
+    const type = getProperty(item, 'type');
+    if (stringValue(type?.value) === BINDINGS_LIST)
+        return;
+    const has = type ? `has the type \`${textOf(at, type.value)}\`` : 'has no `type`';
+    say(at, type?.value ?? node, `The \`raw()\` bindings item on ${at.owner} ${has}. Write \`raw({ type: '${BINDINGS_LIST}', … })\`: the import stores no other bindings item.`, 'CONV-decode.ts:28');
+}
 function allCall(at, node, place) {
     const count = node.arguments.length;
     if (place === 'condition' && count < 2)
@@ -379,61 +476,30 @@ function isRawWrittenOut(at, node) {
         say(at, found, `\`raw()\` on ${at.owner} holds ${describeIn(at, found)}. Write its item out with literal values.`, 'CONV-decode.ts:28');
     return !found;
 }
-function stateCall(at, node) {
-    const [nameNode, options, ...extra] = node.arguments;
-    const name = stringValue(nameNode);
-    const object = options && getObject(options);
-    const keys = object ? getProperties(object).map(getKey) : [];
-    const unknown = keys.find((key) => key !== null && !STATE_OPTIONS.includes(key));
-    const problem = name === null ? 'has no name string first'
-        : extra.length > 0 ? 'has more than two arguments'
-            : !object || object.properties.length !== keys.length ? "has no options object, or one that isn't all `key: value`"
-                : unknown !== undefined ? `has the option \`${unknown}\``
-                    : null;
-    if (problem)
-        return say(at, node, `\`state()\` on ${at.owner} ${problem}. Write \`state('hover', { kind: 'hover', id: 'state-1' })\` (pseudoClass is optional).`, 'CONV-decode.ts:145');
-    const found = nonLiteralIn(object);
-    if (found)
-        return say(at, found, `\`state()\` on ${at.owner} holds ${describeIn(at, found)}. Write its options out with literal values.`, 'CONV-decode.ts:145');
-    if (stringValue(getProperty(object, 'kind')?.value) === null)
-        return say(at, node, `\`state()\` on ${at.owner} has no \`kind\` string. Write \`state('hover', { kind: 'hover', id: 'state-1' })\` (pseudoClass is optional).`, 'CONV-decode.ts:145');
-    if (stringValue(getProperty(object, 'id')?.value) === null)
-        say(at, node, `\`state('${name}')\` on ${at.owner} has no \`id\` string. Add \`id: '…'\` to its options.`, 'CONV-decode.ts:142');
-}
-function statesAttribute(at, attribute) {
-    if (!attribute)
-        return;
-    const value = getExpression(attribute);
-    if (value?.type === 'ArrayExpression' && !hasHoleOrSpread(value)) {
-        for (const item of value.elements)
-            binding(at, item, 'statesItem');
-        return;
-    }
-    const what = value?.type === 'ArrayExpression' ? 'a list with a spread or an empty place' : value ? describeIn(at, value) : 'not a `{…}` value';
-    say(at, attribute, `\`states\` on ${at.owner} is ${what}. Write a list of \`state()\` or \`raw()\` calls: \`states={[state('hover', {…})]}\`.`, 'CONV-parseJsx.ts:641');
-}
-/** Only RUNTIME_ONLY_BUILDERS: other runtime names (`Remove(…)`) pass the converter's parse, then its decode has no case for them. */
+/** Only BUILDERS: other runtime names (`Remove(…)`) pass the converter's parse, then its decode has no case for them. */
 function isBuilderImported({ rulesApi, report }, callee) {
     const found = rulesApi.getImport(callee);
-    if (found?.kind === 'runtime' && found.imported === callee.name && RUNTIME_ONLY_BUILDERS.includes(callee.name))
+    if (found?.kind === 'runtime' && found.imported === callee.name && BUILDERS.includes(callee.name))
         return true;
     const builder = found?.kind === 'runtime' ? found.imported : callee.name;
     report({
         loc: callee.loc,
-        message: tracked(RUNTIME_ONLY_BUILDERS.includes(builder)
+        message: tracked(BUILDERS.includes(builder)
             ? `\`${callee.name}(…)\` isn't the builder \`${builder}\` from ${RUNTIME_PACKAGE}. Import it under its own name, \`import { ${builder} } from '${RUNTIME_PACKAGE}'\`, and call it as \`${builder}(…)\`.`
-            : `\`${callee.name}(…)\` isn't a builder. In an attribute, only the builders of ${RUNTIME_PACKAGE} are called (${RUNTIME_ONLY_BUILDERS.join(', ')}); write a literal value, or one of them.`, 'CONV-astValue.ts:296'),
+            : `\`${callee.name}(…)\` isn't a builder. In an attribute, only the builders of ${RUNTIME_PACKAGE} are called (${BUILDERS.join(', ')}); write a literal value, or one of them.`, 'CONV-astValue.ts:296'),
     });
     return false;
 }
 function bindingNameImported({ node, rulesApi, report, context }, builder) {
     const [first, second] = node.arguments;
     const options = builder === 'ctx' ? getObject(second) : null;
-    const named = builder === 'fn' ? first : options ? getProperty(options, 'from')?.value : undefined;
+    // callback()'s first argument may also be a `ctx()` or a member of the row (astValue.ts astToCallArg).
+    const isCallbackName = builder === 'callback' && first && bare(first).type === 'Identifier' && !getParamReadKind(bare(first));
+    const named = builder === 'fn' || isCallbackName ? first : options ? getProperty(options, 'from')?.value : undefined;
     if (!named)
         return null;
     const value = bare(named);
-    const what = builder === 'fn' ? "fn()'s function" : "ctx()'s `from` hook";
+    const what = builder === 'fn' ? "fn()'s function" : builder === 'callback' ? "callback()'s function" : "ctx()'s `from` hook";
     if (value.type !== 'Identifier') {
         report({ loc: value.loc, message: tracked(`${what} is \`${context.sourceCode.getText(value)}\`. Write an imported name: \`fn(numberToText, …)\`, \`{ from: useProduct }\`.`, 'CONV-astValue.ts:227') });
         return null;
@@ -456,12 +522,6 @@ function ctxSourceHasName({ report }, { hook, source }) {
     report({ loc: hook.loc, message: tracked(`ctx()'s \`from\` hook \`${hook.name}\` is imported from '${source}', which has no context name after the \`/\`. Write '<componentType>/<contextName>'.`, 'CONV-decode.ts:100') });
 }
 // ── reading the code ──
-function getObject(source) {
-    if (!source)
-        return null;
-    const value = source.type === 'JSXAttribute' ? getExpression(source) : bare(source);
-    return value?.type === 'ObjectExpression' ? value : null;
-}
 function getElementPropsEntries(element) {
     return getEntries(getObject(getAttribute(element, 'elementProps')));
 }
@@ -478,9 +538,22 @@ function builderOf(node, rulesApi) {
     if (node.type !== 'CallExpression' || node.callee.type !== 'Identifier')
         return null;
     const found = rulesApi.getImport(node.callee);
-    return found?.kind === 'runtime' && RUNTIME_ONLY_BUILDERS.includes(found.imported) ? found.imported : null;
+    return found?.kind === 'runtime' && BUILDERS.includes(found.imported) ? found.imported : null;
 }
 const isCallByName = (node) => node.type === 'CallExpression' && node.callee.type === 'Identifier';
+/** What the import calls as a method (decode.ts methodBindingOf): a `ctx()`, or a read of the renderItem row. A map() or shape() parameter has no methods. */
+const isMethodTarget = (node, rulesApi) => builderOf(node, rulesApi) === 'ctx' || getParamReadKind(node) === 'template';
+/** A call of a call or of a member: `ctx(…)(…)`, `item.actions.select()`. */
+const isInvoke = (node) => node.type === 'CallExpression' && (node.callee.type === 'CallExpression' || node.callee.type === 'MemberExpression');
+/** A value the import reads as a binding: a builder call, a called ctx() or row member, a read of a renderItem or map() parameter. */
+const isBindingValue = (node, rulesApi) => builderOf(node, rulesApi) !== null || isInvoke(node) || getParamReadKind(node) !== null;
+/** A typed builder, `email('a@b.c')`: a fixed value, like a literal (decode.ts decodeTypedStatic). */
+const isTyped = (node, rulesApi) => TYPED_BUILDERS.includes(builderOf(node, rulesApi) ?? '');
+/** An argument's object the import reads as a data item: a typed Builder item or link, or a link with an `href` and no type (decode.ts decodeDataRef). */
+function isDataItem(item) {
+    const type = getProperty(item, 'type');
+    return type ? DATA_ITEM_TYPES.includes(stringValue(type.value) ?? '') : getProperty(item, 'href') !== undefined;
+}
 function isPlain(node) {
     if (node.type === 'UnaryExpression')
         return node.operator === '-' && node.argument.type === 'Literal' && typeof node.argument.value === 'number';
@@ -547,22 +620,45 @@ const wrappedComponents = (element, rulesApi) => rulesApi.getChildren(element).f
         return wrappedComponents(child, rulesApi);
     return rulesApi.getComponent(child) ? [child] : [];
 });
-/** The import reads data attributes only on a component with `type=`. */
-const hasData = (element) => getAttribute(element, 'type') !== undefined;
-/** Not the component's data: the converter's reserved attributes, `sharedCompId`, and `states`, which bindings still reads. */
-const isReserved = (name) => RESERVED_ATTRIBUTES.includes(name) || name === SHARED_COMP_ID || name === 'states';
+/** The runtime's withOrigami wraps the component wrappers and the companion components: only on them does a callback prop throw. */
+function isWrappedByRuntime(element, rulesApi) {
+    const kind = rulesApi.getImport(element)?.kind;
+    return kind === 'wrapper' || kind === 'siteCode';
+}
+/** A callback prop written as an attribute with a call: `onClick={fn(goHome)}`. */
+function getCallbackAttributes(element) {
+    return element.openingElement.attributes.flatMap((attribute) => attribute.type === 'JSXAttribute' && CALLBACK_PROP.test(getName(attribute)) && getExpression(attribute)?.type === 'CallExpression' ? [[getName(attribute), attribute]] : []);
+}
+/** The callback props in `bindings={{ props: { onClick: … } }}`. */
+function getBoundCallbacks(attribute) {
+    const bindings = getObject(attribute);
+    const props = bindings && getObject(getProperty(bindings, BINDINGS_KEY)?.value);
+    return (props ? getProperties(props) : []).flatMap((property) => {
+        const key = getKey(property);
+        return key !== null && CALLBACK_PROP.test(key) ? [[key, bare(property.value)]] : [];
+    });
+}
+/** What a callback prop is bound with that runs at render: `fn()`, `ctx()`, a called ctx() or row member, a read of the row; null for `callback()` and `raw()`. */
+function runsAtRender(at, node) {
+    const builder = builderOf(node, at.input.rulesApi);
+    if (builder)
+        return RENDER_BUILDERS.includes(builder) ? `\`${builder}()\`` : null;
+    return isInvoke(node) || getParamReadKind(node) ? describeIn(at, node) : null;
+}
+/** The data attributes bound to a value the import reads as a binding; not an `on…` attribute, which it doesn't read at all (OUR-031 reports it). */
 function boundAttributes(element) {
     return element.openingElement.attributes.flatMap((attribute) => {
-        if (attribute.type !== 'JSXAttribute' || isReserved(getName(attribute)))
+        if (attribute.type !== 'JSXAttribute' || isReservedAttribute(getName(attribute)) || EVENT_ATTRIBUTE.test(getName(attribute)))
             return [];
         const value = getExpression(attribute);
-        return value?.type === 'CallExpression' ? [[getName(attribute), attribute, value]] : [];
+        return isBound(value) ? [[getName(attribute), attribute, value]] : [];
     });
 }
 function boundEntryKeys(entry) {
     return getProperties(entry).flatMap((property) => {
         const key = getKey(property);
-        return key !== null && !RESERVED_ENTRY_KEYS.includes(key) && bare(property.value).type === 'CallExpression' ? [[key, property]] : [];
+        const value = bare(property.value);
+        return key !== null && !RESERVED_ENTRY_KEYS.includes(key) && isBound(value) ? [[key, property]] : [];
     });
 }
 function getBindingsProps(node, rulesApi) {
@@ -617,13 +713,14 @@ function misplacedBuilders(element, rulesApi) {
             return [];
         const name = getName(attribute);
         const value = getExpression(attribute);
-        if (!value || name === 'bindings' || name === 'states')
+        if (!value || name === 'bindings')
             return [];
         if (name === 'elementProps')
             return entryBuilders(value, rulesApi, '`elementProps`');
-        if (!isReserved(name) && builderOf(value, rulesApi))
+        if (!isReservedAttribute(name) && isBindingValue(value, rulesApi))
             return [];
-        return buildersIn(value, rulesApi).map((call) => [call, `\`${name}\``]);
+        const builders = name === 'className' && value.type === 'ArrayExpression' ? value.elements.flatMap((term) => conditionlessBuilders(term, rulesApi)) : buildersIn(value, rulesApi);
+        return builders.map((call) => [call, `\`${name}\``]);
     });
 }
 function entryBuilders(elementProps, rulesApi, where) {
@@ -643,12 +740,19 @@ function entryBuilders(elementProps, rulesApi, where) {
                 return [];
             if (key === 'elementProps')
                 return entryBuilders(property.value, rulesApi, `${name}'s \`elementProps\``);
-            if (!RESERVED_ENTRY_KEYS.includes(key) && builderOf(property.value, rulesApi))
+            if (!RESERVED_ENTRY_KEYS.includes(key) && isBindingValue(bare(property.value), rulesApi))
                 return [];
-            return buildersIn(property.value, rulesApi).map((call) => [call, `${name}'s \`${key}\``]);
+            const builders = key === 'className' ? conditionlessBuilders(property.value, rulesApi) : buildersIn(property.value, rulesApi);
+            return builders.map((call) => [call, `${name}'s \`${key}\``]);
         });
     });
 }
+/** The builders in a `className` term outside its keys' conditions: an object term's `key: value` holds a condition, the rest is plain (parseJsx.ts classNameEntriesOf). */
+function conditionlessBuilders(term, rulesApi) {
+    if (term?.type !== 'ObjectExpression')
+        return buildersIn(term, rulesApi);
+    return term.properties.flatMap((property) => property.type === 'Property' && !property.computed && getKey(property) !== null ? [] : buildersIn(property, rulesApi));
+}
 function buildersIn(node, rulesApi) {
     if (!node || typeof node !== 'object' || !('type' in node))
         return [];
@@ -666,6 +770,9 @@ function isInStructureAttribute(node) {
     for (let up = node.parent; up.type !== 'Program'; up = up.parent) {
         if (up.type === 'JSXAttribute')
             inAttribute = true;
+        // A renderItem template and a map() or shape() callback are read in the structure, in their parameters' scope.
+        if (up.type === 'ArrowFunctionExpression' && getCallbackKind(up))
+            continue;
         if (up.type === 'ArrowFunctionExpression' || up.type === 'FunctionExpression')
             return inAttribute && isStructure(up);
     }

package/dist/rules/data-values.js

@@ -2,7 +2,7 @@
 // 1227, 1231, 1235, 1255, 1268, 1289, 1697; projectData.ts 214, 225, 281, 435, 443; enrichImage.ts 94, 105.
 // Converter 0.81 (checked at 0.84, 2c0e21c): the tag's import, not a `type` attr, decides if a component takes data attributes; `type` is data.
 import { isDeepStrictEqual } from 'node:util';
-import { DATA_KEY, GLOBAL_SECTIONS, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, SHARED_COMP_ID, bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isOneEditAway, isStructure, ownerOf, } from "../rules-api/index.js";
+import { DATA_KEY, EVENT_ATTRIBUTE, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getProperty, isBound, isOneEditAway, isReservedAttribute, isStructure, ownerOf, } from "../rules-api/index.js";
 import { defineRule } from "./define-rule.js";
 /** The names the import never reads as data (dataKeys.ts). The React name is joined as the converter does: Wix Standards fails the build on it in any file. */
 const EXCLUDED_DATA_KEYS = [
@@ -66,9 +66,9 @@ function checkValuesAreLiterals(input, skip) {
             continue;
         }
         const value = getExpression(attribute);
-        if (!value || skip.includes(name) || (isReserved(name) && !READ_AS_DATA.includes(name)))
+        if (!value || skip.includes(name) || (isReservedAttribute(name) && !READ_AS_DATA.includes(name)))
             continue;
-        if (!isReserved(name) && (isExcluded(name) || nearMissOf(name) || value.type === 'CallExpression'))
+        if (!isReservedAttribute(name) && (isExcluded(name) || nearMissOf(name) || isBound(value) || getCallbackKind(value) === 'template'))
             continue;
         const mode = name === 'props' ? PROPS : FULL;
         const found = name === 'elementProps' ? nonLiteralInElementProps(value, mode, input.rulesApi, textOf(input)) : nonLiteralIn(value, mode, input.rulesApi, textOf(input));
@@ -107,7 +107,7 @@ function checkElementPropsEntries(input, map, path) {
     for (const property of getProperties(map)) {
         const name = getKey(property);
         const at = [...path, name].join('.');
-        if (!checkEntryName(input, property, name) || builderOf(bare(property.value), input.rulesApi))
+        if (!checkEntryName(input, property, name) || isRuntimeCall(bare(property.value), input.rulesApi))
             continue;
         // an object written out: a media call decodes to an object, but not to an inner part's settings
         const entry = getObject(property.value);
@@ -138,10 +138,10 @@ function checkEntryName(input, property, name) {
 function checkEntryKeysAreKnown(input, entry, at) {
     for (const property of getProperties(entry)) {
         const key = getKey(property);
-        if (key === null || key === '_id' || RESERVED_ENTRY_KEYS.includes(key) || bare(property.value).type === 'CallExpression')
+        if (key === null || key === '_id' || RESERVED_ENTRY_KEYS.includes(key) || isBound(bare(property.value)))
             continue;
         const typo = nearMissOf(key);
-        if (!isReserved(key) && !isExcluded(key) && !typo)
+        if (!isReservedAttribute(key) && !isExcluded(key) && !typo)
             continue;
         say(input, property.key, `${owner(input)}'s elementProps entry \`${at}\` has the key \`${key}\`, which an inner part doesn't take. Use its data keys, or \`data: {…}\`${typo ? ` (did you mean \`${typo}\`?)` : ''}.`);
     }
@@ -151,7 +151,7 @@ function checkDataCarrier(input) {
     const value = getExpression(data);
     if (!value)
         return null;
-    const merges = dataAttributes(input).length > 0 || (takesData(input) && getAttribute(input.node, '_id') !== undefined);
+    const merges = dataAttributes(input).length > 0 || (input.rulesApi.hasDataAttributes(input.node) && getAttribute(input.node, '_id') !== undefined);
     if (!merges)
         return null;
     if (!isObjectValue(value, input.rulesApi)) {
@@ -286,34 +286,23 @@ function imageCallsIn(input, dataValuesRead, read) {
         if (value.type === 'ArrayExpression')
             return value.elements.flatMap((element) => (element && element.type !== 'SpreadElement' ? calls(element) : []));
         if (value.type === 'ObjectExpression')
-            return getProperties(value).flatMap((property) => (builderOf(bare(property.value), input.rulesApi) ? [] : calls(property.value)));
+            return getProperties(value).flatMap((property) => (isRuntimeCall(bare(property.value), input.rulesApi) ? [] : calls(property.value)));
         return [];
     };
     return values.flatMap(calls);
 }
 // ── reading the code ──
 const getAttributes = (element) => element.openingElement.attributes.filter((attribute) => attribute.type === 'JSXAttribute');
-const getObject = (node) => (node && bare(node).type === 'ObjectExpression' ? bare(node) : null);
-/** The tags the import reads as the DM's own components ('document') or a global component's reference (identity.ts identityOfTag): no data attributes. */
-const NO_DATA_TYPES = ['page', 'section', 'header', 'footer', 'headerLandmark', 'footerLandmark', ...GLOBAL_SECTIONS];
-/** Converter 0.81: a builder component (its import gives a componentType) takes data attributes; the `type` attr is gone. */
-function takesData({ node, rulesApi }) {
-    const found = rulesApi.getImport(node);
-    const type = rulesApi.getType(node);
-    return found !== null && found.kind !== 'core' && !found.source.startsWith('.') && !(type && NO_DATA_TYPES.includes(type));
-}
 /** The name the import gives the tag's component (parseJsx.ts namedImportOf): the imported name, else the tag's own (`<Box>`, `<ui.Box>`). */
 function componentNameOf({ node, rulesApi }) {
     const imported = rulesApi.getImport(node)?.imported;
     return imported && imported !== 'default' && imported !== '*' ? imported : rulesApi.getTagName(node).split('.').at(-1);
 }
-/** Not the component's data: the converter's reserved attributes, and `sharedCompId`. */
-const isReserved = (name) => RESERVED_ATTRIBUTES.includes(name) || name === SHARED_COMP_ID;
-const isDataName = (name) => !isReserved(name) && !isExcluded(name) && nearMissOf(name) === undefined;
-const isExcluded = (name) => EXCLUDED_DATA_KEYS.includes(name) || name.startsWith('data-') || name.startsWith('aria-') || /^on/i.test(name) || !DATA_KEY.test(name);
+const isDataName = (name) => !isReservedAttribute(name) && !isExcluded(name) && nearMissOf(name) === undefined;
+const isExcluded = (name) => EXCLUDED_DATA_KEYS.includes(name) || name.startsWith('data-') || name.startsWith('aria-') || EVENT_ATTRIBUTE.test(name) || !DATA_KEY.test(name);
 const nearMissOf = (name) => RESERVED_ATTRIBUTES.find((target) => isOneEditAway(name, target));
-const dataAttributes = (input) => !takesData(input) ? [] : getAttributes(input.node).filter((attribute) => isDataName(getName(attribute)) && getExpression(attribute)?.type !== 'CallExpression');
-const entryDataKeys = (entry) => getProperties(entry).filter((property) => getKey(property) !== null && !RESERVED_ENTRY_KEYS.includes(getKey(property)) && bare(property.value).type !== 'CallExpression');
+const dataAttributes = (input) => !input.rulesApi.hasDataAttributes(input.node) ? [] : getAttributes(input.node).filter((attribute) => isDataName(getName(attribute)) && !isBound(getExpression(attribute)) && getCallbackKind(getExpression(attribute) ?? attribute) !== 'template');
+const entryDataKeys = (entry) => getProperties(entry).filter((property) => getKey(property) !== null && !RESERVED_ENTRY_KEYS.includes(getKey(property)) && !isBound(bare(property.value)));
 /** The attribute a data value's path starts at: `data.x` → `data`, `elementProps.nav.label` → `elementProps`. */
 const attributeOf = (path) => path.split('.')[0];
 function getEntries(map, path = []) {
@@ -357,7 +346,8 @@ function documentIdentifierOf(node, rulesApi) {
 }
 /** What `x` decodes to is an object: an object written out, or a media call (the import keeps it as an object). */
 const isObjectValue = (node, rulesApi) => bare(node).type === 'ObjectExpression' || isImageCall(bare(node), rulesApi) || documentIdentifierOf(bare(node), rulesApi) !== null;
-function builderOf(node, rulesApi) {
+/** A call of any name from the runtime, a builder or not: the bindings rule reports one that isn't a builder. */
+function isRuntimeCall(node, rulesApi) {
     return node.type === 'CallExpression' && node.callee.type === 'Identifier' && rulesApi.getImport(node.callee)?.kind === 'runtime';
 }
 function nonLiteralIn(node, mode, rulesApi, getText, path = '') {
@@ -433,7 +423,7 @@ function nonLiteralInElementProps(node, mode, rulesApi, getText, path = '') {
     const readEntry = (property, at) => {
         const key = getKey(property);
         const value = bare(property.value);
-        if (key === 'bindings' || key === 'slots' || key === 'className' || (!RESERVED_ENTRY_KEYS.includes(key) && value.type === 'CallExpression'))
+        if (key === 'bindings' || key === 'slots' || key === 'className' || (!RESERVED_ENTRY_KEYS.includes(key) && isBound(value)))
             return null;
         return key === 'elementProps' ? nonLiteralInElementProps(value, mode, rulesApi, getText, at) : nonLiteralIn(value, mode, rulesApi, getText, at);
     };
@@ -499,10 +489,11 @@ function dataValues(input) {
     }
     return values;
 }
+/** In Structure's own JSX, or in a renderItem template, which the import reads in the row's scope (parseJsx.ts claimSlotChild). */
 function isWrittenOut(element) {
     for (let up = element.parent; up.type !== 'JSXElement' && up.type !== 'Program'; up = up.parent) {
         if (up.type === 'ArrowFunctionExpression')
-            return isStructure(up);
+            return isStructure(up) || getCallbackKind(up) === 'template';
         if (NOT_READ_IN.includes(up.type) || (up.type === 'JSXExpressionContainer' && up.parent.type !== 'JSXAttribute'))
             return false;
     }

package/dist/rules-api/index.js

@@ -1,6 +1,6 @@
 // Part 3 — rules API: one linted file's page and the functions over it, and how a rule reports.
 export { createRulesApi, getOrCreateRulesApi } from "./rules-api.js";
 export { createCssFileReporter, describeAtRule, reportCssProblem } from "./report.js";
-export { bare, getAttribute, getExpression, getKey, getName, getProperties, getProperty, isOneEditAway, isStructure, ownerOf, } from "../shared/utils.js";
-export { BUILDERS, DATA_KEY, GLOBAL_SECTIONS, INSTANCE_PROPS, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, WRAPPERS, } from "../shared/constants.js";
+export { bare, getAttribute, getExpression, getKey, getName, getObject, getProperties, getCallbackKind, getParamReadKind, getProperty, isBound, isOneEditAway, isReservedAttribute, isStructure, ownerOf, } from "../shared/utils.js";
+export { BUILDERS, CALLBACK_PROP, DATA_KEY, EVENT_ATTRIBUTE, GLOBAL_SECTIONS, INSTANCE_PROPS, LAYER_ATTRIBUTES, RESERVED_ATTRIBUTES, RESERVED_ENTRY_KEYS, RUNTIME_ONLY_BUILDERS, RUNTIME_PACKAGE, SECTIONS, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS, TYPED_BUILDERS, WRAPPERS, } from "../shared/constants.js";
 export { BREAKPOINT_AT_RULES, CONTENT_TARGET, getCssChildren, getDashedId, getSegmentClass, getSelectorSegments, isCssIdentifier, isPresetProperty, isSafeCssIdentifier, ORIGAMI_TARGETS, OVERFLOW_TARGET, PREAMBLE_LAYER, readSegment } from "../shared/css.js";

package/dist/rules-api/rules-api.js

@@ -3,7 +3,7 @@
 // One per file, shared by every rule on it. Only building its page reads from disk, once per file.
 import path from 'node:path';
 import { readPage } from "../page-model/index.js";
-import { getAttributeElements as getHeldElements, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, isTypeScript } from "../shared/utils.js";
+import { getAttributeElements as getHeldElements, getChildren, getId, getImport, getImportKind, getImportedName, getPropNames, getSlot, getTagName, getType, hasDataAttributes, isTypeScript } from "../shared/utils.js";
 import { readBreakpointName, readCustomMedia, readThemeTokens } from "../shared/css.js";
 import { WRAPPERS } from "../shared/constants.js";
 import { getEnclosingAtRules, isBaseDeclaration } from "./utils.js";
@@ -44,6 +44,7 @@ export function createRulesApi(page) {
         getAttributeElements,
         getSlot,
         getImport: (node) => getImport(node.type === 'JSXElement' ? getTagName(node).split('.')[0] : node.name, getProgram(node)),
+        hasDataAttributes: (node) => hasDataAttributes(node, getProgram(node)),
         getImportKind,
         getImportedName,
         isTypeScript,

package/dist/shared/constants.js

@@ -12,10 +12,14 @@ export const INSTANCE_PROPS = ['id', 'className'];
 export const SYSTEM_PACKAGE = '@wix/origami-system-components';
 /** The runtime package: the builders (`ctx`, `fn`…) and the `<Remove>` wrapper. */
 export const RUNTIME_PACKAGE = '@wix/origami-runtime';
-/** The runtime's builders: the converter's BINDINGS_BUILDER_ORDER without `Remove`, which is a tag (reservedAttributes.ts). */
+/** The typed builders (converter 0.76, PRIMITIVE_DATA_TYPES): `email('a@b.c')` is a fixed value of that type, like a literal. */
+export const TYPED_BUILDERS = ['textEnum', 'phone', 'email', 'webUrl', 'hostname', 'regex', 'guid', 'direction', 'localDate', 'localTime', 'localDateTime', 'dateTime'];
+/** The builders whose second argument is a callback, `map(source, (item) => ({…}))` (astValue.ts TRANSFORM_CALLBACKS). */
+export const TRANSFORM_BUILDERS = ['map', 'shape'];
+/** The runtime's builders: the converter's BINDINGS_BUILDER_ORDER without `Remove`, which is a tag (reservedAttributes.ts); `map`, `shape` and `callback` since converter 0.82–0.86. */
 export const BUILDERS = [
-    'all', 'ctx', 'fn', 'is', 'raw', 'state',
-    'textEnum', 'phone', 'email', 'webUrl', 'hostname', 'regex', 'guid', 'direction', 'localDate', 'localTime', 'localDateTime', 'dateTime',
+    'all', 'ctx', 'fn', 'is', 'raw', 'state', 'map', 'shape', 'callback',
+    ...TYPED_BUILDERS,
 ];
 /** The six builders no other package exports under these names; `email`, `regex`… may well come from a library for fn(). */
 export const RUNTIME_ONLY_BUILDERS = ['all', 'ctx', 'fn', 'is', 'raw', 'state'];
@@ -29,5 +33,9 @@ export const SHARED_COMP_ID = 'sharedCompId';
 export const RESERVED_ENTRY_KEYS = ['data', 'slots', 'elementProps', 'bindings', 'className'];
 /** A data key is a JavaScript name (dataKeys.ts). */
 export const DATA_KEY = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+/** An attribute the import reads as a React event, never as data: `on` in any case (dataKeys.ts REACT_EVENT_ATTR_PATTERN, converter 0.87). */
+export const EVENT_ATTRIBUTE = /^on/i;
+/** A callback prop, which the runtime hands a function: `on` and a capital letter, `onClick` but not `onclick` (the runtime's withOrigami.tsx). */
+export const CALLBACK_PROP = /^on[A-Z]/;
 /** By import source; the wrappers also by the imported name, since their packages export other things (`Show`, `Interact`). */
 export const LAYER_ATTRIBUTES = ['backgroundLayer', 'pinnedLayer'];

package/dist/shared/utils.js

@@ -1,4 +1,4 @@
-import { RUNTIME_PACKAGE, STRUCTURE, SYSTEM_PACKAGE } from "./constants.js";
+import { GLOBAL_SECTIONS, RESERVED_ATTRIBUTES, RUNTIME_PACKAGE, SHARED_COMP_ID, STRUCTURE, SYSTEM_PACKAGE, TRANSFORM_BUILDERS } from "./constants.js";
 import { GLOBAL_COMPONENTS, GLOBAL_MENUS } from "./site-files-tree-mapping.js";
 const TYPE_BY_IMPORT_SOURCE = [
     [new RegExp(`^${SYSTEM_PACKAGE}/(?:layout/)?Page$`), 'page'],
@@ -24,6 +24,8 @@ const KIND_BY_IMPORT_SOURCE = [
     [new RegExp(`^(\\.\\.?/)*${GLOBAL_MENUS}(/|$)`), 'menu'],
     [/^document$/, 'core'],
     [/^document\//, 'document'],
+    [/^@origami-wrappers\//, 'wrapper'],
+    [/^@site\/site-code\/[^/]+$/, 'siteCode'],
 ];
 /** <Band> with `import { Section as Band } from '@wix/origami-system-components/Section'` → 'section'. `<Band.Item>` is Band's. A wrapper is the named export: `<Show>` from the runtime is null. */
 export function getType(element, program) {
@@ -34,6 +36,15 @@ export function getType(element, program) {
     const [, type, imported] = entry;
     return imported === undefined || found.imported === imported ? type : null;
 }
+/** The tags the import reads as the DM's own components ('document') or a global component's reference (identity.ts identityOfTag): no data attributes. */
+const NO_DATA_TYPES = ['page', 'section', 'header', 'footer', 'headerLandmark', 'footerLandmark', ...GLOBAL_SECTIONS];
+/** Converter 0.81: are the tag's attributes saved as its component's data? Yes on a builder component (its import gives a componentType):
+ * imported, not from `document` and not from a local file. No on the DM's own tags (`Page`, the sections) and a global component's reference. */
+export function hasDataAttributes(element, program) {
+    const found = getImport(getTagName(element).split('.')[0], program);
+    const type = getType(element, program);
+    return found !== null && found.kind !== 'core' && !found.source.startsWith('.') && !(type && NO_DATA_TYPES.includes(type));
+}
 /** What an import's source is: 'runtime' for @wix/origami-runtime, 'interact' for @wix/interact/…; null for anything else. */
 export const getImportKind = (source) => KIND_BY_IMPORT_SOURCE.find(([pattern]) => pattern.test(source))?.[1] ?? null;
 /** Where a name of the file comes from; null when no import brings it in. */
@@ -111,6 +122,15 @@ export function getExpression(attribute) {
         return null;
     return bare(value.expression);
 }
+/** The object written out in a value, in parentheses or in an attribute's `{…}`: `x={{ a: 1 }}` → `{ a: 1 }`; null for any other value. */
+export function getObject(node) {
+    if (!node)
+        return null;
+    const value = node.type === 'JSXAttribute' ? getExpression(node) : bare(node);
+    return value?.type === 'ObjectExpression' ? value : null;
+}
+/** Not the component's data: the converter's reserved attributes, and `sharedCompId` (reservedAttributes.ts). */
+export const isReservedAttribute = (name) => RESERVED_ATTRIBUTES.includes(name) || name === SHARED_COMP_ID;
 /** The node inside its parentheses: `((x))` → `x`. */
 export function bare(node) {
     return node.type === 'ParenthesizedExpression' ? bare(node.expression) : node;
@@ -131,6 +151,52 @@ export function isStructure(node) {
     return declarator?.type === 'VariableDeclarator' && declarator.id?.type === 'Identifier' && declarator.id.name === STRUCTURE
         && declarator.parent?.parent?.type === 'ExportNamedDeclaration' && declarator.parent.parent.parent?.type === 'Program';
 }
+/** The node's parent, past parentheses, and its child on the way up: the node itself, or the parentheses around it. */
+function getOuter(node) {
+    let child = node;
+    while (child.parent?.type === 'ParenthesizedExpression')
+        child = child.parent;
+    return [child.parent, child];
+}
+/** The callbacks whose parameters the import reads as bindings: 'template' for a slot's template, `renderItem={(item, index, length) => <X />}`, an attribute's
+ * arrow that returns one element (parseJsx.ts templateCallbackOf); 'transform' for `map(source, (item, index) => ({…}))` and `shape(source, (obj) => ({…}))`
+ * (astValue.ts transformCallbackOf). null for any other node. */
+export function getCallbackKind(syntax) {
+    const node = syntax;
+    if (node.type !== 'ArrowFunctionExpression')
+        return null;
+    let body = node.body;
+    while (body?.type === 'ParenthesizedExpression')
+        body = body.expression;
+    const [outer, child] = getOuter(node);
+    if (body?.type === 'JSXElement' && outer?.type === 'JSXExpressionContainer' && outer.parent?.type === 'JSXAttribute')
+        return 'template';
+    const isTransform = outer?.type === 'CallExpression' && outer.callee?.type === 'Identifier' && TRANSFORM_BUILDERS.includes(outer.callee.name) && outer.arguments?.[1] === child;
+    return isTransform ? 'transform' : null;
+}
+/** A read of a callback's parameter, `item`, `item.name`, `item['link-1']`, which the import reads as a binding (astValue.ts templateReadOf):
+ * 'template' off a renderItem's parameter, 'transform' off a map() or shape() callback's. null for any other value, or inside any other function. */
+export function getParamReadKind(syntax) {
+    const node = syntax;
+    let root = node;
+    while (root.type === 'MemberExpression' && root.object)
+        root = root.object;
+    if (root.type !== 'Identifier')
+        return null;
+    for (let up = node.parent; up && up.type !== 'Program'; up = up.parent) {
+        if (up.type !== 'ArrowFunctionExpression' && up.type !== 'FunctionExpression')
+            continue;
+        const kind = getCallbackKind(up);
+        if (!kind)
+            return null;
+        if (up.params?.some((param) => param.type === 'Identifier' && param.name === root.name))
+            return kind;
+    }
+    return null;
+}
+/** A call, or a read of a renderItem / map() parameter (`item.name`): the import reads it as a binding, not as data (parseJsx.ts takeBoundProp).
+ * Any call: the bindings rule reports one that isn't a builder. */
+export const isBound = (value) => !!value && (value.type === 'CallExpression' || getParamReadKind(value) !== null);
 /** A component in a message: `<Image>` img, or `<Image>` when it has no id. */
 export function ownerOf(element) {
     const id = getId(element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-lint",
-  "version": "1.34.5",
+  "version": "1.34.7",
   "description": "Offline lint for an exported Origami site: lints the pages that changed since the last passing run",
   "type": "module",
   "bin": {
@@ -21,7 +21,7 @@
     "test": "node --test 'test/*.test.ts'"
   },
   "dependencies": {
-    "@wix/origami-fonts": "1.0.1",
+    "@wix/origami-fonts": "1.0.2",
     "oxc-parser": "^0.151.0",
     "oxlint": "^1.39.0",
     "postcss": "^8.5.3"
@@ -51,5 +51,5 @@
       ]
     }
   },
-  "falconPackageHash": "7e83272a42478bff6871d3e1a9841d447d7f2446e79f08856a87192d"
+  "falconPackageHash": "0f6cfa38e9a6a4139df372764355a226553e82d331beca19c870ed7b"
 }