Fork me on GitHub

Does anyone try to integrate react-diagrams with cljs ?


Usually it's rather hard to find answers for such questions. But if you have a specific problem with integrating the library into your app, it should be easy to help. Also, Reagent repo has multiple examples of integrating other libraries - at the end of the day, it all works in a similar way.


Also, please avoid cross-posting to other channels. I see that you've also asked it in #reagent - that should've been the only place since it's not really relevant to anything else.

👌 1

import ReactDOM from 'react-dom';
import * as React from 'react';
import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
import { CanvasWidget } from '@projectstorm/react-canvas-core';

  var engine = createEngine();
  var model = new DiagramModel();

  var node1 = new DefaultNodeModel('Node 1','rgb(0,192,255)');
  node1.setPosition(100, 100);
  let port1 = node1.addOutPort('Out');

  var node2 = new DefaultNodeModel('Node 2', 'rgb(192,255,0)');
  let port2 = node2.addInPort('In');
  node2.setPosition(400, 100);
  model.addAll(node1, node2);

    <CanvasWidget engine={engine} />,


(ns ttt3.core
  (:require ["react-dom" :as react-dom]
            ["react" :as react]
            ["@projectstorm/react-diagrams$default" :as createEngine]
            ["@projectstorm/react-diagrams" :as rd :refer [DefaultLinkModel,
            ["@projectstorm/react-canvas-core" :refer [CanvasWidget]]))

(defn doit []
  (let [engine (createEngine)
        model  (DiagramModel.)
        node1  (doto (DefaultNodeModel. "Node 1" "rgb(0,192,255)") (.setPosition 100 100))
        port1  (.addOutPort node1 "Out")
        node2  (doto (DefaultNodeModel. "Node 2" "rgb(0,192,255)") (.setPosition 400 100))
        port2  (.addOutPort node2 "In")]
    (.addAll model node1 node2)
    (.setModel engine model)
        #js{:engine engine})
      (js/document.getElementById "app"))))

(defn ^:export init []


In cljs version I get an error: `Uncaught TypeError: a.default is not a constructor at l.componentDidMount (index.umd.js:16)`


Check that the things you're importing are the things you expect. Especially those three models, because those are the ones you're using as a constructor. Also, if you use :as rd you don't have to then use :refer - just use rd/DiagramModel for example.


Given a set of TypeScript interfaces that I need to implement to have my plugin work in their system: How can implement them in ClojureScript? This plugin is going to be situated heavily in the ClojureScript ecosystem (Pathom queries mostly). Also, not-a-JavaScript-dev simple_smile


Pretty sure you just need to have the right methods and members on the object that you return as an instance of the plugin. If you're using shadow-cljs, the easiest way to do it would be via shadow.cljs.modern/defclass.


I am following the example here: But seeing errors,

TypeError: undefined is not an object (evaluating 'cljs.core.async.interop.p__GT_c')
The code is
(ns simple.example
   [cljs.core.async :refer [go]]
   [cljs.core.async.interop :refer-macros [<p!]]))

  (println (<p! (js/Promise.resolve 42))))


What version of CLJS?


If it's an old one - consider upgrading. Also, note that :refer-macros is not needed in this case, you can just use regular :refer or :as in this case due to how cljs.core.async namespaces are structured.


pretty recent version, 2.18.0


That looks like a version of shadow-cljs - that's separate from the version of clojurescript. When using shadow-cljs, make sure that clojurescript comes from its classpath - don't declare a dependency on clojurescript yourself, and make sure that no other dependency does that.


Same with cljs.async - as listed here: Also note that you can use clojure.core.async instead of cljs.core.async - makes the code more cross-platform. The required code will be the same - CLJS simply has an internal alias for clojure.core.async.


Thanks for the info.


removed the explicit dependency on clojure.core, async and alike


.Still got the error.


Can you create and share a minimal reproducible example? I can't reproduce it locally.

Serafeim Papastefanos16:04:50

I took a peek at the instructions for clojurescript here

Serafeim Papastefanos16:04:17

Is there a reason that they aren't unified for window Linux and osx?

Serafeim Papastefanos16:04:06

Why do Windows users need to download the cljs.jar file? Won't something like deps.exe works with the deps.edn?


the instructions are from a time where clj didn't exist on windows. guess no one has updated them yet.

👀 1
😞 1

Out of interest, just tested on Windows - seems to be working just fine with clj and without a standalone JAR.

Serafeim Papastefanos16:04:20

Yes it also works with deps.exe

Serafeim Papastefanos16:04:24

just tested it also 😛


But also clj on Windows is still in the alpha state, so that might be a reason for why it's not mentioned.


What do you mean by deps.exe?

Serafeim Papastefanos16:04:21

it's a standalone .exe file you download instead of the powershell mess

🙌 1

Ah, I'm on Linux so I don't really care. :D The default clj script works just fine for me.

Serafeim Papastefanos16:04:12

well i use windows as a daily driver but i hate powershell with all my heart. cmd.exe until hell freezes over

wow 1

But good to know that it exists anyway.

👍 1

I wanted to use the static instance, but requiring result in the following error: The required namespace "" is not available, it was required by ...


Requiring [ :as gcookies] removes this error. However, when I put gcookies in the REPL, it says Use of undeclared Var .../gcookies


gcookies/get works as expected though...

p-himik16:04:56 is deprecated. Instead, use:

(ns x
  (:require [ :as Cookies]))

(def cookies (Cookies/getInstance))

👍 1

Does ClojureScript 1.11 have Clojure 1.11 features like :as-alias, parse-long, and update-vals?