ELM : Compile ELM page to JS - elm

after creating an ELM page and running it successfully using (elm-reactor),
I have compiled it to generate the js file and open it using browser.
using the following command : elm-make pageName.elm --output target.js.
anyway the target.js page is generated successfully but when opening it using the browser it does not show the desired outcome instead it displays the source code as per the below screen shot

Run elm-make pageName.elm without --output target.js and open produced index.html
Alternatively, create your own *.html file and embed target.js via <script> tag, as you would normally do it for any other JavaScript files:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My app</title>
<script src="target.js"></script>
<script>
// Run the application manually.
Elm.Target.fullscreen();
<script>
</head>
<body>
</body>
</html>
Assuming that the name of the entry module is Target and you want it to take over the whole page.

Related

WebStorm HTML files are showing TypeScript errors for HTML elements

I installed a fresh copy of WebStorm and opened up an existing Angular project.
When I open up any HTML file in the project the IDE shows 'Cannot find div' for all div tags in the .html file. For a few seconds the IDE is fine, then it shows a '2.5.3 Typescript' tab with a list of TypeScript errors.
Some Typescript tab errors:
Error:(1, 2) TS2304: Cannot find name 'div'.
Error:(3, 4) TS2304: Cannot find name 'div'.
Error:(3, 9) TS2304: Cannot find name 'ngIf'.
I've tried invalidating the cache and restarting. I've tried disabling TSLint. I've tried injecting language for some of the attributes/tags.
Even index.html throws a bunch of TypeScript errors.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="">
</head>
<body>
</body>
</html>
I expect no red squiggly marks in the .html file since it is all valid.
It works fine in VS Code.
Known issue, WEB-36373 is fixed in 2018.3.3.
For now, I can suggest turning Angular language service off in Settings | Languages & Frameworks | TypeScript (all the angular functionality will still be available)

Trouble displaying test results in browser with Mocha, Chai, and webdriver.io

I am using Webdriver.io with Mocha and Chai. I've written several tests that work great from the command line. It opens the Chrome browser, runs the tests, and displays the resultsin the command line. However I am having issues getting the results of the tests to display in the browser view (have a presentation that I would like to show the tests in the browser view). I'm using the mocha html template for viewing tests in the browser, but it only displays "passes: 0failures: 0duration: 0s" in the upper right. I've copied the html file to the first file in my testing structure and changed the paths to the js and css files. I don't see anything in here that references webdriver.io, is that the missing piece?
<!DOCTYPE html>
<html>
<head>
<title>Mocha</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="./node_modules/mocha/mocha.js"></script>
<script src="./node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="./test/specs/createNewProduct.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
I'm opening the file by right clicking on it and opening with Chrome.
Hi I am not clear understand what you want to achieve. But have look to https://github.com/webdriverio-boneyard/wdio-allure-reporter
It is generate beautiful reports for wdio

grunt-contrib-jasmine can't find PhantomJS API?

The PhantomJS API claims to allow access to 'fs' and a few other built-in commonJS modules through the standard require interface. grunt-contrib-jasmine claims to run all specs using phantomJS. But when I use grunt-contrib-jasmine the require method doesn't seem to be available?
fs = require('fs')
describe 'DesignService', ->
it 'test loadFromJSON', ->
jsonFile = fs.read("resources/sample_pole.json")
Gives me the error:
ReferenceError: Can't find variable: require at
>> target/spec/Spec.js:3
What am I doing wrong?
In case it isn't clear, I am compiling from coffeescript, and then pointing the grunt-contrib-jasmine to the output of the compilation. The other specs are all running fine.
Cause
require method is only available on server side (Nodejs/PhantomJS), but all jasmine tests (specs) are executed on the client side.
Possible solution
You could create a JavaScript file in helpers folder with the content like this:
window.jsonFile = { some : json_object }
And use a jsonFile reference in your spec files.
Explanation
From the PhantomJS description:
PhantomJS is a headless WebKit scriptable with a JavaScript API.
From grunt-contrib-jasmine description:
Run jasmine specs headlessly through PhantomJS.
grunt-contrib-jasmine is automatically creating _SpecRunner.html file (see below for example) with all user specs and passing it to the PhantomJS. PhantomJS is a separate executable, that in Nodejs is only wrapped as a package. This is the same executable as if downloaded from Phantomjs.org page.
In the end this line is executed: .\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phantomjs .\node_modules\grunt-contrib-jasmine\node_modules\grunt-lib-phantomjs\phantomjs\main.js .\_SpecRunner.html.
Here main.js file is to open the page and bind alerts (alert(jsonString)) that are thrown to the grunt logging.
So PhantomJS API is available in main.js, but not in _SpecRunner.html and jasmine spec files.
The result is the same as if opened _SpecRunner.html with the browser, except all messages will be intercepted by jasmine reporter and displayed on screen.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href=".grunt/grunt-contrib-jasmine/jasmine.css">
<!-- Jasmine test suite -->
<script src="./.grunt/grunt-contrib-jasmine/jasmine.js"></script>
<script src="./.grunt/grunt-contrib-jasmine/jasmine-html.js"></script>
<!-- Some vendor libraries -->
<script src="./test/vendor/jquery.js"></script>
<!-- Some helpers -->
<script src="./test/helpers/ts.js"></script>
<!-- Your spec files -->
<script src="./test/main_spec.js"></script>
<!-- Jasmine reporter that displays the result-->
<script src="./.grunt/grunt-contrib-jasmine/reporter.js"></script>
<script src="./.grunt/grunt-contrib-jasmine/jasmine-helper.js"></script>
</head>
<body>
</body>
</html>

