Fork me on GitHub
#clojurescript
<
2022-02-27
>
fullNameHere00:02:55

Hey yall, cljs/reagent noob here. I found a template that almost works perfectly. It just that when I try to evaluate this in the repl I get an error. (defn init! [] (r/render [my-home-page] (.getElementById js/document "app"))) ; No such var: r/render I dont really know why. Anyone know whats going on? Everything else works, figwheel starts up with no errors. src.hello-world-react.core repo: https://github.com/SantoHerrera/cljsportfolio I'm on windows btw , idk if that might have anything to do with it.

dawdler01:02:34

You could try to add [reagent.dom :as dom] and then (dom/render ...) instead of r/render, methinks.

fullNameHere01:02:51

It doesn't let me, I get error ; Could not locate reagent/dom_init.class, reagent/dom.clj or reagent/dom.cljc on classpath._

jaide02:02:16

Did you install the dependencies defined in project.clj?

jaide02:02:58

If not you may need to install leiningen and run the install command

jaide02:02:14

Then restart figwheel

fullNameHere02:02:50

I already have Lein, do you mean run lein deps?

fullNameHere02:02:31

Because if you did, that doesn't solve it either :(

jaide03:02:30

That's what I was thinking. That said if it's still not working, I do feel like shadow-cljs is much easier to work with, better documented, and more maintained. Your experience matches mine where it felt random in terms of what features were not working the levers to pull to get them fix

fullNameHere04:02:21

Yeah anything Clojure has been painful almost every step of the way. I have a feeling its because I'm a windows peasant :\. Do you happen to know any shadow-cljs/reagent templates that make it easy to publish on netlify/github pages. Main reason I used this template https://github.com/leovalais/todolist-cljs-reagent

jaide04:02:39

A stock shadow-cljs browser application should just work on netlify without any issues, that was my experience with it. https://shadow-cljs.github.io/docs/UsersGuide.html is the site I made for a friend using shadow-cljs and netlify https://github.com/eccentric-j/benfrankenberg.com. The creator of shadow-cljs seems to have also put together a netlify example https://github.com/thheller/netlify-cljs

jaide04:02:40

It's only using shadow-cljs for is building the js files to serve statically so as long as node and java are available during the build process it should not require much to get it working

fullNameHere04:02:15

Thank you, ill play around with it. just noting that https://confident-goldwasser-1f7161.netlify.app/ doesn't work. I'm guessing the owner probably just took it down as opposed to something not working.

jaide07:02:01

https://replit.com/@eccentric-j/shadow-cljs-demo made this for you real quick to cover the basics

❤️ 1
jaide07:02:44

It uses nbb to build the static html using reagent, which it comes with, and shadow-cljs to bundle the frontend code

jaide07:02:04

You could do the whole app with shadow-cljs, but that means shadow-cljs will build your frontend public js, and a node script you would need to run on deploy to generate the static markup. nbb makes that much simpler imo

popeye06:02:49

What is the difference between event-handling- and effect-handling in reagent ?

valtteri08:02:12

You’re probably referring to re-frame rather than reagent. Re-frame has very good and thorough documentation that explains the concepts. https://day8.github.io/re-frame/a-loop/

valtteri08:02:55

There’s also #re-frame channel

jaide15:02:29

In a nutshell: An event is a vector that contains a type key and additional args. It represents an action in your app. I like to think of them as representing an intention [:fetch-profile user-id] or fact about a system like [:profile-fetched profile-data] an effect describes an implementation detail like perhaps how it starts with fetch-profile, creates a request promise, then emits a profile-fetched once it resolves.

jaide15:02:46

An event handler may synchronously update the app state db, or it may trigger a request effect, or perhaps even both.

popeye07:02:56

Thanks for the reply @U8WFYMFRU, I need to go through code example to know more I guess

neilyio19:02:25

