Fork me on GitHub
#reagent
<
2018-03-06
>
wqhhust00:03:26

How to use https://github.com/PrismJS/prism with reagent? prism looks great.

justinlee00:03:00

@wqhhust you mean how would you use the prism library as a component in a reagent webpage?

wqhhust00:03:03

yes, in vue, it's simple as

wqhhust00:03:18

<template slot='action_plan' slot-scope='data'>
          <prism language="sql" :plugins="['toolbar','copy-to-clipboard']" :code="data.value">
          </prism>
        </template>

justinlee01:03:49

i actually do not know vue, but i am assuming that is some kind of jsx like syntax?

exit221:03:06

do you guys generally store something in a top most atom, then have the children of the parent handle mutations?

exit221:03:11

(for something rather simple)

justinlee21:03:41

there are many approaches. if the project is simple, you can do it that way. note that components re-render whenever any part of an atom they reference changes, so you may find it a good practice to create cursors to the specific portion of the top-level atom. i find it helpful to keep all state mutators in a separate file and ensure that they are synchronous rather than mutating the state atom directly.

justinlee21:03:21

You can also keep truly local state locally instead of in the top-level atom. Once you start sharing it between components, it is probably better to put it in a central place.

exit221:03:21

@lee.justin.m my example is more like a single api call to get some data, and the various components in the app will use that same info (potentially)

exit221:03:40

api is called on initial load

justinlee21:03:18

what causes subsequent mutations?

exit221:03:52

actually now that I think about it, I don’t forsee any mutations on that

justinlee21:03:24

then you almost don’t need an SPA. it may be easier to just serve static html

exit221:03:36

but I’ll need the data at any given time

exit221:03:51

and I may have a second call where I might mutate that data before I send it back to the server

justinlee21:03:23

this is all a bit abstract. if you have very simple dataflow, it almost doesn’t matter how your structure. the key thing that reagent does for you is implement an observer pattern where components re-render when any part of a ratom they have dereferenced during their render function changes

justinlee21:03:27

if you are just loading data and then displaying it, you could just ship html from the server, which may be faster because the js overhead goes away. or you can use reagent and just stick it into a big ratom and render html client side