ClojureScript Dynamic Resources

Dynamically load JavaScript and CSS resources.

Mission

While developing web applications often happens that your html files grow very fast with all the JS and CSS inclusions. This can impact the performances and since all these files are not always needed you can often avoid or delay the load of certain resources. For example you can load the CSS that styles a calendar widgent only when you actually use the widget. Add the <script> or the <style> tag to the actual rendered html at runtime when you really need it.

Overview

cljs-dynamic-resources helps you load JavaScript and CSS on demand. It's very easy and light weight, it uses Prysmatic/dommy for dom manipulation.

Let's say you have a JS and a CSS file that are needed to show a calendar widget on you web app. You can avoid to include these resources in your html file and request them when you really need them. For example when your web app navigate to the form that needs the calendar widget you simply call these 2 functions:

(require '[cljs-dynamic-resources.core :as cdr])
(cdr/add-script!
    "/widget/calendar/cal.js")
(cdr/add-style!
    "/widget/calendar/cal.css")

Also you can pass a callback for the onload event:

(cdr/add-script!
    "/widget/calendar/cal.js"
    (fn [e] (println "cal.js loaded")))

and also you can customize the type (or the ref if it's a style inclusion) and the parent node:

(cdr/add-script!
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"
    (fn [e] (println "Script loaded"))
    {:type "text/my-custom-js" ; or :ref "text/my-custom-css"
     :parent-sel :div#my-container-div}) ; this defaults to :body for scripts and to :head for styles

NB: :parent-sel should be a dommy selector, for more info refer here

Multiple synchronous loading

Sometimes JavaScript libraries require each other to be preloaded, to solve this you can use add-scripts! passing in a list of scripts that will be loaded in the given order and synchronously:

(def scripts [{:src "//code.jquery.com/jquery-2.1.4.js" :cb (println "jquery-2.1.4.js loaded") :opts {:parent-sel :div.scripts-container}}
               {:src "//code.jquery.com/ui/1.11.3/jquery-ui.js" :opts {:parent-sel :div.scripts-container}}
               {:src "/lib/hallo/hallo.js"}])

(cdr/add-scripts! scripts #(println "Ready to go!"))

Test

Run:

lein test!

License

Copyright © 2015 Iacopo Carraro

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.