Clojurians Log v2

Check out np by Sindre https://github.com/sindresorhus/np

I do things manually. takes 5sec max. setting something up probably takes hours 😉

Anyone know how to replicate the following imports using figwheel-main?

import Highcharts from 'highcharts';
import Heatmap from 'highcharts/modules/heatmap.js';
Heatmap(Highcharts);

I tried

(ns highcharts.demo
  (:require 
    ["highcharts" :as Highcharts]
    ["highcharts/modules/heatmap.js" :as Heatmap]))

I’m getting Highcharts ok, just not the nested heatmap module

I’ve tried with and without the .js suffix

I guess you can't nav to the heatmap from Highcharts - or don't want to without bringing in all the modules? requiring a single module/file from an npm lib is not possible in cljs afaik. maybe shadow can do it? I don't know highcharts, but googling cljs highcharts there seems to be quite a few results, so maybe something there?

yeah, can’t navigate through the Highcharts object sadly

> requiring a single module/file from an npm lib is not possible in cljs afaik do you know if there’s a reference somewhere for the cljs string requires? I’m struggling to find the right google search terms

there's this: https://clojurescript.org/news/2021-04-06-release

... but actually the feature that's described as new is not what you're after. I think it's just sugar for navigating js object

yeah but good shout, maybe if I look back over the release notes

https://github.com/clojure/clojurescript/blob/a4673b880756531ac5690f7b4721ad76c0810327/src/test/cljs_build/npm_deps_test/string_requires.cljs#L3 seems to be able to pick a single module/file out of an npm lib?

I wonder if I’m doing something dumb

oh holup it looks like its working now

did a restart and a refresh etc and used the “highcharts/modules/heatmap” incantation

I am creating a very simple landing page as a ClojureScript Single Page App. I have identified 4 different views, home, reference, tutorials, support, which are fairly separate from each other. There may be a few functions shared between these views, but the overall layout will be different. What is the simplest approach to displaying each view based on a user action, eg clicking on the tutorials button on the home view changes the view to the tutorials view. • do i just hide and unhide the • do i need to include some kind of router like a compojure equivallent (seems a little excessive) I am using reagent, http://bulma.io for CSS and figwheel-main as I am most familiar with these and would prefer to avoid JavaScript and npm (not familiar and its supposed to be a simple site). Thank you for sharing any ideas or examples.

Simplest - indeed the "hide and unhide" approach. And tad less simple but more scalable and useful in general - the router approach. If your app is limited to those four views and it's OK that people can't share links to particular views, then the first approach is reasonable.

I am strugling with http://goog.net.Cookies.prototype.set: https://github.com/google/closure-library/blob/master/closure/goog/net/cookies.js#L167-L229 I have:

(.set goog.net.Cookies.prototype "test" "test" #js{:maxAge   1000
                                                   :path     "/"
                                                   :domain   "localhost"
                                                   :sameSite (.-LAX goog.net.Cookies.SameSite)
                                                   :secure   true})

Don't call prototype functions. Instead, create a concrete object and call a regular method on it. In this case, use <http://goog.net|goog.net>.Cookies.getInstance to get the actual Cookies instance and call the set method on it instead of its prototype.

