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

Jump to bottom

[NoSSR] Port the component from legacy Base UI #593

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[NoSSR] Port the component from legacy Base UI #593

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9015448
[NoSSR] Port the component from legacy Base UI
michaldudak Sep 10, 2024
d496b57
Merge remote-tracking branch 'upstream/master' into no-ssr-component
michaldudak Sep 19, 2024
a8611c1
Format demos
michaldudak Sep 19, 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
10 changes: 7 additions & 3 deletions docs/data/components/no-ssr/FrameDeferring.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';

import * as React from 'react';
import { styled } from '@mui/system';
import { NoSsr } from '@base_ui/react/NoSsr';
import { Box } from '@mui/system';

function LargeTree() {
return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function FrameDeferring() {
</button>
<br />
<br />
<Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
<Panel sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
{state.open ? (
<React.Fragment>
<div>Outside NoSsr</div>
Expand All @@ -51,7 +51,11 @@ export default function FrameDeferring() {
</NoSsr>
</React.Fragment>
) : null}
</Box>
</Panel>
</div>
);
}

const Panel = styled('div')`
padding: 16px;
`;
10 changes: 7 additions & 3 deletions docs/data/components/no-ssr/FrameDeferring.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client';

michaldudak marked this conversation as resolved.
Show resolved Hide resolved
import * as React from 'react';
import { styled } from '@mui/system';
import { NoSsr } from '@base_ui/react/NoSsr';
import { Box } from '@mui/system';

function LargeTree(): any {
return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function FrameDeferring() {
</button>
<br />
<br />
<Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
<Panel sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
{state.open ? (
<React.Fragment>
<div>Outside NoSsr</div>
Expand All @@ -51,7 +51,11 @@ export default function FrameDeferring() {
</NoSsr>
</React.Fragment>
) : null}
</Box>
</Panel>
</div>
);
}

const Panel = styled('div')`
padding: 16px;
`;
16 changes: 7 additions & 9 deletions docs/data/components/no-ssr/SimpleNoSsr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
'use client';

import * as React from 'react';
import { styled } from '@mui/system';
import { NoSsr } from '@base_ui/react/NoSsr';
import { Box } from '@mui/system';

export default function SimpleNoSsr() {
return (
<div>
<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
Server and Client
</Box>
<Panel>Server and Client</Panel>
<NoSsr>
<Box
sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
>
Client only
</Box>
<Panel>Client only</Panel>
</NoSsr>
</div>
);
}

const Panel = styled('div')`
Copy link
Member

Choose a reason for hiding this comment

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

Nice, I love how it makes the .preview much easier to follow.

padding: 16px;
`;
16 changes: 7 additions & 9 deletions docs/data/components/no-ssr/SimpleNoSsr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
'use client';

import * as React from 'react';
import { styled } from '@mui/system';
import { NoSsr } from '@base_ui/react/NoSsr';
import { Box } from '@mui/system';

export default function SimpleNoSsr() {
return (
<div>
Copy link
Member

@oliviertassinari oliviertassinari Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

How about we freeze the height on these demos?

Suggested change
<div>
<Box sx={{ height: … }}>

It layout shifts otherwise when loading the demo page. It's annoying, anchor links to ids below this demo don't work well.

<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
Server and Client
</Box>
<Panel>Server and Client</Panel>
<NoSsr>
<Box
sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
>
Client only
</Box>
<Panel>Client only</Panel>
</NoSsr>
</div>
);
}

const Panel = styled('div')`
padding: 16px;
`;
10 changes: 2 additions & 8 deletions docs/data/components/no-ssr/SimpleNoSsr.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
Server and Client
</Box>
<Panel>Server and Client</Panel>
<NoSsr>
<Box
sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
>
Client only
</Box>
<Panel>Client only</Panel>
</NoSsr>
2 changes: 1 addition & 1 deletion docs/data/components/no-ssr/no-ssr.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
productId: base-ui
title: No SSR React component
title: No-SSR React component
description: The No-SSR component defers the rendering of children components from the server to the client.
components: NoSsr
---
Copy link
Member

@oliviertassinari oliviertassinari Sep 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

To use "No-SSR" below as well for the h1 of the docs page, no? It's uses "No SSR" right now.

SCR-20240919-sqrc

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't know which one is more correct TBH. @colmtuite, @atomiks, could you chime in?

Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe ClientOnly is a better name?

Copy link
Member

@oliviertassinari oliviertassinari Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Client only as client bundle only or client side only? 😁

Expand Down
1 change: 1 addition & 0 deletions docs/data/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const pages: readonly RouteMetadata[] = [
{ pathname: '/components/react-field', title: 'Field' },
{ pathname: '/components/react-fieldset', title: 'Fieldset' },
{ pathname: '/components/react-menu', title: 'Menu' },
{ pathname: '/components/react-no-ssr', title: 'No-SSR' },
{ pathname: '/components/react-number-field', title: 'Number Field' },
{ pathname: '/components/react-popover', title: 'Popover' },
{ pathname: '/components/react-preview-card', title: 'Preview Card' },
Expand Down
2 changes: 1 addition & 1 deletion docs/data/translations/api-docs/no-ssr/no-ssr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"componentDescription": "NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n\nThis component can be useful in a variety of situations:\n\n* Escape hatch for broken dependencies not supporting SSR.\n* Improve the time-to-first paint on the client by only rendering above the fold.\n* Reduce the rendering time on the server.\n* Under too heavy server load, you can turn on service degradation.",
"propDescriptions": {
"children": { "description": "You can wrap a node." },
"children": { "description": "React node to render on client only." },
"defer": {
"description": "If <code>true</code>, the component will not only prevent server-side rendering. It will also defer the rendering of the children into a different screen frame."
},
Expand Down
25 changes: 22 additions & 3 deletions packages/mui-base/src/NoSsr/NoSsr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
import { NoSsrProps } from './NoSsr.types';

/**
* NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
Expand All @@ -22,7 +21,7 @@ import { NoSsrProps } from './NoSsr.types';
*
* - [NoSsr API](https://base-ui.netlify.app/components/react-no-ssr/#api-reference-NoSsr)
*/
function NoSsr(props: NoSsrProps): JSX.Element {
function NoSsr(props: NoSsr.Props): JSX.Element {
const { children, defer = false, fallback = null } = props;
const [mountedState, setMountedState] = React.useState(false);

Expand All @@ -42,13 +41,33 @@ function NoSsr(props: NoSsrProps): JSX.Element {
return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
}

namespace NoSsr {
export interface Props {
Comment on lines +44 to +45
Copy link
Member

Choose a reason for hiding this comment

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

Is this a new pattern? How can people extend the NoSsr prop now?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, we decided to go with this pattern. See the rationale in #517. The interface should be extendable the same way as without the namespace.

/**
* React node to render on client only.
*/
children?: React.ReactNode;
/**
* If `true`, the component will not only prevent server-side rendering.
* It will also defer the rendering of the children into a different screen frame.
* @default false
*/
defer?: boolean;
/**
* The fallback content to display.
* @default null
*/
fallback?: React.ReactNode;
}
}

NoSsr.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* You can wrap a node.
* React node to render on client only.
*/
children: PropTypes.node,
/**
Expand Down
19 changes: 0 additions & 19 deletions packages/mui-base/src/NoSsr/NoSsr.types.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/mui-base/src/NoSsr/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { NoSsr } from './NoSsr';
export * from './NoSsr.types';
1 change: 1 addition & 0 deletions packages/mui-base/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export * from './Checkbox/index.barrel';
export * from './CheckboxGroup/index.barrel';
export * from './Dialog/index.barrel';
export * from './NumberField/index.barrel';
export * from './NoSsr/index';
export * from './Popover/index.barrel';
export * from './Progress/index.barrel';
export * from './Slider/index.barrel';
Expand Down
Loading