Clojurians Log v2

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?

the HTML file also has the data in EDN format so you could get it from there

that's going to be perfect, thanks

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,
      }}
    />

isn't JSX fun? 😛 you are using reagent I presume?

(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)

why the object assign?

I'm assuming those are React props which shouldn't be mutated (or even might be frozen)

oh, that's the merge because they are spreading the original props, got it

this kind of state management is very fragile 😞

@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!

just replace const with var, if that makes it more readable 😉

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!

yeah the react world likes to go crazy with HoCs 😛

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

old news to you, but shadow is fucking rad 👏

react-select is the issue here, i gathered several hundreds of downvotes speaking my mind in its issue pages

and I can just agree with @thheller 🙂

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 😛

It seems that they lessen again since Hooks came into play. Now there are just tons of those ^^

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]}}}

that is the correct position

ah ..

Sorry just made an edit above

:npm-module does not support preloads

you are kinda responsible to loading it yourself since there is no clearly defined way which namespace is loaded first

ie. the JS loading the code controls that

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.

well technically preloads is supported .. but they are only compiled and not loaded

Is that true for all the npm/node targets?

what are you doing? :npm-module is sort of deprecated and kinda dead

nope only :npm-module

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!

hmm yeah no clue about storybook. either way its going to be hacky 😛

What's the best alternative to :npm-module?

in case of storybook none

since that really wants multiple files

I think I can also just point it to a single file. Would :node-script be worth trying?

unlikely since you are not running in node

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

mostly because storybook probably won't accept the already provided react version

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