Created
December 7, 2019 20:01
-
-
Save daragh/5e465d6fb05482d063c86a32b8463bcf to your computer and use it in GitHub Desktop.
HTML file to be edited with custom markup for use with elm-reactor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <div id="elm"></div> | |
| <script> | |
| // This is an HTML file for use with `elm reactor` to test your own | |
| // Non-Elm markup while also taking advantage of reactor's request-based | |
| // recompilation. | |
| // By default, the compiled JavaScript for `/src/Main.elm` is loaded. | |
| // Alternative Elm source files' compiled JavaScript can be access with | |
| // the `source` query param: | |
| // e.g.: `http://localhost:8000/index.html?source=/src/Other.elm` | |
| // The Elm app is loaded into the `<div id="elm">` above. | |
| (async () => { | |
| eval(await (async () => { | |
| const readUrl = () => { | |
| const string = window.location.search | |
| const params = new URLSearchParams(string) | |
| return params.get('source') || '/src/Main.elm' | |
| } | |
| const get = async url => { | |
| const response = await fetch(url) | |
| const reader = response.body.getReader() | |
| const { value } = await reader.read() | |
| const decoder = new TextDecoder('utf-8') | |
| return decoder.decode(value) | |
| } | |
| const parse = html => { | |
| const parser = new DOMParser() | |
| const parsed = parser.parseFromString(html, 'text/html') | |
| const [ { innerText } ] = parsed.querySelectorAll('script') | |
| return innerText | |
| } | |
| const url = readUrl() | |
| const html = await get(url) | |
| return parse(html) | |
| })()) | |
| app // Elm `app` in scope here for use (e.g.: `app.ports`, etc.) | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment