trmnl_preview 0.3.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3944c7a74517407dbb4ee683c628111668149c622be67a4ba3d69a2655d8b48e
-  data.tar.gz: e6c9d4f7472e4b56d818884ba6ca33307706891da62c40121398036507568fcd
+  metadata.gz: 3a39d955b3dbcc869cde5e0210671a94dfa7af0ea1403fb71c883534d85b6eac
+  data.tar.gz: f0159db40a383ce3149071fd4826bdb9035abab379d442e8a93012a35f6cce30
 SHA512:
-  metadata.gz: 1fd0a512a23f1439cc4030543f92272682917d1024ae8ef6eed7449f51d7677add6a0974ed4783b56ad088729ac53a7343e0c00d9026c83d762fb9f825406eb2
-  data.tar.gz: 70c1ba02c0df2d7e427fc079f0bee439fdeea0c120f348d562f734e10f10b210c11db34fbc99c76894afa5622714445efb1fee17fa44029080ba22c216462b1d
+  metadata.gz: cccd5ba2af16c057717ae4f0acb6843fad3cd9a7f305109817c5d195f278dd1102c39a20cbf21abbbae0e18395b41ac8e5b314f5c10ae763503cc3e877f1403b
+  data.tar.gz: 19eb007c4d077a3078cde135ca200873f5d050abe167306b878b3f7374e052c282d3cb348e806486ce62fa0d6c0913efb1b4feaf100e213ad16d6e5167426ed9

data/README.md

