Add build for query editor as a stand alone app

.gitignore

@@ -4,3 +4,4 @@
 .idea
 node_modules
 workspaces/assets/js
+standalone/assets/js

docs/standalone.adoc

@@ -0,0 +1,66 @@
+= Stand alone app
+
+It is possible to mount the query editor as a stand alone application in any dom node.
+In this case, the query editor expects to connect to a web server responding to pathom queries.
+Check the link:https://github.com/wilkerlucio/pathom-viz/blob/master/src/core/com/wsscode/pathom/viz/standalone.cljs[source code]
+to see how is done.
+
+For convenience, a link:http://shadow-cljs.org/[Shadow CLJS] task, called `standalone`, is provided:
+
+[source,bash]
+----
+# Development
+shadow-cljs watch standalone
+
+# Production
+shadow-cljs release standalone
+----
+
+
+== Connect to Pathom server
+
+By default, the app assumes that the pathom server will listen for requests on
+the same URL that is serving the app itself. For example, if you are serving
+the app from `http://localhost:8890/pathom` (`GET` method), the app will do
+`POST` requests with the pathom queries to the same URL:
+`http://localhost:8890/pathom`
+
+There is one exception to this rule, if the app is served from the root URL
+(e.g.: `http://localhost:8087/`), the app will assume that the pathom server is
+on `http://localhost:8087/pathom`.
+
+You can modify the `default-url` var, if you want to use a different path:
+
+[source,clojure]
+----
+(def default-url "/pathom")
+----
+
+If you want to test the standalone app, you will need a Pathom server. In case you don't have one, you can use the
+link:https://github.com/jlesquembre/pathom-pedestal[pathom-pedestal project].
+It offers a test application, clone the project and lunch it:
+
+[source,bash]
+----
+clj -A:dev
+----
+
+== Development
+
+When working on pathom-viz itself, usually your pathom server will be hosted by
+other application, listening on a different port (or domain). Luckily, Shadow
+CLJS has an option,
+link:https://shadow-cljs.github.io/docs/UsersGuide.html#dev-http-proxy[proxy-url],
+to help us:
+
+[source,clojure]
+----
+:standalone {:target       :browser
+             :output-dir   "standalone/assets/js"
+             :asset-path   "/js"
+             :modules    {:main {:init-fn com.wsscode.pathom.viz.standalone/init}}
+             :devtools   {:preloads  [devtools.preload fulcro.inspect.preload]
+                          :http-root "standalone/assets"
+                          :http-port 8087
+                          :proxy-url "http://localhost:8890"}}}}
+----

shadow-cljs.edn

@@ -7,4 +7,13 @@
                        :compiler-options {:external-config {:ghostwheel {:ghostwheel.core/outstrument true}}}
                        :devtools         {:preloads  [devtools.preload fulcro.inspect.preload]
                                           :http-root "workspaces/assets"
-                                          :http-port 8086}}}}
+                                          :http-port 8086}}
+          :standalone {:target       :browser
+                       :output-dir   "standalone/assets/js"
+                       :asset-path   "/js"
+                       :modules    {:main {:init-fn com.wsscode.pathom.viz.standalone/init}}
+                       :compiler-options {:optimizations :simple}
+                       :devtools   {:preloads  [devtools.preload fulcro.inspect.preload]
+                                    :http-root "standalone/assets"
+                                    :http-port 8087
+                                    :proxy-url "http://localhost:8890"}}}}

src/core/com/wsscode/pathom/viz/standalone.cljs

@@ -0,0 +1,58 @@
+(ns com.wsscode.pathom.viz.standalone
+  (:require [cognitect.transit :as transit]
+            [com.wsscode.pathom.diplomat.http :as p.http]
+            [com.wsscode.pathom.diplomat.http.fetch :as p.http.fetch]
+            [com.wsscode.pathom.fulcro.network :as p.network]
+            [com.wsscode.pathom.viz.query-editor :as pv.query-editor]
+            [com.wsscode.common.async-cljs :refer [<? go-catch]]
+            [fulcro.client :as fc]
+            [fulcro.client.network :as net]
+            [fulcro.client.data-fetch :as df]
+            [fulcro.client.primitives :as fp]
+            [fulcro-css.css :as css]))
+
+
+(defn transit-read [x]
+  (-> (transit/read (transit/reader :json) x)))
+
+(defn transit-write [x]
+  (-> (transit/write (transit/writer :json) x)))
+
+(defn http-request-parser [url]
+  (fn [env tx]
+    (go-catch
+      (let [{::p.http/keys [body]}
+            (<? (p.http/request {::p.http/driver       p.http.fetch/request-async
+                                 ::p.http/url          url
+                                 ::p.http/content-type ::p.http/transit+json
+                                 ::p.http/method       ::p.http/post
+                                 ::p.http/headers      {}
+                                 ::p.http/form-params  (transit-write tx)}))]
+        (transit-read body)))))
+
+
+(fp/defsc Root
+  [this {:keys [ui/root]}]
+  {:query [{:ui/root (fp/get-query pv.query-editor/QueryEditor)}]
+   :initial-state (fn [params] {:ui/root (fp/get-initial-state  pv.query-editor/QueryEditor {})})}
+  (pv.query-editor/query-editor root))
+
+(def root (fp/factory Root))
+
+(css/upsert-css "pv-queryeditor-style" pv.query-editor/QueryEditor)
+(css/upsert-css "rootui-style" Root)
+
+(def default-url "/pathom")
+
+(defn ^:export init []
+  (let [app (fc/make-fulcro-client
+              {:client-did-mount
+               (fn [app]
+                 (pv.query-editor/load-indexes app))
+               :networking
+               (let [url js/document.location.pathname
+                     url (if (= url "/") default-url url)]
+                {pv.query-editor/remote-key
+                 (p.network/pathom-remote
+                   (pv.query-editor/client-card-parser (http-request-parser url)))})})]
+    (fc/mount app Root (js/document.getElementById "app"))))

standalone/assets/css/app.css

@@ -0,0 +1,18 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  padding: 8px;
+  height: 100vh;
+  display: flex;
+}

standalone/assets/css/codemirror.css

@@ -0,0 +1 @@
+../../../workspaces/assets/css/codemirror.css

standalone/assets/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="css/codemirror.css" rel="stylesheet">
+    <link href="css/app.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- you might need to change the js path depending on your configuration -->
+    <script src="js/main.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
+  </body>
+</html>

workspaces/assets/css/app.css

@@ -0,0 +1,18 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 0;
+}
+
+#app {
+  padding: 8px;
+  height: 100vh;
+  display: flex;
+}