lookbook 2.0.2 → 2.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 367001bca8dd83ecf86085760aaa3befe93665913ada3602c893b5b768700b82
-  data.tar.gz: 733c573b3380072d0acecb9ce63e50f5a652d75ff649bda983c25935c938464b
+  metadata.gz: 23c9ebbf01e8228763851357baeb33218efefdeebbe03f1ffe9be340ad9e22d8
+  data.tar.gz: 0af47c23f936c11f782d611f52e113f006ba323afd61d3f6c7598cea9ac7ee0c
 SHA512:
-  metadata.gz: afe34ddf105269ad47a25d1f0b208eb7dec1acf7858cde29c1aec9f3a59fcafb99ee17f4f48e7ba3b1aef59ac20aa50e2e0382560862cef334c25605f43130b6
-  data.tar.gz: ced6d61a75a6e614dba752215f9ff7226c1c10e2c569048a605af35ed5c165129581dd9e8f34362a0d52863fae04143e23ec2615d33afdc027437b4f8ab96393
+  metadata.gz: 2c0c8d14d894301fb289defc7f61f1886ec2e2da17d958bafe8e880cbdd6232a44a1d91d2db9ecb37cf970908a4b600d80fba1fdf0199d8dfd2bd0fdf133ad8e
+  data.tar.gz: 830455b5818b67bcc5245898ce2e2c0eda5b99117b8fbe2f20898dc839e28a7d8c12901575d31d7653c0daab23aee3fe314c6348746f8e12754b4ed9f7d8599f

data/app/components/lookbook/button/component.html.erb

@@ -2,8 +2,8 @@
   id: id,
   icon: icon,
   **button_attrs,
-  "@keydown.esc.stop": "hideDropdown",
-  "@navigation:complete.window": "updateDropdown") do %>
+  "x-on:keydown.esc.stop": "hideDropdown",
+  "x-on:navigation:complete.window": "updateDropdown") do %>
   <%= content %>
 <% end %>
 

data/app/components/lookbook/copy_button/component.html.erb

@@ -2,7 +2,7 @@
   name: "copy-button",
   **button_attrs,
   "x-data": prepare_alpine_data,
-  "@click.prevent": "copyToClipboard" do |button| %>
+  "x-on:click.prevent": "copyToClipboard" do |button| %>
   <% button.with_icon name: icon, size: icon_size, "x-show": "!copied", cloak: true %>
   <% button.with_icon name: :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
   <% if content %>

data/app/components/lookbook/debug_menu/component.html.erb

@@ -6,7 +6,7 @@
           <a href="#"
             class="text-xs flex items-center hover:underline"
             x-data="clipboardComponent"
-            @click.prevent.stop="copyToClipboard('#debug-data')">
+            x-on:click.prevent.stop="copyToClipboard('#debug-data')">
             <span x-show="copied" x-cloak>
               <%= icon :check, size: 2.5, class: "text-green-600" %>
             </span>
@@ -20,7 +20,7 @@
       <li>
         <a href="#"
           class="text-xs flex items-center hover:underline"
-          @click.stop="localStorage.clear(); window.location.reload();">
+          x-on:click.stop="localStorage.clear(); window.location.reload();">
           <%= icon :refresh_cw, size: 2.5 %>
           <span class="ml-2">Reset local storage</span>
         </a>

data/app/components/lookbook/dimensions_display/component.html.erb

@@ -1,9 +1,9 @@
 <%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
   ":class":"{'!opacity-100': resizing}",
-  "@viewport:resize-start.window": "resizing = true",
-  "@viewport:resize-complete.window": "resizing = false",
-  "@dom:update-start.window": "tearDown",
-  "@dom:update-complete.window": "createObserver",
+  "x-on:viewport:resize-start.window": "resizing = true",
+  "x-on:viewport:resize-complete.window": "resizing = false",
+  "x-on:dom:update-start.window": "tearDown",
+  "x-on:dom:update-complete.window": "createObserver",
   "x-show": "target" do %>
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -52,8 +52,8 @@
       style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden;"
     <% end %>>
     <div
-      @viewport:resize-progress="resizeIframe"
-      @viewport:resize-complete="resizeIframe"
+      x-on:viewport:resize-progress="resizeIframe"
+      x-on:viewport:resize-complete="resizeIframe"
       x-ref="viewportWrapper"> 
       <%= lookbook_render :viewport,
         iframe_id: "#{id}-viewport",

data/app/components/lookbook/filter/component.html.erb

@@ -7,10 +7,10 @@
       x-ref="input"
       x-model="<%= @model %>"
       x-effect="$dispatch('filter:change', { text, filter: this })"
