sprockets-components 0.1.1 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7cee1e5b40b161d3f3f2e4ddf5fed87b3ce029ab83039a284ba411348a6b71ff
-  data.tar.gz: ee33b95d141677dad065b0b97b94dd89718bbdd45e06c3cc9c19b7c63c00ffb4
+  metadata.gz: af056fec5418fa33a855c1e7f06a08b6196f7098521b673dffb380a6f3d1b408
+  data.tar.gz: 6823791a163c74ba986f2dd0b380e2fbdcd10da93f52b1700392e5de6e53358d
 SHA512:
-  metadata.gz: a1f94a48dc66db774c06290628a082db5dc928935a6c9aa615f55ef7c631b941f81b0677de54685c5dcad3f72d654966edb60c6252f98da7f6cb1928a3430400
-  data.tar.gz: 5d037d94a643e019e982c1607afcda7cd08ffe0828eb00251e99ac944b94d67f0d9e0b0edafbf23ccd839f74d8f45f0f5223d5d8a5cc5b0cb2379373b0c52a1e
+  metadata.gz: a4fd2ab88a2d98cef302916403faf5e3f0acbe343082ff306d1dd7ad8ad7dfe7df2d20d78732e4584dbdbd61fd6cf55d7479cc874f774fa31a0b06f467d97d7e
+  data.tar.gz: a7ee43c59f72171187df32db4ae468208669660d1897607b43d9d91c21229a8588fbdfa58783a08e1938e3aeb01286ca3f52d3b10091da2ef84353fabc19543f

data/README.md

@@ -14,21 +14,21 @@ Use one directory per component, under `app/assets/components`:
 app/assets/
 └── components
     └── my-counter
-        ├── index.js
         ├── my-counter.js
         ├── my-counter.scss
         └── my-counter.slim
 ```
 
-Each component's index.js file wires everything up in a single line:
+At the top of the main my-counter.js component file, add the `component` directive:
 ```js
-//= component my-counter
-```
+//= component
 
-Now, from the perspective of the main my-counter.js file, there are two things done:
-1. There is an `HTML` variable available for use in the component. It is a string of the compiled template, with the compiled CSS inlined into an interior <style> tag.
-2. `window.customElements.define("my-counter", MyCounter)` is appended to the compiled file, so the JavaScript component class should be named appropriately.
+customElements.define("my-counter", class extends HTMLElement {
+  // ...
+})
+```
 
+This directive exposes an `HTML` variable for use in the component. It is a string of the compiled template, with the compiled CSS inlined into an interior <style> tag.
 
 Use the component in your views, as you'd expect. Sprockets compiles it all down to a single compiled js file. This file can be included directly, or `//= require`d into other files, or exposed to the importmap, or whatever you want!
 ```html.erb

data/lib/sprockets/components/version.rb

@@ -2,6 +2,6 @@
 
 module Sprockets
   module Components
-    VERSION = "0.1.1"
+    VERSION = "0.2.1"
   end
 end

data/lib/sprockets/components.rb

@@ -10,16 +10,45 @@ module Sprockets
         app.config.assets.configure do |env|
           env.register_pipeline :component, Pipeline.new
         end
+
+        # there isn't a supported way to register path resolvers so we have to hack it in
+        Sprockets::Resolve.prepend Module.new {
+          def resolve_under_paths(*)
+            @resolvers ||= [
+              method(:resolve_main_under_path),
+              method(:resolve_alts_under_path),
+              method(:resolve_index_under_path),
+              method(:resolve_component),
+            ]
+            super
+          end
+
+          def resolve_component load_path, logical_name, mime_exts
+            dirname = File.join(load_path, logical_name)
+
+            if load_path.split("/").last == "components" && Dir.exist?(dirname)
+              candidates = [{
+                filename: "#{dirname}/#{logical_name}.js",
+                type: "application/javascript",
+                index_alias: "app/assets/components/#{logical_name}.js",
+              }]
+            else
+              candidates = []
+            end
+
+            return candidates, [ URIUtils.build_file_digest_uri(dirname) ]
+          end
+        }
       end
     end
 
     module Directives
       protected
 
-      def process_component_directive name
-        process_component_css_directive "#{name}/#{name}.css"
-        process_component_html_directive "#{name}/#{name}.html"
-        process_component_js_directive "#{name}/#{name}.js"
+      def process_component_directive
+        name = @dirname.split("/").last
+        process_component_css_directive "./#{name}.css"
+        process_component_html_directive "./#{name}.html"
       end
 
       def process_component_css_directive path
@@ -29,10 +58,6 @@ module Sprockets
       def process_component_html_directive path
         @required << resolve(path, accept: "text/html", pipeline: :component)
       end
-
-      def process_component_js_directive path
-        @required << resolve(path, accept: "application/javascript", pipeline: :component)
-      end
     end
 
     class Pipeline
@@ -40,7 +65,6 @@ module Sprockets
         {
           "text/css" => [CSSProcessor.new],
           "text/html" => [HTMLProcessor.new],
-          "application/javascript" => [JSProcessor.new],
         }.fetch(type) +
           env.send(:default_processors_for, type, file_type)
       end
@@ -48,20 +72,13 @@ module Sprockets
 
     class CSSProcessor
       def call input
-        "const CSS = `#{input[:data]}`;\n"
+        "const __SprocketsComponent__CSS = `#{input[:data]}`;\n"
       end
     end
 
     class HTMLProcessor
       def call input
-        "const HTML = `<style>${CSS}</style>\n#{input[:data]}`;\n"
-      end
-    end
-
-    class JSProcessor
-      def call input
-        name = input[:name].split("/").first
-        "#{input[:data]};window.customElements.define('#{name}', #{name.underscore.classify})"
+        "const HTML = `<style>${__SprocketsComponent__CSS}</style>\n#{input[:data]}`;\n"
       end
     end
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sprockets-components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.1
 platform: ruby
 authors:
 - Micah Geisel
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-01-01 00:00:00.000000000 Z
+date: 2024-08-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sprockets
@@ -59,7 +59,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.3
+rubygems_version: 3.5.6
 signing_key: 
 specification_version: 4
 summary: Make web components easier to develop using Sprockets.