phlex 0.4.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5606a60fd7cce19c44c13c26ec1abb42f52252b71208aa77f7cecf49f95910be
-  data.tar.gz: 0c55bae86c2f14514108f7d58ab9c6e7d3bc88b5a89cc8cbb7156b86e355041d
+  metadata.gz: 46be4f70dd0d46a2cb9302ded83313b24530b33cd6c89346ffb5e7400a442285
+  data.tar.gz: 5d271c2096a6951e40f30a3725bdf82adeb5c2320f004d958cbe85383b1174dd
 SHA512:
-  metadata.gz: 60e835cad9721dcf6c353d84963a93bb2518b307df493f9a4c2fcaf737a69bdb9b7c32ed5b9e8a5c0049c1fea6445e77d75988de7998d4b65ac4b9781dc038e0
-  data.tar.gz: 664c9e1fb555019b40085ad49de87bc2f99619d19157603445590a7179390a52ba66dee614896d8c5901abce5fce1f34031a3b1a6e03931bcad76ba41b48e035
+  metadata.gz: 6aaad7ca0699dc4e8db3d2f29c902c172c3b0e44d8c7f07d54887dc0661fc6d44323313ec80eddfe1f3129e7ab544f40bc030356319fad9157c95172d4cf5a47
+  data.tar.gz: 7beb52b1b9c243e368a6094a5b16cadeadde32f3ed9277ed610a5c6d31d965038a1056739c185441402be96b4647a7943fc0492d0aad36240688a0d2b6683c23

data/.rubocop.yml

@@ -1,6 +1,26 @@
 inherit_from:
-  - "https://www.goodcop.style"
+  - "https://www.goodcop.style/rubocop.yml"
   - "https://www.goodcop.style/tabs.yml"
 
 AllCops:
   TargetRubyVersion: 2.7
+
+Style/PercentLiteralDelimiters:
+  Enabled: false
+
+Layout/CaseIndentation:
+  Enabled: false
+
+Style/StringConcatenation:
+  Enabled: false
+
+
+
+Security/Eval:
+  Enabled: false
+
+Style/MethodCallWithoutArgsParentheses:
+  Enabled: false
+
+Style/MixinUsage:
+  Enabled: false

data/Gemfile

@@ -5,19 +5,32 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gemspec
 
-gem "rake"
-
-gem "sus", group: [:test]
-gem "rails", group: [:test]
-gem "rouge", group: [:docs]
-gem "webrick", group: [:docs]
-gem "zeitwerk", group: [:docs]
-gem "redcarpet", group: [:docs]
-gem "combustion", group: [:test]
 gem "benchmark-ips"
-gem "htmlbeautifier", group: [:docs]
 gem "benchmark-memory"
-gem "rubocop", require: false, github: "joeldrapper/rubocop", branch: "rubocop-user-agent"
+gem "capybara"
+gem "rails"
+gem "rubocop"
+gem "solargraph"
+gem "sus"
 gem "syntax_suggest"
-gem "foreman"
-gem "filewatcher", group: [:docs]
+gem "zeitwerk"
+
+group :test do
+	gem "i18n"
+	gem "memory_profiler"
+	gem "covered"
+end
+
+group :rails do
+	gem "combustion"
+end
+
+group :docs do
+	gem "filewatcher"
+	gem "htmlbeautifier"
+	gem "redcarpet"
+	gem "markly"
+	gem "webrick"
+	gem "rouge"
+	gem "kramdown"
+end

data/README.md

@@ -20,7 +20,7 @@ Maintaining a library is a lot of work. If your company benefits from this work
 
 ### Security 🚨
 
-If you’ve found a potential security issue, please email [joel+security@drapper.me](mailto:joel+security@drapper.me).
+If you’ve found a potential security issue, please email [security@phlex.fun](mailto:security@phlex.fun).
 
 ### Thanks 🙏
 

data/SECURITY.md

@@ -2,4 +2,4 @@
 
 ## Reporting a Vulnerability
 
-If you found a possible security vulnerability in Phlex, please email joel+security@drapper.me.
+If you found a possible security vulnerability in Phlex, please email security@phlex.fun.

data/bench.rb

@@ -9,6 +9,13 @@ require_relative "fixtures/layout"
 
 puts RUBY_DESCRIPTION
 
+a = Example::Page.new.call
+# Example::Page.compile
+# Example::LayoutComponent.compile
+b = Example::Page.new.call
+
+raise unless a == b
+
 Benchmark.ips do |x|
 	x.report("Page") { Example::Page.new.call }
 end

