Skip to content

Commit

Permalink
Fix cljsjs and add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@viebel
viebel committed Aug 15, 2020
1 parent bf822b8 commit 657eb17
Show file tree
Hide file tree
Showing 7 changed files with 480 additions and 407 deletions.
1 change: 1 addition & 0 deletions contributing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ Production build:
Dev build:

- http://localhost:5014/plugin-dev.html
- http://localhost:5014/plugin-clojure-dev.html

## 3. Publish the npm package

Expand Down
4 changes: 2 additions & 2 deletions deps.edn
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{:paths ["src" "target" "resources"]
:deps {org.clojure/clojure {:mvn/version "1.9.0"}
org.clojure/clojurescript #_{:git/url "https://github.com/clojure/clojurescript" :sha "6ccb629e365f46a9516e4defeced652cce9d4d35"} {:mvn/version "1.10.758"}
org.clojure/clojurescript #_{:git/url "https://github.com/clojure/clojurescript" :sha "6ccb629e365f46a9516e4defeced652cce9d4d35"} {:mvn/version "1.10.597"}
viebel/klipse-clj #_{:git/url "https://github.com/viebel/klipse-clj.git"
:sha "642bd2815fd046369a60120954b7cad929cde711"} #_{:local/root "/Users/viebel/prj/klipse-clj"} {:mvn/version "10.1.9"}
:sha "642bd2815fd046369a60120954b7cad929cde711"} #_{:local/root "/Users/viebel/prj/klipse-clj"} {:mvn/version "10.1.10"}
org.clojure/core.async {:mvn/version "0.4.474"}
appliedscience/js-interop {:mvn/version "0.1.20"}
viebel/codemirror-parinfer {:mvn/version "0.0.3"}
Expand Down
2 changes: 1 addition & 1 deletion plugin.cljs.edn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
:pretty-print false
:optimizations :simple
:optimize-constants true
:static-fns true}
:static-fns false}
316 changes: 316 additions & 0 deletions resources/public/plugin-clojure-dev.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
<!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">
<link rel="stylesheet" type="text/css" href="https://viebel.github.io/klipse/examples/main.css">
<style>
.klipse-container:not(:empty):before {
content: "**** Rendered Component ****";
font-weight: bold;
font-family: monospace;
}

