create-bestax 4.2.5 → 4.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/skills/bestax-migrate/references/rbx/prop-map.md +37 -0
- package/templates/skills/bestax-migrate/references/rbx/unmappables.md +20 -20
- package/templates/skills/bestax-migrate/references/react-bulma-components/component-map.md +1 -1
- package/templates/skills/bestax-migrate/references/react-bulma-components/prop-map.md +1 -1
- package/templates/skills/bestax-migrate/references/react-bulma-components/unmappables.md +36 -6
package/package.json
CHANGED
|
@@ -114,3 +114,40 @@ wrong:
|
|
|
114
114
|
- Several of the accepted props are **narrow literal unions**, so `as={SomeComponent}` still
|
|
115
115
|
fails to typecheck even where `as` is allowed — which is deliberate: a visible type error
|
|
116
116
|
beats a silent rewrite.
|
|
117
|
+
|
|
118
|
+
## Refs
|
|
119
|
+
|
|
120
|
+
rbx reaches a component's rendered element with `innerRef`. bestax uses a plain forwarded
|
|
121
|
+
`ref` on the roots that support one, so the codemod renames the prop:
|
|
122
|
+
|
|
123
|
+
| rbx | bestax-bulma | note |
|
|
124
|
+
| ----------------------------------------------------- | ------------ | ------------------------------------------- |
|
|
125
|
+
| `innerRef` on `Button`, `Dropdown`, `Modal`, `Navbar` | `ref` | same node — each root's own element |
|
|
126
|
+
| `innerRef` on `Navbar.Burger`, `Navbar.Link` | `ref` | these two sub-components forward one too |
|
|
127
|
+
| `innerRef` on `Navbar.Item` **with `dropdown`** | `ref` | that one becomes bestax's `Navbar.Dropdown` |
|
|
128
|
+
| `innerRef` on `Modal.Container` | `ref` | that one becomes bestax's `Modal` root |
|
|
129
|
+
|
|
130
|
+
The third row is the `Navbar.Dropdown` collision, and it runs both ways. Your rbx
|
|
131
|
+
`Navbar.Dropdown` is the menu itself (`div.navbar-dropdown`), so it maps to bestax's
|
|
132
|
+
`Navbar.DropdownMenu`, which forwards no ref — `innerRef` there is left alone. bestax reserves
|
|
133
|
+
the name `Navbar.Dropdown` for the outer container, which is what `<Navbar.Item dropdown>`
|
|
134
|
+
becomes, and that one does forward a ref. A plain `<Navbar.Item>` does not, so the rename is
|
|
135
|
+
conditional on the `dropdown` prop.
|
|
136
|
+
|
|
137
|
+
An existing `ref` is passed through untouched — which is safe only where the bestax target
|
|
138
|
+
forwards one. rbx forwards a ref on every component; bestax does so on the form controls plus
|
|
139
|
+
`Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar`, `Navbar.Burger`, `Navbar.Link`,
|
|
140
|
+
`Navbar.Dropdown`, `Dialog`, `Sidebar`, `Toast` and `Carousel`. Carry a `ref` onto anything
|
|
141
|
+
else — `Card`, `Box`, `Section`, `Message`, `Tabs` and most of the catalogue — and it resolves
|
|
142
|
+
to `null` at runtime, with React logging "Function components cannot be given refs" and
|
|
143
|
+
continuing.
|
|
144
|
+
|
|
145
|
+
**The codemod does not flag this**, because neither the universal prop table nor any
|
|
146
|
+
per-component table has a `ref` entry, so check every `ref` you carried over against the list
|
|
147
|
+
above rather than assuming the silent pass-through means it works. The renames above are for
|
|
148
|
+
`innerRef`, and apply only on those eight entries. Anywhere else it leaves `innerRef` alone — move the ref onto a wrapping
|
|
149
|
+
element you control.
|
|
150
|
+
|
|
151
|
+
Note the gap that leaves: other bestax components do forward a ref (the form controls,
|
|
152
|
+
`LinkButton`, `Dialog`, `Sidebar`, `Toast`, `Carousel`), but their rbx `innerRef` is not mapped
|
|
153
|
+
yet, so it passes through untouched rather than being renamed for you.
|
|
@@ -112,7 +112,6 @@ which breakpoints did not carry.
|
|
|
112
112
|
|
|
113
113
|
| TODO | What to do |
|
|
114
114
|
| -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
115
|
-
| `prop:closeOnEsc` on `Modal` | bestax implements no Escape handling at all; add your own keydown listener, or drop the prop |
|
|
116
115
|
| `prop:closeOnBlur` on `Modal` | the migrated compound form renders `Modal.Background` as you wrote it; wire its `onClick` to your `onClose` |
|
|
117
116
|
| `prop:selected`, `prop:text` on `Button` | `className="is-selected"`; for `is-text` use `color="ghost"` or a link |
|
|
118
117
|
| `prop:size` on `Button.Group` / `Tags` / `Message` | set `size` on each child instead |
|
|
@@ -120,38 +119,39 @@ which breakpoints did not carry.
|
|
|
120
119
|
| `prop:color`, `prop:vertical` on `Divider` | bestax's `Divider` takes only `bgColor` and renders an `<hr>` |
|
|
121
120
|
| `component:Divider` (a labelled divider) | rbx rendered `<Divider>OR</Divider>`'s children as a centred label via `data-content`; bestax's `Divider` is a bare `<hr>` and takes no children -- React rejects children on a void element at runtime. Put the label in surrounding markup, or drop it |
|
|
122
121
|
| `prop:direction` on `PageLoader` | no directional variant; drop it or add a class |
|
|
123
|
-
| `prop:innerRef` | the affected roots (`Dropdown`, `Modal`, `Navbar`) are plain function components and forward no ref — drop it, or put the ref on a wrapping element you control |
|
|
124
122
|
| `prop:managed` | bestax components are uncontrolled; drive the `Modal` with `active` and `onClose` |
|
|
125
|
-
| `prop:document` on `Modal` | bestax
|
|
123
|
+
| `prop:document` on `Modal` | bestax portals via `portal`, but it takes `true`, a selector or an element rather than a `Document` — see [Modal: what carries over](#modal-what-carries-over) |
|
|
126
124
|
| `prop:document` on `Navbar` | bestax's `Navbar` has no `document` prop; drop it |
|
|
127
125
|
| `badgeOutlined`, `badgeRounded`, `badgeSize` | bestax's `Badge` has no outline, pill or size variant |
|
|
128
126
|
| `tooltipResponsive` | bestax's `Tooltip` has one `position` for all viewports |
|
|
129
127
|
|
|
130
|
-
## Modal
|
|
128
|
+
## Modal: what carries over
|
|
131
129
|
|
|
132
130
|
`component:Modal` — emitted on **every** Modal the codemod converts, whether or not you passed
|
|
133
131
|
any of the props above.
|
|
134
132
|
|
|
135
|
-
rbx's Modal did three things by default
|
|
133
|
+
rbx's Modal did three things by default. bestax now does two of them the same way, and the
|
|
134
|
+
third is one prop away:
|
|
136
135
|
|
|
137
|
-
| rbx default | bestax
|
|
138
|
-
| -------------------------------- |
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
136
|
+
| rbx default | bestax |
|
|
137
|
+
| -------------------------------- | ------------------------------------------------------------------ |
|
|
138
|
+
| closes on Escape | same, `closeOnEscape` defaults to `true` |
|
|
139
|
+
| clips document scroll while open | same, `lockScroll` defaults to `true` |
|
|
140
|
+
| portals into `document.body` | renders inline unless you set `portal` (`true`, selector, element) |
|
|
142
141
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
142
|
+
So the only one that needs an edit is the portal, and it matters most when an ancestor has
|
|
143
|
+
`overflow: hidden`, `filter` or a `transform` — any of which will clip or re-parent a modal that
|
|
144
|
+
used to escape them. `portal` renders inline on the server and during hydration, then moves once
|
|
145
|
+
the client takes over, so it is safe under SSR.
|
|
146
146
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
re-parent the modal that used to escape them.
|
|
150
|
-
- **Escape** — add a `keydown` listener while the modal is open and call your `onClose`.
|
|
151
|
-
- **Scroll lock** — Bulma still ships `.is-clipped`; put it on `<html>` while the modal is open.
|
|
147
|
+
The codemod maps `closeOnEsc` to `closeOnEscape` for you, so `closeOnEsc={false}` keeps
|
|
148
|
+
suppressing Escape rather than silently inheriting the new default.
|
|
152
149
|
|
|
153
|
-
Background click
|
|
154
|
-
|
|
150
|
+
Background click depends on which form you land in. bestax's `Modal` has a legacy form — bare
|
|
151
|
+
children — where it renders its own background and close button, both wired to `onClose`, so
|
|
152
|
+
`closeOnBlur` carries over for free. A `Modal.Content` or `Modal.Card` child selects the compound
|
|
153
|
+
form instead, which renders only what you wrote; there, wire your own `Modal.Background`'s
|
|
154
|
+
`onClick` to the same `onClose`.
|
|
155
155
|
|
|
156
156
|
## `prop:textColor="white-ter"` / `"white-bis"`
|
|
157
157
|
|
|
@@ -29,7 +29,7 @@ codemod converts it; **Flagged** = it leaves a `TODO(bestax-migrate)` comment (s
|
|
|
29
29
|
| `Media` | `Media` | Auto |
|
|
30
30
|
| `Menu` | `Menu` | Auto |
|
|
31
31
|
| `Message` | `Message` | Auto; `size` flagged |
|
|
32
|
-
| `Modal` | `Modal` | `show`→`active`; `
|
|
32
|
+
| `Modal` | `Modal` | `show`→`active`, `closeOnEsc`→`closeOnEscape`; `closeOnBlur`/`showClose` flagged (compound form renders neither) |
|
|
33
33
|
| `Navbar` | `Navbar` | Auto; see dropdown note below |
|
|
34
34
|
| `Notification` | `Notification` | Auto; `light`→`isLight` |
|
|
35
35
|
| `Pagination` | `Pagination` | `onChange`→`onPageChange`; `delta`/labels/`showFirstLast`/`autoHide` flagged |
|
|
@@ -9,7 +9,7 @@ this automatically for literal values; dynamic values get TODOs.
|
|
|
9
9
|
| RBC | bestax |
|
|
10
10
|
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
11
|
| `renderAs` | `as` — **only** on polymorphic components (Button, Title/SubTitle, Footer, Level.Item, Media\*, Menu.Item, Navbar.Item/Link, Dropdown.Item); elsewhere flagged |
|
|
12
|
-
| `domRef` | flagged —
|
|
12
|
+
| `domRef` | flagged — rename to `ref` on the components that forward one, else use a DOM child |
|
|
13
13
|
| `backgroundColor` | `bgColor` |
|
|
14
14
|
| `textColor` | `textColor` (same) |
|
|
15
15
|
| `colorVariant` | flagged — use `isLight` or a color shade |
|
|
@@ -66,11 +66,26 @@ Drop `delta` (built-in), render conditionally instead of `autoHide`
|
|
|
66
66
|
(`{total > 1 && <Pagination …/>}`), and compose `Pagination.Previous`/`Pagination.Next`
|
|
67
67
|
manually if custom labels are essential.
|
|
68
68
|
|
|
69
|
-
## `Modal` (`
|
|
69
|
+
## `Modal` (`closeOnBlur`, `showClose`)
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
`closeOnEsc` is not in this list: bestax has `closeOnEscape` (default `true`) and the codemod
|
|
72
|
+
renames it, so `closeOnEsc={false}` keeps suppressing Escape rather than inheriting the default.
|
|
73
|
+
|
|
74
|
+
The other two depend on which form the migrated modal lands in. bestax's `Modal` supplies a
|
|
75
|
+
background wired to `onClose` and a floating close button only in its **legacy** form — plain
|
|
76
|
+
children, no compound child. A `Modal.Content` or `Modal.Card` child (which is what almost every
|
|
77
|
+
RBC modal has) selects the **compound** form, and that renders only the children you wrote:
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
<Modal active={show} onClose={close}>
|
|
81
|
+
<Modal.Background onClick={close} />
|
|
82
|
+
<Modal.Content>…</Modal.Content>
|
|
83
|
+
<Modal.Close variant="floating" onClick={close} />
|
|
84
|
+
</Modal>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
So `closeOnBlur` and `showClose={true}` mean "add those two children"; passing either as `false`
|
|
88
|
+
means "drop the prop", since the compound form gives you neither unless you ask.
|
|
74
89
|
|
|
75
90
|
## `touch` / `untilWidescreen` / `untilFullhd` / `{ only: true }` breakpoints
|
|
76
91
|
|
|
@@ -113,8 +128,23 @@ bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
|
|
|
113
128
|
|
|
114
129
|
## `domRef`
|
|
115
130
|
|
|
116
|
-
bestax components don't take `domRef
|
|
117
|
-
|
|
131
|
+
bestax components don't take `domRef`, but many forward a plain `ref` — the form controls
|
|
132
|
+
and `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and
|
|
133
|
+
`Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel`. On those, rename `domRef` to
|
|
134
|
+
`ref` and it works; do not restructure the markup. Everywhere else there is no ref to
|
|
135
|
+
forward — attach the ref to a DOM element inside, or wrap the component in a `<div ref={…}>`.
|
|
136
|
+
|
|
137
|
+
The codemod does not do that rename for you: `domRef` is flagged on every component, so the
|
|
138
|
+
TODO names both cases and you pick. `Navbar.Dropdown` is the trap, and it cuts both ways —
|
|
139
|
+
RBC's is the menu itself, so it maps to bestax's `Navbar.DropdownMenu`, which forwards no ref;
|
|
140
|
+
bestax reserves the name `Navbar.Dropdown` for the outer container, which is what the
|
|
141
|
+
`Navbar.Item` wrapping your dropdown becomes, and that one _does_ forward one. So after the
|
|
142
|
+
codemod runs, read the target name on the line, not the one you wrote.
|
|
143
|
+
|
|
144
|
+
`Button` has the same shape of trap. `<Button remove>` is Bulma's delete cross, so it migrates
|
|
145
|
+
to `<Delete>`, a plain function component that forwards no ref — even though `Button` itself
|
|
146
|
+
does. The codemod detects that case and replaces the general advice with a TODO naming
|
|
147
|
+
`Delete`, so the message on the line is the one to trust.
|
|
118
148
|
|
|
119
149
|
## Helper props dropped from plain-element replacements
|
|
120
150
|
|