Skip to content

Commit a86d87c

Browse files
ismasanismasan
authored
Bring in hello-world and threads examples from main d* repo (#3)
We'll remove them from the main repo, eventually
1 parent e0bef3d commit a86d87c

File tree

7 files changed

+230
-0
lines changed

7 files changed

+230
-0
lines changed

‎examples/hello-world/Gemfile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# frozen_string_literal: true
2+
3+
source 'https://rubygems.org'
4+
5+
gem 'puma'
6+
gem 'rack'
7+
# gem 'datastar'
8+
gem 'datastar', path: '../../../sdk/ruby'

‎examples/hello-world/Gemfile.lock‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
PATH
2+
remote: ../../../sdk/ruby
3+
specs:
4+
datastar (1.0.0.beta.3)
5+
json
6+
logger
7+
rack (>= 3.1.14)
8+
9+
GEM
10+
remote: https://rubygems.org/
11+
specs:
12+
json (2.12.2)
13+
logger (1.7.0)
14+
nio4r (2.7.4)
15+
puma (6.6.0)
16+
nio4r (~> 2.0)
17+
rack (3.1.16)
18+
19+
PLATFORMS
20+
arm64-darwin-24
21+
ruby
22+
23+
DEPENDENCIES
24+
datastar!
25+
puma
26+
rack
27+
28+
BUNDLED WITH
29+
2.6.3

‎examples/hello-world/hello-world.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!-- This is auto-generated by Datastar. DO NOT EDIT. -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<title>Datastar SDK Demo</title>
7+
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
8+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"></script>
9+
</head>
10+
<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
11+
<div data-signals-delay="400" class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5 space-y-2">
12+
<div class="flex justify-between items-center">
13+
<h1 class="text-gray-900 dark:text-white text-3xl font-semibold">
14+
Datastar SDK Demo
15+
</h1>
16+
<img src="https://data-star.dev/static/images/rocket-64x64.png" alt="Rocket" width="64" height="64"/>
17+
</div>
18+
<p class="mt-2">
19+
SSE events will be streamed from the backend to the frontend.
20+
</p>
21+
<div class="space-x-2">
22+
<label for="delay">
23+
Delay in milliseconds
24+
</label>
25+
<input data-bind-delay id="delay" type="number" step="100" min="0" class="w-36 rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20" />
26+
</div>
27+
<button data-on-click="@get(&#39;/hello-world&#39;)" class="rounded-md bg-sky-500 px-5 py-2.5 leading-5 font-semibold text-white hover:bg-sky-700 hover:text-gray-100 cursor-pointer">
28+
Start
29+
</button>
30+
</div>
31+
<div class="my-16 text-8xl font-bold text-transparent" style="background: linear-gradient(to right in oklch, red, orange, yellow, green, blue, blue, violet); background-clip: text">
32+
<div id="message">Hello, world!</div>
33+
</div>
34+
</body>
35+
</html>

‎examples/hello-world/hello-world.ru‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
require 'bundler/setup'
2+
3+
require 'datastar'
4+
5+
# This is a test Rack endpoint
6+
# with a hello world example using Datastar.
7+
# To run:
8+
#
9+
# # install dependencies
10+
# bundle install
11+
# # run this endpoint with Puma server
12+
# bundle exec puma ./hello-world.ru
13+
#
14+
# Then open http://localhost:9292
15+
#
16+
HTML = File.read(File.expand_path('hello-world.html', __dir__))
17+
18+
run do |env|
19+
datastar = Datastar.from_rack_env(env)
20+
21+
if datastar.sse?
22+
delay = (datastar.signals['delay'] || 0).to_i
23+
delay /= 1000.0 if delay.positive?
24+
message = 'Hello, world!'
25+
26+
datastar.stream do |sse|
27+
message.size.times do |i|
28+
sse.patch_elements(%(<div id="message">#{message[0..i]}</div>))
29+
sleep delay
30+
end
31+
end
32+
else
33+
[200, { 'content-type' => 'text/html' }, [HTML]]
34+
end
35+
end
36+
37+
trap('INT') { exit }

‎examples/threads/Gemfile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# frozen_string_literal: true
2+
3+
source 'https://rubygems.org'
4+
5+
gem 'puma'
6+
gem 'rack'
7+
# gem 'datastar'
8+
gem 'datastar', path: '../../../sdk/ruby'

‎examples/threads/Gemfile.lock‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
PATH
2+
remote: ../../../sdk/ruby
3+
specs:
4+
datastar (1.0.0.beta.3)
5+
json
6+
logger
7+
rack (>= 3.1.14)
8+
9+
GEM
10+
remote: https://rubygems.org/
11+
specs:
12+
json (2.12.2)
13+
logger (1.7.0)
14+
nio4r (2.7.4)
15+
puma (6.6.0)
16+
nio4r (~> 2.0)
17+
rack (3.1.16)
18+
19+
PLATFORMS
20+
arm64-darwin-24
21+
ruby
22+
23+
DEPENDENCIES
24+
datastar!
25+
puma
26+
rack
27+
28+
BUNDLED WITH
29+
2.6.3

‎examples/threads/threads.ru‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
require 'bundler/setup'
2+
3+
require 'datastar'
4+
5+
# This is a test Rack endpoint
6+
# to demo streaming Datastar updates from multiple threads.
7+
# To run:
8+
#
9+
# # install dependencies
10+
# bundle install
11+
# # run this endpoint with Puma server
12+
# bundle exec puma threads.ru
13+
#
14+
# visit http://localhost:9292
15+
#
16+
INDEX = <<~HTML
17+
<!DOCTYPE html>
18+
<html>
19+
<head>
20+
<meta charset="UTF-8">
21+
<title>Datastar counter</title>
22+
<style>
23+
body { padding: 10em; }
24+
.counter {#{' '}
25+
font-size: 2em;#{' '}
26+
span { font-weight: bold; }
27+
}
28+
</style>
29+
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@release-candidate/bundles/datastar.js"></script>
30+
</head>
31+
<body>
32+
<button#{' '}
33+
data-on-click="@get('/')"#{' '}
34+
data-indicator-heartbeat#{' '}
35+
>Start</button>
36+
<p class="counter">Slow thread: <span id="slow">waiting</span></p>
37+
<p class="counter">Fast thread: <span id="fast">waiting</span></p>
38+
<p id="connection">Disconnected...</p>
39+
</body>
40+
<html>
41+
HTML
42+
43+
trap('INT') { exit }
44+
45+
run do |env|
46+
# Initialize Datastar with callbacks
47+
datastar = Datastar
48+
.from_rack_env(env)
49+
.on_connect do |sse|
50+
sse.patch_elements(%(<p id="connection">Connected...</p>))
51+
p ['connect', sse]
52+
end.on_server_disconnect do |sse|
53+
sse.patch_elements(%(<p id="connection">Done...</p>))
54+
p ['server disconnect', sse]
55+
end.on_client_disconnect do |socket|
56+
p ['client disconnect', socket]
57+
end.on_error do |error|
58+
p ['exception', error]
59+
puts error.backtrace.join("\n")
60+
end
61+
62+
if datastar.sse?
63+
# This will run in its own thread / fiber
64+
datastar.stream do |sse|
65+
11.times do |i|
66+
sleep 1
67+
# Raising an error to demonstrate error handling
68+
# raise ArgumentError, 'This is an error' if i > 5
69+
70+
sse.patch_elements(%(<span id="slow">#{i}</span>))
71+
end
72+
end
73+
74+
# Another thread / fiber
75+
datastar.stream do |sse|
76+
1000.times do |i|
77+
sleep 0.01
78+
sse.patch_elements(%(<span id="fast">#{i}</span>))
79+
end
80+
end
81+
else
82+
[200, { 'content-type' => 'text/html' }, [INDEX]]
83+
end
84+
end

0 commit comments

Comments
 (0)