lookbook 1.4.5 → 1.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bda485cc3ea6b7d85317d466952627d1f72dd724aba79140cfdc604512a5f4bc
-  data.tar.gz: 6be6a4c31c8f31851083d6f822dd9751ffda7fae471a1ed1fce80246526c3bb2
+  metadata.gz: 7f540f127ea326803394a4fb256d8ec3f27a9f7564f003d075b5e3b70ccd0ff2
+  data.tar.gz: 7987f3e5caaeb9cc8ebd3e0a38fc3b2735ba3c894207320b612e15075441ac5e
 SHA512:
-  metadata.gz: f1b4af27b5664136e08f65cbcfede40f9a4963d909eab70848376f6e236197ff51b4dd09c95dea2ff95ee5617f8d9ebd3906638efc99b3c09ce0d91b55c31097
-  data.tar.gz: 71d7191d3de4543b5068a279462182bb87908a5182667b158aa8a78ced51443696537b8a915f94d9405268d36fd49502ba37d1893737820200fb97827030e413
+  metadata.gz: 4984fbeb06a7ba811cb45a0253fb9391f238c1fbe48e8cb4d2f8b32166e5551c08a9df6116b737423af6ecdd90d13bd91317189d962fc174b32e16b848f21f26
+  data.tar.gz: aadc14cb2bc965a03fbed65fb6824b898449567fc09574974dd4edde3c317fe52ef5ba989b9039f291a34c6ad0673471f22c9b2ce5869567a3e684d78fbdfbbe

data/README.md

@@ -1,5 +1,5 @@
 <br>
-<img src=".github/assets/lookbook_logo.svg" width="180"> 
+<img alt="Lookbook Logo" src=".github/assets/lookbook_logo.svg" width="180"> 
 
 A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
