Skip to content

Commit

Permalink
fix: use hono/html for template string
Browse files Browse the repository at this point in the history
  • Loading branch information
@sor4chi
sor4chi committed Dec 1, 2023
1 parent 607c7a3 commit 547c338
Show file tree
Hide file tree
Showing 4 changed files with 246 additions and 206 deletions.
163 changes: 90 additions & 73 deletions examples/chat/src/template.ts
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,105 @@
export const Template = /*html*/ `
<!DOCTYPE html>
<body>
<input type="text" id="text_input" /><br/>
<button id="send_button">Send</button> <br/>
<div id="output_div"></div>
<script type="text/javascript">
let currentWebSocket = null;
const hostname = window.location.host;
const protocol = window.location.protocol;
const wsProtocol = protocol === "https:" ? "wss:" : "ws:";
import { html } from "hono/html";

const outputDiv = document.getElementById('output_div');
const sendButton = document.getElementById('send_button');
const textInput = document.getElementById('text_input');
export const Template = html`
<!doctype html>
<html>
<body>
<input type="text" id="text_input" /><br />
<button id="send_button">Send</button> <br />
<div id="output_div"></div>
<script type="text/javascript">
let currentWebSocket = null;
const hostname = window.location.host;
const protocol = window.location.protocol;
const wsProtocol = protocol === "https:" ? "wss:" : "ws:";
async function getMessages() {
const res = await fetch(protocol + "//" + hostname + "/chat/messages");
const messages = await res.json();
return messages;
}
const outputDiv = document.getElementById("output_div");
const sendButton = document.getElementById("send_button");
const textInput = document.getElementById("text_input");
function insertMessage(message) {
const span = document.createElement("span");
span.innerText = message.timestamp + ": ";
const p = document.createElement("p");
p.innerText = message.text;
p.prepend(span);
outputDiv.appendChild(p);
}
async function getMessages() {
const res = await fetch(
protocol + "//" + hostname + "/chat/messages",
);
const messages = await res.json();
return messages;
}
window.onload = async () => {
const messages = await getMessages();
messages.forEach(insertMessage);
}
function insertMessage(message) {
const span = document.createElement("span");
span.innerText = message.timestamp + ": ";
const p = document.createElement("p");
p.innerText = message.text;
p.prepend(span);
outputDiv.appendChild(p);
}
function join() {
const ws = new WebSocket(wsProtocol + "//" + hostname + "/chat/websocket");
let rejoined = false;
const startTime = Date.now();
window.onload = async () => {
const messages = await getMessages();
messages.forEach(insertMessage);
};
ws.addEventListener("open", event => {
currentWebSocket = ws;
});
function join() {
const ws = new WebSocket(
wsProtocol + "//" + hostname + "/chat/websocket",
);
let rejoined = false;
const startTime = Date.now();
ws.addEventListener("message", event => {
insertMessage(JSON.parse(event.data));
});
ws.addEventListener("open", (event) => {
currentWebSocket = ws;
});
ws.addEventListener("close", event => {
console.log("WebSocket closed, reconnecting:", event.code, event.reason);
rejoin();
});
ws.addEventListener("message", (event) => {
insertMessage(JSON.parse(event.data));
});
ws.addEventListener("error", event => {
console.log("WebSocket error, reconnecting:", event);
rejoin();
});
ws.addEventListener("close", (event) => {
console.log(
"WebSocket closed, reconnecting:",
event.code,
event.reason,
);
rejoin();
});
const rejoin = async () => {
if (!rejoined) {
rejoined = true;
currentWebSocket = null;
ws.addEventListener("error", (event) => {
console.log("WebSocket error, reconnecting:", event);
rejoin();
});
let timeSinceLastJoin = Date.now() - startTime;
if (timeSinceLastJoin < 5000) {
await new Promise(resolve => setTimeout(resolve, 5000 - timeSinceLastJoin));
}
const rejoin = async () => {
if (!rejoined) {
rejoined = true;
currentWebSocket = null;
let timeSinceLastJoin = Date.now() - startTime;
if (timeSinceLastJoin < 5000) {
await new Promise((resolve) =>
setTimeout(resolve, 5000 - timeSinceLastJoin),
);
}
join();
}
join();
}
};
}
}
sendButton.addEventListener("click", event => {
const text = textInput.value;
const now = new Date().toLocaleString("en-US", { hour: "numeric", minute: "numeric", hour12: true });
const message = { text, timestamp: now };
insertMessage(message);
currentWebSocket.send(JSON.stringify(message));
textInput.value = "";
});
sendButton.addEventListener("click", (event) => {
const text = textInput.value;
const now = new Date().toLocaleString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
});
const message = { text, timestamp: now };
insertMessage(message);
currentWebSocket.send(JSON.stringify(message));
textInput.value = "";
});
join();
</script>
</body>
</html>
`.trim();
join();
</script>
</body>
</html>
`;
69 changes: 36 additions & 33 deletions examples/counter-with-storage-helper/src/template.ts
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
export const Template = /*html*/ `
<html>
<body>
<h1>Counter</h1>
<p>Current value: <span id="value"></span></p>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<button id="reset">Reset</button>
<script>
const value = document.getElementById("value");
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");
const updateValue = async () => {
const res = await fetch("/counter");
value.innerText = await res.text();
}
increment.addEventListener("click", async () => {
await fetch("/counter/increment", { method: "POST" });
await updateValue();
})
decrement.addEventListener("click", async () => {
await fetch("/counter/decrement", { method: "POST" });
await updateValue();
})
reset.addEventListener("click", async () => {
await fetch("/counter", { method: "DELETE" });
await updateValue();
})
updateValue();
</script>
</body>
</html>
`.trim();
import { html } from "hono/html";

