bestax-migrate 2.27.0 → 2.29.0

package/dist/sources/bulma-classes/transform.js

@@ -4,7 +4,8 @@
  * Unlike the library sources there is no import to anchor on: a file is in
  * scope when a lowercase JSX element carries a `className` with a Bulma class
  * `class-map.ts` knows. Each such element goes through `plan()`, which
- * converts it only when the component renders exactly the same markup.
+ * converts it only when the component renders exactly the same markup, but
+ * for the one exception it states (Font Awesome's hidden `<i>`).
  *
  * Passes, in order:
  *   1. the shared stylesheet-import pass (a no-op under the default `keep`)
@@ -21,9 +22,10 @@ import { addTodo, findAttr, forgetJsxParens, jsxNameParts, literalValueOf, makeA
 import { collectBoundNames, makeReserve, prefersTabs, resolvesToBinding, } from '../_shared/imports.js';
 import { rewriteStylesheetImports } from '../_shared/css-imports.js';
 import { BESTAX, buildBestaxImport, placeBestaxImport, seedBestaxImport, } from '../_shared/bestax-import.js';
+import { glyphProps } from './glyph.js';
 import { fileContextTodo, plan, } from './plan.js';
 import { REACT_RUNTIMES, } from './project.js';
-import { PLACED, placedFor, ROOTS, rootFor } from './class-map.js';
+import { PLACED, placedFor, ROOTS, rootFor, WRAPPERS, } from './class-map.js';
 import { ruleId } from './rules.js';
 /**
  * A part imported under its flat export (`MenuList`, `FieldLabel`) is the
@@ -103,13 +105,25 @@ function spliceClassName(element, replacement, carried = []) {
     }
     attrs.splice(attrs.indexOf(classAttr), 1, ...replacement);
 }
-/** Put `props`, then what stays in `className`, where `className` was. */
-function writeClassName(j, element, props, className) {
-    const replacement = props.map(([name, value]) => makeAttr(j, name, value === true ? undefined : value));
+/**
+ * Put `lead`, then `props`, then what stays in `className`, where
+ * `className` was.
+ */
+function writeClassName(j, element, props, className, lead = []) {
+    const replacement = [
+        ...lead,
+        ...props.map(([name, value]) => makeAttr(j, name, value === true ? undefined : value)),
+    ];
     if (className)
         replacement.push(makeAttr(j, 'className', className));
     spliceClassName(element, replacement);
 }
+/** A glyph's props as JSX attributes, a list of features as an array. */
+function glyphAttributes(j, glyph) {
+    return glyphProps(glyph).map(([name, value]) => typeof value === 'string'
+        ? makeAttr(j, name, value)
+        : j.jsxAttribute(j.jsxIdentifier(name), j.jsxExpressionContainer(propValue(j, value, false))));
+}
 /**
  * The same, for a `className` a joiner builds: the classes a prop now
  * renders leave the call, each condition that became a prop moves onto it,
@@ -117,7 +131,7 @@ function writeClassName(j, element, props, className) {
  * conditional, no `className` when nothing is left). Returns whether the
  * call is gone.
  */
-function writeJoined(j, element, conversion, joined) {
+function writeJoined(j, element, conversion, joined, lead = []) {
     const { call, statics, parts } = joined;
     const kept = new Set(conversion.className?.split(' ') ?? []);
     const carried = [];
@@ -164,6 +178,7 @@ function writeJoined(j, element, conversion, joined) {
             classes.length > 0 ? [makeAttr(j, 'className', classes.join(' '))] : [];
     }
     spliceClassName(element, [
+        ...lead,
         ...conversion.props.map(([name, value]) => makeAttr(j, name, value === true ? undefined : value)),
         ...conditions,
         ...rest,
@@ -734,6 +749,83 @@ function staticContent(element) {
                 child.expression.type === 'StringLiteral' &&
                 child.expression.value !== '')));
 }
+/** The static classes of a plain HTML element, or undefined. */
+function htmlTokens(element) {
+    const name = element?.openingElement?.name;
+    if (name?.type !== 'JSXIdentifier' || !INTRINSIC.test(name.name)) {
+        return undefined;
+    }
+    const classAttr = findAttr(element, 'className');
+    const className = classAttr ? staticClassName(classAttr) : '';
+    return className === null
+        ? undefined
+        : className.split(/\s+/).filter(Boolean);
+}
+/** Whether a component builds content from props rather than children. */
+function buildsContent(entry) {
+    return (!!entry &&
+        (!!entry.buildsIcons ||
+            !!entry.buildsFile ||
+            entry.rendersText !== undefined ||
+            !!entry.countsChildren ||
+            !!entry.absorbs));
+}
+/**
+ * What names a link or button, as `ElementFacts.clickableAround` says, with
+ * `self` left out of its content: its own `aria-labelledby` or `aria-label`,
+ * written out and not empty, else static text in it that is not inside an
+ * icon or hidden, else nothing. Undefined when it can't be told: a name or
+ * content written as an expression, a `title`, or something inside that may
+ * name it some other way (`kindOf` says which, or an `alt`, an `<svg>` or a
+ * label of its own).
+ */
+function labelOf(clickable, self, kindOf) {
+    if (findAttr(clickable, 'title'))
+        return undefined;
+    for (const name of ['aria-labelledby', 'aria-label']) {
+        const attr = findAttr(clickable, name);
+        if (!attr)
+            continue;
+        const value = attributeValue(attr);
+        if (value === null)
+            return undefined;
+        if (typeof value === 'string' && value.trim() !== '')
+            return name;
+    }
+    let unsure = false;
+    const named = (node) => (node.children ?? []).some((child) => {
+        if (child === self || dropped(child))
+            return false;
+        if (child.type === 'JSXText') {
+            return /\S/.test(jsxTextRenders(child.value));
+        }
+        if (child.type === 'JSXFragment')
+            return named(child);
+        if (child.type !== 'JSXElement') {
+            if (isContent(child))
+                unsure = true;
+            return false;
+        }
+        const kind = kindOf(child);
+        if (kind === 'icon')
+            return false;
+        if (kind === 'opaque') {
+            unsure = true;
+            return false;
+        }
+        const hidden = findAttr(child, 'aria-hidden');
+        if (hidden && attributeValue(hidden) === 'true')
+            return false;
+        if (['alt', 'title', 'aria-label', 'aria-labelledby'].some(name => findAttr(child, name)) ||
+            child.openingElement.name.name === 'svg') {
+            unsure = true;
+        }
+        return named(child);
+    });
+    if (named(clickable))
+        return 'text';
+    return unsure ? undefined : 'none';
+}
 /**
  * An element's content as one prop value: its one element, or its text, or
  * a fragment of them all, each text written as the string it renders.
@@ -1012,6 +1104,121 @@ export default function transform(fileInfo, api, options = {}) {
         readings.set(child, reading);
         return reading;
     };
+    // A bestax component already in the file is read as the markup the table
+    // says it renders, so a TODO that reads what is around an element says the
+    // same once the elements around it have converted.
+    /** The table's entry for a bestax component, with its root class. */
+    const entryFor = (target) => {
+        const root = target &&
+            Object.keys(ROOTS).find(key => ROOTS[key].status === 'mapped' && ROOTS[key].target === target);
+        return root ? { root, entry: ROOTS[root] } : undefined;
+    };
+    /**
+     * The classes an element renders, as far as the file shows: a plain HTML
+     * element's static ones, or a bestax component's root class and the flags
+     * written out as `true` (`<Control hasIconsLeft>` as `control
+     * has-icons-left`).
+     */
+    const renderedTokens = (path) => {
+        const html = htmlTokens(path.node);
+        if (html)
+            return html;
+        const found = entryFor(bestaxTarget(path.node, path));
+        if (!found)
+            return undefined;
+        const flags = Object.entries(found.entry.modifiers ?? {})
+            .filter(([, modifier]) => {
+            const [write, ...more] = modifier.writes;
+            const attr = write && more.length === 0 && write.value === undefined
+                ? findAttr(path.node, write.prop)
+                : undefined;
+            return attr && attributeValue(attr) === true;
+        })
+            .map(([token]) => token);
+        return [found.root, ...flags];
+    };
+    /**
+     * The tag an element renders: its own, or a bestax component's, from a
+     * static `as` or the table; an empty string for a bestax component whose
+     * tag the table doesn't give, and undefined for any other component.
+     */
+    const renderedTag = (path) => {
+        const name = path.node.openingElement.name;
+        if (name.type === 'JSXIdentifier' && INTRINSIC.test(name.name)) {
+            return name.name;
+        }
+        const target = bestaxTarget(path.node, path);
+        if (!target)
+            return undefined;
+        const as = findAttr(path.node, 'as');
+        if (as) {
+            const value = attributeValue(as);
+            return typeof value === 'string' ? value : undefined;
+        }
+        return (entryFor(target)?.entry.tag ??
+            Object.keys(WRAPPERS).find(tag => WRAPPERS[tag] === target) ??
+            '');
+    };
+    /**
+     * Where an element whose target renders a glyph sits, for its TODO: the
+     * classes the element directly around it renders, and the nearest <a> or
+     * <button> around it, reached through markup and bestax components only,
+     * since any other component between could render anything, with what
+     * names that.
+     */
+    const glyphPlace = (elementPath) => {
+        const parent = elementPath.parent;
+        const parentTokens = parent?.node?.type === 'JSXElement' ? renderedTokens(parent) : undefined;
+        let clickable;
+        let tag;
+        for (let up = elementPath.parent; up && !clickable; up = up.parent) {
+            if (up.node?.type !== 'JSXElement')
+                continue;
+            tag = renderedTag(up);
+            if (tag === undefined)
+                break;
+            if (tag === 'a' || tag === 'button')
+                clickable = up;
+        }
+        const kindOf = (element) => {
+            const tokens = htmlTokens(element);
+            const entries = tokens
+                ? tokens.map(token => rootFor(token)).filter(Boolean)
+                : [entryFor(bestaxTarget(element, clickable))?.entry];
+            if (!tokens && !bestaxTarget(element, clickable))
+                return 'opaque';
+            if (entries.some(entry => entry?.readsGlyph))
+                return 'icon';
+            return entries.some(buildsContent) ? 'opaque' : 'open';
+        };
+        const label = clickable && labelOf(clickable.node, elementPath.node, kindOf);
+        return {
+            ...(parentTokens && { parentTokens }),
+            ...(clickable && {
+                clickableAround: { tag: tag, ...(label && { label }) },
+            }),
+        };
+    };
+    /**
+     * An element that goes with the one around it, which renders it from
+     * props, converts no more on its own, and nor does it when that one stays
+     * markup for a person: a re-run has to find the markup it found. Only its
+     * TODOs stay. It has a class to be found by, so it has been planned.
+     */
+    const forget = (node) => {
+        const own = { conversion: null, todos: planned.get(node).todos };
+        planned.set(node, own);
+        readings.delete(node);
+        const at = elements.findIndex(found => found.path.node === node);
+        if (at === -1)
+            return;
+        if (own.todos.length > 0) {
+            elements[at] = { ...elements[at], plan: own, converts: false };
+        }
+        else {
+            elements.splice(at, 1);
+        }
+    };
     /** The element directly around this one, when this is its only child. */
     const holderOf = (elementPath) => {
         const up = elementPath.parent?.node;
@@ -1065,6 +1272,9 @@ export default function transform(fileInfo, api, options = {}) {
             }),
             ...(textOf(element) !== undefined && { text: textOf(element) }),
         };
+        if (facts.tokens.some(token => rootFor(token)?.readsGlyph)) {
+            Object.assign(facts, glyphPlace(elementPath));
+        }
         // A joiner call the codemod can read converts exactly: its fixed classes
         // as for a static className, and each condition on a flag as its prop.
         const joined = className === null
@@ -1085,6 +1295,7 @@ export default function transform(fileInfo, api, options = {}) {
         }
         let result = exact ?? plan(facts);
         const builds = result.conversion?.icons;
+        const glyphs = result.conversion?.glyph !== undefined;
         const converts = result.conversion !== null || result.fold !== undefined;
         const becomes = result.conversion?.target ?? result.fold?.target;
         if (className === null && !exact && becomes) {
@@ -1117,27 +1328,14 @@ export default function transform(fileInfo, api, options = {}) {
             inner.numbers.push(...result.fold.numbers);
         }
         if (builds) {
-            // A `.icon` the target builds from props goes with the element, so it
-            // doesn't convert on its own, and nor does it when a computed
-            // `className` leaves the element to a person: a re-run has to find
-            // the markup it found.
+            // A `.icon` the target builds from props goes with the element.
             const inside = (element.children ?? []).filter((child) => !dropped(child));
-            for (const icon of builds) {
-                const node = inside[icon.index];
-                const own = { conversion: null, todos: planned.get(node).todos };
-                planned.set(node, own);
-                readings.delete(node);
-                const at = elements.findIndex(found => found.path.node === node);
-                if (at === -1)
-                    continue;
-                if (own.todos.length > 0) {
-                    elements[at] = { ...elements[at], plan: own, converts: false };
-                }
-                else {
-                    elements.splice(at, 1);
-                }
-            }
+            for (const icon of builds)
+                forget(inside[icon.index]);
         }
+        // So does the <i> a glyph the target renders takes the place of.
+        if (glyphs)
+            forget(sole);
         planned.set(element, result);
         if (result.conversion || result.fold || result.todos.length > 0) {
             elements.unshift({ path: elementPath, plan: result, converts });
@@ -1313,16 +1511,14 @@ export default function transform(fileInfo, api, options = {}) {
             }
         }
         // A target that renders the element's children itself takes their place:
-        // they go, and so does the closing tag, their comments and its own moving
-        // to the name that stays.
+        // they go, and so does the closing tag, their comments (in their tags
+        // and attributes too: a glyph's <i> has a `className`) and its own
+        // moving to the name that stays.
         const gone = conversion.rendersChildren
             ? [
                 ...(element.children ?? [])
                     .filter((node) => node.type === 'JSXElement')
-                    .flatMap((node) => [
-                    ...(node.comments ?? []),
-                    ...tagComments(node),
-                ]),
+                    .flatMap((node) => commentsWithin(node)),
                 ...[element.closingElement, element.closingElement?.name].flatMap((node) => node?.comments ?? []),
             ]
             : [];
@@ -1333,10 +1529,12 @@ export default function transform(fileInfo, api, options = {}) {
             removeAttr(holder, findAttr(holder, name));
         }
         const joined = joins.get(element);
+        // A glyph the target renders goes first, as the planner wrote it.
+        const lead = conversion.glyph ? glyphAttributes(j, conversion.glyph) : [];
         if (!joined) {
-            writeClassName(j, element, conversion.props, conversion.className);
+            writeClassName(j, element, conversion.props, conversion.className, lead);
         }
-        else if (writeJoined(j, element, conversion, joined)) {
+        else if (writeJoined(j, element, conversion, joined, lead)) {
             unjoined.add(joined.call.callee.name);
         }
         if (conversion.rendersChildren) {

package/dist/sources/rbx/mapping.d.ts

@@ -13,6 +13,16 @@
  * explicit conversions rather than guesses.
  */
 import type { ComponentMapping, PropAction } from '../../types.js';
+/**
+ * Components whose bestax counterpart really does accept `as`. An empty
+ * action passes the prop through untouched; its job is to claim the name so
+ * the universal `AS_TODO` never sees it.
+ *
+ * Several of these narrow `as` to a literal union (`Footer` is
+ * `'footer' | 'div'`, `Control` is `'div'`), so an `as={SomeComponent}` still
+ * surfaces — as a type error the user can see, rather than a silent rewrite.
+ */
+export declare const AS_OK: PropAction;
 /**
  * Helper props rbx mixes into every component via `HelpersProps`. Applied
  * after each component's own prop map, to whatever attributes are left.

package/dist/sources/rbx/mapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA+BnE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CA4CtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAitBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}
+{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAoBnE;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,EAAE,UAAe,CAAC;AAEpC;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CA4CtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAutBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}

package/dist/sources/rbx/mapping.js

@@ -18,7 +18,7 @@ const DOCS = 'https://bestax.io/docs';
 const numeric = { numberToString: true };
 /**
  * `as` is universal in rbx — `forwardRefAs` puts it on every component — but
- * bestax declares it on only ~16 components, several of them constrained to a
+ * bestax declares it on only some components, several of them constrained to a
  * narrow literal union (`Footer` is `'footer' | 'div'`). So the default is a
  * TODO, and the components that really do accept `as` opt in with `AS_OK` in
  * their own prop map, which runs first and wins.
@@ -36,7 +36,7 @@ const AS_TODO = {
  * `'footer' | 'div'`, `Control` is `'div'`), so an `as={SomeComponent}` still
  * surfaces — as a type error the user can see, rather than a silent rewrite.
  */
-const AS_OK = {};
+export const AS_OK = {};
 /**
  * Helper props rbx mixes into every component via `HelpersProps`. Applied
  * after each component's own prop map, to whatever attributes are left.
@@ -182,6 +182,7 @@ export const MAPPING = {
         status: 'mapped',
         target: 'Container',
         props: {
+            as: AS_OK,
             fluid: {},
             // bestax's ContainerBreakpoint is 'tablet' | 'desktop' | 'widescreen';
             // rbx accepts all six, so the other three are type errors if passed on.
@@ -729,10 +730,14 @@ export const MAPPING = {
     Panel: {
         status: 'mapped',
         target: 'Panel',
-        props: { color: {} },
+        props: { as: AS_OK, color: {} },
         subs: {
             Heading: { status: 'mapped', target: 'Panel.Heading' },
-            Block: { status: 'mapped', target: 'Panel.Block', props: { active: {} } },
+            Block: {
+                status: 'mapped',
+                target: 'Panel.Block',
+                props: { active: {}, as: AS_OK },
+            },
             Icon: { status: 'partial', target: 'Panel.Icon', special: 'icon' },
             Tab: {
                 status: 'mapped',
@@ -815,6 +820,7 @@ export const MAPPING = {
         status: 'mapped',
         target: 'Hero',
         props: {
+            as: AS_OK,
             color: {},
             // rbx's five sizes are bestax's five, `fullheight-with-navbar`
             // included, and both render the one `is-<size>` class.
@@ -825,8 +831,8 @@ export const MAPPING = {
         },
         subs: {
             Body: { status: 'mapped', target: 'Hero.Body' },
-            Foot: { status: 'mapped', target: 'Hero.Foot' },
-            Head: { status: 'mapped', target: 'Hero.Head' },
+            Foot: { status: 'mapped', target: 'Hero.Foot', props: { as: AS_OK } },
+            Head: { status: 'mapped', target: 'Hero.Head', props: { as: AS_OK } },
         },
     },
     Section: { status: 'mapped', target: 'Section', props: { size: {} } },

package/dist/sources/react-bulma-components/mapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQnE;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAgFtD,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAUhE,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAmqBpD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAsEhD,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}
+{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQnE;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAgFtD,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAUhE,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAirBpD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAsEhD,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}

package/dist/sources/react-bulma-components/mapping.js

@@ -252,6 +252,7 @@ export const MAPPING = {
         status: 'mapped',
         target: 'Container',
         props: {
+            renderAs: { rename: 'as' },
             max: { booleanToProp: { name: 'isMax' } },
             breakpoint: {
                 // 'tablet' / 'desktop' stay as breakpoint="..." (same prop in bestax)
@@ -430,6 +431,7 @@ export const MAPPING = {
         status: 'mapped',
         target: 'Hero',
         props: {
+            renderAs: { rename: 'as' },
             color: {},
             size: {
                 valueTodo: {
@@ -442,9 +444,17 @@ export const MAPPING = {
             hasNavbar: { booleanToProp: { name: 'fullheightWithNavbar' } },
         },
         subs: {
-            Header: { status: 'mapped', target: 'Hero.Head' },
+            Header: {
+                status: 'mapped',
+                target: 'Hero.Head',
+                props: { renderAs: { rename: 'as' } },
+            },
             Body: { status: 'mapped', target: 'Hero.Body' },
-            Footer: { status: 'mapped', target: 'Hero.Foot' },
+            Footer: {
+                status: 'mapped',
+                target: 'Hero.Foot',
+                props: { renderAs: { rename: 'as' } },
+            },
         },
     },
     Icon: {
@@ -688,7 +698,7 @@ export const MAPPING = {
     Panel: {
         status: 'mapped',
         target: 'Panel',
-        props: { color: {} },
+        props: { renderAs: { rename: 'as' }, color: {} },
         subs: {
             Header: { status: 'mapped', target: 'Panel.Heading' },
             Tabs: {
@@ -699,7 +709,11 @@ export const MAPPING = {
                     Tab: { status: 'mapped', special: 'panel-tab' },
                 },
             },
-            Block: { status: 'mapped', target: 'Panel.Block', props: activeKept },
+            Block: {
+                status: 'mapped',
+                target: 'Panel.Block',
+                props: { ...activeKept, renderAs: { rename: 'as' } },
+            },
             Icon: { status: 'partial', target: 'Panel.Icon', special: 'icon' },
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-migrate",
-  "version": "2.27.0",
+  "version": "2.29.0",
   "description": "Codemods for migrating existing React apps from other Bulma libraries to @allxsmith/bestax-bulma",
   "type": "module",
   "bin": {
@@ -40,7 +40,7 @@
     "jscodeshift": "^17.3.0",
     "parse5": "^7.3.0",
     "property-information": "^7.2.0",
-    "@allxsmith/bestax-bulma": "^5.37.0"
+    "@allxsmith/bestax-bulma": "^5.39.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",