{"id":21203417,"url":"https://github.com/dux/view-cell","last_synced_at":"2025-07-10T06:34:05.616Z","repository":{"id":56897463,"uuid":"338144922","full_name":"dux/view-cell","owner":"dux","description":"View cell is clean, simple explicit and strait-forward web view cell/component for use in Rails/Sinatra/Lux.","archived":false,"fork":false,"pushed_at":"2024-01-06T19:31:18.000Z","size":52,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-02-23T10:17:48.795Z","etag":null,"topics":["html","ruby","templating"],"latest_commit_sha":null,"homepage":"https://github.com/dux/view-cell","language":"Ruby","has_issues":true,"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/dux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-02-11T20:29:50.000Z","updated_at":"2023-04-07T00:44:18.000Z","dependencies_parsed_at":"2024-01-05T15:27:17.710Z","dependency_job_id":"a4847406-22d4-45ea-9531-cbc5a951c534","html_url":"https://github.com/dux/view-cell","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"fe7b301c2b5a33a8434ef7230c939b97e020a275"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dux%2Fview-cell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dux%2Fview-cell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dux%2Fview-cell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dux%2Fview-cell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dux","download_url":"https://codeload.github.com/dux/view-cell/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225624753,"owners_count":17498481,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["html","ruby","templating"],"created_at":"2024-11-20T20:23:53.459Z","updated_at":"2024-11-20T20:23:54.715Z","avatar_url":"https://github.com/dux.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://i.imgur.com/nQ7iNPy.png\" align=\"right\" title=\"image stolen from some js/react plugin\"/\u003e\n\n# view-cell / ruby\n\nView cell is clean, simple explicit and strait-forward web view cell/component for use in Rails/Sinatra/Lux.\n\nA cell is an object that represent a fragment of your UI. It can embrace an entire page, a single comment container in a thread or just an avatar image link.\n\nSimplifed, a cell is an object that can render a template or return html data from html builder as `html-tag`.\n\n## Installation\n\nto install\n\n`gem install view-cell`\n\nor in Gemfile\n\n`gem 'view-cell'`\n\nand to use\n\n`require 'view-cell'`\n\n## How to use\n\nCommon usage is to use it views, but they you can easily use it standalone.\n\n## Usage\n\n### Simple example\n\nBasic example\n\n```ruby\nrequire 'view-cell'\n\n# foo_cell.rb\nclass FooCell \u003c ViewCell\n  def bar\n    :baz\n  end\n\n  def sq num\n    num * num\n  end\nend\n\nFooCell.new.bar # :baz\n\n# index.html.erb\n\u003c%= cell.foo.bar %\u003e   # :baz\n\u003c%= cell.foo.sq(3) %\u003e # 9\n```\n\n### Example for template render\n\nIf yo want to keep template in separate file\n\n```ruby\n# foo_cell.rb\nclass FooCell \u003c ViewCell\n  # defaults to current cell folder, but can be set to any path\n  template_root './app/views/cells'\n\n  # delegate image_tag method call to parent (caller scope)\n  # in Rails that would be ActionView::Base\n  delegate :image_tag\n\n  def bar num\n    @number = num\n    template :bar\n  end\nend\n\n# bar.html.haml\n= image_tag '/foo.png'            # when delegated to parent\n= parent.image_tag '/foo.png'     # if you do not want to delegate :image_tag\n= parent { image_tag '/foo.png' } # same\n= @number * @number               # instance varibles are passed\n\n```\n\n### Return html with integrated tag builder (using \u003ca href=\"https://github.com/dux/html-tag\"\u003ehtml-tag\u003c/a\u003e gem)\n\nIt is usually easier to build html then use templates\n\n```ruby\n# ./app/lib/cell/foo_cell.rb\nrequire 'html-tag'\n\nclass FooCell \u003c ViewCell\n  def bar\n    tag.div class: :bar do\n      p 'foo'\n    end\n  end\nend\n\n# ./app/views/index.erb\n\u003c%= cell.foo.bar %\u003e # \u003cdiv class=\"bar\"\u003e\u003cp\u003efoo\u003c/p\u003e\u003c/div\u003e\n```\n\n### Integrated css / scss parser\n\nUses `gem 'scssc'` (`https://github.com/sass/sassc-ruby`, loaded only if used) to add integrated css capabilities\n\n```ruby\n# ./app/lib/cell/foo_cell.rb\nclass FooCell \u003c ViewCell\n  # css / scss file path\n  css 'foo/bar.scss'\n\n  # add inline css / scss\n  css %[\n    .foo {\n      .bar {\n        font-weight: bold;\n      }\n    }\n  ]\nend\n\nViewCell.css # get compiled css\n```\n\n### Annotated example with all features explained\n\n* `before` in `ApplicationCell` superclass and `before` in `FooCell` will be called before any code\n* `delegate` will send any message from cell to a parent. you need to use that if you want to use Rails view methods like `image_tag` without `parent` prefix.\n* template -\u003e renders template\n  * `template_root` will point to root folder for templates defined as symbol. You can use `%s` to be replaced by template part (`FooCell` -\u003e `foo`).\n  * `template :symbol` -\u003e render using default path or using `template_root`\n  * `template 'relative/path'` -\u003e render using default path or using `template_root`\n  * `template '/abslute/path'` -\u003e does not use `template_root`\n\n```ruby\nclass ApplicationCell \u003c ViewCell\n  # delegate calls to parent (caller scope)\n  # this will work if cell is called from a view, not if it is called from a controller\n  delegate :request, :session, :current_user, :image_tag\n\n  # css / scss file path\n  css 'foo/bar.scss'\n\n  # add inline css / scss\n  css %[\n    .foo {\n      .bar {\n        font-weight: bold;\n      }\n    }\n  ]\n\n  # define before in superclass\n  def before\n    # define @user as method call from parent\n    @user = parent { user }\n\n    # same thing\n    @user = parent.user\n\n    # you can copy instance variables from parent scope\n    @foo = parent { @foo }\n\n    # same thing\n    @foo = parent.instance_varaible_get :@foo\n  end\nend\n\nclass FooCell \u003c ApplicationCell\n  # define before in current class\n  # it will be called before any method call\n  def before\n    super\n    @time = Time.now\n  end\n\n  # same thing\n  before do\n    @time = Time.now\n  end\n\n  # defaults to './app/views/' + class_part\n  # but can be set to any path\n  # %s is reference for class_part\n  template_root './app/views/cells/%s'\n\n  def bar num\n    # define instance variable available in templates\n    @number = num\n\n    # renders './app/views/cells/foo/bar.[erb, haml]'\n    template :bar\n\n    # renders './app/views/cells/custom/bar.[erb, haml]'\n    template 'custom/bar'\n\n    # renders './custom/bar.[erb, haml]'\n    template './custom/bar'\n  end\nend\n```\n\n### cell view - syntax sugar\n\nYou can pass object or list of objects to `cell` view method.\n\n```ruby\n# cell.user.render(user)\n= cell @user\n\n# @users.each { |user| cell.user.render(user) }.join('')\n= cell @users\n```\n\n### Raw usage for controlers and console\n\n```ruby\nclass FooCell \u003c ViewCell\n  def sq num=nil\n    num ||= @number\n    num * num\n  end\nend\n\ncell = FooCell.new(self || or_any_scope_you_wish)\ncell.sq(3) # 8\n\n# hash keys passed as params are converted to instance varialbes\n# in this case @number = 4\ncell = FooCell.new(self, number: 4)\ncell.sq # 16\n\n# or dinamic alternative\nViewCell.get(self, :foo, number: 5).sq # 25\n```\n\n### Manual install of cell proxy method\n\nThis will enable usage of `cell.name.method` proxy helper.\n\n```ruby\nclass CustomClass\n  include ViewCell::ProxyMethod\nend\n```\n\n## Test\n\n`rake test`\n\n## Dependency\n\n* `tilt` gem \u0026sdot; [link](https://github.com/rtomayko/tilt) \u0026sdot; allready included with by Rails\n* `dry-inflector` gem \u0026sdot; [link](https://github.com/dry-rb/dry-inflector) \u0026sdot; only if not using Rails\n\n## Development\n\nAfter checking out the repo, run `bundle install` to install dependencies. Then, run `rspec` to run the tests.\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/dux/view-cell.\nThis project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the\n[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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdux%2Fview-cell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdux%2Fview-cell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdux%2Fview-cell/lists"}