Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

feat: migrate v8 to v9 TypeScript DX (no build needed) #22604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d22d4b
chore(v8-dx): setup ts path aliases for all v8 libraries
Hotell Apr 22, 2022
b39663a
chore(v8-dx): fix all TS errors exposed by enablign stricter checks
Hotell Apr 22, 2022
4bea154
chore(scripts): fix TS errors exposed by v8 packages
Hotell Apr 22, 2022
c213d37
fixup! chore(v8-dx): setup ts path aliases for all v8 libraries
Hotell Apr 22, 2022
61e4df4
feat(scripts): update ts just task compilation to work with v8 path a…
Hotell Apr 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/perf-test/src/scenarios/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Nav, INavLink } from '@fluentui/react/lib/Nav';
import { Nav } from '@fluentui/react/lib/Nav';

const groups = [
{
Expand Down
19 changes: 5 additions & 14 deletions apps/perf-test/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
{
"extends": "../../tsconfig.base.json",
"extends": "../../tsconfig.base.v8.json",
"compilerOptions": {
"target": "es5",
"target": "ES2015",
"isolatedModules": false,
"lib": ["ES2015", "DOM"],
"outDir": "lib",
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"strictNullChecks": true,
"noImplicitAny": true,
"lib": ["es6", "dom"],
"types": ["webpack-env"],
"skipLibCheck": true
"types": ["environment", "webpack-env"]
},
"include": ["src"]
}
2 changes: 1 addition & 1 deletion apps/public-docsite-resources/src/components/DemoPage.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { IDocPageProps as IDemoPageProps } from '@fluentui/react/lib/common/DocPage.types';
export type { IDocPageProps as IDemoPageProps } from '@fluentui/react/lib/common/DocPage.types';
2 changes: 1 addition & 1 deletion apps/public-docsite-resources/src/components/pages/ColorsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class Content extends React.Component {
ReactDOM.render(<Content />,document.getElementById('content'));`;

export class ColorsPage extends React.Component<{}, IColorsPageState> {
private _semanticSlotColorChangeTimeout: number;
private _semanticSlotColorChangeTimeout!: number;
private _async: Async;

constructor(props: {}) {
Expand Down
22 changes: 4 additions & 18 deletions apps/public-docsite-resources/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,11 @@
{
"extends": "../../tsconfig.base.v8.json",
"compilerOptions": {
"baseUrl": ".",
"target": "ES2015",
"lib": ["ES2015", "dom"],
"outDir": "lib",
"target": "es5",
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"importHelpers": true,
"noUnusedLocals": true,
"forceConsistentCasingInFileNames": true,
"strictNullChecks": true,
"noImplicitAny": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"noImplicitThis": true,
"skipLibCheck": true,
"lib": ["es5", "dom", "es2015.promise"],
"typeRoots": ["../../node_modules/@types", "../../typings"],
"types": ["webpack-env", "custom-global"]
"types": ["environment", "webpack-env"]
},
"include": ["src"]
}
48 changes: 24 additions & 24 deletions apps/theming-designer/src/components/FabricPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const tableClassName = mergeStyles({
});

export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (props: IFabricPaletteProps) => {
const { themeRules, onFabricPaletteColorChange } = props;
const { themeRules = {} as NonNullable<IFabricPaletteProps['themeRules']>, onFabricPaletteColorChange } = props;
return (
<div className={MainPanelInnerContent}>
<table className={tableClassName}>
Expand All @@ -58,7 +58,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDarker]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDarker]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.black]]}
Expand All @@ -67,7 +67,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.topCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.black]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.black]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralTertiaryAlt]]}
Expand All @@ -76,7 +76,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.topCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralTertiaryAlt]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -87,7 +87,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDark]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDark]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralDark]]}
Expand All @@ -96,7 +96,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralDark]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralDark]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralDark]]}
Expand All @@ -105,7 +105,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralDark]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralDark]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -116,7 +116,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDarkAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeDarkAlt]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralPrimary]]}
Expand All @@ -125,7 +125,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralPrimary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralPrimary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]]}
Expand All @@ -134,7 +134,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralQuaternaryAlt]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -145,7 +145,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themePrimary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themePrimary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralPrimaryAlt]]}
Expand All @@ -154,7 +154,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralPrimaryAlt]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralLight]]}
Expand All @@ -163,7 +163,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLight]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLight]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -174,7 +174,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeSecondary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeSecondary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralSecondary]]}
Expand All @@ -183,7 +183,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralSecondary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralSecondary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralLighter]]}
Expand All @@ -192,7 +192,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLighter]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLighter]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -203,7 +203,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeTertiary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeTertiary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralTertiary]]}
Expand All @@ -212,7 +212,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralTertiary]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralTertiary]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.neutralLighterAlt]]}
Expand All @@ -221,7 +221,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLighterAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralLighterAlt]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -232,7 +232,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLight]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLight]].color!.str}</Text>

<Text as="td">
<FabricSlotWidget
Expand All @@ -242,7 +242,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.neutralSecondaryAlt]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -253,7 +253,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLighter]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLighter]].color!.str}</Text>
<Text as="td">
<FabricSlotWidget
slotRule={themeRules[FabricSlots[FabricSlots.white]]}
Expand All @@ -262,7 +262,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.white]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.white]].color!.str}</Text>
</tr>
<tr>
<Text as="td">
Expand All @@ -273,7 +273,7 @@ export const FabricPalette: React.FunctionComponent<IFabricPaletteProps> = (prop
directionalHint={DirectionalHint.leftCenter}
/>
</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLighterAlt]].color.str}</Text>
<Text as="td">{themeRules[FabricSlots[FabricSlots.themeLighterAlt]].color!.str}</Text>
</tr>
</tbody>
</table>
Expand Down
8 changes: 4 additions & 4 deletions apps/theming-designer/src/components/FabricSlotWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { IThemeRules, FabricSlots, IThemeSlotRule } from '@fluentui/react/lib/ThemeGenerator';
import { FabricSlots, IThemeSlotRule } from '@fluentui/react/lib/ThemeGenerator';
import { IColor } from '@fluentui/react/lib/Color';
import { Stack, IStackStyles } from '@fluentui/react/lib/Stack';
import { mergeStyles } from '@fluentui/merge-styles';
Expand Down Expand Up @@ -58,10 +58,10 @@ export class FabricSlotWidget extends React.Component<IFabricSlotWidgetProps, IF
<Stack horizontal styles={colorBoxAndHexStringClassName} gap={5}>
<div
className={fabricPaletteColorBox}
style={{ backgroundColor: slotRule.color.str }}
style={{ backgroundColor: slotRule!.color!.str }}
onClick={this._onColorBoxClick}
/>
<div>{slotRule.name}</div>
<div>{slotRule!.name}</div>
</Stack>
{isColorPickerVisible && (
<Callout
Expand All @@ -71,7 +71,7 @@ export class FabricSlotWidget extends React.Component<IFabricSlotWidgetProps, IF
setInitialFocus={true}
onDismiss={this._onCalloutDismiss}
>
<ColorPicker color={slotRule.color} onChange={this._onColorPickerChange} alphaSliderHidden={true} />
<ColorPicker color={slotRule!.color!} onChange={this._onColorPickerChange} alphaSliderHidden={true} />
</Callout>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/theming-designer/src/components/SemanticSlots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export const SemanticSlots: React.FunctionComponent<ISemanticSlotsProps> = (prop
}
};

let semanticSlotsNone = props.theme.semanticColors;
let semanticSlotsNone = props.theme!.semanticColors;
slotNames = trimSemanticSlotsOrNames(Object.keys(semanticSlotsNone)) as ISlotNames;
noneSlots = fillVariantSlotsList(VariantThemeType.None);
neutralSlots = fillVariantSlotsList(VariantThemeType.Neutral);
Expand Down
6 changes: 3 additions & 3 deletions apps/theming-designer/src/components/ThemingDesigner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ const Main = (props: IStackProps) => (
);

export class ThemingDesigner extends React.Component<{}, IThemingDesignerState> {
private _colorChangeTimeout: number;
private _fabricPaletteColorChangeTimeout: number;
private _colorChangeTimeout!: number;
private _fabricPaletteColorChangeTimeout!: number;
private _async: Async;

constructor(props: {}) {
Expand Down Expand Up @@ -153,7 +153,7 @@ export class ThemingDesigner extends React.Component<{}, IThemingDesignerState>
const { themeRules } = this.state;
if (themeRules) {
const currentIsDark = isDark(themeRules[FabricSlots[fabricSlot]].color!);
ThemeGenerator.setSlot(themeRules[FabricSlots[fabricSlot]], newColor, currentIsDark, true, true);
ThemeGenerator.setSlot(themeRules[FabricSlots[fabricSlot]], newColor!, currentIsDark, true, true);
if (currentIsDark !== isDark(themeRules[FabricSlots[fabricSlot]].color!)) {
// isInverted got swapped, so need to refresh slots with new shading rules
ThemeGenerator.insureSlots(themeRules, currentIsDark);
Expand Down
1 change: 0 additions & 1 deletion apps/theming-designer/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from '@fluentui/react/lib/Fabric';
import { initializeIcons } from '@fluentui/font-icons-mdl2';
import { ThemingDesigner } from './components/ThemingDesigner';

Expand Down
18 changes: 5 additions & 13 deletions apps/theming-designer/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
{
"extends": "../../tsconfig.base.v8.json",
"compilerOptions": {
"target": "es5",
"noEmit": true,
"target": "ES2015",
"lib": ["ES2015", "dom"],
"outDir": "lib",
"module": "commonjs",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"strict": false,
"lib": ["es6", "dom"],
"types": [],
"skipLibCheck": true,
"noImplicitAny": true
"types": ["environment", "webpack-env"]
},
"include": ["src"]
}
Loading