Docs and demos for breadcrumbs and UJS

.rubocop.yml

@@ -17,21 +17,17 @@ Layout/LineLength:
   Exclude:
     - "test/**/*"
 Metrics/BlockLength:
-  Exclude:
-    - Rakefile
-    - proscenium.gemspec
-    - "test/**/*"
+  Enabled: false
 Metrics/MethodLength:
-  Max: 20
+  Enabled: false
 Metrics/AbcSize:
-  Max: 20
+  Enabled: false
 Metrics/CyclomaticComplexity:
-  Max: 10
+  Enabled: false
 Metrics/PerceivedComplexity:
-  Max: 10
+  Enabled: false
 Metrics/ClassLength:
-  Exclude:
-    - "test/**/*"
+  Enabled: false
 Style/Documentation:
   Enabled: false
 Style/ClassAndModuleChildren:

Gemfile

@@ -18,10 +18,15 @@ group :development do
   gem 'rubocop-rake'
   gem 'sqlite3'
   gem 'web-console'
+
+  # Playground
+  gem 'htmlbeautifier'
+  gem 'literal', github: 'joeldrapper/literal'
+  gem 'phlexible'
+  gem 'rouge'
 end
 
 group :test do
-  gem 'view_component', '~> 3.6.0'
   gem 'capybara'
   gem 'cuprite'
   gem 'dry-initializer'
@@ -32,4 +37,5 @@ group :test do
   gem 'gem4', path: './fixtures/external/gem4'
   gem 'phlex-testing-capybara'
   gem 'sus'
+  gem 'view_component', '~> 3.6.0'
 end

Gemfile.lock

@@ -1,3 +1,11 @@
+GIT
+  remote: https://github.com/joeldrapper/literal.git
+  revision: 455f225574dbcb39b7e325a9f75c928a79ec812b
+  specs:
+    literal (0.1.0)
+      concurrent-ruby (~> 1.2)
+      zeitwerk (~> 2.6)
+
 PATH
   remote: .
   specs:
@@ -169,6 +177,7 @@ GEM
     ffi (1.16.3)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    htmlbeautifier (1.4.3)
     i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     io-console (0.7.2)
@@ -223,6 +232,9 @@ GEM
     phlex-testing-capybara (0.1.0)
       capybara (~> 3.38)
       phlex (>= 0.5)
+    phlexible (1.0.0)
+      phlex (>= 1.8.1)
+      phlex-rails (>= 1.0.0)
     psych (5.1.2)
       stringio
     public_suffix (5.0.4)
@@ -275,6 +287,7 @@ GEM
       io-console (~> 0.5)
     require-hooks (0.2.2)
     rexml (3.2.6)
