For each file in a directory (recursively) generate an Elm method to return its path, e.g. `Files.imagesLogoSvg`

README.md

Given a pubilc/ directory layout

$ tree public
public/
├── images
│   ├── favicon.ico
│   └── logo.55e79e5927a639d21a1b.svg
├── index.html
└── manifest.ad717f2466ce655fff5c.json

1 directory, 4 files

Running files-as-elm-methods.js on it will give us

$ files-as-elm-methods.js public
module Files exposing
	( imagesFaviconIco
	, imagesLogoSvg
	, indexHtml
	, manifestJson
	)

imagesFaviconIco : String
imagesFaviconIco = "/images/favicon.ico"

imagesLogoSvg : String
imagesLogoSvg = "/images/logo.55e79e5927a639d21a1b.svg"

indexHtml : String
indexHtml = "/index.html"

manifestJson : String
manifestJson = "/manifest.ad717f2466ce655fff5c.json"

Then use it like

import Files

view : Html msg
view = img [ src Files.imagesLogoSvg ] []

filecontent-as-elm-methods.js

#!/usr/bin/env node

const fs = require('fs')
const path = require('path')

var listing = {}

function camelCasePath (str) {
  var parts = str.split(/[^A-Za-z0-9]/)
  if (parts.length === 1) return str
  var rest = parts.slice(1)
    .filter(function (word) {
      return !word.match(/^([a-f0-9]{20}|[a-f0-9]{32})$/) // remove webpack `[hash]`
    }).map(function (word) {
      if (word.length === 1) return word.toUpperCase()
      return word.charAt(0).toUpperCase() + word.substr(1)
    })
  return [parts[0].toLowerCase(), rest.join('')].join('')
}

function onfiles (trim, basedir, files) {
  files.forEach(function (file) {
    var fullpath = path.join(basedir, file)
    var stat = fs.statSync(fullpath)
    if (stat.isDirectory()) {
      return onfiles(trim, fullpath, fs.readdirSync(fullpath))
    }
    listing[camelCasePath(fullpath.substr(trim.length + 1))] = fs.readFileSync(fullpath, 'utf-8')
  })
}

process.argv.slice(2).forEach(function (basedir, index) {
  onfiles(basedir, basedir, fs.readdirSync(basedir))
})

console.log('module Templates exposing')
Object.keys(listing).forEach(function (key, index) {
  var prefix = '    ,'
  if (index === 0) prefix = '    ('
  console.log(prefix, key)
})
console.log('    )')
Object.keys(listing).forEach(function (key, index) {
  console.log('')
  console.log('')
  console.log(key, ': String')
  console.log(key, '=')
  console.log('    ' + JSON.stringify(listing[key]))
})

files-as-elm-methods.js

#!/usr/bin/env node

const fs = require('fs')
const path = require('path')

var listing = {}

function camelCasePath (str) {
  var parts = str.split(/[^A-Za-z0-9]/)
  if (parts.length === 1) return str
  var rest = parts.slice(1)
    .filter(function (word) {
      return !word.match(/^([a-f0-9]{20}|[a-f0-9]{32})$/) // remove webpack `[hash]`
    }).map(function (word) {
      if (word.length === 1) return word.toUpperCase()
      return word.charAt(0).toUpperCase() + word.substr(1)
    })
  return [parts[0].toLowerCase(), rest.join('')].join('')
}

function onfiles (trim, basedir, files) {
  files.forEach(function (file) {
    var fullpath = path.join(basedir, file)
    var stat = fs.statSync(fullpath)
    if (stat.isDirectory()) {
      return onfiles(trim, fullpath, fs.readdirSync(fullpath))
    }
    listing[camelCasePath(fullpath.substr(trim.length + 1))] = fullpath.substr(trim.length)
  })
}

process.argv.slice(2).forEach(function (basedir, index) {
  onfiles(basedir, basedir, fs.readdirSync(basedir))
})

console.log('module Files exposing')
Object.keys(listing).forEach(function (key, index) {
  var prefix = '    ,'
  if (index === 0) prefix = '    ('
  console.log(prefix, key)
})
console.log('    )')
Object.keys(listing).forEach(function (key, index) {
  console.log('')
  console.log('')
  console.log(key, ': String')
  console.log(key, '=')
  console.log('    ' + JSON.stringify(listing[key]))
})

Makefile

generate: src/Files.elm src/Templates.elm

src/Files.elm: files-as-elm-methods.js $(shell find public)
	node files-as-elm-methods.js public > src/Files.elm

src/Templates.elm: filecontent-as-elm-methods.js $(shell find public)
	node filecontent-as-elm-methods.js public > src/Templates.elm

Don't add Files.elm into code repository. Instead, only generate it when necessary: locally, before tests on CI, after building assets before elm make...

import Files

view : Html msg
view = img [ src Files.imagesLogoSvg ] []

With function-level dead code elimination we don't even need to care if the generated Files.elm included references to files that we don't use in our app 🤷‍♂️