https://github.com/hariroshan/parcel-transformer-elm-assets

https://github.com/hariroshan/parcel-transformer-elm-assets

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hariroshan/parcel-transformer-elm-assets
• Owner: hariroshan
• License: mit
• Created: 2023-12-23T10:53:54.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-23T12:08:25.000Z (about 1 year ago)
• Last Synced: 2024-05-02T09:04:08.696Z (9 months ago)
• Language: JavaScript
• Size: 15.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ccamel - hariroshan/parcel-transformer-elm-assets - (JavaScript)

README

        
# Asset dependency adder for ELM

1. Install `parcel-transformer-elm-assets` with 

    ```sh

    npm install -D parcel-transformer-elm-assets

    ```

1. Simply add `parcel-transformer-elm-assets` to the transformers like so,

    ```json

    {

        "transformers": {

            "*.js": ["parcel-transformer-elm-assets", "..."]

        }

    }

    ```

1. In your elm files, you can prefix any asset with `ASSET_URL:[relative_path_to_asset]`

    


    For example,

    ```elm

    view : Model -> Html Msg

    view model =

        div []

            [ img 

                [ src "ASSET_URL:../assets/red-bolt.png" ] 

                [] 

            , img 

                [ src "ASSET_URL:../assets/soldier.jpeg?width=250&quality=50" ] 

                [] 

            ]

    ```

Behind the hood, it will generate `new URL('soldier.jpeg?width=250&quality=50', import.meta.url)` for the asset. [Refer parcel docs](https://parceljs.org/languages/javascript/#url-dependencies)

## Do not generate URLs dynamically like

```elm

photo : String

photo = "ASSET_URL:" ++ "../assets/jane-doe.jpeg"

photo2 : Bool -> String

photo2 canPickHuman = "ASSET_URL:" ++ 

    ( if canPickHuman then 

        "../assets/john-doe.jpeg"

      else 

        "../assets/dog.jpeg"

    )

photo3 : Bool -> String

photo3 canPickHuman = 

    ( if canPickHuman then 

        "ASSET_URL:../assets/john-doe.jpeg"

      else 

        "ASSET_URL:../assets/dog.jpeg"

    )

```

## Recommended way

```elm

johnDoe : String

johnDoe = "ASSET_URL:../assets/jane-doe.jpeg"

dog : String

dog = "ASSET_URL:../assets/dog.jpeg"

smallDog : String

smallDog = "ASSET_URL:../assets/dog.jpeg?width=250&quality=50"

dynamicallyPickImageSrc : Bool -> String

dynamicallyPickImageSrc canPickHuman = 

    ( if canPickHuman then 

        johnDoe

      else 

        smallDog

    )

makeImage : Bool -> Html msg 

makeImage canPickHuman = 

    img [ src (dynamicallyPickImageSrc canPickHuman) ] []

```