lookbook 1.2.1 → 1.4.5

data/app/views/lookbook/{previews → inspector}/show.html.erb

@@ -1,6 +1,9 @@
 <%= lookbook_render :split_layout,
   alpine_data: "$store.layout.inspector",
-  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
+  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
+  data: {
+    "preview-target": @target.id
+  } do |layout| %>
 
   <%= layout.pane class: "flex flex-col h-full overflow-hidden",
     "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
@@ -98,7 +101,7 @@
               copy: !!panel.copy,
               "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
               cloak: true do %>
-              <%== panel.copy ? panel.copy : "" %>
+              <%= panel.copy ? panel.copy : "" %>
               <% end %>
           <% end %>  
         <% end %>

data/config/app.yml

@@ -2,11 +2,12 @@ shared:
   project_name: Lookbook
   log_level: 2
   log_use_rails_logger: true
-  auto_refresh: true
+  auto_refresh: false
   components_path: app/components
   page_controller: Lookbook::PageController
   page_route: pages
   page_paths: [test/components/docs]
+  page_extensions: [html.*, md.*]
   page_options: {}
   markdown_options:
     tables: true
@@ -16,6 +17,9 @@ shared:
     highlight: true
     with_toc_data: true
     lax_spacing: true
+  highlighter_options:
+    theme: github
+    dark: false
   sort_examples: false
   preview_paths: []
   preview_display_options: {}
@@ -33,4 +37,10 @@ shared:
 
 development:
   listen: true
+  auto_refresh: true
+  debug_menu: true
+
+test:
+  listen: false
+  auto_refresh: false
   debug_menu: true

data/config/inputs.yml

@@ -1,48 +1,48 @@
 shared:
   select:
-    partial: lookbook/previews/inputs/select
+    partial: lookbook/inspector/inputs/select
     opts: {}
 
   textarea:
-    partial: lookbook/previews/inputs/textarea
+    partial: lookbook/inspector/inputs/textarea
     opts: {}
 
   toggle:
-    partial: lookbook/previews/inputs/toggle
+    partial: lookbook/inspector/inputs/toggle
     opts: {}
 
   color:
-    partial: lookbook/previews/inputs/color
+    partial: lookbook/inspector/inputs/color
     opts: {}
 
   range:
-    partial: lookbook/previews/inputs/range
+    partial: lookbook/inspector/inputs/range
     opts: {}
 
   text:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   email:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   number:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   tel:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   url:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   date:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}
 
   datetime_local:
-    partial: lookbook/previews/inputs/text
+    partial: lookbook/inspector/inputs/text
     opts: {}

data/config/languages.yml

@@ -0,0 +1,41 @@
+shared:
+  definitions:
+    - name: ruby
+      ext: .rb
+      label: Ruby
+      comment: "# %s"
+
+    - name: html
+      ext: .html
+      label: HTML
+      comment: "<!-- %s -->"
+
+    - name: erb
+      ext: .erb
+      label: ERB
+      comment: "<%%# %s %%>"
+
+    - name: haml
+      ext: .haml
+      label: Haml
+      comment: "<!-- %s -->"
+
+    - name: slim
+      ext: .slim
+      label: Slim
+      comment: "<!-- %s -->"
+
+    - name: tsx
+      ext: .tsx
+      label: TypeScript
+      comment: "// %s"
+
+    - name: js
+      ext: .js
+      label: JavasScript
+      comment: "// %s"
+
+    - name: css
+      ext: .css
+      label: CSS
+      comment: "/* %s */"

data/config/panels.yml

@@ -1,30 +1,30 @@
 shared:
   main:
     - name: preview
-      partial: lookbook/previews/panels/preview
+      partial: lookbook/inspector/panels/preview
       label: Preview
       hotkey: v
 
     - name: output
-      partial: lookbook/previews/panels/output
+      partial: lookbook/inspector/panels/output
       label: HTML
       hotkey: h
 
   drawer:
     - name: source
-      partial: lookbook/previews/panels/source
+      partial: lookbook/inspector/panels/source
       label: Source
       hotkey: s
       copy: "->(data) { data.examples.map { |e| e.source }.join(\n) }"
 
     - name: notes
-      partial: lookbook/previews/panels/notes
+      partial: lookbook/inspector/panels/notes
       label: Notes
       hotkey: n
       disabled: ->(data) { data.examples.select { |e| e.notes.present? }.none? }
 
     - name: params
-      partial: lookbook/previews/panels/params
+      partial: lookbook/inspector/panels/params
       label: Params
       hotkey: p
