lookbook 1.0.1 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff67ef3eb53b5a6605d46fdf186f859709112f09debfc72bab1a3f766475ea7b
-  data.tar.gz: c592dfa672ad57776c5c9ffb38dafc82998c51ca68c02fcfe7b7bc980e519ccd
+  metadata.gz: e3f13cba228b6a66ef0c31377116296e1eb1c8b53e3fd5b54ca257780cb30498
+  data.tar.gz: 3c9e509969d78ea297e39649b43d4a8613f97c7be8e0845603b313524bff316b
 SHA512:
-  metadata.gz: 7b0fc0d0a54945f24a543d18b44e1734453e166286823e85f17ed9f5d51235e3e4cd9733287089dc76c58617047fd4835a1051c5dbe8836c05fc8b1d7c36ec3f
-  data.tar.gz: 551d4744fb346cb835c53e26167f4a6e2fa71b612d2b212a7968b802775ac91655e15ac4f1ae4faf3d2fada0a95d7f7e1b7ecd581adb33b0ac49941cf508ccc1
+  metadata.gz: afeead86c2ccbb4cfd6e9afc20641474dbd5ab153916b5602f374750a41aaaec329516b36b39a964740701a536dd52683f9322e039fde3d4f9c83d7101290720
+  data.tar.gz: 54046d3840469aac423eef1b9c9dd88132e7282cda794b5e1ebd9ab8518a05a8184b3d037915e8c2a1dc9c61b5644a314735a05c5de8de8c0fdda6c23acebe55

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

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/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/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"
@@ -104,11 +103,13 @@ module Lookbook
         # Rails.application.server is only available for newer Rails versions
         Rails.application.server do
           init_listeners
+          Lookbook::Engine.init_websocket
         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
+          Lookbook::Engine.init_websocket
         end
       end
 
@@ -127,64 +128,65 @@ 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 websocket
-        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
+      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 init_websocket
+        config = Lookbook.config
+        return unless config.auto_refresh == true
+        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
 
@@ -192,6 +194,10 @@ module Lookbook
         "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket
       end
 
+      def websocket?
+        !!websocket
+      end
+
       def mounted_path
         Lookbook::Engine.routes.find_script_name({})
       end
@@ -222,6 +228,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,7 +242,19 @@ module Lookbook
         websocket&.broadcast("reload", changed)
       end
 
-      attr_reader :preview_controller
+      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, :websocket
     end
   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.2"
 end

data/public/lookbook-assets/js/lookbook.js

@@ -7701,7 +7701,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $730b795bb0498251$exports = {};
+var $36691b4c02d81145$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11354,16 +11354,6 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
 var $47a1c62621be0c54$exports = {};
 
 $parcel$defineInteropFlag($47a1c62621be0c54$exports);
@@ -11420,34 +11410,36 @@ function $47a1c62621be0c54$export$2e2bcd8739ae039() {
 }
 
 
-var $e398acaded942bbe$exports = {};
+var $99486586f6691564$exports = {};
 
-$parcel$defineInteropFlag($e398acaded942bbe$exports);
+$parcel$defineInteropFlag($99486586f6691564$exports);
 
-$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
+}
 
-function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
+
+var $e9904a14dabf652d$exports = {};
+
+$parcel$defineInteropFlag($e9904a14dabf652d$exports);
+
+$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
+function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
     return {
-        width: 0,
-        height: 0,
-        resizing: false,
-        target: null,
-        init () {
-            this.target = document.querySelector(targetSelector);
-            if (this.target) {
-                this.width = Math.round(this.target.clientWidth);
-                this.height = Math.round(this.target.clientHeight);
-                this.createObserver();
-            }
+        focussed: false,
+        get active () {
+            return store.active;
         },
-        createObserver () {
-            if (this.target) this.observer = (0, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
-                this.width = width;
-                this.height = height;
-            });
+        get text () {
+            return store.text;
         },
-        tearDown () {
-            if (this.observer) this.observer.disconnect();
+        clear () {
+            if (store.raw === "") this.$refs.input.blur();
+            else store.raw = "";
+        },
+        focus () {
+            this.$refs.input.focus();
         }
     };
 }
@@ -12318,26 +12310,34 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
-var $e9904a14dabf652d$exports = {};
+var $e398acaded942bbe$exports = {};
 
-$parcel$defineInteropFlag($e9904a14dabf652d$exports);
+$parcel$defineInteropFlag($e398acaded942bbe$exports);
 
-$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
-function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
+$parcel$export($e398acaded942bbe$exports, "default", () => $e398acaded942bbe$export$2e2bcd8739ae039);
+
+function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
     return {
-        focussed: false,
-        get active () {
-            return store.active;
-        },
-        get text () {
-            return store.text;
+        width: 0,
+        height: 0,
+        resizing: false,
+        target: null,
+        init () {
+            this.target = document.querySelector(targetSelector);
+            if (this.target) {
+                this.width = Math.round(this.target.clientWidth);
+                this.height = Math.round(this.target.clientHeight);
+                this.createObserver();
+            }
         },
-        clear () {
-            if (store.raw === "") this.$refs.input.blur();
-            else store.raw = "";
+        createObserver () {
+            if (this.target) this.observer = (0, $9930d46698775b42$export$a2214cc2adb2dc44)(document.querySelector(targetSelector), ({ width: width , height: height  })=>{
+                this.width = width;
+                this.height = height;
+            });
         },
-        focus () {
-            this.$refs.input.focus();
+        tearDown () {
+            if (this.observer) this.observer.disconnect();
         }
     };
 }
@@ -13210,13 +13210,13 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$730b795bb0498251$exports = {
+$36691b4c02d81145$exports = {
     "button": $cbd28b10fa9798c7$exports,
-    "code": $99486586f6691564$exports,
     "copy_button": $47a1c62621be0c54$exports,
-    "dimensions_display": $e398acaded942bbe$exports,
-    "embed": $e1f51f020443edd4$exports,
+    "code": $99486586f6691564$exports,
     "filter": $e9904a14dabf652d$exports,
+    "embed": $e1f51f020443edd4$exports,
+    "dimensions_display": $e398acaded942bbe$exports,
     "icon": $36506012e0c6e9e3$exports,
     "nav": $d92d9d5253f84566$exports,
     "params_editor": $b63b9c6d236b3f65$exports,
@@ -13367,7 +13367,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $730b795bb0498251$exports,
+    $36691b4c02d81145$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{