Использование elm-реактора с Elm, встроенным в HTML?

Так что я пробую Elm и WebRTC вместе. Однако для WebRTC мне нужно некоторое взаимодействие с Javascript. Поэтому я создал файл index.html с необходимыми сценариями, включающими как для WebRTC, так и для main.js.

Тем не менее, я использую Elm-реактор. Это супер мило. Но нет main.js. Я могу создать его с помощью elm-make, но тогда мне придется обновить его вручную.

Итак, есть ли способ заставить реактор вяз работать вместе со встроенным вязом?

Примечание: я использую Elm 0.18, последний на момент написания статьи.

Источник

3 ответа

Решение

Если вы хотите немного взломать, вполне возможно использовать свой собственный index.html с реактором elm. Просто поместите следующее в файл index.html и откройте его в реакторе (например, http://localhost:8000/src/index.html):

<html>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
</head>

<body>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: &#39;Source Sans Pro&#39;;">
    <div style="font-size: 3em;">Building your project!</div>
    <img src="/_reactor/waiting.gif">
    <div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
  </div>
</body>

<!-- Fonts and external JS and styles are available, I've put Ace for example -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>

<!-- Put the name of your app here (my sources place in `src` forder) -->
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script>

<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
while (document.body.firstChild) {
  document.body.removeChild(document.body.firstChild);
}
runElmProgram();
</script>

</html>

Если вы хотите использовать порты или флаги, используйте следующий пример (вам нужно Elm.App.fullscreen(flags) и т.д. использовать порты, но runElmProgram() показать ошибки):

<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}

try {
  app = Elm.App.fullscreen(flags)

  /* app.ports is now available */
} catch (e) {
  // this will run in case there are compile errors:
  var stylesheets = document.querySelectorAll('link')
  for (var i = 0; i < stylesheets.length; i++) {
    stylesheets[i].parentNode.removeChild(stylesheets[i])
  }
  runElmProgram()
}
</script>
Источник

Возможно, вы захотите посмотреть на вяз вживую.

Имеет те же параметры, что и elm-reactor есть, но вы можете использовать свой собственный index.html,

Источник

По состоянию на сегодня (0.18.0), официально вы не можете использовать elm-реактор для встраивания вашего приложения в пользовательский HTML. Также невозможно иметь портовые подписки с elm-реактором без дополнительной настройки.

Подумайте об использовании приложения типа " Создать вяз" или альтернатив.

Источник
Другие вопросы по тегам