{"id":13417484,"url":"https://github.com/hmsk/vite-plugin-elm","last_synced_at":"2025-05-15T10:03:04.425Z","repository":{"id":37395804,"uuid":"300526373","full_name":"hmsk/vite-plugin-elm","owner":"hmsk","description":"A plugin for Vite enables you to compile an Elm application/document/element","archived":false,"fork":false,"pushed_at":"2025-05-12T17:16:39.000Z","size":2793,"stargazers_count":208,"open_issues_count":9,"forks_count":31,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-12T18:29:26.335Z","etag":null,"topics":["elm","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-elm","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hmsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"custom":["https://www.buymeacoffee.com/hmsk"]}},"created_at":"2020-10-02T06:48:20.000Z","updated_at":"2025-05-12T17:16:41.000Z","dependencies_parsed_at":"2023-11-18T06:24:30.128Z","dependency_job_id":"dea04632-3883-436e-b701-3847364bfbab","html_url":"https://github.com/hmsk/vite-plugin-elm","commit_stats":{"total_commits":689,"total_committers":18,"mean_commits":38.27777777777778,"dds":0.4528301886792453,"last_synced_commit":"12e951c0f853145bfed0a960b6ddc4fb30b18a25"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-elm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-elm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-elm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmsk%2Fvite-plugin-elm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmsk","download_url":"https://codeload.github.com/hmsk/vite-plugin-elm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253805853,"owners_count":21967053,"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":["elm","vite","vite-plugin"],"created_at":"2024-07-30T22:00:38.041Z","updated_at":"2025-05-15T10:03:02.995Z","avatar_url":"https://github.com/hmsk.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/hmsk"],"categories":["Plugins","Compile and bundle"],"sub_categories":["Elm","Outdated Boilerplates"],"readme":"# vite-plugin-elm\n\n[![npm](https://img.shields.io/npm/v/vite-plugin-elm.svg?style=for-the-badge)](https://www.npmjs.com/package/vite-plugin-elm)\n[![npm next channel](https://img.shields.io/npm/v/vite-plugin-elm/next?style=for-the-badge\u0026color=yellow)](https://www.npmjs.com/package/vite-plugin-elm/v/next)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/hmsk/vite-plugin-elm/main.yml?branch=main\u0026style=for-the-badge)](https://github.com/hmsk/vite-plugin-elm/actions/workflows/main.yml)\n\nA plugin that enables us to compile an Elm [application](https://package.elm-lang.org/packages/elm/browser/latest/Browser#application), [document](https://package.elm-lang.org/packages/elm/browser/latest/Browser#document), or [element](https://package.elm-lang.org/packages/elm/browser/latest/Browser#element) within your [Vite](https://github.com/vitejs/vite) project. In development, [hot module replacement](https://vitejs.dev/guide/features.html#hot-module-replacement) works to some extent.\n\n```ts\nimport { Elm } from './MyApplication.elm'\n\nElm.MyApplication.init()\n```\n\n## Setup\n\n```\nnpm i -D vite-plugin-elm\n```\n\nIn `vite.config.(js|ts)`:\n\n```ts\nimport { defineConfig } from 'vite'\nimport elmPlugin from 'vite-plugin-elm'\n\nexport default defineConfig({\n  plugins: [elmPlugin()]\n})\n```\n\nThen you can import a `.elm` file and run it like:\n\n```ts\nimport { Elm } from './Hello.elm'\n\n// Mount \"Hello\" Browser.{element,document} on #root\nElm.Hello.init({\n  node: document.getElementById('root'),\n  flags: \"Initial Message\"\n})\n```\n\nYou can explore the [`/example`](/example) directory to experiment with an actual Vite project. Additionally, [this functional website](https://github.com/hmsk/hmsk.me) can serve as a helpful resource to learn how to use it effectively.\n\n## Options\n\n### `debug` (Default: `process.env.NODE_ENV !== 'production'`)\n\nYou can control the debug mode of Elm, which toggles the Elm Debugger, by providing a boolean value.\n\n![image](https://user-images.githubusercontent.com/85887/120060168-fd7d8600-c00a-11eb-86cd-4125fe06dc59.png)\n\n```ts\nelmPlugin({ debug: false })\n```\n\nWhen set to `false`, it disables debug mode in both development and production. Conversely, setting it to `true` enables debug mode even in production. It's important to note that **when the production build has debug mode enabled, Elm's compiler optimizations do not take place**.\n\n### `optimize` (Default: `!debug \u0026\u0026 process.env.NODE_ENV === 'production'`)\n\nYou can control build optimization by providing a boolean value, which can be useful for using [`Debug`](https://package.elm-lang.org/packages/elm/core/latest/Debug) functions in your Elm code.\n\n```ts\nelmPlugin({ debug: false, optimize: false })\n```\n\nWhen set to `true`, it optimizes the build and prohibits the usage of Debug Elm functions. If you specify the optimize attribute, you must indicate whether debugging is needed. This is because you might want to have debug traces for the purpose of observing all actions, not necessarily for debugging specific issues.\n\n## Static Assets Handling\n\nThis plugin supports importing assets by using a specific tag `[VITE_PLUGIN_ELM_ASSET:\u003cpath to asset\u003e]` to leverage [Vite's asset handling](https://vitejs.dev/guide/assets.html#importing-asset-as-ur). When your Elm code contains a tag, this plugin replaces that string with the imported asset. It's important to note that the string should be a standalone string without any concatenation.\n\n```elm\nHtml.img [ Html.Attributes.src \"[VITE_PLUGIN_ELM_ASSET:/assets/logo.jpg]\" ] []\n```\n\n### Helper package\n\nWe can simplify the tagging process by using the Elm package `elm-vite-plugin-helper`:\n\n```sh\nelm install hmsk/elm-vite-plugin-helper\n```\n\n```elm\nimport VitePluginHelper\n\nHtml.img [ Html.Attributes.src \u003c| VitePluginHelper.asset \"/assets/logo.png?inline\" ] []\n```\n\n## Combine multiple main files (Experimental)\n\nBy passing importing paths via the `with` URL-ish parameter(s), the plugin compiles multiple main files in a single compilation process. This results in a single Elm export that contains multiple properties, each corresponding to a given main file. This feature helps reduce the bundle size when compared to importing each file separately because common modules and Elm core code are not repeated.\n\n```ts\n// `Elm.App` and `Elm.Another`, both can work as like importing individually.\nimport { Elm } from './App.elm?with=./Another.elm'\n\nElm.App.init({\n  node: document.getElementById('rootForApp'),\n})\nElm.Another.init({\n  node: document.getElementById('rootForAnother'),\n})\n```\n\nFor 3+ main files:\n\n```ts\nimport { Elm } from './App.elm?with=./Another.elm\u0026with=./YetAnother.elm'\n```\n\n## Acknowledgement\n\n- [klazuka/elm-hot](https://github.com/klazuka/elm-hot) for a helpful referrence of the HMR implementation\n- [ChristophP/elm-esm](https://github.com/ChristophP/elm-esm/issues/2) for publishing IIFE -\u003e ESM logic\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmsk%2Fvite-plugin-elm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmsk%2Fvite-plugin-elm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmsk%2Fvite-plugin-elm/lists"}