whomwah · November 11, 2022 23:47 · airtonix · Nov 11, 2022
diff --git a/server.tsx b/server.tsx
 // @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
 import React from "https://dev.jspm.io/[email protected]";
 // @deno-types="https://deno.land/x/types/react-dom/v16.13.1/server.d.ts"
 import ReactDOMServer from "https://dev.jspm.io/[email protected]/server";
 import { opine } from "https://deno.land/x/[email protected]/mod.ts"
 export {
  Request,
  Response,
  NextFunction,
 } from "https://deno.land/x/[email protected]/src/types.ts";

 declare global {
  namespace JSX {
    interface IntrinsicElements {
      button: React.ComponentProps<'button'>;
      div: React.ComponentProps<'div'>;
      h1: React.ComponentProps<'h1'>;
      p: React.ComponentProps<'p'>;
    }
  }
 }

 const App = () => {
  const [count, setCount] = (React).useState(0);
  return (
    <div>
      <h1>Hello DenoLand! </h1>
      <button onClick={() => setCount(count + 1)}> Click the 🦕</button>
      <p>You clicked the 🦕 {count} times </p>
    </div>
  );
 };
 const app = opine();
 const browserBundlePath = "/browser.js";

 const js =
  `import React from "https://dev.jspm.io/[email protected]";\nimport ReactDOM from "https://dev.jspm.io/[email protected]";\nconst App = ${App};\nReactDOM.hydrate(React.createElement(App), document.body);`;

 const html =
  `<html><head><script type="module" src="${browserBundlePath}"></script><style>* { font-family: Helvetica; }</style></head><body>${
  (ReactDOMServer as any).renderToString(<App />)
  }</body></html>`;

 app.use(browserBundlePath, (req, res, next) => {
  res.type("application/javascript").send(js);
 });

 app.use("/", (req, res, next) => {
  res.type("text/html").send(html);
 });

 app.listen({ port: 3000 });

 console.log("Denoland listening at http://localhost:3000");
	// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
	import React from "https://dev.jspm.io/[email protected]";
	// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/server.d.ts"
	import ReactDOMServer from "https://dev.jspm.io/[email protected]/server";
	import { opine } from "https://deno.land/x/[email protected]/mod.ts"
	export {
	Request,
	Response,
	NextFunction,
	} from "https://deno.land/x/[email protected]/src/types.ts";

	declare global {
	namespace JSX {
	interface IntrinsicElements {
	button: React.ComponentProps<'button'>;
	div: React.ComponentProps<'div'>;
	h1: React.ComponentProps<'h1'>;
	p: React.ComponentProps<'p'>;
	}
	}
	}

	const App = () => {
	const [count, setCount] = (React).useState(0);
	return (
	<div>
	<h1>Hello DenoLand! </h1>
	<button onClick={() => setCount(count + 1)}> Click the 🦕</button>
	<p>You clicked the 🦕 {count} times </p>
	</div>
	);
	};
	const app = opine();
	const browserBundlePath = "/browser.js";

	const js =
	`import React from "https://dev.jspm.io/[email protected]";\nimport ReactDOM from "https://dev.jspm.io/[email protected]";\nconst App = ${App};\nReactDOM.hydrate(React.createElement(App), document.body);`;

	const html =
	`<html><head><script type="module" src="${browserBundlePath}"></script><style>* { font-family: Helvetica; }</style></head><body>${
	(ReactDOMServer as any).renderToString(<App />)
	}</body></html>`;

	app.use(browserBundlePath, (req, res, next) => {
	res.type("application/javascript").send(js);
	});

	app.use("/", (req, res, next) => {
	res.type("text/html").send(html);
	});

	app.listen({ port: 3000 });

	console.log("Denoland listening at http://localhost:3000");