Skip to content

Commit 5af1c34

Browse files
dai-shidai-shi
authored
fix: partially for css modules (#98)
* wip: fix ssr server * add examples/09 * run prettier
1 parent 34188f0 commit 5af1c34

File tree

11 files changed

+181
-4
lines changed

11 files changed

+181
-4
lines changed

‎examples/09_cssmodules/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "waku-example",
3+
"version": "0.1.0",
4+
"type": "module",
5+
"private": true,
6+
"scripts": {
7+
"dev": "waku dev --with-ssr",
8+
"build": "waku build",
9+
"start": "waku start --with-ssr"
10+
},
11+
"dependencies": {
12+
"express": "^4.18.2",
13+
"react": "18.3.0-canary-7118f5dd7-20230705",
14+
"react-dom": "18.3.0-canary-7118f5dd7-20230705",
15+
"react-server-dom-webpack": "18.3.0-canary-7118f5dd7-20230705",
16+
"waku": "0.13.0"
17+
},
18+
"devDependencies": {
19+
"@types/react": "^18.2.8",
20+
"@types/react-dom": "^18.2.4",
21+
"typescript": "^5.1.3"
22+
}
23+
}

‎examples/09_cssmodules/src/components/App.module.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.title {
2+
background-color: pink;
3+
}

‎examples/09_cssmodules/src/components/App.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @ts-expect-error no types
2+
import styles from "./App.module.css";
3+
import { Counter } from "./Counter.js";
4+
5+
const App = ({ name = "Anonymous" }) => {
6+
return (
7+
<div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
8+
<h1 className={styles.title}>Hello {name}!!</h1>
9+
<h3>This is a server component.</h3>
10+
<Counter />
11+
</div>
12+
);
13+
};
14+
15+
export default App;

‎examples/09_cssmodules/src/components/Counter.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
5+
export const Counter = () => {
6+
const [count, setCount] = useState(0);
7+
return (
8+
<div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
9+
<p>Count: {count}</p>
10+
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
11+
<h3>This is a client component.</h3>
12+
</div>
13+
);
14+
};

‎examples/09_cssmodules/src/entries.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { defineEntries } from "waku/server";
2+
3+
export default defineEntries(
4+
// getEntry
5+
async (id) => {
6+
switch (id) {
7+
case "App":
8+
return import("./components/App.js");
9+
default:
10+
return null;
11+
}
12+
},
13+
// getBuildConfig
14+
async () => {
15+
return {
16+
"/": {
17+
elements: [["App", { name: "Waku" }]],
18+
},
19+
};
20+
},
21+
// getSsrConfig
22+
async (pathStr) => {
23+
switch (pathStr) {
24+
case "/":
25+
return { element: ["App", { name: "Waku" }] };
26+
default:
27+
return null;
28+
}
29+
}
30+
);

‎examples/09_cssmodules/src/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Waku example</title>
6+
<style>
7+
@keyframes spinner {
8+
to {
9+
transform: rotate(360deg);
10+
}
11+
}
12+
.spinner {
13+
width: 36px;
14+
height: 36px;
15+
margin: auto;
16+
border: 2px solid #ddd;
17+
border-top-color: #222;
18+
border-radius: 50%;
19+
animation: spinner 1s linear infinite;
20+
}
21+
#root > .spinner {
22+
margin-top: calc(50% - 18px);
23+
}
24+
</style>
25+
<link rel="stylesheet" href="/components/App.module.css" />
26+
</head>
27+
<body>
28+
<!--placeholder1-->
29+
<div id="root">
30+
<div class="spinner"></div>
31+
</div>
32+
<!--/placeholder1-->
33+
<script src="/main.tsx" async type="module"></script>
34+
<!--placeholder2-->
35+
<!--/placeholder2-->
36+
</body>
37+
</html>

‎examples/09_cssmodules/src/main.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
import { serve } from "waku/client";
4+
5+
const App = serve<{ name: string }>("App");
6+
const rootElement = (
7+
<StrictMode>
8+
<App name="Waku" />
9+
</StrictMode>
10+
);
11+
12+
createRoot(document.getElementById("root")!).render(rootElement);

‎examples/09_cssmodules/tsconfig.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"strict": true,
4+
"target": "esnext",
5+
"downlevelIteration": true,
6+
"esModuleInterop": true,
7+
"module": "nodenext",
8+
"skipLibCheck": true,
9+
"noUncheckedIndexedAccess": true,
10+
"exactOptionalPropertyTypes": true,
11+
"jsx": "react-jsx"
12+
}
13+
}

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"examples:dev:06_nesting": "NAME=06_nesting npm run examples:dev",
6565
"examples:dev:07_router": "NAME=07_router npm run examples:dev",
6666
"examples:dev:08_cookies": "NAME=08_cookies npm run examples:dev",
67+
"examples:dev:09_cssmodules": "NAME=09_cssmodules npm run examples:dev",
6768
"examples:build": "npm run compile:code && (cd ./examples/${NAME} && npm run build)",
6869
"examples:prd": "npm run examples:build && (cd ./examples/${NAME} && npm start)",
6970
"examples:prd:01_counter": "NAME=01_counter npm run examples:prd",
@@ -74,6 +75,7 @@
7475
"examples:prd:06_nesting": "NAME=06_nesting npm run examples:prd",
7576
"examples:prd:07_router": "NAME=07_router npm run examples:prd",
7677
"examples:prd:08_cookies": "NAME=08_cookies npm run examples:prd",
78+
"examples:prd:09_cssmodules": "NAME=09_cssmodules npm run examples:prd",
7779
"website:dev": "npm run compile:code && ./dist/cli.js dev --config ./website/vite.config.ts",
7880
"website:build": "npm run compile:code && ./dist/cli.js build --config ./website/vite.config.ts",
7981
"website:vercel": "npm run website:build && cp -Lr ./website/dist/.vercel/output ./.vercel/",
@@ -111,7 +113,6 @@
111113
"eslint-plugin-react": "^7.32.2",
112114
"express": "^4.18.2",
113115
"glob": "^10.3.1",
114-
"postcss": "^8.4.24",
115116
"prettier": "^2.8.8",
116117
"react": "18.3.0-canary-7118f5dd7-20230705",
117118
"react-dom": "18.3.0-canary-7118f5dd7-20230705",

‎pnpm-lock.yaml

+28-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/middleware/rsc/worker-impl.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import path from "node:path";
22
import { parentPort } from "node:worker_threads";
33
import { Writable } from "node:stream";
4+
import { Server } from "node:http";
45

56
import { createServer as viteCreateServer } from "vite";
67
import { createElement } from "react";
@@ -96,6 +97,8 @@ const handleGetSsrConfig = async (
9697
}
9798
};
9899

100+
const dummyServer = new Server();
101+
99102
const vitePromise = viteCreateServer({
100103
...configFileConfig,
101104
plugins: [
@@ -114,6 +117,7 @@ const vitePromise = viteCreateServer({
114117
conditions: ["react-server"],
115118
},
116119
appType: "custom",
120+
server: { middlewareMode: true, hmr: { server: dummyServer } },
117121
});
118122

119123
const shutdown = async () => {

0 commit comments

Comments
 (0)