bhauman / devcards Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 116.0 6.88 MB

Devcards aims to provide a visual REPL experience for ClojureScript

Clojure 84.27% CSS 14.35% HTML 0.72% JavaScript 0.67%

devcards's People

Contributors

Stargazers

Watchers

Forkers

robert-stuttaford prodigeni pangloss hellcoderz gijs laurio kibu-australia pandeiro jwhitlark alexpetrov brentvatne opula wilkerlucio pkobrien holyjak sir-pinecone smahood darwin lfn3 ricardojmendez minimal magnars wodin nberger jannis chstan pieter-van-prooijen forklibrary peeja glenjamin coconutpalm ayato-p dbravender geoffsalmon ghosthamlet kevinsuttle naartjie samstiles tristanstraub mkcp alexanderkiel evaluation-alex lahorichargha outdoorsole jdreutt maio jdubie burma-shave digioi sosdevteam lambder kenbier ryfow kauko mattsfrey timothypratley spieden mitchelkuijpers practicalli-johnny bigkahuna1uk jon-schaller mathpunk noonian rebcabin deas adamfrey yogthos nullnotfound rums awkay idokutela deraen escherize hhdang teodorlu evgenitum sensecollective programmingtips thheller dpsutton cjohansen pesterhazy pholas clashthebunny schpaa grzm kingmob oliyh clojure-land drewinglis sethatwood kirschalexandra lfborjas d3v3l0 joseph-hurtado marchdown alehatsman sudorock nrfm griffinbank

devcards's Issues

Test cards only run the last test if the whole card is defined as a "let"

It seems that defining a test card as a let block makes the card only execute the last test. At first I didn't realise that each test should have a row with results (I'm just getting started with devcards), so I didn't even realise that my tests were failing! For someone more familiar with devcards is less of a problem, but still...

Example code:

(defcard bug-testcase
  (dc/test-card
   "Test case for let bug in devcard's test card"
   (let [expected 1]
     (dc/are= expected 0)
     (dc/are= expected 1))))

I imagine this is a bug and not expected behaviour, and I hope it's possible to fix :-)

Content area of devcard has custom font specification

This causes my controls to render a little bit differently under devcards than in other contexts unless I explicitly override that in my css.

I think a better approach would be to have the devcards font settings set specifically in divs where it renders its own content rather than in the higher level container. Not 100% sure though.

Facebook returning a 5xx server error for http://fb.me/react-with-addons-0.9.0.js

I don't know if they've just stopped supporting it since it's an older version, or if there's something wrong with FB's servers or what, but devcards fails to load for me because it references http://fb.me/react-with-addons-0.9.0.js which redirects to http://dragon.ak.fbcdn.net/hphotos-ak-ash3/t39.3284/851559_1450136611886406_507033747_n.js which then fails thusly:

% http get http://dragon.ak.fbcdn.net/hphotos-ak-ash3/t39.3284/851559_1450136611886406_507033747_n.js                                                                    
HTTP/1.1 400 Bad Request
Connection: keep-alive
Content-Length: 105
Content-Type: text/html; charset=utf-8
Date: Tue, 20 Oct 2015 08:31:36 GMT

<html>
<head>
<title>5xx Server Error</title>
</head>

<body>
<h1>5xx Server Error</h1>
</body>

</html>

Any chance of just including the react-with-addons javascript file in devcards so there are no network dependencies at runtime? Or is there a way I can do this myself in my project?

Thanks.

PS. devcards looks awesome, I can't wait to try it! :)

Missing word

Looks like there's a word missing here:

devcards/example_src/devdemos/core.cljs

Line 367 in 7a4b9d0

Integrating devcards into an existing is fairly straightforward and

lein template doesn't work when using the name `devcards`

Following the "Super Quick Start" instructions from the readme, I generated a devcards project using Leiningen 2.5.3 on Java 1.8.0_25. Started lein figwheel and opened the page. The cards.html page is blank. The index.html page is also blank and points to a non-existing /js/compiled/devcards.jsscript - I'm guessing the latter is intentional (my project's home page, the project being "devcards" in this case).

I cloned devcards itself and that worked fine, so the problem must be in the leiningen template.

not firing unmount events when changing pages / updating cards

