Skip to content

Commit

Permalink
RSC compatibility (#2923)
Browse files Browse the repository at this point in the history
* RSC compatibility and more SSR tests

* Track version changes

* Track version changes
  • Loading branch information
vladmoroz authored Jun 3, 2024
1 parent b24bc36 commit 7c0fd4c
Show file tree
Hide file tree
Showing 82 changed files with 646 additions and 237 deletions.
47 changes: 47 additions & 0 deletions .yarn/versions/1f1ba8b4.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
releases:
"@radix-ui/react-accessible-icon": patch
"@radix-ui/react-accordion": patch
"@radix-ui/react-alert-dialog": patch
"@radix-ui/react-announce": patch
"@radix-ui/react-arrow": patch
"@radix-ui/react-aspect-ratio": patch
"@radix-ui/react-avatar": patch
"@radix-ui/react-checkbox": patch
"@radix-ui/react-collapsible": patch
"@radix-ui/react-collection": patch
"@radix-ui/react-context-menu": patch
"@radix-ui/react-dialog": patch
"@radix-ui/react-dismissable-layer": patch
"@radix-ui/react-dropdown-menu": patch
"@radix-ui/react-focus-guards": patch
"@radix-ui/react-focus-scope": patch
"@radix-ui/react-form": patch
"@radix-ui/react-hover-card": patch
"@radix-ui/react-label": patch
"@radix-ui/react-menu": patch
"@radix-ui/react-menubar": patch
"@radix-ui/react-navigation-menu": patch
"@radix-ui/react-popover": patch
"@radix-ui/react-popper": patch
"@radix-ui/react-portal": minor
"@radix-ui/react-presence": patch
"@radix-ui/react-primitive": patch
"@radix-ui/react-progress": patch
"@radix-ui/react-radio-group": patch
"@radix-ui/react-roving-focus": patch
"@radix-ui/react-scroll-area": patch
"@radix-ui/react-select": patch
"@radix-ui/react-separator": patch
"@radix-ui/react-slider": patch
"@radix-ui/react-switch": patch
"@radix-ui/react-tabs": patch
"@radix-ui/react-toast": patch
"@radix-ui/react-toggle": patch
"@radix-ui/react-toggle-group": patch
"@radix-ui/react-toolbar": patch
"@radix-ui/react-tooltip": patch
"@radix-ui/react-visually-hidden": patch

declined:
- primitives
- ssr-testing
1 change: 1 addition & 0 deletions packages/react/accordion/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createAccordionScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/alert-dialog/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createAlertDialogScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/announce/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
Announce,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/avatar/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createAvatarScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/checkbox/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createCheckboxScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/collapsible/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createCollapsibleScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/collection/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
'use client';
export { createCollection } from './Collection';
export type { CollectionProps } from './Collection';
1 change: 1 addition & 0 deletions packages/react/context-menu/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createContextMenuScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/dialog/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createDialogScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/dismissable-layer/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
DismissableLayer,
DismissableLayerBranch,
Expand Down
1 change: 1 addition & 0 deletions packages/react/dropdown-menu/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createDropdownMenuScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/focus-guards/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
FocusGuards,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/focus-scope/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
FocusScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/form/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createFormScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/hover-card/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createHoverCardScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/label/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
Label,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/menu/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createMenuScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/menubar/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createMenubarScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/navigation-menu/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createNavigationMenuScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/popover/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createPopoverScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/popper/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createPopperScope,
//
Expand Down
8 changes: 6 additions & 2 deletions packages/react/portal/src/Portal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import ReactDOM from 'react-dom';
import { Primitive } from '@radix-ui/react-primitive';
import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';

import type * as Radix from '@radix-ui/react-primitive';

Expand All @@ -16,11 +17,14 @@ interface PortalProps extends PrimitiveDivProps {
/**
* An optional container where the portaled content should be appended.
*/
container?: HTMLElement | null;
container?: Element | null;
}

const Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {
const { container = globalThis?.document?.body, ...portalProps } = props;
const { container: containerProp, ...portalProps } = props;
const [mounted, setMounted] = React.useState(false);
useLayoutEffect(() => setMounted(true), []);
const container = containerProp || (mounted && globalThis?.document?.body);
return container
? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)
: null;
Expand Down
1 change: 1 addition & 0 deletions packages/react/portal/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
Portal,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/presence/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
'use client';
export { Presence } from './Presence';
export type { PresenceProps } from './Presence';
4 changes: 2 additions & 2 deletions packages/react/primitive/src/Primitive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ const Primitive = NODES.reduce((primitive, node) => {
const { asChild, ...primitiveProps } = props;
const Comp: any = asChild ? Slot : node;

React.useEffect(() => {
if (typeof window !== 'undefined') {
(window as any)[Symbol.for('radix-ui')] = true;
}, []);
}

return <Comp {...primitiveProps} ref={forwardedRef} />;
});
Expand Down
1 change: 1 addition & 0 deletions packages/react/progress/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createProgressScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/radio-group/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createRadioGroupScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/roving-focus/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createRovingFocusGroupScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/scroll-area/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createScrollAreaScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/select/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createSelectScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/slider/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createSliderScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/switch/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createSwitchScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/tabs/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createTabsScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/toast/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createToastScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/toggle-group/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createToggleGroupScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/toggle/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
Toggle,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/toolbar/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createToolbarScope,
//
Expand Down
1 change: 1 addition & 0 deletions packages/react/tooltip/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
export {
createTooltipScope,
//
Expand Down
12 changes: 12 additions & 0 deletions ssr-testing/app/accessible-icon/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from 'react';
import { AccessibleIcon } from '@radix-ui/react-accessible-icon';

export default function Page() {
return (
<button type="button">
<AccessibleIcon label="Close">
<span>X</span>
</AccessibleIcon>
</button>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
AccordionContent,
} from '@radix-ui/react-accordion';

export default function AccordionPage() {
export default function Page() {
return (
<Accordion type="multiple">
<AccordionItem value="one">
Expand Down
31 changes: 31 additions & 0 deletions ssr-testing/app/alert-dialog/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogOverlay,
AlertDialogContent,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
AlertDialogPortal,
} from '@radix-ui/react-alert-dialog';

export default function Page() {
return (
<AlertDialog>
<AlertDialogTrigger>delete everything</AlertDialogTrigger>
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This will do a very dangerous thing. Thar be dragons!
</AlertDialogDescription>
<AlertDialogAction>yolo, do it</AlertDialogAction>
<AlertDialogCancel>maybe not</AlertDialogCancel>
</AlertDialogContent>
</AlertDialogPortal>
</AlertDialog>
);
}
16 changes: 16 additions & 0 deletions ssr-testing/app/aspect-ratio/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';
import { AspectRatio } from '@radix-ui/react-aspect-ratio';

export default function Page() {
return (
<div style={{ width: 500 }}>
<AspectRatio ratio={2 / 1}>
<img
src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80"
alt="A house in a forest"
style={{ objectFit: 'cover', width: '100%', height: '100%' }}
/>
</AspectRatio>
</div>
);
}
10 changes: 10 additions & 0 deletions ssr-testing/app/avatar/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from 'react';
import * as Avatar from '@radix-ui/react-avatar';

export default function Page() {
return (
<Avatar.Root>
<Avatar.Fallback>A</Avatar.Fallback>
</Avatar.Root>
);
}
10 changes: 10 additions & 0 deletions ssr-testing/app/checkbox/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from 'react';
import * as Checkbox from '@radix-ui/react-checkbox';

export default function Page() {
return (
<Checkbox.Root>
[ <Checkbox.Indicator></Checkbox.Indicator> ]
</Checkbox.Root>
);
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@radix-ui/react-collapsible';

export default function CollapsiblePage() {
export default function Page() {
return (
<Collapsible>
<CollapsibleTrigger>Trigger</CollapsibleTrigger>
Expand Down
20 changes: 20 additions & 0 deletions ssr-testing/app/context-menu/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import * as ContextMenu from '@radix-ui/react-context-menu';

export default function Page() {
return (
<ContextMenu.Root>
<ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content alignOffset={-5}>
<ContextMenu.Item>Undo</ContextMenu.Item>
<ContextMenu.Item>Redo</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item disabled>Cut</ContextMenu.Item>
<ContextMenu.Item>Copy</ContextMenu.Item>
<ContextMenu.Item>Paste</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
DialogClose,
} from '@radix-ui/react-dialog';

export default function DialogPage() {
export default function Page() {
return (
<Dialog defaultOpen>
<DialogTrigger>open</DialogTrigger>
Expand Down
Loading

0 comments on commit 7c0fd4c

Please sign in to comment.