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`