lookbook 0.7.1 → 0.7.2.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 46bd65cde7621bed3438857629f7d890a88fa39a44bd4c086b62aa72b8574a7e
-  data.tar.gz: ccab74ddf91a4244b9bc24b847a412ac2f4442f07b2af65a720f1b3ad6b14d3e
+  metadata.gz: 990948c73a9d1c658a44b0ae4ac88c2c850fa92dfe9e40551b4634311113fe87
+  data.tar.gz: a203b8a19a1b9dc3d3ec91af757b1bb75edd84fed009e329f720b7e5891f737e
 SHA512:
-  metadata.gz: 6e1bda8b0cd0116303f9474982366efbbecdd39fcca4bc43a352edb6477b2cb5720c9e0837eeabb6d6e1f1906b63be656d91e684af12b76eb82023b765ac1494
-  data.tar.gz: 55d0b171d6e81b9cecb8952e293be88c6a412d7bb9c00617a0989297a89778f186f09744806701f9c191907a2d33bcc8cf68854932a5cfdf9d1d6011d3d1b00d
+  metadata.gz: bb588034ce795c97cccffbf1d7de75bbce28895009975576e8d2bcf50a3e4878771fe38cba600aa6986d59b3e3579023a2782a8dc0cc4bd349376a8bd67978b5
+  data.tar.gz: 3485c0882de17d7a3c63a27872a79615043d7c03651e555394f53accaed865c36b45e43f086deb23dd8d0a4118049ac4cbd936943765afb619e0a9e413287d7e

data/app/assets/lookbook/css/app.css

@@ -93,7 +93,7 @@
   .code.numbered:before {
     content: "";
     left: 2.7em;
-    @apply absolute top-0 bottom-0 border-r border-gray-200;
+    @apply absolute top-0 bottom-0 border-r border-gray-200 z-10;
   }
 
   .code.numbered .line {
@@ -115,8 +115,25 @@
     @apply flex-none pr-4;
   }
 
