feat: allow to forward asChild property (#54)

Allow to forward `asChild` property due to `shouldForwardAsChild` flag in config

Closes #53

Author: notcodev

src/index.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, test, beforeEach } from "vitest";
+import { describe, expect, test, beforeEach, vi } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
 import { cva, VariantProps } from "class-variance-authority";
 import { twc, createTwc, TwcComponentProps } from "./index";
@@ -9,6 +9,7 @@ import {
   ButtonProps as AriaButtonProps,
 } from "react-aria-components";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Slot } from "@radix-ui/react-slot";
 
 describe("twc", () => {
   beforeEach(cleanup);
@@ -228,6 +229,38 @@ describe("twc", () => {
     expect(title.classList.contains("text-xl")).toBe(true);
   });
 
+  test('forwards "asChild" property to custom component when "shouldForwardAsChild" is true', () => {
+    const twx = createTwc({
+      shouldForwardAsChild: true,
+    });
+
+    type PrimitiveProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      asChild?: boolean;
+    };
+
+    const handleClick = vi.fn<[React.MouseEvent<HTMLButtonElement>], void>()
+    const Primitive = ({ asChild, ...props }: PrimitiveProps) => {
+      const Comp = asChild ? Slot : 'button'
+      return <Comp onClick={handleClick} {...props}/>;
+    };
+
+    const StyledPrimitive = twx(Primitive)`text-xl`
+
+    render(
+      <StyledPrimitive asChild>
+        <a>Click me!</a>
+      </StyledPrimitive>
+    )
+
+    const element = screen.getByText('Click me!')
+    element.click()
+
+    expect(element.tagName).toBeDefined()
+    expect(element.tagName).toBe('A')
+    expect(element.classList.contains('text-xl')).toBe(true)
+    expect(handleClick).toBeCalled()
+  });
+
   test("works with tailwind-merge", () => {
     const twx = createTwc({
       compose: twMerge,

src/index.tsx

@@ -95,6 +95,12 @@ export type Config<TCompose extends AbstractCompose> = {
    * underlying component. Defaults to `prop => prop[0] !== "$"`.
    */
   shouldForwardProp?: (prop: string) => boolean;
+
+  /**
+   * The flag responsible for behavior of asChild prop. When true asChild
+   * prop would be forwarded to the underlying component. Defaults to `false`
+   */
+  shouldForwardAsChild?: boolean;
 };
 
 function filterProps(
@@ -137,7 +143,9 @@ export const createTwc = <TCompose extends AbstractCompose = typeof clsx>(
           const rp =
             typeof attrs === "function" ? attrs(p) : attrs ? attrs : {};
           const fp = filterProps({ ...rp, ...rest }, shouldForwardProp);
-          const Comp = asChild ? Slot : Component;
+          const shouldForwardAsChild =
+            config.shouldForwardAsChild && typeof Component !== "string";
+          const Comp = !shouldForwardAsChild && asChild ? Slot : Component;
           const resClassName = isClassFn ? stringsOrFn(p) : tplClassName;
           return (
             <Comp
@@ -153,6 +161,7 @@ export const createTwc = <TCompose extends AbstractCompose = typeof clsx>(
                       )
                   : compose(resClassName, classNameProp)
               }
+              asChild={shouldForwardAsChild ? asChild : undefined}
               {...fp}
             />
           );