example of commonJS and es6 hot loading

HausnerR · Feb 4, 2017 · e626ee1 · e626ee1
1 parent 1e4455f
commit e626ee1
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 0 deletions.
diff --git a/examples/js-modules-reloading/.gitignore b/examples/js-modules-reloading/.gitignore
@@ -0,0 +1,13 @@
+/resources/public/js/compiled/**
+figwheel_server.log
+pom.xml
+*jar
+/lib/
+/classes/
+/out/
+/target/
+.lein-deps-sum
+.lein-repl-history
+.lein-plugins/
+.repl
+.nrepl-port
diff --git a/examples/js-modules-reloading/README.md b/examples/js-modules-reloading/README.md
@@ -0,0 +1,22 @@
+# Example of hot loading CommonJS and ES6 modules
+
+A simple example of how Figwheel hot loads CommonJS and Es6
+modules.
+
+## to use
+
+To run this example:
+
+    lein figwheel
+
+and open your browser at [localhost:3449/index.html](http://localhost:3449/index.html).
+
+Feel free to edit the `src-es6/example/stuff/other.js` or the
+`src-commonjs/example/stuff/hello.js` file to see how they get
+compiled/reloaded on save.
+
+## License
+
+Copyright © 2014 FIXME
+
+Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.
diff --git a/examples/js-modules-reloading/project.clj b/examples/js-modules-reloading/project.clj
@@ -0,0 +1,32 @@
+(defproject example "0.1.0-SNAPSHOT"
+  :description "FIXME: write this!"
+  :url "http://example.com/FIXME"
+  :license {:name "Eclipse Public License"
+            :url "http://www.eclipse.org/legal/epl-v10.html"}
+
+  :min-lein-version "2.7.1"
+
+  :dependencies [[org.clojure/clojure "1.8.0"]
+                 [org.clojure/clojurescript "1.9.459"]]
+
+  :plugins [[lein-figwheel "0.5.10-SNAPSHOT"]]
+
+  :clean-targets ^{:protect false} ["resources/public/js/compiled" :target-path]
+
+  :source-paths ["src"]
+
+  :cljsbuild {:builds
+              [{:id "dev"
+                :source-paths ["src"]
+
+                :figwheel {:open-urls ["http://localhost:3449/index.html"]}
+
+                :compiler {:main example.core
+                           :asset-path "js/compiled/out"
+                           :output-to "resources/public/js/compiled/example.js"
+                           :output-dir "resources/public/js/compiled/out"
+                           :source-map-timestamp true
+                           :foreign-libs [{:file "src-commonjs"
+                                           :module-type :commonjs}
+                                          {:file "src-es6"
+                                           :module-type :es6}]}}]})
diff --git a/examples/js-modules-reloading/resources/public/index.html b/examples/js-modules-reloading/resources/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="css/style.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="app">
+      <h2>Figwheel template</h2>
+      <p>Checkout your developer console.</p>
+    </div>
+    <script src="js/compiled/example.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/examples/js-modules-reloading/src-commonjs/stuff/hello.js b/examples/js-modules-reloading/src-commonjs/stuff/hello.js
@@ -0,0 +1,7 @@
+module.exports.sayHello = function (b) { return "This value is returned from sayHello src-commonjs/stuff/hello.js"; }
+
+console.log("This is being printed at load time from src-commonjs/stuff/hello.js");
+
+
+
+
diff --git a/examples/js-modules-reloading/src-es6/stuff/other.js b/examples/js-modules-reloading/src-es6/stuff/other.js
@@ -0,0 +1,6 @@
+export var sayHello = function() {
+    return "This value is returned from sayHello src-es6/stuff/other.js";
+};
+
+console.log("This is being printed at load time from src-es6/stuff/other.js");
+
diff --git a/examples/js-modules-reloading/src/example/core.cljs b/examples/js-modules-reloading/src/example/core.cljs
@@ -0,0 +1,21 @@
+(ns example.core
+  ;; NOTE: require implicitly loaded JavaScript file according namespace conventions
+  (:require
+   [example.something :as something] ;; implicit google closure
+   [stuff.other :as other] ;; es6
+   [stuff.hello :as hello] ;; commonjs
+))
+
+(enable-console-print!)
+
+;; NOTE this funtion is defined in javascript
+(println (something/hello))
+
+;; NOTE this function is defined in an es6 JavaScript module
+(println (other/sayHello))
+
+;; NOTE this function is defined in a CommonJS JavaScript module
+(println (hello/sayHello))
+
+
+
diff --git a/examples/js-modules-reloading/src/example/something.js b/examples/js-modules-reloading/src/example/something.js
@@ -0,0 +1,13 @@
+goog.provide("example.something");
+
+/* This file will be compiled by the ClojureScript compiler without
+ * needing a foreign libs declaration in the build configuration. It's
+ * position in the filesystem follows mirrors the its "namespace"
+ * following the same conventions as ClojureScript.
+ * Figwheel will hot reload this file as you save it.
+*/
+
+
+example.something.hello = function() {return "This value is returned from sayHello src/example/something.js");
+
+console.log("This is being printed at load time from src/example/something.js");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,7 @@
		module.exports.sayHello = function (b) { return "This value is returned from sayHello src-commonjs/stuff/hello.js"; }

		console.log("This is being printed at load time from src-commonjs/stuff/hello.js");