lookbook 1.0.4 → 1.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd24f301fb1e05131ba58a2d236b15155f38b372c52ada4823ea6f76111dc0b1
-  data.tar.gz: 8675198f147aa93461a89964ad2b28461facdd672088b3edfe0880ea1b293545
+  metadata.gz: 2985b373024d4f48a503252274dc0606cfbb062ea2d229163c62980f9ff492b7
+  data.tar.gz: 60352ee8d3599fe86b8fe7dc068f391913ed4727bf2b500f605fe8b49ad7dbc0
 SHA512:
-  metadata.gz: 5a9e80161cf8880083c2138144304dfc5427478c8114073f9409e3fb883eddf9abe7e055aea33b16625316c15be15fd139b8ab3607d808ff90419b5ad95b4eab
-  data.tar.gz: 1e1836fdad458167f63e3736d3d99107b1a0346da530fe57f9be03eb188c029d5891c8534999475673aa78fd02c645c37edb181b5960165316172bcf5cded59b
+  metadata.gz: f962058591eba3fd20629d4cff57515f4931b754091af6112ddcca16a911945640dbc556031edcfb34b780aa7f0690c40d32a811077ff0bb91c3f42f143ff8e2
+  data.tar.gz: b5d4d2d49675b4389bc1bb4814559eaf01e4445e0c2623a796a8a82d27ccdfeacd742837e3022c027fd2d5b22bb02a99b0720a321f6b9151145fd3f16266cbd4

data/app/assets/lookbook/js/app.js

