Fork me on GitHub
#shadow-cljs
<
2017-10-30
>
thheller08:10:00

@mhuebert https://github.com/mhuebert/shadow-re-frame has no link to the demo? didn’t you have a live demo somewhere?

mhuebert08:10:25

oh, hah. yes!

mhuebert08:10:32

i am actually working on that readme right now

mhuebert08:10:36

will push it soon

thheller08:10:36

thx. I’m working on something kinda related I think

thheller08:10:37

I’m getting very tired of me accidentally printing the CLJS compiler state at the REPL

thheller08:10:08

as its easily several hundred megabytes

thheller08:10:31

looking to build some kind of data explorer for this

thheller08:10:58

seems like the app-state thing from re-frame-trace

thheller08:10:05

not sure how I’ll build it yet since it needs to work for CLJ

thheller08:10:22

can’t see the app? 🙂

mhuebert09:10:20

@thheller is there an error somewhere?

thheller09:10:37

hehe nah its just behind the thing

thheller09:10:45

maybe align left not center?

mhuebert09:10:11

ah that’s a re-frame-trace thing, they drive the whole ui

mhuebert09:10:21

oh but you mean align the content.

mhuebert09:10:17

was that how it opened by default?

mhuebert09:10:32

it’s supposed to open at 35% and then i have the other side proportionally sized

thheller09:10:55

hmm I think its saved. I had it open before and might have moved it

thheller09:10:10

or maybe I had it open with the chrome devtools open

thheller09:10:02

it just showed up like that when I opened it, was confused for a sec

mhuebert09:10:14

in my fork of re-frame-trace I started writing some namespace-aware truncation functions, as I needed a way to recursively print abbreviated Clojure forms https://github.com/mhuebert/re-frame-trace/blob/preview-event-params/src/day8/re_frame/trace/pretty_print_condensed.cljs

mhuebert09:10:17

re: re-frame-panel - yeah that’s weird. i think they are working on alternate ways to view that widget, trying to limit the amount of stuff I put in my re-frame-trace fork

mhuebert09:10:30

so that code (pretty-print-condensed) is not there yet, but may be in the right direction, as it emits a string (not a React component) and focuses on truncation of individual elements of the structure

mhuebert09:10:49

i don’t know if other pretty-printers do that, haven’t looked

mhuebert09:10:10

eg. “print this whole structure but limit length of any individual element to 30 chars”

thheller09:10:52

I think that won’t help in my case

thheller09:10:16

the compiler env is so deeply nested but each item is very tiny

mhuebert09:10:56

is limiting depth sufficient?

thheller09:10:59

I still want to be able to explore everything

thheller09:10:58

depth might not be enough, there might be seqs with 1000+ items too

mhuebert09:10:24

but this is in the terminal?

mhuebert09:10:31

what options for interactivity exist?

thheller09:10:15

might do a web ui, might do a swing ui or just text

mhuebert09:10:31

the re-frame-trace app db explorer utilizes cljs devtools, but i was there as that was coded and it was really awkward because cljs devtools is tightly coupled to jsonml, this format used by chrome devtools

thheller09:10:54

yeah the devtools formatters are basically what I want

thheller09:10:59

just for CLJ as well

mhuebert09:10:06

i plan to continue developing the value-viewer that is used by maria, which you’ve seen earlier

thheller09:10:13

but in the console I can drill down into any value I want

thheller09:10:20

without it blowing up trying to print it all

thheller09:10:34

although it also converts everything to json ml at once

thheller09:10:44

so can’t really do that with too large values either

thheller09:10:01

some kind of protocol is going to be required

thheller11:10:34

just landed support for css reloading in [email protected]

thheller11:10:49

if you are using :devtools :http-root it should just work

mhuebert11:10:06

that’s great.

mhuebert11:10:49

i’m trying to understand exactly how paths work when requiring stuff from npm. eg someting like “@material/menu/util”, given that menu is this dir: https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu

mhuebert11:10:31

there is an index.js, which exports: export {MDCSimpleMenu, MDCSimpleMenuFoundation, util};

mhuebert11:10:37

there is a util.js

thheller11:10:41

@material/menu/util.js

thheller11:10:47

@material/menu

thheller11:10:18

node resolve rules in a nutshell: first check if there is an exact match (with ext), then test with added .js ext

mhuebert11:10:23

with ["@material/menu/util" :refer [getTransformPropertyName]] I am seeing ReferenceError: module$node_modules$$material$menu$util is not defined

thheller11:10:28

if match is a directory look for dir/index.js

mhuebert11:10:37

oh with an ext

thheller11:10:45

nah should work without

thheller11:10:10

uhm there might be an issue when live reloading such code

mhuebert11:10:29

i’ll restart the server/watch

mhuebert11:10:34

refreshing the page hasn’t seemed to work

thheller11:10:55

yeah there might be a cache issue

thheller11:10:08

I need to fix that but not sure how yet

thheller11:10:22

delete the output dir

thheller11:10:29

not the cache dir

thheller11:10:36

well .. either one should work

thheller11:10:01

yeah its probably the cache issue

thheller11:10:14

I’ll fix that next, it re-appeared when I reworked the JS support recently because of this weird fabric.js issue

mhuebert11:10:28

so, this should work:

["@material/menu/simple/foundation" :as MDCSimpleMenuFoundation]
["@material/menu/util" :refer [getTransformPropertyName]]

thheller11:10:17

["@material/menu/simple/foundation" :default MDCSimpleMenuFoundation]

thheller11:10:19

this should

thheller11:10:38

ES6 default exports are special

thheller11:10:12

unfortunately this is not officially supported yet, so beware when adding this to a library

thheller11:10:25

["@material/menu/simple/foundation" :as foundation] then foundation/default

