Verwendung von Elm-Reaktor mit Elm in HTML eingebettet?

Also versuche ich Elm und WebRTC zusammen. Jedoch für WebRTC brauche ich einige Interop zu Javascript. Also habe ich eine index.html mit dem benötigten Skript includes für WebRTC und main.js erstellt.Verwendung von Elm-Reaktor mit Elm in HTML eingebettet?

Allerdings verwende ich Elm-Reaktor. Was ist super nett. Aber es gibt keine main.js. Ich kann es mit elm-make erstellen, aber dann müsste ich es manuell aktualisieren.

Also, gibt es eine Möglichkeit, Elm-Reaktor zusammen mit eingebetteter Ulme arbeiten zu lassen?

Hinweis: Ich benutze Elm 0.18, späteste zum Schreiben.

Quelle

2016-12-26 The Oddler

Wenn Sie bereit sind, ein wenig zu hacken, ist es möglich, . setzen die folgende Gerade in einer Datei index.html und öffnen Sie sie in Reaktor (zB 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>

Wenn Sie Ports oder Flags verwenden möchten, verwenden Sie the following example (Sie müssen Elm.App.fullscreen(flags) etc Ports verwenden, aber runElmProgram() zu Fehler anzeigen):

<!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>

Quelle

2016-12-28 17:23:11

Hat jemand Glück gehabt, Geschichte mit dieser Methode zu erforschen? Ich lande mit dem Div meiner App vor dem '

class="elm-overlay"

', wodurch es unmöglich ist, mit ihm zu interagieren. Vielleicht ist es das wert, als separate Frage zu fragen? – Charlie

@Charlie Interessant, ich habe nur eines meiner alten Projekte überprüft und es funktioniert für mich. Ich vermute, dass Sie Probleme mit dem Z-Index haben. '.elm-overlay {z-index: 100;}' (oder etwas höher als das, was Sie verwenden) sollte helfen. –

Ja, das war's! Ich bin mir nicht sicher, warum es passiert ist, aber das ist eine großartige und einfache Lösung. Vielen Dank! – Charlie

Ab heute (0.18.0), offiziell kann man nicht Ulme-Reaktor verwendet für Ihre Anwendung in benutzerdefinierten HTML einbetten. Es ist auch unmöglich, Port-Subskriptionen mit Elm-Reaktor ohne zusätzliche Einrichtung zu haben.

Betrachten wir so etwas wie Create Elm App oder alternatives.

Quelle

2016-12-26 16:44:31 halfzebra

Ah schade, aber danke für die klare Antwort! –

@TheOddler glücklich zu helfen! Ich behalte Create Elm App, zögern Sie nicht, mich mit einer Frage auf Twitter oder schlaff zu treffen, wenn Sie irgendwelche Probleme haben werden. – halfzebra

Sie verwenden könnte bei elm-live suchen.

Es hat die gleichen Optionen, die elm-reactor hat, aber Sie können Ihre eigenen index.html verwenden.

Quelle

2016-12-27 13:52:53

Verwendung von Elm-Reaktor mit Elm in HTML eingebettet?

Antwort

Verwandte Themen