bestax-migrate 2.26.0 → 2.28.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.
@@ -129,7 +129,7 @@ export const MAPPING = {
     },
     forwardRefAs: {
         status: 'todo',
-        todo: '`forwardRefAs` is rbx-internal and has no counterpart. bestax forwards a ref from the form controls, plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Timeline`, `Timeline.Item`, `Toast` and `ToggleButton` — pass `ref` directly on those, though not on the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers, which forward none. Mind the `Navbar.Dropdown` collision: your rbx `Navbar.Dropdown` is the menu and becomes `Navbar.DropdownMenu`, which forwards no ref, while bestax `Navbar.Dropdown` — the container your `<Navbar.Item dropdown>` becomes — does. The rest, `Box` included, forward no ref: React 18 drops it with a warning, React 19 leaves it wherever the rest props go, so put the ref on a wrapping element you control',
+        todo: '`forwardRefAs` is rbx-internal and has no counterpart. bestax forwards a ref from the form controls, plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Timeline`, `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item` — pass `ref` directly on those, though not on the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers, which forward none. Mind the `Navbar.Dropdown` collision: your rbx `Navbar.Dropdown` is the menu and becomes `Navbar.DropdownMenu`, which forwards no ref, while bestax `Navbar.Dropdown` — the container your `<Navbar.Item dropdown>` becomes — does. The rest, `Box` included, forward no ref: React 18 drops it with a warning, React 19 leaves it wherever the rest props go, so put the ref on a wrapping element you control',
     },
     // ---- elements -----------------------------------------------------------
     Block: { status: 'mapped', target: 'Block' },
@@ -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

@@ -27,7 +27,7 @@ export const UNIVERSAL_PROPS = {
         todo: 'this bestax component has no `as` prop; restructure the element instead',
     },
     domRef: {
-        todo: 'bestax-bulma has no `domRef`. The form controls, plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Timeline`, `Timeline.Item`, `Toast` and `ToggleButton` forward a ref — on those, rename `domRef` to `ref`, though not on the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers, which forward none. Mind the `Navbar.Dropdown` collision: the `Navbar.Item` that wrapped your dropdown became bestax `Navbar.Dropdown` and forwards one, while your `Navbar.Dropdown` became `Navbar.DropdownMenu` and does not. The rest forward no ref: React 18 drops it with a warning, React 19 leaves it wherever the rest props go, so put the ref on a DOM child or wrap the component',
+        todo: 'bestax-bulma has no `domRef`. The form controls, plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `EmptyState`, `Kbd`, `Kbd.Group`, `Link`, `LinkButton`, `Loader`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `SegmentedControl`, `SegmentedControl.Segment`, `Sidebar`, `Timeline`, `Timeline.Item`, `Toast`, `ToggleButton`, `TreeView` and `TreeView.Item` forward a ref — on those, rename `domRef` to `ref`, though not on the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers, which forward none. Mind the `Navbar.Dropdown` collision: the `Navbar.Item` that wrapped your dropdown became bestax `Navbar.Dropdown` and forwards one, while your `Navbar.Dropdown` became `Navbar.DropdownMenu` and does not. The rest forward no ref: React 18 drops it with a warning, React 19 leaves it wherever the rest props go, so put the ref on a DOM child or wrap the component',
     },
     // ColorProps
     backgroundColor: { rename: 'bgColor' },
@@ -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.26.0",
+  "version": "2.28.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.36.1"
+    "@allxsmith/bestax-bulma": "^5.38.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
@@ -72,10 +72,11 @@
     "validate:corpus:rbx": "pnpm run build && node scripts/validate-corpus-rbx.mjs",
     "validate:corpus:bloomer": "pnpm run build && node scripts/validate-corpus-bloomer.mjs",
     "validate:corpus:bulma-classes": "pnpm run build && node scripts/validate-corpus-bulma-classes.mjs",
+    "validate:corpus:templates": "pnpm run build && node scripts/validate-corpus-templates.mjs",
     "format": "prettier --write \"src/**/*.{ts,tsx}\" \"e2e/**/*.ts\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"e2e/**/*.ts\"",
     "clean": "rimraf dist",
     "release": "npx semantic-release"
   },
