perf(types): improve typescript performance by using interfaces for declaration merging instead of types

Author: adaptive-shield-matrix

lib/input/label/Label2.tsx

@@ -1,18 +1,18 @@
 import { Label } from "~ui/input/label/Label"
 import { LabelAsterix } from "~ui/input/label/LabelAsterix"
-import type { HasChildren } from "~ui/utils/HasChildren"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import { classMerge } from "~ui/utils/classMerge"
 
-export type Label2Props = {
+export interface Label2Props extends MayHaveChildren {
   title: string
   subtitle?: string
   required?: boolean
   labelClass?: string
   disabled?: boolean
   id?: string
-} & HasChildren
+}
 
-export type Label2PropsFor = Label2Props & {
+export interface Label2PropsFor extends Label2Props {
   forId: string
 }
 

lib/input/radio/RadioSwitch.tsx

@@ -3,24 +3,20 @@ import { ct0 } from "~ui/i18n/ct0"
 import { t4multiselect } from "~ui/input/select/t4multiselect"
 import { classArr } from "~ui/utils/classArr"
 import type { SignalObject } from "~ui/utils/createSignalObject"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import type { HasClass } from "~ui/utils/HasClass"
-import { type HasDisabled, isDisabled } from "~ui/utils/HasDisabled"
 import type { HasGetOptions } from "~ui/utils/HasGetOptions"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import { type MayHaveDisabledAccessor, isDisabled } from "~ui/utils/MayHaveDisabledAccessor"
 import type { SelectionItem } from "~ui/utils/SelectionItem"
 import type { ValueOrAccessor } from "~ui/utils/ValueOrAccessor"
 
 /**
  * https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/Radio.tsx
  */
-export type RadioSwitchProps = {
+export interface RadioSwitchProps extends MayHaveClass, MayHaveChildren, RadioSwitchStateProps, HasGetOptions, MayHaveDisabledAccessor {
   id?: string
   disabled?: ValueOrAccessor<boolean>
-} & HasClass &
-  HasChildren &
-  RadioSwitchStateProps &
-  HasGetOptions &
-  HasDisabled
+}
 
 type RadioSwitchStateProps = {
   valueSignal: SignalObject<SelectionItem | null>
@@ -48,11 +44,16 @@ export function RadioSwitch(p: RadioSwitchProps) {
   )
 }
 
-function NoItems(p: HasClass) {
+function NoItems(p: MayHaveClass) {
   return <div class={p.class}>{ct0(t4multiselect.No_entries)}</div>
 }
 
-function Option(p: { item: SelectionItem; filled: boolean } & RadioSwitchStateProps & HasDisabled & HasClass) {
+interface Option2Props extends RadioSwitchStateProps, MayHaveDisabledAccessor, MayHaveClass {
+  item: SelectionItem
+  filled: boolean
+}
+
+function Option(p: Option2Props) {
   // console.log("Option", p.item.value, "value:", p.valueSignal.get())
   return (
     <button
@@ -88,9 +89,9 @@ function optionToggle(p: OptionProps) {
   p.valueSignal.set(p.item)
 }
 
-type OptionProps = {
+export interface OptionProps extends RadioSwitchStateProps {
   item: SelectionItem
-} & RadioSwitchStateProps
+}
 
 function isChecked(p: OptionProps) {
   return p.item.value === p.valueSignal.get()?.value

lib/input/select/Multiselect.tsx

@@ -9,15 +9,15 @@ import { CorvuPopover, type CorvuPopoverProps } from "~ui/interactive/popover/Co
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 import type { SignalObject } from "~ui/utils/createSignalObject"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import type { HasClass } from "~ui/utils/HasClass"
 import type { HasGetOptions } from "~ui/utils/HasGetOptions"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import type { SelectionItem } from "~ui/utils/SelectionItem"
 
 /**
  * https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/src/Checkbox.tsx
  */
-export interface MultiselectProps<T extends string = string> extends MultiselectState<T>, HasClass, HasChildren {
+export interface MultiselectProps<T extends string = string> extends MultiselectState<T>, MayHaveClass, MayHaveChildren {
   buttonProps: CorvuPopoverProps
   textNoEntries?: string
   textAddEntry?: string
@@ -148,7 +148,7 @@ function optionIsSelected<T extends string = string>(p: MultiselectOptionState<T
   return p.valueSignal.get().some((v) => v.value === p.option.value)
 }
 
-function NoItems(p: HasClass) {
+function NoItems(p: MayHaveClass) {
   return (
     <div
       class={classMerge(

lib/input/select/NativeSingleSelect.tsx

@@ -2,21 +2,19 @@ import { Key } from "@solid-primitives/keyed"
 import type { Accessor } from "solid-js"
 import { ct0 } from "~ui/i18n/ct0"
 import { t4multiselect } from "~ui/input/select/t4multiselect"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import type { HasClass } from "~ui/utils/HasClass"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import { classArr } from "~ui/utils/classArr"
 import type { SignalObject } from "~ui/utils/createSignalObject"
 
 export type ValueDisplayFn = (value: string) => string
 
-export type NativeSingleSelectProps = {
+export interface NativeSingleSelectProps extends MayHaveClass, MayHaveChildren {
   valueSignal: SignalObject<string>
   getOptions: Accessor<string[]>
   valueDisplay?: ValueDisplayFn
   id?: string
-} & HasClass &
-  HasChildren
+}
 
 export function NativeSingleSelect(p: NativeSingleSelectProps) {
   return (
@@ -51,7 +49,7 @@ function onChange(
   p.valueSignal.set(e.currentTarget.value)
 }
 
-function NoItems(p: HasClass) {
+function NoItems(p: MayHaveClass) {
   return <div class={p.class}>{ct0(t4multiselect.No_entries)}</div>
 }
 

lib/input/textarea/TextareaS.tsx

@@ -2,11 +2,11 @@ import { type ComponentProps, splitProps } from "solid-js"
 import { Textarea } from "~ui/input/textarea/Textarea"
 import type { SignalObject } from "~ui/utils/createSignalObject"
 
-export type TextAreaSProps = {
+export interface TextAreaSProps extends ComponentProps<"textarea"> {
   valueSignal: SignalObject<string>
 }
 
-export function TextareaS(p: TextAreaSProps & ComponentProps<"textarea">) {
+export function TextareaS(p: TextAreaSProps) {
   const [, rest] = splitProps(p, ["valueSignal"])
   // return <Checkbox value={p.valueSignal.get()} onChange={p.valueSignal.set} {...rest} />
   return <Textarea value={p.valueSignal.get()} onInput={(e) => p.valueSignal.set(e.currentTarget.value)} {...rest} />

lib/interactive/button/ButtonIcon1.tsx

@@ -4,10 +4,10 @@ import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
 import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { Icon1 } from "~ui/static/icon/Icon1"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import type { HasClass } from "~ui/utils/HasClass"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 
-export interface ButtonIcon1Props extends ComponentProps<"button">, ButtonCvaProps, HasClass, HasChildren {
+export interface ButtonIcon1Props extends ComponentProps<"button">, ButtonCvaProps, MayHaveClass, MayHaveChildren {
   // icon
   icon?: string
   iconRight?: string

lib/interactive/button/ButtonIconOnly.tsx

@@ -4,11 +4,11 @@ import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
 import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { Icon0 } from "~ui/static/icon/Icon0"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import { isDisabled } from "~ui/utils/HasDisabled"
-import { type HasIsLoading, isLoading } from "~ui/utils/HasIsLoading"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import { isDisabled } from "~ui/utils/MayHaveDisabledAccessor"
+import { isLoading, type MayHaveIsLoading } from "~ui/utils/MayHaveIsLoading"
 
-export interface ButtonIconOnlyProps extends ComponentProps<"button">, ButtonCvaProps, HasIsLoading, HasChildren {
+export interface ButtonIconOnlyProps extends ComponentProps<"button">, ButtonCvaProps, MayHaveIsLoading, MayHaveChildren {
   title: string
   icon: string
   iconRight?: boolean

lib/interactive/check/Checkbox.tsx

@@ -1,11 +1,11 @@
 import { mdiCheckboxMarked, mdiSquareOutline } from "@mdi/js"
 import { splitProps, type ComponentProps } from "solid-js"
 import { Icon1 } from "~ui/static/icon/Icon1"
-import type { HasChildren } from "~ui/utils/HasChildren"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import { classMerge } from "~ui/utils/classMerge"
 
-interface CheckboxProps extends MayHaveClass, HasChildren, ComponentProps<"checkbox"> {
+interface CheckboxProps extends MayHaveClass, MayHaveChildren, ComponentProps<"checkbox"> {
   id?: string
   checked: boolean
   onChange: (checked: boolean) => void

lib/interactive/details/Details.tsx

@@ -1,15 +1,15 @@
 import { mdiChevronDown } from "@mdi/js"
 import { Show, type JSXElement } from "solid-js"
 import { Icon1 } from "~ui/static/icon/Icon1"
-import type { HasChildren } from "~ui/utils/HasChildren"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import type { MayHaveIcon } from "~ui/utils/MayHaveIcon"
 import type { MayHaveSubtitle } from "~ui/utils/MayHaveSubtitle"
 import type { MayHaveTitle } from "~ui/utils/MayHaveTitle"
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 
-export interface DetailsProps extends MayHaveClass, MayHaveIcon, MayHaveTitle, MayHaveSubtitle, HasChildren {
+export interface DetailsProps extends MayHaveClass, MayHaveIcon, MayHaveTitle, MayHaveSubtitle, MayHaveChildren {
   summaryClass?: string
   summaryEl?: JSXElement
 }

lib/interactive/dialog/NativeDialog.tsx

@@ -10,21 +10,19 @@ import {
 import { tbCloseDialog } from "~ui/interactive/dialog/tbCloseDialog"
 import { classMerge } from "~ui/utils/classMerge"
 import { createSignalObject, type SignalObject } from "~ui/utils/createSignalObject"
-import type { HasChildren } from "~ui/utils/HasChildren"
-import type { HasClass } from "~ui/utils/HasClass"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import "./NativeDialog.module.css"
 
 export type DialogButtonProps = Omit<ButtonIconProps, "id" | "type">
 
-type DialogProps = {
+interface DialogProps extends MayHaveClass, MayHaveChildren, Partial<DialogInternalProps> {
   // trigger
   buttonProps: DialogButtonProps
   title: string
-} & HasClass &
-  HasChildren &
-  Partial<DialogInternalProps>
+}
 
-type DialogInternalProps = {
+interface DialogInternalProps extends MayHaveClass, MayHaveChildren {
   // trigger
   buttonProps: DialogButtonProps
 
@@ -42,8 +40,7 @@ type DialogInternalProps = {
   dialogId: string
   dialogRef: SignalObject<HTMLDialogElement | null>
   openState: IsOpenSignalObject
-} & HasClass &
-  HasChildren
+}
 
 function initProps(p: DialogProps): DialogInternalProps {
   let dialogRef = p.dialogRef ?? createSignalObject<HTMLDialogElement | null>(null)