trmnl_preview 0.30.2 → 0.30.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 685a69fdb40d83171f2f8cb17d89b6954fae9c97f9f551d4210d228acbdb0690
-  data.tar.gz: e666f0a63344dc33447eb70cabf3202bab6c6030f967716e3b50954583e222e7
+  metadata.gz: 19d57b76b4b9fac2e897d2b4f18459bce312329e9ed647cb950781e5834387e6
+  data.tar.gz: 3f12fe83acc40963e8a36a218275e42713aa5211ea80761cb46a44d72889de01
 SHA512:
-  metadata.gz: a53e8130820062a99d94d25b2a140506baefccb9e2747c30c46d2cc7795a96c423c4c537c520514c3706a9aafacd1cb215957fdd3af6048b5145632ddb24058a
-  data.tar.gz: ebbaa2038fb76c066394dd98218a5305741d2b274763ddc2d41ad4151fc096763ec4593338f364d71807f032687264341e0585f17cf630684276101d757c6f78
+  metadata.gz: ec019e1a423c47855cd9a96b1ef39578135e99aa9fb8b2b807e67f919b08884d360a180bc4619dcbdace7bf99095eeea4d1a69d672f6821a66ea3d33a78ee9c7
+  data.tar.gz: 4bb9acf58ffd364b56a265a16e4a4d2cafa48847cc763c27f7d74d0fd0b261cc69fca465e6af327cfbdd7fb8e116cff46f9fff372e636b9733679af875834758

data/CHANGELOG.md

@@ -1,6 +1,15 @@
 
 # Changelog
 
+## 0.30.4
+
+- `trmnlp lint` reports a margin, padding, gap or position class with a leading minus (`no_negative_spacing`), such as `-mt--2` or `lg:-top--1`. Tailwind writes negative values this way, but no Framework release defines a class that starts with a minus, so TRMNL ignores it and says nothing: an icon nudged up with `-mt--1` stays where it was.
+
+## 0.30.3
+
+- `trmnlp test` serves the Framework's stylesheets, scripts and fonts from a cache in `~/.cache/trmnl/assets`, downloaded from trmnl.com once and kept as long as trmnl.com says. A run no longer fails when trmnl.com is slow or down, as long as the files were fetched before; when a file is due for a refresh and trmnl.com cannot be reached, the copy on disk is used.
+- `trmnlp test` also serves the Google Fonts stylesheet the Framework links for Inter, and its font files, from the same cache, asked for as Firefox asks so Google sends the same fonts. A test page now loads nothing from outside unless the recipe itself does.
+
 ## 0.30.2
 
 - `trmnlp serve`'s HTML preview of a device TRMNL scales runs the page's scripts at the CSS size too, then shows the page at the device's size and stops its timers, as the PNG and the device do. Before, a table showed 8 of 20 rows on a TRMNL X where the device shows 15.

data/lib/trmnlp/lint/checks/no_negative_spacing.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require_relative '../check'
+
+module TRMNLP
+  module Lint
+    module Checks
+      # Reports margin, padding, gap and position classes written with a leading
+      # minus, such as `-mt--2` or `lg:-top--1`. Tailwind spells negative values
+      # this way, but no Framework release, from 1.0.0 to 3.4.2, defines a class
+      # that starts with a minus, so the class does nothing and nothing says so:
+      # an icon nudged up with `-mt--1` stays where it was.
+      class NoNegativeSpacing < Check
+        LEARN_MORE = 'https://trmnl.com/framework/docs/spacing'
+
+        PATTERN = /
+          (?<![\w:-])
+          (?<prefix>(?:[a-z0-9]+:)*)
+          -(?<family>[mp][trblxy]?|gap|top|right|bottom|left|inset)
+          --(?<value>[\w.]+)
+          (?![\w-])
+        /x
+
+        def issues
+          source.all_markup.scan(PATTERN).uniq.map do |prefix, family, value|
+            { message: "'#{prefix}-#{family}--#{value}' has no effect: " \
+                       "the Framework has no negative '#{family}--' classes.",
+              learn_more: LEARN_MORE }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/trmnlp/lint/diagnostic.rb

