npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

elm-assets-loader

v0.4.0

Published

webpack loader for webpackifying asset references in Elm code

Downloads

186

Readme

Elm assets loader Version Travis build Status

webpack loader for webpackifying asset references in Elm.

Installation

$ npm install --save elm-assets-loader

Usage

Documentation: Using loaders

elm-assets-loader is intended to be chained after elm-webpack-loader, and with a loader to load static assets like file-loader or url-loader. elm-asset-path is a companion Elm package that provides types and functions for working with asset paths.

Suppose we have a union type for tagging asset paths:

module My.Assets exposing (AssetPath(..))

type AssetPath
    = AssetPath String

star =
    AssetPath "star.png"

Tell elm-assets-loader to look for strings tagged with AssetPath:

    rules: [
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          {
            loader: 'elm-assets-loader',
            options: {
              module: 'My.Assets',
              tagger: 'AssetPath'
            }
          },
          'elm-webpack-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader',
        options: {
          name: '[name]-[hash].[ext]'
        }
      }
    ]

Then at runtime, the value of My.Assets.star will be something like AssetPath "star-038a1253d7a9e4682deb72cd68c3a328.png".

To actually use this string value, define a helper like so:

-- say, in My.Assets

path : AssetPath -> String
path (AssetPath str) =
    str

Usage example:

viewStar : Html Msg
viewStar =
    img [ src <| My.Assets.path <| My.Assets.star ] []

elm-asset-path includes a reference implementation of this AssetPath type with support for resolving to a URL on a CDN.

Options

tagger (required)

  • Example: "AssetPath"
  • The "tag" part of a tagged union of shape <tagger> String that's used to tag asset paths in your code.

module (required)

  • Example: "My.Assets"
  • Module in which the tagged union is defined.

package (optional)

  • Default: "user/project"
  • Example: "NoRedInk/myapp"
  • Look for the tagger inside this package.
  • If the module you specified above is provided by a 3rd party package, then specify the name of that package.
  • If the module you specified above is defined in your main application code, then specify the owner/repo portion of the "repository" property of your elm-package.json.
    • ex."repository": "https://github.com/user/project.git" -> package should be "user/project"
    • ex."repository": "https://github.com/NoRedInk/myapp.git" -> package should be "NoRedInk/myapp"

dynamicRequires (optional)

  • Default: "warn"

  • Possible values: "error" | "warn" | "ok"

  • What to do with dynamically constructed asset paths.

    • "error" - stop processing the file
    • "warn" - emit a warning
    • "ok" - this is expected; say nothing about it

    Dynamic requires is not supported. This option simply controls whether or not to raise an error or skip over expressions like:

    example iconName =
        AssetPath ("icon-" ++ iconName ++ ".png")

localPath (optional)

  • Function to transform tagged strings to a path that can be resolved by webpack. For example, you may want to tag URL paths, which may not be resolvable to a filesystem path, so that your code works without being webpacked.

    star = AssetPath "/public/images/star.png"
    
    img [ src (toUrl star) ] []

    webpack config (for webpack 2):

    module.exports = {
      ...
      module: {
        rules: [
          {
            test: /\.elm$/,
            use: [
              {
                loader: 'elm-assets-loader',
                options: {
                  localPath: function(url) {
                    // transform `url` to a local path that resolves to a file
                    return url.replace(/^\/public\//, "");
                  }
                }
              },
              'elm-webpack-loader?cwd=' + fixturesPath + '&pathToMake=' + elmMakePath
            ]
          },
          {
            test: /\.svg$/,
            use: {
              loader: 'file-loader',
              options: {
                publicPath: function(path) {
                  // transform `path` to a URL that the web server can understand and serve
                  return "/public/" + url;
                }
              }
            }
          }
        }
      }
    }

Note

Don't set noParse on .elm files. Otherwise, requires won't be processed.

Under the hood

Let's walk through what happens to the example above when processed by webpack.

This Elm code:

AssetPath "star.png"

will be compiled to JavaScript by elm-webpack-loader:

_user$project$My_Assets$AssetPath("star.png")

elm-assets-loader turns this into:

_user$project$My_Assets$AssetPath(require("star.png"))

webpack parses this require call, determines it to be a file-loader module, resulting in:

_user$project$My_Assets$AssetPath(__webpack_require__(30))

The module loaded by __webpack_require__(30) will look like:

30:
function(module, exports) {
   module.exports = "star-038a1253d7a9e4682deb72cd68c3a328.png";
}

Which means, effectively, the JavaScript code we saw originally has been rewritten as:

_user$project$My_Assets$AssetPath("star-038a1253d7a9e4682deb72cd68c3a328.png")

Supported Versions

See .travis.yml to see supported combinations of the Elm Compiler & Webpack.