lookbook 1.0.1 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff67ef3eb53b5a6605d46fdf186f859709112f09debfc72bab1a3f766475ea7b
-  data.tar.gz: c592dfa672ad57776c5c9ffb38dafc82998c51ca68c02fcfe7b7bc980e519ccd
+  metadata.gz: fd24f301fb1e05131ba58a2d236b15155f38b372c52ada4823ea6f76111dc0b1
+  data.tar.gz: 8675198f147aa93461a89964ad2b28461facdd672088b3edfe0880ea1b293545
 SHA512:
-  metadata.gz: 7b0fc0d0a54945f24a543d18b44e1734453e166286823e85f17ed9f5d51235e3e4cd9733287089dc76c58617047fd4835a1051c5dbe8836c05fc8b1d7c36ec3f
-  data.tar.gz: 551d4744fb346cb835c53e26167f4a6e2fa71b612d2b212a7968b802775ac91655e15ac4f1ae4faf3d2fada0a95d7f7e1b7ecd581adb33b0ac49941cf508ccc1
+  metadata.gz: 5a9e80161cf8880083c2138144304dfc5427478c8114073f9409e3fb883eddf9abe7e055aea33b16625316c15be15fd139b8ab3607d808ff90419b5ad95b4eab
+  data.tar.gz: 1e1836fdad458167f63e3736d3d99107b1a0346da530fe57f9be03eb188c029d5891c8534999475673aa78fd02c645c37edb181b5960165316172bcf5cded59b

data/app/components/lookbook/base_component.rb

@@ -31,11 +31,19 @@ module Lookbook
       nil
     end
 
+    def alpine_encode(data)
+      if data.is_a? String
+        "\'#{json_escape data}\'"
+      else
+        json_escape data.to_json.tr("\"", "\'")
+      end
+    end
+
     def prepare_alpine_data(x_data = nil)
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
-        args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
+        args = Array.wrap(alpine_data).compact
+        args.any? ? "#{alpine_component_name}(#{args.join(",")})" : alpine_component_name
       end
     end
   end

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

@@ -13,7 +13,7 @@ module Lookbook
     protected
 
     def alpine_data
-      content ? nil : @target.to_json
+      content ? nil : alpine_encode(@target)
     end
 
     def alpine_component

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

@@ -2,15 +2,12 @@ module Lookbook
   class DimensionsDisplay::Component < Lookbook::BaseComponent
     def initialize(target:, **html_attrs)
       @target = target
+      @alpine_data = alpine_encode(@target)
       super(**html_attrs)
     end
 
     protected
 
-    def alpine_data
-      @target.to_json
-    end
-
     def alpine_component
       "dimensionsDisplayComponent"
     end

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

@@ -1,19 +1,19 @@
-<% if @example.present? %>
+<% if @target.present? %>
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
   <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <h3>
-        <%= @example.preview.label %> (<%= @example.label %>)
+        <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
     <% toolbar.section align: :right, divide: :left do %>
       <%= render_component :button_group do |group| %>
         <% group.button icon: :eye,
-          href: lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: lookbook_preview_path(@example.path, @params),
+          href: lookbook_preview_path(@target.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>
@@ -28,7 +28,7 @@
     @viewport:resize-complete="resizeIframe"
     @tabs:change.window="resizeIframe"> 
     <%= render_component :viewport,
-      src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,
       max_height: @max_height,

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

@@ -2,7 +2,7 @@ module Lookbook
   class Embed::Component < Lookbook::BaseComponent
     def initialize(id:, example:, params: {}, opts: {}, max_height: nil, **html_attrs)
       @id = id
-      @example = example
+      @target = example
       @params = params
       @opts = opts
       @max_height = max_height
@@ -20,7 +20,7 @@ module Lookbook
     end
 
     def alpine_data
-      [@id.to_json, "$store.pages.embeds"].join(",")
+      [alpine_encode(@id), "$store.pages.embeds"].join(",")
     end
 
     def alpine_component

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

@@ -1,4 +1,4 @@
-<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}" do %>
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
   <svg>
     <use :href="`/lookbook-assets/feather-sprite.svg#${iconName}`" x-cloak />
   </svg>

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

