starfederation · ismasan · Jul 15, 2025 · Jul 15, 2025
diff --git a/examples/hello-world/Gemfile b/examples/hello-world/Gemfile
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'puma'
+gem 'rack'
+# gem 'datastar'
+gem 'datastar', path: '../../../sdk/ruby'
diff --git a/examples/hello-world/Gemfile.lock b/examples/hello-world/Gemfile.lock
@@ -0,0 +1,29 @@
+PATH
+  remote: ../../../sdk/ruby
+  specs:
+    datastar (1.0.0.beta.3)
+      json
+      logger
+      rack (>= 3.1.14)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    json (2.12.2)
+    logger (1.7.0)
+    nio4r (2.7.4)
+    puma (6.6.0)
+      nio4r (~> 2.0)
+    rack (3.1.16)
+
+PLATFORMS
+  arm64-darwin-24
+  ruby
+
+DEPENDENCIES
+  datastar!
+  puma
+  rack
+
+BUNDLED WITH
+   2.6.3
diff --git a/examples/hello-world/hello-world.html b/examples/hello-world/hello-world.html
@@ -0,0 +1,35 @@
+<!-- This is auto-generated by Datastar. DO NOT EDIT. -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Datastar SDK Demo</title>
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"></script>
+</head>
+<body class="bg-white dark:bg-gray-900 text-lg max-w-xl mx-auto my-16">
+    <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">
+        <div class="flex justify-between items-center">
+            <h1 class="text-gray-900 dark:text-white text-3xl font-semibold">
+                Datastar SDK Demo
+            </h1>
+            <img src="https://data-star.dev/static/images/rocket-64x64.png" alt="Rocket" width="64" height="64"/>
+        </div>
+        <p class="mt-2">
+            SSE events will be streamed from the backend to the frontend.
+        </p>
+        <div class="space-x-2">
+            <label for="delay">
+                Delay in milliseconds
+            </label>
+            <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" />
+        </div>
+        <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">
+            Start
+        </button>
+    </div>
+    <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">
+        <div id="message">Hello, world!</div>
+    </div>
+</body>
+</html>
diff --git a/examples/hello-world/hello-world.ru b/examples/hello-world/hello-world.ru
@@ -0,0 +1,37 @@
+require 'bundler/setup'
+
+require 'datastar'
+
+# This is a test Rack endpoint
+# with a hello world example using Datastar.
+# To run:
+#
+#   # install dependencies
+#   bundle install
+#   # run this endpoint with Puma server
+#   bundle exec puma ./hello-world.ru
+#
+#   Then open http://localhost:9292
+#
+HTML = File.read(File.expand_path('hello-world.html', __dir__))
+
+run do |env|
+  datastar = Datastar.from_rack_env(env)
+
+  if datastar.sse?
+    delay = (datastar.signals['delay'] || 0).to_i
+    delay /= 1000.0 if delay.positive?
+    message = 'Hello, world!'
+
+    datastar.stream do |sse|
+      message.size.times do |i|
+        sse.patch_elements(%(<div id="message">#{message[0..i]}</div>))
+        sleep delay
+      end
+    end
+  else
+    [200, { 'content-type' => 'text/html' }, [HTML]]
+  end
+end
+
+trap('INT') { exit }
diff --git a/examples/threads/Gemfile b/examples/threads/Gemfile
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+gem 'puma'
+gem 'rack'
+# gem 'datastar'
+gem 'datastar', path: '../../../sdk/ruby'
diff --git a/examples/threads/Gemfile.lock b/examples/threads/Gemfile.lock
@@ -0,0 +1,29 @@
+PATH
+  remote: ../../../sdk/ruby
+  specs:
+    datastar (1.0.0.beta.3)
+      json
+      logger
+      rack (>= 3.1.14)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    json (2.12.2)
+    logger (1.7.0)
+    nio4r (2.7.4)
+    puma (6.6.0)
+      nio4r (~> 2.0)
+    rack (3.1.16)
+
+PLATFORMS
+  arm64-darwin-24
+  ruby
+
+DEPENDENCIES
+  datastar!
+  puma
+  rack
+
+BUNDLED WITH
+   2.6.3
diff --git a/examples/threads/threads.ru b/examples/threads/threads.ru
@@ -0,0 +1,84 @@
+require 'bundler/setup'
+
+require 'datastar'
+
+# This is a test Rack endpoint
+# to demo streaming Datastar updates from multiple threads.
+# To run:
+#
+#   # install dependencies
+#   bundle install
+#   # run this endpoint with Puma server
+#   bundle exec puma threads.ru
+#
+#   visit http://localhost:9292
+#
+INDEX = <<~HTML
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="UTF-8">
+      <title>Datastar counter</title>
+      <style>
+        body { padding: 10em; }
+        .counter {#{' '}
+          font-size: 2em;#{' '}
+          span { font-weight: bold; }
+        }
+      </style>
+      <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@release-candidate/bundles/datastar.js"></script>
+    </head>
+    <body>
+      <button#{' '}
+        data-on-click="@get('/')"#{' '}
+        data-indicator-heartbeat#{' '}
+        >Start</button>
+      <p class="counter">Slow thread: <span id="slow">waiting</span></p>
+      <p class="counter">Fast thread: <span id="fast">waiting</span></p>
+      <p id="connection">Disconnected...</p>
+    </body>
+  <html>
+HTML
+
+trap('INT') { exit }
+
+run do |env|
+  # Initialize Datastar with callbacks
+  datastar = Datastar
+             .from_rack_env(env)
+             .on_connect do |sse|
+    sse.patch_elements(%(<p id="connection">Connected...</p>))
+    p ['connect', sse]
+  end.on_server_disconnect do |sse|
+    sse.patch_elements(%(<p id="connection">Done...</p>))
+    p ['server disconnect', sse]
+  end.on_client_disconnect do |socket|
+    p ['client disconnect', socket]
+  end.on_error do |error|
+    p ['exception', error]
+    puts error.backtrace.join("\n")
+  end
+
+  if datastar.sse?
+    # This will run in its own thread / fiber
+    datastar.stream do |sse|
+      11.times do |i|
+        sleep 1
+        # Raising an error to demonstrate error handling
+        # raise ArgumentError, 'This is an error' if i > 5
+
+        sse.patch_elements(%(<span id="slow">#{i}</span>))
+      end
+    end
+
+    # Another thread / fiber
+    datastar.stream do |sse|
+      1000.times do |i|
+        sleep 0.01
+        sse.patch_elements(%(<span id="fast">#{i}</span>))
+      end
+    end
+  else
+    [200, { 'content-type' => 'text/html' }, [INDEX]]
+  end
+end