sprockets-components 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7cee1e5b40b161d3f3f2e4ddf5fed87b3ce029ab83039a284ba411348a6b71ff
-  data.tar.gz: ee33b95d141677dad065b0b97b94dd89718bbdd45e06c3cc9c19b7c63c00ffb4
+  metadata.gz: fcc4905cb5aea2b0a2c224d8028bae996a28c0c32402135f288b1e7993cf274e
+  data.tar.gz: c4c924d075a7a38352580379cdbd53103059f0ba7154d2603c5ad1f54e8e6b84
 SHA512:
-  metadata.gz: a1f94a48dc66db774c06290628a082db5dc928935a6c9aa615f55ef7c631b941f81b0677de54685c5dcad3f72d654966edb60c6252f98da7f6cb1928a3430400
-  data.tar.gz: 5d037d94a643e019e982c1607afcda7cd08ffe0828eb00251e99ac944b94d67f0d9e0b0edafbf23ccd839f74d8f45f0f5223d5d8a5cc5b0cb2379373b0c52a1e
+  metadata.gz: 6d2df568730a67d7fa0fbf2a3df57b3fb5578fb2c29d9ef8cff15581deb5ebf18efd2766712f87ddddf4bd0a74e3f3147eaae224e913be043217c9e320a52dbf
+  data.tar.gz: 3f9af25ccb71f54db2c8c58d733692c4a0ca8a6cdd22ac6cb0d17254694fbc6f2ccb754478342834bfe133b526f1cc8822c07a3059b27dc46d03c03ab5e2601b

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.0"
   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
@@ -57,13 +81,6 @@ module Sprockets
         "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})"
-      end
-    end
   end
 end
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sprockets-components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Micah Geisel