Jsx (#152)

* eval jsx * transpile jsx * load codemirror mode scripts dynamically
viebel · Dec 12, 2016 · c370a72 · c370a72
1 parent 89b1e7d
commit c370a72
Show file tree

Hide file tree

Showing 24 changed files with 9,047 additions and 16,460 deletions.
diff --git a/dist/klipse_plugin.js b/dist/klipse_plugin.js
diff --git a/dist/klipse_plugin.min.js b/dist/klipse_plugin.min.js
diff --git a/project.clj b/project.clj
@@ -1,4 +1,4 @@
-(defproject klipse "4.2.1"
+(defproject klipse "4.3.0"
   :description "Cljs compiler in cljs"
   :dependencies [[org.clojure/clojure "1.8.0"]
                  [org.clojure/clojurescript "1.9.293"]

diff --git a/resources/public/index-dev.html b/resources/public/index-dev.html
@@ -16,7 +16,7 @@
         </div>
         <div id="compiler" style="height: 100%;"></div>
         <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
-        <script src="dev/js/klipse.js?version=4.2.1"></script>
+        <script src="dev/js/klipse.js?version=4.3.0"></script>
         <script>
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/resources/public/jsx-dbg.html b/resources/public/jsx-dbg.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head lang="en">
+        <meta charset="UTF-8">
+        <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
+        <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
+        <link rel="stylesheet" type="text/css" href="css/codemirror.css">
+    </head>
+    <body>
+
+<pre><code class="js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js">
+    Object.keys(React)
+</code></pre>
+<pre><code class="transpile-jsx">
+      &lt;div className="shopping-list"&gt;
+        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
+      &lt;/div&gt;
+</code></pre>
+
+<pre><code class="jsx">
+class ShoppingList extends React.Component {
+  render() {
+    return (
+      &lt;div className="shopping-list"&gt;
+        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
+        &lt;ul&gt;
+          &lt;li&gt;Instagram&lt;/li&gt;
+          &lt;li&gt;WhatsApp&lt;/li&gt;
+          &lt;li&gt;Oculus&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/div&gt;
+    );
+  }
+}
+window.ShoppingList = ShoppingList
+</code></pre>
+<code><pre class="js">
+ShoppingList
+</code></pre>
+<br/>
+      <script>
+        window.klipse_settings = {
+            selector_eval_js: '.js',
+            selector_jsx: '.jsx',
+            selector_transpile_jsx: '.transpile-jsx',
+        };
+        </script>
+        <script src="/lib/mirror_extensions.js"></script>
+        <script src="/fig/js/klipse.fig.js"></script>
+    </body>
+</html>
diff --git a/resources/public/markdown-dbg.html b/resources/public/markdown-dbg.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head lang="en">
+        <meta charset="UTF-8">
+        <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
+        <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
+        <link rel="stylesheet" type="text/css" href="css/codemirror.css">
+    </head>
+    <body>
+<h1> Markdown </h1>
+<h2> HTML transpilation</h2>
+<code class="eval-markdown">
+# This is a title
+`clojure` rocks!
+</code>
+       <br/>
+
+<h2> HTML rendering</h2>
+<code class="eval-markdown" data-editor-type="html">
+# This is a title
+`clojure` rocks!
+</code>
+<br/>
+
+
+      <script>
+        window.klipse_settings = {
+            selector_eval_markdown: '.eval-markdown',
+        };
+        </script>
+        <script src="/lib/mirror_extensions.js"></script>
+        <script src="/fig/js/klipse.fig.js"></script>
+    </body>
+</html>
diff --git a/resources/public/plugin-dev.html b/resources/public/plugin-dev.html
@@ -299,18 +299,47 @@ <h2> console.log </h2>
             3+19;
         </div>
         <br/>
-
         <h2> jQuery </h2>
  <div class="eval-js" data-external-libs="jQuery">
      $
         </div>
         <br/>
-
  <div class="eval-js">
      $('div').length
         </div>
         <br/>
      <body>
+<h1> React and jsx </h1>
+<pre><code class="eval-js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js">
+    Object.keys(React)
+</code></pre>
+<pre><code class="transpile-jsx">
+      &lt;div className="shopping-list"&gt;
+        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
+      &lt;/div&gt;
+</code></pre>
+
+<p>In ES6 class definitions are local, therefore we have to add them to the global objet explicitly</p>
+<pre><code class="jsx">
+class ShoppingList extends React.Component {
+  render() {
+    return (
+      &lt;div className="shopping-list"&gt;
+        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
+        &lt;ul&gt;
+          &lt;li&gt;Instagram&lt;/li&gt;
+          &lt;li&gt;WhatsApp&lt;/li&gt;
+          &lt;li&gt;Oculus&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/div&gt;
+    );
+  }
+}
+window.ShoppingList = ShoppingList
+</code></pre>
+<code><pre class="eval-js">
+ShoppingList
+</code></pre>
  <h1> PHP </h1>
     <div class="eval-php">print "Hello from PHP!";</div>
 <br/>
@@ -444,9 +473,27 @@ <h1> HTML rendering </h1>
             selector_sql: '.sql',
             selector_eval_scheme: '.scheme',
             selector_eval_ruby: '.eval-ruby',
-            selector_js: '.clojure-js'
+            selector_js: '.clojure-js',
+            selector_jsx: '.jsx',
+            selector_transpile_jsx: '.transpile-jsx',
         };
         </script>
-        <script src="plugin/js/klipse_plugin.js"></script>
+        <script>
+{
+let addScript = (url) => {
+    var s = document.createElement('script');
+    s.src = url;
+    document.body.appendChild(s);
+}
+    if(window.location.search.match(/dev=1/)) {
+        alert("Remember to test advanced compilation mode!");
+        addScript("plugin/js/klipse_plugin.js");
+    } else {
+        addScript("plugin_prod/js/klipse_plugin.min.js");
+    }
+}
+
+
+        </script>
     </body>
 </html>
diff --git a/src/klipse/common/registry.cljs b/src/klipse/common/registry.cljs
@@ -5,6 +5,9 @@
 (def selector->mode (atom {}))
 (def mode-options (atom {}))
 
+(defn codemirror-mode-src [mode]
+  (str "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/" mode "/" mode ".min.js"))
+
 (defn register-mode [mode selector opts]
   (js/console.info "register-mode: " mode selector)
   (swap! selector->mode assoc selector mode)

diff --git a/src/klipse/core.cljs b/src/klipse/core.cljs
@@ -5,7 +5,7 @@
 (enable-console-print!)
 (gadjett/settings! :max-function-calls 100)
 
-(def version "4.2.1")
+(def version "4.3.0")
 (js/console.info "Klipse " version)
 (js/console.info "Clojurescript " *clojurescript-version*)
 
diff --git a/src/klipse/lang/clojure.cljs b/src/klipse/lang/clojure.cljs
@@ -6,14 +6,13 @@
   (:require
     klipse.lang.clojure.bundled-namespaces
     gadjett.core-fn
-    cljsjs.codemirror.mode.clojure
     [rewrite-clj.node :as n]
     [rewrite-clj.parser :as p]
     [klipse.lang.clojure.guard :refer [min-max-eval-duration my-emits watchdog]]
     [clojure.pprint :as pprint]
     [cljs.analyzer :as ana]
     [cljs.compiler :as compiler]
-    [klipse.common.registry :refer [register-mode]]
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]
     [klipse.lang.clojure.io :as io]
     [cljs.core.async :refer [timeout chan put! <!]]
     [cljs.env :as env]
@@ -183,10 +182,12 @@
 (def eval-opts {:editor-in-mode "clojure"
                   :editor-out-mode "clojure"
                   :eval-fn str-eval-async
+                  :external-scripts [(codemirror-mode-src "clojure")]
                   :comment-str ";"})
 
 (def compile-opts {:editor-in-mode "clojure"
                   :editor-out-mode "javascript"
+                  :external-scripts [(codemirror-mode-src "clojure")]
                   :eval-fn str-compile-async
                   :comment-str ";"})
 

diff --git a/src/klipse/lang/cpp.cljs b/src/klipse/lang/cpp.cljs
@@ -3,10 +3,9 @@
   (:require-macros
     [cljs.core.async.macros :refer [go go-loop]])
   (:require 
-    cljsjs.codemirror.mode.clike
     [klipse.utils :refer [runonce]]
     [cljs.core.async :refer [chan <! >! put!]]
-    [klipse.common.registry :refer [register-mode]]))
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
 
 (def token #js {:msg_mac "RoyDczufgCsZycN3VFWJwm66e/eL4pSK19spUhmuzBU="
                 :time_created 1468499323000})
@@ -31,6 +30,7 @@
 
 (def opts {:editor-in-mode "clike"
            :editor-out-mode "clike"
+           :external-scripts [(codemirror-mode-src "clike")]
            :eval-fn str-eval-async
            :comment-str "#"})
 

diff --git a/src/klipse/lang/html.cljs b/src/klipse/lang/html.cljs
@@ -3,9 +3,7 @@
     [purnam.core :refer [? !>]]
     [cljs.core.async.macros :refer [go go-loop]])
   (:require
-    cljsjs.codemirror.mode.xml
-    cljsjs.codemirror.mode.htmlmixed
-    [klipse.common.registry :refer [register-mode]]))
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
 
 
 (defn my-eval [exp _]
@@ -14,6 +12,7 @@
 
 (def opts {:editor-in-mode "text/html"
            :editor-out-mode "text"
+           :external-scripts [(codemirror-mode-src "xml") (codemirror-mode-src "htmlmixed")]
            :eval-fn my-eval
            :comment-str "; "})
 

diff --git a/src/klipse/lang/jsx.cljs b/src/klipse/lang/jsx.cljs
@@ -0,0 +1,46 @@
+(ns klipse.lang.jsx
+  (:require-macros
+    [gadjett.core :refer [dbg]]
+    [purnam.core :refer [!>]]
+    [cljs.core.async.macros :refer [go]])
+  (:require
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
+
+(def eval-in-global-scope js/eval); this is the trick to make `eval` work in the global scope: http://perfectionkills.com/global-eval-what-are-the-options/
+
+
+(defn babel [src]
+   (-> (!> js/Babel.transform src #js {:presets #js ["react"]})
+       (aget "code")))
+
+(defn eval-jsx [exp _]
+  (go
+    (try
+      (-> exp
+          babel
+          eval-in-global-scope)
+      "//Evaluation done"
+      (catch :default o
+        (str o)))))
+
+(defn transpile-jsx [exp _]
+  (go
+    (try
+      (babel exp)
+      (catch :default o
+        (str o)))))
+
+(def eval-opts {:editor-in-mode "text/jsx"
+           :editor-out-mode "javascript"
+           :eval-fn eval-jsx
+           :external-scripts [(codemirror-mode-src "xml") (codemirror-mode-src "javascript") (codemirror-mode-src "jsx") "https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"]
+           :comment-str "//"})
+
+(def transpile-opts {:editor-in-mode "text/jsx"
+           :editor-out-mode "javascript"
+           :eval-fn transpile-jsx
+           :external-scripts [(codemirror-mode-src "xml") (codemirror-mode-src "javascript") (codemirror-mode-src "jsx")]
+           :comment-str "//"})
+
+(register-mode "eval-jsx" "selector_jsx" eval-opts)
+(register-mode "transpile-jsx" "selector_transpile_jsx" transpile-opts)
diff --git a/src/klipse/lang/lambdaway.cljs b/src/klipse/lang/lambdaway.cljs
@@ -3,8 +3,7 @@
     [purnam.core :refer [? !>]]
     [cljs.core.async.macros :refer [go go-loop]])
   (:require
-    cljsjs.codemirror.mode.clojure
-    [klipse.common.registry :refer [register-mode]]))
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
 
 
 (defn my-eval [exp _]
@@ -14,7 +13,7 @@
 (def opts {:editor-in-mode "clojure"
            :editor-out-mode "text"
            :eval-fn my-eval
-           :external-scripts "https://viebel.github.io/klipse/repo/js/lambdaway_eval.js"
+           :external-scripts ["https://viebel.github.io/klipse/repo/js/lambdaway_eval.js" (codemirror-mode-src "clojure")]
            :comment-str "[comment]: "})
 
 (register-mode "eval-lambdaway" "selector_eval_lambdaway" opts)
diff --git a/src/klipse/lang/markdown.cljs b/src/klipse/lang/markdown.cljs
@@ -1,23 +1,16 @@
 (ns klipse.lang.markdown
   (:require-macros
-    [cljs.core.async.macros :refer [go go-loop]])
+    [cljs.core.async.macros :refer [go]])
   (:require 
-    ;cljsjs.codemirror.mode.markdown
-    cljsjs.codemirror.mode.xml
-    cljsjs.codemirror.mode.javascript
-    cljsjs.codemirror.mode.css
-    cljsjs.codemirror.mode.htmlmixed
-    cljsjs.markdown
-    [klipse.common.registry :refer [register-mode]]))
-
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
 
 (defn str-eval-async [exp _]
   (go
     (.toHTML js/markdown exp)))
 
-
 (def opts {:editor-in-mode "markdown"
            :editor-out-mode "htmlmixed"
+           :external-scripts ["https://viebel.github.io/klipse/repo/js/markdown.min.js?" (codemirror-mode-src "xml") (codemirror-mode-src "htmlmixed") (codemirror-mode-src "javascript") (codemirror-mode-src "css")]
            :eval-fn str-eval-async
            :comment-str "[comment]: "})
 

diff --git a/src/klipse/lang/php.cljs b/src/klipse/lang/php.cljs
@@ -3,14 +3,9 @@
   (:require-macros
     [cljs.core.async.macros :refer [go go-loop]])
   (:require 
-    cljsjs.codemirror.mode.xml
-    cljsjs.codemirror.mode.javascript
-    cljsjs.codemirror.mode.css
-    cljsjs.codemirror.mode.clike
-    cljsjs.codemirror.mode.php
     [klipse.utils :refer [runonce]]
     [cljs.core.async :refer [<! timeout chan put!]]
-    [klipse.common.registry :refer [register-mode]]))
+    [klipse.common.registry :refer [codemirror-mode-src register-mode]]))
 
 
 (def load-php-engine
@@ -35,7 +30,7 @@
 (def opts {:editor-in-mode "text/x-php"
            :editor-out-mode "text/x-php"
            :eval-fn str-eval-async
-           :external-scripts "https://viebel.github.io/klipse/repo/js/uniter.js?r"
+           :external-scripts [(codemirror-mode-src "xml") (codemirror-mode-src "clike") (codemirror-mode-src "php") (codemirror-mode-src "javascript") (codemirror-mode-src "css") "https://viebel.github.io/klipse/repo/js/uniter.js?r"]
            :comment-str "//"})
 
 (register-mode "eval-php" "selector_eval_php" opts)