Ything-Public/hx-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

now with dynamic counter too

Browse Source
This commit is contained in:
David Senk
2025-01-10 18:09:32 -05:00
parent a745239d16
commit 987baf1ad6
8 changed files with 103 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
count/Cargo.lock generated
View File

@@ -219,6 +219,7 @@ checksum = "773648b94d0e5d620f64f280777445740e61fe701025087ec8b57f45c791888b"
name = "count" name = "count"
version = "0.1.0" version = "0.1.0"
dependencies = [ dependencies = [
"http",
"poem", "poem",
"poem-openapi", "poem-openapi",
"tokio", "tokio",

1
count/Cargo.toml
View File

@@ -4,6 +4,7 @@ version = "0.1.0"
edition = "2021" edition = "2021"
[dependencies] [dependencies]
http = "1.2.0"
poem = "3" poem = "3"
poem-openapi = { version = "5", features = ["swagger-ui"] } poem-openapi = { version = "5", features = ["swagger-ui"] }
tokio = { version = "1", features = ["macros", "rt-multi-thread"] } tokio = { version = "1", features = ["macros", "rt-multi-thread"] }

9
count/src/main.rs
View File

@@ -1,9 +1,10 @@
use std::sync::atomic::{AtomicU32, Ordering}; use std::sync::atomic::{AtomicU32, Ordering};
use poem_openapi::payload::PlainText; use poem_openapi::payload::{Response, PlainText};
use poem_openapi::{OpenApi, OpenApiService}; use poem_openapi::{OpenApi, OpenApiService};
use poem::{Route, Server}; use poem::{EndpointExt, Route, Server};
use poem::listener::TcpListener; use poem::listener::TcpListener;
use poem::middleware::Cors;
pub struct CounterApi { pub struct CounterApi {
counter: AtomicU32, counter: AtomicU32,
@@ -18,6 +19,7 @@ impl CounterApi {
} }
} }
#[oai(path = "/next", method = "get")] #[oai(path = "/next", method = "get")]
pub async fn next(&self) -> PlainText<String> { pub async fn next(&self) -> PlainText<String> {
let next = self.counter.fetch_add(1, Ordering::Relaxed); let next = self.counter.fetch_add(1, Ordering::Relaxed);
@@ -31,6 +33,7 @@ impl CounterApi {
PlainText(format!("{{\"count\":{next}}}")) PlainText(format!("{{\"count\":{next}}}"))
} }
} }
#[tokio::main] #[tokio::main]
@@ -38,7 +41,7 @@ async fn main() {
let api_service = let api_service =
OpenApiService::new(CounterApi::new(), "counter", "1.0").server("http://localhost:9000"); OpenApiService::new(CounterApi::new(), "counter", "1.0").server("http://localhost:9000");
let ui = api_service.swagger_ui(); let ui = api_service.swagger_ui();
let app = Route::new().nest("/", api_service).nest("/docs", ui); let app = Route::new().nest("/", api_service).nest("/docs", ui).with(Cors::new());
Server::new(TcpListener::bind("127.0.0.1:9000")) Server::new(TcpListener::bind("127.0.0.1:9000"))
.run(app) .run(app)

11
htmx/count.html Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<title>htmx test</title>
<script src="htmx.min.js"></script>
</head>
<body>
<button id="nextbtn" hx-get="http://127.0.0.1:9000/next" hx-swap="innerHTML" hx-target="#counter">Get Next</button>
<p>Count: <span id="counter" hx-trigger="load" hx-get="http://127.0.0.1:9000/next"></span> </p>
</body>
</html>

2
htmx/index.html
View File

@@ -5,7 +5,7 @@
<script src="htmx.min.js"></script> <script src="htmx.min.js"></script>
</head> </head>
<body> <body>
<button hx-get="/foreign/html/card.html" hx-swap="beforeend" hx-target="#target">Load Card</button> <button id="nextbtn" hx-get="/foreign/html/card.html" hx-swap="beforeend" hx-target="#target">Load Card</button>
<div id="target" hx-trigger="load" hx-get="/foreign/html/card.html"> <div id="target" hx-trigger="load" hx-get="/foreign/html/card.html">
</div> </div>
</body> </body>

59
readme.md Normal file
View File

@@ -0,0 +1,59 @@
# static test
loads "card" from static data, serve with serve.py and test htmx and svelte-build
# counter test
use in console from `htmx/count.html` or `svelte-build/count.html`
```js
(async rounds => {
const sleep = () => new Promise(resolve => setTimeout(resolve));
const check = async () => {
document.getElementById("nextbtn").click();
await sleep();
};
const t0 = performance.now();
for (let i = 0; i < rounds; i++) await check();
const t1 = performance.now();
console.log(`took ${t1 - t0} milliseconds`);
})(1000);
```
results from m2 mac mini:
```
CHROME:
article loader
svelte: 5169ms (subseq iters - 5402ms, 5491ms, 5552ms)
htmx: 5078ms (subseq iters - 5510ms, 5542ms, 5588ms)
counter test
svelte: 5160 ms
htmx: 5319 ms
FIREFOX:
article loader
svelte: 5819ms (subseq iters - 8753ms, 13350ms, 17690ms)
htmx: 5038ms (subseq iters - 5158ms, 5292ms, 5475ms)
couter test
svelte: 5274 ms
htmx: 4979ms
```

2
svelte/my-app/src/routes/+page.svelte
View File

@@ -16,7 +16,7 @@
<div> <div>
<button onclick={loadCard}>Load Card</button> <button id="nextbtn" onclick={loadCard}>Load Card</button>
{#each cards as card} {#each cards as card}
<article> <article>

23
svelte/my-app/src/routes/count/+page.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts">
import { onMount } from 'svelte';
let count = null;
async function loadNext() {
const response = await fetch('http://127.0.0.1:9000/next_json');
count = (await response.json()).count;
}
onMount(() => {
loadNext();
});
</script>
<div>
<button id="nextbtn" onclick={loadNext}>Load Next</button>
{#if count}
<p>Count: {count}</p>
{/if}
</div>