mirror of https://github.com/status-im/reagent.git
Cloact -> Reagent
This commit is contained in:
Dan Holmsand
parent
e6db667c05
commit
8e542292a2
4
Makefile
4
Makefile
|
|
@ -9,7 +9,7 @@ PROF = dev,demo,test
|
|||
CLJSBUILD = client
|
||||
CLJSDIRS = src test
|
||||
|
||||
VERSION = 0.1.0
|
||||
VERSION = 0.2.0-SNAPSHOT
|
||||
|
||||
all: buildrun
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ buildsite: demobuild gensite
|
|||
setversion:
|
||||
version=$(VERSION); \
|
||||
find . -name project.clj | \
|
||||
xargs -n1 sed -i "" -e 's,\(cloact "\)\([^"]*\)",\1'"$$version"'"',g
|
||||
xargs -n1 sed -i "" -e 's,\(reagent "\)\([^"]*\)",\1'"$$version"'"',g
|
||||
|
||||
tag: setversion
|
||||
if git rev-parse v$(VERSION) 2>/dev/null; then \
|
||||
|
|
|
|||
32
README.md
32
README.md
|
|
@ -1,22 +1,22 @@
|
|||
|
||||
# Cloact
|
||||
# Reagent
|
||||
|
||||
A simple [ClojureScript](http://github.com/clojure/clojurescript) interface to
|
||||
[React](http://facebook.github.io/react/).
|
||||
|
||||
[Cloact](http://holmsand.github.io/cloact/) provides a way to write efficient
|
||||
[Reagent](http://holmsand.github.io/reagent/) provides a way to write efficient
|
||||
React components using (almost) nothing but plain ClojureScript functions.
|
||||
|
||||
To use Cloact you add this to your dependencies in `project.clj`:
|
||||
To use Reagent you add this to your dependencies in `project.clj`:
|
||||
|
||||
[cloact "0.1.0"]
|
||||
[reagent "0.1.0"]
|
||||
|
||||
You also need to include react.js itself. One way to do this is to add
|
||||
|
||||
:preamble ["cloact/react.js"]
|
||||
:preamble ["reagent/react.js"]
|
||||
|
||||
to the *:compiler* section of project.clj, as shown in the examples
|
||||
directory (or "cloact/react.min.js" in production). You could also
|
||||
directory (or "reagent/react.min.js" in production). You could also
|
||||
add
|
||||
|
||||
<script src="http://fb.me/react-0.8.0.js"></script>
|
||||
|
|
@ -26,7 +26,7 @@ directly to your html.
|
|||
|
||||
## Examples
|
||||
|
||||
Cloact uses [Hiccup-like](https://github.com/weavejester/hiccup) markup instead of React's sort-of html. It looks like this:
|
||||
Reagent uses [Hiccup-like](https://github.com/weavejester/hiccup) markup instead of React's sort-of html. It looks like this:
|
||||
|
||||
```clj
|
||||
(defn some-component []
|
||||
|
|
@ -61,18 +61,18 @@ You mount the component into the DOM like this:
|
|||
|
||||
```clj
|
||||
(defn mountit []
|
||||
(cloact/render-component [childcaller]
|
||||
(.-body js/document)))
|
||||
(reagent/render-component [childcaller]
|
||||
(.-body js/document)))
|
||||
```
|
||||
|
||||
assuming we have imported Cloact like this:
|
||||
assuming we have imported Reagent like this:
|
||||
|
||||
```clj
|
||||
(ns example
|
||||
(:require [cloact.core :as cloact :refer [atom]]))
|
||||
(:require [reagent.core :as reagent :refer [atom]]))
|
||||
```
|
||||
|
||||
State is handled using Cloact's version of `atom`, like this:
|
||||
State is handled using Reagent's version of `atom`, like this:
|
||||
|
||||
```clj
|
||||
(def click-count (atom 0))
|
||||
|
|
@ -82,7 +82,7 @@ State is handled using Cloact's version of `atom`, like this:
|
|||
"I have been clicked " @click-count " times."])
|
||||
```
|
||||
|
||||
Any component that dereferences a `cloact.core/atom` will be automatically re-rendered.
|
||||
Any component that dereferences a `reagent.core/atom` will be automatically re-rendered.
|
||||
|
||||
If you want do some setting up when the component is first created, the component function can return a new function that will be called to do the actual rendering:
|
||||
|
||||
|
|
@ -97,7 +97,7 @@ If you want do some setting up when the component is first created, the componen
|
|||
|
||||
This way you can avoid using React's lifecycle callbacks like `getInitialState` and `componentWillMount` most of the time.
|
||||
|
||||
But you can still use them if you want to, either using `cloact.core/create-class` or by attaching meta-data to a component function:
|
||||
But you can still use them if you want to, either using `reagent.core/create-class` or by attaching meta-data to a component function:
|
||||
|
||||
```clj
|
||||
(def my-html (atom ""))
|
||||
|
|
@ -109,7 +109,7 @@ But you can still use them if you want to, either using `cloact.core/create-clas
|
|||
(with-meta plain-component
|
||||
{:component-did-mount
|
||||
(fn [this]
|
||||
(reset! my-html (.-innerHTML (cloact/dom-node this))))}))
|
||||
(reset! my-html (.-innerHTML (reagent/dom-node this))))}))
|
||||
```
|
||||
|
||||
See the examples directory for more examples.
|
||||
|
|
@ -117,7 +117,7 @@ See the examples directory for more examples.
|
|||
|
||||
## Performance
|
||||
|
||||
React is pretty darn fast, and so is Cloact. It should even be faster than plain old javascript React a lot of the time, since ClojureScript allows us to skip a lot of unnecessary rendering (through judicious use of React's `shouldComponentUpdate`).
|
||||
React is pretty darn fast, and so is Reagent. It should even be faster than plain old javascript React a lot of the time, since ClojureScript allows us to skip a lot of unnecessary rendering (through judicious use of React's `shouldComponentUpdate`).
|
||||
|
||||
The ClojureScript overhead is kept down, thanks to lots of caching.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
(ns demo
|
||||
(:require [cloact.core :as cloact :refer [atom]]
|
||||
(:require [reagent.core :as reagent :refer [atom]]
|
||||
[clojure.string :as string]
|
||||
[demoutil :as demoutil :refer-macros [get-source]]
|
||||
[cloact.debug :refer-macros [dbg println]]))
|
||||
[reagent.debug :refer-macros [dbg println]]))
|
||||
|
||||
(defn src-parts [src]
|
||||
(string/split src #"\n(?=[(])"))
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
(def nssrc
|
||||
"(ns example
|
||||
(:require [cloact.core :as cloact :refer [atom]]))
|
||||
(:require [reagent.core :as reagent :refer [atom]]))
|
||||
")
|
||||
|
||||
(defn src-for-names [names]
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
"Seconds Elapsed: " @seconds-elapsed])))
|
||||
|
||||
(defn render-simple []
|
||||
(cloact/render-component [simple-component]
|
||||
(.-body js/document)))
|
||||
(reagent/render-component [simple-component]
|
||||
(.-body js/document)))
|
||||
|
||||
(defn calc-bmi [params to-calc]
|
||||
(let [{:keys [height weight bmi]} params
|
||||
|
|
@ -146,27 +146,27 @@
|
|||
[slider {:value bmi :min 10 :max 50 :param :bmi}]]]))
|
||||
|
||||
(defn intro []
|
||||
(let [github {:href "https://github.com/holmsand/cloact"}
|
||||
(let [github {:href "https://github.com/holmsand/reagent"}
|
||||
clojurescript {:href "https://github.com/clojure/clojurescript"}
|
||||
react {:href "http://facebook.github.io/react/"}
|
||||
hiccup {:href "https://github.com/weavejester/hiccup"}]
|
||||
[:div.demo-text
|
||||
|
||||
[:h2 "Introduction to Cloact"]
|
||||
[:h2 "Introduction to Reagent"]
|
||||
|
||||
[:p [:a github "Cloact"] " provides a minimalistic interface
|
||||
[:p [:a github "Reagent"] " provides a minimalistic interface
|
||||
between " [:a clojurescript "ClojureScript"] " and " [:a
|
||||
react "React"] ". It allows you to define efficient React
|
||||
components using nothing but plain ClojureScript functions and
|
||||
data, that describe your UI using a " [:a hiccup "Hiccup"] "-like
|
||||
syntax."]
|
||||
|
||||
[:p "The goal of Cloact is to make it possible to define
|
||||
[:p "The goal of Reagent is to make it possible to define
|
||||
arbitrarily complex UIs using just a couple of basic concepts,
|
||||
and to be fast enough by default that you rarely have to care
|
||||
about performance."]
|
||||
|
||||
[:p "A very basic Cloact component may look something like this: "]
|
||||
[:p "A very basic Reagent component may look something like this: "]
|
||||
[demo-component {:comp simple-component
|
||||
:defs [:simple-component]}]
|
||||
|
||||
|
|
@ -191,9 +191,9 @@
|
|||
|
||||
(defn managing-state []
|
||||
[:div.demo-text
|
||||
[:h2 "Managing state in Cloact"]
|
||||
[:h2 "Managing state in Reagent"]
|
||||
|
||||
[:p "The easiest way to manage state in Cloact is to use Cloact’s
|
||||
[:p "The easiest way to manage state in Reagent is to use Reagent’s
|
||||
own version of " [:code "atom"] ". It works exactly like the one in
|
||||
clojure.core, except that it keeps track of every time it is
|
||||
deref’ed. Any component that uses an " [:code "atom"]" is automagically
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
[demo-component {:comp timer-component
|
||||
:defs [:timer-component]}]
|
||||
|
||||
[:p "The previous example also uses another feature of Cloact: a component
|
||||
[:p "The previous example also uses another feature of Reagent: a component
|
||||
function can return another function, that is used to do the actual
|
||||
rendering. This allows you to perform some setup of newly
|
||||
created components, without resorting to React’s lifecycle
|
||||
|
|
@ -236,9 +236,9 @@
|
|||
[:div.demo-text
|
||||
[:h2 "Essential API"]
|
||||
|
||||
[:p "Cloact supports most of React’s API, but there is really only
|
||||
[:p "Reagent supports most of React’s API, but there is really only
|
||||
one entry-point that is necessary for most applications: "
|
||||
[:code "cloact.core/render-component"] "."]
|
||||
[:code "reagent.core/render-component"] "."]
|
||||
|
||||
[:p "It takes two arguments: a component, and a DOM node. For
|
||||
example, splashing the very first example all over the page would
|
||||
|
|
@ -250,7 +250,7 @@
|
|||
[:div.demo-text
|
||||
[:h2 "Performance"]
|
||||
|
||||
[:p "React itself is very fast, and so is Cloact. In fact, Cloact
|
||||
[:p "React itself is very fast, and so is Reagent. In fact, Reagent
|
||||
will be even faster than plain React a lot of the time, thanks to
|
||||
optimizations made possible by ClojureScript."]
|
||||
|
||||
|
|
@ -271,22 +271,22 @@
|
|||
– it will be fast enough."]
|
||||
|
||||
[:p "There are a couple of situations that you might have to care
|
||||
about, though. If you give Cloact big " [:code "seq"] "s of
|
||||
about, though. If you give Reagent big " [:code "seq"] "s of
|
||||
components to render, you might have to supply all of them with a
|
||||
unique " [:code ":key"] " attribute to speed up rendering. Also note
|
||||
that anonymous functions are not, in general, equal to each other
|
||||
even if they represent the same code and closure."]
|
||||
|
||||
[:p "But again, in general you should just trust that React and
|
||||
Cloact will be fast enough. This very page is composed of a single
|
||||
Cloact component with thousands of child components (every single
|
||||
Reagent will be fast enough. This very page is composed of a single
|
||||
Reagent component with thousands of child components (every single
|
||||
parenthesis etc in the code examples is a separate component), and
|
||||
yet the page can be updated many times every second without taxing
|
||||
the browser the slightest."]
|
||||
|
||||
[:p "Incidentally, this page also uses another React trick: the
|
||||
entire page is pre-rendered using Node, and "
|
||||
[:code "cloact/render-component-to-string"] ". When it is loaded
|
||||
[:code "reagent/render-component-to-string"] ". When it is loaded
|
||||
into the browser, React automatically attaches event-handlers to
|
||||
the already present DOM tree."]])
|
||||
|
||||
|
|
@ -297,7 +297,7 @@
|
|||
[:p "Here is a slightly less contrived example: a simple BMI
|
||||
calculator."]
|
||||
|
||||
[:p "Data is kept in a single " [:code "cloact.core/atom"] ": a map
|
||||
[:p "Data is kept in a single " [:code "reagent.core/atom"] ": a map
|
||||
with height, weight and BMI as keys."]
|
||||
|
||||
[demo-component {:comp bmi-component
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
[:div.demo-text
|
||||
[:h2 "Complete demo"]
|
||||
|
||||
[:p "Cloact comes with a couple of complete examples, with
|
||||
[:p "Reagent comes with a couple of complete examples, with
|
||||
Leiningen project files and everything. Here’s one of them in
|
||||
action:"]
|
||||
|
||||
|
|
@ -320,7 +320,7 @@
|
|||
[:h2 "Todomvc"]
|
||||
|
||||
[:p "The obligatory todo list looks roughly like this in
|
||||
Cloact (cheating a little bit by skipping routing and
|
||||
Reagent (cheating a little bit by skipping routing and
|
||||
persistence):"]
|
||||
|
||||
[demo-component {:comp todomvc/todo-app
|
||||
|
|
@ -328,15 +328,15 @@
|
|||
|
||||
(defn github-badge []
|
||||
[:a.github-badge
|
||||
{:href "https://github.com/holmsand/cloact"}
|
||||
{:href "https://github.com/holmsand/reagent"}
|
||||
[:img {:style {:position "absolute" :top 0 :left 0 :border 0}
|
||||
:src "https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"
|
||||
:alt "Fork me on GitHub"}]])
|
||||
|
||||
(defn demo []
|
||||
[:div
|
||||
[:div.cloact-demo
|
||||
[:h1 "Cloact: Minimalistic React for ClojureScript"]
|
||||
[:div.reagent-demo
|
||||
[:h1 "Reagent: Minimalistic React for ClojureScript"]
|
||||
[intro]
|
||||
[managing-state]
|
||||
[essential-api]
|
||||
|
|
@ -347,7 +347,7 @@
|
|||
[github-badge]])
|
||||
|
||||
(defn ^:export mountdemo []
|
||||
(cloact/render-component [demo] (.-body js/document)))
|
||||
(reagent/render-component [demo] (.-body js/document)))
|
||||
|
||||
(defn ^:export genpage []
|
||||
(cloact/render-component-to-string [demo]))
|
||||
(reagent/render-component-to-string [demo]))
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>cloact simple example</title>
|
||||
<title>reagent simple example</title>
|
||||
<link rel="stylesheet" href="example.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
|
||||
|
||||
(defproject simple-cloact "0.1.0"
|
||||
(defproject simple-reagent "0.2.0-SNAPSHOT"
|
||||
:dependencies [[org.clojure/clojure "1.5.1"]
|
||||
[org.clojure/clojurescript "0.0-2138"]
|
||||
[cloact "0.1.0"]]
|
||||
[reagent "0.2.0-SNAPSHOT"]]
|
||||
:plugins [[lein-cljsbuild "1.0.1"]]
|
||||
:hooks [leiningen.cljsbuild]
|
||||
:profiles {:prod {:cljsbuild
|
||||
{:builds
|
||||
{:client {:compiler
|
||||
{:optimizations :advanced
|
||||
:preamble ^:replace ["cloact/react.min.js"]
|
||||
:preamble ^:replace ["reagent/react.min.js"]
|
||||
:pretty-print false}}}}}
|
||||
:srcmap {:cljsbuild
|
||||
{:builds
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{:builds
|
||||
{:client {:source-paths ["src"]
|
||||
:compiler
|
||||
{:preamble ["cloact/react.js"]
|
||||
{:preamble ["reagent/react.js"]
|
||||
:output-dir "target/client"
|
||||
:output-to "target/client.js"
|
||||
:pretty-print true}}}})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
(ns simpleexample
|
||||
(:require [cloact.core :as cloact :refer [atom]]))
|
||||
(:require [reagent.core :as reagent :refer [atom]]))
|
||||
|
||||
(def timer (atom (js/Date.)))
|
||||
(def time-color (atom "#f34"))
|
||||
|
|
@ -33,5 +33,5 @@
|
|||
[color-input]])
|
||||
|
||||
(defn ^:export run []
|
||||
(cloact/render-component [simple-example]
|
||||
(.-body js/document)))
|
||||
(reagent/render-component [simple-example]
|
||||
(.-body js/document)))
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
|
||||
|
||||
(defproject todomvc-cloact "0.1.0"
|
||||
(defproject todomvc-reagent "0.2.0-SNAPSHOT"
|
||||
:dependencies [[org.clojure/clojure "1.5.1"]
|
||||
[org.clojure/clojurescript "0.0-2138"]
|
||||
[cloact "0.1.0"]]
|
||||
[reagent "0.2.0-SNAPSHOT"]]
|
||||
:plugins [[lein-cljsbuild "1.0.1"]]
|
||||
:hooks [leiningen.cljsbuild]
|
||||
:profiles {:prod {:cljsbuild
|
||||
{:builds
|
||||
{:client {:compiler
|
||||
{:optimizations :advanced
|
||||
:preamble ^:replace ["cloact/react.min.js"]
|
||||
:preamble ^:replace ["reagent/react.min.js"]
|
||||
:pretty-print false}}}}}
|
||||
:srcmap {:cljsbuild
|
||||
{:builds
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{:builds
|
||||
{:client {:source-paths ["src"]
|
||||
:compiler
|
||||
{:preamble ["cloact/react.js"]
|
||||
{:preamble ["reagent/react.js"]
|
||||
:output-dir "target/client"
|
||||
:output-to "target/client.js"
|
||||
:pretty-print true}}}})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
(ns todomvc
|
||||
(:require [cloact.core :as cloact :refer [atom]]))
|
||||
(:require [reagent.core :as reagent :refer [atom]]))
|
||||
|
||||
(def todos (atom (sorted-map)))
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
nil)})])))
|
||||
|
||||
(def todo-edit (with-meta todo-input
|
||||
{:component-did-mount #(.focus (cloact/dom-node %))}))
|
||||
{:component-did-mount #(.focus (reagent/dom-node %))}))
|
||||
|
||||
(defn todo-stats [{:keys [filt active done]}]
|
||||
(let [props-for (fn [name]
|
||||
|
|
@ -97,4 +97,4 @@
|
|||
[:p "Double-click to edit a todo"]]]))))
|
||||
|
||||
(defn ^:export run []
|
||||
(cloact/render-component [todo-app] (.-body js/document)))
|
||||
(reagent/render-component [todo-app] (.-body js/document)))
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>todomvc with cloact</title>
|
||||
<title>todomvc with reagent</title>
|
||||
<link rel="stylesheet" href="todos.css">
|
||||
<link rel="stylesheet" href="todosanim.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
|
||||
(defproject cloact "0.1.0"
|
||||
:url "http://github.com/holmsand/cloact"
|
||||
(defproject reagent "0.2.0-SNAPSHOT"
|
||||
:url "http://github.com/holmsand/reagent"
|
||||
:license {:name "MIT"}
|
||||
:description "A simple ClojureScript interface to React"
|
||||
:dependencies [[org.clojure/clojure "1.5.1"]
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cloact-demo {
|
||||
.reagent-demo {
|
||||
background-color: #fff;
|
||||
margin: 40px -100px;
|
||||
padding: 40px 60px;
|
||||
}
|
||||
|
||||
.cloact-demo > h1 {
|
||||
.reagent-demo > h1 {
|
||||
font-size: 36px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
width: auto;
|
||||
margin: 0 0;
|
||||
}
|
||||
.cloact-demo {
|
||||
.reagent-demo {
|
||||
margin: 0 0;
|
||||
padding: 27px 27px;
|
||||
width: 100%;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
margin-right: -180px;
|
||||
}
|
||||
|
||||
.cloact-demo h2 {
|
||||
.reagent-demo h2 {
|
||||
margin-top: 48px;
|
||||
color: #555;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Testing cloact</title>
|
||||
<title>Testing reagent</title>
|
||||
<link rel="stylesheet" href="../examples/todomvc/todos.css">
|
||||
<link rel="stylesheet" href="../examples/todomvc/todosanim.css">
|
||||
<link rel="stylesheet" href="../examples/simple/example.css">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
|
||||
(ns cloact.core
|
||||
(ns reagent.core
|
||||
(:refer-clojure :exclude [partial atom])
|
||||
(:require-macros [cloact.debug :refer [dbg prn]])
|
||||
(:require [cloact.impl.template :as tmpl]
|
||||
[cloact.impl.component :as comp]
|
||||
[cloact.impl.util :as util]
|
||||
[cloact.ratom :as ratom]))
|
||||
(:require-macros [reagent.debug :refer [dbg prn]])
|
||||
(:require [reagent.impl.template :as tmpl]
|
||||
[reagent.impl.component :as comp]
|
||||
[reagent.impl.util :as util]
|
||||
[reagent.ratom :as ratom]))
|
||||
|
||||
(def React tmpl/React)
|
||||
|
||||
(def is-client tmpl/isClient)
|
||||
|
||||
(defn render-component
|
||||
"Render a Cloact component into the DOM. The first argument may be either a
|
||||
vector (using Cloact's Hiccup syntax), or a React component. The second argument
|
||||
"Render a Reagent component into the DOM. The first argument may be either a
|
||||
vector (using Reagent's Hiccup syntax), or a React component. The second argument
|
||||
should be a DOM node.
|
||||
|
||||
Optionally takes a callback that is called when the component is in place.
|
||||
|
|
@ -110,7 +110,7 @@ specially, like React's transferPropsTo."
|
|||
|
||||
(defn atom
|
||||
"Like clojure.core/atom, except that it keeps track of derefs.
|
||||
Cloact components that derefs one of these are automatically
|
||||
Reagent components that derefs one of these are automatically
|
||||
re-rendered."
|
||||
([x] (ratom/atom x))
|
||||
([x & rest] (apply ratom/atom x rest)))
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
(ns cloact.debug
|
||||
(ns reagent.debug
|
||||
(:refer-clojure :exclude [prn println]))
|
||||
|
||||
(defmacro log
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
(ns cloact.debug)
|
||||
(ns reagent.debug)
|
||||
|
||||
;; Empty file, to allow require with :refer-macros
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
|
||||
(ns cloact.impl.component
|
||||
(:require [cloact.impl.template :as tmpl
|
||||
(ns reagent.impl.component
|
||||
(:require [reagent.impl.template :as tmpl
|
||||
:refer [cljs-props cljs-children React]]
|
||||
[cloact.impl.util :as util]
|
||||
[cloact.ratom :as ratom]
|
||||
[cloact.debug :refer-macros [dbg prn]]))
|
||||
[reagent.impl.util :as util]
|
||||
[reagent.ratom :as ratom]
|
||||
[reagent.debug :refer-macros [dbg prn]]))
|
||||
|
||||
|
||||
(def cljs-state "cljsState")
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
(when-let [r (:render fun-map)]
|
||||
(or (.-displayName r)
|
||||
(.-name r))))
|
||||
name1 (if (empty? name) (str (gensym "cloact")) name)]
|
||||
name1 (if (empty? name) (str (gensym "reagent")) name)]
|
||||
(into {} (for [[k v] (assoc fun-map :displayName name1)]
|
||||
[k (get-wrapper k v name1)]))))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
(ns cloact.impl.reactimport
|
||||
(:require-macros [cloact.impl.util :refer [import-js expose-vars]]))
|
||||
(ns reagent.impl.reactimport
|
||||
(:require-macros [reagent.impl.util :refer [import-js expose-vars]]))
|
||||
|
||||
;; (import-js "cloact/impl/react.min.js")
|
||||
;; (import-js "reagent/impl/react.min.js")
|
||||
|
||||
(def React js/React)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
(ns cloact.impl.template
|
||||
(ns reagent.impl.template
|
||||
(:require [clojure.string :as string]
|
||||
[cloact.impl.reactimport :as reactimport]
|
||||
[cloact.impl.util :as util]
|
||||
[cloact.debug :refer-macros [dbg prn println]]))
|
||||
[reagent.impl.reactimport :as reactimport]
|
||||
[reagent.impl.util :as util]
|
||||
[reagent.debug :refer-macros [dbg prn println]]))
|
||||
|
||||
(def React reactimport/React)
|
||||
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
(defn fn-to-class [f]
|
||||
(let [spec (meta f)
|
||||
withrender (merge spec {:render f})
|
||||
res (cloact.core/create-class withrender)
|
||||
res (reagent.core/create-class withrender)
|
||||
wrapf (.-cljsReactClass res)]
|
||||
(set! (.-cljsReactClass f) wrapf)
|
||||
wrapf))
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(ns cloact.impl.util
|
||||
(ns reagent.impl.util
|
||||
(:require [clojure.java.io :as io]
|
||||
[clojure.string :as string]))
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(ns cloact.impl.util
|
||||
(:require [cloact.debug :refer-macros [dbg]]))
|
||||
(ns reagent.impl.util
|
||||
(:require [reagent.debug :refer-macros [dbg]]))
|
||||
|
||||
(deftype partial-ifn [f args ^:mutable p]
|
||||
IFn
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
(reduce-kv (fn [res k v]
|
||||
(let [yv (get y k -not-found)]
|
||||
(if (or (keyword-identical? v yv)
|
||||
;; hack to allow cloact.core/partial and :style
|
||||
;; hack to allow reagent.core/partial and :style
|
||||
;; maps to be compared with =
|
||||
(and (or
|
||||
(keyword-identical? k :style)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
(ns cloact.ratom)
|
||||
(ns reagent.ratom)
|
||||
|
||||
(defmacro reaction [& body]
|
||||
`(cloact.ratom/make-reaction
|
||||
`(reagent.ratom/make-reaction
|
||||
(fn [] ~@body)))
|
||||
|
||||
(defmacro run!
|
||||
"Runs body immediately, and runs again whenever atoms deferenced in the body change. Body should side effect."
|
||||
[& body]
|
||||
`(let [co# (cloact.ratom/make-reaction (fn [] ~@body)
|
||||
`(let [co# (reagent.ratom/make-reaction (fn [] ~@body)
|
||||
:auto-run true)]
|
||||
(deref co#)
|
||||
co#))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(ns cloact.ratom
|
||||
(ns reagent.ratom
|
||||
(:refer-clojure :exclude [atom])
|
||||
(:require-macros [cloact.debug :refer (dbg)]))
|
||||
(:require-macros [reagent.debug :refer (dbg)]))
|
||||
|
||||
(declare ^:dynamic *ratom-context*)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
(ns runtests
|
||||
(:require-macros [cemerick.cljs.test
|
||||
:refer (is deftest with-test run-tests testing)]
|
||||
[cloact.debug :refer [dbg println]])
|
||||
[reagent.debug :refer [dbg println]])
|
||||
(:require [cemerick.cljs.test :as t]
|
||||
[cloact.core :as cloact :refer [atom]]
|
||||
[reagent.core :as reagent :refer [atom]]
|
||||
[demo :as demo]))
|
||||
|
||||
(defn ^:export console-print [x]
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
(println "-----------------------------------------")
|
||||
(reset! test-results (t/run-all-tests))
|
||||
(println "-----------------------------------------"))
|
||||
(if cloact/is-client 1000 0))
|
||||
(if reagent/is-client 1000 0))
|
||||
|
||||
(defn test-output []
|
||||
(let [res @test-results]
|
||||
|
|
@ -47,4 +47,4 @@
|
|||
[demo/demo]])
|
||||
|
||||
(defn ^:export mounttests []
|
||||
(cloact/render-component [test-demo] (.-body js/document)))
|
||||
(reagent/render-component [test-demo] (.-body js/document)))
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
(ns testcloact
|
||||
(ns testreagent
|
||||
(:require-macros [cemerick.cljs.test
|
||||
:refer (is deftest with-test run-tests testing)]
|
||||
[cloact.ratom :refer [reaction]]
|
||||
[cloact.debug :refer [dbg println log]])
|
||||
[reagent.ratom :refer [reaction]]
|
||||
[reagent.debug :refer [dbg println log]])
|
||||
(:require [cemerick.cljs.test :as t]
|
||||
[cloact.core :as cloact :refer [atom]]
|
||||
[cloact.ratom :as rv]))
|
||||
[reagent.core :as reagent :refer [atom]]
|
||||
[reagent.ratom :as rv]))
|
||||
|
||||
(defn running [] (rv/running))
|
||||
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
|
||||
(defn with-mounted-component [comp f]
|
||||
(when isClient
|
||||
(let [div (add-test-div "_testcloact")]
|
||||
(let [comp (cloact/render-component comp div #(f comp div))]
|
||||
(cloact/unmount-component-at-node div)))))
|
||||
(let [div (add-test-div "_testreagent")]
|
||||
(let [comp (reagent/render-component comp div #(f comp div))]
|
||||
(reagent/unmount-component-at-node div)))))
|
||||
|
||||
(defn found-in [re div]
|
||||
(let [res (.-innerHTML div)]
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
(deftest test-simple-callback
|
||||
(when isClient
|
||||
(let [ran (atom 0)
|
||||
comp (cloact/create-class
|
||||
comp (reagent/create-class
|
||||
{:component-did-mount #(swap! ran inc)
|
||||
:render (fn [props children this]
|
||||
(assert (map? props))
|
||||
|
|
@ -58,35 +58,35 @@
|
|||
(swap! ran inc)
|
||||
(is (found-in #"hi you" div))
|
||||
|
||||
(cloact/set-props C {:foo "there"})
|
||||
(reagent/set-props C {:foo "there"})
|
||||
(is (found-in #"hi there" div))
|
||||
|
||||
(let [runs @ran]
|
||||
(cloact/set-props C {:foo "there"})
|
||||
(reagent/set-props C {:foo "there"})
|
||||
(is (found-in #"hi there" div))
|
||||
(is (= runs @ran)))
|
||||
|
||||
(cloact/replace-props C {:foobar "not used"})
|
||||
(reagent/replace-props C {:foobar "not used"})
|
||||
(is (found-in #"hi ." div))))
|
||||
(is (= 5 @ran)))))
|
||||
|
||||
(deftest test-state-change
|
||||
(when isClient
|
||||
(let [ran (atom 0)
|
||||
comp (cloact/create-class
|
||||
comp (reagent/create-class
|
||||
{:get-initial-state (fn [])
|
||||
:render (fn [props children this]
|
||||
(swap! ran inc)
|
||||
[:div (str "hi " (:foo (cloact/state this)))])})]
|
||||
[:div (str "hi " (:foo (reagent/state this)))])})]
|
||||
(with-mounted-component (comp)
|
||||
(fn [C div]
|
||||
(swap! ran inc)
|
||||
(is (found-in #"hi " div))
|
||||
|
||||
(cloact/set-state C {:foo "there"})
|
||||
(reagent/set-state C {:foo "there"})
|
||||
(is (found-in #"hi there" div))
|
||||
|
||||
(cloact/set-state C {:foo "you"})
|
||||
(reagent/set-state C {:foo "you"})
|
||||
(is (found-in #"hi you" div))))
|
||||
(is (= 4 @ran)))))
|
||||
|
||||
|
|
@ -122,10 +122,10 @@
|
|||
(let [ran (atom 0)
|
||||
really-simple (fn [props children this]
|
||||
(swap! ran inc)
|
||||
(cloact/set-state this {:foo "foobar"})
|
||||
(reagent/set-state this {:foo "foobar"})
|
||||
(fn []
|
||||
[:div (str "this is "
|
||||
(:foo (cloact/state this)))]))]
|
||||
(:foo (reagent/state this)))]))]
|
||||
(with-mounted-component [really-simple nil nil]
|
||||
(fn [c div]
|
||||
(swap! ran inc)
|
||||
|
|
@ -136,5 +136,5 @@
|
|||
(let [comp (fn [props]
|
||||
[:div (str "i am " (:foo props))])]
|
||||
(is (re-find #"i am foobar"
|
||||
(cloact/render-component-to-string
|
||||
[comp {:foo "foobar"}])))))
|
||||
(reagent/render-component-to-string
|
||||
[comp {:foo "foobar"}])))))
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
(ns testratom
|
||||
(:require-macros [cemerick.cljs.test
|
||||
:refer (is deftest with-test run-tests testing)]
|
||||
[cloact.ratom :refer [run! reaction]]
|
||||
[cloact.debug :refer [dbg]])
|
||||
[reagent.ratom :refer [run! reaction]]
|
||||
[reagent.debug :refer [dbg]])
|
||||
(:require [cemerick.cljs.test :as t]
|
||||
[cloact.ratom :as rv]))
|
||||
[reagent.ratom :as rv]))
|
||||
|
||||
(defn running [] (rv/running))
|
||||
(defn dispose [v] (rv/dispose! v))
|
||||
|
|
|
|||
Loading…
Reference in New Issue