README.md in shoelace-rails-0.1.0 vs README.md in shoelace-rails-0.2.0

- old
+ new

@@ -21,11 +21,11 @@ ``` 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 ### Asset Pipeline @@ -48,67 +48,28 @@ 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. +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: -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`: - ```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`: +That's it! -```js -// config/webpack/environment.js -const { environment } = require('@rails/webpacker') -const path = require('path') -const CopyPlugin = require('copy-webpack-plugin') +### Shoelace Icons -// 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') - } - ] - }) -) +Shoelace icons are automatically set up to load properly, so you don't need to add any extra code. More specifically, -module.exports = environment -``` + * 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. -Finally, import the shoelace dependency in the entrypoint file: - -```js -import "@shoelace-style/shoelace" -``` - -That's it! - ## View Helpers As explained above, this gem provides drop-in replacements to. Here is a short example of how the form helper works: ```erb @@ -131,11 +92,11 @@ ``` 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> <sl-radio-group no-fieldset="true"> @@ -149,10 +110,10 @@ <sl-menu-item value="id_2">Option 2</sl-menu-item> <sl-menu-item value="id_3">Option 3</sl-menu-item> </sl-select> <sl-button submit="true" type="primary" data-disable-with="Create User">Create User</sl-button> -</sl-form> +</form> ``` ## Development 1. Run `bundle install`