├── LICENSE
├── README.md
├── app.js
├── client.js
├── deps.js
├── favicon.ico
└── server.ts


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Thiago 'Jedi' Abreu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # preact-htm-deno
 2 | 
 3 | Just a experiment on how one can use preact with deno.
 4 | 
 5 | ## How to run
 6 | 
 7 | ```
 8 | deno run --allow-net --allow-read ./server.ts
 9 | ```
10 | 
11 | Then open your browser in `localhost:8000`
12 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | import { htm, h, useState } from "./deps.js";
 2 | 
 3 | const html = htm.bind(h);
 4 | 
 5 | export const App = ({ page }) => {
 6 |   /** @type {[string[], Function]} */
 7 |   const [todos, setTodos] = useState([]);
 8 | 
 9 |   const addTodo = () => {
10 |     setTodos((todos) => todos.concat(`Item ${todos.length}`));
11 |   };
12 | 
13 |   return html`
14 |       <div class="app">
15 |         <${Header} name="ToDo's (${page})" />
16 |         <ul>
17 |           ${
18 |     todos.map(
19 |       (todo) =>
20 |         html`
21 |               <li>${todo}</li>
22 |             `,
23 |     )
24 |   }
25 |         </ul>
26 |         <button onClick=${() => addTodo()}>Add Todo</button>
27 |         <${Footer}>footer content here<//>
28 |       </div>
29 |     `;
30 | };
31 | 
32 | const Header = ({ name }) =>
33 |   html`
34 |     <h1>${name} List</h1>
35 |   `;
36 | 
37 | const Footer = (props) =>
38 |   html`
39 |     <footer ...${props} />
40 |   `;
41 | 


--------------------------------------------------------------------------------
/client.js:
--------------------------------------------------------------------------------
1 | import { htm, h, hydrate } from "./deps.js";
2 | 
3 | const html = htm.bind(h);
4 | 
5 | import { App } from "./app.js";
6 | 
7 | hydrate(html`<${App} page="Client" />`, document.body);
8 | 


--------------------------------------------------------------------------------
/deps.js:
--------------------------------------------------------------------------------
 1 | // Keep in mind that this deps are loaded on client too. So no Typescript here.
 2 | 
 3 | export { default as htm } from "https://cdn.pika.dev/htm";
 4 | export {
 5 |   h,
 6 |   hydrate
 7 | } from "https://cdn.pika.dev/preact";
 8 | 
 9 | export { useState } from "https://cdn.pika.dev/preact/hooks";
10 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiagojedi/preact-htm-deno/e826d20be592d6564ba10e111791f41fb1039526/favicon.ico


--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
 1 | import { htm, h } from "./deps.js";
 2 | import { renderToString } from "https://cdn.pika.dev/preact-render-to-string";
 3 | import {
 4 |   Application,
 5 |   Router,
 6 |   send,
 7 | } from "https://deno.land/x/oak/mod.ts";
 8 | 
 9 | import { App } from "./app.js";
10 | 
11 | const html = htm.bind(h);
12 | 
13 | const body = renderToString(html`
14 |   <html>
15 |     <head>
16 |       <script src="/client.js" type="module"></script>
17 |     </head>
18 |     <body>
19 |       <${App} page="Server" />
20 |     </body>
21 |   </html>
22 | `);
23 | 
24 | const router = new Router();
25 | router
26 |   .get("/", (context) => {
27 |     context.response.body = body;
28 |   });
29 | 
30 | const app = new Application();
31 | app.use(router.routes());
32 | app.use(async (context) => {
33 |   await send(context, context.request.url.pathname, {
34 |     root: Deno.cwd(),
35 |   });
36 | });
37 | 
38 | await app.listen("127.0.0.1:8000");
39 | 


--------------------------------------------------------------------------------