Skip to content

Typescript 5.5.0 upgrade #6370

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

Merged
merged 16 commits into from
Jun 24, 2024
Merged

Typescript 5.5.0 upgrade #6370

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a9909c1
Typescript 5.5.0 upgrade
snowystinger May 13, 2024
bce50f0
resolve issue with framer motion
snowystinger May 13, 2024
dc56e86
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger May 15, 2024
5e9199d
Review comments
snowystinger May 15, 2024
719fa8c
Update ColorPicker.stories.tsx
snowystinger May 15, 2024
9ff27d5
Deduped, fixed a new ts error, patched problem dependency
snowystinger May 24, 2024
452f18b
patch
snowystinger May 24, 2024
f0a4082
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger May 24, 2024
19518da
fix our docs typecheck
snowystinger May 24, 2024
7f8312f
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger May 30, 2024
c7fd13a
Bump to 5.5 beta
snowystinger May 30, 2024
73e0d08
bump ts version
snowystinger May 31, 2024
88ce7f3
Merge branch 'main' into aggregate-ts-upgrade-updates
LFDanLu Jun 3, 2024
c22796b
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger Jun 3, 2024
d124724
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger Jun 20, 2024
1786deb
Merge branch 'main' into aggregate-ts-upgrade-updates
snowystinger Jun 23, 2024
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
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
"eslint-plugin-rulesdir": "^0.2.2",
"fast-check": "^2.19.0",
"fast-glob": "^3.1.0",
"framer-motion": "^10.16.4",
"framer-motion": "^11.1.9",
"fs-extra": "^10.0.0",
"full-icu": "^1.3.0",
"glob-promise": "^6.0.5",
Expand Down Expand Up @@ -183,7 +183,7 @@
"tailwindcss": "^3.4.0",
"tailwindcss-animate": "^1.0.7",
"tempy": "^0.5.0",
"typescript": "^5.3.3",
"typescript": "^5.5.0-dev.20240512",
"typescript-strict-plugin": "^2.0.0",
"verdaccio": "^5.13.0",
"walk-object": "^4.0.0",
Expand Down
6 changes: 3 additions & 3 deletions packages/@internationalized/number/src/NumberParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,9 +164,9 @@ class NumberParserImpl {
// extra step for rounding percents to what our formatter would output
let options = {
...this.options,
style: 'decimal',
minimumFractionDigits: Math.min(this.options.minimumFractionDigits + 2, 20),
maximumFractionDigits: Math.min(this.options.maximumFractionDigits + 2, 20)
style: 'decimal' as const,
minimumFractionDigits: Math.min((this.options.minimumFractionDigits ?? 0) + 2, 20),
maximumFractionDigits: Math.min((this.options.maximumFractionDigits ?? 0) + 2, 20)
};
return (new NumberParser(this.locale, options)).parse(new NumberFormatter(this.locale, options).format(newValue));
}
Expand Down
10 changes: 8 additions & 2 deletions packages/@react-spectrum/color/src/ColorEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ export interface SpectrumColorEditorProps {

function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
let resolvedFormat: ColorSpace;
if (format === 'hex') {
resolvedFormat = 'rgb';
} else {
resolvedFormat = format;
}
let domRef = useDOMRef(ref);
let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');

Expand All @@ -32,7 +38,7 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement
}
</div>
<div className={style({display: 'flex', gap: 4})()}>
<Picker
<Picker
aria-label={formatter.format('colorFormat')}
isQuiet
width="size-700"
Expand All @@ -47,7 +53,7 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement
{format === 'hex'
? <ColorField isQuiet width="size-1000" aria-label={formatter.format('hex')} />
: getColorChannels(format).map(channel => (
<ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
<ColorField key={channel} colorSpace={resolvedFormat} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
))}
{!props.hideAlphaChannel &&
<ColorField channel="alpha" isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}
Expand Down
3 changes: 2 additions & 1 deletion packages/@react-spectrum/meter/stories/Meter.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@