@@ -4,6 +4,8 @@ A basic self-hosted web server to ease the development and sharing of [TRMNL](ht
 
 [Liquid](https://shopify.github.io/liquid/) templates are rendered locally as HTML, leveraging the [TRMNL Design System](https://usetrmnl.com/framework). This server does NOT generate a rendered BMP file. Hence, this is just a _preview_ of the final rendered dashboard.
 
+The server watches the filesystem for changes to the Liquid templates, seamlessly updating the preview without the need to refresh.
+
 ![Screenshot](docs/preview.png)
 
 ## Creating a Plugin
@@ -53,6 +55,7 @@ When the strategy is "webhook", payloads can be POSTed to the `/webhook` endpoin
 
 - `strategy` - Either "polling" or "webhook"
 - `url` - The URL from which to fetch JSON data (polling strategy only)
+- `live_render` - Set to `false` to disable automatic rendering when Liquid templates change (default `true`)
 - `[polling_headers]` - A section of headers to append to the HTTP poll request (polling strategy only)
 
 ## Contributing

data/config.example.toml

@@ -5,6 +5,9 @@ strategy = "polling"
 # Poll URL (required for polling strategy)
 url = "https://example.com/data.json"
 
+# Automatically re-render the view when Liquid templates change (default: true)
+live_render = true
+
 # Polling headers (optional, for polling strategy)
 [polling_headers]
 authorization = "bearer 123"

data/lib/trmnl_preview/app.rb

@@ -1,4 +1,5 @@
 
+require 'faye/websocket'
 require 'sinatra'
 require 'sinatra/base'
 
@@ -21,6 +22,13 @@ module TRMNLPreview
       end
 
       @context.poll_data if @context.strategy == 'polling'
+
+      @live_render_clients = VIEWS.each_with_object({}) { |view, hash| hash[view] = [] }
+      @context.on_view_change do |view|
+        @live_render_clients[view].each do |ws|
+          ws.send(@context.render_template(view))
+        end
+      end
     end
 
     post '/webhook' do
@@ -32,6 +40,21 @@ module TRMNLPreview
       redirect '/full'
     end
 
+    get '/live_render/:view' do
+      ws = Faye::WebSocket.new(request.env)
+      view = params['view']
+
+      ws.on(:open) do |event|
+        @live_render_clients[view] << ws
+      end
+  
+      ws.on(:close) do |event|
+        @live_render_clients[view].delete(ws)
+      end
+  
+      ws.rack_response
+    end
+
     get '/poll' do
       @context.poll_data
       redirect back
@@ -45,6 +68,7 @@ module TRMNLPreview
 
       get "/render/#{view}" do
         @view = view
+        @live_render = @context.live_render
         erb :render_view do
           @context.render_template(view)
         end

data/lib/trmnl_preview/context.rb

@@ -1,5 +1,6 @@
 require 'erb'
 require 'fileutils'
+require 'filewatcher'
 require 'json'
 require 'liquid'
 require 'open-uri'
@@ -9,7 +10,7 @@ require_relative 'liquid_filters'
 
 module TRMNLPreview
   class Context
-    attr_reader :strategy, :temp_dir
+    attr_reader :strategy, :temp_dir, :live_render
     
     def initialize(root)
       config_path = File.join(root, 'config.toml')
@@ -33,12 +34,36 @@ module TRMNLPreview
       @strategy = config['strategy']
       @url = config['url']
       @polling_headers = config['polling_headers'] || {}
+      @live_render = config['live_render'] != false
 
       unless ['polling', 'webhook'].include?(@strategy)
         raise "Invalid strategy: #{strategy} (must be 'polling' or 'webhook')"
       end
 
       FileUtils.mkdir_p(@temp_dir)
+
+      start_filewatcher_thread if @live_render
+    end
+
+    def start_filewatcher_thread
+      Thread.new do
+        loop do
+          begin
+            Filewatcher.new(@user_views_dir).watch do |changes|
+              views = changes.map { |path, _change| File.basename(path, '.liquid') }
+              views.each do |view|
+                @view_change_callback.call(view) if @view_change_callback
+              end
+            end
+          rescue => e
+            puts "Error during live render: #{e}"
+          end
+        end
+      end
+    end
+
+    def on_view_change(&block)
+      @view_change_callback = block
     end
 
     def user_data
@@ -75,13 +100,15 @@ module TRMNLPreview
     end
 
     def render_template(view)
-      path = view_path(view)
-      unless File.exist?(path)
-        return "Missing plugin template: views/#{view}.liquid"
-      end
-
-      user_template = Liquid::Template.parse(File.read(path), environment: @liquid_environment)
-      user_template.render(user_data)
+        path = view_path(view)
+        unless File.exist?(path)
+          return "Missing plugin template: views/#{view}.liquid"
+        end
+
+        user_template = Liquid::Template.parse(File.read(path), environment: @liquid_environment)
+        user_template.render(user_data)
+    rescue StandardError => e
+      e.message
     end
 
     def render_full_page(view)

data/lib/trmnl_preview/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLPreview
-  VERSION = "0.3.0"
+  VERSION = "0.3.1"
 end

data/trmnl_preview.gemspec

@@ -37,6 +37,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency "puma", "~> 6.5"
   spec.add_dependency "liquid", "~> 5.6"
   spec.add_dependency "toml-rb", "~> 3.0"
+  spec.add_dependency "filewatcher", "~> 2.1"
+  spec.add_dependency "faye-websocket", "~> 0.11.3"
 
   # For more information and examples about making a new gem, check out our
   # guide at: https://bundler.io/guides/creating_gem.html

data/web/public/live-render.js

@@ -0,0 +1,23 @@
+live_render = {};
+
+live_render.connect = function () {
+  const view = document.querySelector("meta[name='trmnl-view']").content;
+  const ws = new WebSocket("/live_render/" + view);
+
+  ws.onopen = function () {
+    console.log("Connected to live push server");
+  };
+
+  ws.onmessage = function (msg) {
+    document.querySelector(".view").innerHTML = msg.data;
+  };
+
+  ws.onclose = function () {
+    console.log("Reconnecting to live push server...");
+    setTimeout(live_render.connect, 1000);
+  };
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+  live_render.connect();
+});

data/web/views/render_view.erb

@@ -9,6 +9,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <!-- End Inter font -->
+
+    <% if @live_render %>
+      <meta name="trmnl-view" content="<%= @view %>">
+      <script src="/live-render.js"></script>
+    <% end %>
   </head>
   <body class="environment trmnl">
     <div class="screen">

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -79,6 +79,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: filewatcher
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: faye-websocket
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.11.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.11.3
 description: Automatically rebuild and preview TRNML plugins in multiple views
 email:
 - rockwell@schrock.me
@@ -105,6 +133,7 @@ files:
 - trmnl_preview.gemspec
 - web/public/black-case.jpg
 - web/public/clear-case.jpg
+- web/public/live-render.js
 - web/public/white-case.jpg
 - web/views/index.erb
 - web/views/render_view.erb