(.set (.getInstance js/goog.net.Cookies) "test" "test" #js{:maxAge 1000 :path "/" :domain "localhost" :sameSite (.-LAX http://goog.net.Cookies.SameSite) :secure true})

Thank you for the explanation. It works!

Also, don't use js/goog .... Instead, require it properly. E.g. (:require [goog.net.Cookies :as Cookies]) with a consequent (Cookies/getInstance).

This is all related to my problem in the shadow-cljs channel: https://github.com/reagent-project/reagent-utils/issues/19 basically, it works in dev and doesn't work in release. Something is totally off here. I feel like I have learned a great deal in the last day, but this really is a problem I must fix - we need to set the SameSite option. Thank you for your mentoring

I'm trying to make https://clojars.org/tick/versions/0.4.32 work with https://www.npmjs.com/package/react-datepicker but so far I'm unable to convert from tick/joda's LocalDate to a Date that react-datepicker can recognize. Is there a recommended datepicker to use with tick, or can anyone point me to an example of how to convert to javascript native date-fns? @henryw374

I like to keep all my dates in UTC with the location data because of daylight savings time.

because time varies based on location even when in the same longitude... and UTC is coordinated across all locations and time zones

what libraries do you use for managing temporal data and for date-picking UI ?

Datomic is for temporal snapshots of data based on time

I used some jquery date picker libs... but...

if you have time... I'd write my own at some point... to reduce your dependencies

why are you not able to convert between date formats?

I actually wrote a machine learning algo to recognize the hundreds of ways to write dates/times. Fun project.

Formatting If you want to create custom formatters from patterns, such as "dd MMM yyyy", add this require

Looks like tick has a way to custom format but it is not very well documented... this is only in alpha?

hmmm... I used regex to recognize and convert dates to a standard utc format

I always use UTC since a manager told the team to switch over our servers at midnight on Tuesday...

haha

I'll try to add clarity by pasting in the errors I'm getting. One sec.

I found an example...

So I've got a LocalDate object, and I get this error when passing it in to react-datepicker: No protocol method IConversion.inst defined for type object: 2020-01-23

ahhhj

it is missing some methods

the JS object is expected to have some methods available

you need to change how you are passing it in

so I need to find the right set of conversion(s) if I want to use this datepicker UI that relies on native javascript date objects

you need to search the correct way to instantiate an object for that react date picker

so all the methods are there

so you want to convert to/from LocalDate to js/Date, in UTC I think

where is your code that instantiates the react js object?

ReactDate.create( ) ?

the LocalDate object is not compatible with the React object... those are two different classes

you need to use dependency injection

#(tick/date %) where the argument is a string

tick makes use of js-joda ....

I know what you need...

you need to focus on creating the React object... then read the tick string into it...

not pass a foreign tick object to a foreign react object

(-> (t/date)
    (t/midnight)
    (t/in (t/zone "UTC"))
    (t/inst))

inst is not defined on the React object?

"inst"

t is alias for tick.alpa.api ns

what does "inst" do?

Trying to make that code work. I'm currently seeing this error: No protocol method IExtraction.date defined for type null

as in (:require [tick.alpha.api :as t])

t/inst converts an object to a native Date object

ahhh... for native fns

well, that is what the react date picker api expects I guess

yes

so, if user selects a date, and that api gives you a native Date obj, convert it to a LocalDate with :

(-> js-date-obj
    t/instant
    (cljc.java-time.zoned-date-time/of-instant (t/zone "UTC"))
    t/date)

it does seem a bit complicated... I'm thinking this specific thing should be documented as it seems like a normal thing to want to do. longer term.. this will all become easier with the new js date objects . fyi see https://github.com/henryw374/tempo

So I've got a date from a postgres db that I've coerced to LocalDate via #(t/date %) In the DatePicker I'm formatting the value as you said, I think: `(-> start-date (tick/midnight) (tick/in (tick/zone "UTC")) (tick/inst))`

Does the No protocol method IExtraction.date defined for type null error make sense to you?

I found some github comments about that IExtract error

looks like a parsing format error

well that means the thing you're passing in is null I think

yea... what is the output of your clojure tick code?

(-> (t/date)
    (t/midnight)
    (t/in (t/zone "UTC"))
    (t/inst))

what does this output?

a native Date object

is it actually outputting it... though... because of the null?

paste that into your REPL

see what it returns

(t/date) creates a date, but you put your date from postgres instead of that

ahhhh

aha, sorry, I had some old code in a let block that was throwing that error

🙂

so it does appear to be working! Thank you both so much

yea... make sure your % is working

the pg field

@henryw374 good job

hehe cheers