bestax-migrate 2.2.1 → 2.3.0

package/dist/sources/rbx/transform.js

@@ -22,7 +22,7 @@
 import { BADGE_PROPS, MAPPING, TOOLTIP_PROPS, UNIVERSAL_PROPS, resolveMapping, } from './mapping.js';
 import { addTodo, attributesOf, findAttr, jsxNameParts, literalValueOf, removeAttr, renameElement, } from '../_shared/jsx-utils.js';
 import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
-import { collectBoundNames, makeReserve, nameOf, prefersTabs, resolvesToBinding, } from '../_shared/imports.js';
+import { collectBoundNames, makeAliasRegistry, makeReserve, nameOf, prefersTabs, resolvesToBinding, } from '../_shared/imports.js';
 import { flattenResponsiveProps, RESPONSIVE_KINDS } from './responsive.js';
 import { runSpecial } from './specials.js';
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -108,6 +108,21 @@ export default function transform(fileInfo, api, options = {}) {
             addTodo(ctx, path, 'imports', `\`${source}\` reaches into rbx's internals; bestax's equivalents are its \`Theme\` and \`ConfigProvider\` helpers (https://bestax.io/docs/api/helpers/theme)`);
         }
     });
+    // A barrel re-export reaches the library without an import declaration,
+    // so nothing above saw it; it cannot be rewritten (a compound bestax
+    // target has no single name to re-export) and must not vanish silently.
+    root
+        .find(j.ExportNamedDeclaration)
+        .filter(p => String(p.node.source?.value ?? '') === RBX)
+        .forEach(p => {
+        addTodo(ctx, p, 'imports', `re-exports from '${RBX}' were not migrated; import the components, migrate them, then re-export the bestax ones by hand`);
+    });
+    root
+        .find(j.ExportAllDeclaration)
+        .filter(p => String(p.node.source?.value ?? '') === RBX)
+        .forEach(p => {
+        addTodo(ctx, p, 'imports', `\`export * from '${RBX}'\` was not migrated; re-export the bestax components you need by hand`);
+    });
     // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
     // `bestax` (default): everything converges on the recommended combined
     // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
