{"id":16520586,"url":"https://github.com/layflags/elm-translations","last_synced_at":"2025-09-01T12:12:22.129Z","repository":{"id":43995414,"uuid":"236569019","full_name":"layflags/elm-translations","owner":"layflags","description":"Type safe translations for Elm","archived":false,"fork":false,"pushed_at":"2024-07-10T15:05:28.000Z","size":155,"stargazers_count":5,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T23:38:49.019Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/elm-translations","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/layflags.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-27T19:01:51.000Z","updated_at":"2024-07-10T15:05:31.000Z","dependencies_parsed_at":"2024-10-28T10:28:34.991Z","dependency_job_id":null,"html_url":"https://github.com/layflags/elm-translations","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":0.06896551724137934,"last_synced_commit":"1048178d83c6e9200f65c50d100f65c94e1bb030"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layflags%2Felm-translations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layflags%2Felm-translations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layflags%2Felm-translations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/layflags%2Felm-translations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/layflags","download_url":"https://codeload.github.com/layflags/elm-translations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244771313,"owners_count":20507789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T16:51:41.287Z","updated_at":"2025-03-21T09:30:30.756Z","avatar_url":"https://github.com/layflags.png","language":"Elm","funding_links":["https://www.buymeacoffee.com/layflags"],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.buymeacoffee.com/layflags\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n# elm-translations\n\n**Generate type safe translations for your Elm app**\n\n`elm-translations` is a command line script that generates an Elm module from your JSON translation files. This module just includes a `Translations` type (nested Record), a JSON decoder and a JSON parser, but not the actual translation data. So you just need to generate the Elm code once and then use it for all the languages you want to support in your app by e.g. loading them dynamically at runtime.\n\n## Features\n\n### ✅ Type safe\n\nWon't compile if you try to access the wrong keys in your Elm code\n\n### ✅ Nesting support\n\nLet's you organize your translations easily\n\n### ✅ Variable substitutions\n\nJust pass a Record and never forget to set a variable again\n\n## Usage\n\n```sh\n# get a preview of the generated Elm code\n$ npx elm-translations --from your-translations.json\n\n# generate Elm code and store it here: ./src/Translations.elm\n$ npx elm-translations --from your-translations.json --out src\n\n# or use a custom module name - will be stored here: ./src/I18n/Trans.elm\n$ npx elm-translations --from your-translations.json --module I18n.Trans --out src\n\n# see all possible options\n$ npx elm-translations --help\n\n  Type safe translations for Elm\n\n  Usage\n    $ elm-translations\n\n  Options\n    --from,   -f  path to your translations file (JSON)\n    --module, -m  custom Elm module name (default: Translations)\n    --root,   -r  key path to use as root (optional)\n    --out,    -o  path to a folder where the generated translations should be saved (optional)\n    --version     show version\n\n  Examples\n    $ elm-translations --from en.json\n    $ elm-translations -f en.json -m I18n.Translations -o src\n```\n\n## Examples\n\n### Passing translation data via `flags`\n\n1. Create your `Translations.elm` file with e.g.:\n\n```sh\n$ npx elm-translations -f en.json -o src\n```\n\n2. In your Html page pass the translation data:\n\n```html\n...\n\u003cscript\u003e\n  Elm.Main.init({\n    node: document.getElementById(\"elm\"),\n    flags: {\n      // your translation data inlined by e.g. EJS or Handlebars:\n      // ...\n      welcome: \"Welcome {{name}}!\",\n      home: {\n        intro: \"This App is about ...\",\n      },\n      // ...\n    },\n  });\n\u003c/script\u003e\n...\n```\n\n3. In your Elm app use the translations:\n\n```elm\nmodule Main exposing (..)\n\nimport Json.Decode\nimport Json.Encode\nimport Translations exposing (Translations)\n\n\n-- ...\n\n\ntype Model\n    = Initialized Translations\n    | Failed Json.Decode.Error\n\n\ninit : Json.Encode.Value -\u003e ( Model, Cmd Msg )\ninit flags =\n    case Translations.parse flags of\n        Ok t -\u003e\n            ( Initialized t, Cmd.none )\n\n        Err error -\u003e\n            ( Failed error, Cmd.none )\n\n\nview : Model -\u003e Html Msg\nview model =\n    case model of\n        Initialized t -\u003e\n            div []\n                [ h1 [] [ text \u003c| t.welcome { name = \"John\" } ]\n                , p [] [ text t.home.intro ]\n                ]\n\n        Failed error -\u003e\n            p [] [ text \"Error: Cannot proccess translation data\" ]\n\n\n-- ...\n\n```\n\n### Dynamically fetching translation data\n\nThere's an example available in the git repository. To let it run locally on your machine, follow these steps:\n\n1. Clone the respository\n\n```sh\n$ git clone git@github.com:layflags/elm-translations.git\n```\n\n2. Go to the example folder\n\n```sh\n$ cd elm-translations/example\n```\n\n3. Generate the `Translations.elm` module\n\n```sh\n$ npx elm-translations --from en.json --out src\n```\n\n4. Start Elm Reactor and go to http://localhost:8000/src/Main.elm\n\n```sh\n$ elm reactor\n```\n\nOr just visit: https://elm-translations-example.surge.sh/\n\n## JSON file requirements\n\n### Use only lower camel case keys!\n\n**🟢 YES**\n\n```json\n{ \"buttonTitle\": \"Submit\" }\n```\n\n```json\n{ \"headline\": \"Welcome to Elm!\" }\n```\n\n**🔴 NO**\n\n```json\n{ \"button-title\": \"Submit\" }\n```\n\n```json\n{ \"Headline\": \"Submit\" }\n```\n\n### Use only lower camel case variables!\n\n**🟢 YES**\n\n```json\n{ \"welcome\": \"Hi {{name}}!\" }\n```\n\n```json\n{ \"welcome\": \"Hi {{firstName}} {{lastName}}!\" }\n```\n\n**🔴 NO**\n\n```json\n{ \"welcome\": \"Hi {{Name}}!\" }\n```\n\n```json\n{ \"welcome\": \"Hi {{first_Name}} {{last_Name}}!\" }\n```\n\n### Use only `String` values (nesting possible)!\n\n**🟢 YES**\n\n```json\n{ \"buttonTitle\": \"Submit\" }\n```\n\n```json\n{ \"form\": { \"buttonTitle\": \"Submit\" } }\n```\n\n**🔴 NO**\n\n```json\n{ \"count\": 3 }\n```\n\n```json\n{ \"isVisible\": true }\n```\n\n```json\n{ \"name\": null }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayflags%2Felm-translations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flayflags%2Felm-translations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flayflags%2Felm-translations/lists"}