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

Так что я пытаюсь объединить вместе Elm и WebRTC. Однако для WebRTC мне нужен какой-то interop для javascript. Поэтому я создал index.html с необходимым скриптом, как для WebRTC, так и для main.js.Использование elm-реактора с Elm, встроенного в HTML?

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

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

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

источник

2016-12-26 The Oddler

Если вы готовы взломать бит, вполне возможно, что use your own index.html with elm reactor. Просто поместите в файл 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>

Если вы хотите использовать порты или флаги, используйте the following example (вам нужно 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>

источник

2016-12-28 17:23:11

Неужели кому-нибудь удавалось исследовать историю, используя этот метод? Я заканчиваю с div моего приложения, сидящего перед '

class="elm-overlay"

', что делает невозможным взаимодействие. Может быть, этого стоит задать как отдельный вопрос? – Charlie

@Charlie Интересно, я просто дважды проверил один из моих старых проектов, и он работает для меня. Я предполагаю, что у вас проблемы с z-index. '.elm-overlay {z-index: 100;}' (или что-то большее, чем вы используете). –

Да, это так! Не знаю, почему это происходит, но это отличное и простое решение. Благодаря! – Charlie

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

Рассмотрим, используя нечто вроде Create Elm App или alternatives.

источник

2016-12-26 16:44:31 halfzebra

Ах, стыдно, но спасибо за ясный ответ! –

@ TheOddler рад помочь! Я поддерживаю Create Elm App, не стесняйтесь ударить меня вопросом на твиттере или слабине, если у вас возникнут проблемы. – halfzebra

Вы можете посмотреть на elm-live.

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

источник

2016-12-27 13:52:53

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

ответ

Смежные вопросы