Skip to content

Commit

Permalink
feat: Experimental INP fix (#4560)
Browse files Browse the repository at this point in the history
## Description


https://vercel.com/blog/demystifying-inp-new-tools-and-actionable-insights

## new 
https://inp-inp-inp-inp.wstd.work/

## prev
https://no-inp-no-no.wstd.work/

## 20x slowdown new (click)
<img width="323" alt="image"
src="https://github.com/user-attachments/assets/08b063f6-93a3-4e2b-8e5d-e9521f97a40d"
/>
## 20x slowdown new (keyboard)
<img width="305" alt="image"
src="https://github.com/user-attachments/assets/3a1bb563-392f-40d9-9067-7cb085adcedd"
/>


## 20x slowdown old (click)
<img width="308" alt="image"
src="https://github.com/user-attachments/assets/41ff36cd-bd27-4e5d-b569-9040ce12b845"
/>
## 20x slowdown old (keyboard)
<img width="304" alt="image"
src="https://github.com/user-attachments/assets/4cc41ef9-f6d1-4e2a-ad41-de601d713bc9"
/>



## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
  • Loading branch information
istarkov authored Dec 12, 2024
1 parent 8cd3dc3 commit b867e67
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 17 deletions.
4 changes: 3 additions & 1 deletion packages/sdk-components-react-radix/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,12 @@
"@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.4",
"@radix-ui/react-use-controllable-state": "^1.1.0",
"@webstudio-is/css-engine": "workspace:*",
"@webstudio-is/icons": "workspace:*",
"@webstudio-is/react-sdk": "workspace:*",
"@webstudio-is/sdk": "workspace:*"
"@webstudio-is/sdk": "workspace:*",
"await-interaction-response": "^0.0.2"
},
"devDependencies": {
"@types/node": "^22.9.3",
Expand Down
30 changes: 26 additions & 4 deletions packages/sdk-components-react-radix/src/dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import {
useEffect,
useRef,
useContext,
useCallback,
} from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import {
ReactSdkContext,
getClosestInstance,
type Hook,
} from "@webstudio-is/react-sdk/runtime";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import interactionResponse from "await-interaction-response";

/**
* Naive heuristic to determine if a click event will cause navigate
Expand Down Expand Up @@ -49,9 +52,22 @@ export const Dialog = forwardRef<
HTMLDivElement,
Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "defaultOpen">
>((props, _ref) => {
const { open, onOpenChange } = props;
const { renderer } = useContext(ReactSdkContext);

const [open, onOpenChange] = useControllableState({
prop: props.open,
defaultProp: false,
onChange: props.onOpenChange,
});

const onOpenChangeHandler = useCallback(
async (open: boolean) => {
await interactionResponse();
onOpenChange(open);
},
[onOpenChange]
);

/**
* Close the dialog when a navigable link within it is clicked.
*/
Expand All @@ -76,15 +92,21 @@ export const Dialog = forwardRef<
}

if (target.closest('[role="dialog"]')) {
onOpenChange?.(false);
onOpenChangeHandler?.(false);
}
};

window.addEventListener("click", handleClick);
return () => window.removeEventListener("click", handleClick);
}, [open, onOpenChange, renderer]);
}, [open, onOpenChangeHandler, renderer]);

return <DialogPrimitive.Root {...props} />;
return (
<DialogPrimitive.Root
{...props}
onOpenChange={onOpenChangeHandler}
open={open}
/>
);
});

/**
Expand Down
43 changes: 33 additions & 10 deletions packages/sdk-components-react-radix/src/tabs.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,43 @@
import {
type ComponentPropsWithoutRef,
type ForwardRefExoticComponent,
forwardRef,
type ComponentProps,
type RefAttributes,
} from "react";
import { type ComponentPropsWithoutRef, forwardRef, useCallback } from "react";
import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
import {
getClosestInstance,
getIndexWithinAncestorFromComponentProps,
type Hook,
} from "@webstudio-is/react-sdk/runtime";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import interactionResponse from "await-interaction-response";

export const Tabs = forwardRef<
HTMLDivElement,
Omit<ComponentPropsWithoutRef<typeof Root>, "value" | "onValueChange"> & {
value?: string;
onValueChange?: (value: string) => void;
}
>(({ defaultValue, ...props }, ref) => {
const [value, onValueChange] = useControllableState({
prop: props.value,
defaultProp: defaultValue,
onChange: props.onValueChange,
});

export const Tabs: ForwardRefExoticComponent<
Omit<ComponentProps<typeof Root>, "asChild"> & RefAttributes<HTMLDivElement>
> = Root;
const handleValueChange = useCallback(
async (value: string) => {
await interactionResponse();
onValueChange(value);
},
[onValueChange]
);

return (
<Root
ref={ref}
{...props}
value={value}
onValueChange={handleValueChange}
/>
);
});

export const TabsList = List;

Expand Down
3 changes: 2 additions & 1 deletion packages/sdk-components-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@
"@webstudio-is/react-sdk": "workspace:*",
"@webstudio-is/sdk": "workspace:*",
"colord": "^2.9.3",
"micromark": "^4.0.0"
"micromark": "^4.0.0",
"await-interaction-response": "^0.0.2"
},
"devDependencies": {
"@testing-library/react": "^14.2.2",
Expand Down
11 changes: 10 additions & 1 deletion packages/sdk-components-react/src/vimeo-play-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import {
type ElementRef,
type ComponentProps,
useContext,
useCallback,
} from "react";
import { VimeoContext } from "./vimeo";
import { Button, defaultTag } from "./button";
import interactionResponse from "await-interaction-response";

export { defaultTag };

Expand All @@ -14,10 +16,17 @@ type Props = ComponentProps<typeof Button>;
export const VimeoPlayButton = forwardRef<ElementRef<typeof defaultTag>, Props>(
(props, ref) => {
const vimeoContext = useContext(VimeoContext);

const handleClick = useCallback(async () => {
await interactionResponse();
vimeoContext.onInitPlayer();
}, [vimeoContext]);

if (vimeoContext.status !== "initial") {
return;
}
return <Button {...props} onClick={vimeoContext.onInitPlayer} ref={ref} />;

return <Button {...props} onClick={handleClick} ref={ref} />;
}
);

Expand Down
14 changes: 14 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b867e67

Please sign in to comment.