shoelace-rails 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c7cf138c772d734257018fa691d7082b04caf56da45e2d5243041d9a90e345b
-  data.tar.gz: 1902dd8b4ee4d41e57dd3ede4bfe4c71f21a1fc7607d02524e052667a3481330
+  metadata.gz: 43863053db02a41a1fd24e9a2b82f72a10ed5ef99e90bedc142b7cb9a3d94696
+  data.tar.gz: 6615e13ecde994ab1e5c029c84cd3e1bdc5be11a5262fe5b887d0b18b86115e1
 SHA512:
-  metadata.gz: e6fb93a87eabac57355bd4a2a7d567d1e94680c0b59d0dc40731d46b76b3eb4ca74cce56f6c720b7bd63f4845de37a93a735a8013ea21e3d1d7a3c8b5aa22722
-  data.tar.gz: de7ddf7f75dee4a26b71eb95cf1ae3d29e9884080a25abe8f575352b0068a3c5d5e459852947ce8d286999cec6ca218efd77f9587f32ba9c44efd56ceac8fc6f
+  metadata.gz: 5fadffcefc1ac4a5be597e5b6274ea8f5463ee375dd535c6b42f4fb34c02fd8ef0c80dfe4fe7bb889c1096968c83d82b6e7ba5c1641dad7c8cf3761b4723447d
+  data.tar.gz: 56398431cd8865bacaae5daf55a4076b0ab2c5857878a89994c13209fae098273c0fe4d2032b890473b71147074884f476a1dd09f86129e58fcab0810e6e4722

data/.github/workflows/main.yml

@@ -17,13 +17,14 @@ jobs:
           - gemfiles/rails_70.gemfile
           - gemfiles/rails_61.gemfile
           - gemfiles/rails_60.gemfile
+        exclude:
+          - ruby_version: 'jruby-9.3.3.0'
+            gemfile: gemfiles/rails_70.gemfile
     runs-on: ubuntu-18.04
     env:
       BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
       - uses: actions/checkout@v2
-      - name: Install curl
-        run: sudo apt-get install curl libcurl4-openssl-dev
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
@@ -32,6 +33,7 @@ jobs:
       - run: bundle exec rake test
 
   system:
+    needs: unit
     runs-on: ubuntu-18.04
     steps:
       - uses: actions/checkout@v2
@@ -49,6 +51,39 @@ jobs:
       - name: Run the system test in the dummy app
         run: rake test:system
 
