reroute-js 0.6.0 → 0.7.0

package/_/blog/src/client/routes/client.tsx

@@ -0,0 +1,564 @@
+import { useEffect, useState } from 'react';
+import { ClientOnly, Link } from 'reroute-js/react';
+
+const meta = {
+	title: 'ClientOnly Component Demo',
+	description: 'Examples of using ClientOnly to prevent hydration mismatches',
+};
+
+export default function ClientDemoPage() {
+	return (
+		<div style={{ minHeight: '100vh', background: '#f9f9f9' }}>
+			{/* Header */}
+			<header
+				style={{
+					background: '#fff',
+					borderBottom: '1px solid #e0e0e0',
+					padding: '1rem 2rem',
+					position: 'sticky',
+					top: 0,
+					zIndex: 100,
+					boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+				}}
+			>
+				<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+					<Link
+						to='/'
+						style={{
+							fontSize: '1.5rem',
+							fontWeight: 'bold',
+							color: '#333',
+							textDecoration: 'none',
+						}}
+					>
+						← Back to Home
+					</Link>
+				</div>
+			</header>
+
+			{/* Main Content */}
+			<main style={{ maxWidth: '1200px', margin: '0 auto', padding: '2rem' }}>
+				<h1 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>
+					🎯 ClientOnly Component Demo
+				</h1>
+				<p style={{ fontSize: '1.1rem', color: '#666', marginBottom: '3rem' }}>
+					This page demonstrates various use cases for the{' '}
+					<code>ClientOnly</code> component, which prevents hydration mismatches
+					by only rendering content on the client-side.
+				</p>
+
+				{/* Example 1: Current Time */}
+				<Section
+					title='Example 1: Dynamic Time Display'
+					description='Without ClientOnly, the server-rendered time would differ from the client, causing a hydration mismatch.'
+				>
+					<div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+						<ExampleCard title='❌ Wrong (Hydration Error)'>
+							<div
+								style={{
+									padding: '1rem',
+									background: '#fee',
+									border: '2px solid #fcc',
+									borderRadius: '4px',
+								}}
+							>
+								<p style={{ margin: 0 }}>
+									<strong>Time:</strong>
+									{/*comment the following line to stop the mismatch error */}
+									{new Date().toLocaleTimeString()}
+								</p>
+								<p
+									style={{
+										margin: '0.5rem 0 0 0',
+										fontSize: '0.875rem',
+										color: '#c33',
+									}}
+								>
+									⚠️ This will cause hydration mismatch! throttle your network
+									connection to see.
+								</p>
+							</div>
+						</ExampleCard>
+
+						<ExampleCard title='✅ Correct (With ClientOnly)'>
+							<ClientOnly
+								fallback={
+									<div
+										style={{
+											padding: '1rem',
+											background: '#f0f0f0',
+											borderRadius: '4px',
+										}}
+									>
+										Loading time...
+									</div>
+								}
+							>
+								<div
+									style={{
+										padding: '1rem',
+										background: '#efe',
+										border: '2px solid #cfc',
+										borderRadius: '4px',
+									}}
+								>
+									<p style={{ margin: 0 }}>
+										<strong>Time:</strong> {new Date().toLocaleTimeString()}
+									</p>
+									<p
+										style={{
+											margin: '0.5rem 0 0 0',
+											fontSize: '0.875rem',
+											color: '#393',
+										}}
+									>
+										✓ No hydration issues!
+									</p>
+								</div>
+							</ClientOnly>
+						</ExampleCard>
+					</div>
+				</Section>
+
+				{/* Example 2: Browser API */}
+				<Section
+					title='Example 2: Browser API Access'
+					description='Accessing window, navigator, or other browser APIs safely.'
+				>
+					<ClientOnly fallback={<LoadingCard message='Detecting browser...' />}>
+						<BrowserInfoCard />
+					</ClientOnly>
+				</Section>
+
+				{/* Example 3: LocalStorage */}
+				<Section
+					title='Example 3: LocalStorage Integration'
+					description='Reading from localStorage without causing SSR issues.'
+				>
+					<ClientOnly
+						fallback={<LoadingCard message='Loading preferences...' />}
+					>
+						<LocalStorageDemo />
+					</ClientOnly>
+				</Section>
+
+				{/* Example 4: Random Values */}
+				<Section
+					title='Example 4: Random Values'
+					description='Generating random values that would differ between server and client.'
+				>
+					<ClientOnly>
+						<RandomContentCard />
+					</ClientOnly>
+				</Section>
+
+				{/* Example 5: Live Counter */}
+				<Section
+					title='Example 5: Live Counter'
+					description='A component that updates in real-time and uses Date.now().'
+				>
+					<ClientOnly
+						fallback={
+							<div
+								style={{
+									padding: '2rem',
+									background: '#fff',
+									border: '1px solid #e0e0e0',
+									borderRadius: '8px',
+									textAlign: 'center',
+								}}
+							>
+								<p style={{ fontSize: '1.25rem', color: '#666' }}>
+									⏳ Initializing counter...
+								</p>
+							</div>
+						}
+					>
+						<LiveCounter />
+					</ClientOnly>
+				</Section>
+
+				{/* Code Examples */}
+				<Section
+					title='📝 Code Examples'
+					description='How to use ClientOnly in your components.'
+				>
+					<div
+						style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}
+					>
+						<CodeExample
+							title='Basic Usage'
+							code={`import { ClientOnly } from 'reroute-js/react';
+
+function MyComponent() {
+  return (
+    <ClientOnly>
+      <div>{new Date().toLocaleTimeString()}</div>
+    </ClientOnly>
+  );
+}`}
+						/>
+
+						<CodeExample
+							title='With Fallback'
+							code={`<ClientOnly fallback={<div>Loading...</div>}>
+  <ComponentUsingBrowserAPI />
+</ClientOnly>`}
+						/>
+
+						<CodeExample
+							title='LocalStorage Example'
+							code={`<ClientOnly fallback={<p>Loading preferences...</p>}>
+  <UserPreferences
+    theme={localStorage.getItem('theme')}
+  />
+</ClientOnly>`}
+						/>
+					</div>
+				</Section>
+
+				{/* Best Practices */}
+				<div
+					style={{
+						marginTop: '3rem',
+						padding: '2rem',
+						background: '#fff3cd',
+						border: '2px solid #ffc107',
+						borderRadius: '8px',
+					}}
+				>
+					<h3 style={{ marginTop: 0 }}>💡 Best Practices</h3>
+					<ul style={{ lineHeight: '1.8' }}>
+						<li>
+							Always provide a <code>fallback</code> for better user experience
+						</li>
+						<li>Keep the fallback similar in size to avoid layout shifts</li>
+						<li>
+							Use <code>ClientOnly</code> only when necessary to maximize SSR
+							benefits
+						</li>
+						<li>
+							Avoid wrapping your entire app - be specific about what needs
+							client-only rendering
+						</li>
+					</ul>
+				</div>
+
+				{/* Navigation */}
+				<div
+					style={{
+						marginTop: '3rem',
+						padding: '2rem',
+						background: '#fff',
+						border: '1px solid #e0e0e0',
+						borderRadius: '8px',
+						textAlign: 'center',
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							gap: '1rem',
+							justifyContent: 'center',
+							flexWrap: 'wrap',
+						}}
+					>
+						<Link
+							to='/'
+							style={{
+								padding: '0.75rem 1.5rem',
+								background: '#666',
+								color: '#fff',
+								textDecoration: 'none',
+								borderRadius: '4px',
+							}}
+						>
+							← Back to Home
+						</Link>
+						<Link
+							to='/docs'
+							style={{
+								padding: '0.75rem 1.5rem',
+								background: '#0066cc',
+								color: '#fff',
+								textDecoration: 'none',
+								borderRadius: '4px',
+							}}
+						>
+							Fragment Demo →
+						</Link>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+}
+
+// Helper Components
+
+function Section({
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<section
+			style={{
+				background: '#fff',
+				border: '1px solid #e0e0e0',
+				borderRadius: '8px',
+				padding: '2rem',
+				marginBottom: '2rem',
+			}}
+		>
+			<h2 style={{ marginTop: 0, marginBottom: '0.5rem' }}>{title}</h2>
+			<p style={{ color: '#666', marginBottom: '1.5rem' }}>{description}</p>
+			{children}
+		</section>
+	);
+}
+
+function ExampleCard({
+	title,
+	children,
+}: {
+	title: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div style={{ flex: '1 1 300px' }}>
+			<h4 style={{ marginTop: 0, marginBottom: '1rem' }}>{title}</h4>
+			{children}
+		</div>
+	);
+}
+
+function LoadingCard({ message }: { message: string }) {
+	return (
+		<div
+			style={{
+				padding: '2rem',
+				background: '#f8f9fa',
+				border: '1px solid #dee2e6',
+				borderRadius: '8px',
+				textAlign: 'center',
+			}}
+		>
+			<p style={{ margin: 0, color: '#6c757d' }}>⏳ {message}</p>
+		</div>
+	);
+}
+
+function BrowserInfoCard() {
+	const [info, setInfo] = useState({
+		userAgent: '',
+		language: '',
+		platform: '',
+		screenSize: '',
+	});
+
+	useEffect(() => {
+		setInfo({
+			userAgent: navigator.userAgent,
+			language: navigator.language,
+			platform: navigator.platform,
+			screenSize: `${window.innerWidth} x ${window.innerHeight}`,
+		});
+	}, []);
+
+	return (
+		<div
+			style={{
+				padding: '1.5rem',
+				background: '#fff',
+				border: '1px solid #e0e0e0',
+				borderRadius: '8px',
+			}}
+		>
+			<h4 style={{ marginTop: 0, marginBottom: '1rem' }}>🌐 Browser Info</h4>
+			<dl style={{ margin: 0 }}>
+				<dt style={{ fontWeight: 'bold', marginTop: '0.5rem' }}>Platform:</dt>
+				<dd style={{ margin: '0 0 0.5rem 1rem', color: '#666' }}>
+					{info.platform}
+				</dd>
+
+				<dt style={{ fontWeight: 'bold', marginTop: '0.5rem' }}>Language:</dt>
+				<dd style={{ margin: '0 0 0.5rem 1rem', color: '#666' }}>
+					{info.language}
+				</dd>
+
+				<dt style={{ fontWeight: 'bold', marginTop: '0.5rem' }}>
+					Screen Size:
+				</dt>
+				<dd style={{ margin: '0 0 0.5rem 1rem', color: '#666' }}>
+					{info.screenSize}
+				</dd>
+
+				<dt style={{ fontWeight: 'bold', marginTop: '0.5rem' }}>User Agent:</dt>
+				<dd
+					style={{
+						margin: '0 0 0.5rem 1rem',
+						color: '#666',
+						fontSize: '0.875rem',
+						wordBreak: 'break-word',
+					}}
+				>
+					{info.userAgent}
+				</dd>
+			</dl>
+		</div>
+	);
+}
+
+function LocalStorageDemo() {
+	const [visits, setVisits] = useState(0);
+
+	useEffect(() => {
+		const count = Number.parseInt(localStorage.getItem('visits') || '0', 10);
+		const newCount = count + 1;
+		localStorage.setItem('visits', String(newCount));
+		setVisits(newCount);
+	}, []);
+
+	const handleReset = () => {
+		localStorage.setItem('visits', '0');
+		setVisits(0);
+	};
+
+	return (
+		<div
+			style={{
+				padding: '1.5rem',
+				background: '#fff',
+				border: '1px solid #e0e0e0',
+				borderRadius: '8px',
+			}}
+		>
+			<h4 style={{ marginTop: 0, marginBottom: '1rem' }}>💾 Visit Counter</h4>
+			<p style={{ fontSize: '1.5rem', margin: '1rem 0' }}>
+				You've visited this page <strong>{visits}</strong> time
+				{visits !== 1 ? 's' : ''}
+			</p>
+			<button
+				type='button'
+				onClick={handleReset}
+				style={{
+					padding: '0.5rem 1rem',
+					background: '#dc3545',
+					color: '#fff',
+					border: 'none',
+					borderRadius: '4px',
+					cursor: 'pointer',
+				}}
+			>
+				Reset Counter
+			</button>
+			<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '1rem' }}>
+				This data is stored in localStorage and persists across page reloads.
+			</p>
+		</div>
+	);
+}
+
+function RandomContentCard() {
+	const randomColor = `hsl(${Math.random() * 360}, 70%, 80%)`;
+	const randomNumber = Math.floor(Math.random() * 100);
+	const randomEmoji = ['🎲', '🎰', '🎯', '🎪', '🎨', '🎭', '🎪'][
+		Math.floor(Math.random() * 7)
+	];
+
+	return (
+		<div
+			style={{
+				padding: '1.5rem',
+				background: randomColor,
+				border: '2px solid #333',
+				borderRadius: '8px',
+			}}
+		>
+			<h4 style={{ marginTop: 0, marginBottom: '1rem' }}>
+				{randomEmoji} Random Content
+			</h4>
+			<p style={{ fontSize: '1.25rem', margin: '1rem 0' }}>
+				Your lucky number: <strong>{randomNumber}</strong>
+			</p>
+			<p style={{ fontSize: '0.875rem', color: '#333', marginBottom: 0 }}>
+				This content is randomly generated on every client render. Without
+				ClientOnly, the server and client would generate different values,
+				causing a hydration error.
+			</p>
+		</div>
+	);
+}
+
+function LiveCounter() {
+	const [count, setCount] = useState(0);
+	const [startTime] = useState(() => Date.now());
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setCount((c) => c + 1);
+		}, 1000);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	const elapsed = Math.floor((Date.now() - startTime) / 1000);
+
+	return (
+		<div
+			style={{
+				padding: '2rem',
+				background: '#fff',
+				border: '1px solid #e0e0e0',
+				borderRadius: '8px',
+				textAlign: 'center',
+			}}
+		>
+			<h4 style={{ marginTop: 0, marginBottom: '1rem' }}>⏱️ Live Counter</h4>
+			<div
+				style={{
+					fontSize: '3rem',
+					fontWeight: 'bold',
+					color: '#0066cc',
+					margin: '1rem 0',
+				}}
+			>
+				{count}
+			</div>
+			<p style={{ color: '#666' }}>
+				Running for {elapsed} second{elapsed !== 1 ? 's' : ''}
+			</p>
+			<p style={{ fontSize: '0.875rem', color: '#999', marginTop: '1rem' }}>
+				This counter updates every second using setInterval and uses Date.now()
+				for timing.
+			</p>
+		</div>
+	);
+}
+
+function CodeExample({ title, code }: { title: string; code: string }) {
+	return (
+		<div>
+			<h4 style={{ marginBottom: '0.5rem' }}>{title}</h4>
+			<pre
+				style={{
+					background: '#f5f5f5',
+					padding: '1rem',
+					borderRadius: '4px',
+					overflow: 'auto',
+					fontSize: '0.875rem',
+					margin: 0,
+				}}
+			>
+				<code>{code}</code>
+			</pre>
+		</div>
+	);
+}
+
+export { meta };