-      @keydown.esc.stop="clear"
-      @keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
-      @keydown.stop>
-      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
+      x-on:keydown.esc.stop="clear"
+      x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
+      x-on:keydown.stop>
+      <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
         <%= icon  :x, size: 3 %>
       </button>
   </div>

data/app/components/lookbook/header/component.html.erb

@@ -41,14 +41,14 @@
         <% end %>
 
         <% group.with_button icon: :menu,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
 
         <% group.with_button icon: :x,
-          "@click.stop": "toggleSidebar",
+          "x-on:click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",
-          "@keydown.esc.window": "closeMobileSidebar",
+          "x-on:keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
       <% end %>    
     <% end %>

data/app/components/lookbook/icon_button/component.rb

@@ -1,6 +1,6 @@
 module Lookbook
   class IconButton::Component < Lookbook::BaseComponent
-    renders_many :icons, Icon::Component
+    renders_many :icons, Lookbook::Icon::Component
 
     ICON_SIZES = {
       xs: 3,

data/app/components/lookbook/nav/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "flex flex-col overflow-hidden h-full",
-  "@filter:change.stop": "filter($event.detail.text)" do %>
+  "x-on:filter:change.stop": "filter($event.detail.text)" do %>
   
   <% if toolbar %>
     <%= toolbar %>

data/app/components/lookbook/nav/item/component.js

@@ -58,7 +58,7 @@ export default function navItemComponent({ id, matchers }) {
 
     bindings: {
       toggle: {
-        ["@click.stop"]: "toggle",
+        ["x-on:click.stop"]: "toggle",
         ["x-ref"]: "toggle",
       },
       link: {

data/app/components/lookbook/params/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "overflow-hidden" do %>
   <div class="bg-lookbook-params-editor-bg border border-lookbook-divider rounded-md overflow-x-auto">
-    <table class="border-collapse w-full" :class="narrow && 'linear'">
+    <table class="border-collapse w-full" x-bind:class="narrow && 'linear'">
       <thead>
         <tr>
           <th class="param-label">Param</th>

data/app/components/lookbook/split_layout/component.html.erb

@@ -3,7 +3,7 @@
     <%= pane %>
     <% if i < panes.size %>
       <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
-        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
+        <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" x-bind:class="{
           'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
           'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
         }"></div>

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -13,7 +13,7 @@
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
+  "x-on:click.prevent": "selectTab($el)",
   data: {
     disabled: @disabled
   } do %>

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -15,8 +15,8 @@
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
   }",
-  "@click.prevent": "selectTab($el)",
-  "@keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
+  "x-on:click.prevent": "selectTab($el)",
+  "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil,
   data: {
     disabled: @disabled
   },

data/app/components/lookbook/text_button/component.rb

@@ -1,6 +1,6 @@
 module Lookbook
   class TextButton::Component < Lookbook::BaseComponent
-    renders_many :icons, Icon::Component
+    renders_many :icons, Lookbook::Icon::Component
 
     ICON_SIZES = {
       xs: 3,

data/app/components/lookbook/viewport/component.html.erb

@@ -28,17 +28,17 @@
       <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
         class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
-        :class="{ 'pointer-events-none': reflowing }"
+        x-bind:class="{ 'pointer-events-none': reflowing }"
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"
         frameborder="0"
-        @load="$dispatch('viewport:loaded', {viewport: this})"
+        x-on:load="$dispatch('viewport:loaded', {viewport: this})"
         title="viewport"></iframe>
         <% if @resize_width %>
           <div
             class="resize-handle border-r border-t border-lookbook-divider cursor-[col-resize] <%= "border-b" unless @resize_height %>"
-            @pointerdown="onResizeWidthStart"
-            @dblclick="toggleFullWidth">
+            x-on:pointerdown="onResizeWidthStart"
+            x-on:dblclick="toggleFullWidth">
             <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -47,8 +47,8 @@
         <% if @resize_height %>
           <div
             class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
-            @pointerdown="onResizeHeightStart"
-            @dblclick="toggleFullHeight">
+            x-on:pointerdown="onResizeHeightStart"
+            x-on:dblclick="toggleFullHeight">
             <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>
@@ -57,8 +57,8 @@
         <% if @resize_height && @resize_width %>
           <div
             class="resize-handle border-r border-b border-lookbook-divider cursor-[nwse-resize]"
-            @pointerdown="onResizeStart"
-            @dblclick="toggleFullSize">
+            x-on:pointerdown="onResizeStart"
+            x-on:dblclick="toggleFullSize">
             <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
               <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
             </svg>

data/app/views/layouts/lookbook/application.html.erb

@@ -3,10 +3,10 @@
     id="app"
     x-data="app"
     x-cloak
-    @popstate.window="handleNavigation"
-    @click.document="hijax"
-    @navigation:start="closeMobileSidebar"
-    @dom:update-complete.window="Lookbook.initEmbeds()"
+    x-on:popstate.window="handleNavigation"
+    x-on:click.document="hijax"
+    x-on:navigation:start="closeMobileSidebar"
+    x-on:dom:update-complete.window="Lookbook.initEmbeds()"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
     <%= render "lookbook/partials/user_styles" %>
@@ -29,7 +29,7 @@
             'translate-x-full': $store.layout.mobile && sidebarHidden,
             '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-[1001] border-l border-lookbook-divider': $store.layout.mobile
           }",
-          "@click.outside": "closeMobileSidebar",
+          "x-on:click.outside": "closeMobileSidebar",
           cloak: true do %>
 
           <%= lookbook_render :split_layout,
@@ -50,7 +50,7 @@
                       <%= lookbook_render :button_group, size: :xs do |group| %>
                         <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+                          "x-on:click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -73,7 +73,7 @@
                       <%= lookbook_render :button_group, size: :xs do |group| %>
                         <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+                          "x-on:click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -93,7 +93,7 @@
       </div>
     <% end %>
     
-    <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
+    <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" x-bind:class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
 
     <% if content_for? :dropdowns %>
       <div class="hidden">

data/app/views/layouts/lookbook/embed.html.erb

@@ -3,8 +3,8 @@
     id="app"
     x-data="app"
     x-cloak
-    @popstate.window="handleNavigation"
-    @click.document="hijax"
+    x-on:popstate.window="handleNavigation"
+    x-on:click.document="hijax"
     class="overflow-hidden">
     
     <%= render "lookbook/partials/user_styles" %>

data/app/views/lookbook/inspector/inputs/_color.html.erb

@@ -1,6 +1,6 @@
 <%= text_field_tag(name, value,
   **input_options,
   type: "color",
-  "@change.stop": "",
-  "@blur": "value = $el.value",
+  "x-on:change.stop": "",
+  "x-on:blur": "value = $el.value",
 ) %>

data/app/views/lookbook/inspector/inputs/_text_two_step.html.erb

@@ -1,12 +1,12 @@
 <div x-data="{changed: false, applyChange(){ this.value = this.$refs.input.value; this.changed = false; }}">
 
-  <div @change.stop="changed = ($event.target.value !== value)" class="flex items-center gap-2">
+  <div x-on:change.stop="changed = ($event.target.value !== value)" class="flex items-center gap-2">
     <%= text_field_tag(name, value,
       **input_options,
       type: input,
       class: "flex-grow",
       "x-ref": "input",
-      "@keydown.enter.stop": "applyChange"
+      "x-on:keydown.enter.stop": "applyChange"
     ) %>
 
     <%= lookbook_render :button,
@@ -14,6 +14,6 @@
       tooltip: "Apply changes",
       class: "flex-none !bg-lookbook-button-bg hover:!bg-lookbook-button-bg-hover rounded-md !text-lookbook-button-text",
       "x-show": "changed",
-      "@click": "applyChange" %>
+      "x-on:click": "applyChange" %>
   </div>
 </div>

data/app/views/lookbook/inspector/inputs/_toggle.html.erb

@@ -15,6 +15,6 @@ span_classes = [
   class: class_names(button_classes),
   role: "switch",
   type: "button",
-  "@click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
+  "x-on:click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
   <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
 <% end %>

data/app/views/lookbook/inspector/panels/_output.html.erb

@@ -1,7 +1,7 @@
 <%= lookbook_render :code, line_numbers: true, full_height: true do -%>
   <% if scenarios.many? -%>
-    <% scenarios.each do |scenario| -%><%== "<!-- #{scenario.label} -->\n#{scenario.output}\n\n" -%><% end %>
+    <% scenarios.each do |scenario| -%><%== "<!-- #{scenario.label} -->\n#{scenario.beautified_output}\n\n" -%><% end %>
   <%- else -%>
-    <%== scenarios.first.output -%>
+    <%== scenarios.first.beautified_output -%>
   <%- end %>
 <% end %>

data/app/views/lookbook/inspector/show.html.erb

@@ -55,7 +55,7 @@
             <% group.with_button id: "refresh-preview-button",
               icon: :refresh_cw,
               tooltip: "Refresh preview",
-              "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
+              "x-on:click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
             <% group.with_button id: "open-preview-button",
               icon: :external_link,
@@ -66,7 +66,7 @@
             <% group.with_button id: "show-drawer-button",
               icon: "sidebar",
               tooltip: "Show drawer",
-              "@click": "$store.inspector.drawer.hidden = false",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
               "x-show": "$store.inspector.drawer.hidden && vertical",
               cloak: true %>
@@ -74,7 +74,7 @@
             <% group.with_button id: "show-drawer-button",
               icon: "credit-card",
               tooltip: "Show drawer",
-              "@click": "$store.inspector.drawer.hidden = false",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
               "x-show": "$store.inspector.drawer.hidden && !vertical",
               cloak: true %>
@@ -131,7 +131,7 @@
             <% group.with_button id: "drawer-to-right-button",
               icon: :sidebar_open,
               tooltip: "Pin drawer on right",
-              "@click": "switchOrientation",
+              "x-on:click": "switchOrientation",
               "x-show": "horizontal",
               ":class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
               cloak: true %>
@@ -139,7 +139,7 @@
             <% group.with_button id: "drawer-to-bottom-button",
               icon: :sidebar_open,
               tooltip: "Pin drawer on bottom",
-              "@click": "switchOrientation",
+              "x-on:click": "switchOrientation",
               "x-show": "vertical",
               class: "rotate-90",
               cloak: true %>
@@ -147,7 +147,7 @@
             <% group.with_button id: "hide-drawer-button",
               icon: :x_circle,
               tooltip: "Hide drawer",
-              "@click": "$store.inspector.drawer.hidden = true",
+              "x-on:click": "$store.inspector.drawer.hidden = true",
               cloak: true %>
           <% end %>
         <% end %>

data/lib/lookbook/entities/rendered_scenario_entity.rb

@@ -23,8 +23,13 @@ module Lookbook
     # HTML output of the rendered scenario.
     #
     # @return [String] Rendered output
-    def output
-      @_output ||= CodeBeautifier.call(@output)
+    attr_reader :output
+
+    # 'Beautified' HTML output of the rendered scenario.
+    #
+    # @return [String] Rendered output
+    def beautified_output
+      @_beautified_output ||= CodeBeautifier.call(output)
     end
 
     # @api private

data/lib/lookbook/file_watcher.rb

@@ -2,12 +2,6 @@ module Lookbook
   class FileWatcher
     class << self
       def new(...)
-        if evented?
-          Lookbook.logger.debug "Using `EventedFileUpdateChecker` for file watching"
-        else
-          Lookbook.logger.debug "The 'listen' gem was not found. Using `FileUpdateChecker` for file watching"
-        end
-
         file_watcher.new(...)
       end
 

data/lib/lookbook/services/tags/tag_options_parser.rb

@@ -9,19 +9,28 @@ module Lookbook
 
     def initialize(input, resolver_opts = {})
       @input = input.to_s.strip
-      @resolver_opts = resolver_opts
+      @resolve = resolver_opts.fetch(:resolve, true)
+      @resolver_opts = resolver_opts.except(:resolve)
       @fallback = resolver_opts.fetch(:fallback, {})
     end
 
     def call
       options_string, remaining_text = parse_input(@input)
-      resolved_options = resolver(options_string).call(options_string, **@resolver_opts)
-      options = prepare_options(resolved_options)
-      [options, remaining_text]
+      if resolve?
+        resolved_options = resolver(options_string).call(options_string, **@resolver_opts)
+        options = prepare_options(resolved_options)
+        [options, remaining_text]
+      else
+        [options_string, remaining_text]
+      end
     end
 
     protected
 
+    def resolve?
+      !!@resolve
+    end
+
     def resolver(options_string)
       if options_string.present?
         handler = RESOLVERS.find { |r| r.resolveable?(options_string) }

data/lib/lookbook/tags/param_tag.rb

@@ -52,9 +52,7 @@ module Lookbook
       end
 
       # Parse and remove any options from string
-      text_with_options = text
-      _, text = parse_options(text)
-      options_str = text_with_options.sub(text, "")
+      options_str, text = parse_options(text, resolve: false)
 
       # Parse description, if provided
       text.match(DESCRIPTION_MATCHER) do |match_data|
@@ -64,7 +62,12 @@ module Lookbook
 
       input, rest = text.split(" ", 2)
 
-      {input: input, value_type: value_type, description: description, rest: [rest, options_str].compact.join(" ")}
+      {
+        input: input,
+        value_type: value_type,
+        description: description,
+        rest: [rest, options_str].compact.join(" ")
+      }
     end
   end
 end

data/lib/lookbook/tags/yard_tag.rb

@@ -78,12 +78,13 @@ module Lookbook
       host_code_object&.path&.constantize
     end
 
-    def parse_options(input)
+    def parse_options(input, resolve: true)
       if self.class.supports_options?
         TagOptionsParser.call(input, {
           file: host_file,
           base_dir: host_file&.dirname,
-          eval_context: host_class_instance
+          eval_context: host_class_instance,
+          resolve: resolve
         })
       else
         [{}, @text]

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.2"
+  VERSION = "2.0.4"
 end