@@ -1,7 +1,7 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
     def initialize(name:, size: 4, **html_attrs)
-      @icon_name = name.is_a?(Symbol) ? name.to_s.tr("_", "-").to_json : name
+      @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
       @size = size || 4
       super(**html_attrs)
     end
@@ -12,10 +12,6 @@ module Lookbook
 
     protected
 
-    def alpine_data
-      @icon_name
-    end
-
     def alpine_component
       "iconComponent"
     end

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

@@ -78,10 +78,10 @@ module Lookbook
     protected
 
     def alpine_data
-      {
+      alpine_encode({
         id: @item.id,
         matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
-      }.to_json
+      })
     end
 
     def alpine_component

data/app/components/lookbook/params_editor/field/component.rb

@@ -33,7 +33,7 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = helpers.raw json_escape(value.to_json)
+      escaped_value = json_escape(value.to_json)
       "{name: '#{name}', value: #{escaped_value}}"
     end
 

data/app/controllers/lookbook/previews_controller.rb

@@ -13,7 +13,7 @@ module Lookbook
     before_action :set_params
 
     def preview
-      if @example
+      if @target
         begin
           opts = {layout: @preview.layout}
           if params[:lookbook_embed] == "true"
@@ -32,7 +32,7 @@ module Lookbook
     end
 
     def show
-      if @example
+      if @target
         begin
           @main_panels = main_panels
           @drawer_panels = drawer_panels
@@ -52,9 +52,9 @@ module Lookbook
     private
 
     def lookup_entities
-      @example = Lookbook.previews.find_example(params[:path])
-      if @example.present?
-        @preview = @example.preview
+      @target = Lookbook.previews.find_example(params[:path])
+      if @target.present?
+        @preview = @target.preview
         if params[:path] == @preview&.lookup_path
           redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
         end
@@ -85,17 +85,17 @@ module Lookbook
     end
 
     def target_examples
-      @example.type == :group ? @example.examples : [@example]
+      @target.type == :group ? @target.examples : [@target]
     end
 
     def set_title
-      @title = @example.present? ? [@example&.label, @preview&.label].compact.join(" :: ") : "Not found"
+      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
     end
 
     def set_params
-      if @example
+      if @target
         # cast known params to type
-        @example.params.each do |param|
+        @target.params.each do |param|
           if preview_controller.params.key?(param[:name])
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
@@ -103,7 +103,7 @@ module Lookbook
         # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @example.display_params,
+            display: @target.display_params,
             data: Lookbook.data
           }
         })
@@ -113,7 +113,7 @@ module Lookbook
     def preview_params
       preview_controller.params.permit!
       preview_controller.params.to_h.select do |key, value|
-        !!@example.params.find { |param| param[:name] == key }
+        !!@target.params.find { |param| param[:name] == key }
       end
     end
 
@@ -125,12 +125,7 @@ module Lookbook
         path: params[:path]
       }
 
-      example = @example
       preview = @preview
-      preview.define_singleton_method(:params, proc {
-        example.params
-      })
-
       examples = target_examples.map do |example|
         render_args = @preview.render_args(example.name, params: preview_controller.params)
         has_template = render_args[:template] != "view_components/preview"
@@ -144,11 +139,18 @@ module Lookbook
         example
       end
 
+      target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
+
+      preview.define_singleton_method(:params, proc {
+        target.params
+      })
+
       @inspector_data ||= Lookbook::Store.new({
         context: context_data,
         preview: preview,
         examples: examples,
-        example: example,
+        example: examples.first,
+        target: target,
         data: Lookbook.data,
         app: Lookbook
       })
@@ -198,7 +200,7 @@ module Lookbook
         {
           file_path: @preview&.full_path,
           line_number: 0,
-          source_code: @example&.source
+          source_code: @target&.source
         }
       elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
         message_parts = exception.message.split("\n").first.split

data/app/helpers/lookbook/component_helper.rb

@@ -6,7 +6,8 @@ module Lookbook
       render Lookbook::Icon::Component.new(name: name, **attrs)
     end
 
