Hello, I have an issue with shadow-cljs

I keep getting this error when I try to watch / compile my dead simple app: Illegal UTF8 string in constant pool in class file jdk/nashorn/internal/runtime/linker/Bootstrap

hmm never seen that one before

seems like a general JVM error. what is your java -version?

openjdk version "13.0.1" 2019-10-15

did you try a different version?

I'm on

openjdk version "13" 2019-09-17
OpenJDK Runtime Environment AdoptOpenJDK (build 13+33)
OpenJDK 64-Bit Server VM AdoptOpenJDK (build 13+33, mixed mode, sharing)

runs without issues, maybe something is bad in your release?

which means?

my java release or my simple app release?

I can try install the openJDK 13.u33 and see if it works

the error is in a internal JDK class, nothing to do with shadow-cljs as far as I can tell

or does running lein or something work?

seems like that would fail as well?

I'm sorry. i'm new to all this.. lein with what command?

just lein repl maybe?

I just downgraded from Java 13.0.1 to Java 11 and it compiles

weird.

maybe there was just something broken in your release

everything from jdk8 upwards should work fine. I usually upgrade when a new release is out and never had issues with v13, but I haven't tried the latest

how would I fix the broken release?

I don't know. there is a jdk-13.0.1+9 release. maybe that fixes it? or just try the regular 13, not 13.0.1?

I actually got here to question about the workflow with emacs and CIDER, would you usually jack-in? or connect to a watch? how would you get auto-complete in the editor ?

I've never seen this error before and a quick google suggests it isn't very common either

I don't use emacs so can't comment on any workflow issues

I'll try or I'll just wait for a new release, I don't really care what JAVA version I'm running as long as it compiles to JS 😛

yeah doesn't matter as far as shadow-cljs is concerned either

now JAVA 11 also doesnt work anymore.. ?!!

I don't know.. changing back to 13 and to 11 makes it work

where is the HTML file? I can't find it anywhere?

How would I connect from the nRepl to the browser? I mean, trying to run this code: (js/console.log "dsad") is not working from nRepl beacuse it says there's no js namespace

Have you picked a CLJS REPL env after connecting to the Clojure REPL?

shadow.user> (shadow/repl :test-dev)
To quit, type: :cljs/quit
[:selected :test-dev]
cljs.user>

I guess not. thank you!

any of you is using hx instead of reagent?

how can you rebuild from repl after adding dependency from npm ?

what do you mean?

"after adding dependency from npm" means you ran npm install the-thing?

yes

after adding a library how would you rebuild from the repl?

@eliraz.kedmi please specfiy what you mean by "rebuild"

do you just want to use the library

or did you already use it and upgraded the version?

