viebel / klipse Goto Github PK

View Code? Open in Web Editor NEW

3.1K 55.0 145.0 91.98 MB

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.

Home Page: http://blog.klipse.tech/

License: GNU General Public License v3.0

Clojure 29.71% JavaScript 14.51% PHP 0.27% HTML 50.88% CSS 4.63%

clojure clojurescript interactive-snippets javascript code-evaluation ruby scheme prolog react reactjs

klipse's Issues

klipse_settings keys for other languages are missing from the readme

I just went to http://blog.klipse.tech/klipse/2016/09/09/klipse-languages.html and found what I needed - but it would be nice if the keys for other languages were listed in the readme, particularly selector_eval_python_client since it has that extra suffix.

[CLJ] Advanced compilation as an option when compiling cljs

Cursor rendering issue

Hey, awesome tool! I'm trying to use this for some online code documentation, but there seems to be an issue with how the cursor renders. I have reproduced this in latest Chrome, Safari, and Firefox, and then, thinking it may be an issue with my template, copied the demo from https://jsfiddle.net/viebel/50oLnykk/ and ran it locally and the same issues occur.

Not sure if this is a browser quirk or something with klipse, but hopefully you can help me narrow this down. For some reason, the demo seems to work just fine in the jsfiddle, but I can't figure out for the life of me what could possibly be different. Note that there are not any additional stylesheets at play, just purely the css recommended by klipse.

Here is the minimal code that reproduces this issue locally:

<!doctype html>
<html>
<body>
<div class="klipse">
 function foo(name) {
 return "Hello " + name;
 }
 foo("Klipse");
</div>
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">
<script>
    window.klipse_settings = {
        selector_eval_js: '.klipse', // css selector for the html elements you want to klipsify
    };
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
</body>
</html>

Thank you for your help!

attaching output (DOM fragments/ SVG) to current DOM from Klipse ?

I think that it would be awesome if it was possible for some Klipse snippets that return DOM fragments / SVG to have the result not displayed as text in a console output, but attached to the current DOM (the root could be a parameter ?).
It would allow to have interactive graphic code with Klipse, a nice thing imo.

Best Regards !

[DEPLOY] deploy should not copy unnecessary files

Missing: How it Works

hi,

I love this kind of tool. I wouldn't want to make websites that depend on services though. It's not clear by the project's description if it uses a backend of some sort. Does it? If so or not, I'd recommended pointing that out as it's a selling point if it's backend free.

Thanks,
Francois

[python] find a way to share functions between snippets

render HTML

How hard would it be to get klipse to render html?

KLIPSE snippets inside web components

Demo

[CLOJURE] pretty print the clojure code (with zprint)

In the klipse app, the print box displayed data that is not pretty printed.

Take a look here:
http://app.klipse.tech/?cljs_in=(print%20(zipmap%20(range%2020)%20(range)))%0A(zipmap%20(range%2020)%20(range))%0A

In the left side, the data is pretty printed but in the right side it is not.

(print (zipmap (range 20) (range)))
(zipmap (range 20) (range))

Figwheel howto has been removed from README

It was useful to have it there, imho.

I mean the line

rlwrap lein run -m clojure.main scripts/figwheel.clj

[RUBY] print results should be appended to the result box

Error when using & as a function name

I can define a function that is called &, but when I try to call it klipse gives an error.

(def & identity)

;; Evaling just this returns what I'd expect
& ;=> #object[Function "function (a){return a}"]

;; But calling it doesn't work

(& 42) ;=>
 #error {:message "Could not eval my.klipse",
         :data {:tag :cljs/analysis-error},
         :cause #error {:message "No method in multimethod 'cljs.analyzer/parse' for dispatch value: & at line 1 ",
         :data {:file nil, :line 1, :column 1, :tag :cljs/analysis-error},
         :cause #object[Error Error: No method in multimethod 'cljs.analyzer/parse' for dispatch value: &]}}

Minmum html to try klipse

I'm trying to use klipse for clojure. I save the following html locally and open with Chrome but the evaluation is not happening.

<html>
    <head>
        <meta charset="utf-8">
        <title>Foo</title>
        <link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">

        <script>
            window.klipse_settings = {
                selector: '.language-klipse'// css selector for the html elements you want to klipsify
            };
        </script>
        <script src="http://app.klipse.tech/plugin/js/klipse_plugin.js"></script>
   </head>

   <body>
        <p>And now, we are going to <strong>klipsify</strong> this code snippet:</p>

        <pre><code class="language-klipse">(map inc [1 2 3])
        </code></pre>
    </body>
</html>

Is this supposed to work? Or am I missing anything?

I'm using Chrome 51.0.2704.103 (64-bit) on OSX and I can see the following logs in developer console. I don't see any errors.