@@ -25,7 +25,7 @@ A tool to help browse, develop, test & document [ViewComponents](https://viewcom
 
 ## Development
 
-Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for it's UI.
+Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.
 
 This repository contains:
 
@@ -78,9 +78,9 @@ Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and conti
 <br>
 <br>
 <a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
+  <img alt="Lookbook contributors" src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
 </a>
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -1,7 +1,7 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
     <%= lookbook_render :button, icon: :settings, tooltip: "Display options" do |button| %>
-      <% button.dropdown do %>
+      <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>
         </div>

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

@@ -2,17 +2,17 @@
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
   <%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
-    <% toolbar.section padded: true do %>
+    <% toolbar.with_section padded: true do %>
       <h3>
         <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
-    <% toolbar.section align: :right, divide: :left do %>
+    <% toolbar.with_section align: :right, divide: :left do %>
       <%= lookbook_render :button_group do |group| %>
-        <% group.button icon: :eye,
+        <% group.with_button icon: :eye,
           href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
-        <% group.button icon: :external_link,
+        <% group.with_button icon: :external_link,
           href: lookbook_preview_path(@target.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>

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

@@ -1,6 +1,6 @@
 <%= render_component_tag :header do %>
   <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
-    <% toolbar.section padded: true do %>
+    <% toolbar.with_section padded: true do %>
       <% if branding.present? %>
         <a
           <% if landing_path %>href="<%= landing_path %>"<% end %>    
@@ -10,7 +10,7 @@
       <% end %>
     <% end %>
 
-    <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
+    <% toolbar.with_section padded: false, align: :right, class: "flex items-center" do %>
 
       <div x-show="loading" x-cloak>
         <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -21,23 +21,23 @@
 
       <%= lookbook_render :button_group do |group| %>
         <% if @debug_menu %>
-          <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
+          <% group.with_button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",
               repo_url: "https://github.com/ViewComponent/lookbook" do %>
               <%= helpers.pretty_json(Lookbook.debug_data) %>
             <% end %>
-            <% button.dropdown({}).with_content(menu) %>
+            <% button.with_dropdown({}).with_content(menu) %>
           <% end %>
         <% end %>
 
-        <% group.button icon: :menu,
+        <% group.with_button icon: :menu,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
 
-        <% group.button icon: :x,
+        <% group.with_button icon: :x,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",
           "@keydown.esc.window": "closeMobileSidebar",

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

@@ -5,7 +5,7 @@ module Lookbook
       attrs[:name] ||= "tab-#{@tab_counter}"
       attrs[:position] ||= @tab_counter
       attrs[:theme] ||= @theme
-      dropdown_tab(**attrs)
+      with_dropdown_tab(**attrs)
       Lookbook::Tabs::Tab::Component.new(**attrs)
     end
 

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

@@ -32,7 +32,8 @@
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"
         frameborder="0"
-        @load="$dispatch('viewport:loaded', {viewport: this})"></iframe>
+        @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 %>"

data/app/controllers/concerns/lookbook/targetable_concern.rb

@@ -44,14 +44,15 @@ module Lookbook
           display_params = SearchParamParser.call(params[:_display])
           display_params.each do |name, value|
             if @dynamic_display_options.key?(name)
-              cookies["lookbook-display-#{name}"] = value
+              cookies["lookbook-display-#{name}"] = value.is_a?(Array) ? value[1] : value
             end
           end
         end
 
         @dynamic_display_options.each do |name, opts|
           choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
-          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", choices.first)
+          value = choices.first.is_a?(Array) ? choices.first[1] : choices.first
+          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", value)
         end
 
         unless params[:_display]

data/app/controllers/lookbook/application_controller.rb

@@ -17,6 +17,7 @@ module Lookbook
 
     def index
       landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
+
       if landing.present?
         redirect_to lookbook_page_path(landing.path)
       else

data/app/controllers/lookbook/previews_controller.rb

@@ -3,6 +3,8 @@ module Lookbook
     include TargetableConcern
     include WithPreviewControllerConcern
 
+    before_action { response.headers.delete("X-Frame-Options") }
+
     layout "lookbook/inspector"
     helper Lookbook::PreviewHelper
 
@@ -10,6 +12,31 @@ module Lookbook
       "lookbook/previews"
     end
 
+    def index
+      respond_to do |format|
+        format.json do
+          render(
+            json: Lookbook.previews.map do |preview|
+              {
+                name: preview.name,
+                examples: preview.examples.map { |example|
+                  case example
+                  when Lookbook::PreviewExample
+                    example_json(example)
+                  when Lookbook::PreviewGroup
+                    {
+                      name: example.name,
+                      examples: example.examples.map { |ex| example_json(ex) }
+                    }
+                  end
+                }
+              }
+            end
+          )
+        end
+      end
+    end
+
     def show
       if @target
         begin
@@ -28,5 +55,16 @@ module Lookbook
         show_404 layout: "lookbook/standalone"
       end
     end
+
+    private
+
+    def example_json(example)
+      {
+        inspect_path: example.url_path,
+        name: example.name,
+        preview_path: example.preview_path,
+        lookup_path: example.lookup_path
+      }
+    end
   end
 end

data/app/helpers/lookbook/page_helper.rb

@@ -1,7 +1,5 @@
 module Lookbook
   module PageHelper
-    include Utils
-
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find_by_id(id)
       if page.present?

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

@@ -5,7 +5,7 @@
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
+      <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
         ":class": "{
           'transition': $store.layout.mobile,
           'translate-x-full': $store.layout.mobile && sidebarHidden,
@@ -13,47 +13,47 @@
         }",
         "@click.outside": "closeMobileSidebar",
         cloak: true do %>
-        <% cache do %>
+        <% cache Lookbook::Engine.last_changed do %>
           <%= lookbook_render :split_layout,
             alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
             style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
             <% if @previews.any? %>
-              <% layout.pane class: "overflow-hidden" do %>
+              <% layout.with_pane class: "overflow-hidden" do %>
                 <%= lookbook_render :nav,
                   id: "previews-nav",
                   tree: @previews.to_tree,
                   alpine_data: "$store.nav.previews" do |nav| %>
-                  <%= nav.toolbar do |toolbar| %>
-                    <% toolbar.section padded: true do %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
                       <h4 class="pt-1">Previews</h4>
                     <% end %>
-                    <% toolbar.section align: :right, padded: false do %>
+                    <% toolbar.with_section align: :right, padded: false do %>
                       <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.button icon: :minus_square,
+                        <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
                           "@click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
-                  <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
             <% end %>
 
             <% if @pages.any? %>
-              <% layout.pane class: "overflow-hidden" do %>
+              <% layout.with_pane class: "overflow-hidden" do %>
                 <%= lookbook_render :nav,
                   id: "pages-nav",
                   tree: @pages.to_tree,
                   alpine_data: "$store.nav.pages" do |nav| %>
-                  <%= nav.toolbar do |toolbar| %>
-                    <% toolbar.section padded: true do %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
                       <h4 class="pt-1">Pages</h4>
                     <% end %>
-                    <% toolbar.section align: :right, padded: false do %>
+                    <% toolbar.with_section align: :right, padded: false do %>
                       <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.button icon: :minus_square,
+                        <% group.with_button icon: :minus_square,
                           tooltip: "Collapse all",
                           "@click": "closeAll" %>
                       <% end %>
@@ -66,7 +66,7 @@
         <% end %>
       <% end %>
 
-      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+      <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
         <%= content_for?(:main) ? yield(:main) : yield %>
       <% end %>
     <% end %>

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

@@ -15,7 +15,7 @@
     <% end %>
 
     <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.branding { @config.project_name } %>
+      <% header.with_branding { @config.project_name } %>
     <% end %>
 
     <%= content_for?(:shell) ? yield(:shell) : yield %>

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

@@ -8,7 +8,7 @@
   <div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
     <%= lookbook_render "params/editor" do |editor| %>
       <% @params.each do |param| %>
-        <% editor.field param: param %>
+        <% editor.with_field param: param %>
       <% end %>
     <% end %>
   </div>

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

@@ -5,14 +5,14 @@
     "preview-target": @target.id
   } do |layout| %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden",
