Fork me on GitHub
#helix
<
2020-05-22
>
Lucy Wang14:05:06

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

lilactown16:05:24

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

lilactown16:05:26

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

Lucy Wang03:05:23

Makes sense. Thx.

dominicm16:05:32

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

lilactown16:05:51

@dominicm was this working previously?

dominicm16:05:16

this is my first attempt really

lilactown16:05:49

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

lilactown16:05:02

usually it’s one of those three

dominicm16:05:34

I did just bump react.

dominicm16:05:11

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

lilactown16:05:24

only refresh! yes

lilactown16:05:41

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

lilactown16:05:57

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

dominicm16:05:44

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

dominicm16:05:48

I also did install too

lilactown16:05:56

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

lilactown16:05:47

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

dominicm16:05:38

@lilactown Yeah, updatedFamilies is of length 1

lilactown16:05:10

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

dominicm17:05:58

wiping target/dev/* just in case.

dominicm17:05:14

/** @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.
 */
Okay, I'm certain I'm good

dominicm17:05:12

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

dominicm17:05:17

I disabled that and it seems to be working

dominicm17:05:47

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

lilactown17:05:31

yeah yeah yeah

lilactown17:05:55

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

lilactown17:05:52

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

lilactown18:05:37

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

👏 4
lilactown18:05:33

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

lilactown18:05:18

this is after warming up a few times for both

lilactown18:05:33

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

lilactown18:05:16

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

dominicm19:05:20

Nice :) that's good to know.

Aron22:05:06

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

Aron22:05:28

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

lilactown23:05:07

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 |

Nolan13:05:09

@lilactown this is really helpful. is this output from shadow? itd make my week to know how to do this...

Nolan13:05:01

(totally aside, very excited about the prospect of using helix. really exciting work.)

Nolan13:05:17

found it! i had not encountered this feature of shadow—changes everything 😂

Nolan13:05:54

🙏 thank you!!! (and thomas)

lilactown15:05:40

sure thing! glad you found the info you needed