merge /examples/streaming/ into /examples/basic/

vikejs · Apr 8, 2024 · 7c30b9d · 7c30b9d
1 parent ac3346e
commit 7c30b9d
Show file tree

Hide file tree

Showing 22 changed files with 30 additions and 310 deletions.
diff --git a/examples/streaming/components/Counter.tsx → examples/basic/components/Counter.tsx b/examples/streaming/components/Counter.tsx → examples/basic/components/Counter.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
-
 export { Counter }
 
+import React, { useState } from 'react'
+
 function Counter() {
   const [count, setCount] = useState(0)
   return (

diff --git a/examples/basic/layouts/LayoutDefault.tsx b/examples/basic/layouts/LayoutDefault.tsx
@@ -18,6 +18,7 @@ function LayoutDefault({ children }: { children: React.ReactNode }) {
         <Logo />
         <Link href="/">Welcome</Link>
         <Link href="/star-wars">Data Fetching</Link>
+        <Link href="/streaming">HTML Streaming</Link>
       </Sidebar>
       <Content>{children}</Content>
     </div>

diff --git a/examples/basic/layouts/style.css b/examples/basic/layouts/style.css
@@ -27,3 +27,11 @@ body {
 body.page-is-transitioning #page-content {
   opacity: 0;
 }
+
+/* Inline code blocks */
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "vite build && vite preview",
     "test": "tsc --noEmit"
   },
   "dependencies": {
@@ -12,6 +12,7 @@
     "node-fetch": "^3.3.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-streaming": "^0.3.22",
     "typescript": "^5.3.3",
     "vike": "^0.4.168",
     "vike-react": "^0.4.6",

diff --git a/examples/basic/pages/+config.ts b/examples/basic/pages/+config.ts
@@ -11,5 +11,7 @@ const config = {
   Head: HeadDefault,
   // <title>
   title: 'My Vike + React App',
+  // Enable HTML streaming (https://vike.dev/stream)
+  stream: true,
   extends: vikeReact
 } satisfies Config
diff --git a/examples/basic/pages/index/+Page.tsx b/examples/basic/pages/index/+Page.tsx
@@ -1,7 +1,7 @@
 export default Page
 
 import React from 'react'
-import { Counter } from './Counter'
+import { Counter } from '../../components/Counter'
 
 function Page() {
   return (

diff --git a/examples/basic/pages/index/Counter.tsx b/examples/basic/pages/index/Counter.tsx
diff --git a/examples/streaming/pages/index/+Page.tsx → examples/basic/pages/streaming/+Page.tsx b/examples/streaming/pages/index/+Page.tsx → examples/basic/pages/streaming/+Page.tsx
@@ -1,14 +1,18 @@
 export default Page
 
-import React, { Suspense, useState } from 'react'
+import React, { Suspense } from 'react'
 import { useAsync } from 'react-streaming'
 import { Counter } from '../../components/Counter'
 
 function Page() {
-  const [count, setCount] = useState(0)
   return (
     <>
       <h1>Star Wars Movies</h1>
+      <p>
+        Same as <code>/star-wars</code> page, but showcasing <a href="https://vike.dev/streaming">HTML Streaming</a> and{' '}
+        <a href="https://vike.dev/streaming#progressive-rendering">Progressive Rendering</a> (note how the counter is
+        interactive before the data has finished loading).
+      </p>
       <Counter />
       <Suspense fallback={<p>Loading...</p>}>
         <MovieList />

diff --git a/examples/basic/readme.md b/examples/basic/readme.md
@@ -1,10 +1,9 @@
-Basic example of using `vike-react`, showcasing:
+Full-fledged example of using `vike-react`, showcasing:
 
-* [layouts](https://vike.dev/layouts)
-* rendering to `<head>`
-* fetching data with [`data()`](https://vike.dev/data) hooks
-* [configs](https://vike.dev/config)
-* [error pages](https://vike.dev/error-page)
+- [Layout](https://vike.dev/Layout)
+- Fetching data with [`data()`](https://vike.dev/data)
+- [Error page](https://vike.dev/error-page)
+- [HTML Streaming](https://vike.dev/streaming)
 
 ```bash
 git clone git@github.com:vikejs/vike-react

diff --git a/examples/streaming/.gitignore b/examples/streaming/.gitignore
diff --git a/examples/streaming/assets/logo.svg b/examples/streaming/assets/logo.svg
diff --git a/examples/streaming/components/Link.tsx b/examples/streaming/components/Link.tsx
diff --git a/examples/streaming/layouts/HeadDefault.tsx b/examples/streaming/layouts/HeadDefault.tsx
diff --git a/examples/streaming/layouts/LayoutDefault.tsx b/examples/streaming/layouts/LayoutDefault.tsx
diff --git a/examples/streaming/layouts/style.css b/examples/streaming/layouts/style.css
diff --git a/examples/streaming/package.json b/examples/streaming/package.json
diff --git a/examples/streaming/pages/+config.ts b/examples/streaming/pages/+config.ts
diff --git a/examples/streaming/pages/_error/+Page.tsx b/examples/streaming/pages/_error/+Page.tsx
diff --git a/examples/streaming/readme.md b/examples/streaming/readme.md
diff --git a/examples/streaming/tsconfig.json b/examples/streaming/tsconfig.json
diff --git a/examples/streaming/vite.config.ts b/examples/streaming/vite.config.ts