@@ -199,68 +214,20 @@ export default function transform(fileInfo, api, options = {}) {
     // The scope each binding was collected in, so a reference can be checked
     // against the binding it actually resolves to rather than matched by name.
     const programScope = root.find(j.Program).paths()[0]?.scope;
-    // Aliases are keyed by the AST node that owns the declaring scope, not by
-    // bare name. Two functions can each destructure `Header` from a different
-    // component; a name-keyed map let the second overwrite the first, and both
-    // declarations were then pruned while both `<Header…>` references were left
-    // resolving to nothing.
-    //
-    // Resolution walks the reference's ANCESTORS rather than consulting
-    // `scope.lookup`, because by the time references are rewritten the alias
-    // pass has already pruned the declaration -- so the binding is gone from
-    // the scope table, and `path.scope` objects are not identity-stable across
-    // traversals either.
-    const aliasesByOwner = new Map();
-    const ownersFor = (name) => {
-        const owners = [];
-        for (const [owner, perScope] of aliasesByOwner) {
-            if (perScope.has(name))
-                owners.push(owner);
-        }
-        return owners;
-    };
-    const aliasAt = (name, at) => {
-        const owners = ownersFor(name);
-        if (owners.length === 0)
-            return undefined;
-        // Without a reference location there is nothing to walk, so the only
-        // owner is the best answer available. WITH one, always walk: an unrelated
-        // `Header` parameter in another function must not resolve to the alias
-        // merely because the alias is the only one by that name. A single-owner
-        // shortcut here rewrote such a parameter to `{ Header: Card.Header }`,
-        // which is not even valid syntax.
-        if (at === undefined) {
-            return owners.length === 1
-                ? aliasesByOwner.get(owners[0]).get(name)
-                : undefined;
-        }
-        let cursor = at;
-        while (cursor) {
-            if (cursor.node !== undefined) {
-                const hit = aliasesByOwner.get(cursor.node)?.get(name);
-                if (hit) {
-                    // The walk finds the nearest OWNER, but a binding can intervene
-                    // between the reference and that owner: `function F(Header)` under
-                    // a module-level `const { Header } = Card` shadows the alias, and
-                    // resolving through it rewrote the parameter itself to
-                    // `F(Card.Header)`. If the scope table still binds the name
-                    // somewhere other than the owner, that nearer binding wins. (After
-                    // the alias declaration is pruned the lookup returns nothing for
-                    // the alias itself, which is the case this must keep allowing.)
-                    const declaring = at.scope?.lookup(name)?.path?.node;
-                    if (declaring !== undefined &&
-                        declaring !== null &&
-                        declaring !== cursor.node) {
-                        return undefined;
-                    }
-                    return hit;
-                }
-            }
-            cursor = cursor.parent;
-        }
-        return undefined;
-    };
-    const anyAlias = (name) => ownersFor(name).length > 0;
+    const { register: registerAlias, aliasAt, anyAlias } = makeAliasRegistry();
+    /**
+     * Locals a re-export names. Pruning the declaration that binds one of them
+     * (`const { Header } = Card; export { Header };`) leaves the specifier
+     * pointing at nothing, so those declarations are kept: the value-reference
+     * pass rewrites their initialiser to the bestax component, and the export
+     * goes on re-exporting the same member.
+     */
+    const reExported = new Set();
+    root.find(j.ExportSpecifier).forEach(p => {
+        const local = p.node.local ?? p.node.exported;
+        if (local?.type === 'Identifier')
+            reExported.add(local.name);
+    });
     // ---- 1b. Resolve `const { Item } = Card` destructuring -----------------
     root.find(j.VariableDeclarator).forEach(path => {
         const node = path.node;
@@ -283,13 +250,8 @@ export default function transform(fileInfo, api, options = {}) {
                 prop.value?.type === 'Identifier') {
                 const owner = path.scope
                     ?.path?.node;
-                let perScope = aliasesByOwner.get(owner);
-                if (!perScope) {
-                    perScope = new Map();
-                    aliasesByOwner.set(owner, perScope);
-                }
                 const target = [...basePath, prop.key.name];
-                perScope.set(prop.value.name, target);
+                registerAlias(owner, prop.value.name, target);
                 aliases.set(prop.value.name, target);
                 // Pruning the declaration is only safe if every use of the alias will
                 // actually be rewritten. For a name the table cannot map, the JSX is
@@ -310,7 +272,10 @@ export default function transform(fileInfo, api, options = {}) {
                 allResolved = false;
             }
         }
-        if (allResolved) {
+        const exportsAnAlias = node.id.properties.some((prop) => (prop.type === 'ObjectProperty' || prop.type === 'Property') &&
+            prop.value?.type === 'Identifier' &&
+            reExported.has(prop.value.name));
+        if (allResolved && !exportsAnAlias) {
             const declaration = path.parent;
             if (declaration?.node?.type === 'VariableDeclaration' &&
                 declaration.node.declarations.length === 1) {
@@ -426,6 +391,16 @@ export default function transform(fileInfo, api, options = {}) {
             bound.add(head);
     });
     ctx.reserve = makeReserve(ctx, bound);
+    // Names the passes actually asked for. `ctx.needed` is also seeded from an
+    // existing bestax import's specifiers below (so JSX reuses their locals),
+    // and that seeding alone must not turn a type-only specifier into a value
+    // import nobody needed.
+    const requested = new Set();
+    const baseReserve = ctx.reserve;
+    ctx.reserve = root => {
+        requested.add(root);
+        return baseReserve(root);
+    };
     // Merge with an existing bestax import: reuse its locals verbatim.
     // Only a declaration that already uses NAMED specifiers can absorb more of
     // them. `import * as Bestax from '…'` cannot: a namespace specifier may not
@@ -434,13 +409,24 @@ export default function transform(fileInfo, api, options = {}) {
     const existingBestax = root
         .find(j.ImportDeclaration, { source: { value: BESTAX } })
         .paths()
-        .find(p => (p.node.specifiers ?? []).every((spec) => spec.type === 'ImportSpecifier'));
+        .find(p => 
+    // A type-only declaration cannot take a value specifier: merging a
+    // component into `import type { … }` erases it at runtime.
+    p.node.importKind !== 'type' &&
+        (p.node.specifiers ?? []).every((spec) => spec.type === 'ImportSpecifier'));
     const preExistingImports = new Set();
     if (existingBestax) {
         for (const spec of existingBestax.node.specifiers ?? []) {
             if (spec.type === 'ImportSpecifier' && spec.local) {
+                // The local name is reused either way, so the JSX never needs an
+                // alias. But an inline `type` specifier (`import { type Box }`) is
+                // not a value binding: it is not counted as already imported, so the
+                // component is written as a value below — onto this specifier, which
+                // keeps its name, rather than as a duplicate.
                 ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
-                preExistingImports.add(nameOf(spec.imported));
+                if (spec.importKind !== 'type') {
+                    preExistingImports.add(nameOf(spec.imported));
+                }
             }
         }
     }
@@ -633,6 +619,10 @@ export default function transform(fileInfo, api, options = {}) {
             parentType === 'JSXMemberExpression') {
             return;
         }
+        // A TS qualified name (`RBC.ButtonProps` in a type position) is erased at
+        // runtime, so it is not a value use of the namespace at all.
+        if (parentType === 'TSQualifiedName')
+            return;
         // A namespace binding in a real value position. `rbx.Button` is still a
         // mappable component reference, so fall through to the member-expression
         // branch below with an empty prefix (the namespace itself is not part of
@@ -643,6 +633,46 @@ export default function transform(fileInfo, api, options = {}) {
                 parentNode.object === path.node &&
                 !parentNode.computed)) {
             namespaceStillReferenced = true;
+            addTodo(ctx, path, 'value-reference', `\`${name}\` is the library's namespace import used as a plain value (destructured, or passed around); nothing reached through it was migrated — reference its components as \`${name}.Component\` or import them by name, then re-run`);
+            return;
+        }
+        // Members, keys and signatures name a thing; they do not reference the
+        // import. An export specifier does, and is handled on its own: a flat
+        // target keeps the public name (\`export { SubTitle as Subtitle }\`), a
+        // dotted one cannot be re-exported under a member name and is flagged.
+        if (parentType === 'ExportSpecifier') {
+            if (parentNode.local !== path.node)
+                return;
+            const exportedName = nameOf(parentNode.exported ?? parentNode.local);
+            const mapping = aliasPath ? resolveMapping(aliasPath) : MAPPING[imported];
+            if (mapping &&
+                mapping.status !== 'todo' &&
+                mapping.target &&
+                !mapping.target.includes('.')) {
+                const local = ctx.reserve(mapping.target);
+                // Replace the node: recast reprints a specifier whose identifiers were
+                // swapped in place in its original shorthand form, dropping the `as`.
+                path.parent.replace(j.exportSpecifier.from({
+                    local: j.identifier(local),
+                    exported: j.identifier(exportedName),
+                }));
+                ctx.dirty = true;
+                return;
+            }
+            ctx.retained.add(imported);
+            addTodo(ctx, path, 'value-reference', `\`${name}\` is re-exported; ${mapping?.target ? `its bestax counterpart \`${mapping.target}\` is a member of \`${mapping.target.split('.')[0]}\` and cannot be re-exported under this name` : 'it has no bestax counterpart to re-export'} — migrate the consumers by hand`);
+            return;
+        }
+        if (parentType === 'TSEnumMember' ||
+            ((parentType === 'ObjectMethod' ||
+                parentType === 'ClassMethod' ||
+                parentType === 'ClassProperty' ||
+                parentType === 'PropertyDefinition' ||
+                parentType === 'MethodDefinition' ||
+                parentType === 'TSPropertySignature' ||
+                parentType === 'TSMethodSignature') &&
+                parentNode.key === path.node &&
+                !parentNode.computed)) {
             return;
         }
         // Non-reference positions: member property names and object keys.
@@ -835,15 +865,61 @@ export default function transform(fileInfo, api, options = {}) {
     if (imports.size > 0) {
         const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
         const freshNames = [...ctx.needed.entries()]
-            .filter(([imported]) => !preExistingImports.has(imported))
+            .filter(([imported]) => requested.has(imported) && !preExistingImports.has(imported))
             .sort((a, b) => a[0].localeCompare(b[0]));
         const bestaxImport = freshNames.length > 0
             ? j.importDeclaration(freshNames.map(([imported, local]) => j.importSpecifier(j.identifier(imported), j.identifier(local))), j.stringLiteral(BESTAX))
             : null;
+        /**
+    
+         * A pruned declaration takes its comments with it — a licence header, an
+    
+         * eslint directive. Hand them to what replaces it, or to the next statement.
+    
+         */
+        const carryComments = (node, importPath) => {
+            const comments = node.comments ?? [];
+            if (comments.length === 0)
+                return;
+            const body = importPath.parent?.node?.body ?? [];
+            const index = body.indexOf(node);
+            // The fresh specifiers are merged INTO an existing bestax import when there
+            // is one, and the `bestaxImport` node is then discarded — so the comments
+            // have to follow the declaration that survives, not the one that does not.
+            const carrier = (existingBestax ? existingBestax.node : bestaxImport) ??
+                (index >= 0 ? body[index + 1] : undefined);
+            if (carrier) {
+                carrier.comments = [...comments, ...(carrier.comments ?? [])];
+            }
+            else if (index > 0) {
+                // The import was the last statement: the comments stay where they
+                // were, after what precedes it.
+                const previous = body[index - 1];
+                previous.comments = [
+                    ...(previous.comments ?? []),
+                    ...comments.map((c) => ({
+                        ...c,
+                        leading: false,
+                        trailing: true,
+                    })),
+                ];
+            }
+            else {
+                // The import was the only statement: the comments become the file's.
+                const program = importPath.parent?.node;
+                if (program)
+                    program.comments = [...comments, ...(program.comments ?? [])];
+            }
+            node.comments = [];
+        };
         let inserted = false;
         // A retained rbx specifier must never collide with a bestax import local
         // (possible when one component is both JSX-migrated and value-retained).
-        const bestaxLocals = new Set(ctx.needed.values());
+        // Only a VALUE local can collide at runtime: a type-only specifier the
+        // seeding above recorded, and nothing promoted, binds no value.
+        const bestaxLocals = new Set([...ctx.needed.entries()]
+            .filter(([imported]) => requested.has(imported) || preExistingImports.has(imported))
+            .map(([, local]) => local));
         for (const path of rbxImportPaths) {
             const node = path.node;
             const keepSpecifiers = (node.specifiers ?? []).filter((spec) => {
@@ -862,10 +938,23 @@ export default function transform(fileInfo, api, options = {}) {
             });
             if (!inserted) {
                 if (existingBestax && bestaxImport) {
-                    existingBestax.node.specifiers = [
-                        ...(existingBestax.node.specifiers ?? []),
-                        ...bestaxImport.specifiers,
-                    ];
+                    const current = existingBestax.node.specifiers ?? [];
+                    const appended = [];
+                    for (const fresh of bestaxImport.specifiers) {
+                        // A type-only specifier for the same name becomes the value
+                        // import (a value import carries the type too); appending a
+                        // second `Box` beside `type Box` would be a duplicate identifier.
+                        const typeOnly = current.find((spec) => spec.type === 'ImportSpecifier' &&
+                            spec.importKind === 'type' &&
+                            nameOf(spec.imported) === nameOf(fresh.imported));
+                        if (typeOnly) {
+                            typeOnly.importKind = null;
+                        }
+                        else {
+                            appended.push(fresh);
+                        }
+                    }
+                    existingBestax.node.specifiers = [...current, ...appended];
                 }
                 else if (bestaxImport) {
                     path.insertBefore(bestaxImport);
@@ -892,6 +981,7 @@ export default function transform(fileInfo, api, options = {}) {
                 }
             }
             else {
+                carryComments(node, path);
                 path.prune();
             }
             ctx.dirty = true;

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

@@ -26,7 +26,7 @@ export const UNIVERSAL_PROPS = {
         todo: 'this bestax component has no `as` prop; restructure the element instead',
     },
     domRef: {
-        todo: 'bestax-bulma components do not take domRef; use a ref on a DOM child or wrap the component',
+        todo: 'bestax-bulma has no `domRef`. The form controls and `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel` forward a ref — on those, rename `domRef` to `ref`. 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: put the ref on a DOM child or wrap the component',
     },
     // ColorProps
     backgroundColor: { rename: 'bgColor' },
@@ -555,12 +555,12 @@ export const MAPPING = {
         props: {
             show: { rename: 'active' },
             onClose: {},
-            closeOnEsc: { todo: 'bestax Modal closes on Esc by default; remove' },
+            closeOnEsc: { rename: 'closeOnEscape' },
             closeOnBlur: {
-                todo: 'bestax Modal background click closes when onClose is set; remove',
+                todo: 'bestax Modal closes on background click only in its legacy form; the Modal.Content/Modal.Card child selects the compound form, which renders only the children you wrote — add a `<Modal.Background>` whose `onClick` calls your close handler, or drop the prop if you passed false',
             },
             showClose: {
-                todo: 'bestax Modal renders the close button when onClose is set; remove',
+                todo: 'bestax Modal renders a close button only in its legacy form; the Modal.Content/Modal.Card child selects the compound form, which renders only the children you wrote — add a `<Modal.Close variant="floating">` whose `onClick` calls your close handler, or drop the prop if you passed false',
             },
             document: { drop: true },
         },

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

@@ -1 +1 @@
-{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAkB9D,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,cAAc,GACnB,IAAI,CAkHN"}
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/responsive.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAS9D,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,cAAc,GACnB,IAAI,CAkHN"}

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

@@ -11,25 +11,13 @@
  * TODO. Non-object or dynamic values get a TODO.
  */
 import { RESPONSIVE_BREAKPOINTS } from './mapping.js';
-import { addAttr, addTodo, attributesOf, makeAttr, removeAttr, } from '../_shared/jsx-utils.js';
+import { addAttr, addTodo, attributesOf, literalOf, makeAttr, removeAttr, } from '../_shared/jsx-utils.js';
 const TEXT_ALIGN_MAP = {
     center: 'centered',
     justify: 'justified',
     left: 'left',
     right: 'right',
 };
-function literalOf(prop) {
-    const v = prop.value;
-    if (!v)
-        return undefined;
-    if (v.type === 'StringLiteral')
-        return v.value;
-    if (v.type === 'NumericLiteral')
-        return v.value;
-    if (v.type === 'BooleanLiteral')
-        return v.value;
-    return undefined;
-}
 export function flattenResponsiveProps(ctx, path, element, kind) {
     const { j } = ctx;
     for (const attr of [...attributesOf(element)]) {
@@ -57,7 +45,7 @@ export function flattenResponsiveProps(ctx, path, element, kind) {
                 continue;
             }
             const key = prop.key?.name ?? prop.key?.value;
-            const literal = literalOf(prop);
+            const literal = literalOf(prop.value);
             if (key === 'display' && typeof literal === 'string') {
                 if (literal === 'hidden') {
                     addAttr(element, makeAttr(j, `visibility${suffix}`, 'hidden'));

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

@@ -1 +1 @@
-{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAWL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAsvB9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}
+{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAWL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAOL,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAgxB9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}

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

@@ -9,8 +9,19 @@
  */
 import { RESPONSIVE_BREAKPOINTS, UNIVERSAL_PROPS } from './mapping.js';
 import { addAttr, addTodo, attributesOf, buildJsxName, findAttr, literalValueOf, makeAttr, plainElement, removeAttr, resolveBooleanish, } from '../_shared/jsx-utils.js';
-import { alignTarget, makeStripModifierProps, mergeClassName, parseIconClasses, } from '../_shared/specials-utils.js';
+import { alignTarget, makeStripModifierProps, mergeClassName, applyIconProps, parseIconClasses, } from '../_shared/specials-utils.js';
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * The attributes a plain-element rewrite keeps: the modifier strip decides
+ * which NAMED props survive, and the element's spreads ride along in their
+ * original places — they are the caller's own props, which a plain element
+ * takes as readily as the component did. `attributesOf` filters spreads out,
+ * so passing its result alone dropped `{...rest}` with no TODO.
+ */
+function keptAttrs(ctx, path, element, where) {
+    const kept = new Set(stripModifierProps(ctx, path, attributesOf(element), where));
+    return (element.openingElement.attributes ?? []).filter((a) => a.type === 'JSXSpreadAttribute' || kept.has(a));
+}
 const stripModifierProps = makeStripModifierProps(UNIVERSAL_PROPS, RESPONSIVE_BREAKPOINTS);
 const SPECIALS = {
     /**
@@ -61,7 +72,18 @@ const SPECIALS = {
             // (`remove={false}`, `remove=""`, `remove={0}`) → just drop the prop.
             removeAttr(element, attr);
             ctx.dirty = true;
-            return resolved === 'truthy' ? { target: 'Delete' } : {};
+            if (resolved !== 'truthy')
+                return {};
+            // The universal `domRef` advice lists `Button` among the components that
+            // forward a ref, but this element is no longer a Button: `Delete` is a
+            // plain function component. Claim the prop so that advice cannot fire
+            // here, and say what actually applies to the target we picked.
+            const handledProps = [];
+            if (findAttr(element, 'domRef')) {
+                addTodo(ctx, path, 'prop:domRef', 'this `<Button remove>` became bestax `<Delete>`, which forwards no ref — the general `domRef` advice does not apply here; put the ref on a DOM child or wrap the component');
+                handledProps.push('domRef');
+            }
+            return { target: 'Delete', handledProps };
         }
         addTodo(ctx, path, 'prop:remove', '`remove` has a dynamic value; this can render as either a Button or a Delete cross — split the branch by hand');
         return {};
@@ -113,7 +135,8 @@ const SPECIALS = {
         if (headingTruthy && !subtitleDynamic) {
             removeAttr(element, headingAttr);
             const className = mergeClassName(ctx, path, element, subtitleTruthy ? 'heading subtitle' : 'heading', 'Heading');
-            const rest = stripModifierProps(ctx, path, attributesOf(element).filter(a => !['size', 'weight', 'spaced', 'subtitle'].includes(a.name.name)), 'Heading');
+            const consumed = new Set(stripModifierProps(ctx, path, attributesOf(element).filter(a => !['size', 'weight', 'spaced', 'subtitle'].includes(a.name.name)), 'Heading'));
+            const rest = (element.openingElement.attributes ?? []).filter((a) => a.type === 'JSXSpreadAttribute' || consumed.has(a));
             const replacement = plainElement(ctx.j, 'p', className, rest, element.children ?? []);
             path.replace(replacement);
             ctx.dirty = true;
@@ -296,7 +319,7 @@ const SPECIALS = {
             }
         }
         className = mergeClassName(ctx, path, element, className, 'Form.Label');
-        const rest = stripModifierProps(ctx, path, attributesOf(element), 'Form.Label');
+        const rest = keptAttrs(ctx, path, element, 'Form.Label');
         path.replace(plainElement(ctx.j, 'label', className, rest, element.children ?? []));
         ctx.dirty = true;
         return { replaced: true };
@@ -317,7 +340,7 @@ const SPECIALS = {
             }
         }
         className = mergeClassName(ctx, path, element, className, 'Form.Help');
-        const rest = stripModifierProps(ctx, path, attributesOf(element), 'Form.Help');
+        const rest = keptAttrs(ctx, path, element, 'Form.Help');
         path.replace(plainElement(ctx.j, 'p', className, rest, element.children ?? []));
         ctx.dirty = true;
         return { replaced: true };
@@ -347,7 +370,9 @@ const SPECIALS = {
                 const value = cls && cls.value && cls.value.type === 'StringLiteral'
                     ? cls.value.value
                     : null;
-                return value ? parseIconClasses(value) : null;
+                const read = value ? parseIconClasses(value) : null;
+                // An app's own class on the <i> has no home on bestax's glyph.
+                return read && read.leftovers.length === 0 ? read : null;
             })()
             : null;
         if (!parsed) {
@@ -355,11 +380,8 @@ const SPECIALS = {
             return {};
         }
         if (!findAttr(element, 'name') && !findAttr(element, 'icon')) {
-            addAttr(element, makeAttr(ctx.j, 'name', parsed.name));
-            if (parsed.library)
-                addAttr(element, makeAttr(ctx.j, 'library', parsed.library));
-            if (parsed.variant)
-                addAttr(element, makeAttr(ctx.j, 'variant', parsed.variant));
+            applyIconProps(ctx, path, element, parsed);
+            return {};
         }
         element.children = [];
         if (element.closingElement) {
@@ -372,7 +394,7 @@ const SPECIALS = {
     /** RBC Loader is a plain <div class="loader"> — keep exactly that. */
     'plain-loader'(ctx, path, element) {
         const className = mergeClassName(ctx, path, element, 'loader', 'Loader');
-        const rest = stripModifierProps(ctx, path, attributesOf(element), 'Loader');
+        const rest = keptAttrs(ctx, path, element, 'Loader');
         path.replace(plainElement(ctx.j, 'div', className, rest, element.children ?? []));
         ctx.dirty = true;
         return { replaced: true };
@@ -419,7 +441,7 @@ const SPECIALS = {
             removeAttr(element, activeAttr);
         }
         className = mergeClassName(ctx, path, element, className, 'Panel.Tabs.Tab');
-        const rest = stripModifierProps(ctx, path, attributesOf(element), 'Panel.Tabs.Tab');
+        const rest = keptAttrs(ctx, path, element, 'Panel.Tabs.Tab');
         path.replace(plainElement(ctx.j, 'a', className, rest, element.children ?? []));
         ctx.dirty = true;
         return { replaced: true };
@@ -439,7 +461,7 @@ const SPECIALS = {
             removeAttr(element, activeAttr);
         }
         liClass = mergeClassName(ctx, path, element, liClass, 'Breadcrumb.Item');
-        const anchorAttrs = stripModifierProps(ctx, path, attributesOf(element), 'Breadcrumb.Item');
+        const anchorAttrs = keptAttrs(ctx, path, element, 'Breadcrumb.Item');
         const children = element.children ?? [];
         const solidChildren = children.filter((c) => !(c.type === 'JSXText' && c.value.trim() === ''));
         // `<Breadcrumb.Item><a href>…</a></Breadcrumb.Item>` already carries its
@@ -475,7 +497,7 @@ const SPECIALS = {
             return { replaced: true };
         }
         const className = mergeClassName(ctx, path, element, 'table-container', 'Table.Container');
-        const rest = stripModifierProps(ctx, path, attributesOf(element), 'Table.Container');
+        const rest = keptAttrs(ctx, path, element, 'Table.Container');
         path.replace(plainElement(ctx.j, 'div', className, rest, element.children ?? []));
         ctx.dirty = true;
         return { replaced: true };
@@ -496,9 +518,14 @@ const SPECIALS = {
             solid[0].openingElement.name.name === 'a';
         if (alreadyAnchor)
             return {};
-        const anchorAttrs = stripModifierProps(ctx, path, attributesOf(element).filter(a => !['active', 'className'].includes(a.name.name)), 'Tabs.Tab');
-        for (const attr of attributesOf(element)) {
-            if (!['active', 'className'].includes(attr.name.name)) {
+        const anchorKept = new Set(stripModifierProps(ctx, path, attributesOf(element).filter(a => !['active', 'className'].includes(a.name.name)), 'Tabs.Tab'));
+        // The anchor takes everything that is not the tab's own state, spreads
+        // included: they were the caller's props on the element that becomes the
+        // <a>, and `attributesOf` filters them out.
+        const anchorAttrs = (element.openingElement.attributes ?? []).filter((a) => a.type === 'JSXSpreadAttribute' || anchorKept.has(a));
+        for (const attr of [...(element.openingElement.attributes ?? [])]) {
+            if (attr.type === 'JSXSpreadAttribute' ||
+                !['active', 'className'].includes(attr.name.name)) {
                 removeAttr(element, attr);
             }
         }

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

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA2CvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CAyzBpB"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA4CvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CAq8BpB"}