### Update JavaScript Imports with Relative Paths Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Provides an example of changing JavaScript import statements to use relative paths. This is an alternative to configuring module resolution in webpack.config.js for importing modules. ```diff - import 'channels' + import './channels' ``` -------------------------------- ### Webpack Configuration for CSS Extraction Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Configures webpack to extract CSS from JavaScript using `mini-css-extract-plugin`, `css-loader`, and `sass-loader`. This setup allows for including Sass/SCSS files directly in JavaScript modules and extracting them into separate CSS files during the build process. ```javascript const path = require("path") const webpack = require("webpack") const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { mode: "production", devtool: "source-map", entry: { application: "./app/javascript/application.js" }, resolve: { modules: ["app/javascript", "node_modules"], }, output: { filename: "[name].js", sourceMapFilename: "[file].map", path: path.resolve(__dirname, "app/assets/builds"), }, plugins: [ new MiniCssExtractPlugin(), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ], module: { rules: [ { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, ], }, } ``` -------------------------------- ### Configure Multiple Entrypoints in webpack.config.js Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Demonstrates how to configure multiple JavaScript entry points for webpack when migrating to jsbundling-rails. This allows for separate bundling of application and admin JavaScript files. ```javascript module.exports = { entry: { application: "./app/javascript/application.js", admin: "./app/javascript/admin.js" } } ``` -------------------------------- ### Rails New with Propshaft Source: https://github.com/rails/propshaft/blob/main/README.md Command to create a new Rails application with Propshaft as the default asset pipeline. ```shell rails new myapp -a propshaft ``` -------------------------------- ### Rails Asset Precompilation Directive Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Shows the 'link_tree' directive added to app/assets/manifest.js. This directive instructs Sprockets to include files from the app/assets/builds directory during the assets:precompile task. ```ruby //= link_tree ../../app/assets/builds ``` -------------------------------- ### Sass Build Script for cssbundling-rails Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Defines the `build:css` script in `package.json` to compile Sass files using the `sass` command. This script is used by `yarn build` to bundle CSS assets, specifying entry points and output directories. ```json { "scripts": { "build:css": "sass ./app/assets/stylesheets/entrypoints:./app/assets/builds --no-source-map --load-path=node_modules" } } ``` -------------------------------- ### Configuring Asset Paths Source: https://github.com/rails/propshaft/blob/main/README.md Propshaft allows registering directories from multiple locations in your app and gems. Assets from all these paths are made available as if they were one. You can also exclude specific directories. ```ruby # Register directories to be included in the asset load path config.assets.paths << Rails.root.join("app/assets/stylesheets") config.assets.paths << Rails.root.join("lib/assets") # Exclude directories from the asset load path # Useful if directories are only used as inputs for external compilers config.assets.excluded_paths << Rails.root.join("app/assets/stylesheets") ``` -------------------------------- ### Propshaft Asset Reveal Task Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md A Rake task provided by Propshaft to reveal all included asset files. This command helps in verifying which assets Propshaft is aware of and will process, by listing files from `vendor/assets`, `lib/assets`, and `app/assets`. ```shell rake assets:reveal ``` -------------------------------- ### Adjust CSS `url()` paths for Propshaft Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Illustrates the necessary change in CSS files when migrating from Sprockets to Propshaft. Propshaft uses relative paths by default, requiring an initial '/' for absolute path references. ```css background: url('/hero.jpg'); ``` -------------------------------- ### Configure Babel Presets in package.json Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Specifies the Babel configuration within package.json, including the preset to be used for transpilation. This works in conjunction with webpack.config.js and a custom webpack.babel.js file. ```json { "babel": { "presets": [ "./webpack.babel.js" ] } } ``` -------------------------------- ### Improve Development Performance with EventedFileUpdateChecker Source: https://github.com/rails/propshaft/blob/main/README.md To enhance performance in development environments, especially with many assets, you can configure Propshaft to use `ActiveSupport::EventedFileUpdateChecker`. This requires adding the `listen` gem and updating the `development.rb` environment file. ```ruby config.file_watcher = ActiveSupport::EventedFileUpdateChecker ``` -------------------------------- ### Enable SRI for Asset Helpers Source: https://github.com/rails/propshaft/blob/main/README.md Demonstrates how to enable Subresource Integrity (SRI) by passing the `integrity: true` option to Rails asset helper methods like `stylesheet_link_tag` and `javascript_include_tag`. This generates HTML with integrity hashes for enhanced security. ```erb <%= stylesheet_link_tag "application", integrity: true %> <%= javascript_include_tag "application", integrity: true %> ``` ```html ``` -------------------------------- ### Bulk Stylesheet Inclusion with SRI Source: https://github.com/rails/propshaft/blob/main/README.md Propshaft extends `stylesheet_link_tag` to support bulk inclusion of stylesheets using special symbols. This allows for including all stylesheets or only those specific to the application, with SRI enabled. ```erb <%= stylesheet_link_tag :all, integrity: true %> <%= stylesheet_link_tag :app, integrity: true %> ``` -------------------------------- ### Configure Module Resolution in webpack.config.js Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Illustrates how to configure module resolution in webpack.config.js to include 'app/javascript' and 'node_modules'. This maintains the behavior of importing modules without relative paths, similar to webpacker. ```javascript module.exports = { // ... resolve: { modules: ["app/javascript", "node_modules"], }, //... } ``` -------------------------------- ### Rails JavaScript Tag Update Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Illustrates the change required for JavaScript asset inclusion in Rails views. The `javascript_pack_tag` helper is replaced with `javascript_include_tag` and the `defer: true` option is added. ```diff - <%= javascript_pack_tag 'application', defer: true %> + <%= javascript_include_tag 'application', defer: true %> ``` -------------------------------- ### Referencing Assets in JavaScript Source: https://github.com/rails/propshaft/blob/main/README.md In JavaScript, Propshaft provides a `RAILS_ASSET_URL` pseudo-method to transform asset references into their digested, production-ready paths. This ensures that dynamically referenced assets are correctly served. ```javascript export default class extends Controller { init() { // Transforms to something like: "/assets/icons/trash-54g9cbef.svg" this.img = RAILS_ASSET_URL("/icons/trash.svg") } } ``` -------------------------------- ### Subresource Integrity (SRI) Configuration Source: https://github.com/rails/propshaft/blob/main/README.md Propshaft supports Subresource Integrity (SRI) for enhanced security by allowing configuration of the hash algorithm used to generate integrity hashes for assets. This helps browsers verify that fetched resources have not been tampered with. ```ruby # Configure the hash algorithm for SRI # Valid options: "sha256", "sha384", "sha512" config.assets.integrity_hash_algorithm = "sha384" ``` -------------------------------- ### Inline SVG asset content in Rails Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Demonstrates how to access and display the content of an asset file, such as an SVG, within Rails applications using Propshaft. It requires `html_safe` or `raw` to prevent HTML escaping. ```ruby Rails.application.assets.load_path.find('logo.svg').content.html_safe raw Rails.application.assets.load_path.find('logo.svg').content ``` -------------------------------- ### Configure Babel Loader in webpack.config.js Source: https://github.com/rails/propshaft/blob/main/UPGRADING.md Shows how to add babel-loader to webpack.config.js to enable JavaScript transpilation. This configuration targets .js files, excludes node_modules, and uses babel-loader for processing. ```javascript module.exports = { module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] } ] } } ``` -------------------------------- ### Bypassing Digest Step Source: https://github.com/rails/propshaft/blob/main/README.md To retain stable file names for files that refer to each other (e.g., JavaScript and its source map), you can pre-digest them. Propshaft recognizes files ending with `-[digest].digested.js` (or similar extensions) as already digested. ```APIDOC File Naming Convention for Pre-digested Assets: Propshaft identifies files that have already undergone the digest stamping process by looking for a specific postfix pattern. This is crucial for maintaining stable references between related files, such as JavaScript bundles and their corresponding source maps. Pattern: `-[digest].digested.` Example: If `app.js` is digested into `app-a1b2c3d4.digested.js`, Propshaft will treat this file as pre-digested and use its name directly without re-processing. Use Case: This is particularly useful when integrating with external build tools or compilers that produce digested assets as part of their workflow, ensuring Propshaft correctly references these pre-processed files. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.