+  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
     "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
-      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
         <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
           <%= @main_panels.each do |panel| %>
-            <% tabs.tab name: panel.name,
+            <% tabs.with_tab name: panel.name,
               label: panel.label,
               hotkey: panel.hotkey,
               disabled: panel.disabled %>
@@ -20,42 +20,42 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right, class: "flex-none" do %>
+      <% toolbar.with_section align: :right, class: "flex-none" do %>
         <% if @dynamic_display_options.any? %>
           <%= lookbook_render "display_options/editor" do |editor| %>
             <% @dynamic_display_options.each do |key, opts| %>
-              <% editor.field name: key, opts: opts, value: @static_display_options[key] %>
+              <% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
             <% end %>
           <% end %>
         <% end %>
       <% end %>
 
-      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
-          <% group.button icon: :link,
+          <% group.with_button icon: :link,
             tooltip: "Copy preview URL",
             copy: true do %>
             <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
           <% end %>
 
           <% if @pages.any? %>
-            <% group.button icon: :code,
+            <% group.with_button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>
                 &lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
-          <% group.button icon: :refresh_cw,
+          <% group.with_button icon: :refresh_cw,
             tooltip: "Refresh preview",
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
-          <% group.button icon: :external_link,
+          <% group.with_button icon: :external_link,
             href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
-          <% group.button icon: "vertical ? 'sidebar' : 'credit-card'",
+          <% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
             tooltip: "Show drawer",
             "@click": "$store.inspector.drawer.hidden = false",
             class: "rotate-180",
@@ -68,7 +68,7 @@
     <div class="h-full relative overflow-auto">
       <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% tabs.with_panel name: panel.name do %>
             <%= lookbook_render :inspector_panel, name: panel.name do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>
@@ -78,14 +78,14 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
+  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
-      <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
+      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
         <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
           <%= @drawer_panels.each do |panel| %>
-            <% tabs.tab name: panel.name,
+            <% tabs.with_tab name: panel.name,
               label: panel.label,
               hotkey: panel.hotkey,
               disabled: panel.disabled %>
@@ -93,10 +93,10 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section align: :right,  class: "flex-none relative z-10" do %>
+      <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
           <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
-            <% group.button icon: :copy,
+            <% group.with_button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
               "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
@@ -107,27 +107,27 @@
         <% end %>
       <% end %>
 
-      <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
+      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
         <%= lookbook_render :button_group do |group| %>
 
-          <% group.button icon: :corner_up_right,
+          <% group.with_button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
             "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
 
-          <% group.button icon: :corner_up_right,
+          <% group.with_button icon: :corner_up_right,
             "x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
             disabled: true,
             cloak: true %>
 
