datastar 1.0.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be590227c905b287d03dc8bc36a20b1d1e74e1a1dcfa1ae440ef5f61c0f5ab49
-  data.tar.gz: 0d175645c14c9ec133f0ce4b6acf9c5882d935b633b66a58c9aeb071c46e261f
+  metadata.gz: 885e73382637f598ee1feeea492556e30f4dea1dcdd9eae1627649a8dbadc0bc
+  data.tar.gz: 2945bedd152787c39ae3843f2cf2c937bdba3d7d8a0ea0f6b9a4d0ac2bf34a18
 SHA512:
-  metadata.gz: c0e8d9952b06338ca703dd39c46bace452728f21688c0f7f996594922412fe188115c23ef441b9d07e2d2d4273b44ebce740f145260b2d29fc48f736a0d32e4a
-  data.tar.gz: 3d162f0bce66bc6b7eeec5ad948d3ab8bfd9ad57138a866a098a2987e35006969fc93d0957d3ffde751b7333e21bc1aef7655652a2823a4d1acbaddcba995a9d
+  metadata.gz: bc0bb40586da1e305aa87b6c4b830baeaacd671e259aa7105a043ceaebab8659c23df8b12665d1a1bf1b9ca09aa518e275cdc30b5978627da6d818e818cc14f8
+  data.tar.gz: 5ae556f5ce37d9805fe920c68ab5164464ec6fabbd2f4355d9d17139dbf381bd0dde65b5c33bf8f0e4de6eda431ece4cc7b20a41080f3362fea9f7daedad580d

data/LICENSE.md

@@ -1,19 +1,7 @@
-Copyright (c) Ismael Celis
+Copyright © Star Federation
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,6 +1,6 @@
 # Datastar Ruby SDK
 
