shadow-cljs 2018-05-26 | Slack Archive

start importing some npm modules

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

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?