Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: partially for css modules #98

Merged
merged 5 commits into from
Jul 10, 2023
Merged

fix: partially for css modules #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c67b485
wip: fix ssr server
dai-shi Jul 3, 2023
164e872
Merge branch 'main' into fix/css-modules
dai-shi Jul 6, 2023
158b33d
Merge branch 'main' into fix/css-modules
dai-shi Jul 8, 2023
6a232eb
add examples/09
dai-shi Jul 8, 2023
6e5cf9b
run prettier
dai-shi Jul 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions examples/09_cssmodules/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "waku-example",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"dev": "waku dev --with-ssr",
"build": "waku build",
"start": "waku start --with-ssr"
},
"dependencies": {
"express": "^4.18.2",
"react": "18.3.0-canary-7118f5dd7-20230705",
"react-dom": "18.3.0-canary-7118f5dd7-20230705",
"react-server-dom-webpack": "18.3.0-canary-7118f5dd7-20230705",
"waku": "0.13.0"
},
"devDependencies": {
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"typescript": "^5.1.3"
}
}
3 changes: 3 additions & 0 deletions examples/09_cssmodules/src/components/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.title {
background-color: pink;
}
15 changes: 15 additions & 0 deletions examples/09_cssmodules/src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// @ts-expect-error no types
import styles from "./App.module.css";
import { Counter } from "./Counter.js";

const App = ({ name = "Anonymous" }) => {
return (
<div style={{ border: "3px red dashed", margin: "1em", padding: "1em" }}>
<h1 className={styles.title}>Hello {name}!!</h1>
<h3>This is a server component.</h3>
<Counter />
</div>
);
};

export default App;
14 changes: 14 additions & 0 deletions examples/09_cssmodules/src/components/Counter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
"use client";

import { useState } from "react";

export const Counter = () => {
const [count, setCount] = useState(0);
return (
<div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}>
<p>Count: {count}</p>
<button onClick={() => setCount((c) => c + 1)}>Increment</button>
<h3>This is a client component.</h3>
</div>
);
};
30 changes: 30 additions & 0 deletions examples/09_cssmodules/src/entries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { defineEntries } from "waku/server";

export default defineEntries(
// getEntry
async (id) => {
switch (id) {
case "App":
return import("./components/App.js");
default:
return null;
}
},
// getBuildConfig
async () => {
return {
"/": {
elements: [["App", { name: "Waku" }]],
},
};
},
// getSsrConfig
async (pathStr) => {
switch (pathStr) {
case "/":
return { element: ["App", { name: "Waku" }] };
default:
return null;
}
}
);
37 changes: 37 additions & 0 deletions examples/09_cssmodules/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Waku example</title>
<style>
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner {
width: 36px;
height: 36px;
margin: auto;
border: 2px solid #ddd;
border-top-color: #222;
border-radius: 50%;
animation: spinner 1s linear infinite;
}
#root > .spinner {
margin-top: calc(50% - 18px);
}
</style>
<link rel="stylesheet" href="/components/App.module.css" />
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a hack. We shouldn't need it. Let's live with it in the mean time and look for proper fix later. We need someone to help on it.

</head>
<body>
<!--placeholder1-->
<div id="root">
<div class="spinner"></div>
</div>
<!--/placeholder1-->
<script src="/main.tsx" async type="module"></script>
<!--placeholder2-->
<!--/placeholder2-->
</body>
</html>
12 changes: 12 additions & 0 deletions examples/09_cssmodules/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { serve } from "waku/client";

const App = serve<{ name: string }>("App");
const rootElement = (
<StrictMode>
<App name="Waku" />
</StrictMode>
);

createRoot(document.getElementById("root")!).render(rootElement);
13 changes: 13 additions & 0 deletions examples/09_cssmodules/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"strict": true,
"target": "esnext",
"downlevelIteration": true,
"esModuleInterop": true,
"module": "nodenext",
"skipLibCheck": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"jsx": "react-jsx"
}
}
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"examples:dev:06_nesting": "NAME=06_nesting npm run examples:dev",
"examples:dev:07_router": "NAME=07_router npm run examples:dev",
"examples:dev:08_cookies": "NAME=08_cookies npm run examples:dev",
"examples:dev:09_cssmodules": "NAME=09_cssmodules npm run examples:dev",
"examples:build": "npm run compile:code && (cd ./examples/${NAME} && npm run build)",
"examples:prd": "npm run examples:build && (cd ./examples/${NAME} && npm start)",
"examples:prd:01_counter": "NAME=01_counter npm run examples:prd",
Expand All @@ -74,6 +75,7 @@
"examples:prd:06_nesting": "NAME=06_nesting npm run examples:prd",
"examples:prd:07_router": "NAME=07_router npm run examples:prd",
"examples:prd:08_cookies": "NAME=08_cookies npm run examples:prd",
"examples:prd:09_cssmodules": "NAME=09_cssmodules npm run examples:prd",
"website:dev": "npm run compile:code && ./dist/cli.js dev --config ./website/vite.config.ts",
"website:build": "npm run compile:code && ./dist/cli.js build --config ./website/vite.config.ts",
"website:vercel": "npm run website:build && cp -Lr ./website/dist/.vercel/output ./.vercel/",
Expand Down Expand Up @@ -111,7 +113,6 @@
"eslint-plugin-react": "^7.32.2",
"express": "^4.18.2",
"glob": "^10.3.1",
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"react": "18.3.0-canary-7118f5dd7-20230705",
"react-dom": "18.3.0-canary-7118f5dd7-20230705",
Expand Down
31 changes: 28 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/lib/middleware/rsc/worker-impl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import path from "node:path";
import { parentPort } from "node:worker_threads";
import { Writable } from "node:stream";
import { Server } from "node:http";

import { createServer as viteCreateServer } from "vite";
import { createElement } from "react";
Expand Down Expand Up @@ -96,6 +97,8 @@ const handleGetSsrConfig = async (
}
};

const dummyServer = new Server();

const vitePromise = viteCreateServer({
...configFileConfig,
plugins: [
Expand All @@ -114,6 +117,7 @@ const vitePromise = viteCreateServer({
conditions: ["react-server"],
},
appType: "custom",
server: { middlewareMode: true, hmr: { server: dummyServer } },
});

const shutdown = async () => {
Expand Down
Loading