data/config/sus.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "covered/sus"
+include Covered::Sus
+
+require "phlex"
+require "bundler"
+require "view_component"
+
+Bundler.require :test
+
+require_relative "../fixtures/view_helper"
+require_relative "../fixtures/compiler_test_helpers"
+
+Zeitwerk::Loader.eager_load_all

data/docs/assets/application.css

@@ -24,3 +24,9 @@ pre { tab-size: 2; }
 p {
   @apply my-5
 }
+
+.prose ol, .prose ul {
+  list-style: revert;
+  margin: 0 0 0 1rem;
+  padding: 0 0 0 1rem;
+}

data/docs/build.rb

@@ -6,12 +6,14 @@ $stdout.sync = true
 require "phlex"
 require "bundler"
 require "fileutils"
+require "i18n"
 
 Bundler.require :docs
 
 loader = Zeitwerk::Loader.new
 loader.push_dir(__dir__)
 loader.ignore(__FILE__)
+loader.inflector.inflect("rspec" => "RSpec")
 loader.enable_reloading
 loader.setup
 loader.eager_load

data/docs/components/callout.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class Callout < Phlex::View
+	class Callout < Phlex::HTML
 		def template(&block)
 			div(class: "rounded bg-orange-50 text-sm p-5 border border-orange-100", &block)
 		end

data/docs/components/code_block.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class CodeBlock < Phlex::View
+	class CodeBlock < Phlex::HTML
 		FORMATTER = Rouge::Formatters::HTML.new
 
 		def initialize(code, syntax:)
@@ -11,7 +11,7 @@ module Components
 
 		def template
 			pre(class: "highlight p-5 whitespace-pre-wrap bg-stone-50") {
-				raw FORMATTER.format(
+				unsafe_raw FORMATTER.format(
 					lexer.lex(@code)
 				)
 			}

data/docs/components/code_span.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class CodeSpan < Phlex::View
+	class CodeSpan < Phlex::HTML
 		def template(&block)
 			code(class: "bg-stone-50 inline-block font-medium rounded border px-1 -mt-1", &block)
 		end

data/docs/components/example.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class Example < Phlex::View
+	class Example < Phlex::HTML
 		def initialize
 			@sandbox = Module.new
 		end
@@ -13,12 +13,12 @@ module Components
 			end
 		end
 
-		def tab(name, code)
+		def tab(name, code, syntax: :ruby)
 			@t.tab(name) do
-				render CodeBlock.new(code, syntax: :ruby)
+				render CodeBlock.new(code, syntax: syntax)
 			end
 
-			@sandbox.class_eval(code)
+			@sandbox.class_eval(code) if syntax == :ruby
 		end
 
 		def execute(code)

data/docs/components/heading.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Components
-	class Heading < Phlex::View
+	class Heading < Phlex::HTML
 		def template(&block)
-			h2(class: "text-2xl font-semibold mt-10 mb-5") { raw(&block) }
+			h2(class: "text-2xl font-semibold mt-10 mb-5", &block)
 		end
 	end
 end

data/docs/components/layout.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class Layout < Phlex::View
+	class Layout < Phlex::HTML
 		register_element :style
 
 		def initialize(title:)
@@ -14,53 +14,76 @@ module Components
 			html do
 				head do
 					meta charset: "utf-8"
+					meta name: "viewport", content: "width=device-width, initial-scale=1"
 					title { @title }
 					link href: "/application.css", rel: "stylesheet"
-					style { raw Rouge::Theme.find("github").render(scope: ".highlight") }
+					style { unsafe_raw Rouge::Theme.find("github").render(scope: ".highlight") }
 				end
 
 				body class: "text-stone-700" do
-					header class: "border-b py-4 px-10 flex justify-between items-center" do
-						a(href: "/", class: "block") { img src: "/assets/logo.png", width: "100" }
+					div class: "flex flex-col" do
+						header class: "border-b py-4 px-4 lg:px-10 flex justify-between items-center sticky top-0 left-0 bg-white z-50" do
+							div class: "flex flex-row items-center gap-2" do
+								label for: "nav-toggle", class: "cursor-pointer lg:hidden" do
+									unsafe_raw '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8"> <path fill-rule="evenodd" d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" /> </svg>'
+								end
 
-						nav(class: "text-stone-500 font-medium") do
-							ul(class: "flex space-x-8") do
-								li { a(href: "https://github.com/sponsors/joeldrapper") { "💖️ Sponsor" } }
-								li { a(href: "https://github.com/joeldrapper/phlex") { "GitHub" } }
+								a(href: "/", class: "block") { img src: "/assets/logo.png", width: "100" }
+							end
+
+							nav(class: "text-stone-500 font-medium") do
+								ul(class: "flex space-x-8") do
+									li { a(href: "https://github.com/sponsors/joeldrapper") { "💖️ Sponsor" } }
+									li { a(href: "https://github.com/joeldrapper/phlex") { "GitHub" } }
+								end
 							end
 						end
-					end
 
-					div class: "grid grid-cols-4 divide-x" do
-						nav class: "col-span-1 px-10 py-5" do
-							h2(class: "text-lg font-semibold pt-5") { "Guide" }
+						div do
+							div class: "flex flex-row" do
+								input type: "checkbox", id: "nav-toggle", class: "flex-0 peer hidden"
+								label for: "nav-toggle", class: "top-0 bottom-0 left-0 right-0 bg-gray-900 opacity-0 transition-all peer-checked:fixed peer-checked:z-30 peer-checked:block peer-checked:opacity-50 lg:hidden lg:peer-checked:hidden"
+								nav class: "fixed lg:relative w-3/4 border-r-2 border-gray-100 lg:border-0 lg:w-1/4 text-lg lg:text-base h-full z-40 px-10 py-5 -left-full transition-all peer-checked:left-0 lg:left-0 bg-white" do
+									h2(class: "text-lg font-semibold pt-5") { "Guide" }
 
-							ul do
-								render Nav::Item.new("Introduction", to: Pages::Index, active_page: @_parent)
-								render Nav::Item.new("Views", to: Pages::Views, active_page: @_parent)
-								render Nav::Item.new("Templates", to: Pages::Templates, active_page: @_parent)
-								render Nav::Item.new("Helpers", to: Pages::Helpers, active_page: @_parent)
-							end
+									ul do
+										render Nav::Item.new("Introduction", to: Pages::Index, active_page: @_parent)
+										render Nav::Item.new("Views", to: Pages::Views, active_page: @_parent)
+										render Nav::Item.new("Templates", to: Pages::Templates, active_page: @_parent)
+										render Nav::Item.new("Helpers", to: Pages::Helpers, active_page: @_parent)
+										render Nav::Item.new("Translations", to: Pages::Translations, active_page: @_parent)
+									end
+
+									h2(class: "text-lg font-semibold pt-5") { "Testing" }
+
+									ul do
+										render Nav::Item.new("Getting Started", to: Pages::Testing::GettingStarted, active_page: @_parent)
+										render Nav::Item.new("Nokogiri", to: Pages::Testing::Nokogiri, active_page: @_parent)
+										render Nav::Item.new("Capybara", to: Pages::Testing::Capybara, active_page: @_parent)
+										render Nav::Item.new("Rails", to: Pages::Testing::Rails, active_page: @_parent)
+									end
 
-							h2(class: "text-lg font-semibold pt-5") { "Rails" }
+									h2(class: "text-lg font-semibold pt-5") { "Rails" }
 
-							ul do
-								render Nav::Item.new("Getting started", to: Pages::Rails::GettingStarted, active_page: @_parent)
-								render Nav::Item.new("Rendering views", to: Pages::Rails::RenderingViews, active_page: @_parent)
-								render Nav::Item.new("Laouts", to: Pages::Rails::Layouts, active_page: @_parent)
-								render Nav::Item.new("Helpers", to: Pages::Rails::Helpers, active_page: @_parent)
-								render Nav::Item.new("Migrating to Phlex", to: Pages::Rails::Migrating, active_page: @_parent)
+									ul do
+										render Nav::Item.new("Getting started", to: Pages::Rails::GettingStarted, active_page: @_parent)
+										render Nav::Item.new("Rendering views", to: Pages::Rails::RenderingViews, active_page: @_parent)
+										render Nav::Item.new("Layouts", to: Pages::Rails::Layouts, active_page: @_parent)
+										render Nav::Item.new("Helpers", to: Pages::Rails::Helpers, active_page: @_parent)
+										render Nav::Item.new("Migrating to Phlex", to: Pages::Rails::Migrating, active_page: @_parent)
+									end
+								end
+
+								main class: "w-full lg:w-3/4 px-6 lg:px-20 py-5 border-0 lg:border-l-2 border-gray-100" do
+									div(class: "max-w-full lg:max-w-prose prose", &block)
+								end
 							end
-						end
 
-						main class: "col-span-3 px-20 px-10 py-5" do
-							div(class: "max-w-prose prose", &block)
+							footer class: "border-t p-20 flex justify-center text-stone-500 text-lg font-medium" do
+								a(href: "https://github.com/sponsors/joeldrapper") { "Sponsor this project 💖" }
+							end
 						end
 					end
-
-					footer class: "border-t p-20 flex justify-center text-stone-500 text-lg font-medium" do
-						a(href: "https://github.com/sponsors/joeldrapper") { "Sponsor this project 💖" }
-					end
 				end
 			end
 		end

data/docs/components/markdown.rb

@@ -1,40 +1,25 @@
 # frozen_string_literal: true
 
 module Components
-	class Markdown < Phlex::View
-		class Render < Redcarpet::Render::HTML
-			include Redcarpet::Render::SmartyPants
-
-			def header(text, level)
-				case level
-				when 1
-					Title.new.call { CGI.unescapeHTML(text) }
-				else
-					Heading.new.call { CGI.unescapeHTML(text) }
-				end
-			end
-
-			def codespan(code)
-				CodeSpan.new.call { code }
-			end
-
-			def block_code(code, language)
-				CodeBlock.new(code.gsub(/(?:^|\G) {4}/m, "	"), syntax: language).call
-			end
+	class Markdown < Phlex::Markdown
+		def code(&content)
+			render CodeSpan.new, &content
+		end
 
-			def html_escape(input)
-				input
-			end
+		def code_block(code, language:)
+			render CodeBlock.new(code.gsub(/(?:^|\G) {4}/m, "	"), syntax: language)
 		end
 
-		MARKDOWN = Redcarpet::Markdown.new(Render.new, filter_html: false, autolink: true, fenced_code_blocks: true, tables: true, highlight: true, escape_html: false)
+		def h1(&content)
+			render Title.new, &content
+		end
 
-		def initialize(content)
-			@content = content
+		def h2(&content)
+			render Heading.new, &content
 		end
 
-		def template
-			raw MARKDOWN.render(@content)
+		def a(**attributes, &content)
+			super(class: "font-bold text-red-600 underline underline-offset-4", **attributes, &content)
 		end
 	end
 end

data/docs/components/nav/item.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class Nav::Item < Phlex::View
+	class Nav::Item < Phlex::HTML
 		def initialize(text, to:, active_page:)
 			@text = text
 			@to = to

data/docs/components/nav.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Components
-	class Nav < Phlex::View
+	class Nav < Phlex::HTML
 	end
 end

data/docs/components/tabs/tab.rb

@@ -2,7 +2,7 @@
 
 module Components
 	class Tabs
-		class Tab < Phlex::View
+		class Tab < Phlex::HTML
 			def initialize(name:, checked:)
 				@name = name
 				@checked = checked

data/docs/components/tabs.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Components
-	class Tabs < Phlex::View
+	class Tabs < Phlex::HTML
 		def initialize
 			@index = 1
 		end

data/docs/components/title.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Components
-	class Title < Phlex::View
+	class Title < Phlex::HTML
 		def template(&block)
-			h1(class: "text-3xl font-semibold my-5") { raw(&block) }
+			h1(class: "text-3xl font-semibold my-5", &block)
 		end
 	end
 end

data/docs/pages/application_page.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Pages
-	class ApplicationPage < Phlex::View
+	class ApplicationPage < Phlex::HTML
 		include ::Components
 	end
 end

data/docs/pages/helpers.rb

@@ -3,7 +3,7 @@
 module Pages
 	class Helpers < ApplicationPage
 		def template
-			render Layout.new(title: "Templates in Phlex") do
+			render Layout.new(title: "Helpers") do
 				render Markdown.new(<<~MD)
 					# Helpers
 
@@ -18,7 +18,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "link.rb", <<~RUBY
-						class Link < Phlex::View
+						class Link < Phlex::HTML
 							def initialize(text, to:, active:)
 								@text = text
 								@to = to
@@ -37,7 +37,7 @@ module Pages
 					RUBY
 
 					e.tab "example.rb", <<~RUBY
-						class Example < Phlex::View
+						class Example < Phlex::HTML
 							def template
 								nav do
 									ul do
@@ -58,7 +58,7 @@ module Pages
 
 				render Example.new do |e|
 					e.tab "link.rb", <<~RUBY
-						class Link < Phlex::View
+						class Link < Phlex::HTML
 							def initialize(text, to:, active:)
 								@text = text
 								@to = to
@@ -77,7 +77,7 @@ module Pages
 					RUBY
 
 					e.tab "example.rb", <<~RUBY
-						class Example < Phlex::View
+						class Example < Phlex::HTML
 							def template
 								nav do
 									ul do

data/docs/pages/library/collections.rb

@@ -10,7 +10,7 @@ module Pages
 
 						Phlex comes with an abstract pattern for views that represent collections of resources — lists, grids, tables, etc. Collections have two parts: one part wraps the whole collection, the other part is repeated once for each item in that collection.
 
-						When you include `Phlex::Collection` in a `Phlex::View`, the `template` and `initialize` methods are defined for you. You don't need to define these. Instead, you define a `collection_template` and `item_template`.
+						When you include `Phlex::Collection` in a `Phlex::HTML`, the `template` and `initialize` methods are defined for you. You don't need to define these. Instead, you define a `collection_template` and `item_template`.
 
 						## Collection template
 
@@ -32,16 +32,6 @@ module Pages
 						end
 						```
 
-						You can also access the predicates `first?` and `last?` and the instance variables `@index`, `@position` and `@collection`.
-
-						```ruby
-						def item_template
-							li **classes(first?: "border-t") do
-								"\#{@position}/\#{@collection.size} \#{@item}"
-							end
-						end
-						```
-
 						## Rendering a collection
 
 						Putting it all together, we can create a `List` view that renders each item in an `<li>`, all wrapped up in an outer `<ul>`.
@@ -51,7 +41,7 @@ module Pages
 
 					render Example.new do |e|
 						e.tab "list.rb", <<~RUBY
-							class List < Phlex::View
+							class List < Phlex::HTML
 								include Phlex::Collection
 
 								def collection_template(&content)
@@ -59,15 +49,13 @@ module Pages
 								end
 
 								def item_template
-									li **classes(first?: "font-bold") do
-										"(\#{@position}/\#{@collection.size}) \#{@item}"
-									end
+									li { @item }
 								end
 							end
 						RUBY
 
 						e.tab "example.rb", <<~RUBY
-							class Example < Phlex::View
+							class Example < Phlex::HTML
 								def template
 									render List.new(
 										collection: ["A", "B", "C"]
@@ -87,12 +75,6 @@ module Pages
 						```ruby
 						render List.new(item: "A")
 						```
-
-						If you've used any of the iteration variables and predicates — `first?`, `last?`, `@position`, `@index`, etc. you'll need to pass these manually to simulate this item's position.
-
-						```ruby
-						render List.new(item: "A", first: true, position: 1)
-						```
 					MD
 				end
 			end

data/docs/pages/rails/getting_started.rb

@@ -16,14 +16,18 @@ module Pages
 
 						## Setup
 
-						If you haven't installed Phlex already, you'll need to add it to your Gemfile. The easiest way to do this is to run `bundle add phlex`.
+						If you haven't installed Phlex already, you'll need to add it to your Gemfile. This is a good place to require `phlex/rails`.
 
-						Once that's finished, you'll want to run the setup script: `bin/rails phlex:install`.
+						```ruby
+						gem "phlex", require: "phlex/rails"
+						```
+
+						Now run `bundle install`. Once that's finished, you'll want to run the setup script: `bin/rails phlex:install`.
 
 						This script will:
 
 						1. update `config/application.rb` to include `/app` in your auto-load paths;
-						2. generate `views/application_view.rb`
+						2. generate `views/application_view.rb`.
 
 						Like `ApplicationRecord`, `ApplicationView` is your base view which all your other views should inherit from.
 

data/docs/pages/rails/helpers.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "phlex/rails"
+
 module Pages
 	module Rails
 		class Helpers < ApplicationPage
@@ -35,7 +37,7 @@ module Pages
 						Using these is equvalent to passing the output of the original Rails helpers to `raw`, e.g:
 
 						```ruby
-						raw helpers.javascript_include_tag
+						unsafe_raw helpers.javascript_include_tag
 						```
 
 						## Including proxies

data/docs/pages/rails/layouts.rb

@@ -18,7 +18,7 @@ module Pages
 					render Example.new do |e|
 						e.tab "layout.rb", <<~RUBY
 							module Views
-								class Layout < Phlex::View
+								class Layout < Phlex::HTML
 									def initialize(title:)
 										@title = title
 									end
@@ -38,7 +38,7 @@ module Pages
 
 						e.tab "index.rb", <<~RUBY
 							module Views
-								class Index < Phlex::View
+								class Index < Phlex::HTML
 									def template
 										render Layout.new(title: "Hello") do
 											h1 { "👋" }

data/docs/pages/rails/rendering_views.rb

@@ -7,7 +7,7 @@ module Pages
 				render Markdown.new <<~MD
 					# Rendering Phlex views in Rails
 
-					You can render a `Phlex::View` from your Rails controller actions as well as other views, and even from ActionView / ViewComponent templates.
+					You can render a `Phlex::HTML` from your Rails controller actions as well as other views, and even from ActionView / ViewComponent templates.
 
 					Instead of implicitly rendering an ERB template with automatic access to all your controller instance variables, you need to explicitly render Phlex views from your controller action methods.