Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
Related
I'm using quasar and vue3 to build an SSR app
In chrome developer mode when I visualize the generated HTML, I have some Vue components not compiled to raw HTML like:
<body class="desktop body--light" data-server-rendered>
<div v-for="deal in clientssList" :key="client.Id">
<CLientItemSmDown :ClientModel="deal"></CLientItemSmDown>
</div>
is this normal, isn't SSR supposed to return raw HTML so bots can read it?
Saw this question last time already (can't find it back).
But no, CLientItemSmDown is a valid web-component and don't need to be transformed into a built-in HTML tag like input, div etc...
There is maybe an option to convert it down the road to some HTML, but I don't think that it's necessary and it may not be easily done if it's not supported by default.
That page may be quite interesting regarding Vue + Web-components.
You may raise a Github issue or join their Discord.
The TLDR being that it's fine to let it as is IMO.
I need to be able to add a js file to be able to manipulate the html? I tried to add something similar to what is done in the assets.yml by loading the styles.css, but I did not have the expected result, and I do not understand how else I could do it.
There is a new Quick Start Guide in a JavaScript tutorial that has the exact example you are asking for:
https://doc.oroinc.com/frontend/javascript/js-quick-start/
You can do JavaScript coding inline, I would suggest making a separate file for it though, just like you do with a .css file. A .js file is called with a <script> tag instead of <link> in your HTML document.
How to do it
Make a new file called main.js inside your folder
Call it with the <script> tag in your HTML document, usually just before the closing </body> tag.
Make an element and manipulate it - this example is the p element that has the ID #change. One way to do it is with document.querySelector. You can do it with a classname as well if you prefer.
I'll let you do the rest.
document.querySelector('#change').innerHTML =
<p id="change">Change me</p>
<script src="main.js"></script>
I'm looking for a way to inject a custom script into the _Layout.cshtml purely from code. _Layout.cshtml cannot know anything about it. Just like Browser Link does it.
You simple write this:
app.UseBrowserLink();
And this gets injected into the body at runtime.
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
There is no sign of it in _Layout.cshtml.
Unfortunately Browser Link isn't open source so I can't see how they have implemented it. Browser Link source now available
So I was wondering how it was done?
It's not open source, but you can easily decompile it to see how it works.
From a comment in the source code:
This stream implementation is a passthrough filter. It's job is to add links to the Browser Link connection scripts at the end of HTML content. It does this using a connection to the host, where the actual filtering work is done. If anything goes wrong with the host connection, or if the content being written is not actually HTML, then the filter goes into passthrough mode and returns all content to the output stream unchanged.
The entire thing seems pretty involved, but doesn't seem to use anything not available out of the box, so I guess it can be possible to code a similar thing.
Razor allows you to do this quite easily - you can even use a flag.
Example:
In your controller:
ViewData["RegisterCustomCode"] = "true";
In your View (.cshtml):
#if (ViewData["RegisterCustomCode"] == "true")
{
<text>
<script src="..."></script>
</text>
}
I'm new to Elm and trying to build a web app with elm-html. I'm having trouble setting up my workflow to develop and see my results quickly.
I've used elm-reactor to serve and reload my changes but that serves my app from localhost:8000/Foo.elm which doesn't include any external stylesheets. I have to use inline styles for all my components, which is discouraged by most HTML guidelines. I'd rather use CSS (or a CSS preprocessor).
I can use elm-make to build to a *.js file and include that in an index.html that I maintain, but it won't watch changes.
Is it the wrong approach to include CSS files in an Elm project, and if not, how do I maintain stylesheets outside of Elm and still serve my project locally, while watching for changes?
You're probably better off not using elm-reactor for your main development because of those limitations. It is perfectly acceptable to use your own external CSS file and I agree, that's a much better practice than embedding styling in the output html.
I've used gulp and the gulp-elm package to set up a file watching task that compiles all Elm code (as well as SCSS files) on save, and that works wonderfully.
There is a Grunt plug-in for Elm if you're into that.
There is a webpack loader for Elm if you prefer that over gulp or grunt.
There is a young project that offers a Single Page Application generator for Yeoman which bundles together some of the live-reloading tasks. It is very opinionated on some of the decisions it makes, but it's a good reference if you want to get running quickly.
I found a good solution for those who want quick prototyping in elm-reactor with full CSS but don't want to figure out build tooling or more sophisticated elm CSS packages. You can get started pretty fast using basic elm, elm-html, and css.
This solution uses standard Elm to generate inline styles and Html.node to create a style tag so you can apply a CSS rule to the body of the document.
-- VIEWS
view model =
main_
[ cssMain ]
[
styleTag
, div
[ cssControlPanel ]
[
button
[ cssBtn
, cssBtnGenerate
, onClick GenerateMap
]
[ text "GENERATE MAP" ]
]
-- STYLES
styleTag : Html Msg
styleTag =
let
styles =
"""
body { overflow: hidden; }
"""
in
node "style" [] [ text styles ]
cssMain : Attribute Msg
cssMain =
style
[ ("backgroundColor", "#eee")
, ("position", "relative")
, ("width", "100vw")
, ("height", "100vh")
]
...
https://github.com/elm-community/elm-webpack-starter was my first attempt to graduate beyond elm-reactor + inline styles. It seemed kind of heavy.
I currently use elm-live (https://github.com/tomekwi/elm-live), like so:
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open
Code is in Main.elm and styles are in style.css.
I'm just a beginner, but I find myself using the browser CSS editor a lot.
The style editor is usually placed close to the JS console and HTML inspector, press F12 and you'll find it.
You can just create your regular elm markup without any styling and then manually import the stylesheet when testing it out in the browser. After you've finished your project, just add the stylesheet to the finished app manually (standard <link> tag).
The plus side to this is that the browser provides live preview while you're writing your CSS. The downside to it is that you'll have to work with your browser's editor, which may not be the best option out there compared to something like VS Code or Atom.
Note: I use Firefox Developer Edition, their styles editor is great. Can't comment on Chrome's.
In the demo codes of dojo 1.6, I found some code like the below:
<mce:script type="text/javascript">
<!--
//other codes
-->
</mce:script>
So, what's the meaning of this kind of codes?
And what are the differences between these codes and
<script type="text/javascript"></script >?
Seems that you can read Chinese. me too :-)
If you open the demo page ( http://dojotoolkit.org/documentation/tutorials/1.6/events/demo/query.html ) in browser and view its source code, you can see there is no mce:script tags, just script tag. So the reason is caused by the blog publishing system, when the author paste the JavaScript code to it, it automatically replace the script tag with mce:script tag to avoid XSS attack.