-  "readme": "# bestax-migrate\n\n[![npm version](https://img.shields.io/npm/v/bestax-migrate.svg)](https://www.npmjs.com/package/bestax-migrate)\n[![npm downloads](https://img.shields.io/npm/dm/bestax-migrate.svg)](https://www.npmjs.com/package/bestax-migrate)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://badge.socket.dev/npm/package/bestax-migrate/latest)](https://socket.dev/npm/package/bestax-migrate/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/bestax-migrate#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nCodemods that migrate existing React apps to [`@allxsmith/bestax-bulma`](https://www.npmjs.com/package/@allxsmith/bestax-bulma) — the actively maintained React component library for **Bulma v1**.\n\nCurrently supported sources:\n\n| Source                                                                           | Status                                                                               |\n| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |\n| [`react-bulma-components`](https://github.com/couds/react-bulma-components) (v4) | ✅ All 32 components mapped (a few patterns are flagged as TODOs)                    |\n| [`rbx`](https://github.com/dfee/rbx) (v2)                                        | ✅ Full export surface mapped (a few patterns are flagged as TODOs)                  |\n| [`bloomer`](https://github.com/AlgusDark/bloomer) (0.6)                          | ✅ All 108 exports mapped (Font Awesome 4 icons and Bulma 0.4's `Nav` are flagged)   |\n| `bulma-classes`: Bulma's classes on plain JSX, no library                        | ✅ Converts an element only when bestax renders the same markup; the rest is flagged |\n| `bulma-classes` on HTML: static pages and templates styled with Bulma            | ✅ Writes a React component beside each page; its head and scripts are flagged       |\n\nPass the source as the first argument: `bestax-migrate <source> <paths…>`.\n\n## Requirements\n\n**Node.js 22 or newer.** Node 18 and 20 are both past end-of-life. On an older runtime the CLI\nexits immediately with an explicit upgrade message.\n\nThis applies only to the Node version the codemod itself runs on. It places no requirement on\nthe app being migrated — the source is read as text and is never executed.\n\n## Usage\n\n```bash\n# Preview what would change (no writes)\npnpm dlx bestax-migrate react-bulma-components src/ --dry\n# …or, for an rbx or bloomer app\npnpm dlx bestax-migrate rbx src/ --dry\npnpm dlx bestax-migrate bloomer src/ --dry\n# …or, for an app that writes Bulma's classes on plain JSX\npnpm dlx bestax-migrate bulma-classes src/ --dry\n# …or, for static HTML pages styled with Bulma: name a page, or walk a folder with -e html\n# (-e html,htm takes .htm pages too)\npnpm dlx bestax-migrate bulma-classes src/pages/login/index.html --dry\npnpm dlx bestax-migrate bulma-classes -e html src/pages/ --dry\n\n# Apply the migration\npnpm dlx bestax-migrate react-bulma-components src/\n```\n\nnpm and yarn work too: `npx bestax-migrate …` / `yarn dlx bestax-migrate …`.\n\nThe codemod uses [jscodeshift](https://github.com/facebook/jscodeshift) to:\n\n- rewrite the source library's imports to `@allxsmith/bestax-bulma` (including destructuring and namespace imports)\n- rename components and compound sub-components (`Form.Textarea` → `TextArea`, `Card.Footer.Item` → `Card.FooterItem`, `Hero.Footer` → `Hero.Foot`, …) — and, for bloomer, its flat names onto bestax's compounds (`CardHeaderTitle` → `Card.Header.Title`)\n- convert props (`renderAs` → `as`, `loading` → `isLoading`, numeric spacing/text sizes → string unions, `textAlign=\"center\"` → `textAlign=\"centered\"`, …)\n- flatten responsive breakpoint objects (`mobile={{ size: 4 }}` → `sizeMobile={4}`) and bloomer's `isDisplay`/`isHidden` strings, arrays and objects (`isHidden=\"touch\"` → `visibilityTouch=\"hidden\"`)\n- for `bulma-classes`, turn raw Bulma markup into components and props (`<a className=\"button is-primary\">` → `<Button as=\"a\" color=\"primary\">`, `<p className=\"has-text-centered mt-4\">` → `<Paragraph textAlign=\"centered\" mt=\"4\">`), converting an element only when bestax renders exactly the same markup\n- for `bulma-classes` on an HTML page, write a React module beside it (`index.html` → `index.tsx`, or `.jsx` when the package isn't TypeScript) whose default export is the page's body as a component (`LoginPage`), converted as the same markup written as JSX would be. The page is never changed and an existing module is never overwritten; the head, the `<html>` and `<body>` attributes, scripts and inline handlers are left as `html-*` TODOs\n- restructure patterns bestax models differently (`Table.Container`, Navbar dropdowns, `Form.Help`, icon-font children → `<Icon name=…>`)\n- migrate stylesheets: CSS imports converge on `@allxsmith/bestax-bulma/bestax.css`, and SCSS files move from Bulma 0.9's `@import` + `$var !default` overrides to `@use 'bulma/sass' with (…)` plus `@use '@allxsmith/bestax-bulma/scss/extras'`\n- update `package.json`: remove the source library, add `@allxsmith/bestax-bulma`, raise a declared pre-1.0 `bulma` to `^1` (adding it only when your sources import `bulma/…` directly — otherwise it arrives transitively), and swap the dead `node-sass` for dart `sass` (no install is ever run). Migrating **rbx** is what frees an app from Bulma 0.7.5: rbx pinned it as a _direct_ dependency, so the app could not choose its own Bulma version at all. The four Bulma extensions rbx also pulled in (`bulma-badge`, `bulma-divider`, `bulma-pageloader`, `bulma-tooltip`) are **reported rather than removed** — bestax replaces all four, but a manifest entry is a deliberate declaration and your own Sass may import them. A **bloomer** app declared its own Bulma 0.6, which is what gets bumped. For **bulma-classes** there is no library to remove, and by default (`--css keep`) the app's Bulma version, Sass and stylesheet imports all stay: its own Bulma already styles every class a converted element renders. `--css bestax` or `--css bulma` moves it to Bulma v1 like the other sources\n\nAnything without a safe automatic conversion is left in place with a `// TODO(bestax-migrate): …` comment, and the run ends with a report of every TODO by file and line. TODOs are expected output, not errors — resolve them with the migration guide ([react-bulma-components](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components), [rbx](https://bestax.io/docs/guides/getting-started/migration/rbx), [bloomer](https://bestax.io/docs/guides/getting-started/migration/bloomer), [Bulma classes](https://bestax.io/docs/guides/getting-started/migration/bulma-classes)), or let the [`bestax-migrate` Agent Skill](https://bestax.io/docs/skills/intro) walk them for you:\n\n```bash\nnpx skills add https://github.com/allxsmith/bestax --skill bestax-migrate\n```\n\n### Through the Codemod Registry\n\nbestax-migrate is also in the [Codemod Registry](https://app.codemod.com/registry) as `bestax-migrate`, for teams that run their migrations through Codemod. That package runs this CLI from npm at a pinned release, which can trail the newest one:\n\n```bash\n# Preview (no writes)\nnpx codemod bestax-migrate --workflow preview --param source=react-bulma-components\n# Apply\nnpx codemod bestax-migrate --param source=react-bulma-components\n```\n\nRun it from your app root. `--param paths=\"src lib\"` (default `src`) and `--param options=\"--css keep\"` pass through to the CLI. Codemod's own `--dry-run` skips the shell step this package runs, so use the `preview` workflow for a dry run.\n\n## Options\n\n| Flag                 | Description                                                                                    |\n| -------------------- | ---------------------------------------------------------------------------------------------- |\n| `--dry`, `-d`        | Report what would change without writing files                                                 |\n| `--print`, `-p`      | Print transformed sources to stdout                                                            |\n| `--extensions`, `-e` | File extensions to include in a folder (default `js,jsx,ts,tsx,scss,sass`; `html` for pages)   |\n| `--css <mode>`       | Stylesheet target: `bestax`, `bulma`, or `keep` (default `bestax`; `keep` for `bulma-classes`) |\n| `--no-deps`          | Skip updating package.json dependencies                                                        |\n\n## After the codemod\n\n1. Run your package manager's install (the codemod rewrote `package.json` but never installs)\n2. Search for `TODO(bestax-migrate)` and resolve each comment\n3. Typecheck/build and review the rendered app\n\nFull walkthrough: [react-bulma-components migration guide](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components) · [rbx migration guide](https://bestax.io/docs/guides/getting-started/migration/rbx) · [bloomer migration guide](https://bestax.io/docs/guides/getting-started/migration/bloomer) · [Bulma classes migration guide](https://bestax.io/docs/guides/getting-started/migration/bulma-classes).\n\n## Hardened by default\n\nA codemod rewrites your source in place, so how it is built and published matters:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Check the **Provenance** section on the [npm page](https://www.npmjs.com/package/bestax-migrate#provenance), or run `npm audit signatures`.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **The libraries this tool migrates away from are never installed here** — source fixtures are read as text only, so no unmaintained third-party package enters the dependency tree.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, and CodeQL, Dependency Review, and Dependabot run continuously alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n## Telemetry\n\n`bestax-migrate` can send one **anonymous** usage event after a successful\nrun — only if you opt in when asked (once, on an interactive terminal). The\nevent is just the run's shape — source library, CSS mode, the dry/deps flags, a\ncapped changed-file count, and per-rule TODO counts — plus the CLI version,\nNode major version, and OS platform name. Never file paths, file contents,\ncode, names, IPs, or machine IDs, and no identifier exists that could link two\nevents together. Opt out any time with `--no-telemetry`,\n`BESTAX_TELEMETRY=0`, or `DO_NOT_TRACK=1`.\n\nFull disclosure of every field and control: [Telemetry guide](https://bestax.io/docs/guides/telemetry)\n\n## License\n\nSource code licensed MIT\n"
+  "readme": "# bestax-migrate\n\n[![npm version](https://img.shields.io/npm/v/bestax-migrate.svg)](https://www.npmjs.com/package/bestax-migrate)\n[![npm downloads](https://img.shields.io/npm/dm/bestax-migrate.svg)](https://www.npmjs.com/package/bestax-migrate)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://badge.socket.dev/npm/package/bestax-migrate/latest)](https://socket.dev/npm/package/bestax-migrate/overview)\n[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361)\n[![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/bestax-migrate#provenance)\n[![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nCodemods that migrate existing React apps to [`@allxsmith/bestax-bulma`](https://www.npmjs.com/package/@allxsmith/bestax-bulma) — the actively maintained React component library for **Bulma v1**.\n\nCurrently supported sources:\n\n| Source                                                                           | Status                                                                               |\n| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |\n| [`react-bulma-components`](https://github.com/couds/react-bulma-components) (v4) | ✅ All 32 components mapped (a few patterns are flagged as TODOs)                    |\n| [`rbx`](https://github.com/dfee/rbx) (v2)                                        | ✅ Full export surface mapped (a few patterns are flagged as TODOs)                  |\n| [`bloomer`](https://github.com/AlgusDark/bloomer) (0.6)                          | ✅ All 108 exports mapped (Font Awesome 4 icons and Bulma 0.4's `Nav` are flagged)   |\n| `bulma-classes`: Bulma's classes on plain JSX, no library                        | ✅ Converts an element only when bestax renders the same markup; the rest is flagged |\n| `bulma-classes` on HTML: static pages and templates styled with Bulma            | ✅ Writes a React component beside each page; its head and scripts are flagged       |\n\nPass the source as the first argument: `bestax-migrate <source> <paths…>`.\n\n## Requirements\n\n**Node.js 22 or newer.** Node 18 and 20 are both past end-of-life. On an older runtime the CLI\nexits immediately with an explicit upgrade message.\n\nThis applies only to the Node version the codemod itself runs on. It places no requirement on\nthe app being migrated — the source is read as text and is never executed.\n\n## Usage\n\n```bash\n# Preview what would change (no writes)\npnpm dlx bestax-migrate react-bulma-components src/ --dry\n# …or, for an rbx or bloomer app\npnpm dlx bestax-migrate rbx src/ --dry\npnpm dlx bestax-migrate bloomer src/ --dry\n# …or, for an app that writes Bulma's classes on plain JSX\npnpm dlx bestax-migrate bulma-classes src/ --dry\n# …or, for static HTML pages styled with Bulma: name a page, or walk a folder with -e html\n# (-e html,htm takes .htm pages too)\npnpm dlx bestax-migrate bulma-classes src/pages/login/index.html --dry\npnpm dlx bestax-migrate bulma-classes -e html src/pages/ --dry\n\n# Apply the migration\npnpm dlx bestax-migrate react-bulma-components src/\n```\n\nnpm and yarn work too: `npx bestax-migrate …` / `yarn dlx bestax-migrate …`.\n\nThe codemod uses [jscodeshift](https://github.com/facebook/jscodeshift) to:\n\n- rewrite the source library's imports to `@allxsmith/bestax-bulma` (including destructuring and namespace imports)\n- rename components and compound sub-components (`Form.Textarea` → `TextArea`, `Card.Footer.Item` → `Card.FooterItem`, `Hero.Footer` → `Hero.Foot`, …) — and, for bloomer, its flat names onto bestax's compounds (`CardHeaderTitle` → `Card.Header.Title`)\n- convert props (`renderAs` → `as`, `loading` → `isLoading`, numeric spacing/text sizes → string unions, `textAlign=\"center\"` → `textAlign=\"centered\"`, …)\n- flatten responsive breakpoint objects (`mobile={{ size: 4 }}` → `sizeMobile={4}`) and bloomer's `isDisplay`/`isHidden` strings, arrays and objects (`isHidden=\"touch\"` → `visibilityTouch=\"hidden\"`)\n- for `bulma-classes`, turn raw Bulma markup into components and props (`<a className=\"button is-primary\">` → `<Button as=\"a\" color=\"primary\">`, `<p className=\"has-text-centered mt-4\">` → `<Paragraph textAlign=\"centered\" mt=\"4\">`), converting an element only when bestax renders exactly the same markup\n- for `bulma-classes` on an HTML page, write a React module beside it (`index.html` → `index.tsx`, or `.jsx` when the package isn't TypeScript) whose default export is the page's body as a component (`LoginPage`), converted as the same markup written as JSX would be. The page is never changed and an existing module is never overwritten; the head, the `<html>` and `<body>` attributes, the stylesheets and scripts it loads, and inline handlers are left as `html-*` TODOs, except that under `--css bestax` or `--css bulma` the module imports the stylesheet in place of the page's Bulma `<link>`\n- restructure patterns bestax models differently (`Table.Container`, Navbar dropdowns, `Form.Help`, icon-font children → `<Icon name=…>`)\n- migrate stylesheets: CSS imports converge on `@allxsmith/bestax-bulma/bestax.css`, and SCSS files move from Bulma 0.9's `@import` + `$var !default` overrides to `@use 'bulma/sass' with (…)` plus `@use '@allxsmith/bestax-bulma/scss/extras'`\n- update `package.json`: remove the source library, add `@allxsmith/bestax-bulma`, raise a declared pre-1.0 `bulma` to `^1` (adding it only when your sources import `bulma/…` directly — otherwise it arrives transitively), and swap the dead `node-sass` for dart `sass` (no install is ever run). Migrating **rbx** is what frees an app from Bulma 0.7.5: rbx pinned it as a _direct_ dependency, so the app could not choose its own Bulma version at all. The four Bulma extensions rbx also pulled in (`bulma-badge`, `bulma-divider`, `bulma-pageloader`, `bulma-tooltip`) are **reported rather than removed** — bestax replaces all four, but a manifest entry is a deliberate declaration and your own Sass may import them. A **bloomer** app declared its own Bulma 0.6, which is what gets bumped. For **bulma-classes** there is no library to remove, and by default (`--css keep`) the app's Bulma version, Sass and stylesheet imports all stay: its own Bulma already styles every class a converted element renders. `--css bestax` or `--css bulma` moves it to Bulma v1 like the other sources\n\nAnything without a safe automatic conversion is left in place with a `// TODO(bestax-migrate): …` comment, and the run ends with a report of every TODO by file and line. TODOs are expected output, not errors — resolve them with the migration guide ([react-bulma-components](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components), [rbx](https://bestax.io/docs/guides/getting-started/migration/rbx), [bloomer](https://bestax.io/docs/guides/getting-started/migration/bloomer), [Bulma classes](https://bestax.io/docs/guides/getting-started/migration/bulma-classes)), or let the [`bestax-migrate` Agent Skill](https://bestax.io/docs/skills/intro) walk them for you:\n\n```bash\nnpx skills add https://github.com/allxsmith/bestax --skill bestax-migrate\n```\n\n### Through the Codemod Registry\n\nbestax-migrate is also in the [Codemod Registry](https://app.codemod.com/registry) as `bestax-migrate`, for teams that run their migrations through Codemod. That package runs this CLI from npm at a pinned release, which can trail the newest one:\n\n```bash\n# Preview (no writes)\nnpx codemod bestax-migrate --workflow preview --param source=react-bulma-components\n# Apply\nnpx codemod bestax-migrate --param source=react-bulma-components\n```\n\nRun it from your app root. `--param paths=\"src lib\"` (default `src`) and `--param options=\"--css keep\"` pass through to the CLI. Codemod's own `--dry-run` skips the shell step this package runs, so use the `preview` workflow for a dry run.\n\n## Options\n\n| Flag                 | Description                                                                                    |\n| -------------------- | ---------------------------------------------------------------------------------------------- |\n| `--dry`, `-d`        | Report what would change without writing files                                                 |\n| `--print`, `-p`      | Print transformed sources to stdout                                                            |\n| `--extensions`, `-e` | File extensions to include in a folder (default `js,jsx,ts,tsx,scss,sass`; `html` for pages)   |\n| `--css <mode>`       | Stylesheet target: `bestax`, `bulma`, or `keep` (default `bestax`; `keep` for `bulma-classes`) |\n| `--no-deps`          | Skip updating package.json dependencies                                                        |\n\n## After the codemod\n\n1. Run your package manager's install (the codemod rewrote `package.json` but never installs)\n2. Search for `TODO(bestax-migrate)` and resolve each comment\n3. Typecheck/build and review the rendered app\n\nFull walkthrough: [react-bulma-components migration guide](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components) · [rbx migration guide](https://bestax.io/docs/guides/getting-started/migration/rbx) · [bloomer migration guide](https://bestax.io/docs/guides/getting-started/migration/bloomer) · [Bulma classes migration guide](https://bestax.io/docs/guides/getting-started/migration/bulma-classes).\n\n## Hardened by default\n\nA codemod rewrites your source in place, so how it is built and published matters:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Check the **Provenance** section on the [npm page](https://www.npmjs.com/package/bestax-migrate#provenance), or run `npm audit signatures`.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **The libraries this tool migrates away from are never installed here** — source fixtures are read as text only, so no unmaintained third-party package enters the dependency tree.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, and CodeQL, Dependency Review, and Dependabot run continuously alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n## Telemetry\n\n`bestax-migrate` can send one **anonymous** usage event after a successful\nrun — only if you opt in when asked (once, on an interactive terminal). The\nevent is just the run's shape — source library, CSS mode, the dry/deps flags, a\ncapped changed-file count, and per-rule TODO counts — plus the CLI version,\nNode major version, and OS platform name. Never file paths, file contents,\ncode, names, IPs, or machine IDs, and no identifier exists that could link two\nevents together. Opt out any time with `--no-telemetry`,\n`BESTAX_TELEMETRY=0`, or `DO_NOT_TRACK=1`.\n\nFull disclosure of every field and control: [Telemetry guide](https://bestax.io/docs/guides/telemetry)\n\n## License\n\nSource code licensed MIT\n"
 }