-          <% group.button icon: :corner_left_down,
+          <% group.with_button icon: :corner_left_down,
             tooltip: "Move drawer to bottom",
             "@click": "switchOrientation",
             "x-show": "vertical",
             cloak: true %>
 
-          <% group.button icon: :x_circle,
+          <% group.with_button icon: :x_circle,
             tooltip: "Hide drawer",
             "@click": "$store.inspector.drawer.hidden = true",
             cloak: true %>
@@ -138,7 +138,7 @@
     <div class="h-full overflow-auto">
       <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel name: panel.name do %>
+          <% tabs.with_panel name: panel.name do %>
             <%= lookbook_render :inspector_panel, name: panel.name do %>
               <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
             <% end %>

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

@@ -13,7 +13,7 @@
     <% if @page.sections.any? %>
       <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
         <% @page.sections.each do |section| %>
-          <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
+          <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
             <%= page_controller.render_page(section) %>
           <% end %>
         <% end %>

data/app/views/lookbook/preview.html.erb

@@ -2,7 +2,7 @@
   <%# Render a group of examples %>
   <% examples.each do |example| %>
     <div style="margin-bottom: 30px !important; display: block !important;">
-      <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
+      <h6 style="all: unset; display: block; color: #555; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
         <%= example.label %>
       </h6>
       <%= example.output %>

data/config/routes.rb

@@ -8,6 +8,7 @@ Lookbook::Engine.routes.draw do
   get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
   get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
 
+  get "/previews", to: "previews#index", as: :lookbook_previews
   get "/preview/*path", to: "previews#show", as: :lookbook_preview
   get "/inspect/*path", to: "inspector#show", as: :lookbook_inspect
 

data/lib/lookbook/engine.rb

@@ -43,6 +43,7 @@ module Lookbook
     initializer "lookbook.file_watcher.pages" do
       file_watcher.watch(opts.page_paths, opts.page_extensions) do |changes|
         Engine.pages.load(Engine.page_paths)
+        Engine.mark_changed
         Engine.websocket.broadcast(:reload)
         run_hooks(:after_change, changes)
       end
@@ -51,6 +52,7 @@ module Lookbook
     initializer "lookbook.parser.previews_load_callback" do
       parser.after_parse do |code_objects|
         Engine.previews.load(code_objects.all(:class))
+        Engine.mark_changed
         Engine.websocket.broadcast(:reload)
       end
     end
@@ -168,6 +170,14 @@ module Lookbook
         @_previews ||= PreviewCollection.new
       end
 
+      def mark_changed
+        @_last_changed = nil
+      end
+
+      def last_changed
+        @_last_changed ||= (Time.now.to_f * 1000).to_i
+      end
+
       attr_reader :preview_controller
     end
 

data/lib/lookbook/entities/preview_example.rb

@@ -57,6 +57,10 @@ module Lookbook
       lookbook_inspect_path(path)
     end
 
+    def preview_path
+      lookbook_preview_path(path)
+    end
+
     def type
       :example
     end

data/lib/lookbook/entities/preview_group.rb

@@ -39,6 +39,10 @@ module Lookbook
       lookbook_inspect_path(path)
     end
 
+    def preview_path
+      lookbook_preview_path(path)
+    end
+
     def type
       :group
     end

data/lib/lookbook/error.rb

@@ -80,7 +80,7 @@ module Lookbook
       else
         @file_path.presence || nil
       end
-      path.nil? ? nil : path.to_s.delete_prefix("#{Rails.root}/")
+      path&.to_s&.delete_prefix("#{Rails.root}/")
     end
 
     def line_number

data/lib/lookbook/services/markdown_renderer.rb

@@ -18,11 +18,7 @@ module Lookbook
     class LookbookMarkdownRenderer < Redcarpet::Render::HTML
       def block_code(code, language = "ruby")
         line_numbers = language.to_s.end_with? "-numbered"
-        ApplicationController.render(Lookbook::Code::Component.new(**{
-          source: code,
-          language: language.to_s.chomp("-numbered"),
-          line_numbers: line_numbers
-        }), layout: nil)
+        ApplicationController.render(Lookbook::Code::Component.new(source: code, language: language.to_s.chomp("-numbered"), line_numbers: line_numbers), layout: nil)
       end
     end
   end

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.4.5"
+  VERSION = "1.5.3"
 end