+    rouge (4.2.1)
     rubocop (1.62.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -350,11 +363,15 @@ DEPENDENCIES
   gem2!
   gem3!
   gem4!
+  htmlbeautifier
+  literal!
   phlex-rails
   phlex-testing-capybara
+  phlexible
   proscenium!
   puma
   rails (~> 7.0)
+  rouge
   rubocop
   rubocop-packaging
   rubocop-performance

lib/proscenium/libs/custom_element.js

@@ -0,0 +1,54 @@
+/**
+ * Base class for custom elements, providing support for event delegation, and idempotent
+ * customElement registration.
+ *
+ * The `handleEvent` method is called any time an event defined in `delegatedEvents` is triggered.
+ * It's a central handler to handle events for this custom element.
+ *
+ * @example
+ *   class MyComponent extends CustomElement {
+ *     static componentName = 'my-component'
+ *     static delegatedEvents = ['click']
+ *
+ *     handleEvent(event) {
+ *       console.log('Hello, world!')
+ *     }
+ *   }
+ *   MyComponent.register()
+ */
+export default class CustomElement extends HTMLElement {
+  /**
+   * Register the component as a custom element, inferring the component name from the kebab-cased
+   * class name. You can override the component name by setting a static `componentName` property.
+   *
+   * This method is idempotent.
+   */
+  static register() {
+    if (this.componentName === undefined) {
+      this.componentName = this.name
+        .replaceAll(/(.)([A-Z])/g, "$1-$2")
+        .toLowerCase();
+    }
+
+    if (!customElements.get(this.componentName)) {
+      customElements.define(this.componentName, this);
+    }
+  }
+
+  /**
+   * A list of event types to be delegated for the lifetime of the custom element.
+   *
+   * @type {Array}
+   */
+  static delegatedEvents = [];
+
+  constructor() {
+    super();
+
+    if (typeof this.handleEvent !== "undefined") {
+      this.constructor.delegatedEvents?.forEach((event) => {
+        this.addEventListener(event, this);
+      });
+    }
+  }
+}

lib/proscenium/libs/ujs/class.js

@@ -3,15 +3,13 @@ import DataDisableWith from "./data_disable_with";
 
 export default class UJS {
   constructor() {
-    const dc = new DataConfirm();
-    const ddw = new DataDisableWith();
+    this.dc = new DataConfirm();
+    this.ddw = new DataDisableWith();
 
-    document.body.addEventListener(
-      "submit",
-      (event) => {
-        dc.onSubmit(event) && ddw.onSubmit(event);
-      },
-      { capture: true }
-    );
+    document.addEventListener("submit", this, { capture: true });
+  }
+
+  handleEvent(event) {
+    this.dc.onSubmit(event) && this.ddw.onSubmit(event);
   }
 }

playground/app/components/application_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class ApplicationComponent < Proscenium::Phlex
+  extend Literal::Attributes
   include Phlex::Rails::Helpers::Routes
+  include Phlexible::Rails::AElement
 
   if Rails.env.development?
     def before_template

playground/app/components/code_block_component.module.css

@@ -0,0 +1,15 @@
+.base {
+  margin: 10px 20px;
+
+  legend {
+    background-color: blanchedalmond;
+    padding: 5px 10px;
+    font-size: 0.7em;
+    color: dimgray;
+    width: fit-content;
+  }
+
+  pre {
+    margin: 0;
+  }
+}

playground/app/components/code_block_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+require 'phlex/testing/view_helper'
+
+class CodeBlockComponent < ApplicationComponent
+  FORMATTER = Rouge::Formatters::HTML.new
+
+  attribute :syntax, _Nilable(_Union(String, Symbol)), positional: true
+
+  def template(&block)
+    @code = capture(&block)
+    @code = HtmlBeautifier.beautify(@code) if @syntax == :html
+
+    div class: :@base do
+      legend { @syntax }
+      pre class: :highlight, data: data do
+        @syntax ? unsafe_raw(FORMATTER.format(lexer.lex(@code))) : @code
+      end
+    end
+  end
+
+  private
+
+  def data
+    { language: @syntax, lines: lines }
+  end
+
+  def lines
+    @code.scan("\n").count + 1
+  end
+
+  def lexer
+    Rouge::Lexer.find(@syntax)
+  end
+end

playground/app/components/code_stage_component.module.css

@@ -0,0 +1,9 @@
+.base {
+  margin: 20px;
+
+  > div {
+    border: 1px ridge;
+    background-color: snow;
+    padding: 30px;
+  }
+}

playground/app/components/code_stage_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class CodeStageComponent < ApplicationComponent
+  def template(&block)
+    div class: :@base do
+      div(&block)
+    end
+  end
+end

playground/app/controllers/application_controller.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
 class ApplicationController < ActionController::Base
+  include Phlexible::Rails::ActionController::ImplicitRender
   layout false
 end

playground/app/controllers/ui/breadcrumbs_controller.rb

@@ -1,13 +1,12 @@
 # frozen_string_literal: true
 
-class UI::BreadcrumbsController < UIController
-  include Proscenium::UI::Breadcrumbs::Control
-
-  def index
-    add_breadcrumb 'Proscenium UI', :ui
-    add_breadcrumb 'Components', :ui
+module UI
+  class BreadcrumbsController < UIController
+    include Proscenium::UI::Breadcrumbs::Control
     add_breadcrumb 'Breadcrumbs'
 
-    render UI::Breadcrumbs::IndexView.new
+    def index
+      render Breadcrumbs::IndexView.new
+    end
   end
 end

playground/app/controllers/ui/ujs_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module UI
+  class UJSController < UIController
+    add_breadcrumb 'UJS', :ui_ujs
+
+    def index
+      render UJS::IndexView.new
+    end
+
+    def confirm
+      add_breadcrumb 'confirm'
+    end
+
+    def disable_with
+      add_breadcrumb 'disable_with'
+    end
+  end
+end

playground/app/controllers/ui_controller.rb

@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
 class UIController < ApplicationController
+  include Proscenium::UI::Breadcrumbs::Control
+  add_breadcrumb 'UI', :ui
+
   def index
     render UI::IndexView.new
   end