phlex 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2eefd3a74f2982d981f510fbf51664a489edc5ca40bbfddc3be564fd8150646b
-  data.tar.gz: 8c5c168a439d41ab0c9020a6ebe6b43585cfdda7fc7135782b90df45ee3a5b56
+  metadata.gz: 4314dc80b5da3795454b1906f8c51b0b875fc6fea6962c2a77476dd6a4f01d34
+  data.tar.gz: 7ca6921fed9c3d2d6122dd0e77e2a97f5f100dc4a003d76c76c8dd407fddf86e
 SHA512:
-  metadata.gz: 3cf930ae8e3aa73ddb806de461d0bad1a80a747c38c52c1737631d78a6fe92054f2323d8d9b5f943bf5b028619096232880a3cce6c05ae3abbacfa17f9df31c7
-  data.tar.gz: 477bfe4a00d3c304671730c2fb1be83804fc7452ce5cfd10f29e1883aa1b2c91e69fe3ca96fa08a9c0c06126292dafa248c1bc655f911ec7c5d8cf17a7395d49
+  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/README.md

@@ -16,9 +16,9 @@ Everyone interacting in Phlex codebases, issue trackers, chat rooms and mailing
 
 ### Sponsorship 💖
 
-Maintaining a library like this is a lot of work. Phlex is being actively developed and maintained by **[Joel Drapper](https://github.com/sponsors/joeldrapper)**. If your company benefits from this work or is likely to benefit from it in the future, please consider sponsorship.
+Maintaining a library is a lot of work. If your company benefits from this work or is likely to benefit from it in the future, please consider [sponsorship](https://github.com/sponsors/joeldrapper). Phlex is actively developed and maintained by **[Joel Drapper](https://github.com/sponsors/joeldrapper)**.
 
-### Security 👮
+### Security 🚨
 
 If you’ve found a potential security issue, please email [joel+security@drapper.me](mailto:joel+security@drapper.me).
 

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/SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+If you found a possible security vulnerability in Phlex, please email joel+security@drapper.me.

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