phlex 0.5.2 → 1.0.0.rc1

data/docs/assets/application.css

@@ -1,32 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-pre { tab-size: 2; }
-
-.tabs input[type="radio"]:checked + label {
-  background: #f8f8f8;
-  z-index: 1;
-  margin-bottom: -1px;
-  padding-bottom: 1px;
-}
-
-.tabs input[type="radio"]:focus + label {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.tabs input[type="radio"]:checked + label + .tab {
-  display: block;
-}
-
-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,29 +0,0 @@
-#!/usr/bin/env ruby
-# frozen_string_literal: true
-
-$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
-
-PageBuilder.build_all
-
-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,9 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Callout < Phlex::HTML
-		def template(&block)
-			div(class: "rounded bg-orange-50 text-sm p-5 border border-orange-100", &block)
-		end
-	end
-end

data/docs/components/code_block.rb

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

data/docs/components/code_span.rb

@@ -1,9 +0,0 @@
-# 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,32 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Example < Phlex::HTML
-		def initialize
-			@sandbox = Module.new
-		end
-
-		def template(&block)
-			render Tabs.new do |t|
-				@t = t
-				yield self
-			end
-		end
-
-		def tab(name, code, syntax: :ruby)
-			@t.tab(name) do
-				render CodeBlock.new(code, syntax: syntax)
-			end
-
-			@sandbox.class_eval(code) if syntax == :ruby
-		end
-
-		def execute(code)
-			output = @sandbox.class_eval(code)
-
-			@t.tab("👀 Output") do
-				render CodeBlock.new(HtmlBeautifier.beautify(output), syntax: :html)
-			end
-		end
-	end
-end

data/docs/components/heading.rb

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

data/docs/components/layout.rb

@@ -1,91 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Layout < Phlex::HTML
-		register_element :style
-
-		def initialize(title:)
-			@title = title
-		end
-
-		def template(&block)
-			doctype
-
-			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 { unsafe_raw Rouge::Theme.find("github").render(scope: ".highlight") }
-				end
-
-				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
-
-						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" }
-
-									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
-		end
-	end
-end

data/docs/components/markdown.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Markdown < Phlex::Markdown
-		def code(&content)
-			render CodeSpan.new, &content
-		end
-
-		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 h2(&content)
-			render Heading.new, &content
-		end
-
-		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,33 +0,0 @@
-# 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

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

data/docs/components/tabs/tab.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Tabs
-		class Tab < Phlex::HTML
-			def initialize(name:, checked:)
-				@name = name
-				@checked = checked
-			end
-
-			def template(&block)
-				input class: "opacity-0 fixed peer", type: "radio", name: @_parent.unique_identifier, id: unique_identifier, checked: @checked
-
-				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)
-				end
-			end
-
-			def unique_identifier
-				@unique_identifier ||= SecureRandom.hex
-			end
-		end
-	end
-end

data/docs/components/tabs.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Components
-	class Tabs < Phlex::HTML
-		def initialize
-			@index = 1
-		end
-
-		def template(&block)
-			div class: "tabs flex flex-wrap relative my-5", role: "tablist" do
-				yield_content(&block)
-			end
-		end
-
-		def tab(name, &block)
-			render(Tab.new(name: name, checked: first?), &block)
-			@index += 1
-		end
-
-		def unique_identifier
-			@unique_identifier ||= SecureRandom.hex
-		end
-
-		private
-
-		def first?
-			@index == 1
-		end
-	end
-end

data/docs/components/title.rb

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

data/docs/page_builder.rb

@@ -1,39 +0,0 @@
-# frozen_string_literal: true
-
-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
-
-	def initialize(page)
-		@page = page
-	end
-
-	def call
-		puts "Building #{@page.name}"
-		FileUtils.mkdir_p(directory)
-		File.write(file, @page.new.call)
-	end
-
-	private
-
-	def file
-		"#{directory}/index.html"
-	end
-
-	def directory
-		if path == "index"
-			"#{__dir__}/dist"
-		else
-			"#{__dir__}/dist/#{path}"
-		end
-	end
-
-	def path
-		@page.name.split("::")[1..].map { _1.gsub(/(.)([A-Z])/, '\1-\2') }.map(&:downcase).join("/")
-	end
-end

data/docs/pages/application_page.rb

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

data/docs/pages/helpers.rb

@@ -1,97 +0,0 @@
-# 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

data/docs/pages/index.rb

@@ -1,27 +0,0 @@
-# frozen_string_literal: true
-
-module Pages
-	class Index < ApplicationPage
-		def template
-			render Layout.new(title: "Introduction to Phlex, a fast, object-oriented view framework for Ruby") do
-				render Markdown.new(<<~MD)
-	 				# Introduction
-
-					Phlex is a framework for building fast, reusable, testable views in pure Ruby.
-
-					## Better developer experience 💃
-
-					Phlex views are plain old Ruby objects. View classes are just Ruby classes, templates are just methods, and HTML tags are just method calls. If you know how to define a method that calls another method, you pretty much already know how to use Phlex.
-
-					## Better safety 🥽
-
-					Phlex view templates render in an isolated execution context where only the instance variables and methods for the specific view are exposed.
-
-					## Better performance 🔥
-
-					Rendering a Phlex view is ~4.35× faster than an ActionView partial and ~2× faster than ViewComponent component.
-				MD
-			end
-		end
-	end
-end

data/docs/pages/library/collections.rb

@@ -1,83 +0,0 @@
-# frozen_string_literal: true
-
-module Pages
-	module Library
-		class Collections < ApplicationPage
-			def template
-				render Layout.new(title: "Getting started with Rails") do
-					render Markdown.new <<~MD
-						# Collections
-
-						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::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
-
-						The `collection_template` method should accept a content block which is used to yield the items. We can yield this block or pass it to another element, such as `<ul>`.
-
-						```ruby
-						def collection_template(&)
-							ul(&)
-						end
-						```
-
-						## Item template
-
-						From the `item_template` method, you can access a single item with the `@item` instance variable.
-
-						```ruby
-						def item_template
-							li { @item }
-						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>`.
-
-						We can render the list by passing any Enumerable as the `collection` keyword argument. Here, we pass the array `["A", "B", "C"]`.
-					MD
-
-					render Example.new do |e|
-						e.tab "list.rb", <<~RUBY
-							class List < Phlex::HTML
-								include Phlex::Collection
-
-								def collection_template(&content)
-									ul(&content)
-								end
-
-								def item_template
-									li { @item }
-								end
-							end
-						RUBY
-
-						e.tab "example.rb", <<~RUBY
-							class Example < Phlex::HTML
-								def template
-									render List.new(
-										collection: ["A", "B", "C"]
-									)
-								end
-							end
-						RUBY
-
-						e.execute "Example.new.call"
-					end
-
-					render Markdown.new <<~MD
-						## Rendering a single item
-
-						Sometimes you need to render one item of a collection on its own. This is especially handy if you're using Hotwire to append an item to the end of an existing collection. You can render an individual item without the collection wrapper by passing an `item` keyword argument to the collection view.
-
-						```ruby
-						render List.new(item: "A")
-						```
-					MD
-				end
-			end
-		end
-	end
-end