.klipse-container:not(:empty) {
background-color: #f7ebc6;
border-left: 5px solid #f7d87c;
display: block;
margin-left: -14px;
margin-right: -14px;
padding-left: 9px;
padding-bottom: 10px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>
<h1> Clojure evaluation</h1>
<h2> Dealing with errors </h2>
When there is an error, it should be displayed
<pre>
<code class="clojure">
(range

</code></pre>
<h2> Empty input </h2>
<p> When input is empty the output shoud be empty </p>
<pre>
<code class="clojure">
</code></pre>
<h2> Containers </h2>
Each snippet has a container near it that is accessible with `js/klipse-container`:

<pre><code class="clojure">
(require 'goog.dom)
(goog.dom/setTextContent js/klipse-container "hello")
[1 2 3]
</code></pre>
<h2> Dealing with namespaces </h2>
<p> When a namespace is defined, subsequent snippets must be evaluated in the same namespace </p>
<pre><code class="clojure">
(ns my.ns)
(defn my-func [x] (* x x))
(ns-name *ns*)
</code></pre>
<pre><code class="clojure">
(ns-name *ns*)
</code></pre>
<pre><code class="clojure">
(ns my.ns)
(my-func 19)
</code></pre>
<h2>Implicit Macro Loading </h2>
<p> <code>klipse-test.b</code> uses macro <code>x</code> from <code>klipse-test.a</code> without explicitly using <code>refer-macros</code></p>
<p> This should evaluate to <code>10</code></p>
<pre><code class="clojure" data-external-libs="https://raw.githubusercontent.com/viebel/klipse-test/master/src">
(ns my.foo
(:require [klipse-test.b]))

klipse-test.b/asdf
</code></pre>
<h2> Printing </h2>

<p>When calling `print`, the result should be appended to the result cell</p>
<pre><code class="clojure">
(println "abc")
(println "def")
(+ 1 2)
</code></pre>
<h2> Dealing with infinite loops </h2>
<p> Infinite loops in user code are stopped after 1 second</p>
<p> Currenlty it is broken </p>
<pre><code class="clojure">
#_(loop []
(recur))
</code></pre>

<p> This is done by inserting <code>guard()</code> in each <code>if</code> and <code>recur</code>. You can see it by setting <code>data-compile-display-guard="true"</code>.</p>
<pre><code class="clojure-js" data-compile-display-guard="true">
(loop [x 1]
(if (not= x 19)
(recur x)
(str "hello" 199)))
</code></pre>

<p> But by default, the transpiled js is not altered </p>

<pre><code class="clojure-js">
(loop [x 1]
(if (not= x 19)
(recur x)
(str "hello" 199)))
</code></pre>


<h2> Dealing with infinite sequences </h2>
<p>Sequences are cropped. At most we print 1000 elements.<br>
This number is configurable at the snippet level. E.g. data-print-length="5"
</p>
<code class="clojure" data-print-length="5">
(range)
</code>

<h2> Sharing Data between snippets </h2>
<pre><code class="clojure">
(def xyz 1)
</code></pre>
<pre><code class="clojure">
(+ xyz 1)
</code></pre>

<h2> Sharing Code between snippets </h2>
<pre><code class="clojure">
(defn mea [] 1)
</code></pre>
<pre><code class="clojure">
(mea)
</code></pre>
<h2> Simple stuff</h2>
<div class="clojure">(map inc [1 2 3])</div>
<br/>
<span class="clojure"> (defn foo [x] (* x x)) </span>
<br/>
<span class="clojure"> (foo 19) </span>
<br/>
<p>
Strings should be evaluated to their value - with the quote.
</p>
<span class="clojure">(str "abc")</span>
<br/>
<p>
Output should be pretty printed
</p>
<span class="clojure">
{:next-action :lifecycle/start-task?, :tasks {:in {:inbox []}, :inc {:inbox []}, :out {:inbox [], :outputs [{:n 42} {:n 85}]}}}
</span>



<p>
Functions should be evaluated to their code.
</p>
<span class="clojure">(defn foo [])
foo</span>

<p>
Variables should be evaluated to their names.
</p>
<span class="clojure">(def my-var "cool")</span>
<div class="clojure">(if 1 2 3)</div>
<div class="clojure">(if 1 2 3)</div>

<p>
Strings should be evaluated to their value - with the quote.
</p>
<div class="clojure">"abc"</div>
<h2> Loading code from a gist </h2>
<div class="clojure" data-loop-msec="3000" data-gist-id="viebel/08a311453c9d31378b357ced54221fb4"></div>
<p> The below div should be colorized every 3 seconds</p>
<div id="klipse-color" style="width:100px; height: 50px; background-color: black;"></div>
<h2> Requiring a namespace </h2>

<h3>clojure.string</h3>
<span class="clojure">(ns my.ns
(:require
[clojure.string :as string]))
(string/blank? "HELLO!!")</span>
<br/>
<pre><code class="clojure" data-external-libs="https://raw.githubusercontent.com/viebel/original-lisp/64fcf67146c3af9d7d136ea50c886d87ba32ce28/src/">
(require '[original-lisp.core :as lisp :refer [l-eval]])
(l-eval '((lambda (x y) (cons x (cdr y)))
'a
'(b c d))
'())
</code></pre>
<h2> Requiring a namespace using :rename</h2>
<span class="clojure">(ns my.ns
(:require
[clojure.string :as string]
[clojure.set :refer [union intersection] :rename {union UNION}]))
[(intersection #{1 2 3} #{2 3 4})
(UNION #{1 2 3} #{2 3 4 5})]</span>
<br/>


<br/>
<h2> Requiring a cljsjs namepsace </h2>
<span class="clojure">
(require 'cljsjs.moment)
(some? js/moment)
</span>
<br/>

(ns my.ns
(:require
[clojure.string :as string]
[clojure.set :refer [union intersection] :rename {union UNION}])) [(intersection #{1 2 3} #{2 3 4})
(UNION #{1 2 3} #{2 3 4 5})]
</span>
<br/>

<h2> Requiring a goog namespace </h2>
<span class="clojure">(ns my.gg
(:require [goog.string :as gstring]))

(gstring/capitalize "hello")</span>


<h2> Defining a macro </h2>
<div class="clojure">(ns my.hello$macros) (defmacro hello [x] `(inc ~x)) (my.hello/hello 13)</div> <br/>

<h1> ClojureScript transpilation </h1>
<div class="clojure-js">(map inc [100000 2 3])</div>
<h2> data-static-fns=true </h2>
<div class="clojure-js" data-static-fns="true">(map inc [100000 2 3])</div>

<h2> data-preamble </h2>

<p>This snippet prepends <code>(def preamble-var 2)</code> to its cljs source code.</p>

<div class="clojure" data-preamble="(def preamble-var 2)">(= (+ preamble-var 3) 5)</div>
<h2> Remove comments (only in clojure)</h2>
<p>Comments at the end of the snippet should be removed </p>

<div class="clojure">
; intro
(map inc [1 2 3])
; you shouldn't see this comment
; you shouldn't see this comment
; you shouldn't see this comment

</div>
<h1> Styling </h1>
<p> Leading and trailing blank lines should be removed. </p>
<p>Other empty lines should be kept.</p>
<pre>
<code class="clojure">

(defn foo

([] "aa")



([x] x))

</code></pre>

<h1> Reagent</h1>
<pre>
<code class="clj">
(require '[reagent.core :as r])

(defn child [name]
[:p "Hi, I am " name])

(defn childcaller []
[child "Foo Bar"])
</code></pre>

<pre><code class="reagent">
[child "Foo Bar"]
</code></pre>

<h1>Hiccup</h1>
<div class="clojure">
(require 'hoquet.runtime)
</div>

<h2> Hiccup to HTML </h2>
<div class="transpile-hiccup">
[:div [:h2 "hello"]
[:p "you are "]
[:ul (for [i [1 2 3]]
[:li i])]]
</div>

<h2> Hiccup Rendering </h2>
<div class="render-hiccup">
[:div [:h2 "hello"]
[:p "you are "]
[:ul (for [i [1 2 3]]
[:li i])]]
</div>

<script>
window.klipse_settings = {
codemirror_options_in: {
lineWrapping: true,
autoCloseBrackets: true
},
codemirror_options_out: {
lineWrapping: true
},
selector: '.clojure,.clj',
selector_js: '.clojure-js',
selector_render_hiccup: '.render-hiccup',
selector_transpile_hiccup: '.transpile-hiccup',
selector_reagent: '.reagent',
};
</script>
<script src="plugin/js/klipse_plugin.js"></script>
</body>
</html>
Loading

0 comments on commit 657eb17

Please sign in to comment.