opengovsg / camp-design-system

The Design System used at Open Government Products
https://design.open.gov.sg
39 stars 11 forks source link

chore: improve compatibility with modern module resolution #719

Closed dextertanyj closed 5 months ago

dextertanyj commented 6 months ago

Problem

The modern "bundler" and "NodeNext" module resolution options do not support transitive dependencies properly, leading to errors such as "The inferred type of X cannot be named without reference to Y."

Solution

A fix is possible by explicitly importing transitive types when they are re-exported.

This results in the generated declaration build changing from

import { TextareaAutosizeProps } from 'react-textarea-autosize';
import { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
export interface TextareaProps extends ChakraTextareaProps {
    /**
     * The minimum rows the textarea displays on render.
     * Defaults to `3`.
     */
    minAutosizeRows?: TextareaAutosizeProps['minRows'];
    /**
     * The maximum rows the textarea will automatically resize to.
     * Defaults to `6`.
     */
    maxAutosizeRows?: TextareaAutosizeProps['maxRows'];
    /**
     * Whether the input is in a prefilled state.
     */
    isPrefilled?: boolean;
    /**
     * Whether the input is in a success state.
     */
    isSuccess?: boolean;
}
export declare const Textarea: import("@chakra-ui/system/dist/system.types.js").ComponentWithAs<"textarea", TextareaProps>;

to

import { TextareaAutosizeProps } from 'react-textarea-autosize';
import { ComponentWithAs as _, TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
export interface TextareaProps extends ChakraTextareaProps {
    /**
     * The minimum rows the textarea displays on render.
     * Defaults to `3`.
     */
    minAutosizeRows?: TextareaAutosizeProps['minRows'];
    /**
     * The maximum rows the textarea will automatically resize to.
     * Defaults to `6`.
     */
    maxAutosizeRows?: TextareaAutosizeProps['maxRows'];
    /**
     * Whether the input is in a prefilled state.
     */
    isPrefilled?: boolean;
    /**
     * Whether the input is in a success state.
     */
    isSuccess?: boolean;
}
export declare const Textarea: _<"textarea", TextareaProps>;