ReviewOS

stacks/stx

Props given to a component whose client script imports modules never reach its children

#2145
Closed chris opened this 2 days ago ·
2 days ago

A prop given to a component whose <script client> has import statements never reaches the component's own children, even though the same prop works for a component without imports.

Reproduction (stacksjs/stacks Dashboard/Auth components, stx 0.2.756):

<ForgotPassword icon="i-hugeicons-castle-01" eyebrow="Level two" />
<ForgotPasswordDashboard icon="i-hugeicons-castle-01" eyebrow="Level three" />

ForgotPassword (no imports) reads its props with useReactiveProp('icon', ...) and hands them to AuthCard: the card shows the castle and "Level two". ForgotPasswordDashboard imports dashboardApi and declares the same two props, with useReactiveProp and then with defineProps, and passes :icon="icon()" to <ForgotPassword>: its wrapper has data-stx-props with both values and data-stx-parent-bindings="icon eyebrow ...", but the card renders the default cube and no eyebrow. Placing the declarations after the import, or before it, makes no difference.

Expected: a prop a wrapper receives is readable in its script whether or not that script imports modules.

Effect: an app cannot brand the sign-in card through LoginDashboard, RegisterDashboard and the other *Dashboard wrappers; stacksjs/stacks#3086 delivers the hooks at the card and page level and records this gap.

2 days ago

Withdrawn: this was my mistake, not an stx defect. I tested a copy of the dashboard components in the app's own folder, where their relative imports (../../../../functions/...) no longer resolved, so the script failed silently and the props looked lost. With the imports resolving, a wrapper whose script imports modules forwards its props correctly on stx 0.2.762: the Login, Register, ForgotPassword and Reset dashboards each render the icon and eyebrow they are given. Closing; sorry for the noise.

Sign in to comment on this issue.