lookbook 1.0.3 → 1.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 741dcc6296e79ba365a64945fb70b7ba7e8b8df2eee9e83e72ef4e32c619b2fc
-  data.tar.gz: aa5d6647abc755e54b37837847f5929803eba7545272e6c33b887f2f7c5ef54e
+  metadata.gz: 95694c758af19ee6a561b2aedfee93d932c663f7027471204da2dce393052a5a
+  data.tar.gz: 1b4f3e4af714af47b6719cbbef7a861ad0ca2341089e2689ef8ed80b9a745867
 SHA512:
-  metadata.gz: d19a7567121be4be2c010f61d9c7d62ecff33d53d034a138124516883cbb190102aa0f8c9e9457a0aaf1d33c6d9d5250d3a60ad507af9973348f3c08c03c26bb
-  data.tar.gz: 8cc77046623125e88550cfd7ff4dd626a2deda064fee6cf3171d5a5cd59bed8ec2277e8091d48d995763db7b3fe66c730e99bde1380a4e5703986e7cc0808ff4
+  metadata.gz: 0a148ae5b71546463c003244040e54de07106db6f927e61b77ff35c92d524f37ed59e53646833675a8d1c399968904ffe41891817e85628aa8da879af8aa3bd8
+  data.tar.gz: ee91d909da4634558dbf542802ee770c921f0dfdec0bdc37592977b082a97705957bf7e19cf5168b599e78dca1f5d4222147417262c4b41f90b305a43c2c4f72

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/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.rb

@@ -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.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/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/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/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

@@ -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/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",
@@ -24,6 +24,7 @@ module Lookbook
         preview_display_params: {},
         preview_srcdoc: nil,
         preview_tags: {},
+        preview_disable_action_view_annotations: true,
         sort_examples: false,
 
         listen: Rails.env.development?,
@@ -31,10 +32,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 +104,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,43 +127,40 @@ 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
         config = Lookbook.config
         return @websocket unless @websocket.nil?
-        return unless config.auto_refresh == true
+        return unless config.auto_refresh == true && config.listen == 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.mount_path = nil
         cable.connection_class = -> { Lookbook::Connection }
         cable.logger = config.cable_logger
 
@@ -190,7 +174,7 @@ module Lookbook
       end
 
       def websocket_mount_path
-        "#{mounted_path}#{config.lookbook.cable_mount_path}" if websocket?
+        "#{mounted_path}#{config.lookbook.cable_mount_path}".gsub("//", "/") if websocket?
       end
 
       def websocket?
@@ -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