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",
"react": "http://esm.sh/react",
"react-dom": "http://esm.sh/react-dom",
"react-dom/": "http://esm.sh/react-dom/",
"@emotion/": "http://esm.sh/@emotion/"
"react": "https://esm.sh/react",
"react-dom": "https://esm.sh/react-dom",
"react-dom/": "https://esm.sh/react-dom/",
"styled-components": "https://esm.sh/styled-components"
}
}

2
scripts.json
View File

@ -3,7 +3,7 @@
{
"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 styled from "styled-components";
const CustomButton = styled.button`
padding:5px 10px 5px 10px;
background:red;
color:white;
`;
export default () =>
{
@ -6,6 +13,6 @@ export default () =>
return <div>
<h3>home page</h3>
<p>{countGet}</p>
<button onClick={e=>countSet(countGet+1)}>+</button>
<CustomButton onClick={e=>countSet(countGet+1)}>+</CustomButton>
</div>;
};

30
src/app_server.tsx
View File

@ -2,32 +2,50 @@ import { Application, Router } from "oak";
import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "/app.tsx";
import { ServerStyleSheet } from 'styled-components'
const Bundle = {JS:"", CSS:"", HTML:""};
let bundle = "";
Deno.emit("./src/app_client.tsx", {
bundle: "classic",
compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] },
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();
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
${Bundle.CSS}
</head>
<body>
<h1>v 2.0</h1>
<div id="root">${ReactDOMServer.renderToString(<App />)}</div>
<script>${bundle}</script>
<div id="root">${Bundle.HTML}</div>
<script>${Bundle.JS}</script>
</body>
</html>`;
});
const app = new Application();
app.use(router.routes());
app.use(router.allowedMethods());
app.listen({ port:8000 });
app.listen({ port:8000 });
console.log("server running");

11
tsconfig.json
View File

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