-    def code(**attrs, &block)
+    def code(language = :html, **attrs, &block)
+      attrs[:language] = language
       render Lookbook::Code::Component.new(**attrs), &block
     end
 

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

@@ -29,7 +29,7 @@
             <% group.button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>
-                &lt;%= embed <%= @preview.preview_class %>, :<%= @example.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+                &lt;%= embed <%= @preview.preview_class %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
             <% end %>
           <% end %>
           
@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
+            href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 

data/config/routes.rb

@@ -1,5 +1,5 @@
 Lookbook::Engine.routes.draw do
-  if Lookbook.config.auto_refresh
+  if Lookbook::Engine.websocket?
     mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
   end
 

data/lib/lookbook/component.rb

@@ -11,6 +11,10 @@ module Lookbook
       name.underscore
     end
 
+    def rel_path
+      Pathname.new("#{path}.rb")
+    end
+
     def full_path
       Pathname.new("#{Lookbook.config.components_path}/#{path}.rb")
     end

data/lib/lookbook/engine.rb

@@ -1,7 +1,6 @@
 require "view_component"
 require "action_cable/engine"
 require "listen"
-require "rake"
 
 module Lookbook
   autoload :Config, "lookbook/config"
@@ -107,7 +106,7 @@ module Lookbook
         end
       else
         # Fallback for older Rails versions - don't start listeners if running in a rake task.
-        unless File.basename($0) == "rake" || Rake.application.top_level_tasks.any?
+        unless Lookbook::Engine.prevent_listening?
           init_listeners
         end
       end
@@ -127,69 +126,75 @@ module Lookbook
       Lookbook::Engine.run_hooks(:after_initialize)
     end
 
