sci 2023-06-20

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 ?

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

I can't repro it myself

it works leaving me even more confused lol

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.

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.

Is the source code public?

> 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

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

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

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

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

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

πŸ‘ 1

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

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 πŸ™‚