Register view_component controllers

app/assets/config/manifest.js

@@ -3,3 +3,4 @@
 //= link_tree ../builds
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../../components .js

app/components/packages_paginated/component.html.erb

@@ -0,0 +1,19 @@
+<div data-controller="packages_paginated--component">
+  <%= paginate @packages %>
+  <div class="fixed bg-white right-12">
+    <%= paginate @packages %>
+  </div>
+  <div
+    class="w-full space-y-4 pb-1:
+    itemscope
+    itemtype="https://schema.org/ItemList"
+  >
+    <meta itemprop="numberOfItems" content="<%= @packages.total_count %>">
+    <% @packages.each_with_index do |package, i| %>
+      <%= render PackageCardComponent.new(package: package, position: @first_index + i) %>
+    <% end %>
+  </div>
+  <div
+    data-controller-target="afterLast"
+  ></div>
+</div>

app/components/packages_paginated/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class PackagesPaginated::Component < ViewComponent::Base
+  def initialize(packages:)
+    @packages = packages
+    @first_index = (@packages.current_page - 1) * (@packages.limit_value) + 1
+  end
+end

app/components/packages_paginated/component_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    console.log("connected", this.element);
+  }
+}

app/javascript/controllers/index.js

@@ -7,5 +7,5 @@ import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
 eagerLoadControllersFrom("controllers", application)
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
-// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
-// lazyLoadControllersFrom("controllers", application)
+import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+lazyLoadControllersFrom("components", application)

app/models/package.rb

@@ -102,6 +102,6 @@ def self.skip_updating?(new_vk_document_id, new_published_at)
     visible
       .order(published_at: :desc, id: :desc)
       .page(page)
-      .per(12)
+      .per(5)
   }
 end

app/views/packages/index.html.erb

@@ -21,4 +21,4 @@
   %>
 </p>
 
-<%= render PackageCardsComponent.new(packages: @packages) %>
+<%= render PackagesPaginated::Component.new(packages: @packages) %>

config/application.rb

@@ -30,5 +30,12 @@ class Application < Rails::Application
       c.title_limit = 0
       c.description_limit = 0
     end
+
+    initializer "app_assets", after: "importmap.assets" do
+      Rails.application.config.assets.paths << Rails.root.join('app') # for component sidecar js
+    end
+
+    # Sweep importmap cache for components
+    config.importmap.cache_sweepers << Rails.root.join('app/components')
   end
 end

config/importmap.rb

@@ -5,3 +5,4 @@
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin_all_from "app/components", under: "components"