diff --git a/examples/with-fitst-chunk-cache-ssr/src/components/Box/index.module.css b/examples/with-fitst-chunk-cache-ssr/src/components/Box/index.module.css index fd16f91c84..0baf463000 100644 --- a/examples/with-fitst-chunk-cache-ssr/src/components/Box/index.module.css +++ b/examples/with-fitst-chunk-cache-ssr/src/components/Box/index.module.css @@ -3,10 +3,9 @@ width: 100%; height: 100px; flex-direction: row; - padding: 20px; background-color: white; } .item { - flex: 1; + flex: 1; } \ No newline at end of file diff --git a/examples/with-fitst-chunk-cache-ssr/src/components/List/index.tsx b/examples/with-fitst-chunk-cache-ssr/src/components/List/index.tsx index ed7b3b5a1e..dd5b3ed871 100644 --- a/examples/with-fitst-chunk-cache-ssr/src/components/List/index.tsx +++ b/examples/with-fitst-chunk-cache-ssr/src/components/List/index.tsx @@ -61,5 +61,15 @@ async function getData() { title: 'ice.js', description: '这是 ICE 框架', }, + { + logo, + title: 'ice.js', + description: '这是 ICE 框架', + }, + { + logo, + title: 'ice.js', + description: '这是 ICE 框架', + }, ]; } \ No newline at end of file diff --git a/examples/with-fitst-chunk-cache-ssr/src/pages/index.module.css b/examples/with-fitst-chunk-cache-ssr/src/pages/index.module.css index b3728f6692..b1c8358217 100644 --- a/examples/with-fitst-chunk-cache-ssr/src/pages/index.module.css +++ b/examples/with-fitst-chunk-cache-ssr/src/pages/index.module.css @@ -4,6 +4,7 @@ align-items: center; justify-content: center; height: 100vh; + overflow-x: hidden; } .app > header { diff --git a/examples/with-fitst-chunk-cache-ssr/src/pages/index.tsx b/examples/with-fitst-chunk-cache-ssr/src/pages/index.tsx index 320da2ac76..b5b1a08224 100644 --- a/examples/with-fitst-chunk-cache-ssr/src/pages/index.tsx +++ b/examples/with-fitst-chunk-cache-ssr/src/pages/index.tsx @@ -11,6 +11,8 @@ export default function Home() {
} /> } /> + {/* https://github.com/xiaoxiaojx/blog/issues/37 */} +
\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b
' }} /> ); } diff --git a/examples/with-fitst-chunk-cache-ssr/src/pages/with-data-error.tsx b/examples/with-fitst-chunk-cache-ssr/src/pages/with-data-error.tsx deleted file mode 100644 index 16ccbe4668..0000000000 --- a/examples/with-fitst-chunk-cache-ssr/src/pages/with-data-error.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { withSuspense, useSuspenseData } from 'ice'; -import Footer from '@/components/List'; - -export default function Home() { - console.log('Render: Index'); - - return ( -
-

Home Page

- } /> -
-
- ); -} - -const SuspenseComments = withSuspense(Comments); - -function Comments() { - const comments = useSuspenseData(getCommentsData); - - console.log('Render: Comments'); - - return ( -
- {comments.map((comment, i) => ( -

- {comment} -

- ))} -
- ); -} - -export function Loading() { - return ( -
loading...
- ); -} - -const fakeData = [ - "Wait, it doesn't wait for React to load?", - 'How does this even work?', - 'I like marshmallows', -]; - -async function getCommentsData(ctx) { - console.log('load comments'); - - if (process.env.ICE_CORE_SSR === 'true') { - await new Promise((resolve, reject) => { - setTimeout(() => reject('get data error'), 100); - }); - } else { - console.log('client ctx', ctx); - await new Promise((resolve) => { - setTimeout(() => resolve(null), 100); - }); - } - - return fakeData; -} diff --git a/examples/with-fitst-chunk-cache-ssr/src/pages/with-fallback.tsx b/examples/with-fitst-chunk-cache-ssr/src/pages/with-fallback.tsx deleted file mode 100644 index b81dbfbf78..0000000000 --- a/examples/with-fitst-chunk-cache-ssr/src/pages/with-fallback.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { Component } from 'react'; -import { withSuspense, useSuspenseData } from 'ice'; -import type { ReactNode } from 'react'; -import Footer from '@/components/List'; - -export default function Home() { - console.log('Render: Index'); - - return ( -
-

Home Page

- } /> -
-
- ); -} - -const SuspenseComments = withSuspense(() => ( - - - -)); - -function Comments() { - const comments = useSuspenseData(getCommentsData); - - console.log('Render: Comments'); - - throw new Error('Comments Render Error'); - - return ( -
- {comments.map((comment, i) => ( -

- {comment} -

- ))} -
- ); -} - -function Loading() { - return ( -
loading...
- ); -} - -const fakeData = [ - "Wait, it doesn't wait for React to load?", - 'How does this even work?', - 'I like marshmallows', -]; - -async function getCommentsData() { - console.log('load comments'); - - await new Promise((resolve) => { - setTimeout(() => resolve(null), 100); - }); - - return fakeData; -} - -type EProps = { - children: ReactNode; -}; - -type EState = { - hasError: boolean; -}; - -// ErrorBoundary will only work in client side. -class ErrorBoundary extends Component { - state: EState = { - hasError: false, - }; - - static getDerivedStateFromError() { - return { hasError: true }; - } - - render() { - if (this.state.hasError) { - return

Something went wrong.

; - } - - return this.props.children; - } -} \ No newline at end of file diff --git a/examples/with-fitst-chunk-cache-ssr/src/pages/with-render-error.tsx b/examples/with-fitst-chunk-cache-ssr/src/pages/with-render-error.tsx deleted file mode 100644 index 9dc528e93a..0000000000 --- a/examples/with-fitst-chunk-cache-ssr/src/pages/with-render-error.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { withSuspense, useSuspenseData } from 'ice'; -import Footer from '@/components/List'; - -export default function Home() { - console.log('Render: Index'); - - return ( -
-

Home Page

- } /> -
-
- ); -} - -const SuspenseComments = withSuspense(Comments); - -function Comments() { - const comments = useSuspenseData(getCommentsData); - - console.log('Render: Comments'); - - if (process.env.ICE_CORE_SSR === 'true') { - throw new Error('Comments Render Error'); - } - - return ( -
- {comments.map((comment, i) => ( -

- {comment} -

- ))} -
- ); -} - -export function Loading() { - return ( -
loading...
- ); -} - -const fakeData = [ - "Wait, it doesn't wait for React to load?", - 'How does this even work?', - 'I like marshmallows', -]; - -async function getCommentsData() { - console.log('load comments'); - - await new Promise((resolve) => { - setTimeout(() => resolve(null), 100); - }); - - return fakeData; -}