Rails ViewComponent 도우미

저와 같은 Ruby Dev는 아무리 작더라도 장황한 것을 좋아하지 않습니다. 구문 설탕은 Ruby의 기본 매력 중 하나입니다.

Rails ViewComponents는 특히 Tailwind와 같은 유틸리티 스타일 CSS와 함께 사용할 때 Rails에 추가된 훌륭한 기능입니다.
그러나 이것을 반복해서 작성하면render OCD가 갉아먹습니다.
뷰 템플릿의 상수, :shock:, 오버로드된render 메서드, 모든 괄호!

render(SomeAwesomeComponent.new) do |component|
  Render(AlertComponent.new(type: 'success') do |component|
    render(ButtonComponent.new(classes: 'justify-end ml-2 items-start')
  end
end

내가 당신에게 말하면, 당신은 도우미를 만들 수 있습니다. 그렇죠?

더 멋진, 더 소문자, 더 적은 괄호, 더 보기 쉬운

component :some_awesome_component do |awesome|
  component :alert, type: 'success' do |alert|
    component :button, classes: 'justify-end ml-2 items-start'
  end
end

나는 component를 사용하기로 선택했지만 매우 간결하게 가고 싶다면 할 수도 있습니다.

vc :some_awesome_component do |awesome|
  vc :alert, type: 'success' do |alert|
    vc :button, classes: 'justify-end ml-2 items-start'
  end
end

이것은 ... 아래에서 낮은 저렴한 가격으로 귀하의 것일 수 있습니다.

  def component(name, context: nil, **args, &block)
    return render_component_in(context, name, **args, &block) if context

    render component_class_for(name).new(args), &block
  end

  def render_component_in(context, name, **args, &block)
    component_class_for(name).new(args).render_in(context, &block)
  end

  private

  def component_class_for(path)
    name, namespace = path.to_s.split('/').reverse

    file_name = "#{name}_component"
    component_name = file_name.classify
    namespace ||= namespace(file_name)
    return "#{namespace.capitalize}::#{component_name}".constantize unless namespace == 'components'

    component_name.constantize
  end

게다가 원자성(atomic)과 같은 일부 디자인 패턴을 따르고 구성 요소를 이와 같이 구성하면 별도namespace 메서드를 만들어 구성 요소 경로를 검색하여 다음과 같은 디자인 시스템을 전달할 수 있습니다.

organism :some_awesome_component do |awesome|
  molecule :alert, type: 'success' do |alert|
    atom :button, classes: 'justify-end ml-2 items-start'
  end
end

여기에서 RailsByte를 찾을 수 있습니다https://railsbytes.com/templates/xjNsDY.