Added basic capacities. Improved QR code display.

src/pluto/js.cljs

@@ -9,5 +9,16 @@
 (defn ^:export from-clj [o]
   (clj->js o))
 
-(defn ^:export parse [opts m]
-  (reader/parse (js->clj opts) (:data m)))
+(def ctx
+  {:capacities {:components {'text :text 'view :div 'status/token-selector :div 'status/asset-selector :div}
+                :hooks {:commands {:properties {:scope         #{:personal-chats :public-chats}
+                                                :description   :string
+                                                :short-preview :view
+                                                :preview       :view
+                                                :parameters    [{:id           :keyword
+                                                                  :type         {:one-of #{:text :phone :password :number}}
+                                                                  :placeholder  :string
+                                                                  :suggestions? :component}]}}}}})
+
+(defn ^:export parse [m]
+  (reader/parse ctx (:data m)))

website/pages/try.html

@@ -23,9 +23,9 @@
 
     ipfs.once("ready", async () => {
       const content = await load();
-      cm.setValue(content);
-      cm.markText({line: 10, ch:0}, {line: 12, ch: 20}, {classname: "test2"});
-      cm.addLineClass(4, "", "test")
+      codeMirror.setValue(content);
+      codeMirror.markText({line: 10, ch:0}, {line: 12, ch: 20}, {classname: "test2"});
+      codeMirror.addLineClass(4, "", "test")
     })
 
     function extensionLink(hash) {
@@ -37,34 +37,38 @@
     }
 
     async function publish() {
-      const content = cm.getValue();
+      const content = codeMirror.getValue();
       const filesAdded = await uploadIPFS(ipfs, content);
-      qr(document.getElementById('qr'), extensionLink(filesAdded[0].hash));
+      displayQR(extensionLink(filesAdded[0].hash));
     }
 
     function clearErrors() {
-      const el = document.getElementById("errors");
-      el.innerHTML = '';
-      el.className = "";
+      const elErrors = document.getElementById("errors");
+      elErrors.innerHTML = '';
+      elErrors.className = "";
     }
 
     function displayErrors(errors) {
-      const el = document.getElementById("errors");
+      const elErrors = document.getElementById("errors");
       if (errors == null) {
-        el.innerHTML = '<div>No errors</div>';
-        el.classList.add("ok");
+        elErrors.innerHTML = '<div>No errors</div>';
+        elErrors.classList.add("ok");
       } else {
-        el.classList.add("errors");
+        elErrors.classList.add("errors");
 
         let names = errors.map( (error, i) => {
           return [error.type, error.value]
         })
         var s = '<div>Errors</div><ul>';
         names.forEach(function(element) {
-          s = s.concat("<li>" + element[0] + ":" + element[1] + "</li>")
+          s = s.concat("<li>" + element[0]);
+          if (element[1] != null) {
+            s = s.concat(":" + element[1]);
+          }
+          s = s.concat("</li>");
         });
         s = s.concat("</ul>")
-        el.innerHTML = s;
+        elErrors.innerHTML = s;
       }
     }
 
@@ -73,9 +77,11 @@
                             content: ipfs.types.Buffer.from(s, 'utf8')})
     }
 
-    function qr(el, s) {
+    function displayQR(s) {
+      const qel = document.getElementById("qr-wrapper");
+      qel.innerHTML = '<canvas id="qr"></canvas><a href="' + s + '">Universal link</a>';
       new QRious({
-            element: el,
+            element: document.getElementById('qr'),
             value: s,
             size: 250
       });
@@ -90,25 +96,23 @@
       <p>A playground to experiment with extensions and easily publish them on IPFS. <br /> Go ahead, modify the default extension on the left side!</p>
       <p>Find more details about building your own extension in this <a href="https://docs.status.im/docs/extensions_tutorial_chat_command.html">tutorial</a></p>
       <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick="publish()">Publish</button>
-      <canvas id="qr"></canvas>
+      <div id="qr-wrapper"></div>
     </aside>
   </div>
   <script>
-    const capacities = `
-
-    `;
-    var cm = CodeMirror(document.getElementById("content"));
-    cm.on("change", function(c, change) {
+    const codeMirror = CodeMirror(document.getElementById("content"));
+    codeMirror.on("change", function(c, change) {
       clearErrors();
-      const read = pluto.reader.read(cm.getValue());
+      const read = pluto.reader.read(codeMirror.getValue());
       const readJS = pluto.js.from_clj(read);
       displayErrors(readJS.errors);
       if (readJS.errors == null) {
-        const parsed = pluto.js.from_clj(pluto.js.parse({}, read));
-        displayErrors(parsed.errors);
+        const parsed = pluto.js.parse(read);
+        const parsedJS = pluto.js.from_clj(parsed);
+        displayErrors(parsedJS.errors);
       }
     });
-    parinferCodeMirror.init(cm);
+    parinferCodeMirror.init(codeMirror);
   </script>
 </body>
 </html>

website/static/css/custom.css

@@ -144,4 +144,10 @@ main {
 
 #qr {
   z-index: -1;
+}
+
+#qr-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }