phlex 0.3.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff6c239c6500dab71edf80613da891503a2aa5a4f11ee468d988145376fd3d1c
-  data.tar.gz: d1379dba2b5f9c16d908a82a199036ca9a0463867b869b9757a8d6bd35caa2b3
+  metadata.gz: 6db4c22ebfaa77371b1d2bc5faaa48bc93056c3c57e2233fc19a9191850f52f9
+  data.tar.gz: b6fc151034426d7ccede55fdd2c73a1244fdf47c440cdb9c59850853cc2cec30
 SHA512:
-  metadata.gz: 0eb7517edbd6d38babdd25ecb48265a3c997a3d0e909ebb51bab7a7c68c601316ea61c4abb1b0e9ccc5df3cd69386991ee3ecd722e8af29d59a8c3ad6ec5ad6f
-  data.tar.gz: e2027c09419b22a321799dfc3becba3ecf9dc7ca947174b522b57e9da9528145e4e485abe473af6180d01ea39d2fe4ef1837448f989a9bb241573a64c92e6a91
+  metadata.gz: 888e31c18af9de0230970228e1ab20aab4d08d6b2236187ec06fbe2690813032c3af1e9a675bc737016c3c51f3c522be9a4e87bf868882778ff02482ca4c742f
+  data.tar.gz: 6a999b53c9e54a1159ee0ce34e135d3e5f4c3e73a6207f3d5dbec4f208387c165a83e66cc39f26d582d8ff5fe1d32bb7667b3cfae33a3b16d8a69179dcab4131

data/.editorconfig

@@ -3,3 +3,11 @@ root = true
 [*]
 indent_style = tab
 indent_size = 2
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.erb]
+indent_style = space
+indent_size = 2

data/.rubocop.yml

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

data/Gemfile

@@ -5,18 +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 "listen", 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 "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 "commonmarker", "~> 0.23"
+	gem "webrick"
+	gem "rouge"
+	gem "kramdown"
+end

data/Procfile.dev

@@ -0,0 +1,3 @@
+server: ruby -run -e httpd docs/dist
+docs: bundle exec docs/build.rb --watch
+tailwind: npx tailwindcss -i ./docs/assets/application.css -o ./docs/dist/application.css --watch

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/Rakefile

@@ -2,9 +2,7 @@
 
 require "bundler/gem_tasks"
 
-begin
-	require "rspec/core/rake_task"
-	RSpec::Core::RakeTask.new(:spec)
+task :sus do
+	sh "bundle exec sus"
 end
-
-task default: :spec
+task default: :sus

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

@@ -1,22 +1,29 @@
 #!/usr/bin/env ruby
 # frozen_string_literal: true
 
+$stdout.sync = true
+
 require "phlex"
 require "bundler"
 require "fileutils"
+require "i18n"
 
 Bundler.require :docs
 
-Zeitwerk::Loader.new.tap do |loader|
-	loader.push_dir(__dir__)
-	loader.ignore(__FILE__)
-	loader.setup
-	loader.eager_load
-end
-
-FileUtils.mkdir_p("#{__dir__}/dist")
-FileUtils.cp_r("#{__dir__}/assets", "#{__dir__}/dist")
+loader = Zeitwerk::Loader.new
+loader.push_dir(__dir__)
+loader.ignore(__FILE__)
+loader.inflector.inflect("rspec" => "RSpec")
+loader.enable_reloading
+loader.setup
+loader.eager_load
 
 PageBuilder.build_all
 
-system "npx tailwindcss -i ./docs/assets/application.css -o ./docs/dist/application.css"
+if ARGV.include? "--watch"
+	Filewatcher.new("#{__dir__}/**/*rb").watch do |_changes|
+		loader.reload
+		loader.eager_load
+		PageBuilder.build_all
+	end
+end

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

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Components
+	class CodeSpan < Phlex::HTML
+		def template(&block)
+			code(class: "bg-stone-50 inline-block font-medium rounded border px-1 -mt-1", &block)
+		end
+	end
+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,18 +13,18 @@ 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)
 			output = @sandbox.class_eval(code)
 
