Compiled components dropped caller attributes, and reactive children froze

.github/workflows/ci.yml

@@ -129,6 +129,15 @@ jobs:
       - name: Test the library compiler host
         run: bun run test:library
 
+      # The application host resolves a consumer's declared runtime by reading
+      # `solid-layouts`'s built entry off disk, so the runtime has to exist
+      # before these run. Without this the job fails on a missing
+      # `packages/solid-layouts/dist/index.js`, which reads as a broken
+      # resolver rather than an unbuilt dependency.
+      - name: Build the runtime the application host resolves against
+        working-directory: packages/solid-layouts
+        run: bun install --frozen-lockfile && bun run build
+
       - name: Test the application compiler host
         run: bun run test:application
 

Test-UI/bundle/components/button/Button.generated.tsx

@@ -23,13 +23,13 @@ type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled">
   className?: string;
 };
 
-const Button: Layout<typeof button, ButtonProps> = ({ slot, children }, p) => {
+const Button: Layout<typeof button, ButtonProps> = (_stable, p) => {
   const disabled = Boolean(p.isDisabled) || Boolean(p.isPending);
 
   return (
     <button
       type="button"
-      {...slot.root}
+      {..._stable.slot.root}
       data-pending={p.isPending ? "true" : "false"}
       data-selected={p.isSelected ? "true" : "false"}
       disabled={disabled}
@@ -45,14 +45,14 @@ const Button: Layout<typeof button, ButtonProps> = ({ slot, children }, p) => {
       }}
     >
       <Show when={p.isPending}>
-        <span {...slot.spinner} aria-hidden="true" />
+        <span {..._stable.slot.spinner} aria-hidden="true" />
       </Show>
       <Show when={p.startIcon}>
-        <span {...slot.startIcon}>{p.startIcon}</span>
+        <span {..._stable.slot.startIcon}>{p.startIcon}</span>
       </Show>
-      {children}
+      {_stable.children}
       <Show when={p.endIcon}>
-        <span {...slot.endIcon}>{p.endIcon}</span>
+        <span {..._stable.slot.endIcon}>{p.endIcon}</span>
       </Show>
     </button>
   );

Test-UI/bundle/components/chip/Chip.generated.tsx

@@ -19,32 +19,32 @@ export type ChipProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & {
   className?: string;
 };
 
-const Chip: Layout<typeof chip, ChipProps> = ({ slot, children }, p) => (
+const Chip: Layout<typeof chip, ChipProps> = (_stable, p) => (
   <span
-    {...slot.root}
+    {..._stable.slot.root}
     data-disabled={p.isDisabled ? "true" : "false"}
     data-removable={p.onRemove ? "true" : "false"}
   >
     <Show when={p.startIcon}>
-      <span {...slot.startIcon}>{p.startIcon}</span>
+      <span {..._stable.slot.startIcon}>{p.startIcon}</span>
     </Show>
-    <span {...slot.label}>{children}</span>
+    <span {..._stable.slot.label}>{_stable.children}</span>
     <Show when={p.onRemove && p.endIcon}>
       <button
         type="button"
-        {...slot.remove}
+        {..._stable.slot.remove}
         aria-label={p.removeButtonLabel ?? "Remove"}
         disabled={Boolean(p.isDisabled)}
         onClick={(event) => {
           event.stopPropagation();
           p.onRemove?.();
         }}
       >
-        <span {...slot.removeIcon}>{p.endIcon}</span>
+        <span {..._stable.slot.removeIcon}>{p.endIcon}</span>
       </button>
     </Show>
     <Show when={!p.onRemove && p.endIcon}>
-      <span {...slot.endIcon}>{p.endIcon}</span>
+      <span {..._stable.slot.endIcon}>{p.endIcon}</span>
     </Show>
   </span>
 );

Test-UI/bundle/components/flex/Flex.generated.tsx

@@ -18,9 +18,9 @@ export type FlexProps = Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> & {
   className?: string;
 };
 
-const Flex: Layout<typeof flex, FlexProps> = ({ slot, children }, p) => (
-  <Dynamic component={p.as ?? "div"} {...slot.root}>
-    {children}
+const Flex: Layout<typeof flex, FlexProps> = (_stable, p) => (
+  <Dynamic component={p.as ?? "div"} {..._stable.slot.root}>
+    {_stable.children}
   </Dynamic>
 );
 

Test-UI/bundle/components/icon/Icon.generated.tsx

@@ -12,17 +12,17 @@ export type IconProps = IComponentBaseProps & {
   name?: string;
 };
 
-const Icon: Layout<typeof icon, IconProps> = ({ slot, children }, p) => {
+const Icon: Layout<typeof icon, IconProps> = (_stable, p) => {
   const width = p.width ?? 24;
   const height = p.height ?? 24;
 
   const classes = createMemo(() =>
-    twMerge(slot.root.class, p.name, p.class, p.className),
+    twMerge(_stable.slot.root.class, p.name, p.class, p.className),
   );
 
   return (
     <span
-      {...slot.root}
+      {..._stable.slot.root}
       {...{ class: classes() }}
       style={{
         width: `${width}px`,

fixtures/cases/bare-identifiers/output.tsx

@@ -2,11 +2,11 @@ import type { Layout } from "solid-layouts";
 import { Show } from "solid-js";
 import { accordionTrigger } from "./Accordion.recipe";
 
-export const AccordionTriggerLayout: Layout<typeof accordionTrigger> = ({ slot, children }, p) => (
-  <button {...slot.root} type="button">
-    {children}
+export const AccordionTriggerLayout: Layout<typeof accordionTrigger> = (_stable, p) => (
+  <button {..._stable.slot.root} type="button">
+    {_stable.children}
     <Show when={p.showIndicator}>
-      <span {...slot.indicator} />
+      <span {..._stable.slot.indicator} />
     </Show>
   </button>
 );

packages/rsbuild-plugin-solid-layouts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsbuild-plugin-solid-layouts",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Rsbuild integration for the Solid Layouts library and application compilers",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
     "index.d.ts"
   ],
   "dependencies": {
-    "solid-layouts-oxc": "0.1.6"
+    "solid-layouts-oxc": "0.1.7"
   },
   "peerDependencies": {
     "@rsbuild/core": ">=1.3.0"