diff --git a/packages/app/README.md b/packages/app/README.md index 82649bab..2b425472 100644 --- a/packages/app/README.md +++ b/packages/app/README.md @@ -4,16 +4,9 @@ This application showcases React Web Components generated using a custom output - Demonstrates side-by-side comparisons of different rendering strategies: `'wrapper'`, `'server-only'`, and `'use client';`. - Provides test pages with varying numbers of components (50, 100, 200, and 500) for performance evaluation. +- A TodoMVC example basec on [vogloblinsky/web-components-benchmark](https://github.com/vogloblinsky/web-components-benchmark) to demonstrate the interactive use of `'wrapper'` and `'server-only'`. - Includes a Storybook environment for isolated component exploration. ## Deployment Live version: https://stencil-nextjs-example-app.vercel.app (`'wrapper'`, `'server-only'`, and `'use client';`) - -Test pages (`'server-only'` approach only, for performance evaluation): -- 50 elements: https://stencil-nextjs-example-app.vercel.app/test/50 -- 100 elements: https://stencil-nextjs-example-app.vercel.app/test/100 -- 200 elements: https://stencil-nextjs-example-app.vercel.app/test/200 -- 500 elements: https://stencil-nextjs-example-app.vercel.app/test/500 - -Storybook: https://stencil-nextjs-example-app.vercel.app/storybook/index.html (`'use client';`) diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx index 95d25eeb..1b67e7d0 100644 --- a/packages/app/src/app/layout.tsx +++ b/packages/app/src/app/layout.tsx @@ -1,17 +1,24 @@ /* eslint-disable @next/next/no-before-interactive-script-outside-document */ import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; import Script from 'next/script'; +import { FC, PropsWithChildren } from 'react'; + +const inter = Inter({ + subsets: ['latin'], + display: 'swap', +}); export const metadata: Metadata = { title: 'Next.js ABC Web Components App', description: 'This Next.js App demonstrates how to use the ABC Web Components.', }; -export default async function RootLayout({ children }: { children: React.ReactNode }) { +const RootLayout: FC = async ({ children }) => { await import('abc-web-components-react-wrapper/server'); return ( - + {children} -