Skip to content

Commit

Permalink
chore: migrate to TS 4.9 (microsoft#31496)
Browse files Browse the repository at this point in the history
  • Loading branch information
Hotell authored Jun 4, 2024
1 parent b2c3a81 commit 7d6815a
Show file tree
Hide file tree
Showing 30 changed files with 178 additions and 149 deletions.
3 changes: 2 additions & 1 deletion apps/vr-tests-web-components/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@
"jsx": "react",
"types": ["jest", "node", "web"]
},
"include": ["./src", "./.storybook/*"]
"include": ["./src", "./.storybook/*"],
"files": ["./typings/html-react-parser/index.d.ts"]
}
15 changes: 15 additions & 0 deletions apps/vr-tests-web-components/typings/html-react-parser/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Typings override for invalid html-react-parser types
* Types started explode after upgrading to TypeScript 4.9 which properly parses export maps within native ESM environments
* @see https://github.com/remarkablemark/html-react-parser/issues/1305#issuecomment-2136962278
*/
declare module 'html-react-parser' {
import type { Comment, Element, Node, ProcessingInstruction, Text } from 'domhandler';
type DOMNode = Comment | Element | Node | ProcessingInstruction | Text;
interface HTMLReactParserOptions {
replace?: (domNode: DOMNode) => JSX.Element | Record<string, unknown> | void | undefined | null | false;

trim?: boolean;
}
export default function parse(html: string, options?: HTMLReactParserOptions): string | JSX.Element | JSX.Element[];
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: bump api-extractor-model in order to migrate to TS 4.9",
"packageName": "@fluentui/api-docs",
"email": "martinhochel@microsoft.com",
"dependentChangeType": "patch"
}
9 changes: 5 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,12 @@
"@griffel/webpack-loader": "2.2.10",
"@jest/reporters": "29.7.0",
"@mdx-js/loader": "1.6.22",
"@microsoft/api-extractor": "7.31.2",
"@microsoft/api-extractor-model": "7.24.2",
"@microsoft/api-extractor": "7.34.9",
"@microsoft/api-extractor-model": "7.26.9",
"@microsoft/eslint-plugin-sdl": "0.1.9",
"@microsoft/load-themed-styles": "1.10.26",
"@microsoft/loader-load-themed-styles": "2.0.17",
"@microsoft/tsdoc": "0.14.1",
"@microsoft/tsdoc": "0.14.2",
"@nx/devkit": "17.3.2",
"@nx/eslint": "17.3.2",
"@nx/eslint-plugin": "17.3.2",
Expand Down Expand Up @@ -334,7 +334,7 @@
"tsconfig-paths": "4.2.0",
"tsconfig-paths-webpack-plugin": "4.1.0",
"tslib": "2.5.0",
"typescript": "4.7.4",
"typescript": "4.9.5",
"vinyl": "2.2.0",
"vrscreenshotdiff": "0.0.17",
"webpack": "5.90.3",
Expand Down Expand Up @@ -374,6 +374,7 @@
"@typescript-eslint/experimental-utils": "4.22.0",
"@typescript-eslint/parser": "4.22.0",
"@types/jest-axe/axe-core": "4.7.2",
"@microsoft/api-extractor/typescript": "4.9.5",
"eslint": "7.25.0",
"@mdx-js/loader/loader-utils": "~2.0.4",
"swc-loader": "^0.2.3",
Expand Down
4 changes: 2 additions & 2 deletions packages/api-docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
"@microsoft/api-extractor-model": "7.24.2",
"@microsoft/tsdoc": "0.14.1",
"@microsoft/api-extractor-model": "7.26.9",
"@microsoft/tsdoc": "0.14.2",
"fs-extra": "^8.1.0"
}
}
2 changes: 1 addition & 1 deletion packages/fluentui/react-bindings/src/hooks/useStyles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export type UseStylesResult = {
styles: ComponentSlotStylesResolved;
};

