Is is possible to load .coffee script file to browser and execute? - coffeescript

I am trying to load coffee script inside a sample.coffee file along with the coffee-script.js file and perform some simple operations on the HTML. But i am not able to load the sample.coffee file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="sample.coffee" type="text/coffeescript"></script>
<script src="coffee-script.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Here is the coffeescript code inside sample.coffee
message = "Welcome to Coffeescript"
alert message
I referred the blog http://forgivingworm.wordpress.com/2010/09/27/running-coffeescript-in-browser/
I trying to run this in MVC4 project on .cshtml. So I am running under MS world.
I am not sure if this is possible or not? any insight into this would be greatly appreciated.

I am able to solve this issue by using the CoffeeSharp http://tomlokhorst.github.com/CoffeeSharp/ It gives handler for .coffee files also converts the coffeescript to javascript on the browser.
Also I am able to compile the coffeescript to javascript during the build event itself which solves deployment and performance related issues.

I dont think this will work like you tried it.
You will need something like requirejs and the coffeescript loader
at https://github.com/jrburke/require-cs.
However I would strongly discourage this and rather have it compiled before loading into the browser (require.js is encouraged though). You might find grunt.js helpful for "building" your app before deploying.

That html works fine for me. I used the coffee-script.js found here: https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js and my sample.coffee is:
x = ->
alert("hi")
x()
If you open the Javascript console, do you see any errors?

Related

Dynamics 365/CRM Chrome Debugger not working correctly

I've spent more time on this than I care to admit but was hoping for some help in understanding the cause of the problem. I have a basic HTML web resource in Dynamics 365 (v9.1.0.9228) and in order to get the global context I must include the following:
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
https://learn.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/getglobalcontext-clientglobalcontext.js.aspx
The problem is that when I do... the Chrome debugger loses its place in the document. The execution stops at the breakpoint(s) but the current line is not highlighted this means no way to step into/over the lines or indeed know what line we are on at any given point. I can see however that the code is being executed due to my output to console (See code in footer).
I have tested this across:
Multiple D365 online instances (v9.1.0.9228)
Multiple development machines running Chrome (v77.0.3865.90)
Literally stripped back the code to very basic HTML. Interestingly, this issue does not occur in IE? The only workaround I have found is rather than having inline JS within the head tags place it a separate file instead and reference from the HTML web resource, Chrome then seems to have no issues in stopping on right line and highlighting the correct line as we debug BUT only functions within that library. If the HTML web resource has inline script the issue will still be present within that scope.
head
<script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
<script type="text/javascript">
function registerEvents() {
debugger;
console.log("in registerEvents v2.0.3");
testButton = document.getElementById("test");
testButton.onclick = test;
}
function test() {
debugger;
console.log("in Test v2.0.3");
}
</script>
body
<script type="text/javascript">
registerEvents();
</script>
<p>In chrome debugger v2.0.3</p>
<button id="test">Test</button>
I would like to understand if I am doing something wrong here as it seems to be a bug within Chrome DevTools itself given this works on all other browsers when debugging? The actual code here is almost irrelevant as the issue occurs whenever "ClientGlobalContext.js.aspx" is referenced, if we comment out that line the Chrome debugger works as expected.

EaselJS example code fixes

Anyone had trouble running the code samples provided with EaselJS 1.0.0? I tried running HelloWorld, it failed; but I found if I made the following two changes it seemed to work:
1) Body Onload
<body onload=init();> <!-- WORKS -->
<body onload="init();"> <!-- DOES NOT WORK -->
2) Script tag
<script src="easeljs-NEXT.js"></script> <!-- WORKS -->
<script src="../lib/easeljs.combined.js"></script> <!-- DOES NOT WORK -->
Fix #2 deserves a small explanation -- using search in Finder I find no file named easeljs.combined.js.
Maybe this will help the next person who dives into EaselJS sample code. Feel free to let me know if I'm missing something.
Required to wrap HTML in comments like this above? Preview suggested so.
I am suspicious that your first example doesn't work as shown. Do you have an example handy?
As for the second one, where are those scripts coming from? You would have had to manually include either/or. If you copied example code from GitHub, the lib/ folder lives outside the examples/ folder, so it has to be relatively referenced a directory up.

Place concatenated js directly into html script tag using grunt?

Right now my grunt build places all of the concatenated js and css into a scripts.xxx.js, vendor.xxx.js, main.xxx.cs and vendor.xxx.cs. Is there a way to have grunt not put the code into these files, but rather put them directly into the html?
So I would end up with:
<html>
....
<style>
// all of the stuff in main.xxx.cs and vendor.xxx.cs
</style>
....
<script type="text/javascript">
// all of the stuff in scripts.xxx.js and vendor.xxx.js
</script>
....
</html>
I'm writing a custom module for an existing tool and it would make it a lot easier to just deploy a single html file with everything embedded right in it. Can it be done with grunt or something else? Any thoughts on this approach?

GWT lifecycle - Deferred binding at runtime.What happens

Can someone explain what happens after the java code is converted to Javascript by the GWT compiler?
how will the compiled javascript reach the client browser and when does this happen.
Well from your server, you serve a html page which should contain a tag that points to your compiled javascript.
Example of what the script tag would look like
<script type="text/javascript" language="javascript" src="http://example.com/js/project/project.nocache.js"></script>
The GWT compiler generates output files as described here.
At a very high level. There is a very tiny loader file (the .nocache.) which you should include in a script tag in your page. This file's only job is to determine the correct compiled application code files to request from the server. This load happens asynchronously after the nocache script has loaded.

In Gwt where the path of script(appName.gwt.js) which loads gwt app comes from?

I have started Gwt last week. And I was trying to create application without using sample app. So initially i have typed following line in html file(Application Name-loginAppGwt, package- LoginAppGwt)
<script type="text/javascript" language="javascript" src="LoginAppGwt/LoginAppGwt.nocache.js"></script>
but it was not loading the gwt module. When i changed it to
<script type="text/javascript" language="javascript" src="loginAppGwt/loginAppGwt.nocache.js"></script>
It was working fine.
But in one of the application which i have created using sample application of gwt, there was written(application name- testingApp, packagename- test)
<script type="text/javascript" language="javascript" src="testingapp/testingapp.nocache.js"></script>
So , my doubt is where this name comes from like in my application loginAppGwt was correct but in sample application testingapp was correct??
Thanks in advance.
Module name can be manipulated via <module rename-to="newname">. Then the path would be newname/newname.nocache.js
Check if your example had something similar in it's module descriptor.
Update:
Loading of JS scripts is affected by filesystem case-sensitivity because scripts are loaded from files. However, GWT-RPC is handled by servlets and is always case sensitive. This is important because, GWT-RPC urls are prepended with package name which seems to be derived from first part of script name in a host file (I just tested this).
So while the main script would be loaded on case-insensitive filesystems regardless of the script name case, the GWT RPC would only work if package names are equal.