React-to-SolidJS Transformation Rules

Single source of truth for all React-to-SolidJS transformations in the Zaidan project. This is a KNOWLEDGE skill -- it provides transformation rules as reusable context. Agents reference these tables when converting React components to SolidJS equivalents.

IMPORTANT: This skill is a knowledge resource. It does NOT perform transformations itself. Instead, it provides the necessary rules and mappings that other transformation agents will reference when executing conversions. If user call it manually, explain what this skill covers and redirect user to the agents that will use this skill, then stop.

React-to-SolidJS Transformation Rules

Import Transformations

tsx
1// REMOVE (React):
2import * as React from "react"
3import { Slot } from "base-ui"
4import * as DialogPrimitive from "@base-ui/react/dialog"
5import { cn } from "@/registry/bases/base/lib/utils"
6
7// ADD (SolidJS):
8import type { ComponentProps, JSX, ValidComponent } from "solid-js"
9import { splitProps, mergeProps, Show, For } from "solid-js"
10import * as DialogPrimitive from "@kobalte/core/dialog"
11import type { PolymorphicProps } from "@kobalte/core/polymorphic"
12import { cn } from "@/lib/utils"

Advanced Transformation Patterns

Component Part Patterns WITHOUT Kobalte/Corvu Primitive

When a component part does NOT use a Kobalte or Corvu primitive, use this pattern:

tsx
1type ComponentPartProps = ComponentProps<"<html_element>">
2
3const ComponentPart = (props: ComponentPartProps) => {
4  const mergedProps = mergeProps({ aProp: "default" } as ComponentPartProps, props);
5  const [local, others] = splitProps(mergedProps, ["aProp"]);
6  return <html_element aProp={local.aProp} {...others} />;
7}

Component Part Patterns WITH Kobalte/Corvu Primitive

When a component part uses a Kobalte or Corvu primitive, use polymorphic typing:

tsx
1import * as Primitive from "@kobalte/core/primitive";
2
3type ComponentPartProps<T extends ValidComponent = "<html_element>"> =
4  PolymorphicProps<T, Primitive.PrimitivePartProps<T>> &
5  Pick<ComponentProps<"<html_element>">, "aProp">;
6
7const ComponentPart = <T extends ValidComponent = "<html_element>">(
8  props: ComponentPartProps<T>
9) => {
10  const mergedProps = mergeProps(
11    { aProp: "default" } as ComponentPartProps<T>,
12    props as ComponentPartProps<T>
13  );
14  const [local, others] = splitProps(mergedProps, ["aProp"]);
15  return <Primitive.Root aProp={local.aProp} {...others} />;
16}

Reading Kobalte Documentation

When consulting Kobalte docs at https://kobalte.dev/docs/core/components/<component-name>:

• Anatomy Section: Lists all ComponentPart elements and how to combine them
• Rendered Elements Section: Check the "Default rendered element" column:
  • If starts with a capital letter -> no primitive used (e.g., a Kobalte sub-component)
  • If none -> no primitive used (wrapper/context provider)
  • Otherwise -> native HTML element (e.g., div, button, h3)
• API Reference: Props, data attributes, CSS variables for each part
• CSS Variables: Kobalte prefixes with --kb- (e.g., --kb-accordion-content-height)

Reading Corvu Documentation

When consulting Corvu docs at https://corvu.dev/docs/primitives/<component-name>:

• Anatomy Section: Lists all ComponentPart elements with combination patterns
• API Reference Section: Rendered elements are specified in the Props table, under the as row
• DynamicProps: Corvu uses DynamicProps instead of Kobalte's PolymorphicProps
• CSS Variables: Corvu prefixes with --corvu- (e.g., --corvu-disclosure-content-height)
• Data Attributes: Corvu prefixes with data-corvu- (e.g., data-corvu-accordion-trigger)
• Context Hooks: useContext() and useItemContext() for accessing component state

Documentation Resources

Kobalte Core Components

• URL Pattern: https://kobalte.dev/docs/core/components/<component-name>
• Content: Anatomy, Rendered elements, API Reference, Props, Data Attributes, CSS Variables
• For detailed patterns, see docs/kobalte-patterns.md

Corvu Primitives

• URL Pattern: https://corvu.dev/docs/primitives/<component-name>
• Content: Anatomy, API Reference with rendered elements in Props table
• For detailed patterns, see docs/corvu-patterns.md

Shadcn Registry

• Components: https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/ui/<component-name>.tsx
• Examples: https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/<component-name>-example.tsx
• Docs: https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/content/docs/components/<component-name>.mdx
• Schema: https://ui.shadcn.com/schema/registry.json

Supporting Documentation

• docs/kobalte-patterns.md -- Kobalte anatomy, rendered elements, props, data attributes, CSS variables
• docs/corvu-patterns.md -- Corvu anatomy, API patterns, DynamicProps, context hooks
• docs/base-ui-mapping.md -- Complete Base UI to Kobalte/Corvu mapping reference
• docs/third-party-deps.md -- Detailed third-party React-to-SolidJS dependency mapping