Clojurians Log v2

If someone is interested in how to use the Vega-Lite (https://vega.github.io/vega-lite/) graphics library with Clojurescript I created an exercise about it: https://www.karimarttila.fi/clojure/2021/01/19/world-statistics-exercise.html

I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following: I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following:

import React from 'react';
import BarcodeScannerComponent from "react-webcam-barcode-scanner";

function App() {

  const [ data, setData ] = React.useState('Not Found');

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text)
          else setData('Not Found')
        }}
      />
      <p>{data}</p>
    </>
  )
}

export default App;

@info527: maybe the wrong channel? Otherwise, if you are doing this with reagent or somesuch in ClojureScript, then maybe post a CLJS snippet and the problems you encounter.

Thanks, yea I will post the cljs in a moment

Help! NPM integration issue (details in thread): > No such namespace: @codemirror/state

Note: done npm install and installed ok.

are you trying clojure-mode?

I think you’re running into https://clojure.atlassian.net/browse/CLJS-3293

https://github.com/nextjournal/clojurescript/commit/f48609b862062caae6d19d5d281c4f7b53a39c25 or https://github.com/nextjournal/clojurescript/commit/f2a3950bbc03d12e67a663c3c5a79bd0aae094cd should help

if you’re using bundle you’ll need the first one

try replacing your clojurescript dep with

{:git/url "<https://github.com/nextjournal/clojurescript>"
 :sha "f48609b862062caae6d19d5d281c4f7b53a39c25"}

alternatively you can use https://github.com/nextjournal/clojure-mode-demo/ as a skeleton which works with shadow and unpatched ClojureScript

thank you!

you’re welcome, let me know if it helps

if you have any questions about clojure-mode, feel free to post in #nextjournal

cm demo works, git/sha doesn't for some reason will continue from the demo

what’s the error?

Same No such namespace: @codemirror/state

hmm

@oliver this is how I had converted the above react code to work in shadow-cljs:

(ns app.product.views.qr-scanner
  (:require
   [reagent.core :as r]
   [reagent.dom :as rd]
   ["react-webcam-barcode-scanner" :refer [BarcodeScannerComponent]]))

(defn qr-scanner []
  (let [[data setData] (.useState js/React "Not Found")]
    [:> BarcodeScannerComponent
     {:height 500
      :width 500
      :onUpdate (fn [err result]
                  (if result
                    (setData (.-text result)) (setData "Not Found")))}
     (fn [result]
       (r/as-element [:p result]))]))

@info527 add ["react" :as react] to your ns require and use (react/useState ...) instead of js/React

thankyou, Ill try it now

@thheller thanks for the prompt reply, I am getting the following error now in the console: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

yeah the useState hook you can only use in a function component. not sure how thats done in reagent. docs should have it. might be :f> or so

Hi. I’m playing with clojurescript + reagent for the first time and got a question. I want to have a timer that I can start by clicking on it and re-set on another click. I run the timer that updates my r/atom using setInerval but am not sure how/where to clear interval. I tried adding it conditionally at the end of my anonymous onclick FN but it fails saying fexpr.call is not a function

(defn counter-row [{desc :desc timer :timer active :active bg-color :bg-color}]
      (let [seconds-elapsed (r/atom 0)
            running (r/atom false)
            timer-fn (fn [] (js/setInterval #(swap! seconds-elapsed inc) 1000))]
           (fn []
               [:div {:class (str "h-full flex flex-col flex-1 " bg-color " bg-opacity-75 items-center justify-evenly")
                      :on-click (fn []
                                    #(reset! running (not @running))
                                    (timer-fn))}
                [:p {:class "w-full text-9xl text-center text-gray-50"} desc]
                [:p {:class "w-full text-9xl text-center text-gray-50"} @seconds-elapsed]])))

By reset I mean set seconds-elapsed to 0 and stop counting

If @running then call clearInterval, otherwise call setInterval. Save the result of setInterval in an atom (you can use a regular atom instead of a ratom here) and pass it later to clearInterval. A small thing - consider using reagent.core/with-let instead of a form-2 component. It won't change how it works but will make some things simpler. Also, it will make it much easier to call clearInterval when the component is unmounted (you cannot do it at all with form-2).