rails-snowpacker
Advanced tools
Please note, that this project is still in it's infancy. Feel free to file bug reports, issues, and feature requests.
This gem integrates the snowpack JS module bundler into your Rails / Ruby application. It is inspired by gems such as breakfast / webpacker and this project started as a fork of parcel-rails.
This is not meant to be a 1:1 replacement of Webpacker. Snowpacker is actually just a wrapper around Snowpack using Rake and as a result can be used without Rails with a little extra work.
Snowpacker is unbundled during development to eliminate compilation times and then is bundled in the final build process due to waterfall network requests that still cause some issues in production.
Snowpacker uses the native ESM module spec. ESM Modules are fast, lightweight, and natively supported by all newer browsers ("evergreen browsers") For more reading on ESM modules, check out this link:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
Add this line to your application's Gemfile:
gem 'snowpacker', '~> 0.0.4.alpha1'
rails snowpacker:init
Which will install your yarn packages, create an initializer file, add config files, and create an app/snowpacker directory similar to Webpacker.
rails snowpacker:dev # starts a dev server
rails snowpacker:build # builds for production (is hooked onto
precompile)
rails assets:precompile # will build snowpacker and asset pipeline
When working with a new Rails app, it is important to switch any webpack
require statements to ESM-based import. For example, consider the
following javascript file:
// app/javascript/packs/application.js
- // Webpack
- require("@rails/ujs").start()
- require("turbolinks").start()
- require("@rails/activestorage").start()
- require("channels")
-
+ // Snowpacker
+ import "@rails/ujs" // Autostarts
+ import Turbolinks from "turbolinks"
+ import ActiveStorage from "@rails/activestorage"
+ import "../channels"
+
+ Turbolinks.start()
+ ActiveStorage.start()
You may notice a require.context statement in your javascript to load
channels. This runs via Node and is not browser compatible. To get
around this Snowpacker installs a package called import-all.macro to allow you to import an entire directory of files.
// app/javascript/channels/index.js
// Load all the channels within this directory and all subdirectories.
// Channel files must be named *_channel.js.
- // const channels = require.context('.', true, /_channel\.js$/)
- // channels.keys().forEach(channels)
// @TODO
+ import.all("**/*_channel.js")
Snowpacker makes some assumptions about your file paths to provide helper methods.
tree -L 2 app/snowpacker
app/snowpacker/
├── assets/
│ └── picture.png
├── channels/
│ ├── consumer.js
│ └── index.js
├── entrypoints/
│ └── application.js
├── javascript/
│ └── index.js
└── stylesheets/
└── index.css
Which upon build will output to look like this:
tree -L 1 public/snowpacks
public/snowpacks/
├── assets/
├── channels/
├── entrypoints/
├── javascript/
├── css/
<%= snowpacker_path %> will return the value of
Snowpacker.config.output_dir
Assets can be accessed via <%= snowpacker_asset_path("name", **options) %> and accepts all
the same params as #asset_path
Channels have no special helper.
Packs can be accessed via:
<%= javascript_snow_tag %> and works the same as
#javascript_include_tag
packs are your "entrypoints" and where files get bundled to, very
similar to Webpacker.
Javascript files have no special helper.
Stylesheets can be accessed via:
<%= stylesheet_snow_tag %> and works just like
#stylesheet_link_tag.
I recommend importing your css in your packs file if you plan on
changing it to support HMR.
To enable HMR in the <head> of your document simply put:
<%= snowpacker_hmr_tag %>
After running generator, the configuration file can be found in
config/initializers/snowpacker.rb
In addition, all related snowpack.config.js, babel.config.js, and
postcss.config.js can all be found in the config/snowpacker
directory.
Gem hooks up to the rails assets:precompile and rails assets:clobber, so no special setup is required.
You can start snowpacker's compilation process manually by running
rails snowpacker:compile
# OR
rails snowpacker:build
Examples can be found in the /examples directory.
require.context() is not currently supportedPlease use import.all-macro
Not all packages may be compatible with Snowpack. Please check skypack.dev for ESM-compatible packages.
See CHANGELOG.md
Bug reports and pull requests are welcome on GitHub at https://github.com/ParamagicDev/snowpacker.
The gem is available as open source under the terms of the MIT License.
Add default file structure with init
Add a bundler for production
Support require.context
Reading from production manifest
Parity with Webpacker helper methods
Add documentation / installation on Stimulus
Create a tailwind installer
FAQs
An npm package for integration with Snowpacker
We found that rails-snowpacker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.