IBM Worklight with Dojo Toolkit | dojo/main.js 404 not found issue

I have recently started exploring IBM Worklight which looks really promising to build hybrid mobile apps, in order to do so, created a Worklight project while choosing Dojo Toolkit as a default framework choice and got to see the missing dojo/main.js issue.
Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>TD_Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="dojo/dojo.js" data-dojo-config="isDebug: false, parseOnLoad: true, async: false"></script>
<link rel="stylesheet" href="css/TD_Mobile.css">
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view0"
data-dojo-props="selected:true"></div>
TD_Mobile
<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/TD_Mobile.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
When I do build and deploy and run the project from worklight console as a common resource, got to see the main.js not found issue at the following path http://localhost:8080/apps/services/preview/TD_Mobile/common/1.0/default/dojo/main.js
And to my surprise further, I was able to search the reference folder at C:\Users\marif\workspace\WorklightServerHome\TD Mobile New\widget-resources\TD_Mobile-common-e6cd3d9088c88e96df743ed1c9a1b584a90da8c9\preview\default\dojo and don't see main.js and some more JS files there.
Looks like final deployed build somehow not working properly, would appreciate for any quick pointer.
Not all files are included in the dojo build, there is a file called build-dojo.xml in your project.
Add main.js to it.
Under <patternset id="dojo.resources.loose-modules"> add the modules you want to use.
This sounds like a write permissions issue.
Can you please create a new project and see if it happens there as well?
If it does not then the issue is solved, else it might be a plugin issue.
Do you get any error message is the Worklight console in the build process?

Why would Resharper enter "foo foo" whenever I hit "Enter" from within a script tag

I am currently using ReSharper build 6.0.2202.688 and have come across a very strange issue. When I hit the "Enter" key to add a line break from within a Script tag, ReSharper is automatically adding the line "foo foo".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="senchatouch.2/sencha-touch-all-debug.js" type="text/javascript"></script>
<link href="senchatouch.2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
foo foo
});</script>
</body>
</html>
I tried to find this in the LiveTemplates but dont see any that would apply.
I did not see any ReSharper configuring that would cause this issue either. Also, it just randomly started happening as I was going through some Sencha Touch tutorials.
Any idea what would cause this?
Thanks
Please install the latest ReSharper 6.1.1
This bug was fixed since the release of version 6.0 that you're currently using.
I also had this problem and upgraded to ReSharper 6.1.1. However, it didn't fix it. In fact, according to the YouTrack page for this bug, it wasn't fixed until version 7.0.43.13
http://youtrack.jetbrains.com/issue/RSRP-291030
It was happening to me in 7.0.1 (7.0.1098.2760)
I've found the fault to be within a malformed script block whereby a server-side script block was embedded inside a client-side one. e.g.
<script type="text/javascript" language="javascript">
<script runat="server" language="C#">
string ServerString = "this breaks things";
</script>
var clientString="<%=ServerString() %>";
</script>
<script type="text/javascript" language="javascript">
// try typing something here and hitting enter for "foo"
</script>
The fix for me was to move the nested server side script block outside of the client side script block.
Note: Blame removal - this wasn't my code! I was getting random foo inserted into my code and wanted it to stop!
I've opened a new support ticket with JetBrains as it seems odd to want to insert "foo" and delete other characters from source, even if I have malformed html/script.