KLIPSE version: 1.0.1
klipse_plugin.js:12959 register-mode:  eval-clojure selector
klipse_plugin.js:12959 register-mode:  transpile-clojurescript selector_js
klipse_plugin.js:12959 register-mode:  eval-ruby selector_eval_ruby
klipse_plugin.js:12959 register-mode:  eval-javascript selector_eval_js
klipse_plugin.js:12959 settings:  #js {:selector .language-klipse}
klipse_plugin.js:12959 (settings): [object Object]
klipse_plugin.js:12959 settings: {"selector" ".language-klipse"}
klipse_plugin.js:12959 (keys (clojure.core/deref selector->mode)): ("selector" "selector_js" "selector_eval_ruby" "selector_eval_js")
klipse_plugin.js:12959 (array-seq (js/document.querySelectorAll selector)): 
klipse_plugin.js:12959 klipsify-elements:  nil eval-clojure
klipse_plugin.js:12959 "Elapsed time: 0.055000 msecs"

[CLOJURE] pretty print the clojure code (with zprint)

klipse freezes far too easily

When you're editing code it's good practice to keep it syntactically correct as much as possible.
Certain editors make it difficult; for example "Intellisense" is really dumb about this grabbing various keys and generally behaving like a headless chicken.

OTOH, various editors try to be helpful, inserting the closing structure automatically when you enter the start of a loop or condition. This doesn't always work very well either.

Currently, klipse is probably one of the least helpful I've come across. You basically have to force a syntax error at the top of the code to keep it from crashing and if you (for example) decrement the wrong variable within a loop you lose what you've typed.

The solution is simple in concept; the code should only run until the next keypress ... no more.

shorter urls for app.klipse.tech

this is a very low-priority suggestion, and might not be a good idea, but i'm going to write it down before i forget it :) feel free to close this issue if you think it's not worth doing.

app.klipse.tech urls can be very long, eg:

it would be nice if they instead were very short, like http://pastebin.com/2XHwK6FP

i haven't thought at all about how this would be implemented, and am not planning on immediately looking into it and implementing it myself, but figured i'd record this suggestion in case it's useful.

No error message when using undeclared variable

When evaluating (map inc 1234) I get the message 1234 is not ISeqable.
But when evaluating (str hello world) no error message is displayed in the cljs panel, Instead
;; Press Ctrl-Enter or wait for 3 sec to eval in clojure... is written.

data-external-libs could use an example in the README

The is currently a reference to a site that used data-external-libs, but by the time you inspect the html on that page, the div that had the data-external-libs="" has already been replaced by CodeMirror. It would be nice to have a simple example showing what the html element should look like.

<div class="klipse code-block" data-external-libs="https://raw.githubusercontent.com/diminishedprime/anagrams/master/src/">
    (ns your-namespace
    (:require [anagrams.core :as anagrams]))
</div>

Feature request: Support HTML as a language

It would be great to be able to show life HTML snippets :)

Example:

<pre><code class="klipse-html">
&lt;h1&gt;Hi&lt;/h1&gt;
</code></pre>

Should render:

<h1>Hi</h1>

Then if the user changes the box to Hello, it updates :)

hardcoded urls

Noticed that there are externally hosted libraries hardcoded into the dist/ plugin files. For example:

...sistentVector.EMPTY_NODE,["https://viebel.github.io/klipse/repo/js/pretty_format.js"],null),cljs.core.cst$kw$comment_DASH_str,"//"],null);
klipse.common.registry.register_mode("eval-...

I seem to be missing information on how to change those. Is there a build argument or something I can use? I don't want to depend on those external files, or even the responsibility to ensure a network connection for this code to run.

Great tool!

[JS] improved console: `console.info`, `console.table` etc...

Might use this implementation

In the Javascript interpreter, 1/0 does not return Infinity

I used a very basic setup, and tested with Chrome:

<div class="klipse">
1/0
</div>
<link rel="stylesheet" type="text/css" href="http://app.klipse.tech/css/codemirror.css">
<script>
window.klipse_settings = {selector_eval_js: '.klipse'};
</script>
<script src="http://app.klipse.tech/plugin/js/klipse_plugin.min.js"></script>

Simple non-list Clojure expression always evaluates as nil

Unlike other Clojurescript-bootstraped REPLs I have tried, KLIPSE doesn't evaluate simple non-list expressions to themselves...

Example: "hello" should evaluate to itself, but instead the result is nil

klipse freezes during code editing!

I was trying to test the following code snippet on klipse (range -10 10).
However, when typing up to (range) the whole page freezes!

Would you be interested in publishing klipse to bower

First of all: I really love what you created. Great idea very well executed!

Unless I am mistaken, if you want to use klipse, you fetch it from http://app.klipse.tech/plugin_prod/js/. This means you always need a internet connection if you want to use it. Sometimes I do not want to rely on internet.

Obviously I could manually download klipse and store it locally and reference it from there. I would rather do this in an automated fashion. I personally would like to use bower for that.

Bower calls itself a package manager for the web. It allows to specify which dependencies your project has and fetch them with the bower command line interface.

Would you be interested in publishing your artifacts to bower?

To have a feel for what you get yourself into below your find a series of steps

Keep the build artifacts in the repository.
Create a bower.json describing the project and what to serve.
Register klipse to bower. This needs to be done only once.
Tag each new release.

I am willing and able to put in the work of creating bower.json in a pull-request.

Newly opened articles scroll down

I couldn't come up with a better title. Sorry.

When opening a new article on the Klipse blog the site starts out scrolled to the top, but the more content gets loaded in, the more the page scrolls down. On the defprotocol article for instance, a fully loaded page ends up opened 85% through (see attached screenshot).

This happens on both Safari / OS X.10.3 and on the latest Firefox (same OS)

Use FiraCode font

Demo

(+ 42) does not work

Strange errors with cljc files with macros

I'm having trouble using an external library with cljc files and macros. Klipse complains that a macro in one namespace doesn't exist in a file that contains a different namespace, which is non-sensical to point out (and yet true). Not sure what the issue is.

To reproduce:

http://app.klipse.tech/?cljs_in=(require%20%27%5Bcats.core%20%3Aas%20c%5D)%0A&external-libs=%5Bhttps%3A%2F%2Fraw.githubusercontent.com%2Ffuncool%2Fcats%2Fmaster%2Fsrc%5D

On macs, eval on Cmd-Enter

It would be great if, on a mac, cmd-enter would work as well as ctrl-enter as the shortcut to reevaluate the snippet. cmd is more idiomatic on macs.

Live evaluatino is not working on 2016/05/30/spec.html on chrome

Live evaluation is not working when I open http://blog.klipse.tech/clojure/2016/05/30/spec.html.

When evaluating the followings

(ns my.spec
  (:require [cljs.spec :as s]))
(ns my.spec
  (:require [cljs.spec :as s]))

I got the following error.

#error {:message "No such namespace: goog.object, could not locate goog/object.cljs, goog/object.cljc, or Closure namespace \"goog.object\"", :data {:tag :cljs/analysis-error}}

I'm getting the same error for all evaluations in the article. Live evaluation seems working on other articles: i.g. http://blog.klipse.tech/clojure/2016/06/07/klipse-plugin-tuto.html

I'm using Chrome 51.0.2704.103 on OSX 10.11.4 (15E65). The page works on Safari.

sqlingvo interactive doc

r0man/sqlingvo#58 (comment)

Credits

It would be nice to see credits for what libraries have been used, for instance, the replit library used for C++.

specify the relevant parts of the code

integrate klipse with React

Firstly, awesome project, thank you for the great work!

I was trying to integrate klipse with react components, but it doesn't seem to work
http://jsbin.com/kobahoquvu/edit?html,js,output

Did I miss something? or is there a way that I can manually restart the klipse?

oCaml support for klipse

With this issue I would like to gauge the interest to support oCaml in klipse.

BuckleScript is an excellent oCaml to JavaScript compiler, that also runs in the browser.

If there is interest, I am willing and hopefully able to provide a pull request integrating oCaml in klipse

Ability to pretty-print the generated js

It would be nice if the generated javascript could be pretty printed.

I think it should be possible to do it via js-beautify.

[CLOJURE] `doc` special form

anmonteiro/lumo@1a762d1

Javascript passive event listeners to prevent browser freeze

codemirror/codemirror5#4292

eval/print primitives

Try the following values in klipse:

:foo
"foo"
123

Neither of them seem to print a result.

test.check interactive doc

http://viebel.github.io/klipse/examples/test.check/doc/index.html

Klipse icons not where they are supposed to be

...or at least I think so. This is what it looks like on Firefox / OSX

Return strings like REPL

The typical behavior I expect from a REPL is to render string values as by pr or pr-str rather than print.

This is most obvious when using strings with escaped characters.

In a ClojureScript REPL:

cljs.user=> (str \" "Hello" \")
"\"Hello\""

From Klipse I see:

Parinfer in KLIPSE app

[CLOJURE] auto completion and more

Get inspired by http://jaredforsyth.com/reepl/
CodeMirror supports auto completion https://codemirror.net/demo/complete.html

fdsfds

Integrate klipse with reveal

reveal.js is a HTML presentation framework. Multiple persons have mentioned in interest in integrating klipse into reveal, notably @viebel, @titaniumbones and myself. There are probably others as well.

Integrating klipse into reveal is hard because of the way that reveal uses CSS. It is very opinionated and has liberal use of !important, which often does not play nice with other frameworks and libraries. See for example CSS conflict with reveal.js.

This issue is created to keep track of the progress of and interest in integrating klipse into reveal

Usable from reveal.js (and org-reveal) presentations ?

I think it would be great to have Klipse snippets in presentations. Reveal.js is a pretty popular way to make online presentations, and I use it from emacs org mode thanks to org-reveal that let me add raw HTML.

I tried some simple test but the result is unconvincing (watch out for httpS automatic redirect, one must use the http because of the reveal.js http source).

A way to embed Klipse in reveal.js presentations would be great !

Best Regards.

viebel / klipse Goto Github PK

klipse's Issues

Recommend Projects

Recommend Topics

Recommend Org