sci

oly 2023-06-20T15:35:55.805239Z

I am trying to embed code in a site using sci, working perfectly until I try to use on-change seems there is something funny about the js object I recieve it gives me this sort of error "Method target on function SyntheticBaseEvent" using this snippet on a a form input "(-> e .-target .-value)", moving it outside sci the snippet works and target exists, should this work or am I hitting some kind of caveat ?

borkdude 2023-06-20T15:40:13.712079Z

Is it possible to make a repro, e.g. in the codemirror here? https://babashka.org/scittle/codemirror.html

borkdude 2023-06-20T15:56:36.812509Z

I can't repro it myself

oly 2023-06-20T16:05:20.404509Z

it works leaving me even more confused lol

oly 2023-06-20T16:08:43.775379Z

well I guess at least I know it can work, just need to figure out what's different in my setup a simple on-click count component works fine, its only accessing the underlying js object that get exposed on-change that does not have the usual properties. all I can think is react version perhaps.

oly 2023-06-21T14:21:41.344189Z

so still looking at this, I am calling (sci/eval-string* sci-ctx (.toString eval-code)) to evaluate my code then placing the result into the dom.

(defn my-component [title starting-value]
  (let [local-state (reagent/atom starting-value)]
    (fn [title]
      [:h1 {:class (when @local-state "hide")
            :on-click (fn [e]
                        (prn (-> e .-target))
                        (swap! local-state inc))}
       (str title " " @local-state)])))

[my-component "Clickable component" 1]
so this is an example block of code, this is sent into eval-string and the result dumped into the current reagent page, I am wondering if the component is not treated as part of the current page when I am doing this. the above works but (-> e .-target) is still not set. I have been building a mini site to help people with clojure which originally used klipse, I have pushed it to a domain now so you can see the behaviour https://clojure-demos.digitaloctave.com/demo/reagent-demo obviously WIP as i had no intention of sharing it just yet, there is an address form at top of the page and one under the component 2 heading, its this second one where I am seeing the issue. be most appreciative if you had any idea / suggestions on where I could look.

borkdude 2023-06-21T14:42:32.097139Z

Is the source code public?

borkdude 2023-06-21T14:42:59.872079Z

> Go {message: 'Method target on function c(f,k,n,r,C){this._react….isPropagationStopped=w;return this} not allowed!', data: n, cause: Go, name: 'Error', description: undefined, …} This indicates that you haven't set {:classes {:allow :all}} in your SCI config

oly 2023-06-21T14:46:42.264169Z

I could make the code public but its on a private git currently, but you are correct I have not got that set, I will give it a try

borkdude 2023-06-21T14:50:33.898789Z

https://github.com/babashka/sci#classes

In JS hosts, to allow interop with anything, use the following config:

{:classes {'js js/globalThis :allow :all}}

oly 2023-06-21T14:51:36.762959Z

genius it works, thank you so much I was just looking that up after you mentioned it πŸ™‚

πŸ‘ 1
borkdude 2023-06-21T14:51:49.471069Z

Also if you need to configure reagent and re-frame, you can use the configs from here: https://github.com/babashka/sci.configs

oly 2023-06-21T14:52:55.509719Z

yeah I think i used that I have reagent datascript and honey sql working on that site currently based on sci.config if i remember correctly πŸ™‚

borkdude 2023-06-21T14:53:10.528399Z

cool :)