I have a component that adds global keyboard events when it's mounted and remove those events when the component is unmounted, that works fine as long as the React lifecycle get's respected, but I found 2 situations here where the lifecycle is neglected leaving the events there when they should be removed (and then I'm having duplicated event issues...).

The occasions when it happens:

1 - navigate out from the current cards list (that will remove the cards from the page, but the unmount events are not triggered on the components on the cards)
2 - remove card (usually happens for me when I rename the card to force update it).

Would be nice if devcards correctly unmounts the cards when removing then fullfilling the component lifecycle, without I'm having to refresh my page to remove hanging events.

How to reproduce:

Just create a simple component and mount it like this:

(defn unmount-sample [_ _]
  (reify
    om/IWillUnmount
    (will-unmount [_]
      (println "unmounting this"))

    om/IRender
    (render [_]
      (dom/div nil "unmount"))))

(defcard-om sample-card
  unmount-sample
  {})

Navigate in/out of the namespace using the devcards UI, you will notice that the event is not being fired.

Checksum validation failed

Running the lein new devcards hello-world currently does not work (for me), resulting in the following output:

Retrieving devcards/devcards/0.2.0/devcards-0.2.0.jar from clojars
Could not find artifact devcards:devcards:jar:0.2.0 in central (https://repo1.maven.org/maven2/)
Could not transfer artifact devcards:devcards:jar:0.2.0 from/to clojars (https://clojars.org/repo/): Checksum validation failed, no checksums available from the repository
This could be due to a typo in :dependencies or network issues.
If you are behind a proxy, try setting the 'http_proxy' environment variable.

Changing [devcards "0.2.0"] to [devcards "0.2.0-SNAPSHOT"] fixed it.

Looking forward to trying out devcards, it looks great!

'lein figwheel' fails to start using Clojure-1.8.0-beta1

I tried using Clojure-1.8.0-beta1 in my devcards project.clj but when I run 'lein figwheel' it errors out with the following:

Exception in thread "main" java.lang.VerifyError: (class: cljs/util$last_modified, method: invokeStatic signature: (Ljava/lang/Object;)Ljava/l
ang/Object;) Can only throw Throwable objects, compiling:(util.cljc:142:1)
        at clojure.lang.Compiler$DefExpr.eval(Compiler.java:463)
        at clojure.lang.Compiler.eval(Compiler.java:6918)
        at clojure.lang.Compiler.load(Compiler.java:7360)
        at clojure.lang.RT.loadResourceScript(RT.java:372)
        at clojure.lang.RT.loadResourceScript(RT.java:363)
        at clojure.lang.RT.load(RT.java:453)
        at clojure.lang.RT.load(RT.java:419)
        at clojure.core$load$fn__5669.invoke(core.clj:5885)
        at clojure.core$load.invokeStatic(core.clj:5884)
        at clojure.core$load_one.invokeStatic(core.clj:5685)
        at clojure.core$load_one.invoke(core.clj)
        at clojure.core$load_lib$fn__5618.invoke(core.clj:5730)
        at clojure.core$load_lib.invokeStatic(core.clj:5729)
        at clojure.core$load_lib.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$load_libs.invokeStatic(core.clj:5767)
        at clojure.core$load_libs.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$require.invokeStatic(core.clj:5789)
        at clojure.core$require.doInvoke(core.clj)
        at clojure.lang.RestFn.invoke(RestFn.java:2088)
        at cljs.repl$eval15$loading__5561__auto____16.invoke(repl.cljc:9)
        at cljs.repl$eval15.invokeStatic(repl.cljc:9)
        at cljs.repl$eval15.invoke(repl.cljc)
        at clojure.lang.Compiler.eval(Compiler.java:6913)
        at clojure.lang.Compiler.eval(Compiler.java:6902)
        at clojure.lang.Compiler.load(Compiler.java:7360)
        at clojure.lang.RT.loadResourceScript(RT.java:372)
        at clojure.lang.RT.loadResourceScript(RT.java:363)
        at clojure.lang.RT.load(RT.java:453)
        at clojure.lang.RT.load(RT.java:419)
        at clojure.core$load$fn__5669.invoke(core.clj:5885)
        at clojure.core$load.invokeStatic(core.clj:5884)
        at clojure.core$load_one.invokeStatic(core.clj:5685)
        at clojure.core$load_one.invoke(core.clj)
        at clojure.core$load_lib$fn__5618.invoke(core.clj:5730)
        at clojure.core$load_lib.invokeStatic(core.clj:5729)
        at clojure.core$load_lib.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$load_libs.invokeStatic(core.clj:5767)
        at clojure.core$load_libs.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$require.invokeStatic(core.clj:5789)
        at clojure.core$require.doInvoke(core.clj)
        at clojure.lang.RestFn.invoke(RestFn.java:3204)
        at figwheel_sidecar.repl$eval9$loading__5561__auto____10.invoke(repl.clj:1)
        at figwheel_sidecar.repl$eval9.invokeStatic(repl.clj:1)
        at figwheel_sidecar.repl$eval9.invoke(repl.clj)
        at clojure.lang.Compiler.eval(Compiler.java:6913)
        at clojure.lang.Compiler.eval(Compiler.java:6902)
        at clojure.lang.Compiler.load(Compiler.java:7360)
        at clojure.lang.RT.loadResourceScript(RT.java:372)
        at clojure.lang.RT.loadResourceScript(RT.java:363)
        at clojure.lang.RT.load(RT.java:453)
        at clojure.lang.RT.load(RT.java:419)
        at clojure.core$load$fn__5669.invoke(core.clj:5885)
        at clojure.core$load.invokeStatic(core.clj:5884)
        at clojure.core$load_one.invokeStatic(core.clj:5685)
        at clojure.core$load_one.invoke(core.clj)
        at clojure.core$load_lib$fn__5618.invoke(core.clj:5730)
        at clojure.core$load_lib.invokeStatic(core.clj:5729)
        at clojure.core$load_lib.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$load_libs.invokeStatic(core.clj:5767)
        at clojure.core$load_libs.doInvoke(core.clj)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invokeStatic(core.clj:647)
        at clojure.core$require.invokeStatic(core.clj:5789)
        at clojure.core$require.doInvoke(core.clj)
        at clojure.lang.RestFn.invoke(RestFn.java:408)
        at user$eval5.invokeStatic(form-init179302172574647946.clj:1)
        at user$eval5.invoke(form-init179302172574647946.clj)
        at clojure.lang.Compiler.eval(Compiler.java:6913)
        at clojure.lang.Compiler.eval(Compiler.java:6902)
        at clojure.lang.Compiler.load(Compiler.java:7360)
        at clojure.lang.Compiler.loadFile(Compiler.java:7298)
        at clojure.main$load_script.invokeStatic(main.clj:275)
        at clojure.main$init_opt.invokeStatic(main.clj:277)
        at clojure.main$init_opt.invoke(main.clj)
        at clojure.main$initialize.invokeStatic(main.clj:308)
        at clojure.main$null_opt.invokeStatic(main.clj:342)
        at clojure.main$null_opt.invoke(main.clj)
        at clojure.main$main.invokeStatic(main.clj:421)
        at clojure.main$main.doInvoke(main.clj)
        at clojure.lang.RestFn.invoke(RestFn.java:421)
        at clojure.lang.Var.invoke(Var.java:383)
        at clojure.lang.AFn.applyToHelper(AFn.java:156)
        at clojure.lang.Var.applyTo(Var.java:700)
        at clojure.main.main(main.java:37)
Caused by: java.lang.VerifyError: (class: cljs/util$last_modified, method: invokeStatic signature: (Ljava/lang/Object;)Ljava/lang/Object;) Can
 only throw Throwable objects
        at java.lang.Class.getDeclaredConstructors0(Native Method)
        at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
        at java.lang.Class.getConstructor0(Unknown Source)
        at java.lang.Class.newInstance(Unknown Source)
        at clojure.lang.Compiler$ObjExpr.eval(Compiler.java:4902)
        at clojure.lang.Compiler$DefExpr.eval(Compiler.java:450)
        ... 93 more
Subprocess failed

Building a card that both shows a react component and unit tests for it

Hi, I thought about such a card for a game I'm making. I found some tests are very difficult to read and distinguish because they have complex game state with many coordinates and such numeric data.

-> My use case is to easily see the test state associated with the unit tests that follow in the same card.

I thought I'll create a custom card for this, but would also like to hear your thoughts: would you see this as a useful feature?

edn rendering can fail when rendering map with unsortable keys

Introduced by:
#31 (diff)

Chokes on:

{0 "x", :k v}

During sorting the standard cljs.core.compare is called as (compare :k 0) and keyword's IComparable -compare method throws because the second arguments is not a keyword.

At this point I believe this is an issue in cljs. compare method should be more flexible. But I wanted to mention it here, because there are some other cases when compare could throw.

I would propose to implement our own compare method for edn rendering. Either it should be robust in all cases or it should silently fail to sort if something goes wrong.

Fix block whitespace stripping to allow for nested bullet lists

If you use nested bullets in markdown in a card, it loses the nesting.

The approach I'm going to take is to sense the left edge boundary of the first bullet line, and then trim bullet item lines by that amount; otherwise make the processing strip all ws as it currently does.

"This shouldn't work" testing example on addition

On the test demos, the following example is used repeatedly:

(is (= (+ 1 0 0 0) 1) "This shouldn't work")

Maybe I'm missing something and it's an example of what should work, but why the label, and why is it used under "bad stuff" too?

Support for clojurescript 2173

I see in the Readme that clojurescript 2197 or greater is required. That means I can't experiment with swapping out figwheel for LightTable's browser connection.

Unfortunately LightTable seems to have issues with these latest releases and, due to the nature of the changes, there's not a lot of focus on dealing with the CLJS related issues ("primarily clojure bugfixes, stick with 2173").

https://groups.google.com/forum/#!searchin/light-table-discussion/2197/light-table-discussion/X-Ij2rZFboQ/oE_elnAIs7kJ

Any chance you can require an 2173 or are their groovy new features which are needed? I'm hoping it's actually a figwheel related issue which might mean I can step gingerly around it.

If not, perhaps you could add a comment on that thread to emphasise the value of that release to the CLJS community.

reagent devcard

Does devcards work with reagent and if not, could somebody give me a rough idea as to what would be involved in creating a base card that works with reagent.

CLJS build problems with devcards-0.2.1-4 as a dependency

I should preface this with: this is unlikely to be your fault, but I'm raising an issue here because I have no idea what's causing this problem, and perhaps you might -- or perhaps it might help you to know that I'm having the issue, in case someone else has something similar.

I have a boot project which uses Devcards (as a :scope "provided" dependency). With devcards-0.2.1-3, I'm fine. With devcards-0.2.1-4, CLJS :optimizations :advanced builds produce a JS file which appears to include React and ReactDOM, but which fails to include any other dependencies, and doesn't even include my own code (there's not a single reference to any of the namespaces my CLJS code exports). All the other dependencies, and my code, are built as per normal their various dependencies in <stuff>.out, but it's as if Google Closure is deciding that the entirety of my codebase is dead code.

It's a complex project, so I haven't boiled down a minimally reproducible case, I'm afraid. I have, however, verified that the single character change from 4 back to 3 in the Devcards version number fixes the problem (and that changing that single digit back again causes it to resurface again). There is perhaps one unusual aspect to my build setup: I include Devcards in my production build, not just in my development one. (Don't imagine that's causing the problem, but hey, more information is better than less...)

I'll see if I can pin down some more information for you -- a minimally reproducible case, for example -- over the next few days. But I'll be honest: I have a busy week coming up, and I don't want to promise anything.

Documentation: Showing multiple source files' cards in the devcards interface

This seems so silly but I can't figure out what I need to change. I've got a project, and I'm making cards in foo.core and they show up when I run lein figwheel and everything is kittens and rainbows. But, if I make a foo.baz source file, it is not available as one of the visual namespaces to choose from. I see this pattern all over in the examples, but I haven't found what's different about my project.

Other than the cards I've added to foo.core, it's the bare bones result of lein new devcards foo.

DevCards with Light Table

Hi.

I tried to use Light Table in conjuction with DevCards. It feels like it could be a pretty powerful combination. Problem is, it doesn't work.

I don't know if this is issue with LT or DevCards, but I thought I highlight the issue here if anybody has ideas about how to proceed. There's a thread on LT group about this, where I and one other reported about this problem, but so far no solutions:
https://groups.google.com/forum/#!topic/light-table-discussion/X-Ij2rZFboQ

If you have any ideas, I'm keen to try them out.

LT's stack trace is below:

final project:  {:compile-path /Users/env/exp/capps/target/classes, :group capps, :license {:name Eclipse Public License, :url http://www.eclipse.org/legal/epl-v10.html}, :global-vars {}, :checkout-deps-shares [:source-paths :test-paths :resource-paths :compile-path #'leiningen.core.classpath/checkout-deps-paths], :repl-options {:nrepl-middleware [lighttable.nrepl.handler/lighttable-ops], :init (clojure.core/swap! lighttable.nrepl.core/my-settings clojure.core/merge {:name capps 0.1.0-SNAPSHOT, :project (quote {:compile-path /Users/env/exp/capps/target/classes, :group capps, :license {:name Eclipse Public License, :url http://www.eclipse.org/legal/epl-v10.html}, :global-vars {}, :checkout-deps-shares [:source-paths :test-paths :resource-paths :compile-path #'leiningen.core.classpath/checkout-deps-paths], :dependencies ([org.clojure/clojure 1.6.0] [org.clojure/clojurescript 0.0-2202] [org.clojure/tools.nrepl 0.2.3 :exclusions ([org.clojure/clojure])] [clojure-complete/clojure-complete 0.2.3 :exclusions ([org.clojure/clojure])] [devcards/devcards 0.1.0-SNAPSHOT]), :plugin-repositories [[central {:snapshots false, :url http://repo1.maven.org/maven2/}] [clojars {:url https://clojars.org/repo/}]], :test-selectors {:default (constantly true)}, :target-path /Users/env/exp/capps/target, :name capps, :deploy-repositories [[clojars {:username :gpg, :url https://clojars.org/repo/, :password :gpg}]], :root /Users/env/exp/capps, :offline? false, :source-paths (/Users/env/exp/capps/src), :certificates [clojars.pem], :cljsbuild {:builds [{:source-paths [devcards_src src], :compiler {:output-dir resources/public/devcards/js/compiled/out, :source-map true, :output-to resources/public/devcards/js/compiled/capps_devcards.js, :optimizations :none}, :id devcards}]}, :version 0.1.0-SNAPSHOT, :jar-exclusions [#"^\."], :profiles {:dev {:dependencies [[devcards 0.1.0-SNAPSHOT]], :plugins [[lein-cljsbuild 1.0.3] [lein-figwheel 0.1.3-SNAPSHOT]]}}, :figwheel {:css-dirs [resources/public/css]}, :prep-tasks [javac compile], :url http://example.com/FIXME, :repositories [[central {:snapshots false, :url http://repo1.maven.org/maven2/}] [clojars {:url https://clojars.org/repo/}]], :resource-paths (/Users/env/exp/capps/dev-resources /Users/env/exp/capps/resources), :uberjar-exclusions [#"(?i)^META-INF/[^/]*\.(SF|RSA|DSA)$"], :jvm-opts [], :eval-in :subprocess, :plugins ([lein-cljsbuild/lein-cljsbuild 1.0.3] [lein-figwheel/lein-figwheel 0.1.3-SNAPSHOT]), :native-path /Users/env/exp/capps/target/native, :description FIXME: write this!, :uberjar-merge-with {META-INF/plexus/components.xml leiningen.uberjar/components-merger, data_readers.clj leiningen.uberjar/clj-map-merger}, :test-paths (/Users/env/exp/capps/test), :clean-targets [:target-path]})})}, :dependencies ([org.clojure/clojure 1.6.0] [org.clojure/clojurescript 0.0-2202] [org.clojure/tools.nrepl 0.2.3 :exclusions ([org.clojure/clojure])] [clojure-complete/clojure-complete 0.2.3 :exclusions ([org.clojure/clojure])] [devcards/devcards 0.1.0-SNAPSHOT] [lein-light-nrepl/lein-light-nrepl 0.0.18] [org.clojure/tools.reader 0.8.3]), :plugin-repositories [[central {:snapshots false, :url http://repo1.maven.org/maven2/}] [clojars {:url https://clojars.org/repo/}]], :test-selectors {:default (constantly true)}, :target-path /Users/env/exp/capps/target, :name capps, :deploy-repositories [[clojars {:username :gpg, :url https://clojars.org/repo/, :password :gpg}]], :root /Users/env/exp/capps, :offline? false, :source-paths (/Users/env/exp/capps/src), :certificates [clojars.pem], :cljsbuild {:builds [{:source-paths [devcards_src src], :compiler {:output-dir resources/public/devcards/js/compiled/out, :source-map true, :output-to resources/public/devcards/js/compiled/capps_devcards.js, :optimizations :none}, :id devcards}]}, :version 0.1.0-SNAPSHOT, :jar-exclusions [#"^\."], :profiles {:dev {:dependencies [[devcards 0.1.0-SNAPSHOT]], :plugins [[lein-cljsbuild 1.0.3] [lein-figwheel 0.1.3-SNAPSHOT]]}}, :figwheel {:css-dirs [resources/public/css]}, :prep-tasks [javac compile], :url http://example.com/FIXME, :repositories [[central {:snapshots false, :url http://repo1.maven.org/maven2/}] [clojars {:url https://clojars.org/repo/}]], :resource-paths (/Users/env/exp/capps/dev-resources /Users/env/exp/capps/resources), :uberjar-exclusions [#"(?i)^META-INF/[^/]*\.(SF|RSA|DSA)$"], :jvm-opts [], :eval-in :subprocess, :plugins ([lein-cljsbuild/lein-cljsbuild 1.0.3] [lein-figwheel/lein-figwheel 0.1.3-SNAPSHOT]), :native-path /Users/env/exp/capps/target/native, :description FIXME: write this!, :uberjar-merge-with {META-INF/plexus/components.xml leiningen.uberjar/components-merger, data_readers.clj leiningen.uberjar/clj-map-merger}, :test-paths (/Users/env/exp/capps/test), :clean-targets [:target-path]}
Error loading lighttable.nrepl.handler: java.lang.RuntimeException: No such var: fs/*cwd*, compiling:(lighttable/nrepl/core.clj:21:30)
Exception in thread "main" java.lang.ClassNotFoundException: lighttable.nrepl.core, compiling:(/private/var/folders/n4/n_f0j16x6ms9j1y5cdc2dx240000gn/T/form-init4337150725727782312.clj:1:1023)
    at clojure.lang.Compiler.analyze(Compiler.java:6464)
    at clojure.lang.Compiler.analyze(Compiler.java:6406)
    at clojure.lang.Compiler$InvokeExpr.parse(Compiler.java:3719)
    at clojure.lang.Compiler.analyzeSeq(Compiler.java:6646)
    at clojure.lang.Compiler.analyze(Compiler.java:6445)
    at clojure.lang.Compiler.analyze(Compiler.java:6406)
    at clojure.lang.Compiler$BodyExpr$Parser.parse(Compiler.java:5782)
    at clojure.lang.Compiler$FnMethod.parse(Compiler.java:5217)
    at clojure.lang.Compiler$FnExpr.parse(Compiler.java:3846)
    at clojure.lang.Compiler.analyzeSeq(Compiler.java:6642)
    at clojure.lang.Compiler.analyze(Compiler.java:6445)
    at clojure.lang.Compiler.eval(Compiler.java:6700)
    at clojure.lang.Compiler.eval(Compiler.java:6693)
    at clojure.lang.Compiler.eval(Compiler.java:6692)
    at clojure.lang.Compiler.load(Compiler.java:7130)
    at clojure.lang.Compiler.loadFile(Compiler.java:7086)
    at clojure.main$load_script.invoke(main.clj:274)
    at clojure.main$init_opt.invoke(main.clj:279)
    at clojure.main$initialize.invoke(main.clj:307)
    at clojure.main$null_opt.invoke(main.clj:342)
    at clojure.main$main.doInvoke(main.clj:420)
    at clojure.lang.RestFn.invoke(RestFn.java:421)
    at clojure.lang.Var.invoke(Var.java:383)
    at clojure.lang.AFn.applyToHelper(AFn.java:156)
    at clojure.lang.Var.applyTo(Var.java:700)
    at clojure.main.main(main.java:37)
Caused by: java.lang.ClassNotFoundException: lighttable.nrepl.core
    at java.net.URLClassLoader$1.run(URLClassLoader.java:202)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:190)
    at clojure.lang.DynamicClassLoader.findClass(DynamicClassLoader.java:61)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
    at java.lang.Class.forName0(Native Method)
    at java.lang.Class.forName(Class.java:249)
    at clojure.lang.RT.classForName(RT.java:2065)
    at clojure.lang.Compiler$HostExpr.maybeClass(Compiler.java:978)
    at clojure.lang.Compiler$HostExpr.access$400(Compiler.java:756)
    at clojure.lang.Compiler.analyzeSymbol(Compiler.java:6832)
    at clojure.lang.Compiler.analyze(Compiler.java:6427)
    ... 25 more
clojure.lang.ExceptionInfo: Subprocess failed {:exit-code 1}
    at clojure.core$ex_info.invoke(core.clj:4327)
    at leiningen.core.eval$fn__3532.invoke(eval.clj:226)
    at clojure.lang.MultiFn.invoke(MultiFn.java:231)
    at leiningen.core.eval$eval_in_project.invoke(eval.clj:326)
    at clojure.lang.AFn.applyToHelper(AFn.java:167)
    at clojure.lang.AFn.applyTo(AFn.java:151)
    at clojure.core$apply.invoke(core.clj:619)
    at leiningen.repl$repl.doInvoke(repl.clj:261)
    at clojure.lang.RestFn.invoke(RestFn.java:425)
    at leiningen.light_nrepl$light.doInvoke(light_nrepl.clj:56)
    at clojure.lang.RestFn.invoke(RestFn.java:423)
    at leiningen.light_nrepl$_main.doInvoke(light_nrepl.clj:68)
    at clojure.lang.RestFn.invoke(RestFn.java:397)
    at clojure.lang.AFn.applyToHelper(AFn.java:159)
    at clojure.lang.RestFn.applyTo(RestFn.java:132)
    at leiningen.light_nrepl.main(Unknown Source)

Does devcards reload when data changes?

I see that om-root-card does not reload the card when data is changed.

For example, if I change text to "yep it is not", it does not automatically reload unless the page is reloaded

(defcard omcard-ex
(dc/om-root-card widget {:text "yep it is"} {} { :unmount-on-reload true }))

Is there any option I can pass to do this?

Feature: collapse/expand cards

Would be nice to have a little widget on the left that could expand/collapse a card, even on cards that don't have a header.

dom-node macro does not update on atom change

The following card shows the issue (include dom-node in the devcards :require-macros and paste-in):

(defcard dom-node-not-updating
  "Seems dom-node doesn't update?"
  (dom-node
    (fn [state node]
      (set! (.-innerHTML node) (str "Click me count: " (:count @state)))
      (set! (.-onclick node) #(swap! state update-in [:count] inc))))
  {:count 0}
  {:inspect-data true
   :watch-atom true})

I have tracked the problem down to defonce-react-class DomComponent here:

devcards/src/devcards/core.cljs

Line 314 in d3a3000

(defonce-react-class DomComponent

AFAIK it does not make use of the :data_atom passed to it by defn- dom-node* here:

devcards/src/devcards/core.cljs

Line 498 in d3a3000

(defn- dom-node* [node-fn]

I'm not react-able enough to fix this, sorry =[
(and therefore in great need of dom-node !)

Demo Issues

When trying to run the demo I get the following error.

git clone https://github.com/bhauman/devcards.git
cd devcards
lein figwheel

Compiling ClojureScript.
Figwheel: Starting server at http://localhost:3449
Figwheel: Serving files from 'resources/public'
Compiling "resources/public/devcards/js/compiled/devdemos.js" from ["src" "example_src" "../lein-figwheel/support/src"]...
WARNING: unsigned-bit-shift-right already refers to: #'clojure.core/unsigned-bit-shift-right in namespace: cljs.core, being replaced by: #'cljs.core/unsigned-bit-shift-right
Compiling "resources/public/devcards/js/compiled/devdemos.js" failed.
java.io.FileNotFoundException: ../lein-figwheel/support/src (No such file or directory)
            (Unknown Source) java.io.FileInputStream.open
    FileInputStream.java:146 java.io.FileInputStream.<init>
                  io.clj:229 clojure.java.io/fn
                   io.clj:69 clojure.java.io/fn[fn]
                  io.clj:165 clojure.java.io/fn
                   io.clj:69 clojure.java.io/fn[fn]
                  io.clj:102 clojure.java.io/reader
             RestFn.java:410 clojure.lang.RestFn.invoke
           analyzer.clj:1537 cljs.analyzer/forms-seq
           analyzer.clj:1535 cljs.analyzer/forms-seq
             closure.clj:329 cljs.closure/compile-file
             closure.clj:378 cljs.closure/eval2926[fn]
             closure.clj:288 cljs.closure/eval2863[fn]
             closure.clj:391 cljs.closure/eval2913[fn]
             closure.clj:288 cljs.closure/eval2863[fn]
             compiler.clj:44 cljsbuild.compiler.SourcePaths/fn
               core.clj:2557 clojure.core/map[fn]
             LazySeq.java:40 clojure.lang.LazySeq.sval
             LazySeq.java:49 clojure.lang.LazySeq.seq
                 RT.java:484 clojure.lang.RT.seq
                core.clj:133 clojure.core/seq
                core.clj:624 clojure.core/apply
               core.clj:2586 clojure.core/mapcat
             RestFn.java:423 clojure.lang.RestFn.invoke
             compiler.clj:44 cljsbuild.compiler/cljsbuild.compiler.SourcePaths
             closure.clj:940 cljs.closure/build
             closure.clj:909 cljs.closure/build
             compiler.clj:58 cljsbuild.compiler/compile-cljs[fn]
             compiler.clj:57 cljsbuild.compiler/compile-cljs
            compiler.clj:159 cljsbuild.compiler/run-compiler
form-init6991624860224391135.clj:1 user/eval7687[fn]
form-init6991624860224391135.clj:1 user/eval7687[fn]
form-init6991624860224391135.clj:1 user/eval7687
          Compiler.java:6703 clojure.lang.Compiler.eval
          Compiler.java:6693 clojure.lang.Compiler.eval
          Compiler.java:7130 clojure.lang.Compiler.load
          Compiler.java:7086 clojure.lang.Compiler.loadFile
                main.clj:274 clojure.main/load-script
                main.clj:279 clojure.main/init-opt
                main.clj:307 clojure.main/initialize
                main.clj:342 clojure.main/null-opt
                main.clj:420 clojure.main/main
             RestFn.java:421 clojure.lang.RestFn.invoke
                Var.java:383 clojure.lang.Var.invoke
                AFn.java:156 clojure.lang.AFn.applyToHelper
                Var.java:700 clojure.lang.Var.applyTo
                main.java:37 clojure.main.main

Run 'lein figwheel' and then open localhost:3449/devcards.html in your browser = 404

Minor issue: after a successful lein new devcards myapp the prompt says:
Run 'lein figwheel' and then open localhost:3449/devcards.html in your browser.
Doing so will shout a 404.

localhost:3449 works fine, though.

responsive CSS question regarding inline code samples in devcard

When the browser window is resized to 1000px or smaller this style is applied to code samples in a devcard. I find this visually jarring because the code samples are stretched to browser edges while everything else flows naturally. Is this CSS intentional?

@media (max-width: 1000px) {
 .com-rigsomelight-devcards-card-hide-border 
 .com-rigsomelight-devcards_rendered-card 
 .com-rigsomelight-devcards-markdown pre {
    margin-right: -3000px;
    margin-left: -3000px;
    padding-right: 3000px;
    padding-left: 3000px;
 }
}

React 14 initializeTouchEvents is not a function

temp workaround (aset js/React "initializeTouchEvents" (fn [_]))

Knobs for resetting state / tuning on history / displaying data

I am debating adding knobs for these things to the heading panel of
the card. A knob to reset the state, a knob to turn on history, a
knob to display the data in the atom. Let me know if you think this
is a good idea. ref

👍 great idea ;-)

Reagent component with input box loses focus on change when tracking atom

Having a lot of fun with devcards and figwheel, but ran into the following issue: if I add a reagent component with an input box that updates on change to a card and also try tracking the atom those changes flow to, the input box loses focus on every change, i.e. on every keystroke. Gist to reproduce is here.

Note that there is an easy enough workaround for this: duplicate the card, but don't pass the state atom to that one. The one without the atom accepts changes to the input box without losing focus just fine, and you still get the live state display and history tracking in the other card, which otherwise works just fine.

sort namespaces by name

I'm noticing that the namespaces order at the main is kind of random, I think would be nice to have then sorted alphabetically so it gets easier to find namespaces when you have a big number of then.

Viewing an Om/Next app state atom

Is there a best way to view a non-devcards app-state atom? Watching your video, it looks like there was once a utility function called edn->html, but after an (admittedly brief) click through the source, I don't see it.

Bootstrap styles override personal

This is pretty random since you dont necessarily need to keep using the bootstrap stuff with devcards, but I was wondering if it would be better to use some namespaced framework like purecss to create the bundled interface. Just to get a works out of the box experience when people create components on devcards.

Devcards styling overwrites my own

Using Devcards is great. It feels like I'm writing a suite of visual tests, giving me that old TDD cycle of endorphins. :) The issue I'm having tho, is that the styles bundled with devcards overwrite my own - in particular font-size and font-face inside the cards.

It is certainly very useful to have nice looking devcards right out of the box. But it interferes with my ability to properly test how my own CSS interacts with my components.

One solution could be adding a flag that disables styling (colors, fonts), but keeps the layout.

Thoughts?

lein template out of date with clojars

the template still has the 0.2.0 dep but that's no longer available in clojars

[reagent] initial-data isn't IReactiveAtom

The initial-data passed to the Reagent components doesn't implement the IReactiveAtom protocol.

This makes some Reagent features, such as the cursors, unusable in a component rendered with devcards.

om-root-card doesn't make use of om-options when calling into om/root.

om-root-card doesn't make use of om-options when calling into om/root.

Just leaving this here as a reminder :-)

Use sorted-map when rendering edn

Use a sorted-map for any map-like objects for :inspect-data edn rendering to make it easier to find the parts of the start you want to look at.

Add routing to the Devcards UI

Add an option for changing background color of card

When styling a component outside of its original context it is often desirable to do it against a appropriate background color. In such cases it would be great to allow setting the background of the actual card as an option like so:

(devcard white-thingy
"I need a dark surrounding"
(sab/html [:div {:style {:background "#fff"}} "Can you see my background?"])
{}
{:background "#333"})

Om-root-card

Can you get cursors in om-root-card to test transactions and stuff? Seems to give just a regular atom with

(defcard testing
  (dc/om-root-card
    (fn [a o]
      (om/component
        (dom/div nil (pr-str a))))
    (atom {})))

unless i misunderstood something.

Question: How to deploy devcards as the 'main-app'

Here is what I want to do:

lein new devcards helloworld
lein cljsbuild once prod

After I compile 'prod' I want to take everything in resources\public and deploy it to a server and have my devcards show up.

That said, I followed this https://github.com/bhauman/devcards#devcards-without-figwheel and when I try to start the decards gui in my main function I get a compiler warning:

WARNING: Use of undeclared Var devcards.core/start-devcard-ui!*

That is a private function in devcards.core namespace and out of my control. Deploying the assets in resource\public results in a blank page when opening index.html.

What am I doing wrong?

What would be an idiomatic way to display core.async channel results?

Hi, I'm using devcards to create a build monitor app and lovin' it!

I have core.async channels in many places, and like to create proof of concept devcards to see what they return. Here's a minimal example of the code I use for this:

(def render-reagent-atom deref) ; for readability

(defcard-rg read-config-from-url-result
  render-reagent-atom
  (let [state (reagent/atom nil)]
    (go (let [conf (<! (config/read-config-from-url config-file-url))]
          (reset! state conf)))
    state))

I need the deref as the render function so a re-render will take place once the async go block completes (I think this is why at least). Do you know of a more idiomatic way to achieve this?

devcards and reagent/create-class

Hi @bhauman, thanks for creating this nice plugin.

I'm working with some highcharts component and reagent for now. The project is pretty simple, it's almost the same as this one : https://github.com/reagent-project/reagent-cookbook/blob/master/recipes/highcharts/src/cljs/highcharts/core.cljs
What is the right way to use custom component ( with reagent/create-class ) with defcard-rg ?

Thanks

default to opt-in versus defaulting to opt out

The major case is that people want the devcards to render.

The minor case is when people want to prevent devcards from being compiled into production source c code.

I surmise that I will remove the :devcards true requirement in the majority case and add the requirement for :devcards false in the minor case.

README: Start with a brief 'why' paragraph

Hi! I have already looked at devcards for the 2nd time and I still fail to understand its value proposition (no, I am likely not in my brightest state :)). Why and when would I use it? What does it give me that figwheel does not?

I think it would really help to start the README not with the "what" of Devcards ("interactive visual REPL") but its "why" (and the use case for it, i.e. when). What problem is it solving? The current start is:

Devcards aims to provide ClojureScript developers with an interactive visual REPL. Devcards makes it simple to interactively surface code examples that have a visual aspect into a browser interface.

What is an "interactive visual REPL"? How does it differ from having figwheel connected to the browser and trying my (visual) Om components (interactively) as I develop them?

Good luck!

fix :watch-atom false

How to show cljs.test error messages for failed tests?

I'm liking the idea of devcards. 👍 I wrote some simple tests with it, but unfortunately some of them failed.

From the devcard UI I don't see why they did, though. Is it possible to show the error messages like the cljs.test runner does it?

Factoring out Markdown source

Hi Bruce,
I was working with devcards and found out that it would be great to have a Markdown component for ReactJS/reagent, so I went ahead and factored out your code into this !
Now, I don't know which licensing you are using, but I figured I might just ask if you are interested in either maintaining something like this, or agree to me putting it in my works...don't know, at the end of the day is your (very good) work.
Have a look at the (very rough and in progress) code and let me know ok?
Thanks!

Showing cards for non-core files?

I'm trying out devcards, and something surprised me. When I look at http://localhost:3449/devcards/index.html it includes a link for projectname_devcards.core and projectname.core. I expected that when I created a new file, like module.cljs, and included the same devcard dependencies as I did in the core file, that there would be a new link for projectname.module, but that was not the case. I thought the files that figwheel checks might be in project.clj but no such luck. Can a note be added to the documentation on how to get devcards for namespaces other than core to show up?

feature suggestion: component reload policies

While developing here I'm noticing that I'm having to manual reload a lot (mostly by renaming the card that I'm working on). I saw what you said about data reloading at the issue #15, but at same time, when you change data on your video demo it reloads (there you are using Sablono, not sure if it matters).

I noticed my cards only get re-render if I interact with then or remove/add/rename, and I think the workflow could be much better if they just re-render all the times when reloading (or maybe even on a render loop).

I propose that we have some sort of settings for how to deal when code updates, it could be an extra key at the configurations like :reload-policy, and here and some ideas for values of it:

:none - this is like the current one, the component doesn't re-render on code reload
:render - just re-render the component keeping the state (the props on the atom)
:refresh - render all over again with the data on code (discard current state)

So we could write:

(defcard-om sample-om-card
  component
  {:data 1}
  {}
  {:reload-policy :refresh})

These are just ideas to deal with the problem of having to manually reloading the cards against code changes, please let me know your thoughts/ideas on that matter.

Thanks.

mkdn-pprint-source fails with "No reader function for tag js"

Armed with this information, lifted from: http://rigsomelight.com/devcards/#!/devdemos.source_code_display

Because the mkdn-pprint-source makes use of the cljs.repl to get the source code for an object, we can use it to display the source code for any object accessible to our current namespace.

I want to use mkdn-pprint-source to print the following source code. The function is defined in the same file I am trying to display it in. I am using defcard-doc.

(defn create-player []
  (reset! player-state
    (YT.Player. "player" #js { :videoId "wrMBe5cyNKA"
                               :playerVars #js { :autoplay 0 :autohide 1 }})))

Here is my defcard-doc declaration:

(defcard-doc
  (dc/mkdn-pprint-source create-player))

Here is the error verbatim:

Compile Error
clojure.lang.ExceptionInfo : failed compiling file:src\toby_devcards\core.cljs
clojure.lang.ExceptionInfo : No reader function for tag js at line 119 src\toby_devcards\core.cljs
clojure.lang.ExceptionInfo : No reader function for tag js
Error on file src\toby_devcards\core.cljs, line 119, column 3

Am I doing something wrong (I can get other simple functions to print in the devcard-doc)?

Devcards not auto-updating with figwheel

Hi!

I'm trying to integrate devcards into an existing project. It works great, but the auto-loading with figwheel isn't working because it says i'm not requiring my files. Please, I would really appreciate some guidance.

Figwheel: NOT loading these files 
utils.cljs?rel=1444821373948:41 not required: ("/webkipedia/devcards/search.js")

This seems very weird, since the files are in fact required (same thing happens with the :main ns I've set in the config:

project.clj where I specify a :main webkipedia.devcards.core joakin/webkipedia/blob/devcards/project.clj#L31 in the devcards build id.
That main ns is here src/webkipedia/devcards/core.cljs
Which just includes this src/webkipedia/devcards/search.cljs
Changing either src/webkipedia/devcards/core.cljs or src/webkipedia/devcards/search.cljs will print in the console Figwheel: NOT loading these files, not required as I pasted above.

For running figwheel I'm doing rlwrap lein figwheel devcards dev so that I get both the app and the devcards compiled, and I open index.html and cards.html in the browser to get the live-reloading on both tabs.

I can't shake the feeling I'm doing something basic wrong, or misunderstanding how devcards should be set up. Any help would be appreciated. Feel free to clone the repo with the devcards branch and try it out if you want to.

Thanks a lot for your work and the tools you create @bhauman, they are awesome ❤️

Feature: Support functions that return data as the main object

Currently I can pass a fn that returns a React component to a devcard. It would be nice if I could pass a function that returns just data and those were rendered using the edn renderer:

(devcard plain-fn #(identity %) {:key "val"})

Motivation

While developing a function, I want to see its output. I could use REPL but then I need to manually run the fn. Using a devcard would be more automatic - and more cool.
But admittedly, this is a very low priority "maybe nice to have" so I am not sure the added complexity is worth it.

bhauman / devcards Goto Github PK

devcards's People

Contributors

Stargazers

Watchers

Forkers

devcards's Issues

Motivation

Recommend Projects

Recommend Topics

Recommend Org

Jobs