open-source-labs · travismfrank · Aug 31, 2020 · Aug 31, 2020
diff --git a/demo/client/App.jsx b/demo/client/App.jsx
@@ -0,0 +1,12 @@
+import { React } from '../deps.ts';
+
+export class App extends React.Component {
+
+  render() {
+    return (
+      <div>
+        <h1>Hello World</h1>
+      </div>
+    )
+  }
+}
diff --git a/demo/client/assets/index.html b/demo/client/assets/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <!-- <link rel="stylesheet" href="./style.css"> -->
+  <title>Document</title>
+</head>
+
+<body>
+  <div id='root'>
+    <h1>Hi there</h1>
+  </div>
+  <!-- <script type="module" src="./index.js"></script> -->
+</body>
+
+</html>
diff --git a/demo/client/assets/index.js b/demo/client/assets/index.js
@@ -0,0 +1,7 @@
+import { React, ReactDOM } from '../../deps.ts';
+import { App } from '../App.jsx';
+
+ReactDOM.render(
+  React.createElement(App),
+  document.getElementById('root')
+);
diff --git a/demo/client/assets/style.css b/demo/client/assets/style.css
diff --git a/demo/deps.ts b/demo/deps.ts
@@ -0,0 +1,14 @@
+import { Application, Router, send } from "https://deno.land/x/oak/mod.ts";
+import { applyGraphQL, gql } from "https://deno.land/x/oak_graphql/mod.ts";
+import { default as React } from "https://dev.jspm.io/react@16.13.1";
+import { default as ReactDOM } from "https://dev.jspm.io/react-dom@16.13.1";
+
+export {
+  Application,
+  Router,
+  send,
+  applyGraphQL,
+  gql,
+  React,
+  ReactDOM
+};
diff --git a/demo/server/server.tsx b/demo/server/server.tsx
@@ -0,0 +1,76 @@
+import { Application, Router } from "https://deno.land/x/oak@v6.0.1/mod.ts";
+import React from "https://dev.jspm.io/react@16.13.1";
+import { default as ReactDomServer } from "https://dev.jspm.io/react-dom@16.13.1/server";
+import { App } from '../client/App.jsx';
+import { applyGraphQL, gql } from "https://deno.land/x/oak_graphql/mod.ts";
+
+const app = new Application();
+const port = 8080;
+
+const router = new Router();
+
+// router.get('/', await (ctx) => {
+  // Deno.readTextFile
+// })
+
+// router.get("/", handlePage);
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [key: string]: any;
+    }
+  }
+}
+
+function handlePage(ctx: any) {
+  try {
+    const body = (ReactDomServer as any).renderToString(<App />);
+    ctx.response.body = `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+      </head>
+      <body >
+        <div id="root">${body}</div>
+      </body>
+      </html>`;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+const GraphQLService = await applyGraphQL({
+  Router,
+  typeDefs: (gql as any)`
+  type Book {
+    title: String!
+    author: String!
+    description: String
+    coverPrice: Int!
+    publicationDate: String
+    publisher: String
+    id: Int!
+  }
+
+  type Query {
+    books: [Book]
+    book (id: Int): Book
+  }
+  `, // need
+  resolvers: {
+    // Query: {
+    //   book
+    // }
+  } // need
+})
+
+
+app.use(GraphQLService.routes(), GraphQLService.allowedMethods());
+app.use(router.routes());
+app.use(router.allowedMethods());
+
+console.log("server is running on http://localhost:8080/");
+await app.listen({ port: port });