From 9b6b7cd8c88475b77a0c1d09da167b1516003b86 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Sat, 1 Apr 2023 22:45:33 -0400 Subject: [PATCH 1/2] basic ssr --- deno.json | 4 +-- server.tsx | 72 ++++++++++++++++++++++++++++++------------------------ 2 files changed, 42 insertions(+), 34 deletions(-) diff --git a/deno.json b/deno.json index 43e76fc..3abccf6 100644 --- a/deno.json +++ b/deno.json @@ -3,8 +3,8 @@ "deno.window", "DOM" ]}, "imports": { - "react-original": "https://esm.sh/react@18.2.0", - "react": "https://esm.sh/react@18.2.0", + "react-original": "https://esm.sh/preact@10.11.3/compat", + "react": "https://esm.sh/preact@10.11.3/compat", "@eno/app": "./dummy-app.tsx" }, "tasks": diff --git a/server.tsx b/server.tsx index b59bafa..12eae3e 100644 --- a/server.tsx +++ b/server.tsx @@ -1,6 +1,8 @@ import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js'; import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts"; import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts"; +import SSR from "https://esm.sh/preact-render-to-string@6.0.2"; +import React from "react"; const Transpiled = new Map(); const Transpileable =(inFilePath:string):boolean=> @@ -124,38 +126,10 @@ catch(e) { console.log(`deno.json not found`); } -const Index = ` - - - - - - - - -
Loading
- - - -`; +const App = await import("@eno/app"); +const AppComponent = React.createElement(App.default, null); +console.log(`imported app`, App); Deno.serve({ port: 3000 }, async(_req:Request) => { @@ -193,7 +167,7 @@ Deno.serve({ port: 3000 }, async(_req:Request) => { // serve index by default let type = `text/html`; - let body:BodyInit = Index; + let body:BodyInit = ``; const isLib = url.pathname.startsWith(`/${LibPath}/`) @@ -246,6 +220,40 @@ FileListen("${url.pathname}", reloadHandler);`; body = await Deno.readFile(fsPath); } } + else + { + type = `text/html`; + body = ` + + + + + + + +
${SSR(AppComponent)}
+ + +`; + } return new Response(body, {headers:{"content-type":type as string}}); } From 4ff0da09a3e5989c810e789cb49cd1245c9dfb5b Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Sun, 2 Apr 2023 00:06:27 -0400 Subject: [PATCH 2/2] add example, fix preact ssr version issue --- deno.json | 5 +++-- example/app.tsx | 11 +++++++++++ example/deep/component.tsx | 9 +++++++++ example/deno.json | 11 +++++++++++ lib/react.tsx | 3 ++- server.tsx | 8 +++----- 6 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 example/app.tsx create mode 100644 example/deep/component.tsx create mode 100644 example/deno.json diff --git a/deno.json b/deno.json index 3abccf6..6ccafe7 100644 --- a/deno.json +++ b/deno.json @@ -3,14 +3,15 @@ "deno.window", "DOM" ]}, "imports": { - "react-original": "https://esm.sh/preact@10.11.3/compat", - "react": "https://esm.sh/preact@10.11.3/compat", + "react-original": "https://esm.sh/preact@10.13.2/compat", + "react": "https://esm.sh/preact@10.13.2/compat", "@eno/app": "./dummy-app.tsx" }, "tasks": { "install": "deno install -f -A --unstable --no-lock -n eno server.tsx", "run": "deno run -A --unstable --no-lock server.tsx", + "complete": "deno run -A --unstable https://deno.land/std@0.181.0/http/file_server.ts & cd example && pwd && deno task dev", "host": "deno run -A --unstable https://deno.land/std@0.181.0/http/file_server.ts" } } \ No newline at end of file diff --git a/example/app.tsx b/example/app.tsx new file mode 100644 index 0000000..fd1825c --- /dev/null +++ b/example/app.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import Component from "./deep/component.tsx"; + +export default ()=>{ + const [countGet, countSet] = React.useState(1); +return
+

Title!!

+

subtitle

+ +
; +}; \ No newline at end of file diff --git a/example/deep/component.tsx b/example/deep/component.tsx new file mode 100644 index 0000000..6c39b7d --- /dev/null +++ b/example/deep/component.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +export default ()=> +{ + const [countGet, countSet] = React.useState(1); + return
+ Component!!! +
; +}; \ No newline at end of file diff --git a/example/deno.json b/example/deno.json new file mode 100644 index 0000000..97ba37d --- /dev/null +++ b/example/deno.json @@ -0,0 +1,11 @@ +{ + "imports": + { + "react": "https://esm.sh/preact@10.13.2/compat", + "@deep/": "./deep/", + "@eno/app": "./app.tsx" + }, + "tasks": { + "dev": "deno run -A --unstable --reload=http://localhost:4507/ --no-lock --config=deno.json http://localhost:4507/server.tsx" + } +} \ No newline at end of file diff --git a/lib/react.tsx b/lib/react.tsx index 71780c7..3b013cd 100644 --- a/lib/react.tsx +++ b/lib/react.tsx @@ -73,4 +73,5 @@ const ProxyState =(arg)=> export * from "react-original"; export { ProxyCreate as createElement, ProxyState as useState }; -export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState}; \ No newline at end of file +export const isProxy = true; +export default {...ReactParts.default, createElement:ProxyCreate, useState:ProxyState, isProxy:true}; \ No newline at end of file diff --git a/server.tsx b/server.tsx index 12eae3e..2ecf332 100644 --- a/server.tsx +++ b/server.tsx @@ -1,8 +1,8 @@ import * as ESBuild from 'https://deno.land/x/esbuild@v0.14.45/mod.js'; import * as MIME from "https://deno.land/std@0.180.0/media_types/mod.ts"; import { debounce } from "https://deno.land/std@0.151.0/async/debounce.ts"; -import SSR from "https://esm.sh/preact-render-to-string@6.0.2"; -import React from "react"; +import SSR from "https://esm.sh/v113/preact-render-to-string@6.0.2/deno/preact-render-to-string.mjs"; +import React, {createElement as h} from "react"; const Transpiled = new Map(); const Transpileable =(inFilePath:string):boolean=> @@ -128,8 +128,6 @@ catch(e) } const App = await import("@eno/app"); -const AppComponent = React.createElement(App.default, null); -console.log(`imported app`, App); Deno.serve({ port: 3000 }, async(_req:Request) => { @@ -231,7 +229,7 @@ FileListen("${url.pathname}", reloadHandler);`; -
${SSR(AppComponent)}
+
${SSR()}