trmnl_preview 0.30.3 → 0.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be8279b91f8e33f4750e7176131b29d393fe8a920f4313bcd6770af6fca278dc
-  data.tar.gz: aef27ba9bf23146aa0a52a2b8374e5c521f90b20a164247696a290c8d99b161e
+  metadata.gz: 549b443e84d37972c94d74e4db9559deb402ce49f526e52ad1625ba704db50d5
+  data.tar.gz: c0588a1cd534aa350c525efd02410635cd095ccd17974eb6180812e4ae5ca25f
 SHA512:
-  metadata.gz: 76dd26fb7ad267c2a62ddc34e0ad5b220a3adea743dcfe2aac96b3de4d915c8d1a29cbf4b39bb0900c395ddb781015269f7fa913b278f79aec56010c790a82e5
-  data.tar.gz: 26f62dff933de915714295a8ae80530a2a567dabf4e4f676559dc5c20fc18c9fb780a3659fa9d5dadf5e63afaf6b4117989a16177727af19820a8290c26beca9
+  metadata.gz: d66bb390b64ab86df09562ab6a789d58973b1510cc0adbfe72dd6a853e7382ea869ee45d8a96b11004148fc2f392047f4b0bc649b0b772bfc258647938f157cf
+  data.tar.gz: d805eb40ec0b503e85b724f0ee6ce4a267ac4aa396882144e123221318f585920be6cd09b858720428702152846954cda8ccca5413bbf2da95b438c7b1f9c802

data/CHANGELOG.md

@@ -1,6 +1,16 @@
 
 # Changelog
 
+## 0.31.0
+
+- `trmnlp test`'s publishable recipe draws the full view with each boolean field on and off, as `"true"` and `"false"`, the strings TRMNL saves. Before, only select fields were drawn with each option, so a recipe that breaks or goes blank with a switch off passed.
+- `option_screens:` draws those options on the screens you name, such as `[{ device: 'og_png' }, { device: 'v2' }]` to try each one on the TRMNL X too. It defaults to the first screen, as before.
+- `trmnlp serve`'s HTML preview draws a device TRMNL scales at its CSS size again, so a TRMNL X fits its 1040 by 780 frame. Since 0.16.0 it drew 1872 by 1404 and ran past the frame. PNG renders and `trmnlp test` are unchanged.
+
+## 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.

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/screenshot.rb

@@ -69,9 +69,13 @@ module TRMNLP
       })();
     JS
 
+    # The preview frame has the device's CSS size, so the screen stays unscaled there.
+    LIVE_PREVIEW_SIZE_STYLE = '<style>.trmnl .screen { --pixel-ratio: 1 !important; }</style>'
+
     def self.live_preview(html)
       timeout = html.match?(MAPS_DOCUMENT_PATTERN) ? READINESS_TIMEOUT_WITH_MAPS_SECONDS : READINESS_TIMEOUT_SECONDS
-      html.sub('</head>', "#{LAYOUT_PASS_STYLE}<script>#{format(SETTLE_LIVE_PREVIEW, timeout)}</script></head>")
+      script = "<script>#{format(SETTLE_LIVE_PREVIEW, timeout)}</script>"
+      html.sub('</head>', "#{LIVE_PREVIEW_SIZE_STYLE}#{LAYOUT_PASS_STYLE}#{script}</head>")
     end
 
     def initialize(pool:, viewport_timeout: 5, fonts_timeout: FONTS_TIMEOUT_SECONDS)

data/lib/trmnlp/testing/publishable_recipe.rb

@@ -25,21 +25,29 @@ module TRMNLP
     # Share of an image's ink its dark mode render must keep: lost icons kept 0%, the lowest one shown 17% (10-14).
     DARK_MODE_MIN_IMAGE_INK_KEPT = 0.05
 
-    # Each select field's keyname and the values its options save, from the plugin's settings.yml.
-    def self.select_field_values
+    # Each select and boolean field's keyname and the values it can save, from the plugin's settings.yml.
+    def self.option_field_values
       path = File.join(plugin_dir, 'src', 'settings.yml')
       fields = File.exist?(path) ? Array(YAML.safe_load_file(path, aliases: true)&.dig('custom_fields')) : []
-      fields.select { it['field_type'] == 'select' }.to_h do |field|
-        values = SelectFieldChoices.new(field).pairs.map { it.last.to_s }
+      fields.select { %w[select boolean].include?(it['field_type']) }.to_h do |field|
+        # TRMNL saves a boolean field as the string "true" or "false".
+        values = if field['field_type'] == 'boolean' then %w[true false]
+                 else SelectFieldChoices.new(field).pairs.map { it.last.to_s }
+                 end
         [field['keyname'], values.size > PUBLISHABLE_RECIPE_MAX_OPTIONS ? values.values_at(0, -1) : values]
       end
     end
+
+    def self.screen_name(screen)
+      device = screen[:device].is_a?(Hash) ? screen[:device][:model] : screen[:device]
+      [device, screen[:orientation], screen[:palette], ('dark mode' if screen[:dark_mode])].compact.join(' ')
+    end
   end
 end
 
 # rubocop:disable-next Metrics/BlockLength -- one shared group, one check per example
 RSpec.shared_examples 'a publishable recipe' do |screens: TRMNLP::Testing::PUBLISHABLE_RECIPE_SCREENS,
-                                                 dark_mode_screen: { device: 'v2' }|
+                                                 dark_mode_screen: { device: 'v2' }, option_screens: screens.first(1)|
   let(:recipe_inputs) do
     { mocks: respond_to?(:mocks) ? mocks : {}, custom_fields: respond_to?(:custom_fields) ? custom_fields : {},
       variables: respond_to?(:variables) ? variables : {}, now: respond_to?(:now) ? now : nil,
@@ -52,11 +60,7 @@ RSpec.shared_examples 'a publishable recipe' do |screens: TRMNLP::Testing::PUBLI
   end
 
   TRMNLP::Testing::PUBLISHABLE_RECIPE_VIEWS.product(screens).each do |view, screen|
-    device = screen[:device].is_a?(Hash) ? screen[:device][:model] : screen[:device]
-    dark_mode = 'dark mode' if screen[:dark_mode]
-    screen_name = [device, screen[:orientation], screen[:palette], dark_mode].compact.join(' ')
-
-    it "draws the #{view} view on #{screen_name} without page errors" do
+    it "draws the #{view} view on #{TRMNLP::Testing.screen_name(screen)} without page errors" do
       expect(trmnl.render(view:, **screen, **recipe_inputs)).to draw_cleanly
     end
   end
@@ -76,11 +80,11 @@ RSpec.shared_examples 'a publishable recipe' do |screens: TRMNLP::Testing::PUBLI
     end
   end
 
-  TRMNLP::Testing.select_field_values.each do |keyname, values|
-    values.each do |value|
-      it "draws the full view with #{keyname} set to #{value}" do
+  TRMNLP::Testing.option_field_values.each do |keyname, values|
+    option_screens.product(values).each do |screen, value|
+      it "draws the full view on #{TRMNLP::Testing.screen_name(screen)} with #{keyname} set to #{value}" do
         custom_fields = recipe_inputs[:custom_fields].merge(keyname => value)
-        expect(trmnl.render(**screens.first, **recipe_inputs, custom_fields:)).to draw_cleanly
+        expect(trmnl.render(**screen, **recipe_inputs, custom_fields:)).to draw_cleanly
       end
     end
   end

data/lib/trmnlp/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.30.3
+  version: 0.31.0
 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