This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-09-07
Channels
- # announcements (2)
- # babashka (24)
- # beginners (15)
- # calva (27)
- # clara (3)
- # clj-kondo (6)
- # cljs-dev (2)
- # clojure (83)
- # clojure-dev (35)
- # clojure-europe (82)
- # clojure-germany (2)
- # clojure-greece (1)
- # clojure-nl (5)
- # clojure-spec (52)
- # clojure-uk (14)
- # clojurescript (43)
- # conjure (16)
- # cursive (29)
- # data-science (1)
- # datalog (5)
- # datomic (1)
- # deps-new (8)
- # depstar (4)
- # emacs (6)
- # events (1)
- # fulcro (24)
- # jobs (4)
- # malli (12)
- # off-topic (46)
- # rewrite-clj (14)
- # shadow-cljs (53)
- # spacemacs (8)
- # specter (2)
- # sql (21)
- # tools-deps (62)
- # vrac (1)
- # xtdb (2)
What is the easiest way to take the output of the report and create a pie chart or something visual? So far I only tried to see if I can copy paste from the terminal or from html.
not all of the data is exported in pure data form. you can check the .shadow-cljs/release-snapshots/<build-id>/latest/bundle-info.edn
file, maybe it contains what you need?
any js pros able to guide me on how to do this with cljs only, perhaps? (from the code inside the first example on https://react-select.com/advanced):
const SortableMultiValue = SortableElement(props => {
const onMouseDown = e => {
e.preventDefault();
e.stopPropagation();
};
const innerProps = { onMouseDown };
return <components.MultiValue {...props} innerProps={innerProps} />;
});
<SortableSelect
components={{
MultiValue: SortableMultiValue,
}}
/>
one of the downfalls of working on cljs so long is i've long since forgotten all the javascript arcana!(def SortableMultiValue
(SortableElement
(fn [props]
(let [mouse-down
(fn [e]
...)]
(react/createElement
components/MultiValue
(js/Object.assign
#js {:innerProps
#js {:mouseDown mouse-down}}
props))))))
[:> SortableSelect {:components #js { :MultiValue SortableMultiValue}}]
@robert-stuttaford what have you tried so far? This does not appear to be exceedingly difficult to translate, it's a function getting a lambda and returning a dynamically created element with an injected eventhandler. (I would probably ask the person who wrote the original code to either document why this convolution or to rewrite it though)
I'm assuming those are React props which shouldn't be mutated (or even might be frozen)
@ashnur i have noooo experience translating any js using const
- that's after my time. been cljsing since 2012 😅 it's super occasional that i need something like this.
thank you @thheller! using rum actually, but yeah, this gets me there!
it would have been rad for the react-select folks to support multi-select as a first class feature, but this is the only method they offer. don't care to learn the whole thing's internals, just need the feature in. complexity budget reserved for the domain!
It seems that they lessen again since Hooks came into play. Now there are just tons of those ^^
yeah, i mean the whole es 2015 and onwards flavour of js. the last major js i wrote was raw gclosure in 2011/2012 😂
i appreciate the quick response and help, @thheller, thank you sir o7
react-select is the issue here, i gathered several hundreds of downvotes speaking my mind in its issue pages
it may not do it well, but man, it's such an upgrade to anything we were doing before
but does it really justify adding 90kb to a release build? for a select thingy? feels like a little overkill
but I guess as far as react components are concerned thats still pretty reasonable 😛
I'm not sure that my namespace dev.preload
is being loaded from the :devtools {:preloads [dev.preload]}
slot in my shadow-cljs.edn
. I have (js/console.log "We are preloading.")
right at the top of my dev.preload
namespace and nothing is being printed in the browser. What should I try next?
I can confirm that the following, from my main application namespace, does indeed print "We are preloading"
when the app loads, so I know that dev.preload
is the correct namespace.
(ns app.core
(:require [dev.preload]))
I thought that having :devtools {:preloads [dev.preload]}
in my build config would have the same effect, please let me know if there's an extra step or if there's something that I missed. If it helps, my :source-paths
is just ["src"]
, and the file is src/dev/preload.cljs
.
@neil.hansen.31 you need to be more specific WHERE you put the preloads. it is supposed to be in your build config. can't tell where you have it if you just paste a part, the part looks correct though.
Hey @thheller, thanks for the reply. I can confirm it's in the the build config, as in
:builds
{:app
{:target :npm-module
...
:devtools {:preloads [dev.preload]}}}
you are kinda responsible to loading it yourself since there is no clearly defined way which namespace is loaded first
Got it, thanks for clarifying. I really dug through the shadow-cljs user guide on this one, but sorry if I missed a mention of this anywhere.
I'm (still) working on a CLJS + StorybookJS integration. I'm using the npm-module
target, and having the Storybook process load all the compiled .js files that are prefixed with my stories
namespace.
Storybook asks for a glob path to the .js files that have your "stories" in them, so this was my solution. It feels kind of hacky (and is slow), but it's working right now. I'd love a tip if you have a suggestion!
I think I can also just point it to a single file. Would :node-script
be worth trying?
https://clojureverse.org/t/generating-es-modules-browser-deno/6116 :esm
is the more modern :npm-module
but its probably not an option for storybook
The :esm
target is coming pretty close... But I'm getting these two warnings:
Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.
Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
in Transition (created by CSSTransition)
in CSSTransition (created by app.sidebar.modal_left)
in app.sidebar.modal_left (created by stories.core.sidebar_modal)
in stories.core.sidebar_modal (created by reagent3)
in reagent3 (created by storyFn)
in div (created by storyFn)
in storyFn
in ErrorBoundary