-      disabled: ->(data) { data.preview.params.none? }
+      disabled: ->(data) { data.context.params.none? }

data/config/routes.rb

@@ -1,6 +1,6 @@
 Lookbook::Engine.routes.draw do
-  if Lookbook::Engine.websocket?
-    mount Lookbook::Engine.websocket => "/cable", :as => :cable
+  if Lookbook::Engine.websocket.mountable?
+    mount Lookbook::Engine.websocket.server => "/cable", :as => :cable
   end
 
   root to: "application#index", as: :lookbook_home
@@ -8,8 +8,8 @@ Lookbook::Engine.routes.draw do
   get "/#{Lookbook.config.page_route}", to: "pages#index", as: :lookbook_page_index
   get "/#{Lookbook.config.page_route}/*path", to: "pages#show", as: :lookbook_page
 
-  get "/preview/*path", to: "previews#preview", as: :lookbook_preview
-  get "/inspect/*path", to: "previews#show", as: :lookbook_inspect
+  get "/preview/*path", to: "previews#show", as: :lookbook_preview
+  get "/inspect/*path", to: "inspector#show", as: :lookbook_inspect
 
-  get "/*path", to: "previews#show_legacy", as: :lookbook_inspect_legacy
+  get "/*path", to: "inspector#show_legacy", as: :lookbook_inspect_legacy
 end

data/config/tags.yml

@@ -25,5 +25,12 @@ shared:
 
   param:
     label: Param
-    yard_parser: with_name
+    opts: {}
+
+  logical_path:
+    label: Logical Path
+    opts: {}
+
+  source:
+    label: Source file
     opts: {}

data/lib/lookbook/engine.rb

@@ -1,6 +1,7 @@
 require "view_component"
 require "action_cable/engine"
 require "listen"
+require "yard"
 
 module Lookbook
   class Engine < Rails::Engine
@@ -8,18 +9,17 @@ module Lookbook
 
     config.autoload_paths << File.expand_path(root.join("app/components"))
 
-    initializer "lookbook.viewcomponent.config" do
-      Lookbook.config.preview_paths += config.view_component.preview_paths
-      Lookbook.config.preview_controller ||= config.view_component.preview_controller
-
-      Lookbook.config.components_path = config.view_component.view_component_path if config.view_component.view_component_path.present?
-
-      Lookbook.config.listen_paths += Lookbook.config.preview_paths
-      Lookbook.config.listen_paths << Lookbook.config.components_path
+    config.before_configuration do
+      config.lookbook = Lookbook.config
     end
 
-    initializer "lookbook.parser.tags" do
-      Lookbook::Parser.define_tags(Engine.tags)
+    initializer "lookbook.viewcomponent.config_sync" do
+      opts.preview_paths += config.view_component.preview_paths
+      opts.preview_controller ||= config.view_component.preview_controller
+
+      if config.view_component.view_component_path.present?
+        opts.components_path = config.view_component.view_component_path
+      end
     end
 
     initializer "lookbook.assets.serve" do
@@ -29,119 +29,93 @@ module Lookbook
       )
     end
 
-    config.before_configuration do
-      config.lookbook = Lookbook.config
+    initializer "lookbook.file_watcher.paths" do
+      opts.listen_paths += opts.preview_paths
+      opts.listen_paths << opts.components_path
     end
 
-    config.after_initialize do
-      @preview_controller = Lookbook.config.preview_controller.constantize
-      @preview_controller.include(Lookbook::PreviewController)
-
-      parser.after_parse do |registry|
-        Preview.load!(registry.all(:class))
-        reload_ui
+    initializer "lookbook.file_watcher.previews" do
+      file_watcher.watch(opts.listen_paths, opts.listen_extensions, wait_for_delay: 0.5) do |changes|
+        parser.parse { run_hooks(:after_change, changes) }
       end
+    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
-          init_listeners
-        end
-      else
-        # Fallback for older Rails versions - don't start listeners if running in a rake task.
-        unless prevent_listening?
-          init_listeners
-        end
+    initializer "lookbook.file_watcher.pages" do
+      file_watcher.watch(opts.page_paths, opts.page_extensions) do |changes|
+        Engine.pages.load(Engine.page_paths)
+        Engine.websocket.broadcast(:reload)
+        run_hooks(:after_change, changes)
       end
+    end
 