I’m noticing when I :require certain CLJS libraries, then I get warnings/errors that say [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs. When I look at the created inferred_extern.js file, I notice that there are goog.* lines that correspond to the errors. I’ll post the full inferred_externs.js and errors/warnings in the thread below. Does anyone know why this happens? Should goog.* declarations ever be present in inferred_externs.js, or is this a mistake of some kind?

neilyio19:02:42

Full error output:

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:32:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  32| goog.dependencies_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:33:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  33| goog.dependencies_.nameToPath;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:34:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  34| goog.dependencies_.visited;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:35:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  35| goog.dependencies_.written;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:36:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  36| goog.basePath;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:37:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  37| goog.writeScriptTag_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:38:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  38| goog.require;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:39:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  39| goog.require__;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:40:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  40| goog.writeScriptTag__;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:41:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  41| goog.writeScriptTag__.apply;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:42:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  42| goog.isInModuleLoader_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:43:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  43| goog.module;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:44:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  44| goog.module.getInternal_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:45:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  45| goog.isProvided_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager println
WARNING: .compiled/cljs/inferred_externs.js:46:0: WARNING - [JSC_UNDEFINED_EXTERN_VAR_ERROR] name goog is not defined in the externs.
  46| goog.cljsReloadAll_;
      ^^^^

Feb 26, 2022 4:10:09 PM com.google.javascript.jscomp.LoggerErrorManager printSummary
WARNING: 0 error(s), 15 warning(s)

neilyio19:02:56

inferred_externs.js

Object.defaultValue;
Object.onChange;
Object.useState;
Object.memo;
Object.Fragment;
Object.ref;
Object.ref.hasOwnProperty;
Object.ref.current;
Object.useRef;
Object.value;
Object.Component;
Object.Component.call;
Object.Children;
Object.Children.toArray;
Object.useEffect;
Object.render;
Object.out;
Object.out.println;
Object.createElement;
Object.createElement.apply;
Object.error;
Object.error.println;
HTMLDocument.prototype.createElement;
HTMLDocument.prototype.activeElement;
Function.prototype.isArray;
Function.prototype.iterator;
Function.prototype.prototype.clojure$browser$event$IEventType$;
Function.prototype.prototype.clojure$browser$event$IEventType$event_types$arity$1;
Function.prototype.fromCharCode;
Function.prototype.MAX_VALUE;
Function.prototype.UTC;
goog.dependencies_;
goog.dependencies_.nameToPath;
goog.dependencies_.visited;
goog.dependencies_.written;
goog.basePath;
goog.writeScriptTag_;
goog.require;
goog.require__;
goog.writeScriptTag__;
goog.writeScriptTag__.apply;
goog.isInModuleLoader_;
goog.module;
goog.module.getInternal_;
goog.isProvided_;
goog.cljsReloadAll_;
var CLOSURE_IMPORT_SCRIPT;
var process;
process.hrtime;
window.document;
window.requestAnimationFrame;
window.webkitRequestAnimationFrame;
window.mozRequestAnimationFrame;
window.msRequestAnimationFrame;
window.location;
window.location.href;
document.body;
HTMLBodyElement.prototype.appendChild;
var React;
React.Component;
React.Component.prototype.forceUpdate;
React.Component.prototype.cljsIsDirty;
React.Component.prototype.constructor$;
React.Component.prototype.props;
React.Component.prototype.props.argv;
React.Component.prototype.props.children;
var Java;
Java.type;

kingcode21:02:06

Hello! Does anyone know the best way to work around the lack of BigInteger in clojurescript? I have hacked my own conversion utility to/fro js/BigInt but this doesn’t work for more complex work with js/Math.pow etc… Is there a recommended cljsjs/cljs/JS library for this? Thanks…

👀 1
dawdler00:02:07

Not sure if it hits the spot, but maybe this could be of help? https://github.com/quoll/cljs-math

kingcode03:02:32

Unfortunately I don’t see a way to use it with arbitrary size integers/decimals. Now looking at https://github.com/MikeMcl/decimal.js/