+  rails_edge:
+    needs: system
+    runs-on: ubuntu-18.04
+    env:
+      BUNDLE_GEMFILE: gemfiles/rails_edge.gemfile
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.1
+          bundler-cache: true
+      - run: bundle exec rake test || echo "Rails edge test is done."
+
+  ruby_edge:
+    needs: system
+    strategy:
+      matrix:
+        gemfile:
+          - gemfiles/rails_edge.gemfile
+          - gemfiles/rails_70.gemfile
+    runs-on: ubuntu-18.04
+    env:
+      BUNDLE_GEMFILE: ${{ matrix.gemfile }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 'ruby-head'
+          bundler-cache: true
+      - run: bundle exec rake || echo "Ruby edge test is done."
+
 #  browser_tests:
 #    runs-on: ubuntu-18.04
 #    steps:

data/Appraisals

@@ -7,9 +7,9 @@ appraise "rails_edge" do
 end
 
 appraise "rails_70" do
-  gem "rails", "~> 6.1.0"
-  gem "railties", "~> 6.1.0"
-  gem "activesupport", "~> 6.1.0"
+  gem "rails", "~> 7.0.0"
+  gem "railties", "~> 7.0.0"
+  gem "activesupport", "~> 7.0.0"
 end
 
 appraise "rails_61" do

data/CHANGELOG.md

@@ -1,3 +1,12 @@
-## [0.1.0] - 2022-02-17
+## v0.2.0
+
+#### Features
+
+- Do not require the `copy-webpack-plugin` to set up Shoelace so the gem works with any js bundler.
+
+## [v0.1.0](https://github.com/yuki24/shoelace-rails/tree/v0.1.0)
+
+_<sup>released at 2022-02-17 13:17:09 UTC</sup>_
+
+First release!
 
-- First release!

data/README.md

@@ -23,7 +23,7 @@ $ bundle install
 Additionally, you need to add the following npm packages:
 
 ```sh
-$ yarn add @shoelace-style/shoelace copy-webpack-plugin
+$ yarn add @shoelace-style/shoelace
 ```
 
 ## Set up CSS
@@ -50,62 +50,23 @@ import "@shoelace-style/shoelace/dist/themes/dark.css" // Optional dark mode
 
 ## Set up Javascript
 
-In order to use Shoelace the icons need to be copied to the `public/assets` directory so they will show pu properly.
-
-If you are using the `jsbundling-rails` gem and have `webpack.config.js` in the top level directory of your project, Add th
-e configuration for the `CopyPlugin`:
+In this README, it is assumed that you are using a JS bundler such as `webpack` or `esbuild`. In order to define all
+the custome elements,  import the shoelace dependency in the entrypoint file:
 
 ```js
-// webpack.config.js
-const CopyPlugin = require("copy-webpack-plugin")
-const path = require('path')
-
-module.exports = {
-  ...,
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        {
-          from: path.resolve(__dirname, "node_modules/@shoelace-style/shoelace/dist/assets"),
-          to: path.resolve(__dirname, "public/assets"),
-        },
-      ],
-    }),
-  ],
-}
+import "@shoelace-style/shoelace"
 ```
 
-If you are using the `webpacker` gem, you could add the same configuration but to `config/webpack/environment.js`:
-
-```js
-// config/webpack/environment.js
-const { environment } = require('@rails/webpacker')
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
-
-// Add shoelace icons to webpack's build process
-environment.plugins.append(
-  'CopyPlugin',
-  new CopyPlugin({
-    patterns: [
-      {
-        from: path.resolve(__dirname, '../../node_modules/@shoelace-style/shoelace/dist/assets'),
-        to: path.resolve(__dirname, '../../public/packs/js/assets')
-      }
-    ]
-  })
-)
-
-module.exports = environment
-```
+That's it!
 
-Finally, import the shoelace dependency in the entrypoint file:
+### Shoelace Icons
 
-```js
-import "@shoelace-style/shoelace"
-```
+Shoelace icons are automatically set up to load properly, so you don't need to add any extra code. More specifically,
 
-That's it!
+ * In development, the icons are served by the `ActionDispatch::Static` middleware, directly from the
+   `node_modules/@shoelace-style/shoelace/dist/assets/icons` directory.
+ * In production, the icon files are automatically copied into the `public/assets` directory as part of the
+   `assets:precompile` rake task.
 
 ## View Helpers
 
@@ -133,7 +94,7 @@ As explained above, this gem provides drop-in replacements to. Here is a short e
 And this code will produce:
 
 ```html
-<sl-form class="new_user" id="new_user" data-remote="true" action="/" accept-charset="UTF-8" method="post">
+<form class="new_user" id="new_user" data-remote="true" action="/" accept-charset="UTF-8" method="post">
   <sl-input label="Name" type="text" name="user[name]" id="user_name"></sl-input>
   <sl-input label="Password" type="password" name="user[password]" id="user_password"></sl-input>
   <sl-color-picker value="#ffffff" name="user[color]" id="user_color"></sl-color-picker>
@@ -151,7 +112,7 @@ And this code will produce:
   </sl-select>
 
   <sl-button submit="true" type="primary" data-disable-with="Create User">Create User</sl-button>
-</sl-form>
+</form>
 ```
 
 ## Development

data/gemfiles/rails_70.gemfile

@@ -4,8 +4,8 @@ source "https://rubygems.org"
 
 gem "rake", "~> 13.0"
 gem "rails-dom-testing", git: "https://github.com/rails/rails-dom-testing.git", ref: "8f5acdfc"
-gem "rails", "~> 6.1.0"
-gem "railties", "~> 6.1.0"
-gem "activesupport", "~> 6.1.0"
+gem "rails", "~> 7.0.0"
+gem "railties", "~> 7.0.0"
+gem "activesupport", "~> 7.0.0"
 
 gemspec path: "../"

data/lib/shoelace/engine.rb

@@ -2,7 +2,5 @@
 
 module Shoelace
   class Engine < ::Rails::Engine #:nodoc:
-    config.shoelace = ActiveSupport::OrderedOptions.new
-    config.shoelace.use_sl_form_tag = false
   end
 end

data/lib/shoelace/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Shoelace
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/lib/shoelace/rails.rb

@@ -1,7 +1,11 @@
 # frozen_string_literal: true
 
 require_relative "rails/version"
-require_relative "engine" if defined?(::Rails::Railtie)
+
+if defined?(::Rails::Railtie)
+  require_relative "engine"
+  require_relative "railtie"
+end
 
 module Shoelace
   module Rails

data/lib/shoelace/railtie.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require 'action_dispatch/middleware/static'
+
+module Shoelace
+  # The only reason this class exists is to clarify that we have a custom static file server after
+  # `ActionDispatch::Static`. We could just use `ActionDispatch::Static` directly, but it would make the result of
+  # `rake middleware` more difficult to understand, as the output would look like:
+  #
+  #    use ...
+  #    use ActionDispatch::Static
+  #    use ActionDispatch::Static # Why do we use the same middleware twice?
+  #    use ...
+  #
+  # It is much more straightforward if it looks like:
+  #
+  #    use ...
+  #    use ActionDispatch::Static
+  #    use Shoelace::AssetProvider
+  #    use ...
+  #
+  class AssetProvider < ActionDispatch::Static; end
+
+  class Railtie < ::Rails::Railtie #:nodoc:
+    config.shoelace = ActiveSupport::OrderedOptions.new
+    config.shoelace.use_sl_form_tag = false
+    config.shoelace.dist_path       = "node_modules/@shoelace-style/shoelace/dist"
+
+    initializer "shoelace.use_rack_middleware" do |app|
+      icon_dir = File.join(app.paths["public"].first, "assets/icons")
+
+      if !Dir.exist?(icon_dir)
+        path    = app.root.join(config.shoelace.dist_path).to_s
+        headers = app.config.public_file_server.headers || {}
+
+        app.config.middleware.insert_after ActionDispatch::Static, Shoelace::AssetProvider, path, index: "index.html", headers: headers
+      end
+    end
+  end
+end

data/lib/tasks/assets.rake

@@ -0,0 +1,17 @@
+namespace :shoelace do
+  namespace :icons do
+    desc "Copy Shoelace icons to the assets path"
+    task copy: :environment do
+      cp_r Rails.root.join(Shoelace::Railtie.config.shoelace.dist_path, "assets").to_s, Rails.public_path
+    end
+
+    desc "Remove Shoelace icons"
+    task clobber: :environment do
+      rm_rf File.join(Rails.public_path, "assets/icons")
+    end
+  end
+end
+
+if Rake::Task.task_defined?("assets:precompile")
+  Rake::Task["assets:precompile"].enhance(["shoelace:icons:copy"])
+end

data/test/helpers/form_helper_test.rb

@@ -1,3 +1,4 @@
+# frozen_string_literal: true
 require 'test_helper'
 
 require_relative '../../app/helpers/shoelace/form_helper'
@@ -5,6 +6,8 @@ require_relative '../../app/helpers/shoelace/form_helper'
 class FormHelperTest < ActionView::TestCase
   include Shoelace::FormHelper
 
+  AUTOCOMPLETE_ATTRIBUTE = ActionView::VERSION::STRING >= '6.1.0' ? 'autocomplete="off"' : ''
+
   test "#sl_text_field_tag with name and value" do
     assert_dom_equal <<~HTML, sl_text_field_tag('name', 'Your name')
       <sl-input type="text" name="name" id="name" value="Your name"></sl-input>
@@ -56,7 +59,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_form_tag" do
     assert_dom_equal(<<~HTML, sl_form_tag("/posts") { })
       <form data-remote="true" action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </sl-form>
     HTML
   end
@@ -64,7 +67,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_form_with" do
     assert_dom_equal(<<~HTML, sl_form_with(url: "/") {})
       <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </sl-form>
     HTML
   end
@@ -72,7 +75,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_form_for" do
     assert_dom_equal(<<~HTML, sl_form_for(User.new, url: "/") { })
       <form class="new_user" id="new_user" action="/" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </sl-form>
     HTML
   end
@@ -80,7 +83,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_turbo_form_tag" do
     assert_dom_equal(<<~HTML, sl_turbo_form_tag("/posts") { })
       <form action="/posts" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </form>
     HTML
   end
@@ -88,7 +91,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_turbo_form_with" do
     assert_dom_equal(<<~HTML, sl_turbo_form_with(url: "/") {})
       <form action="/" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </form>
     HTML
   end
@@ -96,7 +99,7 @@ class FormHelperTest < ActionView::TestCase
   test "#sl_turbo_form_for" do
     assert_dom_equal(<<~HTML, sl_turbo_form_for(User.new, url: "/") { })
       <form class="new_user" id="new_user" action="/" accept-charset="UTF-8" method="post">
-        <input name="utf8" type="hidden" value="&#x2713;" />
+        <input name="utf8" type="hidden" value="&#x2713;" #{AUTOCOMPLETE_ATTRIBUTE} />
       </form>
     HTML
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shoelace-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Yuki Nishijima
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2022-02-17 00:00:00.000000000 Z
+date: 2022-06-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -112,7 +112,9 @@ files:
 - lib/shoelace/engine.rb
 - lib/shoelace/rails.rb
 - lib/shoelace/rails/version.rb
+- lib/shoelace/railtie.rb
 - lib/shoelace/testing.rb
+- lib/tasks/assets.rake
 - package.json
 - rollup.config.js
 - shoelace-rails.gemspec
@@ -189,7 +191,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: Rails view helpers Shoelace.style, the design system.