This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-07-13
Channels
- # aleph (15)
- # announcements (4)
- # babashka (36)
- # babashka-sci-dev (1)
- # beginners (15)
- # biff (2)
- # calva (15)
- # cider (3)
- # clj-kondo (8)
- # clojure (149)
- # clojure-europe (14)
- # clojure-norway (13)
- # clojure-switzerland (1)
- # clojure-uk (1)
- # clojurescript (21)
- # community-development (5)
- # cursive (20)
- # data-science (2)
- # datomic (7)
- # duct (5)
- # emacs (19)
- # etaoin (3)
- # events (2)
- # fulcro (11)
- # introduce-yourself (2)
- # jobs (4)
- # jobs-discuss (19)
- # joyride (1)
- # leiningen (11)
- # malli (7)
- # membrane (131)
- # nbb (12)
- # nginx (1)
- # off-topic (33)
- # pathom (8)
- # polylith (28)
- # re-frame (8)
- # sci (7)
- # shadow-cljs (225)
- # spacemacs (10)
- # specter (1)
- # vim (10)
- # xtdb (8)
hi. I currently work with a cljs app that uses re-frame alongside TS/React apps and I was wondering if there’s a way to expose the local app-db to the typescript apps. Perhaps using an event emitter? Has anyone done anything similar?
the TS apps rely heavily on the state of the cljs app. I’m wondering if there’s a way to share that state somehow
That's really vague.
You say "CLJS app" and "TS apps" - are there really multiple separate web apps? If not, what do you mean by an "app"?
How would some JS code use a CLJS structure that is app-db
?
sorry yeah, that’s what I mean. separate repos. The TS apps get compiled to npm packages that are then consumed by the cljs app. Essentially they serve as presentational components that can be used by cljs. The issue is that sometimes we rely heavily on the state and I’m trying to figure out if there’s a way to avoid API to get that same state that already lives in the cljs App in app-db
Even if you pass the value of the app-db ratom into one of those components, they won't be able to use it because you can't really use CLJS data structures from JS without jumping through a lot of hoops. And it's pretty much impossible when those JS components are compiled separately. Just extract what you need from app-db in the CLJS code, convert it into a JS data structure that's suitable for each component, and then pass it. As simple as that.
If, in this situation, JS-React components are being utilized in CLJS, then one could use the same state-management strategies employed with any other NPM React component library.
Basically, wrap your JS-React components in functions and pass state to them as needed via re-frame subscriptions. You can then use these functions in Reagent as components :thumbsup: Converting to JS (i.e. clj->js
) may or may not be necessary depending on the nature of your data.
(ns my-ns
(:require [my-js-react-components :as mjrc]
[reagent.core :as r]
[reagent.dom :as rdom]
[re-frame.core :as rf]))
;; Contrived example
(defn app []
(let [data @(rf/subscribe [::subs/data])]
[:> mjrc/Foo {:data data}]))
(rdom/render [app] (js/document.getElementById "app")