phlex 0.4.0 → 0.5.0

data/docs/pages/templates.rb

@@ -16,7 +16,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "hello.rb", <<~RUBY
-						class Hello < Phlex::View
+						class Hello < Phlex::HTML
 							def template
 								h1(class: "text-xl font-bold") { "👋 Hello World!" }
 							end
@@ -34,7 +34,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "hello.rb", <<~RUBY
-						class Hello < Phlex::View
+						class Hello < Phlex::HTML
 							def template
 								div(data: { controller: "hello" }) do
 									# ...
@@ -54,7 +54,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "channel_controls.rb", <<~RUBY
-						class ChannelControls < Phlex::View
+						class ChannelControls < Phlex::HTML
 							def template
 								input(
 									value: "1",
@@ -84,7 +84,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "example.rb", <<~RUBY
-						class Example < Phlex::View
+						class Example < Phlex::HTML
 							def template
 								template_tag do
 									img src: "hidden.jpg", alt: "A hidden image."
@@ -104,7 +104,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "heading.rb", <<~RUBY
-						class Heading < Phlex::View
+						class Heading < Phlex::HTML
 							def template
 								h1 do
 									strong { "Hello " }
@@ -125,7 +125,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "links.rb", <<~RUBY
-						class Links < Phlex::View
+						class Links < Phlex::HTML
 							def template
 								a(href: "/") { "Home" }
 								whitespace

data/docs/pages/testing/capybara.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "minitest"
+
+module Pages
+	module Testing
+		class Capybara < ApplicationPage
+			def template
+				render Layout.new(title: "Testing with Capybara") do
+					render Markdown.new(<<~MD)
+						# Testing with Capybara
+
+						Require `phlex/testing/capybara` and include `Phlex::Testing::Capybara::ViewHelper` to use [Capybara](http://teamcapybara.github.io/capybara/) matchers.
+
+						The `render` method will return a `Capybara::Node::Simple` and set the `page` attribute to the result.
+					MD
+
+					render Example.new do |e|
+						e.tab "test.rb", <<~RUBY
+							require "phlex/testing/capybara"
+
+							class TestExample < Minitest::Test
+								include Phlex::Testing::Capybara::ViewHelper
+
+								def test_example
+									render Example.new("Joel")
+									assert_select "h1", text: "Hello Joel"
+								end
+							end
+						RUBY
+
+						e.tab "hello.rb", <<~RUBY
+							class Hello < Phlex::HTML
+								def initialize(name)
+									@name = name
+								end
+
+								def template
+									h1 { "Hello \#{@name}" }
+								end
+							end
+						RUBY
+					end
+				end
+			end
+		end
+	end
+end

data/docs/pages/testing/getting_started.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Pages
+	module Testing
+		class GettingStarted < ApplicationPage
+			def template
+				render Layout.new(title: "Getting Started Testing Phlex Views") do
+					render Markdown.new(<<~MD)
+						# Getting Started
+
+						The `Phlex::Testing::ViewHelper` module defines `render` allowing you to render Phlex views directly in your tests and make assertions against the output.
+					MD
+
+					render Example.new do |e|
+						e.tab "test/test_hello.rb", <<~RUBY
+							require "phlex/testing/view_helper"
+
+							class TestHello < Minitest::Test
+								include Phlex::Testing::ViewHelper
+
+								def test_hello_output_includes_name
+									output = render Hello.new("Joel")
+									assert_equal "<h1>Hello Joel</h1>", output
+								end
+							end
+						RUBY
+
+						e.tab "hello.rb", <<~RUBY
+							class Hello < Phlex::HTML
+								def initialize(name)
+									@name = name
+								end
+
+								def template
+									h1 { "Hello \#{@name}" }
+								end
+							end
+						RUBY
+					end
+				end
+			end
+		end
+	end
+end

data/docs/pages/testing/nokogiri.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module Pages
+	module Testing
+		class Nokogiri < ApplicationPage
+			def template
+				render Layout.new(title: "Testing with Nokogiri") do
+					render Markdown.new(<<~MD)
+						# Testing with Nokogiri
+
+						Phlex includes test helpers for working with rendered views as [Nokogiri](https://nokogiri.org) documents and fragments.
+
+						Nokogiri is not a dependency of Phlex, so you’ll need to install that separately to use this helper.
+
+						## Documents
+
+						If your view represents a whole HTML document, you can require `phlex/testing/nokogiri` and include the `Phlex::Testing::Nokogiri::DocumentHelper` module to render your view as `Nokogiri::Document` using the `render` method.
+					MD
+
+					render Example.new do |e|
+						e.tab "test.rb", <<~RUBY
+							require "phlex/testing/nokogiri"
+
+							class TestExample < Minitest::Test
+								include Phlex::Testing::Nokogiri::DocumentHelper
+
+								def test_example
+									output = render Example.new
+									assert_equal "Hello Joel", output.css("h1").text
+								end
+							end
+						RUBY
+
+						e.tab "hello.rb", <<~RUBY
+							class Hello < Phlex::HTML
+								def initialize(name)
+									@name = name
+								end
+
+								def template
+									h1 { "Hello \#{@name}" }
+								end
+							end
+						RUBY
+					end
+
+					render Markdown.new(<<~MD)
+						## Fragments
+
+						If your view represents a fragment (partial), you can require `phlex/testing/nokogiri` and include the `Phlex::Testing::Nokogiri::FragmentHelper` module to render your view as `Nokogiri::Fragment` with the `render` method.
+					MD
+
+					render Example.new do |e|
+						e.tab "test.rb", <<~RUBY
+							require "phlex/testing/nokogiri"
+
+							class TestExample < Minitest::Test
+								include Phlex::Testing::Nokogiri::FragmentHelper
+
+								def test_example
+									output = render Example.new("Joel")
+									assert_equal "Hello Joel", output.css("h1").text
+								end
+							end
+						RUBY
+
+						e.tab "hello.rb", <<~RUBY
+							class Hello < Phlex::HTML
+								def initialize(name)
+									@name = name
+								end
+
+								def template
+									h1 { "Hello \#{@name}" }
+								end
+							end
+						RUBY
+					end
+				end
+			end
+		end
+	end
+end

data/docs/pages/testing/rails.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Pages
+	module Testing
+		class Rails < ApplicationPage
+			def template
+				render Layout.new(title: "Testing Phlex Views in Rails") do
+					render Markdown.new(<<~MD)
+						# Testing Phlex views in Rails
+
+						When you include `Phlex::Testing::Rails::ViewHelper`, views rendered in the test will have a view context, so they can use Rails helpers.
+					MD
+				end
+			end
+		end
+	end
+end

data/docs/pages/translations.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Pages
+	class Translations < ApplicationPage
+		def initialize
+			I18n.backend.store_translations(
+				"pt-BR", {
+					hello: "Olá",
+					views: { feedback: { welcome_message: { hello: "Olá" } } }
+				}
+			)
+			I18n.locale = "pt-BR"
+		end
+
+		def template
+			render Layout.new(title: "Translations") do
+				render Markdown.new(<<~MD)
+					# Translations
+
+					Phlex has built-in support for translations with the **[I18n Gem](https://github.com/ruby-i18n/i18n)**.
+
+					Just include `Phlex::Translation` in your view and use the `translate` method to access a translation.
+				MD
+
+				render Example.new do |e|
+					e.tab "welcome_message.rb", <<~RUBY
+						class WelcomeMessage < Phlex::HTML
+							include Phlex::Translation
+
+							def template
+								h1 { translate("hello") }
+							end
+						end
+					RUBY
+
+					e.tab "pt-PR.yml", <<~YAML, syntax: :yaml
+						pt-BR:
+						  hello: "Olá"
+					YAML
+
+					e.execute "WelcomeMessage.new.call"
+				end
+
+				render Markdown.new(<<~MD)
+					## Implicit scoopes
+
+					Start your translate key with a `.` to use the name of the view as an implicit scope.
+				MD
+
+				render Example.new do |e|
+					e.tab "welcome_message.rb", <<~RUBY
+						module Views
+							module Feedback
+								class WelcomeMessage < Phlex::HTML
+									include Phlex::Translation
+
+									def template
+										h1 { translate(".hello") }
+									end
+								end
+							end
+						end
+					RUBY
+
+					e.tab "pt-BR.yml", <<~YAML, syntax: :yaml
+						pt-BR:
+						  views:
+						    feedback:
+						      welcome_message:
+						        hello: Olá
+					YAML
+
+					e.execute <<~RUBY
+						Views::Feedback::WelcomeMessage.translation_path = 'views.feedback.welcome_message'
+						Views::Feedback::WelcomeMessage.new.call
+					RUBY
+				end
+			end
+		end
+	end
+end

data/docs/pages/views.rb

@@ -9,12 +9,12 @@ module Pages
 
 					Phlex Views are Ruby objects that represent your app's user interface — from pages and layouts and nav-bars, to headings and buttons and links.
 
-					You can create a view class by subclassing `Phlex::View` and defining a `template` instance method.
+					You can create a view class by subclassing `Phlex::HTML` and defining a `template` instance method.
 				MD
 
 				render Example.new do |e|
 					e.tab "hello.rb", <<~RUBY
-						class Hello < Phlex::View
+						class Hello < Phlex::HTML
 							def template
 								h1 { "👋 Hello World!" }
 							end
@@ -36,7 +36,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "hello.rb", <<~RUBY
-						class Hello < Phlex::View
+						class Hello < Phlex::HTML
 							def initialize(name:)
 								@name = name
 							end
@@ -58,7 +58,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "example.rb", <<~RUBY
-						class Example < Phlex::View
+						class Example < Phlex::HTML
 							def template
 								render Hello.new(name: "Joel")
 								render Hello.new(name: "Alexandre")
@@ -67,7 +67,7 @@ module Pages
 					RUBY
 
 					e.tab "hello.rb", <<~RUBY
-						class Hello < Phlex::View
+						class Hello < Phlex::HTML
 							def initialize(name:)
 								@name = name
 							end
@@ -89,7 +89,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "card.rb", <<~RUBY
-						class Card < Phlex::View
+						class Card < Phlex::HTML
 							def template(&content)
 								article(class: "drop-shadow") do
 									yield_content(&content)
@@ -99,7 +99,7 @@ module Pages
 					RUBY
 
 					e.tab "example.rb", <<~RUBY
-						class Example < Phlex::View
+						class Example < Phlex::HTML
 							def template
 								render Card.new do
 									h1 { "👋 Hello!" }
@@ -123,13 +123,61 @@ module Pages
 					Since the block of content was the only thing we need in the `<article>` element, we could have just passed the content block to the element instead.
 
 					```ruby
-					class Card < Phlex::View
+					class Card < Phlex::HTML
 						def template(&content)
 							article(class: "drop-shadow", &content)
 						end
 					end
 					```
 				MD
+
+				render Markdown.new(<<~MD)
+					## Registering custom elements
+
+					You can register custom elements with the `register_element` macro. The custom element will only be available in the view where it is registered and subclasses of that view.
+				MD
+
+				render Example.new do |e|
+					e.tab "example.rb", <<~RUBY
+						class Example < Phlex::HTML
+							register_element :trix_editor
+
+							def template
+								trix_editor input: "content", autofocus: true
+							end
+						end
+					RUBY
+
+					e.execute "Example.new.call"
+				end
+
+				render Markdown.new(<<~MD)
+					## Callbacks
+
+					Prepend the `Phlex::HTML::Callbacks` module, and if you define `#before_rendering_template` and/or `#after_rendering_template` method in your view, they will be called immediately before and after your template is rendered.
+				MD
+
+				render Example.new do |e|
+					e.tab "example.rb", <<~RUBY
+						class Example < Phlex::HTML
+							prepend Phlex::HTML::Callbacks
+
+							def before_rendering_template
+								h1 { "Hello" }
+							end
+
+							def template
+								h2 { "World" }
+							end
+
+							def after_rendering_template
+								h3 { "Bye" }
+							end
+						end
+					RUBY
+
+					e.execute "Example.new.call"
+				end
 			end
 		end
 	end

data/fixtures/compiler_test_helpers.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module CompilerTestHelpers
+	# @return Array
+	def compile(view)
+		@compiler = Phlex::Compiler.new(view)
+		output = []
+
+		mock(@compiler) do |m|
+			m.before(:redefine) { output << _1 }
+		end
+
+		@compiler.call
+
+		output.map! do |method|
+			Phlex::Compiler::Formatter.format("", SyntaxTree.parse(method))
+		end
+	end
+end

data/fixtures/content.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Fixtures
+	module Content
+		class BareString < Phlex::HTML
+			def template
+				h1 { "Hello" }
+			end
+		end
+
+		class Symbol < Phlex::HTML
+			def template
+				h1 { :hello }
+			end
+		end
+
+		class Float < Phlex::HTML
+			def template
+				h1 { 1.2 }
+			end
+		end
+
+		class Integer < Phlex::HTML
+			def template
+				h1 { 1 }
+			end
+		end
+
+		class Variable < Phlex::HTML
+			def template
+				greeting = "Hello"
+				h1 { greeting }
+			end
+		end
+
+		class InstanceVariable < Phlex::HTML
+			def template
+				h1 { @hello }
+			end
+		end
+
+		class NestedTags < Phlex::HTML
+			def template
+				article {
+					h1 { "Inside" }
+				}
+			end
+		end
+
+		class NonMutatingNestedContent < Phlex::HTML
+			def template
+				div { say_hello }
+			end
+
+			def say_hello
+				"Hello"
+			end
+		end
+	end
+end

data/fixtures/dummy/app/views/application_view.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Views
+	class ApplicationView < Phlex::HTML
+		include Rails.application.routes.url_helpers
+		include Phlex::Translation
+	end
+end

data/fixtures/dummy/app/views/articles/form.rb

@@ -2,7 +2,7 @@
 
 module Views
 	module Articles
-		class Form < Phlex::View
+		class Form < ApplicationView
 			include Phlex::Rails::Helpers::FormWith
 
 			def template

data/fixtures/dummy/app/views/card.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Views
-	class Card < Phlex::View
+	class Card < ApplicationView
 		def template(&block)
 			article class: "drop-shadow p-5 rounded", &block
 		end

data/fixtures/dummy/app/views/comments/comment.rb

@@ -2,7 +2,7 @@
 
 module Views
 	module Comments
-		class Comment < Phlex::View
+		class Comment < ApplicationView
 			def initialize(name:, body:)
 				@name = name
 				@body = body

data/fixtures/dummy/app/views/comments/reaction.rb

@@ -2,7 +2,7 @@
 
 module Views
 	module Comments
-		class Reaction < Phlex::View
+		class Reaction < ApplicationView
 			def initialize(emoji:)
 				@emoji = emoji
 			end

data/fixtures/dummy/app/views/heading.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Views
-	class Heading < Phlex::View
+	class Heading < ApplicationView
 		def template(&block)
 			h1(&block)
 		end

data/fixtures/layout.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Example
-	class LayoutComponent < Phlex::View
+	class LayoutComponent < Phlex::HTML
 		def initialize(title: "Example")
 			@title = title
 		end
@@ -9,7 +9,7 @@ module Example
 		def template(&block)
 			html do
 				head do
-					title @title
+					title { @title }
 					meta name: "viewport", content: "width=device-width,initial-scale=1"
 					link href: "/assets/tailwind.css", rel: "stylesheet"
 				end
@@ -17,9 +17,9 @@ module Example
 				body class: "bg-zinc-100" do
 					nav class: "p-5", id: "main_nav" do
 						ul do
-							li(class: "p-5") { a "Home", href: "/" }
-							li(class: "p-5") { a "About", href: "/about" }
-							li(class: "p-5") { a "Contact", href: "/contact" }
+							li(class: "p-5") { a(href: "/") { "Home" } }
+							li(class: "p-5") { a(href: "/about") { "About" } }
+							li(class: "p-5") { a(href: "/contact") { "Contact" } }
 						end
 					end
 

data/fixtures/page.rb

@@ -1,37 +1,31 @@
 # frozen_string_literal: true
 
 module Example
-	class Page < Phlex::View
+	class Page < Phlex::HTML
 		def template
 			render LayoutComponent.new do
-				h1 "Hi"
+				h1 { "Hi" }
 
-				5.times do
-					div do
-						10.times do
-							a "Test", href: "something", unique: SecureRandom.uuid, data: { value: 1 }
+				table id: "test", class: "a b c d e f g" do
+					tr do
+						td id: "test", class: "a b c d e f g" do
+							span { "Hi" }
 						end
-					end
-				end
 
-				table do
-					thead do
-						10.times do
-							tr do
-								th "Hi"
-							end
+						td id: "test", class: "a b c d e f g" do
+							span { "Hi" }
+						end
+
+						td id: "test", class: "a b c d e f g" do
+							span { "Hi" }
+						end
+
+						td id: "test", class: "a b c d e f g" do
+							span { "Hi" }
 						end
-					end
 
-					tbody do
-						100.times do
-							tr class: "a b c d e f g", id: "something" do
-								10.times do
-									td class: "f g h i j k l" do
-										span "Test"
-									end
-								end
-							end
+						td id: "test", class: "a b c d e f g" do
+							span { "Hi" }
 						end
 					end
 				end