phlex 0.2.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e96f6deb872d9da9c40cece7e93c195fc5f2f58dc1d61a2277318a290018d64
-  data.tar.gz: 759f185fc168d0d98647ad71c589ec8d1425b153382c37a070eb28ca8015c69b
+  metadata.gz: 4314dc80b5da3795454b1906f8c51b0b875fc6fea6962c2a77476dd6a4f01d34
+  data.tar.gz: 7ca6921fed9c3d2d6122dd0e77e2a97f5f100dc4a003d76c76c8dd407fddf86e
 SHA512:
-  metadata.gz: 96c765e8a02c0e79cef8d1ed44bac721844e0fd8ae3a7e921176be092775bb66a3cfd6e28a75b697eb8f1debd01c2738e55044fc49a834937c7c79c4220beebb
-  data.tar.gz: b5d99002d25e7a426102b6d935fefe0b18145eb780409745a0c63e6523db3668a12ea896e2155e6d8e2b40acb106d4298a8c8d93fa785c3f44472c4667ad67a4
+  metadata.gz: 9e7a837a1c2584e7c7f0c7955c2f49f48d4cbc049e19ba2cb707f6cfb3662edca2c05dc5cb80fc59ec6d50416fcc60894ec77bf3cc987cf22aab4ea9c470e95a
+  data.tar.gz: 1365cfd00e035b4364a66d89d3657e1d49745e1950d64b7b0fe9a17bcf27551d59447f6cd86451c3279886303cef119a69b8c752acddc81045b0eefc66fd5a4f

data/.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2

data/.rubocop.yml

@@ -2,3 +2,9 @@ inherit_from: "https://www.goodcop.style"
 
 AllCops:
   TargetRubyVersion: 2.7
+
+Layout/IndentationStyle:
+  EnforcedStyle: tabs
+
+Layout/IndentationWidth:
+  Width: 1

data/CONTRIBUTING.md

