chore: drop defaultProps

.github/workflows/test.yml

@@ -7,18 +7,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Install berry
-        run: corepack enable
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install Dependices
-        run: yarn install
-      
+        run: make
+
       - name: Build Library
-        run:  yarn build
+        run: make build-all
       - name: Run Test
-        run: yarn test
+        run: make test
 
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3

Makefile

@@ -1,3 +1,8 @@
+install:
+	@echo "Using berry to install dependencies..."
+	corepack enable
+	yarn install
+
 client-analyze:
 	@echo "Analyzing client code..."
 	@yarn run vite build src/client --config analyze.config.ts

src/client/components/button/button-drip.tsx

@@ -8,11 +8,6 @@ interface Props {
   color: string
 }
 
-const defaultProps = {
-  x: 0,
-  y: 0
-}
-
 export type ButtonDrip = Props
 
 const expand = stylex.keyframes({
@@ -33,11 +28,11 @@ const expand = stylex.keyframes({
 })
 
 const ButtonDrip: React.FC<ButtonDrip> = ({
-  x,
-  y,
+  x = 0,
+  y = 0,
   color,
   onCompleted
-}: ButtonDrip & typeof defaultProps) => {
+}) => {
   const dripRef = useRef<HTMLDivElement>(null)
   const top = Number.isNaN(+y) ? 0 : y - 10
   const left = Number.isNaN(+x) ? 0 : x - 10
@@ -88,6 +83,5 @@ const ButtonDrip: React.FC<ButtonDrip> = ({
   )
 }
 
-ButtonDrip.defaultProps = defaultProps
 ButtonDrip.displayName = 'GeistButtonDrip'
 export default ButtonDrip

src/client/components/button/button.tsx

@@ -12,11 +12,6 @@ interface Props {
 type ButtonProps = Props &
 Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>
 
-const defaultProps: Props = {
-  auto: false,
-  type: 'default'
-}
-
 const styles = stylex.create({
   text: {
     position: 'relative',
@@ -82,8 +77,8 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       ...rest
     } = props
-    const { SCALES } = useScale()
 
+    const { SCALES } = useScale()
     const { className, style } = stylex.props(
       inline({
         boxSizing: 'border-box',
@@ -148,6 +143,5 @@ const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 
 ButtonComponent.displayName = 'Button'
-ButtonComponent.defaultProps = defaultProps
 
 export const Button = withScale(ButtonComponent)

src/client/components/checkbox/checkbox-group.tsx

@@ -10,13 +10,10 @@ interface Props {
 
 export type CheckboxGroupProps = Props & Omit<React.HTMLAttributes<any>, keyof Props>
 
-const defaultProps: Props = {
-  disabled: false,
-  value: []
-}
+const defaultValue: string[] = []
 
 function CheckboxGroupComponent(props: React.PropsWithChildren< CheckboxGroupProps>) {
-  const { children, value, disabled = false, onChange, ...rest } = props
+  const { children, value = defaultValue, disabled = false, onChange, ...rest } = props
   const { SCALES } = useScale()
   const [selfValue, setSelfValue] = useState<string[]>([])
 
@@ -64,7 +61,6 @@ function CheckboxGroupComponent(props: React.PropsWithChildren< CheckboxGroupPro
   )
 }
 
-CheckboxGroupComponent.defaultProps = defaultProps
 CheckboxGroupComponent.displayName = 'CheckboxGroup'
 
 export const CheckboxGroup = withScale(CheckboxGroupComponent)

src/client/components/checkbox/checkbox.tsx

@@ -29,11 +29,6 @@ interface Props {
 
 export type CheckboxProps = Props & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props>
 
-const defaultProps: Props = {
-  disabled: false,
-  value: ''
-}
-
 function CheckboxIcon(props: CheckboxIconProps) {
   const { checked, disabled } = props
   const c = stylex.props(inline({
@@ -71,7 +66,7 @@ function CheckboxIcon(props: CheckboxIconProps) {
 function CheckboxComponent(props: CheckboxProps) {
   const { 
     checked, className: userClassName, style: userStyle, 
-    value, disabled = false, onChange, children, ...rest } =
+    value = '', disabled = false, onChange, children, ...rest } =
      props
   const { disabledAll, inGroup, values, updateState } = useCheckbox()
   const { SCALES } = useScale()
@@ -164,7 +159,6 @@ function CheckboxComponent(props: CheckboxProps) {
   )
 }
 
-CheckboxComponent.defaultProps = defaultProps
 CheckboxComponent.displayName = 'Checkbox'
 
 export const Checkbox = withScale(CheckboxComponent)

src/client/components/css-transition/css-transition.tsx

@@ -11,27 +11,18 @@ interface Props {
   name?: string
 }
 
-const defaultProps = {
-  visible: false,
-  enterTime: 60,
-  leaveTime: 60,
-  clearTime: 60,
-  className: '',
-  name: 'transition'
-}
-
 export type CssTransitionProps = Props
 
 function CSSTransition({
   children,
   className,
-  visible,
-  enterTime,
-  leaveTime,
-  clearTime,
-  name,
+  visible = false,
+  enterTime = 60,
+  leaveTime = 60,
+  clearTime = 60,
+  name = 'transition',
   ...props
-}: React.PropsWithChildren<CssTransitionProps> & typeof defaultProps) {
+}: React.PropsWithChildren<CssTransitionProps>) {
   const [classes, setClasses] = useState<string>('')
   const [renderable, setRenderable] = useState<boolean>(visible)
 
@@ -73,7 +64,6 @@ function CSSTransition({
   })
 }
 
-CSSTransition.defaultProps = defaultProps
 CSSTransition.displayName = 'CSSTransition'
 
 export { CSSTransition }

src/client/components/drawer/backdrop.tsx

@@ -15,15 +15,6 @@ interface Props {
   layerClassName?: string
 }
 
-const defaultProps = {
-  onClick: () => {},
-  visible: false,
-  onContentClick: () => {},
-  backdropClassName: '',
-  positionClassName: '',
-  layerClassName: ''
-}
-
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type BackdropProps = Props & NativeAttrs
 
@@ -94,7 +85,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
   ({
     children,
     onClick,
-    visible,
+    visible = false,
     width,
     onContentClick,
     backdropClassName,
@@ -142,6 +133,5 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
   }
 )
 
-Backdrop.defaultProps = defaultProps
 Backdrop.displayName = 'Backdrop'
 export { Backdrop }

src/client/components/select/select-option.tsx

@@ -11,13 +11,8 @@ interface Props {
 
 export type SelectOptionProps = Omit<React.HTMLAttributes<any>, keyof Props> & Props
 
-const defaultProps: Props = {
-  disabled: false,
-  preventAllEvents: false
-}
-
 function SelectOptionComponent(props: React.PropsWithChildren<SelectOptionProps>) {
-  const { children, value: initialValue, preventAllEvents, disabled = false, ...rest } = props
+  const { children, value: initialValue, preventAllEvents = false, disabled = false, ...rest } = props
   const { SCALES } = useScale()
   const { disableAll, value, updateValue } = useSelect()
   const isDisabled = useMemo(() => disabled || disableAll, [disabled, disableAll])
@@ -91,6 +86,5 @@ function SelectOptionComponent(props: React.PropsWithChildren<SelectOptionProps>
 }
 
 SelectOptionComponent.displayName = 'SelectOption'
-SelectOptionComponent.defaultProps = defaultProps
 
 export const SelectOption = withScale(SelectOptionComponent)

src/client/components/spacer/spacer.tsx

@@ -5,13 +5,9 @@ interface Props {
   inline?: boolean
 }
 
-const defaultProps: Props = {
-  inline: false
-}
-
 export type SpacerProps = Omit<React.HTMLAttributes<any>, keyof Props> & Props
 
-function SpacerComponent({ inline, ...props }: SpacerProps) {
+function SpacerComponent({ inline = false, ...props }: SpacerProps) {
   const { SCALES } = useScale()
   return (
     <div
@@ -29,7 +25,6 @@ function SpacerComponent({ inline, ...props }: SpacerProps) {
   )
 }
 
-SpacerComponent.defaultProps = defaultProps
 SpacerComponent.displayName = 'Spacer'
 
 export const Spacer = withScale(SpacerComponent)

src/client/components/text/child.tsx

@@ -8,10 +8,6 @@ export interface Props {
   className?: string
 }
 
-const defaultProps = {
-  className: ''
-}
-
 type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>
 export type TextChildProps = Props & NativeAttrs
 
@@ -70,14 +66,12 @@ function TextChild({
   const classes = useClasses(className, classNames)
 
   return (
-    // @ts-expect-error
     <Component className={classes} style={style} {...props}>
       {children}
     </Component>
   )
 }
 
-TextChild.defaultProps = defaultProps
 TextChild.displayName = 'TextChild'
 
 export { TextChild }

src/client/components/text/text.tsx

@@ -20,24 +20,6 @@ interface Props {
   className?: string
 }
 
-const defaultProps = {
-  h1: false,
-  h2: false,
-  h3: false,
-  h4: false,
-  h5: false,
-  h6: false,
-  p: false,
-  b: false,
-  small: false,
-  i: false,
-  span: false,
-  del: false,
-  em: false,
-  blockquote: false,
-  className: ''
-}
-
 // eslint-disable-next-line no-unused-vars
 type ElementMap = { [k in keyof JSX.IntrinsicElements]?: boolean }
 
@@ -74,10 +56,10 @@ function TextComponent({
   const elements: ElementMap = { h1, h2, h3, h4, h5, h6, p, blockquote }
   const inlineElements: ElementMap = { span, small, b, em, i, del }
   const names = Object.keys(elements).filter(
-    (name: keyof JSX.IntrinsicElements) => elements[name]
+    (name: string) => elements[name as keyof JSX.IntrinsicElements]
   ) as TextRenderableElements
   const inlineNames = Object.keys(inlineElements).filter(
-    (name: keyof JSX.IntrinsicElements) => inlineElements[name]
+    (name: string) => inlineElements[name as keyof JSX.IntrinsicElements]
   ) as TextRenderableElements
 
   /**
@@ -112,6 +94,5 @@ function TextComponent({
   )
 }
 
-TextComponent.defaultProps = defaultProps
 TextComponent.displayName = 'Text'
 export const Text = withScale(TextComponent)

src/client/composables/use-scale/with-scale.tsx

@@ -14,7 +14,7 @@ function reduceScaleCoefficient(scale: number) {
 }
 
 export const withScale = <T, P = {}>(
-  Render: React.ComponentType<P & { ref?: React.Ref<T> }>
+  Render: React.ComponentType<P & { ref?: React.Ref<T> }> | React.ForwardRefExoticComponent<P>
 ) => {
   const ScaleFC = forwardRef<T, P & React.PropsWithChildren<ScaleProps>>(({ children, ...props }, ref) => {
     const {

src/server/render.ts

@@ -26,9 +26,11 @@ export function injectHTMLTag(options: InjectHTMLTagOptions) {
   return options.html.replace(regExp, (match) => `${descriptors.join('\n')}${match}`)
 }
 
+// https://tc39.es/ecma262/#sec-putvalue
+// Using var instead of set attr to window we can reduce 9 bytes
 export function generateInjectCode(foamModule: Foam[], mode: string) {
   const { stringify } = JSON
-  return `window.defaultSizes = ${stringify(mode)},window.foamModule = ${stringify(foamModule)};`
+  return `var defaultSizes=${stringify(mode)},foamModule=${stringify(foamModule)};`
 }
 
 export async function renderView(foamModule: Foam[], options: RenderOptions) {