Fork me on GitHub
#clojurescript
<
2021-02-12
>
kenny00:02:19

Hi all. I found this behavior odd. re-matches behaves differently in CLJS than in Clojure. Below is Clojure.

(re-matches #"/subscriptions/(.*?)" "/subscriptions/foo")
=> ["/subscriptions/foo" "foo"]
(re-find #"/subscriptions/(.*?)" "/subscriptions/foo")
=> ["/subscriptions/" ""]
ClojureScript:
(re-matches #"/subscriptions/(.*?)" "/subscriptions/foo")
=> nil
(re-find #"/subscriptions/(.*?)" "/subscriptions/foo")
=> ["/subscriptions/" ""]
Removing the ? in the regex makes the regex return the same result as in Clojure. I assume this is simply Java re vs JS re engines?

lread16:02:50

If your goal is cross platform regex then you might consider looking at https://github.com/lambdaisland/regal

alexmiller01:02:02

generally, regexes will not be identical across the two hosts

matt sporleder02:02:09

the ? does nothing in that case because it isn't followed by anything, I think

matt sporleder02:02:33

I think it's a bug?

matt sporleder02:02:56

in javascript:

'/subscriptions/foo'.match(/\/subscriptions\/(.*?)/)
Array [ "/subscriptions/", "" ]

matt sporleder02:02:21

but also js definitely treats non-greedy operators weirdly

matt sporleder02:02:17

@kenny anchor it (`(re-matches #"\/subscriptions\/(.*?)$" "/subscriptions/foo")` ) for sanity I think

coby08:02:33

I have to deal with some deeply nested objects passed to me from a React library. But optimization mangles my keys so that

(.. info -event -_def -extendedProps -deletable)
get compiled as
b.event._def.extendedProps.Ui
The b part is fine but the Ui key does not exist on the extendedProps object - it should be deletable. Is there a way to tell Closure/CLJS not to mangle this line? Or a suggested workaround?

coby08:02:47

I figured out this workaround:

(aget (.. info -event -_def -extendedProps) "deletable")
This works since Closure preserves string literals. I'd still be interested to hear other folks' advice around this, though.

p-himik08:02:45

Don't use aget - it's for arrays. Try prefixing info with ^js:

(.. ^js info -event -_def -extendedProps -deletable)

coby09:02:08

That works! Thanks!

coby09:02:01

Got a link handy where I can read more about what ^js actually does? One of those things that's hard to google 🙂

p-himik09:02:02

The first thheller's link doesn't mention ^js though. The second one does.

thheller09:02:26

^js works just fine in CLJS as well. as will the js/Foo in shadow-cljs. the second post explains why its not the recommended way in shadow-cljs.

raspasov09:02:32

Another alternative is to not use interop calls but use strings/keywords like this: https://github.com/raspasov/alexandria-clj/blob/main/src/ax/cljs/googc.cljs#L5 (get-in-obj info [:event :_def :extendedProps :deletable]) With this option, you don’t need to worry about externs. (but I also like in many cases to use the (.. ) interop)

coby16:02:14

Thanks all, I have some reading to do! :)

coby18:02:28

Never really understood externs before (never really had to) but this made it click.

jerger_at_dda15:02:57

Hi, does anybody know a cljs-lib for reading and writing yaml ?

zendevil16:02:10

I’m using the library

["react-hook-form" :refer [useForm]]
And I’m using useForm like so:
(defn sign-up-form []
  (let [form (useForm)
        ]
    [:div (tw ["w-9/12"])
     [:div (tw [:text-lg :font-bold]) "Sign Up and Pay For Plan"]
     [:input
      (tw style/text-input
          [:border-none :outline-none]
          {:placeholder "Name"})]
     [:input
      (tw style/text-input
          [:border-none :outline-none]
          {:placeholder "Phone Number"})]

     [:input
      (tw style/text-input
          [:border-none :outline-none]
          {:placeholder "Email"})]
     [:input
      (tw style/text-input
          [:border-none :outline-none]
          {:placeholder "Password"
           :type :password})]
     [:input
      (tw style/text-input
          [:border-none :outline-none]
          {:placeholder "Confirm Password"
           :type :password})]
     [:> Elements {:stripe stripe-promise}
      [Checkout-Form]
      ]
     [:button (tw style/button [:bg-green-700 :text-white]) "Sign Up and Pay"]]))
However, the page refuses to load, and I’m getting the following error: Uncaught ReferenceError: $jscomp is not defined at Object.exports.useForm (:3000/js/cljs-runtime/module$node_modules$react_hook_form$dist$index_cjs_development.js:86) at Function.vendo$signup$sign_up_form (:3000/js/cljs-runtime/vendo.signup.js:63) at Function.eval [as cljs$core$IFn$_invoke$arity$2] (:3000/js/cljs-runtime/cljs.core.js:13256) at Function.eval [as cljs$core$IFn$_invoke$arity$2] (:3000/js/cljs-runtime/cljs.core.js:13541) at Object.reagent$impl$component$functional_wrap_render [as functional_wrap_render] (:3000/js/cljs-runtime/reagent.impl.component.js:625) at Object.reagent$impl$component$functional_do_render [as functional_do_render] (:3000/js/cljs-runtime/reagent.impl.component.js:674) at eval (:3000/js/cljs-runtime/reagent.impl.component.js:730) at Object.reagent$ratom$in_context [as in_context] (:3000/js/cljs-runtime/reagent.ratom.js:66) at Object.reagent$ratom$deref_capture [as deref_capture] (:3000/js/cljs-runtime/reagent.ratom.js:83) at Object.reagent$ratom$run_in_reaction [as run_in_reaction] (:3000/js/cljs-runtime/reagent.ratom.js:1508) how to fix this error?

Alex21:02:07

Hey guys I have the following component

(defsc AccountListItem
  "An account list item"
  [this {:account/keys [id name email active? edit] :as props}]
  {:query [:account/id :account/name :account/email :account/active?
           {:account/edit ['*]}]
   :ident :account/id
   :initLocalState (fn [this _] {:editing? false})}
  (let [editing? (prim/get-state this :editing?)]
    (if editing?
      (account-form props)
      (dom/tr
       (dom/td name)
       (dom/td email)
       (dom/td
        (dom/div :.ui.label.green
                 (if active? "Active" "Inactive")))
       (dom/td
        (dom/button {:onClick
                     (fn []
                        (prim/set-state!
                         this
                         {:editing? (not editing?)})
                        (prim/transact! this `[(app.model.account/use-account-as-form {:account-id ~id})]))}
                    "Edit"))))))
I'm trying to get rid of the editing? local state by having a :account/edit state on the root which will change when the edit button is pressed. However, when I try to retrieve the value of :account/edit on my query I get nil.

Alex21:02:35

My Root query looks like the following:

[:main/welcome-message
 #:main{:accounts
        [:component/id
         #:accounts{:accounts
                    [:list/id
                     #:list{:accounts
                            [:account/id
                             :account/name
                             :account/email
                             :account/active?
                             #:account{:edit [*]}]}]}]}]

p-himik21:02:05

That defsc makes it seem like you're using Fulcro. If that's the case, it might be better to ask this in #fulcro

Alex21:02:21

ah sorry I thoguht I was in fulcro channel, sorry about that