@@ -0,0 +1,23 @@
+# Contributing to Phlex
+
+## Priorities
+
+We’re trying to provide the best possible developer experience for the people using Phlex in their apps and the best possible performance for the users of those apps.
+
+Phlex is incredibly complex and requires a lot of meta-programming but when you use it, it feels simple. Phlex views feel like plain old Ruby objects. You just subclass and define a couple of methods. That’s it. That’s how it should be.
+
+## Setup
+
+- Install dependencies `bundle install`
+- Run the tests `bundle exec sus`
+- Run Rubocop and auto-correct `bundle exec rubocop -A`
+
+## Tests
+
+We use the **[Sus](https://github.com/ioquatix/sus)** testing framework. It feels a bit like RSpec with a few small differences. There’s no documentation for Sus at the moment, but you should be able to pick up the basics from reading other tests or looking at the implementation in the Sus repo.
+
+You can run all the tests with `bundle exec sus`.
+
+## Documentation
+
+Documentation is deployed when it’s merged into the `latest` branch with a release. But you can build and preview the docs locally by running `bin/docs`.

data/Rakefile

@@ -3,8 +3,8 @@
 require "bundler/gem_tasks"
 
 begin
-  require "rspec/core/rake_task"
-  RSpec::Core::RakeTask.new(:spec)
+	require "rspec/core/rake_task"
+	RSpec::Core::RakeTask.new(:spec)
 end
 
 task default: :spec

data/bench.rb

@@ -10,5 +10,5 @@ require_relative "fixtures/layout"
 puts RUBY_DESCRIPTION
 
 Benchmark.ips do |x|
-  x.report("Page") { Example::Page.new.call }
+	x.report("Page") { Example::Page.new.call }
 end

data/docs/assets/application.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+pre { tab-size: 2; }
+
 .tabs input[type="radio"]:checked + label {
   background: #f8f8f8;
   z-index: 1;

data/docs/build.rb

@@ -8,10 +8,10 @@ require "fileutils"
 Bundler.require :docs
 
 Zeitwerk::Loader.new.tap do |loader|
-  loader.push_dir(__dir__)
-  loader.ignore(__FILE__)
-  loader.setup
-  loader.eager_load
+	loader.push_dir(__dir__)
+	loader.ignore(__FILE__)
+	loader.setup
+	loader.eager_load
 end
 
 FileUtils.mkdir_p("#{__dir__}/dist")

data/docs/components/callout.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Components
-  class Callout < Phlex::Component
-    def template(&block)
-      div(class: "rounded bg-orange-50 text-sm p-5 border border-orange-100", &block)
-    end
-  end
+	class Callout < Phlex::View
+		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 +1,26 @@
 # frozen_string_literal: true
 
 module Components
-  class CodeBlock < Phlex::Component
-    FORMATTER = Rouge::Formatters::HTML.new
+	class CodeBlock < Phlex::View
+		FORMATTER = Rouge::Formatters::HTML.new
 
-    def initialize(code, syntax:)
-      @code = code
-      @syntax = syntax
-    end
+		def initialize(code, syntax:)
+			@code = code
+			@syntax = syntax
+		end
 
-    def template
-      pre(class: "highlight p-5 whitespace-pre-wrap bg-stone-50") {
-        raw FORMATTER.format(
-          lexer.lex(@code)
-        )
-      }
-    end
+		def template
+			pre(class: "highlight p-5 whitespace-pre-wrap bg-stone-50") {
+				raw FORMATTER.format(
+					lexer.lex(@code)
+				)
+			}
+		end
 
-    private
+		private
 
-    def lexer
-      Rouge::Lexer.find(@syntax)
-    end
-  end
+		def lexer
+			Rouge::Lexer.find(@syntax)
+		end
+	end
 end

data/docs/components/example.rb

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

data/docs/components/heading.rb

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

data/docs/components/layout.rb

@@ -1,45 +1,46 @@
 # frozen_string_literal: true
 
 module Components
-  class Layout < Phlex::Component
-    register_element :style
-
-    def initialize(title:)
-      @title = title
-    end
-
-    def template(&block)
-      doctype
-
-      html do
-        head do
-          meta charset: "utf-8"
-          title @title
-          link href: "/application.css", rel: "stylesheet"
-          style { 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 "Components", href: "/components" }
-                  li { a "Source code", href: "https://github.com/joeldrapper/phlex" }
-                end
-              end
-            end
-
-            main(class: "col-span-3", &block)
-
-            footer class: "text-sm text-right col-span-4 py-10"
-          end
-        end
-      end
-    end
-  end
+	class Layout < Phlex::View
+		register_element :style
+
+		def initialize(title:)
+			@title = title
+		end
+
+		def template(&block)
+			doctype
+
+			html do
+				head do
+					meta charset: "utf-8"
+					title @title
+					link href: "/application.css", rel: "stylesheet"
+					style { 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" }
+								end
+							end
+						end
+
+						main(class: "col-span-3", &block)
+
+						footer class: "text-sm text-right col-span-4 py-10"
+					end
+				end
+			end
+		end
+	end
 end

data/docs/components/markdown.rb

@@ -1,26 +1,26 @@
 # frozen_string_literal: true
 
 module Components
-  class Markdown < Phlex::Component
-    class Render < Redcarpet::Render::HTML
-      def header(text, level)
-        case level
-        when 1
-          Title.new.call { text }
-        else
-          Heading.new.call { text }
-        end
-      end
-    end
+	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
+		end
 
-    MARKDOWN = Redcarpet::Markdown.new(Render.new, autolink: true, tables: true)
+		MARKDOWN = Redcarpet::Markdown.new(Render.new, autolink: true, tables: true)
 
-    def initialize(content)
-      @content = content
-    end
+		def initialize(content)
+			@content = content
+		end
 
-    def template
-      raw MARKDOWN.render(@content)
-    end
-  end
+		def template
+			raw MARKDOWN.render(@content)
+		end
+	end
 end

data/docs/components/tabs/tab.rb

@@ -1,26 +1,26 @@
 # frozen_string_literal: true
 
 module Components
-  class Tabs
-    class Tab < Phlex::Component
-      def initialize(name:, checked:)
-        @name = name
-        @checked = checked
-      end
+	class Tabs
+		class Tab < Phlex::View
+			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
+			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 @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"
 
-        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
+				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
+			def unique_identifier
+				@unique_identifier ||= SecureRandom.hex
+			end
+		end
+	end
 end

data/docs/components/tabs.rb

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

data/docs/components/title.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Components
-  class Title < Phlex::Component
-    def template(&block)
-      h1(class: "text-2xl font-bold my-5", &block)
-    end
-  end
+	class Title < Phlex::View
+		def template(&block)
+			h1(class: "text-2xl font-bold my-5", &block)
+		end
+	end
 end

data/docs/page_builder.rb

@@ -1,36 +1,36 @@
 # frozen_string_literal: true
 
 class PageBuilder
-  ROOT = Pages::ApplicationPage
-
-  def self.build_all
-    ROOT.subclasses.each { |page| new(page).call }
-  end
-
-  def initialize(page)
-    @page = page
-  end
-
-  def call
-    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.downcase.split("::")[1..].join("/")
-  end
+	ROOT = Pages::ApplicationPage
+
+	def self.build_all
+		ROOT.subclasses.each { |page| new(page).call }
+	end
+
+	def initialize(page)
+		@page = page
+	end
+
+	def call
+		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 +1,7 @@
 # frozen_string_literal: true
 
 module Pages
-  class ApplicationPage < Phlex::Component
-    include ::Components
-  end
+	class ApplicationPage < Phlex::View
+		include ::Components
+	end
 end

data/docs/pages/index.rb

@@ -1,40 +1,38 @@
 # frozen_string_literal: true
 
 module Pages
-  class Index < ApplicationPage
-    def template
-      render Layout.new(title: "Introduction to Phlex") do
-        render Markdown.new(<<~MD)
-          # Introduction
+	class Index < ApplicationPage
+		def template
+			render Layout.new(title: "Introduction to Phlex") do
+				render Markdown.new(<<~MD)
+	 				# Introduction
 
-          Phlex is a framework for building fast, reusable, testable view components in pure Ruby.
+					Phlex is a framework for building fast, reusable, testable views in pure Ruby.
 
-          Think of a component as anything on a web page that you could draw a circle around and name. Starting on the outside, you have the _“page”_ itself, inside the page is a _“header”_, in the header is a _“nav bar”_ and in the nav bar is a _“nav bar item.”_ These objects together make up an entire page and we call the objects components.
+					Each view object is an instance of a specific class of view. The nav-bar, for example, might contain three different nav-bar-items, but they’re all instances of the nav-bar-item class. This class, then, manifests everything there is to know about nav bar items in general. It models:
 
-          Each component object is an instance of a specific class of component. The nav-bar, for example, might contain three different nav-bar-items, but they’re all instances of the nav-bar-item class. This class, then, manifests everything there is to know about nav bar items in general. It models:
+					1. the **data** attributes being represented — perhaps url and label;
+					2. a **template**, which dictates how the data should be represented with HTML markup and CSS classes; and
+					3. **logic**, conditions, or calculations on the data — perhaps a predicate method to determine whether the link is active or not.
 
-          1. the **data** attributes being represented — perhaps url and label;
-          2. a **template**, which dictates how the data should be represented with HTML markup and CSS classes; and
-          3. **logic**, conditions, or calculations on the data — perhaps a predicate method to determine whether the link is active or not.
+					# Why use Phlex?
 
-          # Why use Phlex?
+					## Better developer experience 🎉
 
-          ## Better developer experience 🎉
+					You don’t need to introduce a new language like Slim, HAML, or ERB. 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.
 
-          You don’t need to introduce a new language like Slim, HAML, or ERB. Phlex components are plain old Ruby objects: component 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 🥽
+					Rails partials can implicitly depend on instance variables from a controller or view. This happens more often than you might think when copying code into a new partial extraction. If the partial is then rendered in a different context or the instance variable’s meaning changes, things can break quite severely without warning.
 
-          ## Better safety 🥽
-          Rails partials can implicitly depend on instance variables from a controller or view. This happens more often than you might think when copying code into a new partial extraction. If the partial is then rendered in a different context or the instance variable’s meaning changes, things can break quite severely without warning.
+					Conversely, Phlex view templates render in an isolated execution context where only the instance variables and methods for the specific view are exposed.
 
-          Conversely, Phlex component templates render in an isolated execution context where only the instance variables and methods for the specific component are exposed.
+					## Better performance 🚀
 
-          ## Better performance 🚀
+					Phlex is ~4.35× faster than ActionView and ~2× faster than ViewComponent. Phlex views are also streamable.
 
-          Phlex is ~4.35× faster than ActionView and ~2× faster than ViewComponent. Phlex components are also streamable.
-
-          Rails apps typically spend 40-80% of the response time rendering views, so this could be a significant factor in overall app performance.
-        MD
-      end
-    end
-  end
+					Rails apps typically spend 40-80% of the response time rendering views, so this could be a significant factor in overall app performance.
+				MD
+			end
+		end
+	end
 end