Fork me on GitHub
#clojurescript
<
2022-04-15
>
ilevd09:04:59

Does anyone try to integrate react-diagrams with cljs ?

p-himik09:04:57

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.

p-himik09:04:34

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
ilevd11:04:05

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);
  engine.setModel(model);

  ReactDOM.render(
    <CanvasWidget engine={engine} />,
    document.getElementById('root')
  );

ilevd11:04:48

(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,
                                                           DefaultNodeModel,
                                                           DiagramModel]]
            ["@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)
    (react-dom/render
      (react/createElement
        CanvasWidget
        #js{:engine engine})
      (js/document.getElementById "app"))))

(defn ^:export init []
  (doit))

ilevd11:04:41

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

p-himik11:04:38

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.

danieroux14:04:12

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

p-himik14:04:58

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.

pinkfrog15:04:21

I am following the example here: https://clojurescript.org/guides/promise-interop#using-promises-with-core-async. But seeing errors,

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

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

p-himik15:04:49

What version of CLJS?

p-himik15:04:30

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.

pinkfrog15:04:59

pretty recent version, 2.18.0

p-himik16:04:52

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.

p-himik16:04:45

Same with cljs.async - as listed here: https://shadow-cljs.github.io/docs/UsersGuide.html#failed-to-load 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.

pinkfrog03:04:14

Thanks for the info.

pinkfrog03:04:31

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

pinkfrog03:04:34

.Still got the error.

p-himik04:04:27

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 https://clojurescript.org/guides/quick-start

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?

thheller16:04:46

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

👀 1
😞 1
p-himik16:04:57

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 😛

p-himik16:04:29

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

p-himik16:04:44

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
p-himik16:04:44

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
p-himik16:04:19

But good to know that it exists anyway.

👍 1
zhuxun216:04:56

I wanted to use the static instance https://google.github.io/closure-library/api/goog.net.cookies.html, but requiring result in the following error: The required namespace "" is not available, it was required by ...

zhuxun216:04:07

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

zhuxun216:04:29

gcookies/get works as expected though...

p-himik16:04:56

goog.net.cookies is deprecated. Instead, use:

(ns x
  (:require [goog.net.Cookies :as Cookies]))

(def cookies (Cookies/getInstance))

👍 1
phill23:04:17

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