From f06f9e1aa1443edff18a6723d82adaa4c25debcf Mon Sep 17 00:00:00 2001 From: Rowan Easter-Robinson Date: Tue, 11 Jan 2022 12:44:12 +0000 Subject: [PATCH 1/5] Update README.md Added info about `pin_all_from` and note about migrating from sprockets to propshaft --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index af2ba52..d1defb9 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,22 @@ It's in `app/javascript/application.js` you setup your application by importing It makes sense to use logical names that match the package names used by npm, such that if you later want to start transpiling or bundling your code, you won't have to change any module imports. +### Local modules +If you want to import local js module files from `app/javascript/src` or other sub-folders of `app/javascript` (such as `channels`), you must pin these to be able to import them. +You can use `pin_all_from` to pick all files in a specific folder, so you don't have to `pin` each module individually. +```rb +//config/importmap.rb +pin_all_from 'app/javascript/src`, under: 'src', to: 'src' +``` + +Allows you to +```js +//app/javascript/application.js +import { ExampleFunction } from 'src/example_function' +``` +Which imports the function from `app/javascript/src/example_function.js`. + +Note: Sprockets used to serve assets (albeit without filename digests) it couldn't find from the app/javascripts folder with logical relative paths, meaning pinning local files wasn't needed. Propshaft doesn't have this fallback, so when you use Propshaft you have to pin your local modules. ## Using npm packages via JavaScript CDNs From 4575238096e1cbdef1a6f9a4b05c3c1a21531c24 Mon Sep 17 00:00:00 2001 From: Rowan Easter-Robinson Date: Tue, 11 Jan 2022 12:44:53 +0000 Subject: [PATCH 2/5] Correct ruby comment --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d1defb9..5e2d503 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ It makes sense to use logical names that match the package names used by npm, su If you want to import local js module files from `app/javascript/src` or other sub-folders of `app/javascript` (such as `channels`), you must pin these to be able to import them. You can use `pin_all_from` to pick all files in a specific folder, so you don't have to `pin` each module individually. ```rb -//config/importmap.rb +#config/importmap.rb pin_all_from 'app/javascript/src`, under: 'src', to: 'src' ``` From fc61d3cf4ce00c4532fbdaf9afbe771cf5dae4a8 Mon Sep 17 00:00:00 2001 From: Rowan Easter-Robinson Date: Mon, 13 Feb 2023 08:52:56 +0000 Subject: [PATCH 3/5] Update README.md Co-authored-by: Nipun Paradkar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e2d503..2d06361 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ pin_all_from 'app/javascript/src`, under: 'src', to: 'src' Allows you to ```js -//app/javascript/application.js +// app/javascript/application.js import { ExampleFunction } from 'src/example_function' ``` Which imports the function from `app/javascript/src/example_function.js`. From 6845bb36cadec0f1fa2ee98111fca96abe465db1 Mon Sep 17 00:00:00 2001 From: Rowan Easter-Robinson Date: Mon, 13 Feb 2023 08:53:03 +0000 Subject: [PATCH 4/5] Update README.md Co-authored-by: Nipun Paradkar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2d06361..dfb8f47 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ It makes sense to use logical names that match the package names used by npm, su If you want to import local js module files from `app/javascript/src` or other sub-folders of `app/javascript` (such as `channels`), you must pin these to be able to import them. You can use `pin_all_from` to pick all files in a specific folder, so you don't have to `pin` each module individually. ```rb -#config/importmap.rb +# config/importmap.rb pin_all_from 'app/javascript/src`, under: 'src', to: 'src' ``` From a66e8a01558a13b976d453f7fcb7bdeec21af2f1 Mon Sep 17 00:00:00 2001 From: Rowan Easter-Robinson Date: Mon, 13 Feb 2023 09:01:00 +0000 Subject: [PATCH 5/5] Updated README for pin_all_from issue --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 23e0bb8..f3b335e 100644 --- a/README.md +++ b/README.md @@ -64,21 +64,26 @@ It's in `app/javascript/application.js` you setup your application by importing It makes sense to use logical names that match the package names used by npm, such that if you later want to start transpiling or bundling your code, you won't have to change any module imports. ### Local modules + If you want to import local js module files from `app/javascript/src` or other sub-folders of `app/javascript` (such as `channels`), you must pin these to be able to import them. You can use `pin_all_from` to pick all files in a specific folder, so you don't have to `pin` each module individually. + ```rb # config/importmap.rb pin_all_from 'app/javascript/src`, under: 'src', to: 'src' ``` -Allows you to +The `:to` parameter is only required if you want to change the destination logical import name. If you drop the :to option, you must place the :under option directly after the first parameter. + +Allows you to: + ```js // app/javascript/application.js import { ExampleFunction } from 'src/example_function' ``` Which imports the function from `app/javascript/src/example_function.js`. -Note: Sprockets used to serve assets (albeit without filename digests) it couldn't find from the app/javascripts folder with logical relative paths, meaning pinning local files wasn't needed. Propshaft doesn't have this fallback, so when you use Propshaft you have to pin your local modules. +Note: Sprockets used to serve assets (albeit without filename digests) it couldn't find from the `app/javascripts` folder with logical relative paths, meaning pinning local files wasn't needed. Propshaft doesn't have this fallback, so when you use Propshaft you have to pin your local modules. ## Using npm packages via JavaScript CDNs