-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
395 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# postcss-tailwind |
16 changes: 16 additions & 0 deletions
16
packages/react-server/examples/postcss-tailwind/app/_client.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
"use client"; | ||
|
||
import React from "react"; | ||
|
||
export function TestClient() { | ||
const [count, setCount] = React.useState(0); | ||
|
||
return ( | ||
<button | ||
className="p-2 text-blue-500 rounded-xl border flex items-center hover:shadow" | ||
onClick={() => setCount(count + 1)} | ||
> | ||
Test Client: {count} | ||
</button> | ||
); | ||
} |
10 changes: 10 additions & 0 deletions
10
packages/react-server/examples/postcss-tailwind/app/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import "./styles.css"; | ||
import type React from "react"; | ||
|
||
export default function Layout(props: React.PropsWithChildren) { | ||
return ( | ||
<html> | ||
<body>{props.children}</body> | ||
</html> | ||
); | ||
} |
27 changes: 27 additions & 0 deletions
27
packages/react-server/examples/postcss-tailwind/app/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { TestClient } from "./_client"; | ||
|
||
export default function Page() { | ||
return ( | ||
<div className="flex flex-col gap-2 p-2 text-xl items-start"> | ||
<TestServer /> | ||
<TestClient /> | ||
</div> | ||
); | ||
} | ||
|
||
let serverCount = 0; | ||
|
||
function TestServer() { | ||
return ( | ||
<form | ||
action={() => { | ||
"use server"; | ||
serverCount += 1; | ||
}} | ||
> | ||
<button className="p-2 text-orange-500 rounded-xl border flex items-center hover:shadow"> | ||
Test Server: {serverCount} | ||
</button> | ||
</form> | ||
); | ||
} |
3 changes: 3 additions & 0 deletions
3
packages/react-server/examples/postcss-tailwind/app/styles.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
58 changes: 58 additions & 0 deletions
58
packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { type Page, expect, test } from "@playwright/test"; | ||
import { | ||
createEditor, | ||
createReloadChecker, | ||
testNoJs, | ||
waitForHydration, | ||
} from "./helper"; | ||
|
||
test("basic @js", async ({ page }) => { | ||
await page.goto("/"); | ||
await waitForHydration(page); | ||
await testBasic(page); | ||
}); | ||
|
||
testNoJs("basic @nojs", async ({ page }) => { | ||
await page.goto("/"); | ||
await testBasic(page); | ||
}); | ||
|
||
async function testBasic(page: Page) { | ||
await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS( | ||
"padding-left", | ||
"8px", | ||
); | ||
await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS( | ||
"padding-left", | ||
"8px", | ||
); | ||
} | ||
|
||
test("server hmr @dev", async ({ page }) => { | ||
await page.goto("/"); | ||
await waitForHydration(page); | ||
await using _ = await createReloadChecker(page); | ||
|
||
using file = createEditor("app/page.tsx"); | ||
file.edit((t) => | ||
t.replace('<button className="p-2 ', '<button className="p-4 '), | ||
); | ||
|
||
await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS( | ||
"padding-left", | ||
"16px", | ||
); | ||
}); | ||
|
||
test("cliet hmr @dev", async ({ page }) => { | ||
await page.goto("/"); | ||
await waitForHydration(page); | ||
await using _ = await createReloadChecker(page); | ||
|
||
using file = createEditor("app/_client.tsx"); | ||
file.edit((t) => t.replace('className="p-2 ', 'className="p-4 ')); | ||
await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS( | ||
"padding-left", | ||
"16px", | ||
); | ||
}); |
44 changes: 44 additions & 0 deletions
44
packages/react-server/examples/postcss-tailwind/e2e/helper.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import fs from "node:fs"; | ||
import { type Page, expect, test } from "@playwright/test"; | ||
|
||
export async function waitForHydration(page: Page) { | ||
await expect(page.locator("html")).toHaveAttribute( | ||
"data-test-state", | ||
"hydrated", | ||
); | ||
} | ||
|
||
export const testNoJs = test.extend({ | ||
javaScriptEnabled: ({}, use) => use(false), | ||
}); | ||
|
||
export function createEditor(filepath: string) { | ||
const init = fs.readFileSync(filepath, "utf-8"); | ||
let next = init; | ||
return { | ||
edit(editFn: (data: string) => string) { | ||
next = editFn(next); | ||
fs.writeFileSync(filepath, next); | ||
}, | ||
[Symbol.dispose]() { | ||
fs.writeFileSync(filepath, init); | ||
}, | ||
}; | ||
} | ||
|
||
export async function createReloadChecker(page: Page) { | ||
await page.evaluate(() => { | ||
const el = document.createElement("meta"); | ||
el.setAttribute("name", "x-reload-check"); | ||
document.head.append(el); | ||
}); | ||
|
||
return { | ||
async [Symbol.asyncDispose]() { | ||
await page.waitForTimeout(300); | ||
await expect(page.locator(`meta[name="x-reload-check"]`)).toBeAttached({ | ||
timeout: 1, | ||
}); | ||
}, | ||
}; | ||
} |
26 changes: 26 additions & 0 deletions
26
packages/react-server/examples/postcss-tailwind/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
{ | ||
"name": "@hiogawa/react-server-example-postcss-tailwind", | ||
"version": "0.0.0", | ||
"private": true, | ||
"type": "module", | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start", | ||
"test-e2e": "playwright test", | ||
"test-e2e-preview": "E2E_PREVIEW=1 playwright test" | ||
}, | ||
"dependencies": { | ||
"@hiogawa/react-server": "workspace:*", | ||
"next": "link:../../../react-server-next", | ||
"react": "rc", | ||
"react-dom": "rc", | ||
"react-server-dom-webpack": "rc" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "latest", | ||
"@types/react-dom": "latest", | ||
"tailwindcss": "^3.4.10", | ||
"vite": "latest" | ||
} | ||
} |
1 change: 1 addition & 0 deletions
1
packages/react-server/examples/postcss-tailwind/playwright.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from "../next/playwright.config.mjs"; |
5 changes: 5 additions & 0 deletions
5
packages/react-server/examples/postcss-tailwind/postcss.config.mjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export default { | ||
plugins: { | ||
tailwindcss: {}, | ||
}, | ||
}; |
9 changes: 9 additions & 0 deletions
9
packages/react-server/examples/postcss-tailwind/tailwind.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import type { Config } from "tailwindcss"; | ||
|
||
export default { | ||
content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"], | ||
theme: { | ||
extend: {}, | ||
}, | ||
plugins: [], | ||
} satisfies Config; |
17 changes: 17 additions & 0 deletions
17
packages/react-server/examples/postcss-tailwind/tsconfig.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"include": ["**/*.ts", "**/*.tsx"], | ||
"compilerOptions": { | ||
"strict": true, | ||
"noUnusedLocals": true, | ||
"noUnusedParameters": true, | ||
"skipLibCheck": true, | ||
"verbatimModuleSyntax": true, | ||
"noEmit": true, | ||
"moduleResolution": "Bundler", | ||
"module": "ESNext", | ||
"target": "ESNext", | ||
"lib": ["ESNext", "DOM"], | ||
"types": ["next"], | ||
"jsx": "react-jsx" | ||
} | ||
} |
6 changes: 6 additions & 0 deletions
6
packages/react-server/examples/postcss-tailwind/vite.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import next from "next/vite"; | ||
import { defineConfig } from "vite"; | ||
|
||
export default defineConfig({ | ||
plugins: [next()], | ||
}); |
Oops, something went wrong.