-      parser.parse do
-        run_hooks(:after_initialize)
+    initializer "lookbook.parser.previews_load_callback" do
+      parser.after_parse do |code_objects|
+        Engine.previews.load(code_objects.all(:class))
+        Engine.websocket.broadcast(:reload)
       end
     end
 
-    at_exit do
-      if listeners.any?
-        Lookbook.logger.debug "Stopping listeners"
-        stop_listeners
+    # The preview controller handles the rendering of individual previews.
+    #
+    # Lookbook injects some actions into whichever controller has been
+    # specified by the user in order to render previews within the context of
+    # the particular controller class instance so that any before_action/after_action
+    # callbacks will be correctly processed.
+    config.after_initialize do
+      @preview_controller = opts.preview_controller.constantize
+      @preview_controller.class_eval { include Lookbook::PreviewActions }
+    end
+
+    config.after_initialize do
+      if Rails.application.respond_to?(:server)
+        Rails.application.server { file_watcher.start if listen? }
+      elsif process.supports_listening?
+        file_watcher.start if listen?
       end
-      run_hooks(:before_exit)
     end
 
-    class << self
-      def init_listeners
-        config = Lookbook.config
-        return unless config.listen == true
-
-        listen_paths = PathUtils.normalize_all(config.listen_paths)
-        if listen_paths.any?
-          preview_listener = Listen.to(*listen_paths,
-            only: /\.(#{config.listen_extensions.join("|")})$/,
-            wait_for_delay: 0.5,
-            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
-          register_listener(preview_listener)
-        end
+    config.after_initialize do
+      Engine.pages.load(Engine.page_paths)
+      parser.parse { run_hooks(:after_initialize) }
+    end
 
-        page_paths = PathUtils.normalize_all(config.page_paths)
-        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
-      end
+    def opts
+      Lookbook.config
+    end
 
-      def websocket
-        config = Lookbook.config
-        return @websocket unless @websocket.nil?
-        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 = nil
-        cable.connection_class = -> { Lookbook::Connection }
-        cable.logger = Lookbook.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
+    def run_hooks(event_name, *args)
+      Engine.hooks.for_event(event_name).each do |hook|
+        hook.call(Lookbook, *args)
       end
+    end
 
-      def websocket_mount_path
-        "#{mounted_path}/cable".gsub("//", "/") if websocket?
-      end
+    def parser
+      @_parser ||= PreviewParser.new(opts.preview_paths, Engine.tags)
+    end
 
-      def websocket?
-        websocket.present?
-      end
+    def file_watcher
+      @_file_watcher ||= FileWatcher.new(force_polling: opts.listen_use_polling)
+    end
 
-      def mounted_path
-        routes.find_script_name({})
-      end
+    def process
+      @_process ||= Process.new(env: Rails.env)
+    end
+
+    def listen?
+      opts.listen && process.supports_listening?
+    end
 
-      def parser
-        preview_paths = PathUtils.normalize_all(Lookbook.config.preview_paths)
-        @parser ||= Lookbook::Parser.new(preview_paths)
+    class << self
+      def mount_path
+        routes.find_script_name({})
       end
 
-      def log_level
-        Lookbook.logger.level
+      def mounted?
+        mount_path.present?
       end
 
       def app_name
-        name = if Gem::Version.new(Rails.version) >= Gem::Version.new("6.1")
+        name = if Rails.application.class.respond_to?(:module_parent_name)
           Rails.application.class.module_parent_name
         else
           Rails.application.class.parent_name
@@ -149,58 +123,57 @@ module Lookbook
         name.underscore
       end
 
-      def register_listener(listener)
-        listener.start
-        listeners << listener
-      end
-
-      def listeners
-        @listeners ||= []
+      def websocket
+        if mounted?
+          use_websocket = opts.auto_refresh && opts.listen && process.supports_listening?
+          @websocket ||= use_websocket ? Websocket.new(mount_path, logger: Lookbook.logger) : Websocket.noop
+        else
+          Websocket.noop
+        end
       end
 
-      def stop_listeners
-        listeners.each { |listener| listener.stop }
+      def panels
+        @_panels ||= PanelStore.init_from_config
       end
 
-      def run_hooks(event_name, *args)
-        hooks.for_event(event_name).each do |hook|
-          hook.call(Lookbook, *args)
-        end
+      def inputs
+        @_inputs ||= InputStore.init_from_config
       end
 
-      def reload_ui
-        websocket&.broadcast("reload", {})
+      def tags
+        @_tags ||= TagStore.init_from_config
       end
 
-      def prevent_listening?
-        Rails.env.test? || running_in_rake_task?
+      def hooks
+        @_hooks ||= HookStore.init_from_config
       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
+      def component_paths
+        @_component_paths ||= Array(PathUtils.to_absolute(opts.components_path))
       end
 
-      def panels
-        @panels ||= PanelStore.init_from_config
+      def page_paths
+        @_page_paths ||= PathUtils.normalize_paths(opts.page_paths)
       end
 
-      def inputs
-        @inputs ||= InputStore.init_from_config
+      def preview_paths
+        @_preview_paths ||= PathUtils.normalize_paths(opts.preview_paths)
       end
 
-      def tags
-        @tags ||= TagStore.init_from_config
+      def pages
+        @_pages ||= PageCollection.new
       end
 
-      def hooks
-        @hooks ||= HookStore.init_from_config
+      def previews
+        @_previews ||= PreviewCollection.new
       end
 
       attr_reader :preview_controller
     end
+
+    at_exit do
+      file_watcher.stop
+      run_hooks(:before_exit)
+    end
   end
 end

data/lib/lookbook/entities/collections/component_collection.rb

@@ -0,0 +1,4 @@
+module Lookbook
+  class ComponentCollection < EntityCollection
+  end
+end

data/lib/lookbook/entities/collections/concerns/hierarchical_collection.rb

@@ -0,0 +1,23 @@
+module Lookbook
+  module HierarchicalCollection
+    extend ActiveSupport::Concern
+
+    included do
+      def entities
+        @_cache[:entities] ||= collect_ordered_entities(to_tree(include_hidden: true))
+      end
+
+      def to_tree(include_hidden: false)
+        @_cache[include_hidden ? :tree_with_hidden : :tree] ||= EntityTreeBuilder.call(@entities, include_hidden: include_hidden)
+      end
+
+      protected
+
+      def collect_ordered_entities(start_node)
+        start_node.inject([]) do |entities, node|
+          entities.append(node.content? ? node.content : collect_ordered_entities(node))
+        end.flatten
+      end
+    end
+  end
+end

data/lib/lookbook/entities/collections/entity_collection.rb

@@ -0,0 +1,61 @@
+module Lookbook
+  class EntityCollection
+    include Enumerable
+
+    delegate_missing_to :entities
+
+    attr_reader :entities
+
+    def initialize(entities = nil)
+      @_cache = {}
+      @entities = []
+      add(entities)
+    end
+
+    def add(to_add = nil)
+      Array(to_add).each do |entity|
+        unless find_by_path(entity.path)
+          @entities.push(entity)
+        end
+      end
+      clear_cache
+    end
+
+    def find_by_id(id)
+      id = Utils.id(id)
+      entities.find { |entity| entity.id == id }
+    end
+
+    def find_by_path(path)
+      entities.find { |entity| entity.path.to_s == path.to_s }
+    end
+
+    def next(entity)
+      index = entities.find_index { |i| i.path == entity.path }
+      entities[index + 1] unless index.nil?
+    end
+
+    def previous(entity)
+      index = entities.find_index { |i| i.path == entity.path }
+      entities[index - 1] if !index.nil? && index > 0
+    end
+
+    def each(&block)
+      if block
+        entities.sort.each { |entity| yield entity }
+      else
+        to_enum(:each)
+      end
+    end
+
+    def flat_map(...)
+      entities.map(...).map(&:to_a).flatten
+    end
+
+    protected
+
+    def clear_cache
+      @_cache = {}
+    end
+  end
+end

data/lib/lookbook/entities/collections/page_collection.rb

@@ -0,0 +1,30 @@
+module Lookbook
+  class PageCollection < EntityCollection
+    include HierarchicalCollection
+
+    def load(page_paths)
+      @entities = []
+      clear_cache
+
+      file_paths = page_paths.flat_map do |dir|
+        PathUtils.normalize_paths(Dir["#{dir}/**/*.html.*", "#{dir}/**/*.md.*"].sort)
+      end
+
+      entities = file_paths.map { |path| PageCollection.entity(path) }
+      pages, sections = entities.partition { |page| page.type == :page }
+
+      page_dict = pages.index_by(&:lookup_path)
+      sections.each do |section|
+        parent = page_dict[section.lookup_path]
+        section.parent = parent
+        parent.add_section(section)
+      end
+
+      add(pages)
+    end
+
+    def self.entity(file_path)
+      File.basename(file_path).match?(%r{\[(.*?\w+)\]}) ? PageSection.new(file_path) : Page.new(file_path)
+    end
+  end
+end