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

fix: Types after preact 10.25 #1803

Merged
merged 7 commits into from
Dec 2, 2024
Merged

fix: Types after preact 10.25 #1803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2b525c3
chore: Bump preact from 10.24.3 to 10.25.0
rschristian Nov 29, 2024
3805c3c
refactor: Update types to use Preact's new per-element type interfaces
rschristian Nov 29, 2024
355dd16
docs: Update docs?
rschristian Nov 29, 2024
4ad4126
chore: Bump preact from 10.25.0 to 10.25.1
rschristian Dec 2, 2024
acc3ee2
Remove old usages of href prop in LinkButton
acelaya Dec 2, 2024
35b931f
Bump minimum required preact version to 10.25.1
acelaya Dec 2, 2024
804fc1d
Fix TableCell type definition
acelaya Dec 2, 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 @@ -47,7 +47,7 @@
"mustache": "^4.2.0",
"plop": "^4.0.0",
"postcss": "^8.3.9",
"preact": "^10.5.6",
"preact": "^10.25.1",
"prettier": "^3.0.0",
"rollup": "^4.0.2",
"rollup-plugin-string": "^3.0.0",
Expand All @@ -60,7 +60,7 @@
"yalc": "^1.0.0-pre.50"
},
"peerDependencies": {
"preact": "^10.4.0"
"preact": "^10.25.1"
Copy link
Contributor

Choose a reason for hiding this comment

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

Setting minimum required version to 10.25.1 rather than 10.25.0, since it includes some important type fixes.

},
"scripts": {
"build-lib": "babel src/ --out-dir lib/ --extensions '.js,.ts,.tsx' --source-maps --ignore '**/test' --ignore '**/karma.config.js'",
Expand Down
2 changes: 1 addition & 1 deletion src/components/data/TableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import TableContext from './TableContext';
import TableSectionContext from './TableSectionContext';

export type TableCellProps = PresentationalProps &
Omit<JSX.HTMLAttributes<HTMLElement>, 'size'> & {
Omit<JSX.TdHTMLAttributes<HTMLElement>, 'size'> & {
/** Remove default padding, allowing consuming code to control it */
unpadded?: boolean;
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ type ComponentProps = {
};

export type HTMLButtonAttributes = Omit<
JSX.HTMLAttributes<HTMLButtonElement>,
JSX.ButtonHTMLAttributes<HTMLButtonElement>,
Copy link
Contributor

@acelaya acelaya Dec 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Just have a question. Are the new JSX.ButtonHTMLAttributes, JSX.InputHTMLAttributes, etc., available in preact versions older than 10.25?

If not, we may need to bump the minimum required preact version of this library, since we ship type definitions with it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great question: they've were available from preact/compat since 10.23 but are only available from preact since 10.25.

I see only now there was a peer dependency on preact, sorry! In that case, indeed, you'll probably need a bump.

You might be able to work out a system if you need to keep compat with older versions, though it might require some tooling. Essentially, the HTMLAttributes used here was a mega interface of all possible attributes (across all elements) which has been renamed to AllHTMLAttributes in v10.25+. HTMLAttributes in v10.25+ therefore is the purely global attributes/props, things like class, id, etc. You could probably set up some sort of fallback situation there if you needed.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks! Bumping the minimum required version should be fine 🙂

'icon' | 'size'
>;

Expand Down
2 changes: 1 addition & 1 deletion src/components/input/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ type ComponentProps = {

export type CheckboxProps = CompositeProps &
ComponentProps &
Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;
Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;

/**
* Render a labeled checkbox input. The checkbox is styled with two icons:
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ type ComponentProps = FormControlProps & {

export type InputProps = PresentationalProps &
ComponentProps &
JSX.HTMLAttributes<HTMLInputElement>;
JSX.InputHTMLAttributes<HTMLInputElement>;

/**
* Render a text field input
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/RadioButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ type ComponentProps = {

export type RadioButtonProps = CompositeProps &
ComponentProps &
Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;
Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;

/**
* Render a labeled radio input. The radio is styled with two icons: one for the
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { inputStyles } from './Input';

export type TextareaProps = PresentationalProps &
FormControlProps &
JSX.HTMLAttributes<HTMLTextAreaElement>;
JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;

/**
* Render a textarea
Expand Down
2 changes: 1 addition & 1 deletion src/components/input/ToggleInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ type ComponentProps = {

export type ToggleInputProps = CompositeProps &
ComponentProps &
Omit<JSX.HTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;
Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'size' | 'icon'>;

/**
* Render a labeled checkbox or radio input. The input is styled with two icons:
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type ComponentProps = {

export type LinkProps = PresentationalProps &
ComponentProps &
JSX.HTMLAttributes<HTMLAnchorElement>;
JSX.AnchorHTMLAttributes<HTMLAnchorElement>;

/**
* Styled component for a link (`<a>` element).
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/LinkButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type ComponentProps = {
export type LinkButtonProps = PresentationalProps &
Omit<ButtonProps, 'variant'> &
ComponentProps &
JSX.HTMLAttributes<HTMLButtonElement>;
JSX.ButtonHTMLAttributes<HTMLButtonElement>;

/**
* Style a button as a link
Expand Down
2 changes: 1 addition & 1 deletion src/pattern-library/components/patterns/input/ButtonPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function ButtonPage() {
<code>HTMLButtonElement</code>.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{`Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>`}</code>
<code>{`Omit<preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>`}</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
2 changes: 1 addition & 1 deletion src/pattern-library/components/patterns/input/CheckboxPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ const handleControlledChange = e => {
<code>Checkbox</code> accepts HTML attributes for input elements
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{`JSX.HTMLAttributes<HTMLInputElement>`}</code>
<code>{`JSX.InputHTMLAttributes<HTMLInputElement>`}</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
2 changes: 1 addition & 1 deletion src/pattern-library/components/patterns/input/InputPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export default function InputPage() {
<code>Input</code> accepts HTML attributes for input elements.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{`JSX.HTMLAttributes<HTMLInputElement>`}</code>
<code>{`JSX.InputHTMLAttributes<HTMLInputElement>`}</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
2 changes: 1 addition & 1 deletion src/pattern-library/components/patterns/input/RadioButtonPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default function RadioButtonPage() {
elements
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{`JSX.HTMLAttributes<HTMLInputElement>`}</code>
<code>{`JSX.InputHTMLAttributes<HTMLInputElement>`}</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
2 changes: 1 addition & 1 deletion src/pattern-library/components/patterns/input/TextareaPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export default function TextareaPage() {
elements.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{`JSX.HTMLAttributes<HTMLTextareaElement>`}</code>
<code>{`JSX.TextareaHTMLAttributes<HTMLTextareaElement>`}</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
12 changes: 5 additions & 7 deletions src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,9 @@ export default function LinkButtonPage() {
Underline: none (default)
</LinkButton>

<LinkButton href="https://www.example.com" underline="hover">
Underline: hover
</LinkButton>
<LinkButton underline="hover">Underline: hover</LinkButton>

<LinkButton href="https://www.example.com" underline="always">
Underline: always
</LinkButton>
<LinkButton underline="always">Underline: always</LinkButton>
Comment on lines -109 to +111
Copy link
Contributor

Choose a reason for hiding this comment

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

The href attribute was not used in LinkButton, so it's safe to remove.

These were probably some old examples from a time in which it may have supported it.

<p>
LinkButtons should be{' '}
<LinkButton underline="always" inline>
Expand All @@ -131,7 +127,9 @@ export default function LinkButtonPage() {
to <code>HTMLButtonElement</code>.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{'preact.JSX.HTMLAttributes<HTMLButtonElement>'}</code>
<code>
{'preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>'}
</code>
</Library.InfoItem>
</Library.Info>
</Library.Example>
Expand Down
4 changes: 3 additions & 1 deletion src/pattern-library/components/patterns/navigation/LinkPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ export default function LinkPage() {
<code>HTMLAnchorElement</code>.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>{'preact.JSX.HTMLAttributes<HTMLAnchorElement>'}</code>
<code>
{'preact.JSX.AnchorHTMLAttributes<HTMLAnchorElement>'}
</code>
</Library.InfoItem>
<Library.InfoItem label="example">
<Library.Code
Expand Down
12 changes: 6 additions & 6 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1795,7 +1795,7 @@ __metadata:
mustache: ^4.2.0
plop: ^4.0.0
postcss: ^8.3.9
preact: ^10.5.6
preact: ^10.25.1
prettier: ^3.0.0
rollup: ^4.0.2
rollup-plugin-string: ^3.0.0
Expand All @@ -1808,7 +1808,7 @@ __metadata:
wouter-preact: ^3.0.0
yalc: ^1.0.0-pre.50
peerDependencies:
preact: ^10.4.0
preact: ^10.25.1
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -9413,10 +9413,10 @@ __metadata:
languageName: node
linkType: hard

"preact@npm:^10.18.1, preact@npm:^10.5.6":
version: 10.24.3
resolution: "preact@npm:10.24.3"
checksum: 372f601576f52d6417a750a8732cd83c4fc133b0b136f82ea69f013092266ad0213c160b71ae421a0fc7ab04caacb651c29dbf515e3aec26d82b0a8675e8786e
"preact@npm:^10.18.1, preact@npm:^10.25.1":
version: 10.25.1
resolution: "preact@npm:10.25.1"
checksum: 7b31f82acfc5eaccc70c19b55ff2bc8edb3d636dfb84e254c9258871c69e1652876efe4bb3a5f21bf521386b001bc6c8831e535d41eecbe0f31c13a0e2a062a3
languageName: node
linkType: hard

Expand Down