Fork me on GitHub
#clojurescript
<
2022-03-07
>
mico10:03:59

Hello Clojurians I have a hobby single-page app which is built using cljsbuild (advance optimization mode) and everything works fine. Except one thing: the Google search engine. There is no google analytics embedded and I am not sure what is the problem but when google robot goes through my page it doesn't crawl it properly. I have a 'Loading...' message placed instead of content while it's being loaded may be this somehow breaks google bot flow but as a result it doesn't wait until everything is loaded and nothing is cached. I don't want to introduce server-side rendering so I wonder why this may happen and may be some of you experienced the problem.

p-himik10:03:58

Not sure what you mean by "no google analytics embedded" - it sounds like you're trying to use Google Analytics. But in the rest of your post you're talking about SEO. Regarding SEO - it's not CLJS specific at all. Your best bet is to read how Google SEO works when it comes to SPA, there seem to be plenty of materials out there. I'd say it's definitely better than to ask here because SEO is a huge area that changes rapidly, so even if someone here suggests something that manages to fix your issue, that fix can easily be suboptimal or even detrimental in the long run.

p-himik10:03:38

But if I had to guess - your app either takes a long time to load or uses some functionality that Google robot doesn't implement (like, perhaps, service workers).

fadrian17:03:22

I'm getting an error message that I cannot figure out:

./cljs-runtime/cljs.core.js:29368 Uncaught Error: No value supplied for key: 
[{:id :buttons, :header-label "", :row-label-fn :buttons, :width 25}
 {:id :step-id, :header-label "Step Id", :row-label-fn :step-id, :width 50}
 {:id :step-descr, :header-label "Step", :row-label-fn :step-descr, :width 400}]
(I've formatted the error to more easily read the maps.) This would seem to indicate that one of the maps is missing a key value, but I cannot see any mismatched key-value pairs in the maps in the error message. The cljs printer seems to put the commas in the right place. This is in a re-frame app using re-com components. I'm passing this value to the re-com simple-v-table component's :columns attribute. If anyone can see something that looks odd and might explain this error, let me know.

fadrian17:03:33

Never mind. Bad error messages strike again. The issue was in the set of attributes that held the :columns attribute. I fixed that and the error went away.

p-himik18:03:19

> Bad error messages strike again. How would you improve this particular message?

Richard Bowen20:03:38

Is useRef used much in cljs or is there an equivalent approach? Like r/atom is to setVariableName for mutations.

lilactown20:03:11

in reagent apps, not as much since hooks are harder to use and there are other ways of handling it. in more pure React wrappers (e.g. #helix) it's used the same way that they are in React JS code

lilactown20:03:57

helix provides a convenient wrapper around objects returned by helix.hooks/use-ref that gives the object an atom-like interface

Richard Bowen20:03:32

I'm using Reagent.

Richard Bowen20:03:58

What are the other ways?

isak21:03:16

In our reagent/re-frame code base, we just use this:

(deftype ReactRef [^:volatile-mutable x]
  IDeref (-deref [_] x)
  IFn (-invoke [_ a] (set! x a)))

(defn react-ref
  "Similar to clojure.lang.atom, except invoking it with one argument
  sets the stored value to that value.

  Typically used like this:

  (defn my-view []
    (let [span-ref (xf/react-ref)]
      (fn []
         [:span
           {:ref span-ref}
           \"Something\"])))

  You can then call @span-ref to access the element."
  ([] (ReactRef. nil))
  ([x] (ReactRef. x)))

lilactown22:03:54

yeah i typically use an atom and a function that swaps it in reagent

walterl21:03:50

Hi. 👋 ClojureScript n00b here. I set up a dummy test app with shadow-cljs. From the running npx shadow-cljs browser-repl I can access the js/document object:

❯ npx shadow-cljs browser-repl
shadow-cljs - config: /home/walter/tmp/cljstest/acme-app/shadow-cljs.edn
shadow-cljs - HTTP server available at 
shadow-cljs - server version: 2.17.7 running at 
shadow-cljs - nREPL server started on port 43783
[:browser-repl] Configuring build.
[:browser-repl] Compiling ...
[:browser-repl] Build completed. (127 files, 0 compiled, 0 warnings, 2.77s)
cljs.user=> (.getElementById js/document "app")
#object[HTMLDivElement [object HTMLDivElement]]
But connecting to that REPL from Conjure, I can't.
; localhost:43783 (connected): .shadow-cljs/nrepl.port
; --------------------------------------------------------------------------------
; Assumed session: Nova Scotia Duck Tolling Retriever (Clojure)
; --------------------------------------------------------------------------------
; eval (current-form): (.getElementById js/document "app")
; (err) Syntax error compiling at (src/main/acme/frontend/app.cljs:7:3).
; (err) No such namespace: js
What am I missing to access js/document via Conjure?

walterl21:03:05

The latter is executed from the ns, which requires nothing. Maybe that's the/an issue?

p-himik21:03:59

>

No such namespace: js
Looks like it's a CLJ REPL and not a CLJS one.

walterl21:03:53

The snippets reflect that both statements are executed from the nREPL running on port 43783, as reflected in .shadow-cljs/nrepl.port. How can it be that it's a CLJ REPL then? 😕

p-himik21:03:23

Because the CLJS REPL in shadow-cljs runs within CLJ REPL: https://shadow-cljs.github.io/docs/UsersGuide.html#_nrepl_usage

walterl22:03:02

Ah, thanks! That's what I was missing

👍 1
Richard Bowen22:03:31

Got this message when trying to override a button's hover styling:

Material-UI: The `MuiButton` component increases the CSS specificity of the `focused` internal state.
You can not override it like this: 
{
  "root": {
    "text-transform": "none"
  },
  "containedPrimary": {
    "background": "linear-gradient(90deg, #268BC9 0%, #00469B 100%)",
    "border": "1px solid #00469B"
  },
  "containedSecondary": {
    "background-color": "#FFC043"
  },
  "focused": {
    "background-color": "transparent"
  }
}

Instead, you need to use the $ruleName syntax:
{
  "root": {
    "&$focused": {
      "background-color": "transparent"
    }
  }
}
How does one use the $ruleName syntax in ClojureScript?
:MuiButton        {:root {:text-transform "none"}

lilactown22:03:47

i'm guessing you're using :> or something similar in reagent, which uses clj->js. you can use a string for a key instead of a keyword, i.e.

{:root {"&$focused" {:background-color "transparent"}}}

p-himik22:03:14

:&$focused can still be used, as a keyword.

Richard Bowen22:03:41

Thanks. That's valid but focused want.

Richard Bowen22:03:02

Trying to set the background-color for Mui-containedSecondary:hover .

Richard Bowen22:03:58

;...
        :MuiButton        {:containedSecondary {:background-color "#FFC043"}}