@@ -43,7 +43,8 @@ module TRMNLP
         return source.locations(MARKUP_PATTERNS[rule_id]) if MARKUP_PATTERNS.key?(rule_id)
 
         case rule_id
-        when 'arbitrary_values_in_range', 'framework_classes_exist', 'framework_prefixes_exist' then class_locations
+        when 'arbitrary_values_in_range', 'no_negative_spacing', 'framework_classes_exist', 'framework_prefixes_exist'
+          class_locations
         when 'layouts_have_content' then empty_view_locations
         when 'form_fields_valid' then form_field_locations
         when 'custom_field_links_embedded' then custom_field_description_locations

data/lib/trmnlp/lint.rb

@@ -13,6 +13,7 @@ require_relative 'lint/checks/limited_inline_styles'
 require_relative 'lint/checks/no_style_restyling_framework'
 require_relative 'lint/checks/no_size_classes'
 require_relative 'lint/checks/arbitrary_values_in_range'
+require_relative 'lint/checks/no_negative_spacing'
 require_relative 'lint/checks/no_opacity'
 require_relative 'lint/checks/gray_text_has_one_bit_class'
 require_relative 'lint/checks/highcharts_animations_disabled'
@@ -52,6 +53,7 @@ module TRMNLP
       Checks::NoStyleRestylingFramework,
       Checks::NoSizeClasses,
       Checks::ArbitraryValuesInRange,
+      Checks::NoNegativeSpacing,
       Checks::NoOpacity,
       Checks::GrayTextHasOneBitClass,
       Checks::HighchartsAnimationsDisabled,