@@ -11,6 +11,7 @@ export default function app() {
 
     init() {
       if (window.SOCKET_PATH) {
+        console.log("SOCKET CREATED");
         const socket = createSocket(window.SOCKET_PATH);
         socket.addListener("Lookbook::ReloadChannel", () => this.updateDOM());
       }

data/app/assets/lookbook/js/lib/socket.js

@@ -1,5 +1,5 @@
 import { createConsumer } from "@rails/actioncable";
-import debounce from "debounce";
+import { debounce } from "throttle-debounce";
 import { log } from "../plugins/logger";
 
 export default function socket(endpoint) {
@@ -8,10 +8,14 @@ export default function socket(endpoint) {
   return {
     addListener(channel, callback) {
       consumer.subscriptions.create(channel, {
-        received: debounce((data) => {
-          log.debug("Lookbook files changed");
-          callback(data);
-        }, 200),
+        received: debounce(
+          200,
+          (data) => {
+            log.debug("Lookbook files changed");
+            callback(data);
+          },
+          { atBegin: true }
+        ),
         connected() {
           log.info("Lookbook websocket connected");
         },

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

@@ -11,7 +11,7 @@
     </div>
   <% end %>
 
-  <div class="overflow-auto">
+  <div class="overflow-auto h-full">
     <% if items.any? %>
       <ul class="py-2" x-ref="items" x-show="!empty" x-cloak>
         <%= safe_join(items) %>

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

@@ -1,4 +1,4 @@
-import debounce from "debounce";
+import { debounce } from "throttle-debounce";
 import tippy from "~/app/assets/lookbook/js/lib/tippy";
 import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
@@ -49,7 +49,7 @@ export default function tabsComponent(store) {
 
         this.parentObserver = observeSize(
           this.$root.parentElement,
-          debounce(this.handleResize.bind(this), 10)
+          debounce(10, this.handleResize.bind(this))
         );
 
         this.$watch("visibleTabsCount", (value) => {

data/app/controllers/lookbook/application_controller.rb

@@ -1,6 +1,9 @@
 module Lookbook
   class ApplicationController < ActionController::Base
-    content_security_policy false, if: -> { Rails.env.development? }
+    if respond_to?(:content_security_policy)
+      content_security_policy false, if: -> { Rails.env.development? }
+    end
+
     protect_from_forgery with: :exception
 
     helper Lookbook::ApplicationHelper
@@ -8,6 +11,7 @@ module Lookbook
     helper Lookbook::ComponentHelper
 
     before_action :generate_theme_overrides
+    before_action :assign_collections
 
     def self.controller_path
       "lookbook"
@@ -28,6 +32,11 @@ module Lookbook
       @theme_overrides ||= Lookbook.theme.to_css
     end
 
+    def assign_collections
+      @previews = Preview.all
+      @pages = Page.all
+    end
+
     def feature_enabled?(feature)
       Lookbook::Features.enabled?(feature)
     end

data/app/controllers/lookbook/pages_controller.rb

@@ -18,7 +18,6 @@ module Lookbook
     end
 
     def show
-      @pages = Lookbook.pages
       @page = @pages.find_by_path(params[:path])
       if @page
         @next_page = @pages.find_next(@page)

data/app/controllers/lookbook/previews_controller.rb

@@ -158,22 +158,25 @@ module Lookbook
 
     def panels
       return @panels if @panels.present?
-      @panels = []
-      Lookbook.config.inspector_panels.each do |name, config|
+      inspector_data_hash = inspector_data.to_h
+      panel_counts = {}
+
+      @panels = Lookbook.config.inspector_panels.map do |name, config|
         config_with_defaults = Lookbook.config.inspector_panel_defaults.merge(config)
+        panel_counts[config_with_defaults[:pane].to_sym] ||= 0
+        panel_counts[config_with_defaults[:pane].to_sym] += 1
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.count { |p| p.pane == config.pane } + 1),
-          **inspector_data
+          index_position: panel_counts[config_with_defaults[:pane].to_sym],
+          **inspector_data_hash
         }
 
         resolved_config = config_with_defaults.transform_values do |value|
           value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
         end
         resolved_config[:name] = name.to_s
-
-        @panels << Lookbook::Store.new(resolved_config, deep: false)
+        Store.new(resolved_config)
       end
 
       @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }

data/app/helpers/lookbook/component_helper.rb

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

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

@@ -1,5 +1,5 @@
 <% content_for :shell do %>
-  <% if Lookbook.previews? || Lookbook.pages? %>
+  <% if @previews.any? || @pages.any? %>
     <%= render_component :split_layout,
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
@@ -14,14 +14,14 @@
         cloak: true do %>
 
         <%= render_component :split_layout,
-          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
           style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-          <% if Lookbook.previews? %>
+          <% if @previews.any? %>
             <% layout.pane class: "overflow-hidden" do %>
               <%= render_component :nav,
                 id: "previews-nav",
-                collection: Lookbook.previews,
+                collection: @previews,
                 alpine_data: "$store.nav.previews",
                 collapse_singles: true do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
@@ -34,11 +34,11 @@
             <% end %>
           <% end %>
 
-          <% if Lookbook.pages? %>
+          <% if @pages.any? %>
             <% layout.pane class: "overflow-hidden" do %>
               <%= render_component :nav,
                 id: "pages-nav",
-                collection: Lookbook.pages,
+                collection: @pages,
                 alpine_data: "$store.nav.pages" do |nav| %>
                 <%= nav.toolbar do |toolbar| %>
                   <% toolbar.section padded: true do %>
@@ -49,36 +49,6 @@
             <% end %>
           <% end %>
         <% end %>
-
-        <% if Lookbook::Preview.errors.any? %>
-          <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
-            <%= render_component :toolbar do |toolbar| %>
-              <% toolbar.section padded: true, class: "flex items-center" do %>
-                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
-                <span class="ml-2">Preview load errors</span>
-              <% end %>
-              <% toolbar.section align: :right do %>
-                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
-              <% end %>
-            <% end %>
-
-            <div class="h-full max-h-[300px] overflow-hidden">
-              <div class="bg-red-50 w-full overflow-auto h-full">
-                <ul class="text-sm divide-y divide-red-200">
-                  <% Lookbook::Preview.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 text-xs ">
-                        <%= 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>
-            </div>
-          </div>
-        <% end %>
       <% end %>
 
       <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>

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

@@ -1,10 +1,10 @@
 <div id="landing" class="flex flex-col items-center justify-center h-full w-full">
-  <div class="text-center" id="landing-<%= Lookbook.previews? ? "with" : "no" %>-content">
+  <div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
     <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wider mb-2">
       <%= config.project_name %>
     </h5>
     <div class="opacity-60">
-      <% if Lookbook.previews? %>
+      <% if @previews.any? %>
         <p>Select a preview from the nav to get started.</p>
       <% else %>
         <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>

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

@@ -25,7 +25,7 @@
 
       <% toolbar.section divide: :left, class: "flex-none relative z-10" do %>
         <%= render_component :button_group do |group| %>
-          <% if Lookbook.pages.any? %>
+          <% if @pages.any? %>
             <% group.button icon: :code,
               tooltip: "Copy page embed code",
               copy: true do %>

data/config/routes.rb

@@ -1,6 +1,6 @@
 Lookbook::Engine.routes.draw do
   if Lookbook::Engine.websocket?
-    mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path
+    mount Lookbook::Engine.websocket => Lookbook.config.cable_mount_path, :as => :cable
   end
 
   root to: "application#index", as: :lookbook_home

data/lib/lookbook/config.rb

@@ -5,7 +5,7 @@ require "lookbook/store"
 module Lookbook
   class Config
     def initialize
-      @options = Store.new
+      @options = Store.new({}, true)
 
       @options.set({
         project_name: "Lookbook",
@@ -31,10 +31,9 @@ module Lookbook
         listen_extensions: ["rb", "html.*"],
         listen_use_polling: false,
 
-        cable_mount_path: "/lookbook-cable",
+        cable_mount_path: "/cable",
         cable_logger: Lookbook.logger,
 
-        runtime_parsing: !Rails.env.production?,
         parser_registry_path: "tmp/storage/.yardoc",
 
         ui_theme: "indigo",
@@ -104,6 +103,10 @@ module Lookbook
       })
     end
 
+    def runtime_parsing=(value)
+      Lookbook.logger.warn "The `runtime_parsing` config option has been deprecated and will be removed in v2.0"
+    end
+
     def project_name
       @options.project_name == false ? nil : @options.project_name
     end

data/lib/lookbook/data.rb

@@ -1,11 +1,11 @@
 module Lookbook
   module Data
     def data
-      @data ||= Store.new
+      @data ||= Store.new({}, true)
     end
 
     def data=(props)
-      @data = Store.new(props)
+      @data = Store.new(props, true)
     end
   end
 end

data/lib/lookbook/engine.rb

@@ -35,7 +35,7 @@ module Lookbook
       {
         version: version,
         env: Rails.env.to_s,
-        config: config
+        config: config.to_h
       }
     end
 
@@ -43,18 +43,10 @@ module Lookbook
       Preview.all
     end
 
-    def previews?
-      Preview.any?
-    end
-
     def pages
       Page.all
     end
 
-    def pages?
-      Page.any?
-    end
-
     def broadcast(event_name, data = {})
       Engine.websocket&.broadcast(event_name.to_s, data)
     end
@@ -99,6 +91,11 @@ module Lookbook
       @preview_controller = Lookbook.config.preview_controller.constantize
       @preview_controller.include(Lookbook::PreviewController)
 
+      parser.after_parse do |registry|
+        Preview.load!(registry.all(:class))
+        reload_ui
+      end
+
       if Gem::Version.new(Rails.version) >= Gem::Version.new("6.1.3.1")
         # Rails.application.server is only available for newer Rails versions
         Rails.application.server do
@@ -111,19 +108,9 @@ module Lookbook
         end
       end
 
-      if config.lookbook.runtime_parsing
-        Lookbook::Engine.parser.parse
-      else
-        unless File.exist?(config.lookbook.parser_registry_path)
-          Lookbook.logger.warn "
-            Runtime parsing is disabled but no registry file has been found.
-            Did you run `rake lookbook:preparse` before starting the app?
-            Expected to find registry file at #{config.lookbook.parser_registry_path}
-          "
-        end
+      parser.parse do
+        Lookbook::Engine.run_hooks(:after_initialize)
       end
-
-      Lookbook::Engine.run_hooks(:after_initialize)
     end
 
     at_exit do
@@ -140,32 +127,29 @@ module Lookbook
         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
+        listen_paths = config.listen_paths.uniq
+        if listen_paths.any?
+          preview_listener = Listen.to(*listen_paths,
+            only: /\.(#{config.listen_extensions.join("|")})$/,
+            force_polling: config.listen_use_polling) do |modified, added, removed|
+            parser.parse do
+              run_hooks(:after_change, {modified: modified, added: added, removed: removed})
+            end
           end
-          Lookbook::Preview.clear_cache
-          reload_ui(changes)
-          run_hooks(:after_change, changes)
+          register_listener(preview_listener)
         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)
+
+        page_paths = config.page_paths.uniq
+        if page_paths.any?
+          page_listener = Listen.to(*page_paths,
+            only: /\.(html.*|md.*)$/,
+            force_polling: config.listen_use_polling) do |modified, added, removed|
+            changes = {modified: modified, added: added, removed: removed}
+            reload_ui
+            run_hooks(:after_change, changes)
+          end
+          register_listener(page_listener)
         end
-        register_listener(page_listener)
       end
 
       def websocket
@@ -176,7 +160,7 @@ module Lookbook
 
         cable = ActionCable::Server::Configuration.new
         cable.cable = {adapter: "async"}.with_indifferent_access
-        cable.mount_path = config.cable_mount_path
+        cable.mount_path = nil
         cable.connection_class = -> { Lookbook::Connection }
         cable.logger = config.cable_logger
 
@@ -202,7 +186,7 @@ module Lookbook
       end
 
       def parser
-        @parser ||= Lookbook::Parser.new(config.lookbook.preview_paths, config.lookbook.parser_registry_path)
+        @parser ||= Lookbook::Parser.new(config.lookbook.preview_paths)
       end
 
       def log_level
@@ -237,8 +221,8 @@ module Lookbook
         end
       end
 
-      def reload_ui(changed = {})
-        websocket&.broadcast("reload", changed)
+      def reload_ui
+        websocket&.broadcast("reload", {})
       end
 
       def prevent_listening?

data/lib/lookbook/parser.rb

@@ -3,24 +3,32 @@ require "yard"
 module Lookbook
   class Parser
     attr_reader :registry_path
-    def initialize(paths, registry_path)
+    def initialize(paths)
       @paths = paths.map { |p| "#{p}/**/*preview.rb" }
-      @registry_path = registry_path.to_s
-      YARD::Registry.yardoc_file = registry_path
+      @after_parse_callbacks = []
+      @after_parse_once_callbacks = []
+      @parsing = false
+
+      YARD::Parser::SourceParser.after_parse_list do
+        [*@after_parse_callbacks, *@after_parse_once_callbacks].each do |callback|
+          callback.call(YARD::Registry)
+        end
+        @after_parse_once_callbacks = []
+        @parsing = false
+      end
     end
 
-    def parse
-      YARD::Registry.clear
-      YARD::Registry.lock_for_writing do
+    def parse(&block)
+      unless @parsing
+        @parsing = true
+        @after_parse_once_callbacks << block if block
+        YARD::Registry.clear
         YARD.parse(@paths)
-        YARD::Registry.save(false, registry_path)
       end
     end
 
-    def get_code_object(path)
-      registry = YARD::RegistryStore.new
-      registry.load!(registry_path)
-      registry.get(path)
+    def after_parse(&block)
+      @after_parse_callbacks << block
     end
 
     class << self

data/lib/lookbook/preview.rb

@@ -5,9 +5,9 @@ module Lookbook
     delegate :name, :render_args, to: :@preview
     delegate :position, :group, :notes, :hidden?, :tags, :tag, to: :@preview_inspector
 
-    def initialize(preview)
+    def initialize(preview, code_object)
       @preview = preview
-      @preview_inspector = SourceInspector.new(@preview.name)
+      @preview_inspector = SourceInspector.new(code_object)
       super(preview_class_path(@preview.name))
     end
 
@@ -35,7 +35,7 @@ module Lookbook
       return @examples if @examples.present?
       public_methods = @preview.public_instance_methods(false)
       public_method_objects = @preview_inspector&.methods&.select { |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, m) }
       sorted = Lookbook.config.sort_examples ? examples.sort_by(&:label) : examples
       @examples = []
       if @preview_inspector&.groups&.any?
@@ -109,6 +109,9 @@ module Lookbook
 
     protected
 
+    @preview_objects = nil
+    @previews = nil
+
     def guess_component
       name.chomp("Preview").constantize
     rescue
@@ -129,26 +132,20 @@ module Lookbook
       end
 
       def all
-        load_previews if preview_files.size > ViewComponent::Preview.descendants.size
-
-        @previews = nil if cache_stale?
-        return @previews unless @previews.nil?
-
-        previews = ViewComponent::Preview.descendants.map do |p|
-          new(p)
-        rescue
-          Rails.logger.error "[lookbook] error instantiating preview\n#{exception.full_message}"
-        end
-
-        if errors.any?
-          errors.each do |error|
-            Rails.logger.error "[lookbook] preview error\n#{error.full_message}\n"
-          end
+        if @previews.nil? && @preview_objects.present?
+          previews = @preview_objects.map do |code_object|
+            klass = code_object.path.constantize
+            new(klass, code_object) if klass.ancestors.include?(ViewComponent::Preview)
+          rescue => exception
+            Lookbook.logger.error Lookbook::Error.new(exception)
+            nil
+          end.compact
+
+          sorted_previews = previews.compact.sort_by { |preview| [preview.position, preview.label] }
+          @previews = PreviewCollection.new(sorted_previews)
+        else
+          PreviewCollection.new([])
         end
-
-        sorted_previews = previews.compact.sort_by { |preview| [preview.position, preview.label] }
-        @previews = PreviewCollection.new(sorted_previews)
-        mark_as_cached if Lookbook.config.listen == true
         @previews
       end
 
@@ -156,60 +153,9 @@ module Lookbook
         @errors ||= []
       end
 
-      def clear_cache
-        cache_dir = File.dirname(cache_marker_path)
-        FileUtils.mkdir_p(cache_dir) unless File.exist?(cache_dir)
-        File.write(cache_marker_path, Time.now.to_i)
-      end
-
-      protected
-
-      def cache_marker_path
-        Rails.root.join("tmp/cache/lookbook-previews")
-      end
-
-      def cache_stale?
-        return false if !File.exist?(cache_marker_path)
-        cache_timestamp = File.read(cache_marker_path).to_i
-        if @last_cache_timestamp.nil? || cache_timestamp > @last_cache_timestamp
-          @last_cache_timestamp = cache_timestamp
-          true
-        else
-          false
-        end
-      end
-
-      def mark_as_cached
-        cache_dir = File.dirname(cache_marker_path)
-        FileUtils.mkdir_p(cache_dir) unless File.exist?(cache_dir)
-        File.write(cache_marker_path, Time.now)
-      end
-
-      def load_previews
-        @errors = []
-        preview_files.each do |file|
-          require_dependency file[:path]
-        rescue SyntaxError, StandardError => exception
-          @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(Pathname.new(preview_path)).to_s
-            }
-          end
-        end
-        files.flatten
+      def load!(preview_objects)
+        @preview_objects = preview_objects
+        @previews = nil
       end
     end