-			@t.tab("HTML Output") do
+			@t.tab("👀 Output") do
 				render CodeBlock.new(HtmlBeautifier.beautify(output), syntax: :html)
 			end
 		end

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-xl font-bold mt-10 mb-5", &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,30 +14,75 @@ module Components
 			html do
 				head do
 					meta charset: "utf-8"
-					title @title
+					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: "p-12" do
-					div class: "max-w-screen-lg mx-auto grid grid-cols-4 gap-10" do
-						header class: "col-span-1" do
-							a(href: "/", class: "block") { img src: "/assets/logo.png", width: "150" }
-
-							nav do
-								ul do
-									li { a "Introduction", href: "/" }
-									li { a "Templates", href: "/templates" }
-									li { a "Views", href: "/views" }
-									li { a "Rails integration", href: "/rails-integration" }
-									li { a "Source code", href: "https://github.com/joeldrapper/phlex" }
+				body class: "text-stone-700" do
+					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
+
+								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
 
-						main(class: "col-span-3", &block)
+						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)
+										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" }
 
-						footer class: "text-sm text-right col-span-4 py-10"
+									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
+
+							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
 			end

data/docs/components/markdown.rb

@@ -1,26 +1,25 @@
 # frozen_string_literal: true
 
 module Components
-	class Markdown < Phlex::View
-		class Render < Redcarpet::Render::HTML
-			def header(text, level)
-				case level
-				when 1
-					Title.new.call { text }
-				else
-					Heading.new.call { text }
-				end
-			end
+	class Markdown < Phlex::Markdown
+		def code(&content)
+			render CodeSpan.new, &content
 		end
 
-		MARKDOWN = Redcarpet::Markdown.new(Render.new, autolink: true, tables: true)
+		def code_block(code, language:)
+			render CodeBlock.new(code.gsub(/(?:^|\G) {4}/m, "	"), syntax: language)
+		end
+
+		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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Components
+	class Nav::Item < Phlex::HTML
+		def initialize(text, to:, active_page:)
+			@text = text
+			@to = to
+			@active_page = active_page
+		end
+
+		def template
+			li do
+				a(**link_classes, href: "/#{link}") { @text }
+			end
+		end
+
+		def link_classes
+			classes("pb-1 block font-medium text-stone-500", active?: "text-red-600 font-bold")
+		end
+
+		def link
+			path == "index" ? "" : path
+		end
+
+		def path
+			@to.name.split("::")[1..].map { _1.gsub(/(.)([A-Z])/, '\1-\2') }.map(&:downcase).join("/")
+		end
+
+		def active?
+			@active_page.instance_of?(@to)
+		end
+	end
+end

data/docs/components/nav.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Components
+	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
@@ -11,7 +11,9 @@ module Components
 			def template(&block)
 				input class: "opacity-0 fixed peer", type: "radio", name: @_parent.unique_identifier, id: unique_identifier, checked: @checked
 
-				label @name, id: "#{unique_identifier}-label", for: unique_identifier, role: "tab", aria_controls: "#{unique_identifier}-panel", class: "order-1 py-2 px-5 bg-white text-sm border border-b-0 border-l-0 font-medium first-of-type:border-l first-of-type:rounded-tl last-of-type:rounded-tr before:absolute before:pointer-events-none before:w-full before:ring before:h-full before:left-0 before:top-0 before:hidden before:rounded peer-focus:before:block cursor-pointer"
+				label id: "#{unique_identifier}-label", for: unique_identifier, role: "tab", aria_controls: "#{unique_identifier}-panel", class: "order-1 py-2 px-5 bg-white text-sm border border-b-0 border-l-0 font-medium first-of-type:border-l first-of-type:rounded-tl last-of-type:rounded-tr before:absolute before:pointer-events-none before:w-full before:ring before:h-full before:left-0 before:top-0 before:hidden before:rounded peer-focus:before:block cursor-pointer" do
+					@name
+				end
 
 				div id: "#{unique_identifier}-panel", role: "tabpanel", aria_labelledby: "#{unique_identifier}-label", class: "tab hidden order-2 w-full border rounded-b rounded-tr overflow-hidden" do
 					@_parent.instance_exec(&block)

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-2xl font-bold my-5", &block)
+			h1(class: "text-3xl font-semibold my-5", &block)
 		end
 	end
 end

