Fork me on GitHub
#shadow-cljs
<
2018-05-26
>
justinlee01:05:26

start importing some npm modules

mhuebert14:05:40

one small difference b/w cljs and shadow loader is that the cljs version accepts a keyword as module name

mhuebert14:05:20

I half expected to be able to resolve a symbol asynchronously and have the appropriate module loaded automatically; I guess this would require including a whole namespace->module index

mhuebert14:05:43

I’m finding that the built-in resolve macro is not exactly the thing I would want/expect for module loading; there’s no need to include the var’s metadata, and it shouldn’t be necessary to provide the symbol statically at compile time. I am looking at using a function like this instead:

(defn resolve-to-value [sym]
  (->> (.split (str sym) #"[./]")
       (map munge)
       (to-array)
       (apply gobj/getValueByKeys js/window)))
then I can pass symbols around as values instead of having to wrap them in the resolve macro,
(def handlers {:home 'my-app.views.pages/home})
...
(resolve-to-value (:home handlers))
Otherwise, I had to use something like a case statement
(defn handler-var [k]
  (case k
    :home (resolve 'my-app.views.pages/home))

thheller15:05:04

@mhuebert that doesn't work in :advanced

thheller15:05:58

I thought about adding async-require or something similar that would automatically do the shadow.loader business.

(async-require
  [[some.ns :refer (foo)]
   [some.thing :as x]]
  (x/bar)
  (foo))

thheller15:05:47

could take some :require-ish forms and the body would execute when all required modules are ready

thheller15:05:04

could even return a promise that would resolve to the final return value of that body

thheller15:05:13

but that would require some compiler trickery to work properly

thheller15:05:36

also wouldn't allow what you are after since the require forms would still be static

mhuebert15:05:50

right. i have reverted to the case form b/c of the :advanced bit.

kwladyka16:05:11

Do you know example repo to show how to use material-ui in shadow-cljs?

kwladyka16:05:18

or something similar

kwladyka16:05:37

I use re-frame

thheller16:05:37

@kwladyka don't know any but (:require ["@material-ui/core/Button" :default Button]) [:> Button {:variant "raised" :color "primary"} "Hello World"] might work

thheller16:05:47

import React from 'react';
  import Button from '@material-ui/core/Button';

  const App = () => (
    <Button variant="raised" color="primary">
      Hello World
    </Button>
  );

kwladyka16:05:49

the best I would like to use https://mdbootstrap.com, but this can be too difficult

thheller16:05:55

basically just translated their default example

kwladyka16:05:14

one thing which I notice is after that I have to reload browser manualy

kwladyka16:05:31

So my assumption is after add dependency always reload browser manually

kwladyka16:05:34

thank you for help

kwladyka16:05:52

Do you think using this mdbootstrap is possible / simple in cljs?

thheller16:05:54

yarn add mdbreact (:require ["mdbreact" :as mdb]) [:> mdb/Button ...]

kwladyka16:05:07

no way… It would be too easy…

thheller16:05:40

I have no clue about the reagent/re-frame part since I do not use that

thheller16:05:45

but importing it works simple enough

thheller16:05:53

css probably needs some manual work though

kwladyka16:05:55

I will try anyway 🙂

thheller16:05:34

seems to work fine

thheller16:05:15

honestly though. do not use that package. it is horrible. it does work but it is horrible.

kwladyka16:05:42

heh lol, I didn’t use it. I found it in last week. It just looks beautiful 🙂

kwladyka16:05:00

but after what you said I have to consider it again 🙂

kwladyka16:05:08

I am looking something with ready UI components and idea of material + bootstrap twitter sounds good

thheller16:05:59

mdbreact might work for that

thheller16:05:05

can always optimize later

thheller16:05:16

just test them all 😉

kwladyka16:05:13

I did it form UI sense of art perspective. I didn’t do it from tech perspective yet 🙂