-Implement the [Datastart SSE procotocol](https://data-star.dev/reference/sse_events) in Ruby. It can be used in any Rack handler, and Rails controllers.
+Implement the [Datastar SSE procotocol](https://data-star.dev/reference/sse_events) in Ruby. It can be used in any Rack handler, and Rails controllers.
 
 ## Installation
 
@@ -13,7 +13,7 @@ gem 'datastar'
 Or point your `Gemfile` to the source
 
 ```bash
-gem 'datastar', git: 'https://github.com/starfederation/datastar', glob: 'sdk/ruby/*.gemspec'
+gem 'datastar', github: 'starfederation/datastar-ruby'
 ```
 
 ## Usage
@@ -160,7 +160,7 @@ sse.execute_script(%(alert('Hello World!')), auto_remove: false)
 ```
 
 #### `signals`
-See https://data-star.dev/guide/getting_started#data-signals
+See https://data-star.dev/guide/reactive_signals
 
 Returns signals sent by the browser.
 
@@ -270,13 +270,105 @@ Datastar.configure do |config|
   config.on_error do |exception|
     Sentry.notify(exception)
   end
-  
+
   # Global heartbeat interval (or false, to disable)
-  # Can be overriden on specific instances
+  # Can be overriden on specific instances
   config.heartbeat = 0.3
+
+  # Enable compression for SSE streams (default: false)
+  # See the Compression section below for details
+  config.compression = true
 end
 ```
 
+### Compression
+
+SSE data (JSON + HTML) is highly compressible, and long-lived connections benefit significantly from compression. This SDK supports opt-in Brotli and gzip compression for SSE streams.
+
+#### Enabling compression
+
+Per-instance:
+
+```ruby
+datastar = Datastar.new(request:, response:, view_context:, compression: true)
+```
+
+Or globally:
+
+```ruby
+Datastar.configure do |config|
+  config.compression = true
+end
+```
+
+When enabled, the SDK negotiates compression with the client via the `Accept-Encoding` header and sets the appropriate `Content-Encoding` response header. If the client does not support compression, responses are sent uncompressed.
+
+#### Brotli vs gzip
+
+Brotli (`:br`) is preferred by default as it offers better compression ratios. It requires the host app to require the [`brotli`](https://github.com/miyucy/brotli) gem. Gzip uses Ruby built-in `zlib` and requires no extra dependencies.
+
+To use Brotli, add the gem to your `Gemfile`:
+
+```ruby
+gem 'brotli'
+```
+
+#### Configuration options
+
+```ruby
+Datastar.configure do |config|
+  # Enable compression (default: false)
+  # true enables both :br and :gzip (br preferred)
+  config.compression = true
+
+  # Or pass an array of encodings (first = preferred)
+  config.compression = [:br, :gzip]
+
+  # Per-encoder options via [symbol, options] pairs
+  config.compression = [[:br, { quality: 5 }], :gzip]
+end
+```
+
+You can also set these per-instance:
+
+```ruby
+datastar = Datastar.new(
+  request:, response:, view_context:,
+  compression: [:gzip]              # only gzip, no brotli
+)
+
+# Or with per-encoder options
+datastar = Datastar.new(
+  request:, response:, view_context:,
+  compression: [[:gzip, { level: 1 }]]
+)
+```
+
+#### Per-encoder options
+
+Options are passed directly to the underlying compressor via the array form. Available options depend on the encoder.
+
+**Gzip** (via `Zlib::Deflate`):
+
+| Option       | Default                     | Description                                                  |
+| ------------ | --------------------------- | ------------------------------------------------------------ |
+| `:level`     | `Zlib::DEFAULT_COMPRESSION` | Compression level (0-9). 0 = none, 1 = fastest, 9 = smallest. `Zlib::BEST_SPEED` and `Zlib::BEST_COMPRESSION` also work. |
+| `:mem_level` | `8`                         | Memory usage (1-9). Higher uses more memory for better compression. |
+| `:strategy`  | `Zlib::DEFAULT_STRATEGY`    | Algorithm strategy. Alternatives: `Zlib::FILTERED`, `Zlib::HUFFMAN_ONLY`, `Zlib::RLE`, `Zlib::FIXED`. |
+
+**Brotli** (via `Brotli::Compressor`, requires the `brotli` gem):
+
+| Option     | Default    | Description                                                  |
+| ---------- | ---------- | ------------------------------------------------------------ |
+| `:quality` | `11`       | Compression quality (0-11). Lower is faster, higher compresses better. |
+| `:lgwin`   | `22`       | Base-2 log of sliding window size (10-24).                   |
+| `:lgblock` | `0` (auto) | Base-2 log of max input block size (16-24, or 0 for auto).   |
+| `:mode`    | `:generic` | Compression mode: `:generic`, `:text`, or `:font`. `:text` is a good choice for SSE (UTF-8 HTML/JSON). |
+
+#### Proxy considerations
+
+Even with `X-Accel-Buffering: no` (set by default), some proxies like Nginx may buffer compressed responses. You may need to add `proxy_buffering off` to your Nginx configuration when using compression with SSE.
+
 ### Rendering Rails templates
 
 In Rails, make sure to initialize Datastar with the `view_context` in a controller.
@@ -348,13 +440,14 @@ bundle install
 From this library's root, run the bundled-in test Rack app:
 
 ```bash
-bundle puma examples/test.ru
+bundle puma -p 8000 examples/test.ru
 ```
 
-Now run the test bash scripts in the `sdk/test` directory in this repo.
+From the main [Datastar](https://github.com/starfederation/datastar) repo (you'll need Go installed)
 
 ```bash
-./test-all.sh http://localhost:9292
+cd sdk/tests
+go run ./cmd/datastar-sdk-tests -server http://localhost:8000 
 ```
 
 ## Development
@@ -363,12 +456,6 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-### Building
-
-To build `consts.rb` file from template, run Docker and run `make task build`
-
-The template is located at `build/consts_ruby.gtpl`.
-
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/starfederation/datastar.

data/benchmarks/compression.rb

@@ -0,0 +1,251 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# Benchmark: SSE compression payload sizes
+#
+# Compares bytes-over-the-wire for no compression, gzip, and brotli
+# when streaming large HTML elements via Datastar's SSE protocol.
+#
+# Usage:
+#   bundle exec ruby benchmarks/compression.rb
+#
+# The benchmark patches realistic HTML payloads of increasing size
+# through the full Datastar SSE pipeline (ServerSentEventGenerator →
+# CompressedSocket → raw socket) and reports the resulting byte sizes
+# and compression ratios.
+
+require 'bundler/setup'
+require 'datastar'
+require 'datastar/compressor/gzip'
+require 'datastar/compressor/brotli'
+
+# --- Payload generators ---------------------------------------------------
+
+# A user-row partial, repeated N times inside a <tbody>.
+# Realistic: IDs, data attributes, mixed text, Tailwind-style classes.
+def html_table(row_count)
+  rows = row_count.times.map do |i|
+    <<~HTML
+      <tr id="user-row-#{i}" class="border-b border-gray-200 hover:bg-gray-50 transition-colors duration-150" data-user-id="#{i}" data-signal-selected="false">
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#{i + 1}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user-#{i}@example.com</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#{%w[Admin Editor Viewer].sample}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-01-#{(i % 28 + 1).to_s.rjust(2, '0')}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+          <button class="text-indigo-600 hover:text-indigo-900 mr-3" data-on-click="$$put('/users/#{i}/edit')">Edit</button>
+          <button class="text-red-600 hover:text-red-900" data-on-click="$$delete('/users/#{i}')">Delete</button>
+        </td>
+      </tr>
+    HTML
+  end
+
+  <<~HTML
+    <tbody id="users-table-body">
+    #{rows.join}
+    </tbody>
+  HTML
+end
+
+# A dashboard card with nested elements — charts placeholder, stats, lists.
+def html_dashboard(card_count)
+  cards = card_count.times.map do |i|
+    <<~HTML
+      <div id="card-#{i}" class="bg-white overflow-hidden shadow-lg rounded-2xl border border-gray-100 p-6 flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold text-gray-900">Metric #{i + 1}</h3>
+          <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">+#{rand(1..99)}%</span>
+        </div>
+        <div class="text-3xl font-bold text-gray-900">#{rand(1_000..99_999).to_s.chars.each_slice(3).map(&:join).join(',')}</div>
+        <div class="h-32 bg-gradient-to-r from-indigo-50 to-indigo-100 rounded-lg flex items-end gap-1 p-2">
+          #{8.times.map { |j| "<div class=\"bg-indigo-#{[400, 500, 600].sample} rounded-t w-full\" style=\"height: #{rand(20..100)}%\"></div>" }.join("\n          ")}
+        </div>
+        <ul class="divide-y divide-gray-100">
+          #{5.times.map { |j| "<li class=\"flex justify-between py-2 text-sm\"><span class=\"text-gray-500\">Region #{j + 1}</span><span class=\"font-medium text-gray-900\">#{rand(100..9_999)}</span></li>" }.join("\n          ")}
+        </ul>
+      </div>
+    HTML
+  end
+
+  <<~HTML
+    <div id="dashboard-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+    #{cards.join}
+    </div>
+  HTML
+end
+
+# --- Socket that counts bytes --------------------------------------------
+
+class ByteCountingSocket
+  attr_reader :total_bytes
+
+  def initialize
+    @total_bytes = 0
+  end
+
+  def <<(data)
+    @total_bytes += data.bytesize
+    self
+  end
+
+  def close; end
+end
+
+# --- Helpers --------------------------------------------------------------
+
+# Pipe an HTML payload through the full SSE + compression stack
+# and return the byte count that would go over the wire.
+def measure_bytes(html, encoding)
+  socket = ByteCountingSocket.new
+
+  wrapped = case encoding
+            when :none  then socket
+            when :gzip  then Datastar::Compressor::Gzip::CompressedSocket.new(socket)
+            when :br    then Datastar::Compressor::Brotli::CompressedSocket.new(socket, mode: :text)
+            end
+
+  generator = Datastar::ServerSentEventGenerator.new(
+    wrapped,
+    signals: {},
+    view_context: nil
+  )
+
+  generator.patch_elements(html)
+  wrapped.close unless encoding == :none
+
+  socket.total_bytes
+end
+
+def format_bytes(bytes)
+  if bytes >= 1024 * 1024
+    "%.1f MB" % (bytes / (1024.0 * 1024))
+  elsif bytes >= 1024
+    "%.1f KB" % (bytes / 1024.0)
+  else
+    "#{bytes} B"
+  end
+end
+
+def ratio(original, compressed)
+  "%.1f%%" % ((1.0 - compressed.to_f / original) * 100)
+end
+
+# --- Run benchmarks -------------------------------------------------------
+
+SCENARIOS = [
+  ["Table 10 rows",     -> { html_table(10) }],
+  ["Table 50 rows",     -> { html_table(50) }],
+  ["Table 200 rows",    -> { html_table(200) }],
+  ["Table 1000 rows",   -> { html_table(1000) }],
+  ["Dashboard 5 cards", -> { html_dashboard(5) }],
+  ["Dashboard 20 cards",-> { html_dashboard(20) }],
+  ["Dashboard 50 cards",-> { html_dashboard(50) }],
+]
+
+ENCODINGS = %i[none gzip br]
+
+# Header
+puts "Datastar SSE Compression Benchmark"
+puts "=" * 90
+puts
+puts format(
+  "%-22s %12s %12s %8s %12s %8s",
+  "Scenario", "No Compress", "Gzip", "Saved", "Brotli", "Saved"
+)
+puts "-" * 90
+
+SCENARIOS.each do |name, generator|
+  html = generator.call
+  results = ENCODINGS.map { |enc| [enc, measure_bytes(html, enc)] }.to_h
+  none = results[:none]
+
+  puts format(
+    "%-22s %12s %12s %8s %12s %8s",
+    name,
+    format_bytes(none),
+    format_bytes(results[:gzip]),
+    ratio(none, results[:gzip]),
+    format_bytes(results[:br]),
+    ratio(none, results[:br])
+  )
+end
+
+# --- Streaming: multiple SSE events over one connection -------------------
+
+# Simulates a long-lived SSE connection where rows are patched individually
+# (e.g. a live-updating table). The compressor stays open across events,
+# so repeated structure (CSS classes, attribute patterns) compresses
+# increasingly well as the dictionary builds up.
+
+def measure_streaming_bytes(payloads, encoding)
+  socket = ByteCountingSocket.new
+
+  wrapped = case encoding
+            when :none  then socket
+            when :gzip  then Datastar::Compressor::Gzip::CompressedSocket.new(socket)
+            when :br    then Datastar::Compressor::Brotli::CompressedSocket.new(socket, mode: :text)
+            end
+
+  generator = Datastar::ServerSentEventGenerator.new(
+    wrapped,
+    signals: {},
+    view_context: nil
+  )
+
+  payloads.each { |html| generator.patch_elements(html) }
+  wrapped.close unless encoding == :none
+
+  socket.total_bytes
+end
+
+def table_rows(count)
+  count.times.map do |i|
+    <<~HTML
+      <tr id="user-row-#{i}" class="border-b border-gray-200 hover:bg-gray-50 transition-colors duration-150" data-user-id="#{i}" data-signal-selected="false">
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#{i + 1}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user-#{i}@example.com</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#{%w[Admin Editor Viewer].sample}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-01-#{(i % 28 + 1).to_s.rjust(2, '0')}</td>
+        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+          <button class="text-indigo-600 hover:text-indigo-900 mr-3" data-on-click="$$put('/users/#{i}/edit')">Edit</button>
+          <button class="text-red-600 hover:text-red-900" data-on-click="$$delete('/users/#{i}')">Delete</button>
+        </td>
+      </tr>
+    HTML
+  end
+end
+
+puts
+puts
+puts "Streaming: individual row patches over one SSE connection"
+puts "=" * 90
+puts
+puts format(
+  "%-22s %12s %12s %8s %12s %8s",
+  "Scenario", "No Compress", "Gzip", "Saved", "Brotli", "Saved"
+)
+puts "-" * 90
+
+[10, 50, 200, 1000].each do |count|
+  payloads = table_rows(count)
+  results = ENCODINGS.map { |enc| [enc, measure_streaming_bytes(payloads, enc)] }.to_h
+  none = results[:none]
+
+  puts format(
+    "%-22s %12s %12s %8s %12s %8s",
+    "#{count} row patches",
+    format_bytes(none),
+    format_bytes(results[:gzip]),
+    ratio(none, results[:gzip]),
+    format_bytes(results[:br]),
+    ratio(none, results[:br])
+  )
+end
+
+puts
+puts "Notes:"
+puts "  - Single-event sizes include full SSE framing (event: / data: prefixes)"
+puts "  - Gzip: default compression level, gzip framing (window_bits=31)"
+puts "  - Brotli: default quality (11) with mode: :text"
+puts "  - Streaming rows: each row is a separate patch_elements SSE event"
+puts "    over one persistent compressed connection. The compressor dictionary"
+puts "    builds up across events, improving ratios for repetitive markup."

data/examples/hello-world/Gemfile

@@ -5,4 +5,4 @@ source 'https://rubygems.org'
 gem 'puma'
 gem 'rack'
 # gem 'datastar'
-gem 'datastar', path: '../../../sdk/ruby'
+gem 'datastar', path: '../../../'

data/examples/hello-world/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
-  remote: ../../../sdk/ruby
+  remote: ../../..
   specs:
-    datastar (1.0.0.beta.3)
+    datastar (1.0.0)
       json
       logger
       rack (>= 3.1.14)
@@ -9,7 +9,7 @@ PATH
 GEM
   remote: https://rubygems.org/
   specs:
-    json (2.12.2)
+    json (2.16.0)
     logger (1.7.0)
     nio4r (2.7.4)
     puma (6.6.0)

data/examples/hello-world/hello-world.html

@@ -5,10 +5,10 @@
 <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>
+    <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/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 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
@@ -22,9 +22,9 @@
             <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" />
+            <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">
+        <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>
@@ -32,4 +32,4 @@
         <div id="message">Hello, world!</div>
     </div>
 </body>
-</html>
+</html>