I have an existing web UI that I would like to be able to call a function written in ClojureScript. The function would be in a separate ClojureScript module (cs_func.js file) that does not need access to the DOM. I can't find any examples on how to do this.
Yes, this is possible (cf. how to use a complex return object from clojurescript in javascript… for instance). As you already figured out, ClojureScript will be compiled to normal JavaScript files (where "normal" varies according to your cljsbuild settings on how aggressive the output will be optimized). This is more a Javascript question on how to access the compiled JavaScript module than anything else.
You should be aware, however, that the output from cljsbuild might get mingled and that you probably want to prohibit this for your entrypoints, cf. the discussion in the section "Exporting ClojureScript functions" in this article on ClojureScript/JavaScript interop and the even more detailed discussion in Luke VanderHarts article on using JavaScript and ClojureScript
Related
I would like to use the ECMAScript 6 module system in a front-end project, so that the interdependencies of the code were more clear than simply loading "all that might be needed" up front, in the HTML.
However, having the following line in the main JavaScript file does not work:
import fuzLogin from 'fuzLogin'
The error in the browser's console is: can't find variable: require
The compiled code (created by Babel) is:
var _fuzLogin = require("fuzLogin");
var _fuzLogin2 = _interopRequireDefault(_fuzLogin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Is ECMAScript 6 module system supposed to work, for compiled code, with WebStorm 10?
Should I maybe add some external dependency in my HTML, to provide the missing require?
Are there other ways I could reach a modular front-end orchestration of my JavaScript side?
I think that you're babel configuration is set up to use commonjs that transpiles with require (requirejs)... so, in order to work with that configuration you need to include requirejs: http://requirejs.org/
I found two ways that fulfil what I was looking for, in slightly different ways:
jspm
Rollup
JSPM allows on-the-fly loading of ES2015 modules, so that the transpiling happens in the browser. This is pretty awesome, really, and something I wasn't expecting.
In addition, JSPM also provides traditional build tools for doing the bundling for production.
But I actually chose to go with Rollup.
Rollup gathers all kinds of build systems together, and is based on ES2015 packaging, providing what I was after. Most important for me were the brilliant blog posts by Jason Lengstorf (just 1 and 2 weeks old, btw) that walk one through the whole practical setup.
References:
jspm-trial (GitHub) repo that I did, experimenting these things
Smaller, More Efficient JavaScript Bundling Using Rollup (blog, Aug 2016)
How can I use a different React version with Reagent, Om, Rum, Quiescent or Brutha?
Self answer since this is asked frequently:
First you have to tell Leiningen to exclude the cljsjs/react dependencies:
[rum "0.6.0" :exclusions [[cljsjs/react] [cljsjs/react-dom]]]
If you have other dependencies pulling in cljsjs/react you can use a global exclusion:
:exclusions [[cljsjs/react] [cljsjs/react-dom]]
Next you have to satisfy the compiler since it won't find the namespaces cljsjs.react and cljsjs.react.dom. For this create two files that hold these namespaces in your source directory. For instance
- src/cljsjs/react.cljs
- src/cljsjs/react/dom.cljs
Both only need the namespace declaration and can otherwise be empty (ns cljsjs.react).
Now you can include any React version you'd like manually in your HTML file with a normal <script> tag.
Alternative:
You can also use foreign-libs compiler option.
I'm writing some atom (the editor) package with ClojureScript. And i faced dependency load issue.
When compiled ClojureScript produces file like this (main.js):
goog.addDependency("base.js", ['goog'], []);
goog.addDependency("../cljs/core.js", ['cljs.core'], ...)
goog.addDependency("../clojure/browser/event.js", ...)
Obviously, ClojureScript heavily depends on Google Closure dependency management.
But, to be able to use Google Closure i need to include goog/base.js file.
The only way that i found is to add to goog/base.js:
module.exports = goog
and add to main.js:
require('./goog/base.js')
This is very bad approach, because these files are generated - so they can be overridden.
Also, release compilation will not include these lines.
The question is how can i use both these dependency systems?
Or is it possible to use ClojureScript w/o Google Closure?
Please advice, thanks!
If you set your ClojureScript :optimizations to something other than :none (e.g., :whitespace) then the resulting .js file will include the Google Closure code inlined and you won't have to reference it separately.
(Note that this means you might not be able to use a main function in your ClojureScript code, but you can just put a call to your main function somewhere at the toplevel.)
I've been googling around for the past 2 hours looking for some simple instructions on how to add my own custom metadata tag in as3 with no success. I'm starting to think that I'm probably not searching for the correct terms.
The Problem
Ultimately, what I want to do is add a custom metadata on a function that takes a function as a parameter and makes sure that the given function has the correct parameters.
I.e. I have the following function:
public function testCallback(callback:Function):void
{
callback("test");
}
and I want to get a compiler error when I call it like this:
public function doNothing():void
{
// doing nothing
}
public function someRandomFunction():void
// ...
testCallback(doNothing);
}
The way I'm thinking of doing this is by having this metadata:
[Callback(paramName="callback",callbackParams="string")]
public function testCallback(callback:Function):void
{
callback("test");
}
The extension would run during compilation and, if the function passed does not contain the correct parameters, a compile-time error will be thrown. I THINK by using flex2.compiler.util.ThreadLocalToolkit.logError(path, line, errorMessage); I can accomplish this.
The Search
I've been googling for a couple of hours now and couldn't find a simple tutorial that could get me started. I found some SDK bug reports (SDK-18718, SDK-26041), an unfinished forum post, a tutorial (?) on how to add a custom metadata in FlexBuilder (I'm using FlashDevelop), a not-so-useful answer in StackOverflow and many many more dead ends.
The Help
So far, as far as I could understand, I will use Java to create the extension and then, using a compiler command, I'll add it into my project. However, I don't know what do I need to get started.
My two main questions are:
A) What do I need to create the extension in Java? (do I need Flex Builder? Eclipse? what libraries do I need in my classpath?)
B) Once I have compiled this into something (a swc?), how do I include this in FlashDevelop in my AS3 Project?
Thanks in advance!
Update
I've been able to create a Java project in eclipse, add the Flex libraries, implement the IMxmlcExtension interface and compile the project into a jar with the correct MANIFEST file. Unfortunately, adding the extra -extension=MyTest.jar in FlashDevelop, did nothing.
In case it is useful, the resulting command line for the compiler was
mxmlc -load-config+=obj\MyProject.xml -debug=true -incremental=true
-swf-version=10 -extension=flex_test.jar -o obj\MyProject634846490611881374
Update 2
Timofei Davydik helped me narrow down the problem. It seems that FlashDevelop is the main problem. Creating an extension and compiling it in command line works. I started a thread in FlashDeveloper's forums. In case you're interested, the thread is: -extension compiler option
Update 3
Pilippe is correct, it seems that the problem comes from the fact that FlashDevelop uses Flex Compiler SHell (fcsh). I am now looking into how can I switch compilers.
Really interesting question. I've done some research. Yes, we can write mxmlc extensions and add some custom functionality. But processing custom metadata is really complicated, and much time is needed debug and explore flex compiler sources. I've created a post in my blog about extensions, you can check it:
http://tim-davydik.blogspot.com/2012/09/flex-compiler-mxmlc-extensions-forcing.html
How to make meta-data tags work in Action Script
Timofei Davydik's wrote a quick and simple tutorial in his blog to answer my question, named Flex compiler mxmlc extensions. Forcing compiler language, and helped me a bunch to track down what is the problem (which is why I'm giving him the bounty). In his post, he is using Flash Builder and not FlashDevelop, which brings us to the answer of the next question:
How to program them using Flash Develop
Unfortunately, as Phillipe pointed out, for AS3 projects, FlashDevelop uses the Flex Compiler SHell (FCSH), which doesn't support meta-data. Since FlashDevelop is open-source, I'll try (and probably fail) to switch the compiler for testing purposes. For anybody else interested in this, I think this forum post is a good start: [ GIFT ] Try new AS3 compiler (ASC 2.0) in flashDevelop 4.x
Anyone have any experience of using Closure js lib and Mootools in the same page?
Conflicts or works ok?
According to google:
The names of all Closure Library
functions and properties begin with a
dot-delimited path that prevents them
from accidentally overlapping with
names defined in non-Closure Library
code. This path is called a namespace.
(http://code.google.com/closure/library/docs/introduction.html)
So there should be no conflicts, also I checked the API documentation and it reaffirms my findings, for example, for array manipulation you have to go through the google namespace (goog):
goog.array.binaryInsert(array, value, opt_compareFn) ⇒
boolean
(http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_array_array.js.html)
This is unlike the MooTools extention of the Array class itself.
Cheers,
Roman