Strip additional_paths from the asset paths generated in the file.js rule

CHANGELOG.md

@@ -34,6 +34,8 @@ Changes since the last non-beta release.
 
 - Enable `ensure_consistent_versioning` by default [PR 447](https://github.com/shakacode/shakapacker/pull/447) by [G-Rath](https://github.com/g-rath).
 
+- Asset files put in `additional_paths` will have their path stripped just like with the `source_path`. [PR 403](https://github.com/shakacode/shakapacker/pull/403) by [paypro-leon](https://github.com/paypro-leon).
+
 ### Added
 - Emit warnings instead of errors when compilation is success but stderr is not empty. [PR 416](https://github.com/shakacode/shakapacker/pull/416) by [n-rodriguez](https://github.com/n-rodriguez).
 - Allow `webpack-dev-server` v5. [PR 418](https://github.com/shakacode/shakapacker/pull/418) by [G-Rath](https://github.com/g-rath)

README.md

@@ -899,6 +899,12 @@ import 'stylesheets/main'
 import 'images/rails.png'
 ```
 
+Assets put in these folders will also have their path stripped just like with the `source_path`.
+
+Example:
+
+A file in `app/assets/images/image.svg` with `additional_paths: ['app/assets']` will result in `static/images/image.svg`
+
 **Note:** Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of the whole parent directory if you just need to reference one or two modules
 
 **Also note:** While importing assets living outside your `source_path` defined in shakapacker.yml (like, for instance, assets under `app/assets`) from within your packs using _relative_ paths like `import '../../assets/javascripts/file.js'` will work in development, Shakapacker won't recompile the bundle in production unless a file that lives in one of it's watched paths has changed (check out `Shakapacker::MtimeStrategy#latest_modified_timestamp` or `Shakapacker::DigestStrategy#watched_files_digest` depending on strategy configured by `compiler_strategy` option in `shakapacker.yml`). That's why you'd need to add `app/assets` to the additional_paths as stated above and use `import 'javascripts/file.js'` instead.

package/rules/__tests__/file.js

@@ -1,5 +1,13 @@
 const file = require('../file')
 
+jest.mock("../../config", () => {
+ const original = jest.requireActual("../../config");
+ return {
+ ...original,
+ additional_paths: [...original.additional_paths, "app/assets"],
+ };
+});
+
 describe('file', () => {
  test('test expected file types', () => {
  const types = [
@@ -59,4 +67,14 @@ describe('file', () => {
  'static/images/nested/deeply/[name]-[hash][ext][query]'
  );
  });
+
+ test('correct generated output path is returned for additional_paths', () => {
+ const pathData = {
+ filename: 'app/assets/images/image.svg',
+ };
+
+ expect(file.generator.filename(pathData)).toEqual(
+ 'static/images/[name]-[hash][ext][query]'
+ );
+ });
 })

package/rules/file.js

@@ -1,14 +1,22 @@
 const { dirname } = require('path')
-const { source_path: sourcePath } = require('../config')
+const {
+ additional_paths: additionalPaths,
+ source_path: sourcePath
+} = require('../config')
 
 module.exports = {
  test: /\.(bmp|gif|jpe?g|png|tiff|ico|avif|webp|eot|otf|ttf|woff|woff2|svg)$/,
  exclude: /\.(js|mjs|jsx|ts|tsx)$/,
  type: 'asset/resource',
  generator: {
  filename: (pathData) => {
- const folders = dirname(pathData.filename)
- .replace(`${sourcePath}`, '')
+ const path = dirname(pathData.filename)
+ const stripPaths = [...additionalPaths, sourcePath]
+
+ const selectedStripPath = stripPaths.find((includePath) => path.includes(includePath))
+
+ const folders = path
+ .replace(`${selectedStripPath}`, '')
  .split('/')
  .filter(Boolean)