data/lib/trmnlp/testing/asset_cache.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+require 'digest'
+require 'fileutils'
+require 'json'
+require 'net/http'
+require 'socket'
+
+require_relative '../framework_version'
+
+module TRMNLP
+  module Testing
+    # Serves the Framework's files and Google Fonts to test pages from disk, for as long as their hosts say.
+    class AssetCache
+      HOST = FrameworkVersion::DEFAULT_ASSET_HOST
+      FRAMEWORK_LINK = %r{#{Regexp.escape(HOST)}(?=/(?:css|js)/)}
+      GOOGLE_FONTS_LINK = %r{https://(fonts\.(?:googleapis|gstatic)\.com)/}
+      SAFE_PATH = %r{\A/(?:[\w.-]+/)*[\w.-]+\z}
+      DOWNLOAD_TIMEOUT_SECONDS = 10
+      BAD_GATEWAY = "HTTP/1.1 502 Bad Gateway\r\ncontent-length: 0\r\nconnection: close\r\n\r\n"
+
+      def initialize(dir:, clock: -> { Time.now })
+        @dir = dir.to_s
+        @clock = clock
+      end
+
+      def start
+        @server = TCPServer.new('127.0.0.1', 0)
+        @thread = Thread.new { loop { Thread.new(@server.accept) { serve(it) } } }
+        self
+      end
+
+      def stop
+        @thread&.kill
+        @server&.close
+      end
+
+      def url = "http://127.0.0.1:#{@server.addr[1]}"
+
+      def point_framework_links_at_cache(html) = point_google_fonts_at_cache(html.gsub(FRAMEWORK_LINK, url))
+
+      private
+
+      def point_google_fonts_at_cache(text) = text.gsub(GOOGLE_FONTS_LINK) { "#{url}/#{::Regexp.last_match(1)}/" }
+
+      def serve(socket)
+        path, query = socket.gets.to_s.split[1].to_s.split('?', 2)
+        user_agent = nil
+        while (line = socket.gets) && !line.strip.empty?
+          user_agent = line.split(':', 2).last.strip if line.downcase.start_with?('user-agent:')
+        end
+        asset = !path.to_s.include?('..') && path.to_s.match?(SAFE_PATH) && asset(path, query, user_agent)
+        socket.write(asset ? response(asset) : BAD_GATEWAY)
+      rescue IOError, SystemCallError
+        nil
+      ensure
+        socket.close unless socket.closed?
+      end
+
+      def asset(path, query, user_agent)
+        key = query ? "#{path}.#{Digest::SHA256.hexdigest(query)[0, 16]}" : path
+        cached = cached(key)
+        return cached if cached && cached['expires_at'] > @clock.call.to_i
+
+        download(key, URI("#{upstream(path)}#{"?#{query}" if query}"), user_agent) || cached
+      end
+
+      # A Google Fonts path starts with its host, /fonts.gstatic.com/s/...; any other path is trmnl.com's.
+      def upstream(path)
+        host, rest = path.delete_prefix('/').split('/', 2)
+        host.match?(/\Afonts\.(googleapis|gstatic)\.com\z/) ? "https://#{host}/#{rest}" : "#{HOST}#{path}"
+      end
+
+      def cached(key)
+        meta = JSON.parse(File.read(file(key, '.json')))
+        meta.merge('body' => File.binread(file(key)))
+      rescue Errno::ENOENT, JSON::ParserError
+        nil
+      end
+
+      # trmnl.com sends its CORS header only to a request with an Origin; Google picks the font format by User-Agent.
+      def download(key, uri, user_agent)
+        headers = { 'Origin' => url, 'User-Agent' => user_agent }.compact
+        timeouts = { open_timeout: DOWNLOAD_TIMEOUT_SECONDS, read_timeout: DOWNLOAD_TIMEOUT_SECONDS }
+        answer = Net::HTTP.start(uri.host, uri.port, use_ssl: true, **timeouts) { it.get(uri.request_uri, headers) }
+        answer.is_a?(Net::HTTPSuccess) ? cache_download(key, answer) : nil
+      rescue StandardError
+        nil
+      end
+
+      def cache_download(path, answer)
+        meta = { 'content_type' => answer['content-type'], 'cache_control' => answer['cache-control'],
+                 'allow_origin' => answer['access-control-allow-origin'],
+                 'expires_at' => @clock.call.to_i + answer['cache-control'].to_s[/max-age=(\d+)/, 1].to_i }
+        write_to_disk(path, answer.body, meta)
+        meta.merge('body' => answer.body)
+      end
+
+      def write_to_disk(path, body, meta)
+        write(file(path), body)
+        write(file(path, '.json'), JSON.generate(meta))
+      rescue SystemCallError
+        nil
+      end
+
+      # Written beside the file and renamed over it, so another run reading the cache sees a whole file.
+      def write(path, content)
+        FileUtils.mkdir_p(File.dirname(path))
+        temporary = "#{path}.#{Process.pid}.#{Thread.current.object_id}"
+        File.binwrite(temporary, content)
+        File.rename(temporary, path)
+      end
+
+      def file(path, extension = '') = File.join(@dir, "#{path}#{extension}")
+
+      # A stylesheet's Google font files are pointed at the cache as it is served, since the cache's port changes.
+      def response(asset)
+        stylesheet = asset['content_type'].to_s.start_with?('text/css')
+        body = stylesheet ? point_google_fonts_at_cache(asset['body']) : asset['body']
+        headers = { 'content-type' => asset['content_type'], 'cache-control' => asset['cache_control'],
+                    'access-control-allow-origin' => asset['allow_origin'],
+                    'content-length' => body.bytesize, 'connection' => 'close' }.compact
+        "HTTP/1.1 200 OK\r\n#{headers.map { "#{it[0]}: #{it[1]}\r\n" }.join}\r\n#{body}"
+      end
+    end
+  end
+end

data/lib/trmnlp/testing/browser.rb

@@ -13,9 +13,10 @@ module TRMNLP
     # The Firefox one example renders in, checked out of the pool on first use and back in by #release.
     # Pages are drawn through ScreenGenerator and Screenshot like `trmnlp build --png`'s, but opened from page_server.
     class Browser
-      def initialize(pool:, page_server:)
+      def initialize(pool:, page_server:, asset_cache:)
         @pool = pool
         @page_server = page_server
+        @asset_cache = asset_cache
         @screenshot = Screenshot.new(pool:)
         @pages = {}.compare_by_identity
         @fresh_browsers = []
@@ -24,13 +25,15 @@ module TRMNLP
       # A Firefox of its own, with nothing cached, closed when this browser is released.
       def fresh
         pool = BrowserPool.new(driver_factory: FirefoxDriver.method(:build), max_size: 1)
-        self.class.new(pool:, page_server: @page_server).tap { @fresh_browsers << [it, pool] }
+        browser = self.class.new(pool:, page_server: @page_server, asset_cache: @asset_cache)
+        browser.tap { @fresh_browsers << [it, pool] }
       end
 
       # Loads the screen's page; its picture is only taken when a test asks for it.
       def load(screen)
         generator = generator(screen)
-        @pages[screen] = [generator.html, generator.width, generator.height, @page_server.add(generator.html)]
+        html = @asset_cache.point_framework_links_at_cache(generator.html)
+        @pages[screen] = [html, generator.width, generator.height, @page_server.add(html)]
         show(screen)
       end
 

data/lib/trmnlp/testing/rspec.rb

@@ -8,6 +8,7 @@ require 'capybara/rspec/matchers' # after rspec/expectations, or its matchers lo
 require_relative '../../trmnlp'
 require_relative '../browser_pool'
 require_relative '../firefox_driver'
+require_relative 'asset_cache'
 require_relative 'browser'
 require_relative 'certificate_authority'
 require_relative 'ink_count'
@@ -33,6 +34,11 @@ module TRMNLP
       @browser_pool ||= BrowserPool.new(driver_factory: FirefoxDriver.method(:build), max_size: 1)
     end
 
+    def self.asset_cache
+      @asset_cache ||= AssetCache.new(dir: Paths.new(plugin_dir).cache_dir.join('assets')).start
+                                 .tap { |cache| at_exit { cache.stop } }
+    end
+
     def self.page_server
       @page_server ||= PageServer.new.start.tap { |server| at_exit { server.stop } }
     end
@@ -41,7 +47,8 @@ module TRMNLP
       def trmnl = @trmnl ||= Plugin.new(Testing.plugin_dir, browser: trmnl_browser, authority: Testing.authority)
 
       def trmnl_browser
-        @trmnl_browser ||= Browser.new(pool: Testing.browser_pool, page_server: Testing.page_server)
+        @trmnl_browser ||= Browser.new(pool: Testing.browser_pool, page_server: Testing.page_server,
+                                       asset_cache: Testing.asset_cache)
       end
     end
   end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.30.2'
+  VERSION = '0.30.4'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.30.2
+  version: 0.30.4
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -441,6 +441,7 @@ files:
 - lib/trmnlp/lint/checks/no_async_functions.rb
 - lib/trmnlp/lint/checks/no_custom_filters.rb
 - lib/trmnlp/lint/checks/no_external_qr_codes.rb
+- lib/trmnlp/lint/checks/no_negative_spacing.rb
 - lib/trmnlp/lint/checks/no_nested_layouts.rb
 - lib/trmnlp/lint/checks/no_opacity.rb
 - lib/trmnlp/lint/checks/no_refresh_rate_field.rb
@@ -476,6 +477,7 @@ files:
 - lib/trmnlp/screen_generator.rb
 - lib/trmnlp/screenshot.rb
 - lib/trmnlp/select_field_choices.rb
+- lib/trmnlp/testing/asset_cache.rb
 - lib/trmnlp/testing/browser.rb
 - lib/trmnlp/testing/certificate_authority.rb
 - lib/trmnlp/testing/device_models.rb