if you just want to use it (require '["the-thing" :as x])

I mean, when I'm installing a new library via npm, I want to use it in my files..

yes, but that requires recompile the app, isnt it?

I have no idea what you are doing

please describe your setup

what kind of setup do you have?

build config etc?

are you working on a browser build?

or node?

which REPL do you use?

okay. say I have the app running in dev mode with repl on. and now I'm adding the Material-UI library..

by "app" I'm going to assume that you have a build config with :target :browser?

I can't just require the button from that library now, I need to quit the repl and rebuild it

yes

ok and when you say REPL you did shadow-cljs cljs-repl the-build?

oh okay hmm

I just jack-in with CIDER

ok, that works too

so you do (require '["@material/core" :as x]) or whatever the package for that is nowadays

I'm guessing that you could run a command from the repl that stops the watch and restarts it

no you don't need to staop any watch or anything

well. it doesn't work if I don't restart

well then tell me what it told you after you ran the require I just told you?

an error saying you can't have an undefiend as a react element

it's like it does't know that new package

so you skipped 3 steps ahead already I guess?

did you run the require I told you?

that's the behavior in regular React application

I didn't run in the repl

I put it on the file

like so

`(:require ["@reach/router" :refer [Router]] ["@material-ui/core" :refer [Button]] [hx.hooks :as hooks] [hx.react :as hx :refer [defnc]]))(:require ["@reach/router" :refer [Router]] ["@material-ui/core" :refer [Button]] [hx.hooks :as hooks] [hx.react :as hx :refer [defnc]]))`

the material is the new package for instance..

It didn't work until I quit the repl and reconnected again

ok then try adding ["@material-ui/core" :as x :refer [Button]]

and try (js/console.log "mui" x)

see what that says

it's already working. I just though you need to restart the watch somehow

I guess it's not required?

no, that is not required

got it.

BTW what's the command that builds a single js bundle file?

shadow-cljs release your-build

thank you.

I'm transferring an existing project to clojurescript, I currently do that in a very idiomatic way, how would you recommend to take advantage of the clojurescript power? any good courses you know about?

I'm backing off of attempting to add an option for shadow-cljs to reload the whole dependency tree of a changed ns. You're right it's the wrong way to approach this. We shouldn't hamstring our tools to make React happy. Also it doesn't fix REPL-driven development 😖

Instead I'm going to hack on React to see if I can add a command to refresh the whole app

your react-refresh work triggered me to work on my vdom stuff again. got it into a state where I might start using it for some of the shadow-cljs UI stuff. would be nice to get rid of react completely 🙂

Excited to see more!

Svelte has interested me in what a React-less world might look like...

my stuff is more like 50% svelte 50% react

now also has "hooks" although kinda different. can't come up with a different name though 😛

maybe you fine folks have an opinion on this. I'm trying to decide the best way to define event handlers in my library. the goal is to have events "declarative" in the code that generates the actual event. so instead of creating a function you just create a vector of data.

not [:div {:on-click (fn [e] ...)}] but [:div {:on-click [::some-event! 1 2 3]]

I'm not sure I want all events to go through one big multi-method

so experimenting defining them in the component definition. currently at 2 different approaches

(defc dummy1
  {:init-state {:num 0}
   ::inc!
   (fn [env e]
     (sac/swap-state! env update :num inc))}
  [props {:keys [num] :as state}]
  []

  (<< [:div
       [:button {:on-click [::inc!]} "click me: " num]]))

(defc dummy2
  {:init-state {:num 0}}
  [props {:keys [num] :as state}]
  [::inc!
   (fn [env e]
     (sac/swap-state! env update :num inc))]

  (<< [:div
       [:button {:on-click [::inc!]} "click me: " num]]))

the second vector after [props state] is "magic" for hooks. you can think of it as a special let if that helps

(defc dummy2
  {:init-state {:num 0}}
  [props {:keys [num] :as state}]
  (let [::inc!
        (fn [env e]
          (sac/swap-state! env update :num inc))]

    (<< [:div
         [:button {:on-click [::inc!]} "click me: " num]])))

probably doesn't make much sense to ask this without explaining how all of it works

(defnc my-refreshed-component
  [props]
  (let [[count set-count] (react/useState 0)
        [name set-name] (react/useState "React Refresh")]
    ;; kept it's state!
    ($ react/Fragment
      ($ :div {:style {:background "pink"}}
        ($ :div (b/greet name))
        ($ :div ($ :button {:onClick #(set-count inc)} "+ " count))
        ($ :div ($ :input {:type "text"
                           :value name
                           :onChange #(set-name (.. % -target -value))})))
      ($ :br)
      ($ z/component {:name "child in another file"})
      ($ :br)
      ($ z/memo-component {:name "memoized child in another file"}))))

(defc my-refreshed-component [props]
  [[count set-count] (react/useState 0)
   [name set-name] (react/useState "React Refresh")
   ::inc! #(set-count inc)
   ::set-name! #(set-name (.. % -target -value))]
  (<< [:div {:style {:background "pink"}}
       [:div (b/greet name)]
       [:div [:button {:on-click [::inc!]} "+ " count]]
       [:div [:input {:type "text"
                      :value name
                      :on-change [::set-name!]}]]]
      [:br]
      [z/component {:name "child in another file"}]
      [:br]
      [z/memo-component {:name "memoized child in another file"}]))

basically the first let you pretty much always have anyways becomes "special" with "hook" semantics

but yeah the functions definitely need to go.

maybe I'll just allow both styles .. they aren't mutually exclusive 😛

what’s the upsell for using keywords instead of a bound symbol for events?

can't differentiate between a bound symbol and a function created inline via :on-click (fn [e] ...)

must get rid of function creation inline since they are never identical?

the main reason is that I want declarative events though. easier to translate for server-rendered code if there isn't (fn [e] ...) all over the place

gotcha

I think having a special “let” block is nice for setup that gets run on each render. I keep dancing with the idea of creating my own special let macro for certain purposes

no the point is that it DOESN'T run on each render

that is my main gripe with hooks. all shit runs all the time.

hmm. how does it know when to re-run things?

magic

haha

FWIW, I think on the surface it’s feasible to do enough static analysis at macro-time to determine values (like functions) that could be automatically memoized to maintain identity across renders

no need

that’s my eventual goal with hx

right, I’m dealing with React 🙂 greenfield is another story!

if you have some way of determining when e.g. an effect or render should trigger through some other means, like a signal graph, then you don’t need to call it on every render

yep. the value returned by the "hook" functions can implement a protocol

so basically they can tell the component to invalidate their value

when they do all subsequent hooks that used the binding will also run

(defc dummy3 [props]
  [a (subscribe [:bar])
   b (subscribe [:x a])]

  (<< [:div b]))

re-frame ish style is easy

b only runs again if a changes

if b doesn't change render is skipped because a isn't used in render

b of course can invalidate itself but that won't affect a

I think where the friction starts with that approach is when you want to do something like React’s Concurrent mode. you have to figure out where scheduling all the work occurs.

nope. easy

well, yes that is the hard part but everything is in place for it

if you let every state be mutated and trigger a re-render ad-hoc, then you either need to implement scheduling in the signal graph (not the component tree like React has), or you risk having state and what’s rendered diverge in degenerate cases

(defc dummy4 [{:keys [id] :as props}]
  [{:keys [text]}
   (-> (js/fetch (str "/some/" id))
       (.then #(.json %))
       (.then js->clj))]

  [:div text])

I have scheduling in the signal graph

actually it is all a whole lot simpler than React overall since I can do magic like this

the code the macro generates wouldn't be feasible to write in react

so the model they came up with only looks like that because it is something people can actually write

although I'm not too convinced about that given the manual [all, the, deps] args you need to construct

but they are exploring babel plugins and shit like that for that if I read that correctly somewhere

so basically we can skip all that shit because of macros

scheduling is about more than just fetching data (though it helps a ton with that). it also has to do with things that take up a lot of CPU. Concurrent mode allows React to prioritize certain renders higher than others, pause or abort them and restart them later

yes I know

I can do that now

yeah the deps args stuff with hooks is tiresome but something we can just compile away

extremely easy since everything is immutable anyways

componnents add themselves to a dirty "set"

that set is processed in tree-depth order

parent node can "suspend" child updates until all ready (at some point, still pending)

can stop processing at any point since the scheduler controls all work done

I'm familiar with how react works ... there isn't anything in there that this can't do eventually

and I won't have to throw promises to stop processing something

nice yeah, just trying to level set my understanding. this sounds really cool!

i have a working todomvc but need something more complex to test all this on

I’ve been dog-fooding hx on my own REBL clone; sounds like shadow-cljs’ UI is a good use case 😄

yeah just need to figure out how to get all the fulcro bits just without react 😉

the db normalization stuff is not actually something I want to write 😛

is there a way to make shadow-cljs export everything in my code that isn't marked as 'private'?

adding the ^:export metadata to everything seems a bit tedious or possibly brittle

why do you want to export everything?

i'm using clojurescript to share schema code between the backend and frontend

so i'm consuming this from regular javascript

and basically every schema definition in a namespace should be available to the javascript consumer

what is a schema definition?

to answer your question: no there is no way to make it export everything currently but that doesn't mean the couldn't be 😉

problem with exporting everything is that it prevents DCE

https://github.com/plumatic/schema

but not the renaming of stuff

a single schema definition is just a var

but how is that used from JS?

we end up with a namespace that has a bunch of 'schemas' like User, Email, BookingRecord...

and then from js we take json blobs and coerce/validate them against a given schema

so in js its 'import * as schema from 'schema.general' followed by 'coerce(jsonBlob, schema.BookingRecord);'

(what acronym is DCE btw heh)

well you could do it in a build-hook but since none of the api for that is documented it wouldn't be too easy I guess 😛

dead code elimination

aha

yeah we want to prevent that entirely

since this is like a utility library most of it will look 'dead'

yeah

well i suppose i can add export tag to everything...

simplest way might be a macro that just adds the export

so instead of (def ^:export foo {...}) (defexported foo {...}

but that isn't exactly better

we've been using this for awhile, we were just using the 'compile' target instead of the 'release' target. i was trying to bring our bundle size down by switching to release and that breaks everything heh

well we actually wrote an internal macro for building most of these schemas

you can always use :optimizations :simple

so thats not a bad option actually

that'll still be alot smaller than compile and doesn't need ^:export

ok let me try that

but I'd say just export stuff. can't be that many things 😛

heh

@thheller i regularly have small isolated/contained front-end projects pop up, and very much enjoy experimenting with alternatives when youre looking for external feedback (`hx` is another im excited to play with @lilactown). events as vectors seems like it could lead to some interesting datalog compatibility… i appreciated a lot of the ideas in factui, but thats unmaintained last i checked

I'll let you know as soon as I'm comfortable with the code. there are still some cases I want to figure out first

i know exactly what you mean—enjoy the process

40.9 KB todomvc build looks promising 🙂 no more chunky react-dom nonsense 😛

hallelujah.

going through some of the advanced optimized code to find obvious code issues makes the appreciate the closure compiler so much more

always insane to see what kind of optimizations it does 🙂

i havent dug into the advanced output itself enough to build an intuition of what it really does, but the artifact size difference alone is enough to instill a deep sense of appreciation for whatever its up to down there

I have a (deftype ComponentConfig [component-name ...]) so it is constructed as (def x (ComponentConfig. "some.ns/foo-bar" ...))

that name however is only used in debugging code which is all removed

so closure strips the entire property from the generated object

😂

no trace left in release builds