commit fb0a8adf5554b9a0758426ab2782f0a4571984a4 Author: TreetopFlyer Date: Fri Jul 16 11:17:14 2021 -0400 SSR+Hydration working diff --git a/importmap.json b/importmap.json new file mode 100644 index 0000000..bc78065 --- /dev/null +++ b/importmap.json @@ -0,0 +1,14 @@ +{ + "imports": + { + "/": "./src/", + "./": "./src/", + + "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/" + } +} \ No newline at end of file diff --git a/scripts.json b/scripts.json new file mode 100644 index 0000000..5b948f5 --- /dev/null +++ b/scripts.json @@ -0,0 +1,9 @@ +{ + "scripts": + { + "start": + { + "cmd": "deno run --import-map=importmap.json --allow-net --unstable --allow-read ./src/app_server.tsx" + } + } +} \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..30a9703 --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,11 @@ +import React, { useState } from "react"; + +export default () => +{ + let [countGet, countSet] = useState(3); + return

home page

{countGet}

+ +

; +}; \ No newline at end of file diff --git a/src/app_client.tsx b/src/app_client.tsx new file mode 100644 index 0000000..9b96deb --- /dev/null +++ b/src/app_client.tsx @@ -0,0 +1,5 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "/app.tsx"; + +ReactDOM.hydrate(, document.querySelector("#root")); \ No newline at end of file diff --git a/src/app_server.tsx b/src/app_server.tsx new file mode 100644 index 0000000..8bdef09 --- /dev/null +++ b/src/app_server.tsx @@ -0,0 +1,33 @@ +import { Application, Router } from "oak"; +import React from "react"; +import ReactDOMServer from "react-dom/server"; +import App from "/app.tsx"; + +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"]); + + +const router = new Router(); +router.get("/", (context) => { context.response.body = +` + + + + + + +

v 2.0

${ReactDOMServer.renderToString()}

+ + +`; +}); + +const app = new Application(); +app.use(router.routes()); +app.use(router.allowedMethods()); +app.listen({ port:8000 }); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..3701992 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "allowJs": true, + "jsx": "react", + "lib": ["deno.window"] + } + } \ No newline at end of file