docs: add ssr to local example

nerdyman · Apr 7, 2023 · 9e52683 · 9e52683
1 parent 5c73eca
commit 9e52683
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 321 deletions.
diff --git a/docs/example/index.html b/docs/example/index.html
diff --git a/docs/example/package.json b/docs/example/package.json
@@ -3,21 +3,26 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "packageManager": "pnpm@8.1.1",
   "scripts": {
+    "start": "pnpm run dev",
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-compare-slider": "*",
-    "react-dom": "^18.2.0"
+    "react-compare-slider": "*"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
+    "modern-normalize": "^1.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
     "typescript": "^5.0.3",
-    "vite": "^4.2.0"
+    "vite": "^4.2.0",
+    "vite-plugin-ssr": "^0.4.111"
   }
 }
diff --git a/docs/example/pages/index.css b/docs/example/pages/index.css
@@ -0,0 +1,28 @@
+@import 'modern-normalize/modern-normalize.css';
+
+:root {
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html,
+body,
+#root,
+#page-view {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
diff --git a/docs/example/pages/index.page.tsx b/docs/example/pages/index.page.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
+
+import './index.css';
+
+function Page(): JSX.Element {
+  return (
+    <div style={{ width: '100%', height: '100%', flexGrow: 1 }}>
+      <ReactCompareSlider
+        itemOne={
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-1.jpg"
+            alt="Image one"
+          />
+        }
+        itemTwo={
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-2.jpg"
+            alt="Image two"
+          />
+        }
+        style={{ width: '100%', height: '50%' }}
+      />
+      <ReactCompareSlider
+        portrait
+        itemOne={
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-1.jpg"
+            alt="Image one"
+          />
+        }
+        itemTwo={
+          <ReactCompareSliderImage
+            src="https://github.com/nerdyman/stuff/raw/main/libs/react-compare-slider/demo-images/sydney-opera-house-2.jpg"
+            alt="Image two"
+          />
+        }
+        style={{ width: '100%', height: '50%' }}
+      />
+    </div>
+  );
+}
+
+export { Page };
diff --git a/docs/example/pages/index.tsx b/docs/example/pages/index.tsx
diff --git a/docs/example/public/vite.svg b/docs/example/public/vite.svg
diff --git a/docs/example/renderer/PageLayout.tsx b/docs/example/renderer/PageLayout.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const PageLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return <React.StrictMode>{children}</React.StrictMode>;
+};
diff --git a/docs/example/renderer/_default.page.client.tsx b/docs/example/renderer/_default.page.client.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+
+import { PageLayout } from './PageLayout';
+
+export async function render(pageContext: any) {
+  const { Page } = pageContext;
+  hydrateRoot(
+    document.getElementById('page-view') as HTMLElement,
+    <PageLayout>
+      <Page />
+    </PageLayout>,
+  );
+}
diff --git a/docs/example/renderer/_default.page.server.tsx b/docs/example/renderer/_default.page.server.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr/server';
+
+import { PageLayout } from './PageLayout';
+
+export async function render(pageContext: any) {
+  const { Page } = pageContext;
+  const viewHtml = dangerouslySkipEscape(
+    renderToString(
+      <PageLayout>
+        <Page />
+      </PageLayout>,
+    ),
+  );
+
+  return escapeInject/*html*/ `<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>React Compare Slider &ndash; Example</title>
+    </head>
+      <body>
+        <div id="page-view">${viewHtml}</div>
+      </body>
+    </html>`;
+}
diff --git a/docs/example/src/App.css b/docs/example/src/App.css
diff --git a/docs/example/src/App.tsx b/docs/example/src/App.tsx
diff --git a/docs/example/src/assets/react.svg b/docs/example/src/assets/react.svg
diff --git a/docs/example/src/index.css b/docs/example/src/index.css
diff --git a/docs/example/src/main.tsx b/docs/example/src/main.tsx
diff --git a/docs/example/src/vite-env.d.ts b/docs/example/src/vite-env.d.ts
diff --git a/docs/example/tsconfig.json b/docs/example/tsconfig.json
@@ -16,6 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["pages", "renderer"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/docs/example/vite.config.ts b/docs/example/vite.config.ts
@@ -1,7 +1,9 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import ssr from 'vite-plugin-ssr/plugin';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), ssr()],
+  optimizeDeps: { include: ['react/jsx-dev-runtime'] },
 });
diff --git a/docs/storybook/content/05-only-handle-draggable.stories.mdx b/docs/storybook/content/05-only-handle-draggable.stories.mdx
@@ -32,7 +32,7 @@ const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 </Canvas>
 
 <Canvas>
-  <Story id="recipies-detect-touch-devices--detect-touch-devices" />
+  <Story id="recipies-detecttouchdevices--detect-touch-devices" />
 </Canvas>
 
 <Canvas>
@@ -43,5 +43,5 @@ const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
 
 Also checkout the
 [Only Handle Draggable](/story/docs--only-handle-draggable) and
-[Detect Touch Devices](/story/recipies-detect-touch-devices--detect-touch-devices) and
+[Detect Touch Devices](/story/recipies-detecttouchdevices--detect-touch-devices) and
 [Google Maps](/story/recipies-googlemaps--google-maps) demos.