sprockets-components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 289b2d31182c7ceb8cf37b3ef9d452f5684efb15ebb3a43d16540fc278773306
+  data.tar.gz: 63ff1537b1dbc46a2933d17509a7400569c6650337f85ff6cc7218da38df3cad
+SHA512:
+  metadata.gz: ef741329802e424ea353733b2723f342559dddcdb9c483a6c725d4b27f0d171c5936dd5bc4a3956250b4a73ae1160a959f92ee59964a18709f3213d33f491cbf
+  data.tar.gz: 50a33291ae8f4e150ac82dee4cb25b4dcdd1efbd2638aedb05aa4cbb4826ffd17a73ce85445ae5505006759c4963ebf6fba8c8118ad94ec4cf664102446b4975

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.ruby-version

@@ -0,0 +1 @@
+ruby-3.2.2@sprockets-components

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Micah Geisel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,53 @@
+# Sprockets::Components
+
+Make web components easier to develop in Rails using Sprockets.
+
+## Installation
+
+Just add `gem "sprockets-components` to your Gemfile.
+
+## Usage
+
+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:
+```js
+//= component my-counter
+```
+
+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.
+
+
+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
+<!-- app/views/test/test.html.erb -->
+<%= javascript_include_tag "my-counter" %>
+<my-counter value="0"></my-counter>
+```
+
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/botandrose/sprockets-components.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/lib/sprockets/components/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Sprockets
+  module Components
+    VERSION = "0.1.0"
+  end
+end

data/lib/sprockets/components.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+require_relative "components/version"
+
+module Sprockets
+  module Components
+    class Engine < ::Rails::Engine
+      initializer "sprockets-components" do |app|
+        Sprockets::DirectiveProcessor.include Directives
+        app.config.after_initialize do
+          app.assets.register_pipeline :component, Pipeline.new
+        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"
+      end
+
+      def process_component_css_directive path
+        @required << resolve(path, accept: "text/css", pipeline: :component)
+      end
+
+      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
+      def call env, type, file_type
+        {
+          "text/css" => [CSSProcessor.new],
+          "text/html" => [HTMLProcessor.new],
+          "application/javascript" => [JSProcessor.new],
+        }.fetch(type) +
+          env.send(:default_processors_for, type, file_type)
+      end
+    end
+
+    class CSSProcessor
+      def call input
+        "const 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})"
+      end
+    end
+  end
+end
+

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: sprockets-components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Micah Geisel
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2024-01-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sprockets
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+description: Make web components easier to develop using Sprockets.
+email:
+- micah@botandrose.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rspec"
+- ".ruby-version"
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/sprockets/components.rb
+- lib/sprockets/components/version.rb
+homepage: https://github.com/botandrose/sprockets-components
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/botandrose/sprockets-components
+  source_code_uri: https://github.com/botandrose/sprockets-components
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.3
+signing_key: 
+specification_version: 4
+summary: Make web components easier to develop using Sprockets.
+test_files: []