Integration clojurescript into a javascript framework

Question

I would like to use Clojurescript to write a component within a Javascript framework but I can't work out how to create the constructor and call global variables within the object.

The framework creates views (within their own .js file) by reading their state from a saved jason file and reifying them in javascript (the views are code like so):

(function() {

  var Title = function(json) {
    view.View.call(this, json);  // view is defined in another js file - global namespace
    this.title = json.title;
    this.el.addClass("title");

  }

  view.inherit(view.View, Title);
  view.Title = Title;
  view.types.Title = Title;

  Title.prototype.json = function() {
    return $.extend(view.View.prototype.json.call(this), {
      type: 'Title',
      title: this.title
    });
  }

  Title.prototype.reflow = function() {
    this.h2.quickfit(opts);
  }
})();

I have seen how you create a Javascript object using deftype macro and Object:

(deftype Foo [a b c]
   Object
   (bar x (+ a b c x)))

I'm new to both javascript and clojurescript. I see that the anonymous function wrapping everything provides a scope for the view but not sure how to (or if I need to) so something equivalent in clojurescript.

So my questions are: how do I create the constructor function for Title in this model?? And do how should I handle the calls to the view variable, such as view.inherit etc?

Thanks

"I'm new to both javascript and clojurescript" Perhaps biting off a little bit more than is comfortably chewed? — Steven Lu
– Steven Lu, Commented Apr 10, 2013 at 20:56
possible duplicate of Generate javascript method call code with ClojureScript macro? — Paul Sweatte
– Paul Sweatte, Commented Apr 30, 2014 at 14:45

Community · Accepted Answer · 2020-06-20 09:12:55Z

This is a bit general of an answer, but you seem to be wanting to share code between both ClojureScript and JavaScript, so here is a primer and a few select tidbits on Using JavaScript Libraries in Clojure:

Exporting

Protecting symbols you declare from renaming is easy; just define :export metadata on any ClojureScript var, and the ClojureScript compiler will ensure that it is not munged.

For example, a function can be declared like this:

(ns example)
(defn ^:export hello [name]
  (js/alert (str "Hello," name "!")))

It is then available, via the same name, in an external JavaScript context:

<script>
    example.hello("Eustace")
</script>

Externs

In order to go the other way, and reference a variable declared externally from within your code, you must provide the Google Closure compiler with an "extern file", a .js file defining javascript variables which will not be munged. This file is passed to the Google Closure compiler, and when compiling, it will not munge any names defined in it.

For example, I can try compiling the following ClojureScript (utilizing the Raphael.js library) in advanced mode without an extern file.

(defn test []
  (let [raphael (js/Raphael. 10 50 320 200)]
    (. raphael (circle 50 50 50))))

When I call the test function, it will throw a javascript error that new Raphael(10, 50, 320, 200)).K is not a function. K is the munged name of the circle function from Raphael, and obviously can't be found, since it isn't defined anywhere. We need to tell the compiler to preserve the name circle, not munge it.

I can do this by creating the following externs.js file:

var Raphael = {};
Raphael.circle = function() {};

And use it when compiling my ClojureScript:

(closure/build "src/cljs" {:optimizations :advanced
                           :externs ["externs.js"]
                           :output-to "helloworld.js"})

Collectives™ on Stack Overflow

Integration clojurescript into a javascript framework

1 Answer 1

Exporting

Externs

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Exporting

Externs

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related