Update React imports to use destructuring #65
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors all UI component wrappers to use destructured React imports and ComponentProps instead of React.ComponentProps, and updates React hooks and context APIs to their named imports.
- Swap
import * as Reactfor named imports (ComponentProps, hooks, etc.) - Replace
React.Xusages with direct calls (useContext,createContext,useId, etc.) - Update type references (
ReactNode→ReactNode,React.CSSProperties→CSSProperties,React.ComponentType→ComponentType)
Reviewed Changes
Copilot reviewed 47 out of 47 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/ui/form.tsx | Swapped React namespace imports for named imports |
| src/components/ui/**/*.tsx | Applied same import and hook refactoring across files |
| src/components/ui/chart.tsx | Added additional React types (ReactNode, CSSProperties) |
| src/components/ui/carousel.tsx | Imported useState, useEffect, useCallback, etc. |
Comments suppressed due to low confidence (1)
src/components/ui/button.tsx:44
- [nitpick] The wrapper components for Radix primitives and other UI elements repeat the same boilerplate pattern. Consider creating a small factory or higher-order function to generate these wrappers automatically, reducing duplication and easing future updates.
}: ComponentProps<"button"> &
There was a problem hiding this comment.
The imports across this template are just a little... weird. No type imports, but those have been around for a while. And looking around a bit I'm wondering if the import * as React was because the jsx-runtime wasn't being used, so React had to be imported anywhere there was jsx. Maybe this is a remnant of some AI generated components from a model trained on older react code?
Regardless if we're hitting bundler weirdness, standardizing our imports seems like a really good thing to work on
| @@ -1,28 +1,28 @@ | |||
| "use client" | |||
|
|
|||
| import * as React from "react" | |||
| import { ComponentProps } from "react" | |||
There was a problem hiding this comment.
all these ComponentProps imports should be type imports, right? Shouldn't matter functionally but I'm not sure if it would bloat the bundle
| @@ -1,6 +1,6 @@ | |||
| "use client" | |||
|
|
|||
| import * as React from "react" | |||
| import { ComponentProps, createContext, useCallback, useContext, useEffect, useState, KeyboardEvent } from "react" | |||
There was a problem hiding this comment.
| import { ComponentProps, createContext, useCallback, useContext, useEffect, useState, KeyboardEvent } from "react" | |
| import { type ComponentProps, createContext, useCallback, useContext, useEffect, useState, type KeyboardEvent } from "react" |
| @@ -1,4 +1,4 @@ | |||
| import * as React from "react" | |||
| import { ComponentProps, ComponentType, createContext, CSSProperties, ReactNode, useContext, useId, useMemo } from "react" | |||
There was a problem hiding this comment.
| import { ComponentProps, ComponentType, createContext, CSSProperties, ReactNode, useContext, useId, useMemo } from "react" | |
| import { type ComponentProps, type ComponentType, createContext, type CSSProperties, type ReactNode, useContext, useId, useMemo } from "react" |
| @@ -1,37 +1,37 @@ | |||
| import * as React from "react" | |||
| import { ComponentProps } from "react" | |||
| import * as DialogPrimitive from "@radix-ui/react-dialog" | |||
There was a problem hiding this comment.
interesting, wonder if we should follow up by ctrl+Fing for import * as across the template
| import * as LabelPrimitive from "@radix-ui/react-label" | ||
| import { Slot } from "@radix-ui/react-slot" |
There was a problem hiding this comment.
even weirder, 2 different formats for different @radix packages
| @@ -1,6 +1,6 @@ | |||
| "use client" | |||
|
|
|||
| import * as React from "react" | |||
| import { CSSProperties, ComponentProps, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react" | |||
There was a problem hiding this comment.
| import { CSSProperties, ComponentProps, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react" | |
| import { type CSSProperties, type ComponentProps, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react" |
| @@ -1,4 +1,5 @@ | |||
| import { useTheme } from "next-themes" | |||
| import { CSSProperties } from "react" | |||
There was a problem hiding this comment.
| import { CSSProperties } from "react" | |
| import type { CSSProperties } from "react" |
Attempt to fix https://github.com/github/spark/issues/1107
This changes all the react imports to use destructuring rather than
* as React. This will hopefully no longer give use theUseContexterror