-    def init_listeners
-      return unless config.lookbook.listen == true
-      Listen.logger = Lookbook.logger
-      Lookbook.logger.info "Initializing listeners"
-
-      preview_listener = Listen.to(
-        *config.lookbook.listen_paths,
-        only: /\.(#{config.lookbook.listen_extensions.join("|")})$/,
-        force_polling: config.lookbook.listen_use_polling
-      ) do |modified, added, removed|
-        changes = {modified: modified, added: added, removed: removed}
-        begin
-          Lookbook::Engine.parser.parse
-        rescue
-        end
-        Lookbook::Preview.clear_cache
-        Lookbook::Engine.reload_ui(changes)
-        Lookbook::Engine.run_hooks(:after_change, changes)
-      end
-      Lookbook::Engine.register_listener(preview_listener)
-
-      page_listener = Listen.to(
-        *config.lookbook.page_paths,
-        only: /\.(html.*|md.*)$/,
-        force_polling: config.lookbook.listen_use_polling
-      ) do |modified, added, removed|
-        changes = {modified: modified, added: added, removed: removed}
-        Lookbook::Engine.reload_ui(changes)
-        Lookbook::Engine.run_hooks(:after_change, changes)
-      end
-      Lookbook::Engine.register_listener(page_listener)
-    end
-
     at_exit do
       if Lookbook::Engine.listeners.any?
         Lookbook.logger.debug "Stopping listeners"
-        Lookbook::Engine.listeners.each { |listener| listener.stop }
+        Lookbook::Engine.stop_listeners
       end
       Lookbook::Engine.run_hooks(:before_exit)
     end
 
     class << self
+      def init_listeners
+        config = Lookbook.config
+        return unless config.listen == true
+        Listen.logger = Lookbook.logger
+
+        preview_listener = Listen.to(
+          *config.listen_paths,
+          only: /\.(#{config.listen_extensions.join("|")})$/,
+          force_polling: config.listen_use_polling
+        ) do |modified, added, removed|
+          changes = {modified: modified, added: added, removed: removed}
+          begin
+            parser.parse
+          rescue
+          end
+          Lookbook::Preview.clear_cache
+          reload_ui(changes)
+          run_hooks(:after_change, changes)
+        end
+        register_listener(preview_listener)
+
+        page_listener = Listen.to(
+          *config.page_paths,
+          only: /\.(html.*|md.*)$/,
+          force_polling: config.listen_use_polling
+        ) do |modified, added, removed|
+          changes = {modified: modified, added: added, removed: removed}
+          reload_ui(changes)
+          run_hooks(:after_change, changes)
+        end
+        register_listener(page_listener)
+      end
+
       def websocket
+        config = Lookbook.config
         return @websocket unless @websocket.nil?
-        if config.lookbook.auto_refresh
-          cable = ActionCable::Server::Configuration.new
-          cable.cable = {adapter: "async"}.with_indifferent_access
-          cable.mount_path = config.lookbook.cable_mount_path
-          cable.connection_class = -> { Lookbook::Connection }
-          cable.logger = config.lookbook.cable_logger
-
-          @websocket ||= if Rails.version.to_f >= 6.0
-            ActionCable::Server::Base.new(config: cable)
-          else
-            ws = ActionCable::Server::Base.new
-            ws.config = cable
-            ws
-          end
+        return unless config.auto_refresh == true && !Rails.env.test?
+        Lookbook.logger.info "Initializing websocket"
+
+        cable = ActionCable::Server::Configuration.new
+        cable.cable = {adapter: "async"}.with_indifferent_access
+        cable.mount_path = config.cable_mount_path
+        cable.connection_class = -> { Lookbook::Connection }
+        cable.logger = config.cable_logger
+
+        @websocket ||= if Gem::Version.new(Rails.version) >= Gem::Version.new(6.0)
+          ActionCable::Server::Base.new(config: cable)
+        else
+          ws = ActionCable::Server::Base.new
+          ws.config = cable
+          ws
         end
       end
 
       def websocket_mount_path
-        "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket
+        "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket?
+      end
+
+      def websocket?
+        websocket.present?
       end
 
       def mounted_path
@@ -222,6 +227,10 @@ module Lookbook
         @listeners ||= []
       end
 
+      def stop_listeners
+        listeners.each { |listener| listener.stop }
+      end
+
       def run_hooks(event_name, *args)
         config.lookbook.hooks[event_name].each do |hook|
           hook.call(Lookbook, *args)
@@ -232,6 +241,18 @@ module Lookbook
         websocket&.broadcast("reload", changed)
       end
 
+      def prevent_listening?
+        Rails.env.test? || running_in_rake_task?
+      end
+
+      def running_in_rake_task?
+        if defined?(Rake) && Rake.respond_to?(:application)
+          File.basename($0) == "rake" || Rake.application.top_level_tasks.any?
+        else
+          false
+        end
+      end
+
       attr_reader :preview_controller
     end
   end

data/lib/lookbook/page.rb

@@ -13,7 +13,7 @@ module Lookbook
       :data
     ]
 
-    attr_reader :errors
+    attr_reader :errors, :rel_path
     attr_accessor :sections
 
     def initialize(path, base_path)
@@ -23,8 +23,8 @@ module Lookbook
       @errors = []
       @sections = []
       @page_name = remove_position_prefix(path_name)
-      rel_path = @pathname.relative_path_from(@base_path)
-      page_path = rel_path.dirname.to_s == "." ? @page_name : "#{rel_path.dirname}/#{@page_name}"
+      @rel_path = @pathname.relative_path_from(@base_path)
+      page_path = @rel_path.dirname.to_s == "." ? @page_name : "#{@rel_path.dirname}/#{@page_name}"
       super(page_path)
     end
 
@@ -33,7 +33,7 @@ module Lookbook
     end
 
     def full_path
-      Rails.root.join(@pathname.to_s)
+      Pathname.new Rails.root.join(@pathname.to_s)
     end
 
     def name

data/lib/lookbook/preview.rb

@@ -61,11 +61,15 @@ module Lookbook
       examples.first
     end
 
+    def rel_path
+      "#{name.underscore}.rb"
+    end
+
     def full_path
       base_path = Array(Lookbook.config.preview_paths).detect do |preview_path|
-        Dir["#{preview_path}/#{name.underscore}.rb"].first
+        Dir["#{preview_path}/#{rel_path}"].first
       end
-      Pathname.new(Dir["#{base_path}/#{name.underscore}.rb"].first)
+      Pathname.new(Dir["#{base_path}/#{rel_path}"].first)
     end
 
     def url_path

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.1"
+  VERSION = "1.0.4"
 end