mhuebert11:10:28

ah. i was wondering about that. I saw the discussion in cljs-dev about this :default stuff.

thheller11:10:58

:default only works in shadow-cljs, not sure yet whether it will be adopted in CLJS core

thheller11:10:26

I got tired of writing thing/default very very quickly when testing the ES6 support, thats why I added the :default

thheller11:10:53

its not pretty either way …

thheller11:10:20

note that you do not have to use :default MDCSimpleMenuFoundation :default thing also works since you can chose the name

thheller11:10:54

ES6 default import/export are pretty weird

mhuebert11:10:30

so there can be a :default export and also other exports?

Jon11:10:58

how is CSS in release mode?

thheller11:10:19

@jiyinyiyong not in release mode, only watch.

Jon11:10:58

:thinking_face: well..

thheller11:10:43

its only watch/reload for now .. there is no support for directly bundling css in any way

thheller11:10:35

it watches the :watch-dir (or :http-root) and then replaces <link rel="stylesheet" href="/css/main.css"> tags if /css/main.css changes

thheller11:10:44

nothing else

thheller11:10:54

how the css gets there is up to you

Jon11:10:20

sounds like you are controlling the HTML file?

thheller11:10:53

replaces at runtime via javascript

Jon11:10:55

with js to manipulate <link/>?

thheller11:10:58

html files are never touched

Jon11:10:00

how do you help shadow-cljs learn where's the file located?

thheller11:10:54

if you use the built-in http server it already knows enough

Jon11:10:48

I use http-server package from npm

Jon11:10:18

looks like it's just matching by file name

Jon11:10:24

interesting by I will keep using Webpack in my cases... I have to make sure it's correctly bundled.

Jon11:10:50

although I don't have much handwritten CSS in my current workflow https://github.com/mvc-works/coworkflow/blob/master/entry/main.css

thheller11:10:26

not ideal but you can do :devtools {:watch-dir "target"}

thheller11:10:41

ah no wait … nevermind

thheller11:10:49

webpack doesn’t spit out files while watching

Jon11:10:24

yeah, and I think it's okay..

thheller11:10:49

@jiyinyiyong @mhuebert you both seem to use cljs-devtools. how come? is the console support shadow-cljs adds not enough?

mhuebert11:10:18

@thheller I don’t actually use it, only included it in that example because of re-frame-trace

Jon11:10:11

didn't look into it... just thought I needed it so I need it..

Jon11:10:02

what does shadow-cljs provide?

thheller11:10:52

only the custom devtools formatters so CLJS objects are recognizable in the console

thheller11:10:27

very plain though, not as colorful as cljs-devtools

thheller11:10:46

also cljs-devtools does a whole lot more other stuff

thheller11:10:07

just curious if there is a particular interesting feature I should implement

thheller11:10:19

but just using cljs-devtools is fine too, nothing wrong with that

Jon11:10:36

I see PersistentHashMap and I think it's not formatted... so I used cljs-devtools

Jon11:10:59

but the values do not look like formatted by cljs-devtools

Jon11:10:29

anyways bundling CSS is really huge work, there are style-loader css-loader file-loader url-loader involved just to bundle CSS with fonts...

thheller11:10:18

yeah I’m not touching that anytime soon

Jon11:10:27

actually most of my CSS lives in ClojureScript https://github.com/Cirru/cumulo-editor/blob/master/app/src/app/comp/leaf.cljs#L35 since I don't care about compatibility in my personal stuffs.. I would like to drop Webpack... just I still need to bundle CSS correcly.

thheller11:10:05

I just use sassc directly for work

Jon11:10:39

I choose CSS in js...

thheller11:10:02

well I do that too … but not for everything

Jon11:10:25

CSS in js solution in js world still use Webpack to extract CSS text files.

Jon11:10:43

really powerful these days

Jon11:10:35

offline for home~ bye

mhuebert15:10:10

(replicate via npm install firebaseui and then include sth like ["firebaseui" :as firebase-ui] in a namespace)

mhuebert15:10:31

requiring "firebase/app.js" appears to work, but not "firebase/app", and since firebaseui is the one doing the require, i can’t change that

mhuebert16:10:42

👍:skin-tone-2: for CSS reloading, it’s working great, w/ zero extra config

thheller16:10:54

@mhuebert it works for me?

mhuebert16:10:23

Really. Hmm

thheller16:10:59

"name" "firebase", "version" "3.9.0",

thheller16:10:12

I have 4.6?

mhuebert16:10:35

that may be it

thheller16:10:41

maybe pre4.0 was bundled differently?

mhuebert16:10:58

entirely possible

thheller16:10:10

check if there is a nested node_module/firebaseui/node_modules/firebase install

mhuebert16:10:55

i’ll try first with latest versions of both

thheller16:10:03

I do ignore those currently because I don’t want to run into situations where 2 versions of one package are loaded

mhuebert16:10:22

for browser builds that’s a good idea

thheller16:10:07

yeah but might cause issues like yours

thheller16:10:17

should at least warn or something

mhuebert16:10:32

interesting:

--- externs.shadow.js:3225
Parse error. Character '$' (U+FF04) is not a valid identifier start char
and last line of that file is ShadowJS.prototype.$;

thheller17:10:38

funny that I’m using a isJSIdentifier method from Closure that is supposed to check this 🙂

thheller17:10:55

guess that doesn’t quite work

mhuebert17:10:21

hah one would expect that to work!

thheller17:10:11

yep, returns true.

thheller17:10:24

do you know which file that is from by any chance?

mhuebert17:10:33

I’ve done a plain text search through the whole project and can only find that character in some strings inside JSON objects in iconv-lite

mhuebert17:10:51

but i don’t see how they would end up as a variable name

mhuebert17:10:40

it’s weird