SethTrowbridge/deno-ssr
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styled components working

Browse Source
This commit is contained in:
TreetopFlyer 2021-07-16 15:23:31 -04:00
parent fb0a8adf55
commit ee40fd997c
5 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
importmap.json
View File

@ -6,9 +6,9 @@
"oak": "https://deno.land/x/oak/mod.ts", "oak": "https://deno.land/x/oak/mod.ts",
"react": "http://esm.sh/react", "react": "https://esm.sh/react",
"react-dom": "http://esm.sh/react-dom", "react-dom": "https://esm.sh/react-dom",
"react-dom/": "http://esm.sh/react-dom/", "react-dom/": "https://esm.sh/react-dom/",
"@emotion/": "http://esm.sh/@emotion/" "styled-components": "https://esm.sh/styled-components"
} }
} }

2
scripts.json
View File

@ -3,7 +3,7 @@
{ {
"start": "start":
{ {
"cmd": "deno run --import-map=importmap.json --allow-net --unstable --allow-read ./src/app_server.tsx" "cmd": "deno run --import-map=importmap.json --allow-net --unstable --allow-read --no-check ./src/app_server.tsx"
} }
} }
} }

9
src/app.tsx
View File

@ -1,4 +1,11 @@
import React, { useState } from "react"; import React, { useState } from "react";
import styled from "styled-components";
const CustomButton = styled.button`
padding:5px 10px 5px 10px;
background:red;
color:white;
`;
export default () => export default () =>
{ {
@ -6,6 +13,6 @@ export default () =>
return <div> return <div>
<h3>home page</h3> <h3>home page</h3>
<p>{countGet}</p> <p>{countGet}</p>
<button onClick={e=>countSet(countGet+1)}>+</button> <CustomButton onClick={e=>countSet(countGet+1)}>+</CustomButton>
</div>; </div>;
}; };

28
src/app_server.tsx
View File

@ -2,32 +2,50 @@ import { Application, Router } from "oak";
import React from "react"; import React from "react";
import ReactDOMServer from "react-dom/server"; import ReactDOMServer from "react-dom/server";
import App from "/app.tsx"; import App from "/app.tsx";
import { ServerStyleSheet } from 'styled-components'
const Bundle = {JS:"", CSS:"", HTML:""};
let bundle = "";
Deno.emit("./src/app_client.tsx", { Deno.emit("./src/app_client.tsx", {
bundle: "classic", bundle: "classic",
compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] }, compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] },
importMapPath: "./importmap.json", importMapPath: "./importmap.json",
}).then(result => bundle = result.files["deno:///bundle.js"]); }).then(result =>
{
Bundle.JS = result.files["deno:///bundle.js"];
console.log("bundle built");
});
const router = new Router(); const router = new Router();
router.get("/", (context) => { context.response.body = router.get("/", (context) => {
console.log("serving page");
let sheet = new ServerStyleSheet();
Bundle.HTML = ReactDOMServer.renderToString(sheet.collectStyles(<App/>));
Bundle.CSS = sheet.getStyleTags();
sheet.seal();
context.response.body =
`<!DOCTYPE html> `<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
${Bundle.CSS}
</head> </head>
<body> <body>
<h1>v 2.0</h1> <h1>v 2.0</h1>
<div id="root">${ReactDOMServer.renderToString(<App />)}</div> <div id="root">${Bundle.HTML}</div>
<script>${bundle}</script> <script>${Bundle.JS}</script>
</body> </body>
</html>`; </html>`;
}); });
const app = new Application(); const app = new Application();
app.use(router.routes()); app.use(router.routes());
app.use(router.allowedMethods()); app.use(router.allowedMethods());
app.listen({ port:8000 }); app.listen({ port:8000 });
console.log("server running");

7
tsconfig.json
View File

@ -1,7 +1,6 @@
{ {
"compilerOptions": { "compilerOptions":
"allowJs": true, {
"jsx": "react", "lib": ["deno.window", "dom"]
"lib": ["deno.window"]
} }
} }