export const Template = html`
<!doctype html>
<html>
<body>
<h1>Counter</h1>
<p>Current value: <span id="value"></span></p>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<button id="reset">Reset</button>
<script>
const value = document.getElementById("value");
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");
const updateValue = async () => {
const res = await fetch("/counter");
value.innerText = await res.text();
};
increment.addEventListener("click", async () => {
await fetch("/counter/increment", { method: "POST" });
await updateValue();
});
decrement.addEventListener("click", async () => {
await fetch("/counter/decrement", { method: "POST" });
await updateValue();
});
reset.addEventListener("click", async () => {
await fetch("/counter", { method: "DELETE" });
await updateValue();
});
updateValue();
</script>
</body>
</html>
`;
59 changes: 31 additions & 28 deletions examples/counter/src/template.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,31 @@
export const Template = /*html*/ `
<html>
<body>
<h1>Counter</h1>
<p>Current value: <span id="value"></span></p>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<script>
const value = document.getElementById("value");
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");
const updateValue = async () => {
const res = await fetch("/counter");
value.innerText = await res.text();
}
increment.addEventListener("click", async () => {
await fetch("/counter/increment", { method: "POST" });
await updateValue();
})
decrement.addEventListener("click", async () => {
await fetch("/counter/decrement", { method: "POST" });
await updateValue();
})
updateValue();
</script>
</body>
</html>
`.trim();
import { html } from "hono/html";

export const Template = html`
<!doctype html>
<html>
<body>
<h1>Counter</h1>
<p>Current value: <span id="value"></span></p>
<button id="increment">Increment</button>
<button id="decrement">Decrement</button>
<script>
const value = document.getElementById("value");
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");
const updateValue = async () => {
const res = await fetch("/counter");
value.innerText = await res.text();
};
increment.addEventListener("click", async () => {
await fetch("/counter/increment", { method: "POST" });
await updateValue();
});
decrement.addEventListener("click", async () => {
await fetch("/counter/decrement", { method: "POST" });
await updateValue();
});
updateValue();
</script>
</body>
</html>
`;
Loading

0 comments on commit 547c338

Please sign in to comment.