Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update importmap.md #29067

Merged
merged 1 commit into from
Nov 10, 2024
Merged

Update importmap.md #29067

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ruby_on_rails/assets_and_navigation/importmap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,17 +100,17 @@
pin "md5", preload: false # file lives in vendor/javascript/md5.js

# app/views/layouts/application.html.erb
<%= javascript_importmap_tags %>

Check failure on line 103 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

ruby_on_rails/assets_and_navigation/importmap.md:103 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [Expected a blank line or a code block delimiter (```) before the tag] [Context: "<%= javascript_importmap_tags %>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

# will include the following link before the importmap is setup:
<link rel="modulepreload" href="/assets/javascript/@github--hotkey.js">

Check failure on line 106 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

ruby_on_rails/assets_and_navigation/importmap.md:106 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [Expected a blank line or a code block delimiter (```) before the tag] [Context: "<link rel="modulepreload" href="/assets/javascript/@github--hotkey.js">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
```

### Importmap considerations

While importmaps are a great way to get started with Rails, and will allow you to quickly make use of JavaScript libraries without having to worry about bundling and transpiling, there are some wider considerations you need to be aware of.

The first consideration is dependency management. This is when the package you are using depends on other packages for their use. Using importmaps locks the version of dependencies as required by the package you are using, but what if you add another package that relies on the same dependency but a different version? You'll start getting errors and tracking them down can be tricky. At this stage, importmaps don't manage dependencies and so are best used when your reliance on third party packages is minimal.
The first consideration is dependency management. This is when the package you are using depends on other packages for their use. Using importmaps locks the version of dependencies as required by the package you are using, but what if you add another package that relies on the same dependency but a different version? You'll start getting errors and tracking them down can be tricky. At this stage, importmaps doesn't manage dependencies and so are best used when your reliance on third party packages is minimal.

Dependency management also feeds into the next consideration. How do you manage versioning of your libraries to keep them up to date? If you use something like webpack that requires an explicit package.json file that maps libraries to version and then a lock file to manage all the dependencies you can then rely on services such as GitHub's [Dependabot](https://github.com/dependabot) to keep those packages up to date for you by submitting pull requests against your GitHub repo to update the packages. When using importmaps there isn't currently a way to do this, so you'll need to manage those updates yourself. If there's a security critical update for a library you rely on and you aren't aware of that? You can leave your app exposed to anyone who can exploit that.

Expand All @@ -120,7 +120,7 @@

### Assignment

<div class="lesson-content__panel" markdown="1">

Check failure on line 123 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

ruby_on_rails/assets_and_navigation/importmap.md:123 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [Expected a blank line or a code block delimiter (```) after the tag] [Context: "<div class="lesson-content__panel" markdown="1">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md
Since Rails 7 is relatively new there aren't a ton of resources available yet. That being said here are some that are worth taking a look at:

1. First things first. [Briefly look over the `importmap-rails` gem README on GitHub](https://github.com/rails/importmap-rails). This has A LOT of the information here plus more. Straight from the horse's mouth.
Expand All @@ -133,9 +133,9 @@

The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

- <a class="knowledge-check-link" href="#import-maps-with-npm-packages">Can you use import maps with npm packages?</a>

Check failure on line 136 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. 

ruby_on_rails/assets_and_navigation/importmap.md:136 TOP007/use-markdown-links Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. [
  Expected: "[Can you use import maps with npm packages?](#import-maps-with-npm-packages)"
  Actual: "<a class="knowledge-check-link" href="#import-maps-with-npm-packages">Can you use import maps with npm packages?</a>"
] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP007.md
- <a class="knowledge-check-link" href="#downloading-vendor-files">How do you download vendor files using import maps?</a>

Check failure on line 137 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. 

ruby_on_rails/assets_and_navigation/importmap.md:137 TOP007/use-markdown-links Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. [
  Expected: "[How do you download vendor files using import maps?](#downloading-vendor-files)"
  Actual: "<a class="knowledge-check-link" href="#downloading-vendor-files">How do you download vendor files using import maps?</a>"
] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP007.md
- <a class="knowledge-check-link" href="#preloading-pinned-modules">How can you preload pinned modules?</a>

Check failure on line 138 in ruby_on_rails/assets_and_navigation/importmap.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. 

ruby_on_rails/assets_and_navigation/importmap.md:138 TOP007/use-markdown-links Links used to navigate to external content or other landmarks in the page should use markdown links instead of HTML anchor tags. [
  Expected: "[How can you preload pinned modules?](#preloading-pinned-modules)"
  Actual: "<a class="knowledge-check-link" href="#preloading-pinned-modules">How can you preload pinned modules?</a>"
] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP007.md

### Additional resources

Expand Down
Loading