+  .code.focussed .line:not(.highlighted-line) *,
+  .code.focussed .line:not(.highlighted-line) .line-content * {
+    @apply !text-gray-700 !text-opacity-40;
+  }
+
+  .code.focussed .line:not(.highlighted-line) .line-number {
+    @apply !opacity-70;
+  }
+
+  .code.focussed .line.highlighted-line {
+    @apply bg-yellow-50;
+  }
+
+  .code.focussed .line.highlighted-line .line-number {
+    @apply text-gray-900;
+  }
+
   .prose .code {
-    @apply !bg-white border border-gray-300 text-gray-600 my-8 text-sm rounded-md py-4 overflow-auto max-w-3xl w-full mx-auto;
+    @apply !bg-white border border-gray-300 text-gray-600 my-8 rounded-md py-4 text-sm overflow-auto max-w-3xl w-full mx-auto;
   }
 
   .prose .code:not(.numbered) .line {

data/app/controllers/lookbook/pages_controller.rb

@@ -18,12 +18,24 @@ module Lookbook
       @pages = Lookbook.pages
       @page = @pages.find_by_path(params[:path])
       if @page
-        @page_content = page_controller.render_page(@page)
-        @next_page = @pages.find_next(@page)
-        @previous_page = @pages.find_previous(@page)
-        @title = @page.title
+        if @page.errors.any?
+          render "lookbook/error", locals: {error: @page.errors.first}
+        else
+          begin
+            @page_content = page_controller.render_page(@page)
+            @next_page = @pages.find_next(@page)
+            @previous_page = @pages.find_previous(@page)
+            @title = @page.title
+          rescue => exception
+            render "lookbook/error", locals: {
+              error: Lookbook::Error.new(exception, {
+                file_path: @page.full_path,
+                source_code: @page.content
+              })
+            }
+          end
+        end
       else
-        @title = "Not found"
         render "not_found"
       end
     end

data/app/controllers/lookbook/previews_controller.rb

@@ -1,12 +1,5 @@
 module Lookbook
   class PreviewsController < ApplicationController
-    EXCEPTIONS = [
-      ViewComponent::PreviewTemplateError,
-      ViewComponent::ComponentError,
-      ViewComponent::TemplateError,
-      ActionView::Template::Error
-    ]
-
     def self.controller_path
       "lookbook/previews"
     end
@@ -17,7 +10,14 @@ module Lookbook
     def preview
       if @example
         set_params
-        render html: render_examples(examples_data)
+        begin
+          render html: render_examples(examples_data)
+        rescue => exception
+          render_in_layout "lookbook/error",
+            layout: "lookbook/basic",
+            error: prettify_error(exception),
+            disable_header: true
+        end
       else
         render_in_layout "not_found"
       end
@@ -30,8 +30,8 @@ module Lookbook
           @examples = examples_data
           @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
           @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
-        rescue *EXCEPTIONS
-          render_in_layout "error"
+        rescue => exception
+          render_in_layout "lookbook/error", error: prettify_error(exception)
         end
       else
         render_in_layout "not_found"
@@ -152,8 +152,31 @@ module Lookbook
       @preview_controller ||= controller
     end
 
-    def render_in_layout(path)
-      render "not_found", layout: params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"
+    def render_in_layout(path, layout: nil, **locals)
+      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
+    end
+
+    def prettify_error(exception)
+      error_params = if exception.is_a?(ViewComponent::PreviewTemplateError)
+        {
+          file_path: @preview&.full_path,
+          line_number: 0,
+          source_code: @example&.source
+        }
+      elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
+        message_parts = exception.message.split("\n").first.split
+        component_class = message_parts.first.constantize
+        naughty_method = message_parts.last.delete("#").delete("`").delete(".")
+        p naughty_method
+        method = component_class.instance_method(naughty_method.to_sym)
+        if method
+          {
+            file_path: method.source_location.first,
+            line_number: method.source_location[1]
+          }
+        end
+      end
+      Lookbook::Error.new(exception, error_params || {})
     end
   end
 end

data/app/helpers/lookbook/component_helper.rb

@@ -9,6 +9,10 @@ module Lookbook
       render_component "icon", name: name, size: size, **attrs
     end
 
+    def code(language = "ruby", **opts, &block)
+      render_component "code", {language: language, **opts}, &block
+    end
+
     if Rails.version.to_f < 6.1
       def class_names(*args)
         tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq

data/app/helpers/lookbook/page_helper.rb

@@ -7,10 +7,6 @@ module Lookbook
       lookbook.page_path page.lookup_path
     end
 
-    def code(language = "ruby", line_numbers: false, &block)
-      render_component "code", language: language, line_numbers: line_numbers, &block
-    end
-
     def embed(*args, params: {}, type: :preview, **opts)
       return unless args.any?
 

data/app/views/lookbook/components/_code.html.erb

@@ -1,13 +1,17 @@
 <%
-line_numbers ||= false
 language ||= "html"
 wrap ||= nil;
 %>
 <% code ||= capture do %><%= yield %><% end %>
-<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %>"
+<% output = highlight(code, language, {
+  strip: defined?(strip) ? strip : true,
+  line_numbers: line_numbers ||= false,
+  highlight_lines: highlight_lines ||= [],
+  start_line: start_line ||= 0
+}) %>
+<div class="code not-prose <%= "numbered" if line_numbers %> <%= classes ||= "" %> <%= "focussed" if highlight_lines.any? %>"
   x-data="code"
   :class="{'wrapped': wrap}"
-  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>
->
-  <pre><code class="highlight"><%= highlight(code.strip, language, line_numbers: line_numbers) %></code></pre>
+  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>>
+  <pre><code class="highlight"><%= output %></code></pre>
 </div>

data/app/views/lookbook/components/_errors.html.erb

@@ -0,0 +1,13 @@
+<div class="bg-red-50 w-full overflow-auto h-full">
+  <ul class="text-sm divide-y divide-red-200">
+    <% errors.each do |error| %>
+      <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+      <li class="px-4 py-3">
+        <h4 class="break-all leading-tight">
+          <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+        </h4>
+        <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/lookbook/components/_preview.html.erb

@@ -22,7 +22,7 @@
     </div>
     <div class="flex items-stretch h-full ml-auto space-x-3">
       <div
-        class="flex items-center text-xs font-monospace text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
+        class="flex items-center text-xs font-mono text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
         :class="{'opacity-100': $store.inspector.preview.resizing}"
         x-show="isActivePreviewPanel('preview')">
         <span x-text="`${preview.width}px`"></span>

data/app/views/lookbook/components/_sidebar.html.erb

@@ -1,7 +1,7 @@
 <div
   x-data="sidebar"
   @page:morphed.window="setActiveNavItem"
-  class="h-full bg-gray-100 overflow-hidden flex flex-col"
+  class="h-full bg-gray-100 overflow-hidden flex flex-col relative"
   x-show="$store.sidebar.open"
   x-cloak>
 
@@ -14,8 +14,8 @@
   
   <% if feature_enabled?(:pages) && Lookbook.pages.any? %>
     <div
-      class="grid overflow-hidden"
-      :style="`grid-template-rows: ${$store.sidebar.panelSplits[0] || 1}fr 1px ${$store.sidebar.panelSplits[1] || 1}fr; height: calc(100vh - 40px)`"
+      class="grid overflow-hidden flex-grow"
+      :style="`grid-template-rows: ${$store.sidebar.panelSplits[0] || 1}fr 1px ${$store.sidebar.panelSplits[1] || 1}fr;`"
       x-ref="sidebarPanels">
       <div class="flex flex-col overflow-hidden">
         <div class="flex items-center flex-none border-b border-gray-300 h-10 bg-white relative px-4">   
@@ -52,4 +52,18 @@
     </div>
   <% end %>
 
+  <% if Lookbook::Preview.errors.any? %>
+    <div class="flex-none" x-ref="preview-errors" id="preview-errors">
+      <div class="flex items-center border-b border-t border-gray-300 h-10 bg-white px-4">   
+        <h2 class="flex items-center flex-none">
+          <%= icon "alert-triangle", size: 4, class: "text-red-700" %>
+          <span class="ml-2">Preview load errors</span>
+        </h2>
+      </div>
+      <div class="h-full max-h-[300px] overflow-hidden">
+        <%= component "errors", errors: Lookbook::Preview.errors %>
+      </div>
+    </div>
+  <% end %>
+
 </div>

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

@@ -0,0 +1,46 @@
+<%
+error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
+@title = error.title
+disable_header ||= false
+%>
+<%= component "header" unless disable_header %>
+<div class="h-full w-full bg-red-50 flex flex-col border-red-300" id="error-<%= Time.now %>">
+
+  <header class="mx-8  pt-8 mb-8 flex-none">
+    <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
+  </header>
+  
+  <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
+    <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
+  </div>
+
+  <% if error.file_name %>
+    <div class="text-gray-800 text-sm mx-8 mb-2 font-mono flex-none <%= "pl-2" if error.source_code %>">
+      <span><%= error.file_name %></span>
+      <% if error.line_number %>
+        <span>[line <strong><%= error.line_number %></strong>]</span>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if error.source_code %>
+  <div class="prose max-w-full mx-8">
+      <%= code error.file_lang, highlight_lines: [error.source_code[:highlighted_line]],
+        line_numbers: true,
+        start_line: error.source_code[:start_line],
+        strip: false,
+        class: "py-4 !max-w-full !border-red-200 !mt-1" do %><%= h(error.source_code[:code]) %><% end %>
+  </div>
+  <% end %>
+
+  <h3 class="font-bold mb-4 px-8 mt-8 flex-none">Full stack trace</h3>
+  <div class="text-xs font-mono flex-grow h-full overflow-hidden">
+    <div class="h-full overflow-auto px-8 pb-10 text-gray-400 leading-relaxed">
+      <% error.backtrace.each do |line| %>
+        <div class="hover:text-gray-900 transition-colors duration-100">
+          <%= line %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/lib/lookbook/code_formatter.rb

@@ -5,7 +5,8 @@ module Lookbook
   module CodeFormatter
     class << self
       def highlight(source, language, opts = {})
-        source&.gsub!("&gt;", "<")&.gsub!("&lt;", ">")
+        source&.strip! unless opts[:strip] == false
+        source&.gsub!("&gt;", ">")&.gsub!("&lt;", "<")
         language ||= "ruby"
         formatter = Formatter.new(opts)
         lexer = Rouge::Lexer.find(language.to_s) || Rouge::Lexer.find("plaintext")
@@ -23,12 +24,14 @@ module Lookbook
   class Formatter < Rouge::Formatters::HTML
     def initialize(opts = {})
       @opts = opts
+      @highlight_lines = opts[:highlight_lines].to_a || []
+      @start_line = opts[:start_line] || 0
     end
 
     def stream(tokens, &block)
       token_lines(tokens).each_with_index do |line_tokens, i|
-        yield "<div class='line'>"
-        yield "<span class='line-number'>#{i}</span>" if @opts[:line_numbers]
+        yield "<div class='line #{"highlighted-line" if @highlight_lines.include?(i + 1)}'>"
+        yield "<span class='line-number'>#{@start_line + i}</span>" if @opts[:line_numbers]
         yield "<span class='line-content'>"
         line_tokens.each do |token, value|
           yield span(token, value)

data/lib/lookbook/engine.rb

@@ -78,22 +78,24 @@ module Lookbook
         config.lookbook.cable.logger ||= Rails.logger
       else
         config.lookbook.cable.logger = Lookbook::NullLogger.new
-        config.action_view.logger = Lookbook::NullLogger.new
       end
     end
 
     config.after_initialize do
-      Array(config.view_component.preview_paths).each do |preview_path|
-        Dir["#{preview_path}/**/*_preview.rb"].sort.each { |file| require_dependency file }
-      end
-
       @preview_listener = Listen.to(*config.lookbook.listen_paths, only: /\.(rb|html.*)$/) do |modified, added, removed|
-        parser.parse
+        if Lookbook::Preview.errors.any?
+          Lookbook::Preview.reload
+        end
+        begin
+          parser.parse
+        rescue
+        end
         if Lookbook::Engine.websocket
-          if (modified.any? || removed.any?) && added.none?
+          if modified.any? || removed.any? || added.none?
             Lookbook::Engine.websocket.broadcast("reload", {
               modified: modified,
-              removed: removed
+              removed: removed,
+              added: added
             })
           end
         end

data/lib/lookbook/error.rb

@@ -0,0 +1,121 @@
+module Lookbook
+  class Error < StandardError
+    delegate :full_message, :backtrace, :to_s, to: :target
+
+    LINES_AROUND = 3
+
+    def initialize(original = nil, title: nil, message: nil, file_path: nil, file_name: nil, line_number: nil, source_code: nil)
+      @original = original
+      @title = title
+      @message = message
+      @file_path = file_path
+      @file_name = file_name
+      @line_number = line_number
+      @source_code = source_code
+      super()
+    end
+
+    def source_code
+      lines = source_code_lines
+
+      if lines.present? && line_number.is_a?(Integer)
+        start_line = source_code_start_line(lines)
+        end_line = source_code_end_line(lines)
+        highlighted_line = source_code_highlighted_line(lines)
+
+        line_count = end_line - start_line
+        relevant_lines = lines.slice(start_line - 1, line_count + 1)
+        if relevant_lines.present?
+          empty_start_lines = 0
+          relevant_lines.each do |line|
+            break unless line.strip.empty?
+            empty_start_lines += 1
+          end
+
+          {
+            code: relevant_lines.join("\n").lstrip,
+            start_line: start_line - empty_start_lines,
+            end_line: end_line - empty_start_lines,
+            highlighted_line: highlighted_line - empty_start_lines
+          }
+        end
+
+      end
+    end
+
+    def source_code_lines
+      if file_path || @source_code
+        if @source_code
+          @source_code.split("\n")
+        else
+          full_path = Rails.root.join(file_path)
+          File.read(full_path).split("\n") if File.exist? full_path
+        end
+      end
+    end
+
+    def file_lang
+      lang = Lookbook::Lang.guess(file_path)
+      lang.present? ? lang[:name] : "plaintext"
+    end
+
+    def title
+      @title || target.class.to_s
+    end
+
+    def message
+      (@message || target.message).gsub("(<unknown>):", "").strip.upcase_first
+    end
+
+    def file_name
+      if @file_name == false
+        nil
+      else
+        @file_name || file_path
+      end
+    end
+
+    def file_path
+      path = if @file_path.nil?
+        parsed_backtrace[0][0] if parsed_backtrace.any?
+      else
+        @file_path.presence || nil
+      end
+      path.nil? ? nil : path.to_s.delete_prefix("#{Rails.root}/")
+    end
+
+    def line_number
+      number = if @line_number.nil?
+        parsed_backtrace[0][1] if parsed_backtrace.any?
+      else
+        @line_number.presence || nil
+      end
+      number.present? ? number.to_i : number
+    end
+
+    def parsed_backtrace
+      backtrace.map do |x|
+        x =~ /^(.+?):(\d+)(|:in `(.+)')$/
+        [$1, $2, $4]
+      end
+    end
+
+    protected
+
+    def target
+      @original.presence || self
+    end
+
+    def source_code_start_line(lines)
+      [(line_number - LINES_AROUND), 1].max unless line_number.nil?
+    end
+
+    def source_code_end_line(lines)
+      [line_number + LINES_AROUND, lines&.size || Infinity].min
+    end
+
+    def source_code_highlighted_line(lines)
+      [line_number - source_code_start_line(lines) + 1, 1].max unless line_number.nil?
+    end
+  end
+end

data/lib/lookbook/page.rb

@@ -15,9 +15,13 @@ module Lookbook
       :data
     ]
 
+    attr_reader :errors
+
     def initialize(path, base_path)
       @pathname = Pathname.new path
       @base_path = base_path
+      @options = nil
+      @errors = []
     end
 
     def path
@@ -58,7 +62,7 @@ module Lookbook
     end
 
     def content
-      @content ||= strip_frontmatter(file_contents)
+      @content ||= strip_frontmatter(file_contents).strip
     end
 
     def matchers
@@ -97,18 +101,28 @@ module Lookbook
 
     def options
       return @options if @options
-      frontmatter = (get_frontmatter(file_contents) || {}).deep_symbolize_keys
-      options = Lookbook.config.page_options.deep_merge(frontmatter).with_indifferent_access
-      options[:id] = options[:id] ? generate_id(options[:id]) : generate_id(lookup_path)
-      options[:label] ||= name.titleize
-      options[:title] ||= options[:label]
-      options[:hidden] ||= false
-      options[:landing] ||= false
-      options[:position] = options[:position] ? options[:position].to_i : get_position_prefix(path_name)
-      options[:markdown] ||= markdown_file?
-      options[:header] = true unless options.key? :header
-      options[:footer] = true unless options.key? :footer
-      @options ||= options
+      begin
+        frontmatter = (get_frontmatter(file_contents) || {}).deep_symbolize_keys
+      rescue => exception
+        frontmatter = {}
+        line_number_match = exception.message.match(/.*line\s(\d+)/)
+        @errors.push(Lookbook::Error.new(exception, {
+          title: "YAML frontmatter parsing error",
+          file_path: @pathname.to_s,
+          line_number: line_number_match ? line_number_match[1] : false
+        }))
+      end
+      @options = Lookbook.config.page_options.deep_merge(frontmatter).with_indifferent_access
+      @options[:id] = @options[:id] ? generate_id(@options[:id]) : generate_id(lookup_path)
+      @options[:label] ||= name.titleize
+      @options[:title] ||= @options[:label]
+      @options[:hidden] ||= false
+      @options[:landing] ||= false
+      @options[:position] = @options[:position] ? @options[:position].to_i : get_position_prefix(path_name)
+      @options[:markdown] ||= markdown_file?
+      @options[:header] = true unless @options.key? :header
+      @options[:footer] = true unless @options.key? :footer
+      @options
     end
 
     def path_name

data/lib/lookbook/preview.rb

@@ -34,7 +34,7 @@ module Lookbook
       return @examples if @examples.present?
       public_methods = @preview.public_instance_methods(false)
       public_method_objects = @preview_inspector&.methods&.filter { |m| public_methods.include?(m.name) }
-      examples = public_method_objects&.map { |m| PreviewExample.new(m.name.to_s, self) }
+      examples = (public_method_objects || []).map { |m| PreviewExample.new(m.name.to_s, self) }
       sorted = Lookbook.config.sort_examples ? examples.sort_by(&:label) : examples
       @examples = []
       if @preview_inspector&.groups&.any?
@@ -49,7 +49,7 @@ module Lookbook
       else
         @examples = sorted
       end
-      @examples
+      @examples = @examples.compact
     end
 
     def default_example
@@ -68,7 +68,7 @@ module Lookbook
     end
 
     def preview_paths
-      ViewComponent::Preview.preview_paths
+      ViewComponent::Base.preview_paths
     end
 
     def parent_collections_names
@@ -88,19 +88,78 @@ module Lookbook
     end
 
     class << self
+      def find(path)
+        all.find { |p| p.lookup_path == path }
+      end
+
+      def exists?(path)
+        !!find(path)
+      end
+
       def all
-        previews = ViewComponent::Preview.all.map { |p| new(p) }
+        previews = load_previews.map do |p|
+          new(p)
+        rescue
+          Rails.logger.error "[lookbook] error instantiating preview\n#{exception.full_message}"
+        end
 
-        sorted_previews = previews.sort_by { |preview| [preview.position, preview.label] }
+        sorted_previews = previews.compact.sort_by { |preview| [preview.position, preview.label] }
         PreviewCollection.new(sorted_previews)
       end
 
-      def find(path)
-        all.find { |p| p.lookup_path == path }
+      def errors
+        @errors || []
       end
 
-      def exists?(path)
-        !!find(path)
+      def reload
+        load_previews
+      end
+
+      protected
+
+      def reset_files_data
+        @loaded_files = []
+        @errors = []
+      end
+
+      def load_previews
+        reset_files_data if @loaded_files.nil?
+        require_preview_files if @errors.any?
+
+        preview_classes = ViewComponent::Preview.descendants
+        if preview_files.size > preview_classes.size
+          require_preview_files
+        end
+
+        ViewComponent::Preview.descendants.filter { |klass| @loaded_files.include? "#{klass.name.underscore}.rb" }
+      end
+
+      def require_preview_files
+        reset_files_data
+        preview_files.each do |file|
+          require_dependency(file[:path])
+          @loaded_files.push(file[:rel_path])
+        rescue => exception
+          Rails.logger.error "[lookbook] preview error\n#{exception.full_message}\n"
+          @errors.push(Lookbook::Error.new(exception, {
+            title: "Preview #{exception.class}",
+            file_name: file[:rel_path],
+            file_path: file[:path]
+          }))
+        end
+      end
+
+      def preview_files
+        files = Array(Lookbook.config.preview_paths).map do |preview_path|
+          Dir["#{preview_path}/**/*_preview.rb"].map do |path|
+            {
+              path: path,
+              base_path: preview_path,
+              rel_path: Pathname(path).relative_path_from(preview_path).to_s
+            }
+          end
+        end
+        files.flatten
       end
     end