#3 issue/ssr-simple #5
@ -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":
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										72
									
								
								server.tsx
									
									
									
									
									
								
							
							
						
						
									
										72
									
								
								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 = `
 | 
			
		||||
<!doctype html>
 | 
			
		||||
<html>
 | 
			
		||||
    <head>
 | 
			
		||||
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
        <script type="importmap">${JSON.stringify(ImportObject)}</script>
 | 
			
		||||
        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
 | 
			
		||||
    </head>
 | 
			
		||||
    <body>
 | 
			
		||||
        <div id="app">Loading</div>
 | 
			
		||||
        <script type="module">
 | 
			
		||||
            import * as TW   from "https://esm.sh/@twind/core@1.0.1";
 | 
			
		||||
            import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
 | 
			
		||||
            import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
 | 
			
		||||
            
 | 
			
		||||
            const Configure = {presets: [TWPreTail(), TWPreAuto()]};
 | 
			
		||||
            const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
 | 
			
		||||
            const ShadowDiv = document.createElement("div");
 | 
			
		||||
            const ShadowCSS = document.createElement("style");
 | 
			
		||||
            ShadowDOM.append(ShadowCSS);
 | 
			
		||||
            ShadowDOM.append(ShadowDiv);
 | 
			
		||||
 | 
			
		||||
            TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
 | 
			
		||||
 | 
			
		||||
            import App from "@eno/app";
 | 
			
		||||
            import {render, createElement as H} from "react";
 | 
			
		||||
            render(H(()=>H(App)), ShadowDiv);
 | 
			
		||||
 | 
			
		||||
        </script>
 | 
			
		||||
    </body>
 | 
			
		||||
</html>
 | 
			
		||||
`;
 | 
			
		||||
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 = `<!doctype html>
 | 
			
		||||
<html>
 | 
			
		||||
    <head>
 | 
			
		||||
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
        <script type="importmap">${JSON.stringify(ImportObject)}</script>
 | 
			
		||||
        <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
 | 
			
		||||
    </head>
 | 
			
		||||
    <body>
 | 
			
		||||
        <div id="app">${SSR(AppComponent)}</div>
 | 
			
		||||
        <script type="module">
 | 
			
		||||
            import * as TW   from "https://esm.sh/@twind/core@1.0.1";
 | 
			
		||||
            import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
 | 
			
		||||
            import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
 | 
			
		||||
            
 | 
			
		||||
            const Configure = {presets: [TWPreTail(), TWPreAuto()]};
 | 
			
		||||
            const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
 | 
			
		||||
            const ShadowDiv = document.createElement("div");
 | 
			
		||||
            const ShadowCSS = document.createElement("style");
 | 
			
		||||
            ShadowDOM.append(ShadowCSS);
 | 
			
		||||
            ShadowDOM.append(ShadowDiv);
 | 
			
		||||
 | 
			
		||||
            TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
 | 
			
		||||
 | 
			
		||||
            import App from "@eno/app";
 | 
			
		||||
            import {render, createElement as H} from "react";
 | 
			
		||||
            render(H(()=>H(App)), ShadowDiv);
 | 
			
		||||
 | 
			
		||||
        </script>
 | 
			
		||||
    </body>
 | 
			
		||||
</html>`;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return new Response(body, {headers:{"content-type":type as string}});
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user