{"id":22025171,"url":"https://github.com/drexed/lite-component","last_synced_at":"2026-04-20T19:07:06.720Z","repository":{"id":36476665,"uuid":"227698742","full_name":"drexed/lite-component","owner":"drexed","description":"Ruby on Rails view Components framework","archived":false,"fork":false,"pushed_at":"2023-03-08T20:26:22.000Z","size":87,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-01T02:40:48.878Z","etag":null,"topics":["component","rails","ruby","view"],"latest_commit_sha":null,"homepage":"https://drexed.github.io/lite-component","language":"Ruby","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drexed.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-12T21:20:52.000Z","updated_at":"2021-07-22T20:06:42.000Z","dependencies_parsed_at":"2024-11-30T07:14:53.260Z","dependency_job_id":"8ec7f0d7-fd4d-411c-b244-79e27712a17e","html_url":"https://github.com/drexed/lite-component","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":"0.021276595744680882","last_synced_commit":"e055da9100d0005a886bc4774ed1d9be84bb84cc"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/drexed/lite-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drexed%2Flite-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drexed%2Flite-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drexed%2Flite-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drexed%2Flite-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drexed","download_url":"https://codeload.github.com/drexed/lite-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drexed%2Flite-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32061288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","rails","ruby","view"],"created_at":"2024-11-30T07:14:47.220Z","updated_at":"2026-04-20T19:07:06.682Z","avatar_url":"https://github.com/drexed.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lite::Component\n\n[![Gem Version](https://badge.fury.io/rb/lite-component.svg)](http://badge.fury.io/rb/lite-component)\n[![Build Status](https://travis-ci.org/drexed/lite-component.svg?branch=master)](https://travis-ci.org/drexed/lite-component)\n\nLite::Component is a library for building component base objects. This technique simplifies\nand organizes often used or logically complex page objects.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'lite-component'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install lite-component\n\n## Table of Contents\n\n* [Setup](#setup)\n  * [Generator](#generator)\n  * [Assets](#assets)\n  * [Routes](#routes)\n* [Usage](#usage)\n  * [Rendering](#rendering)\n  * [Context](#context)\n  * [Helpers](#helpers)\n  * [Locals](#locals)\n  * [Iterations](#iterations)\n  * [Views](#views)\n\n## Setup\n\n### Generator\n\nUse `rails g component NAME` will generate the following files:\n\n```erb\napp/assets/javascripts/components/[name].js\napp/assets/stylesheets/components/[name].scss\napp/components/[name]_component.rb\napp/views/components/_[name].html.erb\n```\n\nThe generator also takes `--skip-css`, `--skip-js` and `--skip-erb` options. It will also\nproperly namespace nested components.\n\nIf a `ApplicationComponent` file in the `app/components` directory is available, the\ngenerator will create file that inherit from `ApplicationComponent` if not it will\nfallback to `Lite::Component::Base`.\n\n### Assets\n\nComponent's `*.scss` and `*.js` will be automatically load via the tree lookup in basic\nRails setups.\n\n### Routes\n\nIf you want to access route helpers in `*_component.rb` just include them like:\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n  include Rails.application.routes.url_helpers\n\n  def link_to_account\n    link_to('Return to account', account_path, class: 'text-underline')\n  end\n\nend\n```\n\n## Usage\n\n### Rendering\n\nTo render a component in any view template or partial, you can use the the provided helper.\nIts has the same setup as `render` and takes all [Action View Partials](https://api.rubyonrails.org/classes/ActionView/PartialRenderer.html)\noptions.\n\n```erb\n\u003c%= component(\"alert\") %\u003e\n\u003c%= component(AlertComponent, locals: { message: \"Something went right!\", type: \"success\" }) %\u003e\n```\n\nRender namespaced components by following standard naming conventions:\n\n```erb\n\u003c%= component(\"admin/alert\") %\u003e\n\u003c%= component(Admin::AlertComponent) %\u003e\n```\n\nRender collection of components just as you would render collections of partials.\n\n```erb\n\u003c%= component(\"comment_card\", collection: @comments, spacer_template: \"components/spacer\") %\u003e\n```\n\nIf you can skip rendering by evaluating complex logic in the `render?` method:\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def render?\n    object.some_complex_check?\n  end\n\nend\n```\n\n### Context\n\nAll components include `ActionView::Context` which will give you access to request context such as\nhelpers, controllers, etc. It can be accessed using `context` or `c` methods.\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def protected_page?\n    context.controller_name == 'admin'\n  end\n\nend\n```\n\n### Helpers\n\nAll components include `ActionView::Helpers` which will give you access to default Rails\nhelpers without the need to invoke the context. Use the helper methods to access helper methods\nfrom your `app/helpers` directory. It can be accessed using `helpers` or `h` methods.\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def close_icon\n    h.icon_tag(:close)\n  end\n\n  def link_to_close\n    link_to(close_icon, '#', data: { alert: :dismiss })\n  end\n\nend\n```\n\n### Locals\n\nAll components include access to partial locals via the `locals` or `l` methods.\nYou can dump locals to hash via the `to_h` and `to_hash` methods.\n*Note: Objects will be automatically added to locals when rendering collections.*\n\n```erb\n\u003c%= component(\"alert\", locals: { object: @user }) %\u003e\n```\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def type_tag\n    \u003c\u003c~HTML.squish.html_safe\n      \u003cb\u003e#{locals.object.first_name}!\u003c/b\u003e\n    HTML\n  end\n\nend\n```\n\n### Iterations\n\nAll components will hav access to an iteration object which can be accessed\nusing the `iteration` or `i` methods. It provides access to each iterations\n`first?`, `last?`, `size`, and `index` methods.\n\n```erb\n\u003c%= component(\"alert\", collection: @users) %\u003e\n```\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def limit_hit?\n    i.index == 5\n  end\n\nend\n```\n\n### Views\n\n*For the following examples, components will have the following setup:*\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def link_to_back\n    link_to('Go back', :back, class: 'text-underline')\n  end\n\nend\n```\n\n```erb\n\u003c%= component(\"alert\", collection: @users, locals: { message: \"Something went right!\", type: \"success\" }) %\u003e\n```\n\nComponent view partials behave just as a normal view partial would. All locals can be\naccessed by their key.\n\n```erb\n\u003c%# app/views/components/_alert.html.erb %\u003e\n\n\u003cdiv class=\"alert alert-\u003c%= type %\u003e\" role=\"alert\"\u003e\n  \u003c%= message %\u003e\n\u003c/div\u003e\n```\n\nAccess to anything provided within its `*_component.rb` file can be done using the\n`component` or `c` local methods which is the instance of the component.\n\n```erb\n\u003c%# app/views/components/_alert.html.erb %\u003e\n\n\u003cdiv class=\"alert alert-\u003c%= type %\u003e\" role=\"alert\"\u003e\n  \u003c%= component.locals.message %\u003e\n  \u003c%= component.link_to_back %\u003e\n\u003c/div\u003e\n```\n\nRendering a collection will automatically give you access to the iteration and object variables.\n\n```erb\n\u003c%# app/views/components/_alert.html.erb %\u003e\n\n\u003cdiv class=\"alert alert-\u003c%= type %\u003e\" role=\"alert\"\u003e\n  \u003c% if iteration.size \u003e 1 %\u003e\n    Alert #\u003c%= iteration.index %\u003e\n    \u003c% content_tag(:br, nil) unless iteration.last? %\u003e\n  \u003c% end %\u003e\n\n  Hi \u003c%= object.first_name %\u003e,\n  \u003cbr /\u003e\n  \u003c%= message %\u003e\n\u003c/div\u003e\n```\n\nTo bypass having a partial and just rendering content directly override the `render_content` method.\n\n```ruby\n# app/components/alert_component.rb\n\nclass AlertComponent \u003c Lite::Component::Base\n\n  def render_content\n    content_tag(:span, 'Success', class: \"alert-#{l.type}\")\n  end\n\nend\n```\n\nTo add components as part of another component build a `block` and `yield` it in the component's view.\n\n```erb\n\u003c%# app/views/components/_sidebar.html.erb %\u003e\n\n\u003cdiv class=\"sidebar\"\u003e\n  \u003c%= component(\"sidebar/navigation\", locals: { class_name: \"js-nav-links\" }) do |c| %\u003e\n    \u003c% c.add(\"sidebar/navigation/link\", locals: { text: \"Link: 1\", path: \"/home\", active: false }) %\u003e\n    \u003c% c.add(\"sidebar/navigation/link\", locals: { text: \"Link: 2\", path: \"/about\", active: true }) %\u003e\n    \u003c% c.add(\"sidebar/navigation/link\", locals: { text: \"Link: 3\", path: \"/help\", active: false }) do |n_c| %\u003e\n      \u003c% n_c.add(\"sidebar/something\", locals: { test: \"something\" }) %\u003e\n    \u003c% end %\u003e\n  \u003c% end %\u003e\n\u003c/div\u003e\n```\n\n```erb\n\u003c%# app/views/components/sidebar/_navigation.html.erb %\u003e\n\n\u003cdiv class=\"sidebar-navigation\"\u003e\n  \u003c%= c.yield %\u003e\n\u003c/div\u003e\n```\n\n```erb\n\u003c%# app/views/components/sidebar/navigation/_link.html.erb %\u003e\n\n\u003c%= link_to(text, path, class: (\"active\" if l.active)) %\u003e\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\n\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/lite-component. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the Lite::Component project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/lite-component/blob/master/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrexed%2Flite-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrexed%2Flite-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrexed%2Flite-component/lists"}