type InlineStyleProps<ComponentProps> = {
type InlineStyleProps<ComponentProps extends {}> = {
/** Additional CSS class name(s) to apply. */
className?: string;

Expand Down
2 changes: 1 addition & 1 deletion packages/fluentui/react-northstar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"@fluentui/react-proptypes": "^0.66.5",
"@fluentui/state": "^0.66.5",
"@fluentui/styles": "^0.66.5",
"@popperjs/core": "~2.4.3",
"@popperjs/core": "~2.11.8",
"body-scroll-lock": "^3.1.5",
"classnames": "^2.2.6",
"compute-scroll-into-view": "1.0.11",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { EventListener } from '@fluentui/react-component-event-listener';
import { NodeRef, Unstable_NestingAuto } from '@fluentui/react-component-nesting-registry';
import { handleRef, Ref } from '@fluentui/react-component-ref';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PopperJs from '@popperjs/core';
import type { VirtualElement as PopperJsVirtualElement } from '@popperjs/core';
import * as _ from 'lodash';
import * as PropTypes from 'prop-types';
import * as React from 'react';
Expand Down Expand Up @@ -190,7 +190,7 @@ export const Popup: React.FC<PopupProps> &
const triggerRef = React.useRef<HTMLElement>();
// focusable element which has triggered Popup, can be either triggerDomElement or the element inside it
const triggerFocusableRef = React.useRef<HTMLElement>();
const rightClickReferenceObject = React.useRef<PopperJs.VirtualElement | null>();
const rightClickReferenceObject = React.useRef<PopperJsVirtualElement | null>();

useOnIFrameFocus(open, context.target, (e: Event) => {
const iframeInsidePopup = elementContains(popupContentRef.current, e.target as HTMLElement);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
ForwardRefWithAs,
} from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PopperJs from '@popperjs/core';
import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';
import cx from 'classnames';
import * as _ from 'lodash';
import * as PropTypes from 'prop-types';
Expand Down Expand Up @@ -78,7 +78,7 @@ export interface PopupContentProps extends UIComponentProps, ChildrenComponentPr
}

export type PopupContentStylesProps = Required<Pick<PopupContentProps, 'pointing'>> & {
basePlacement: PopperJs.BasePlacement;
basePlacement: PopperJsBasePlacement;
autoSize?: AutoSize;
};

Expand Down Expand Up @@ -195,7 +195,7 @@ PopupContent.displayName = 'PopupContent';

PopupContent.propTypes = {
...commonPropTypes.createCommon(),
placement: PropTypes.oneOf<PopperJs.Placement>([
placement: PropTypes.oneOf<PopperJsPlacement>([
'auto-start',
'auto',
'auto-end',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ForwardRefWithAs,
} from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PopperJs from '@popperjs/core';
import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';
import * as PropTypes from 'prop-types';
import * as React from 'react';

Expand Down Expand Up @@ -49,7 +49,7 @@ export interface TooltipContentProps extends UIComponentProps, ChildrenComponent
}

export type TooltipContentStylesProps = Required<Pick<TooltipContentProps, 'pointing' | 'open' | 'subtle'>> & {
basePlacement: PopperJs.BasePlacement;
basePlacement: PopperJsBasePlacement;
};

export const tooltipContentClassName = 'ui-tooltip__content';
Expand Down Expand Up @@ -127,7 +127,7 @@ TooltipContent.displayName = 'TooltipContent';

TooltipContent.propTypes = {
...commonPropTypes.createCommon(),
placement: PropTypes.oneOf<PopperJs.Placement>([
placement: PropTypes.oneOf<PopperJsPlacement>([
'auto-start',
'auto',
'auto-end',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ICSSInJSStyle } from '@fluentui/styles';
import * as PopperJs from '@popperjs/core';
import type { BasePlacement as PopperJsBasePlacement } from '@popperjs/core';

type GetContainerStylesOptions = {
padding: string;
placement: PopperJs.BasePlacement;
placement: PopperJsBasePlacement;
};

type GetPointerStylesOptions = {
Expand All @@ -16,7 +16,7 @@ type GetPointerStylesOptions = {
height: string;
width: string;

placement: PopperJs.BasePlacement;
placement: PopperJsBasePlacement;
rtl: boolean;
svg?: string;
};
Expand Down
8 changes: 4 additions & 4 deletions packages/fluentui/react-northstar/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import { ShorthandFactory } from './utils/factories';

export type ResultOf<T> = T extends (...arg: any[]) => infer TResult ? TResult : never;

export type ObjectOf<T> = { [key: string]: T };
export type ObjectOf<T extends {}> = { [key: string]: T };

export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

// ========================================================
// Components
// ========================================================

export type FluentComponentStaticProps<P = {}> = {
export type FluentComponentStaticProps<P extends {} = {}> = {
handledProps: (keyof P)[];
create?: ShorthandFactory<P>;
shorthandConfig?: ShorthandConfig<P>;
Expand Down Expand Up @@ -59,8 +59,8 @@ type KindSelector<T> = {
[P in keyof T]: { kind?: P } & T[P];
}[keyof T];

export type ShorthandCollection<Props, Kinds = Record<string, {}>> = ShorthandValue<
Props | (KindSelector<Kinds> & Props)
export type ShorthandCollection<P extends Props, Kinds = Record<string, {}>> = ShorthandValue<
P | (KindSelector<Kinds> & P)
>[];

export type ObjectShorthandValue<P extends Props> = Props<P> & {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles';
import * as React from 'react';
import { ReactChildren } from '../types';

export interface StyledComponentProps<P = any, V = any> {
export interface StyledComponentProps<P extends {} = any, V extends {} = any> {
/** Additional CSS styles to apply to the component instance. */
styles?: ComponentSlotStyle<P, V>;

/** Override for theme site variables to allow modifications of component styling via themes. */
variables?: ComponentVariablesInput;
}

export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
export interface UIComponentProps<P extends {} = any, V extends {} = any> extends StyledComponentProps<P, V> {
/** Additional CSS class name(s) to apply. */
className?: string;
design?: ComponentDesignProp;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import * as React from 'react';

import { ReactChildren } from '../types';

export interface StyledComponentProps<P = any, V = any> {
export interface StyledComponentProps<P extends {} = any, V extends {} = any> {
/** Additional CSS styles to apply to the component instance. */
styles?: ComponentSlotStyle<P, V>;

/** Override for theme site variables to allow modifications of component styling via themes. */
variables?: ComponentVariablesInput;
}

export interface UIComponentProps<P = any, V = any> extends StyledComponentProps<P, V> {
export interface UIComponentProps<P extends {} = any, V extends {} = any> extends StyledComponentProps<P, V> {
/** Additional CSS class name(s) to apply. */
className?: string;
design?: ComponentDesignProp;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface CreateComponentConfig<P> {
render: (config: RenderResultConfig<P>, props: P) => React.ReactNode;
}

export type CreateComponentReturnType<P> = React.FunctionComponent<P> & {
export type CreateComponentReturnType<P extends {}> = React.FunctionComponent<P> & {
deprecated_className: string;
create: ShorthandFactory<P>;
};
Expand Down
14 changes: 7 additions & 7 deletions packages/fluentui/react-northstar/src/utils/factories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ShorthandValue, Props, PropsOf, ShorthandRenderFunction } from '../type
type HTMLTag = 'iframe' | 'img' | 'input';
type ShorthandProp = 'children' | 'src' | 'type';

interface CreateShorthandOptions<P> {
interface CreateShorthandOptions<P extends {}> {
/** Default props object */
defaultProps?: () => Partial<Props<P>>;

Expand All @@ -31,7 +31,7 @@ const mappedProps: { [key in HTMLTag]: ShorthandProp } = {
input: 'type',
};

export type ShorthandFactory<P> = (
export type ShorthandFactory<P extends {}> = (
value: ShorthandValue<P>,
options?: CreateShorthandOptions<P>,
) => React.ReactElement | null | undefined;
Expand All @@ -44,7 +44,7 @@ export type ShorthandFactory<P> = (
* @param config - Options passed to factory
* @returns A shorthand factory function waiting for `val` and `defaultProps`.
*/
export function createShorthandFactory<TStringElement extends keyof JSX.IntrinsicElements, P>(config: {
export function createShorthandFactory<TStringElement extends keyof JSX.IntrinsicElements, P extends {}>(config: {
/** A ReactClass or string */
Component: TStringElement;
/** A function that maps a primitive value to the Component props */
Expand All @@ -54,13 +54,13 @@ export function createShorthandFactory<TStringElement extends keyof JSX.Intrinsi
/** Indicates if factory supports React Elements */
allowsJSX?: boolean;
}): ShorthandFactory<P>;
export function createShorthandFactory<TFunctionComponent extends React.FunctionComponent, P>(config: {
export function createShorthandFactory<TFunctionComponent extends React.FunctionComponent, P extends {}>(config: {
Component: TFunctionComponent;
mappedProp?: keyof PropsOf<TFunctionComponent>;
mappedArrayProp?: keyof PropsOf<TFunctionComponent>;
allowsJSX?: boolean;
}): ShorthandFactory<P>;
export function createShorthandFactory<TInstance extends React.Component, P>(config: {
export function createShorthandFactory<TInstance extends React.Component, P extends {}>(config: {
Component: { new (...args: any[]): TInstance };
mappedProp?: keyof PropsOf<TInstance>;
mappedArrayProp?: keyof PropsOf<TInstance>;
Expand All @@ -86,7 +86,7 @@ export function createShorthandFactory<P>({ Component, mappedProp, mappedArrayPr
// Factories
// ============================================================

export function createShorthandInternal<P>({
export function createShorthandInternal<P extends {}>({
Component,
mappedProp,
mappedArrayProp,
Expand Down Expand Up @@ -255,7 +255,7 @@ export function createShorthand<TInstance extends React.Component>(
value?: ShorthandValue<PropsOf<TInstance>>,
options?: CreateShorthandOptions<PropsOf<TInstance>>,
): React.ReactElement;
export function createShorthand<E extends keyof JSX.IntrinsicElements, P>(
export function createShorthand<E extends keyof JSX.IntrinsicElements, P extends {}>(
Component: ComponentWithAs<E, P> & {
shorthandConfig?: ShorthandConfig<P>;
fluentComposeConfig?: ComposePreparedOptions<P>;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-bindings';
import { Ref, isRefObject } from '@fluentui/react-component-ref';
import * as PopperJs from '@popperjs/core';
import type { Placement as PopperJsPlacement, VirtualElement as PopperJsVirtualElement } from '@popperjs/core';
import * as React from 'react';

import { getPlacement } from './positioningHelper';
Expand All @@ -16,8 +16,8 @@ export const Popper: React.FunctionComponent<PopperProps> = props => {
const usesRenderProps: boolean = typeof props.children === 'function';

const proposedPlacement = getPlacement(props.align, props.position, props.rtl);
const latestPlacement = React.useRef<PopperJs.Placement>(proposedPlacement);
const [computedPlacement, setComputedPlacement] = React.useState<PopperJs.Placement>(proposedPlacement);
const latestPlacement = React.useRef<PopperJsPlacement>(proposedPlacement);
const [computedPlacement, setComputedPlacement] = React.useState<PopperJsPlacement>(proposedPlacement);

const popperRef = React.useRef<PopperRefHandle | null>(null);
const { targetRef, containerRef, arrowRef } = usePopper({
Expand All @@ -43,7 +43,7 @@ export const Popper: React.FunctionComponent<PopperProps> = props => {
// Does not make anything worse as Popper component does not have proper handing for ref updates ¯\_(ツ)_/¯
targetRef.current = isRefObject(props.targetRef)
? (props.targetRef as React.RefObject<Element>).current
: (props.targetRef as PopperJs.VirtualElement);
: (props.targetRef as PopperJsVirtualElement);
arrowRef.current = props.pointerTargetRef?.current as HTMLElement;
});

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as PopperJs from '@popperjs/core';
import type { VirtualElement as PopperJsVirtualElement } from '@popperjs/core';

export function createReferenceFromClick(nativeEvent: MouseEvent): PopperJs.VirtualElement {
export function createReferenceFromClick(nativeEvent: MouseEvent): PopperJsVirtualElement {
const left = nativeEvent.clientX;
const top = nativeEvent.clientY;
const right = left + 1;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as PopperJs from '@popperjs/core';
import type { BasePlacement as PopperJsBasePlacement, Placement as PopperJsPlacement } from '@popperjs/core';

const rtlMapping: Partial<Record<PopperJs.BasePlacement, PopperJs.BasePlacement>> = {
const rtlMapping: Partial<Record<PopperJsBasePlacement, PopperJsBasePlacement>> = {
left: 'right',
right: 'left',
};

export function getBasePlacement(placement: PopperJs.Placement | undefined, rtl: boolean): PopperJs.BasePlacement {
const basePlacement = (placement || '').split('-', 1).pop() as PopperJs.BasePlacement;
export function getBasePlacement(placement: PopperJsPlacement | undefined, rtl: boolean): PopperJsBasePlacement {
const basePlacement = (placement || '').split('-', 1).pop() as PopperJsBasePlacement;

return (rtl && rtlMapping[basePlacement]) || basePlacement;
}
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as PopperJs from '@popperjs/core';
import type { Boundary as PopperJsBoundary } from '@popperjs/core';

import { getScrollParent } from './getScrollParent';
import { Boundary } from './types';

/**
* Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.
*/
export function getBoundary(element: HTMLElement, boundary: Boundary): PopperJs.Boundary {
export function getBoundary(element: HTMLElement, boundary: Boundary): PopperJsBoundary {
if (boundary === 'window') {
return element.ownerDocument.documentElement;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { detectOverflow, Modifier } from '@popperjs/core';
import { detectOverflow } from '@popperjs/core';
import type { Modifier } from '@popperjs/core';

export const isIntersectingModifier: IsIntersectingModifier = {
name: 'is-intersecting-modifier',
Expand Down
Loading

0 comments on commit 7d6815a

Please sign in to comment.