data/docs/page_builder.rb

@@ -4,6 +4,8 @@ class PageBuilder
 	ROOT = Pages::ApplicationPage
 
 	def self.build_all
+		FileUtils.mkdir_p("#{__dir__}/dist")
+		FileUtils.cp_r("#{__dir__}/assets", "#{__dir__}/dist")
 		ROOT.subclasses.each { |page| new(page).call }
 	end
 
@@ -12,6 +14,7 @@ class PageBuilder
 	end
 
 	def call
+		puts "Building #{@page.name}"
 		FileUtils.mkdir_p(directory)
 		File.write(file, @page.new.call)
 	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

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Pages
+	class Helpers < ApplicationPage
+		def template
+			render Layout.new(title: "Helpers") do
+				render Markdown.new(<<~MD)
+					# Helpers
+
+					## Conditional tokens and classes
+
+					The `tokens` method helps you define conditional HTML attribute tokens (such as CSS classes). It accepts a splat of tokens that should always be output as well as optional keyword arguments for conditional tokens.
+
+					The keyword arguments allow you to specify under which conditions certain tokens are applicable. The keys are the conditions and the values are the tokens. Conditions can be Procs which are evaluated, or Symbols that map to an instance method. The `:active?` Symbol, for example, maps to the `active?` instance method.
+
+					Here we have a `Link` view that produces an `<a>` tag with the CSS class `nav-item`. If the link is _active_, we also apply the CSS class `nav-item-active`.
+				MD
+
+				render Example.new do |e|
+					e.tab "link.rb", <<~RUBY
+						class Link < Phlex::HTML
+							def initialize(text, to:, active:)
+								@text = text
+								@to = to
+								@active = active
+							end
+
+							def template
+								a(href: @to, class: tokens("nav-item",
+									active?: "nav-item-active")) { @text }
+							end
+
+							private
+
+							def active? = @active
+						end
+					RUBY
+
+					e.tab "example.rb", <<~RUBY
+						class Example < Phlex::HTML
+							def template
+								nav do
+									ul do
+										li { render Link.new("Home", to: "/", active: true) }
+										li { render Link.new("About", to: "/about", active: false) }
+									end
+								end
+							end
+						end
+					RUBY
+
+					e.execute "Example.new.call"
+				end
+
+				render Markdown.new(<<~MD)
+					You can also use the `classes` helper method to create a token list of classes. Since this method returns a hash, e.g. `{ class: "your CSS classes here" }`, you can destructure it into a `class:` keyword argument using the `**` prefix operator.
+				MD
+
+				render Example.new do |e|
+					e.tab "link.rb", <<~RUBY
+						class Link < Phlex::HTML
+							def initialize(text, to:, active:)
+								@text = text
+								@to = to
+								@active = active
+							end
+
+							def template
+								a(href: @to, **classes("nav-item",
+									active?: "nav-item-active")) { @text }
+							end
+
+							private
+
+							def active? = @active
+						end
+					RUBY
+
+					e.tab "example.rb", <<~RUBY
+						class Example < Phlex::HTML
+							def template
+								nav do
+									ul do
+										li { render Link.new("Home", to: "/", active: true) }
+										li { render Link.new("About", to: "/about", active: false) }
+									end
+								end
+							end
+						end
+					RUBY
+
+					e.execute "Example.new.call"
+				end
+			end
+		end
+	end
+end