fix: remove all empty import statements #1772
Conversation
|
@teemingc is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request converts numerous TypeScript type imports across Svelte components to use the import type syntax. The changes are limited to import declarations, affecting compile-time typing only. No runtime logic, control flow, or public API signatures are modified. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/forms/toggle/Toggle.svelte (1)
4-27: RestoreLabelas a value import
Labelis rendered as a component (Line 17). By switching toimport type, the compiler erases it at runtime, soLabelbecomesundefined, and the toggle will fail the moment it renders. KeepLabelas a runtime import while leavingTogglePropstype-only.-import type { ToggleProps, Label } from "$lib"; +import { Label, type ToggleProps } from "$lib";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (62)
src/lib/accordion/Accordion.svelte(1 hunks)src/lib/accordion/AccordionItem.svelte(1 hunks)src/lib/bottom-navigation/BottomNavHeader.svelte(1 hunks)src/lib/bottom-navigation/BottomNavHeaderItem.svelte(1 hunks)src/lib/bottom-navigation/BottomNavItem.svelte(1 hunks)src/lib/breadcrumb/Breadcrumb.svelte(1 hunks)src/lib/breadcrumb/BreadcrumbItem.svelte(1 hunks)src/lib/button-group/ButtonGroup.svelte(1 hunks)src/lib/buttons/Button.svelte(1 hunks)src/lib/card/Card.svelte(1 hunks)src/lib/carousel/ControlButton.svelte(1 hunks)src/lib/carousel/Slide.svelte(1 hunks)src/lib/carousel/Thumbnail.svelte(1 hunks)src/lib/clipboard/Clipboard.svelte(1 hunks)src/lib/darkmode/DarkMode.svelte(1 hunks)src/lib/device-mockups/Android.svelte(1 hunks)src/lib/device-mockups/DefaultMockup.svelte(1 hunks)src/lib/device-mockups/Desktop.svelte(1 hunks)src/lib/device-mockups/Laptop.svelte(1 hunks)src/lib/device-mockups/Smartwatch.svelte(1 hunks)src/lib/drawer/Drawer.svelte(1 hunks)src/lib/drawer/Drawerhead.svelte(1 hunks)src/lib/dropdown/DropdownDivider.svelte(1 hunks)src/lib/dropdown/DropdownGroup.svelte(1 hunks)src/lib/dropdown/DropdownHeader.svelte(1 hunks)src/lib/dropdown/DropdownItem.svelte(1 hunks)src/lib/footer/Footer.svelte(1 hunks)src/lib/footer/FooterBrand.svelte(1 hunks)src/lib/footer/FooterCopyright.svelte(1 hunks)src/lib/footer/FooterIcon.svelte(1 hunks)src/lib/footer/FooterLink.svelte(1 hunks)src/lib/footer/FooterLinkGroup.svelte(1 hunks)src/lib/forms/button-toggle/ButtonToggle.svelte(1 hunks)src/lib/forms/button-toggle/CheckIcon.svelte(1 hunks)src/lib/forms/checkbox/CheckboxButton.svelte(1 hunks)src/lib/forms/dropzone/Dropzone.svelte(1 hunks)src/lib/forms/helper/Helper.svelte(1 hunks)src/lib/forms/label/Label.svelte(1 hunks)src/lib/forms/phoneinput/PhoneInput.svelte(1 hunks)src/lib/forms/radio/Radio.svelte(1 hunks)src/lib/forms/range/Range.svelte(1 hunks)src/lib/forms/toggle/Toggle.svelte(1 hunks)src/lib/gallery/Gallery.svelte(1 hunks)src/lib/indicator/Indicator.svelte(1 hunks)src/lib/kbd/Kbd.svelte(1 hunks)src/lib/list-group/Listgroup.svelte(1 hunks)src/lib/list-group/ListgroupItem.svelte(1 hunks)src/lib/sidebar/SidebarItem.svelte(1 hunks)src/lib/skeleton/TestimonialPlaceholder.svelte(1 hunks)src/lib/skeleton/WidgetPlaceholder.svelte(1 hunks)src/lib/step-indicator/StepIndicator.svelte(1 hunks)src/lib/stepper/BreadcrumbStepper.svelte(1 hunks)src/lib/stepper/DetailedStepper.svelte(1 hunks)src/lib/stepper/ProgressStepper.svelte(1 hunks)src/lib/stepper/Stepper.svelte(1 hunks)src/lib/stepper/TimelineStepper.svelte(1 hunks)src/lib/stepper/VerticalStepper.svelte(1 hunks)src/lib/table/Table.svelte(1 hunks)src/lib/tabs/TabItem.svelte(1 hunks)src/lib/types.ts(1 hunks)src/lib/utils/Arrow.svelte(1 hunks)src/lib/utils/CloseButton.svelte(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-10-18T09:38:03.879Z
Learnt from: Chizaruu
PR: themesberg/flowbite-svelte#1465
File: src/lib/forms/Timepicker.svelte:105-116
Timestamp: 2024-10-18T09:38:03.879Z
Learning: In `Timepicker.svelte`, the `Dropdown` opens as intended and is used exclusively with the 'dropdown' and 'timerange-dropdown' Timepicker types.
Applied to files:
src/lib/dropdown/DropdownItem.svelte
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Playwright and Lint
🔇 Additional comments (59)
src/lib/carousel/Thumbnail.svelte (1)
3-3: Type-only import matches the pure-type usage.
ThumbnailPropsis used exclusively for typing the component props, so switching toimport typekeeps the bundle clean and avoids generating empty imports. Looks good.src/lib/forms/button-toggle/CheckIcon.svelte (1)
2-2: Type-only import fixes the REPL bundler issueSwitching to
import typeavoids emitting an empty runtime import, aligning with the PR goal and keeping the component clean.src/lib/forms/dropzone/Dropzone.svelte (1)
5-5: Type-only import keeps Dropzone lean.Switching
DropzonePropsto a type-only import matches its usage and avoids emitting an empty runtime import.src/lib/drawer/Drawerhead.svelte (1)
4-4: Type-only import matches usageDrawerheadProps is only used for typing the destructured props, so this change cleanly prevents bundling an unnecessary runtime import.
src/lib/stepper/TimelineStepper.svelte (1)
4-4: Type-only import aligns with intentSwitching
TimelineStepperPropsto a type-only import keeps the runtime bundle clean while preserving typings. Looks good.src/lib/accordion/AccordionItem.svelte (1)
2-2: Type-only imports are correct here
AccordionCtxType,AccordionItemProps, andParamsTypeare all consumed purely in type positions, so this import split is safe.src/lib/carousel/ControlButton.svelte (1)
4-4: Import cleanup confirmed
ControlButtonPropsis used only for annotating$props(), so the dedicated type import is appropriate.src/lib/device-mockups/Android.svelte (1)
2-2: Type-only import is appropriate
AndroidPropsfeeds only into the props typing; moving it to a type-only import avoids unnecessary runtime references.src/lib/gallery/Gallery.svelte (1)
4-4: Typed gallery imports look goodBoth
GalleryPropsandImgTyperemain strictly in type contexts, so this change keeps bundling behavior intact.src/lib/breadcrumb/Breadcrumb.svelte (1)
4-4: Breadcrumb props import simplified
BreadcrumbPropsis used purely for typing the props destructure; the type-only import is the right call.src/lib/carousel/Slide.svelte (1)
2-2: Type-only Slide imports verified
SlidePropsandCarouselStatestay in annotations and generics, so dropping the runtime import is safe.src/lib/list-group/ListgroupItem.svelte (1)
4-4: Listgroup type import checks out
ListgroupItemPropsis only used for$props()typing, making the type-only import the correct approach.src/lib/sidebar/SidebarItem.svelte (1)
4-4: Type-only import prevents stray runtime dependencySwitching
SidebarCtxType/SidebarItemPropstoimport typekeeps the compiled output free of empty imports while leaving the component logic untouched. Looks great.src/lib/drawer/Drawer.svelte (1)
2-2: Drawer props now stay purely in the type layerThe move to
import typehere cleanly avoids runtime noise from$libwhen this component is bundled. Nicely done.src/lib/forms/phoneinput/PhoneInput.svelte (1)
2-2: PhoneInput props import tightened upThanks for making
PhoneInputPropstype-only—this keeps the Svelte output lean without altering behavior.src/lib/bottom-navigation/BottomNavHeader.svelte (1)
4-4: BottomNavHeader props correctly marked as type-onlyGood call on the
import type; this matches the rest of the cleanup and avoids redundant runtime imports.src/lib/darkmode/DarkMode.svelte (1)
4-4: Darkmode props import aligns with the type-only patternThis keeps the compiled JS free from noop imports while preserving typing. Looks solid.
src/lib/device-mockups/Desktop.svelte (1)
2-2: Desktop props import correctly scoped to types
import typehere ensures the mockup component no longer emits empty imports downstream. 👍src/lib/types.ts (1)
5-8: Writable/VariantProps now imported as types onlyConfirmed both are used strictly in type positions (
Writable<object>,VariantProps<typeof gradientButton>), so this change trims the emitted JS without side effects.src/lib/utils/Arrow.svelte (1)
4-4: ArrowProps import converted to type-onlyGreat to see this follow the same pattern—no runtime dependency needed, and the component still type-checks as before.
src/lib/stepper/VerticalStepper.svelte (1)
4-4: Type-only props import is spot on.Using
import typehere ensures the generated JS stops pulling in the$libentrypoint at runtime, which is exactly what we need to avoid the empty import issue reported in the REPL.src/lib/device-mockups/Laptop.svelte (1)
2-2: Good switch to a pure type import.
LaptopPropsis only used for typing the$props()destructure, so this keeps the runtime bundle clean while preserving typings.src/lib/utils/CloseButton.svelte (1)
3-3: Import tightening looks great.This component only needs
CloseButtonPropsfor type inference, so converting it toimport typeneatly avoids emitting the empty runtime import.src/lib/device-mockups/Smartwatch.svelte (1)
2-2: Thanks for making this type-only.
SmartwatchPropsis compile-time only, and this change keeps the output free of the problematic empty import.src/lib/stepper/ProgressStepper.svelte (1)
4-4: Type-only import aligns with the goal.
ProgressStepperPropsis never used as a runtime value, so this change addresses the REPL complaint without touching behavior.src/lib/step-indicator/StepIndicator.svelte (1)
3-3: Nice consistency update.Moving
StepIndicatorPropsto a type-only import keeps parity with the neighboringStepIndicatorThemetyping and eliminates the generated empty import.src/lib/device-mockups/DefaultMockup.svelte (1)
2-2: Looks good.
DefaultMockupPropsis purely for typing the props destructure, so importing it withimport typeis the right call.src/lib/kbd/Kbd.svelte (1)
4-4: All good here.
KbdPropsnever needs to exist at runtime, so making it a type-only import neatly avoids the empty import pattern.src/lib/stepper/BreadcrumbStepper.svelte (1)
5-5: Type-only import aligns with TS best practices.
BreadcrumbStepperPropsis only used for typing, so this change cleanly strips the runtime import without affecting behavior.src/lib/tabs/TabItem.svelte (1)
2-2: Good call switching these to type-only.All three symbols are used strictly for typing, so the import elision here is safe.
src/lib/skeleton/WidgetPlaceholder.svelte (1)
4-4: Props import now purely type-level—looks good.No runtime references depend on
WidgetPlaceholderProps, so this keeps the bundle leaner.src/lib/bottom-navigation/BottomNavItem.svelte (1)
2-2: Nice tidy-up on the type-only import.
BottomNavContextTypeandBottomNavItemPropsare both purely annotative here, so this refactor is spot on.src/lib/forms/range/Range.svelte (1)
4-4: Import tightening makes sense.
RangePropsnever needs a runtime presence, so this change is correct.src/lib/bottom-navigation/BottomNavHeaderItem.svelte (1)
4-4: All good on the type-only conversion.
BottomNavHeaderItemPropsis only referenced for typing, so this is safe.src/lib/skeleton/TestimonialPlaceholder.svelte (1)
4-4: Type-only import here is correct.
TestimonialPlaceholderPropsis used exclusively for typing, so this change is safe.src/lib/footer/FooterCopyright.svelte (1)
4-4: Type-only import keeps bundle leanGood call converting this to
import type; the props shape stays in TS land without pulling anything into the runtime bundle. 👍src/lib/card/Card.svelte (1)
2-2: Importing as type-only is appropriate
CardPropsis consumed purely for typing the$props()destructure, so the type-only import is the right fix and avoids emitting an empty runtime import.src/lib/table/Table.svelte (1)
5-5: Type-only import aligns with the intent.Switching
TableProps/TableCtxTypetoimport typekeeps the runtime bundle clean and resolves the empty import warning. Looks good.src/lib/buttons/Button.svelte (1)
4-4: Good move to a type-only import.Restricting
SizeTypeandButtonPropstoimport typeavoids emitting a noop module load in the REPL scenario—exactly what we need here.src/lib/stepper/DetailedStepper.svelte (1)
4-4: Typed props import is tidy.
DetailedStepperPropsis purely a compile-time annotation, so the dedicated type import is the right call.src/lib/breadcrumb/BreadcrumbItem.svelte (1)
2-2: Breadcrumb props constrained to type import works well.This keeps the module from generating an empty runtime import while preserving the typing surface.
src/lib/clipboard/Clipboard.svelte (1)
4-4: Clipboard props now properly type-only.Great to see this converted—prevents the REPL’s empty import issue without touching behavior.
src/lib/forms/helper/Helper.svelte (1)
3-3: HelperProps type import looks spot on.No runtime usage here, so this keeps the bundle lean while satisfying TypeScript.
src/lib/indicator/Indicator.svelte (1)
4-4: Indicator props type-only import is correct.Consistent with the rest of the cleanup and avoids generating an empty import.
src/lib/accordion/Accordion.svelte (1)
2-2: Accordion context/props pulled in as types only—nice.This keeps
AccordionCtxTypeandAccordionPropsout of the runtime bundle, matching the goal of eliminating the empty imports.src/lib/footer/FooterIcon.svelte (1)
4-4: Type-only import aligns with goalConverting
FooterIconPropsto a type-only import removes the stray runtime import while preserving typings. Matches the PR objective.src/lib/dropdown/DropdownItem.svelte (1)
5-5: Type-only import aligns with goal
DropdownItemPropsis now erased at runtime, preventing the empty import issue without affecting behavior.src/lib/stepper/Stepper.svelte (1)
4-4: Type-only import aligns with goalSwitching
StepperPropstoimport typekeeps runtime bundles clean while preserving the prop typing.src/lib/footer/FooterBrand.svelte (1)
4-4: Type-only import aligns with goal
FooterBrandPropsno longer contributes to runtime imports, satisfying the empty import fix.src/lib/button-group/ButtonGroup.svelte (1)
5-5: Type-only import aligns with goalThe type-only import ensures
ButtonGroupPropsis stripped from runtime output while keeping typings intact.src/lib/footer/FooterLinkGroup.svelte (1)
4-4: Type-only import aligns with goal
FooterLinkGroupPropsis now purely a type dependency, preventing the REPL’s empty import complaint.src/lib/dropdown/DropdownGroup.svelte (1)
4-4: Type-only import aligns with goal
DropdownGroupPropsis correctly converted to a type-only import, avoiding unnecessary runtime references.src/lib/forms/checkbox/CheckboxButton.svelte (1)
2-2: Type-only import aligns with goalUsing
import typeforCheckboxButtonPropseliminates the runtime import while keeping typing precise.src/lib/footer/FooterLink.svelte (1)
4-4: Type-only import looks goodSwitching to
import typekeeps the runtime bundle clean and matches our convention.src/lib/dropdown/DropdownHeader.svelte (1)
4-4: Nice consistency updateType-only import here prevents accidental runtime pulls and aligns with the rest of the dropdown components.
src/lib/dropdown/DropdownDivider.svelte (1)
4-4: LGTM on import cleanupThe
import typeconversion keeps this divider lean at runtime and matches the PR goal.src/lib/forms/button-toggle/ButtonToggle.svelte (1)
7-7: Good call on type-only context importMoving both
ButtonTogglePropsandButtonToggleContexttoimport typeavoids shipping unused code while preserving typings.src/lib/forms/label/Label.svelte (1)
4-4: Label props import update approvedType-only import here keeps the label component aligned with our TS hygiene.
src/lib/footer/Footer.svelte (1)
4-4: Footer import aligns with PR intent
import type { FooterProps }is the right move—keeps runtime clean and consistent with the rest of the footer suite.
| import { radio } from "."; | ||
| import clsx from "clsx"; | ||
| import { type RadioProps, Label } from "$lib"; | ||
| import type { RadioProps, Label } from "$lib"; |
There was a problem hiding this comment.
Restore value import for Label component.
Label is rendered in the template (Line 19), so making it a type-only import removes the runtime value and triggers a reference error at build/runtime. Reintroduce a value import for Label.
-import type { RadioProps, Label } from "$lib";
+import { Label, type RadioProps } from "$lib";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import type { RadioProps, Label } from "$lib"; | |
| import { Label, type RadioProps } from "$lib"; |
🤖 Prompt for AI Agents
In src/lib/forms/radio/Radio.svelte around line 5, the current import makes
Label a type-only import which removes the runtime value and causes a reference
error when Label is rendered; change the import so Label is imported as a
runtime value (e.g., keep RadioProps as a type import but import Label as a
value) and ensure Label is exported from "$lib" so the component can render
without build/runtime errors.
| import { listGroup } from "."; | ||
| import clsx from "clsx"; | ||
| import { type ListgroupProps, ListgroupItem } from "$lib"; | ||
| import type { ListgroupProps, ListgroupItem } from "$lib"; |
There was a problem hiding this comment.
Restore runtime import for ListgroupItem.
Converting ListgroupItem to a type-only import removes the component from the runtime bundle. Because the template instantiates <ListgroupItem> (e.g., Line 35 onward), Svelte needs a value import; otherwise the compiler will emit ListgroupItem is not defined and render fails. Please keep ListgroupItem as a runtime import while leaving ListgroupProps type-only:
-import type { ListgroupProps, ListgroupItem } from "$lib";
+import { ListgroupItem, type ListgroupProps } from "$lib";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import type { ListgroupProps, ListgroupItem } from "$lib"; | |
| import { ListgroupItem, type ListgroupProps } from "$lib"; |
🤖 Prompt for AI Agents
In src/lib/list-group/Listgroup.svelte around line 5, the import converted
ListgroupItem to a type-only import which removes the component from the runtime
bundle and causes "ListgroupItem is not defined" at render; restore
ListgroupItem as a runtime value import while keeping ListgroupProps as
type-only (either by splitting into two imports or using a mixed import that
only marks ListgroupProps with "type"), so the Svelte template can reference
<ListgroupItem> at runtime.
|
Unfortunately that's not the solution. Error compiling component 
|
|
I fixed the problem now. Thank you for your tips. |
2 participants
follow-up to #1771
Closes #1662
📑 Description
This PR adjusts all the import statements which only import types to be type-only import statements. This should properly solve those empty import statements importing from
'..'in the Svelte playground. (for good this time?)cc: @shinokada
Status
✅ Checks
api-checkdirectory as requiredpnpm check && pnpm test:e2eℹ Additional Information
Summary by CodeRabbit
Note: These changes do not affect runtime behavior or public APIs.