Skip to content

Commit

Permalink
Add next12 test (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
samijaber authored Jan 2, 2024
1 parent 8eefaab commit 12d5ba5
Show file tree
Hide file tree
Showing 15 changed files with 773 additions and 5 deletions.
285 changes: 280 additions & 5 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions tests/next12-pages/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
36 changes: 36 additions & 0 deletions tests/next12-pages/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
5 changes: 5 additions & 0 deletions tests/next12-pages/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const {
withHydrationOverlay,
} = require("@builder.io/react-hydration-overlay/next");

module.exports = withHydrationOverlay()({});
22 changes: 22 additions & 0 deletions tests/next12-pages/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "@test/next12-pages",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"@builder.io/react-hydration-overlay": "workspace:*",
"next": "^12"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18"
}
}
Binary file added tests/next12-pages/public/favicon.ico
Binary file not shown.
1 change: 1 addition & 0 deletions tests/next12-pages/public/next.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions tests/next12-pages/public/vercel.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions tests/next12-pages/src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import "@/styles/globals.css";
import { HydrationOverlay } from "@builder.io/react-hydration-overlay";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
return (
<HydrationOverlay>
<Component {...pageProps} />
</HydrationOverlay>
);
}
13 changes: 13 additions & 0 deletions tests/next12-pages/src/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
13 changes: 13 additions & 0 deletions tests/next12-pages/src/pages/api/hello.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
name: string
}

export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}
16 changes: 16 additions & 0 deletions tests/next12-pages/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default function Home() {
return (
<>
<div>normal content</div>
{typeof window === "undefined" ? (
<div>SERVER RENDERED DIV</div>
) : (
<span>BROWSER RENDERED SPAN</span>
)}
<div>
<div>Hello world!</div>
<button>CLOSE</button>
</div>
</>
);
}
229 changes: 229 additions & 0 deletions tests/next12-pages/src/styles/Home.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}

.description {
display: inherit;
justify-content: inherit;
align-items: inherit;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
}

.description a {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}

.description p {
position: relative;
margin: 0;
padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
border-radius: var(--border-radius);
}

.code {
font-weight: 700;
font-family: var(--font-mono);
}

.grid {
display: grid;
grid-template-columns: repeat(4, minmax(25%, auto));
max-width: 100%;
width: var(--max-width);
}

.card {
padding: 1rem 1.2rem;
border-radius: var(--border-radius);
background: rgba(var(--card-rgb), 0);
border: 1px solid rgba(var(--card-border-rgb), 0);
transition: background 200ms, border 200ms;
}

.card span {
display: inline-block;
transition: transform 200ms;
}

.card h2 {
font-weight: 600;
margin-bottom: 0.7rem;
}

.card p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
}

.center {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 4rem 0;
}

.center::before {
background: var(--secondary-glow);
border-radius: 50%;
width: 480px;
height: 360px;
margin-left: -400px;
}

.center::after {
background: var(--primary-glow);
width: 240px;
height: 180px;
z-index: -1;
}

.center::before,
.center::after {
content: '';
left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
}

.logo {
position: relative;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-border-rgb), 0.15);
}

.card:hover span {
transform: translateX(4px);
}
}

@media (prefers-reduced-motion) {
.card:hover span {
transform: none;
}
}

/* Mobile */
@media (max-width: 700px) {
.content {
padding: 4rem;
}

.grid {
grid-template-columns: 1fr;
margin-bottom: 120px;
max-width: 320px;
text-align: center;
}

.card {
padding: 1rem 2.5rem;
}

.card h2 {
margin-bottom: 0.5rem;
}

.center {
padding: 8rem 0 6rem;
}

.center::before {
transform: none;
height: 300px;
}

.description {
font-size: 0.8rem;
}

.description a {
padding: 1rem;
}

.description p,
.description div {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
}

.description p {
align-items: center;
inset: 0 0 auto;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
background: linear-gradient(
to bottom,
rgba(var(--background-start-rgb), 1),
rgba(var(--callout-rgb), 0.5)
);
background-clip: padding-box;
backdrop-filter: blur(24px);
}

.description div {
align-items: flex-end;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
background: linear-gradient(
to bottom,
transparent 0%,
rgb(var(--background-end-rgb)) 40%
);
z-index: 1;
}
}

/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
.grid {
grid-template-columns: repeat(2, 50%);
}
}

@media (prefers-color-scheme: dark) {
.vercelLogo {
filter: invert(1);
}

.logo {
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
}

@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
Loading

0 comments on commit 12d5ba5

Please sign in to comment.