Generating Haxe externs for EaselJS - javascript

Being new to both JavaScript and Haxe, this may have a simple answer, but I've discovered that Haxe has externs port on GoogleCode for EaselJS, but they are out of date and correspond to an earlier version. I've been able to fix errors as they occur during compile time, but I'm still wary that I didn't catch al the new variables and function names.
My question is: is there a simple way to generate externs for a large JS library like EaselJS?

You might want to take a look at Joshua Granick's work with BuildJS:
http://www.joshuagranick.com/blog/2011/10/14/use-buildjs-to-make-externs-for-haxe-js-automatically/
Basically there's a tool called JSDuck which is supposed to compile documentation for JavaScript libraries, and it can output to JSON. He's used the output from JSON, combined with his "buildjs" library to build haxe externs.
He's used it for Sencha Touch, and I've used it for ExtJS, but both of those are Sencha products and their coding style is known to work with JSDuck. You can give it a go with EaselJS, if it works then BuildJS should generate pretty accurate externs.
Otherwise, you might try find the author of the original EaselJS externs and see if they can provide an update, or give you help creating an accurate update. Most of the haxe developers you can contact easily enough using the mailing list or google groups:
http://groups.google.com/group/haxelang?hl=en

I'm a bit late with the answer but you can find the latest (v0.5.0) externs for EaselJs here:
https://github.com/Fintan/easelhx
I generated them using BuildHx (https://github.com/jgranick/buildhx) which is now able to parse YUIDoc comments and then tested them by porting some of the code samples that accompany the EaselJs source.

Right, I did try and install Joshua's tool, but I'm running into an issue with JSDuck.
In the example you linked to, JSDuck is supposed to have a --json param, but the latest version seems to have deprecated that. I'm trying some others using the config file:
{
"--out": "out",
"--guides": "json",
"--warnings": ["all"],
"--": [
"src/easeljs/"
]}
But that doesn't work. The guides param seems to fail no matter what I try.
Creating the json file gives me this ouput:
C:/Users/mycmp/AppData/Local/Temp/ocr374A.tmp/lib/ruby/gems/1.8/gems/jsduck-3.3.0/lib/jsduck/json_duck.rb:36:in `read': Permission denied - K:/Vault/Haxe/myproj/json (Errno::EACCES)
So I'm not sure what to do next. It'd be great to get this working for lots of libraries.
By the way, I'm using the latest JSDuck and Windows 7.

Related

Static Call Graph analyzer for Javascript

I can't seem to find a basic piece of tooling which is a static analyzer that shows me which pieces of code use methods from which other pieces. I could even do with a very primitive one that only shows me which source files contain references to names found in other files in a NodeJS project (still using CJS require here). So far all I have found is a couple of abandoned projects, but one should think there simply must be something out there.
Edit: Graphical output is not required (but certainly a plus); what I primarily need is a tabulation (text) of which functions in which module call functions from which other modules so I can order dependencies.
Sublime text has this feature where when you hover over a name you get the location where that name was defined; this even works across modules and with CoffeeScript. Does anybody know how that is implemented?
This is an actively maintained proprietary call graph generator that supports multiple languages.
Usage : callGraph <files> <options>
https://github.com/koknat/callGraph
I’ve been looking for a similar tool to help my team track the indirect usage of a deprecated function, so I ended up writing a script based on the ts-morph module: https://gist.github.com/adrienjoly/fc117b187f87cca3417abc4a8433e3a2
It’s a node.js CLI that generates the call tree (a.k.a. call hierarchy, or dependency graph) of a function. You can probably modify it to support JavaScript projects. Or create a tsconfig.Json file that includes your JavaScript files.
Hope this helps!

How to make "go to definition" work for my javascript webpage in vscode?

Whatever I do I'm unable to go to definition between functions defined in different *.js and index.html files.
I'm not even sure if is it supposed to work? Or is this feature working only if I do some node.js developemnt using some imports? (I'm new to javascript, I just wan't to make webpage with WebGL, not some server-side stuff)
I tried to read this but I don't see how is it relevant for me? I just made empty jsconfig.json which did not helped
https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson
https://code.visualstudio.com/docs/introvideos/quicktour
https://code.visualstudio.com/docs/languages/jsconfig
See simple example search for THREE.Screen call from index.html which is defined in ThreeJS_aux.js.
My javascript project is here
https://github.com/ProkopHapala/LearnWeb
did you tried adding a tsconfig.json file and set allowJs: true checkJs: true ? This way vscode will start a tsserver and you will have all its features / refactors. Remember that JavaScript IS TypeScript so you don't have to use anything strange just good old JavaScript. Typescript compiler supports that refactor and many others (or you could develop / install third party plugins with more). And if you want to start using Types,you could still do that using plain old JavaScript with jsdocs. My two cents. More info: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
From the way you have your code laid out I would assume that you're going with a walkthrough or some kind of tutorial. Meaning, instead of splitting your JS into a separate file you're embedding it within the actual script tag in the HTML. Not a common practice is all unless someone is trying to maximize the development area, like a tutorial/walkthrough.
I think what you're really looking for here is design patterns. There is really no short answer to give you. There is also no single way to accomplish this. These design patterns are what puts JS together in a more readable fashion.
Try reading through this online book on design patterns Learning JS Design Patterns
This is a quick summary of your common design patterns AMD, commonJS, and Require. I recommend going through the book to get a more in depth understanding. Relation between CommonJS, AMD and RequireJS?

typescript documentation generator

i am starting documenting my java-script + typescript website with jsDuck
I've documented my class very well , but my problem is interfaces - they don't compile from the ts file over to the java-script.
here is my output, as u can see the page doesn't know who is IComboBoxScope
of course it understandable due to the fact it doesn't generated to the java-script
http://i.stack.imgur.com/PIVKe.jpg
is there a proper way to workaround this in jsDuck?
IF NOT, is there other products or solutions for documenting js with typescript out there?, maaybe jsDoc? ,typeDoc?
sorry for the poor sample/photo, i am working on a private network.
just wanted to share my findings,
i have found a great solution typeDoc is really good, it doesn't need the compiled javascripts, it is dedicated to the ts files,
new solution, active environment and the great thing is that i only need to run a 1 line script with the project library as a parameter.
typedoc --out path/to/documentation/ path/to/typescript/project/
output example
i have seen options to change themes, class hierarchy is working very well
installed by NPM and support es 3,es 5
great!.
From JSDuck side there is no simple workaround as JSDuck has no concept of interfaces. You might document your interfaces as abstract classes for JSDuck, but it's not really the same. You're better off using a tool that natively supports TypeScript.

How should I start a new JavaScript project (Testing, Developing, Building)?

I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.

Javascript intellisense with Dojo/Dijit is Visual Studio 2008

I know that Visual Studio 2008 support JavaScript intellisense as I am using it with Jquery. I am wondering if anyone has ever explored how to get other libraries like Dojo and Dijit to work with it as well. I would assume you would have to provide the ///reference tag to your custom code but would still need a vsdoc for visual studio to look in.
Just curious if anyone has tried this or has any suggestions. I might have to hand roll the vsdoc, which might not be too hard based on the api.xml documentation. Thanks for the help!
There is no official Intellisense file for Dojo unfortunately. We could look up the spec and formulate something specific (like we do with Komodo .cix), it is just a matter of using the existing doc parser to scan over the code and generate whatever needs generated.
If you do hand-roll a vsdoc completion file, we'd love to have it. Or if you need any assistance using the doc parser to generate it feel free to contact me offlist (I'm 'dante' # the toolkit domain) and we can see about getting something out there.
We use Visual Assist plugin, and it does pretty well, only thing it lacks is list methods function because of the way you declare objects in Dojo with functions as property values, VA has trouble parsing these. Its OK with old school prototypes though.
They are not officially supported for VS2008, but you may be able to get them to work. Of course, they don't have any of the meta comments in them. If you get any errors, you can create a -vsdoc version of the library and try to edit it to get past the error messages.
JavaScript IntelliSense in VS2010 will be much more robust and you will be able to get good IntelliSense (again without the meta-data) on a much wider range of 3rd party libraries.

Categories