import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Meter} from '../';
import {NumberFormatOptions} from '@internationalized/number';
import React from 'react';

type MeterStory = ComponentStoryObj<typeof Meter>;

const formatOptions = {
style: 'currency',
currency: 'JPY'
};
} as NumberFormatOptions;

export default {
title: 'Meter',
Expand Down
14 changes: 11 additions & 3 deletions packages/react-aria-components/stories/ColorPicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,16 @@ export default {
title: 'React Aria Components'
};

type AllColorSpaces = ColorSpace | 'hex';

export const ColorPickerExample = (args) => {
let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
let [format, setFormat] = useState<AllColorSpaces>('hex');
let resolvedFormat: ColorSpace;
if (format === 'hex') {
resolvedFormat = 'rgb';
} else {
resolvedFormat = format;
}
return (
<ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
<ColorPickerTrigger>
Expand All @@ -42,14 +50,14 @@ export const ColorPickerExample = (args) => {
</select>
</label>
<div style={{display: 'flex', gap: 4, width: 192}}>
{format === 'hex'
{format === 'hex'
? (
<ColorField style={{display: 'flex', flexDirection: 'column'}}>
<Label>Hex</Label>
<Input />
</ColorField>
) : getColorChannels(format).map(channel => (
<ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} style={{display: 'flex', flexDirection: 'column', flex: 1}}>
<ColorField key={channel} colorSpace={resolvedFormat} channel={channel} style={{display: 'flex', flexDirection: 'column', flex: 1}}>
<Label />
<Input style={{width: '100%', boxSizing: 'border-box'}} />
</ColorField>
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// we can explicitly declare `any`, but we don't want to infer `any`
"noImplicitAny": false,
// maybe bump to 'esNext'?
"target": "es6",
"target": "es2018",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how big a breaking change is this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And perhaps more importantly, why it's needed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a possible suggestion from #6366 (comment)
not sure the least breaking change way to go about this one, but also still have nice syntax

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, in this case, it sounds like we were already "targetting" ES2018, only unknowingly :D Then I suppose it's not going to be a huge deal, still, worth a place in the release notes for sure.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's worth noting that Parcel doesn't really honour the tsconfig target anyway in its transpilation, it just aims for compatibility with the set of browsers resolved by browserslist.

Since none of the versions on that list is older than 2019, this seems like it should have zero repercussions.

// allows react jsx in tsx files
"jsx": "react",
// Eventually turn off, one we have no more assumed default exports.
Expand Down
30 changes: 8 additions & 22 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1374,18 +1374,6 @@
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==

"@emotion/is-prop-valid@^0.8.2":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
dependencies:
"@emotion/memoize" "0.7.4"

"@emotion/memoize@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==

"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
Expand Down Expand Up @@ -11407,14 +11395,12 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"

framer-motion@^10.16.4:
version "10.16.4"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
framer-motion@^11.1.9:
version "11.1.9"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.1.9.tgz#1ef021fc35615eb83d6baa903a47ba872be99187"
integrity sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==
dependencies:
tslib "^2.4.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"

fresh@0.5.2, fresh@^0.5.2:
version "0.5.2"
Expand Down Expand Up @@ -22398,10 +22384,10 @@ typescript-strict-plugin@^2.0.0:
ora "^5.4.1"
yargs "^16.2.0"

typescript@^5.3.3:
version "5.3.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
typescript@^5.5.0-dev.20240512:
version "5.5.0-dev.20240512"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.0-dev.20240512.tgz#0125f77789f1f9cc0d1f3111523cf19ca9713e9a"
integrity sha512-qaBthiey39OUkoC0p3r83WKUG4KEvgTJg968MxJ548G6lYhpsFhp1Qryxrf32BonZwzfVi46Ltb9maSHVceLMg==

ua-parser-js@0.7.17:
version "0.7.17"
Expand Down