class AssetPipeline::ImportMap

AssetPipeline::ImportMap
Reference
Object

Overview

The ImportMap is the main way that javascript is handled. This is a no-bundle approach using the "import map" browser standard.

The ImportMap supports several features that are provided by the import map specification:

imports: this is a url that can be relative to your application, or a full CDN path to an esm module
scopes: this is a feature that can help rescrict which librarys are loaded. The keys here are relative paths in your application.
preloading: any import that's added with preload: true will also render a tag to have the module preloaded

Defined in:

import_map/import_map.cr

Constructors

.new(name : String = "application", public_asset_base_path : Path = Path["/"])
Set the name of the import map during initialization.

Instance Method Summary

#add_import(name : String, to : String, preload : Bool = false)
Name the library you want to incude in the import map.
#add_scope(scope : String, name : String, to : String)
Add a scope to your import map.
#build_import_map_json : String
Generates the valid import json.
#build_import_map_tag : String
This renders the complete HTML tag for the import map, including the modulepreload tags required.
#name : String
The name of your import map.
#name=(name : String)
The name of your import map.

Constructor Detail

def self.new(name : String = "application", public_asset_base_path : Path = Path["/"]) #

Set the name of the import map during initialization. The default is application Set the base path for your assets. This is used to make sure that relative paths are correct.

For example, if you're serving your javascript files from /assets/js then you would set public_asset_bate_path to /assets/js

Instance Method Detail

def add_import(name : String, to : String, preload : Bool = false) #

Name the library you want to incude in the import map.

import("lodash", "https://cdn.jsdelivr.net/npm/lodash/lodash.min.js")

Adding preload will mark the module to be eager loaded by the browser.

import("lodash", "https://cdn.jsdelivr.net/npm/lodash/lodash.min.js", preload: true)

The #name should match the way you import a class in your JS code.

The to parameter is the full path and name of file or the full CDN url to an ESM module.

Think of it like this: you are importing the class #name associated to a library file path.

def add_scope(scope : String, name : String, to : String) #

Add a scope to your import map. Scopes are paths relative to your application.

To learn how to use scopes, read about import maps and scopes here

def build_import_map_json : String #

Generates the valid import json. This can be used in a .json file or a <script type="importmap"> tag.

def build_import_map_tag : String #

This renders the complete HTML tag for the import map, including the modulepreload tags required.

Use this method to render the full import map into an HTML view.

def name : String #

The name of your import map. Updatable with the #name= method.

def name=(name : String) #