Clojurians Log v2

@lilactown I see you've put up a project template that demos using storybook with cljs, do you have any strong reason to use storybook over devcards or https://github.com/nubank/workspaces ? (other than storybook has a nice out-of-the-box ui)

link to your project https://github.com/Lokeh/storybook-cljs

yeah, we’re getting ready to build a design library

workspaces is fine for developers, but it’s not nearly as good of an interface as a catalogue of components that e.g. a designer or PM could use

I can't seem to get fast refresh working, even manually. Even though I call r/refresh! I don't see updates.

@dominicm was this working previously?

Nope :)

this is my first attempt really

I’ve run into this a few times, and the checklist I follow is: 1. have I correctly enabled the feature flag. {:helix/features {:fast-refresh true}} 2. have I injected the hook correctly by calling inject-hook! at some top-level / before app start 3. do I have the correct version of react-refresh for the version of react I have installed in my project

usually it’s one of those three

I did just bump react.

@lilactown just to check, I shouldn't be calling (mount) again right? Only refresh! now?

only refresh! yes

if you upgraded react to latest, make sure you bump react-refresh npm i react-refresh@latest

that’s the most common reason I run into issues with it just silently not refreshing

we only just added react-refresh, so definitely latest.

I also did install too

there should be some logging in refresh! that reports the number of components that were refreshed

does that say it’s refreshing any number of components?

@lilactown Yeah, updatedFamilies is of length 1

so that tells me that (1) and (2) are probably working

wiping target/dev/* just in case.

/** @license React v16.13.1
 * react-dom.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

Hmm, I think it might not be compatible with factory components.

I disabled that and it seems to be working

current: helix$core$cljs_factory_$factory(varargs) vs before when it had my actual component name in

ahhh hmmmm

yeah yeah yeah

@dominicm if you use :define-feature-flag it changes the var name of the component:

(if flag-define-factory?
                   (symbol (str display-name "-render-type"))
                   display-name)

but fast-refresh doesn’t take this into account:

~(when flag-fast-refresh?
            `(when ^boolean goog/DEBUG
               (when ~sig-sym
                 (~sig-sym ~display-name ~(string/join hooks)
                  nil ;; forceReset
                  nil)) ;; getCustomHooks
               (register! ~display-name ~fully-qualified-name)))

@dominicm https://github.com/Lokeh/helix/commit/48ce213177f19e621e8eae81db22e9df7e26b967

per dominic’s feedback, I tried using transients instead of JS arrays for building the rows in the benchmark I linked a few days ago

my simple tests show no difference in perf, which is pretty good!

cljs.user> (simple-benchmark
 []
 (s/build-data 1000)
 10)
[], (s/build-data 1000), 10 runs, 7 msecs

cljs.user> (simple-benchmark
 []
 (s/build-data-array 1000)
 10)
[], (s/build-data-array 1000), 10 runs, 7 msecs

this is after warming up a few times for both

at 10000 rows the JS array does pull ahead by about 10%

cljs.user> (simple-benchmark
 []
 (s/build-data 10000)
 10)
[], (s/build-data 10000), 10 runs, 67 msecs

(simple-benchmark
 []
 (s/build-data-array 10000)
 10)
[], (s/build-data-array 10000), 10 runs, 62 msecs

Nice :) that's good to know.

are you also using shadow-cljs? may I ask what are your usual bundle sizes?

specifically a helix project, but I also use material-ui which is not small

I just did a build report of the benchmark (which is admittedly small) and it looks like this:

| Resource                              |   Optimized |  Total % |          JS |      Source |
|---------------------------------------+-------------+----------+-------------+-------------|
| npm | react-dom                       |    117.7 KB |  45.15 % |    118.4 KB |    120.2 KB |
| jar | cljs/core.cljs                  |    101.9 KB |  39.09 % |      1.2 MB |    334.4 KB |
| jar | cljs_bean/core.cljs             |     13.6 KB |   5.22 % |     75.0 KB |     21.0 KB |
| npm | react                           |      6.3 KB |   2.43 % |      6.4 KB |      7.0 KB |
| jar | helix/dom.cljc                  |      5.6 KB |   2.16 % |      7.7 KB |      1.7 KB |
| npm | scheduler                       |      4.3 KB |   1.66 % |      4.8 KB |      5.4 KB |
|     | demo/main.cljs                  |      4.1 KB |   1.56 % |     13.7 KB |      3.2 KB |
|     | demo/state.cljs                 |      3.1 KB |   1.19 % |     16.1 KB |      2.4 KB |
| jar | cljs_bean/from/cljs/core.cljs   |      1.5 KB |   0.58 % |     11.9 KB |      5.9 KB |
| jar | goog/base.js                    |    500.0 B  |   0.19 % |    139.3 KB |    139.3 KB |
| npm | object-assign                   |    461.0 B  |   0.18 % |    955.0 B  |      2.2 KB |
|     | shadow/js.js                    |    451.0 B  |   0.17 % |      2.5 KB |      2.5 KB |
| jar | helix/core.cljs                 |    319.0 B  |   0.12 % |     10.1 KB |      4.7 KB |
| jar | goog/string/stringbuffer.js     |    308.0 B  |   0.12 % |      2.7 KB |      2.7 KB |
| jar | goog/object/object.js           |    301.0 B  |   0.12 % |     23.0 KB |     23.0 KB |
| jar | helix/hooks.cljc                |    159.0 B  |   0.06 % |     13.8 KB |      7.9 KB |
| jar | goog/string/internal.js         |     40.0 B  |   0.02 % |     12.5 KB |     12.5 KB |