Fork me on GitHub
#clojurescript
<
2017-05-11
>
john01:05:13

so I was just trying a lein doo phantom test once on my project and my system almost crashed. Lein hung for a minute, showing ;; Testing with Phantom: and my computer got sluggish.

john01:05:44

Then PhantomJS finally crashed and dumped a bunch of these

;; ======================================================================
;; Testing with Phantom:

1   0x7f71bcc516b7 /usr/lib/x86_64-linux-gnu/libQt5WebKit.so.5(WTFCrash+0x17) [0x7f71bcc516b7]
2   0x7f71bc94e255 /usr/lib/x86_64-linux-gnu/libQt5WebKit.so.5(+0x1892255) [0x7f71bc94e255]
3   0x7f71bc946b8d /usr/lib/x86_64-linux-gnu/
...
31  0x7f71bc95bb22 /usr/lib/x86_64-linux-gnu/libQt5WebKit.so.5(+0x189fb22) [0x7f71bc95bb22]
PhantomJS has crashed. Please read the bug reporting guide at
<http://phantomjs.org/bug-reporting.html> and file a bug report.
And a minute later Ubuntu told me that it couldn't generate an analysis because I didn't have enough memory.

john01:05:14

Had to ctrl-c out of it.

john01:05:03

Using PhantomJS from the repositories, not npm

john01:05:34

Aaaand, now my computer is totally hung lol

john01:05:10

Strangely, Doo/phantom worked fine on a vanilla project

john01:05:37

Oh, maybe phantom has issues with web workers...

qqq03:05:09

this question is only half serious: is it possible to write a data filein such a way that: 1) it loads as valid javascript AND 2) reads as valid clj via slurp

qqq03:05:25

so I want a blah.js that I can use both via slurp and load via the script tag

richiardiandrea03:05:22

@qqq transit is json and can be converted to clj ..Maybe you could give it a shot?

qqq04:05:08

@richiardiandrea : looking into it; thanks!

qqq04:05:05

I have a file, foo.js, which contains a single line

var my_data = "Hello world";
I have included foo.js in html via script, before my cljs dependenceis now, how do I access "my_data" via cljs ? I tried (oget js/document "my_data") but that can't find it my_data is a global rightt? if so, how do I access it via js ?

john05:05:42

@qqq js/my_data

qqq05:05:13

@john: 1) that worked; thanks! 2) why does optimizations:advanced not mungle js/my_data ?

john05:05:12

@qqq not sure, but if you try js/my_data.prop, then prop will get munged.

noonian05:05:15

I think it would if it was a property of an object instead of a top level variable

john05:05:28

But, if it does get munged, you can still access the property using (aget js/my_data "prop")

qqq06:05:32

@noonian @john: got it; thaniks

thheller07:05:10

@qqq top level vars don't get munged, but you should still include externs for my_data as this behavior is not guaranteed

thheller07:05:42

or use (gobj/get js/window "my_data")

kurt-o-sys08:05:15

Hey all, I'm trying to use https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js - I know my problem may look like a cljsrn thing, but to me, it's a cljs thing. I seem to be able to get a FlatList-object, however, not all FlatList-methods seem to be available:

=> (println mylist)
#object[FlatList [object Object]]
Trying to run .scrollToEnd doesn't do anything. Also, checking which properties and methods are available:
=> (println (.getOwnPropertyNames js/Object mylist))
#js [props context refs updater _hasWarnedLegacy _captureRef _getItem _getItemCount _keyExtractor _onViewableItemsChanged _renderItem _reactInternalInstance state _listRef]
Checking the code of FlatList:
$ cat node_modules/react-native/Libraries/Lists/FlatList.js 
/**
...
 * @providesModule FlatList
 * @flow
 */
'use strict';

const MetroListView = require('MetroListView'); // Used as a fallback legacy option
const React = require('React');
const ReactNative = require('ReactNative');
const View = require('View');
const VirtualizedList = require('VirtualizedList');

const invariant = require('fbjs/lib/invariant');

import type {StyleObj} from 'StyleSheetTypes';
import type {ViewabilityConfig, ViewToken} from 'ViewabilityHelper';
import type {Props as VirtualizedListProps} from 'VirtualizedList';

class FlatList<ItemT> extends React.PureComponent<DefaultProps, Props<ItemT>, void> {
  static defaultProps: DefaultProps = defaultProps;
  props: Props<ItemT>;

  ...

  scrollToEnd(params?: ?{animated?: ?boolean}) {
    this._listRef.scrollToEnd(params);
  }

  ...

  scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
    this._listRef.scrollToIndex(params);
  }
 
  ...
}

module.exports = FlatList;

kurt-o-sys08:05:58

How to make the methods of the FlatList-class available in clojurescript?

qqq09:05:05

(with-open [w ( "../resources/public/data.js")]
          (.write w (str "var my_data = "))
          (let [writer (transit/writer w :json)]
            (transit/write writer {:foo 20})))
I wnat to open a file, then write some string to it, then write some clj data (via transwit/json) to it. How can I do that? %The above coede does not work.

pesterhazy09:05:25

@kurt-o-sys, how did you define mylist?

kurt-o-sys09:05:42

well, here comes the part where I had to extract from the 'components state':

(defc PAQBY < 
  {:did-mount (fn[state]
                (let [mylist (-> state
                                   :rum/react-component ;; get react component
                                   .-refs  ;; refs property
                                   (js->clj :keywordize-keys true)  
                                   :ref-list)]  ;;get ref-list ref = the `FlatList`
                  (.scrollToEnd mylist)
                  (js/setTimeout
                   (fn[]
                     (-> state :rum/react-component rum/request-render))
                   2000)
                  state))}
  []
  (view {:flex 1}
        (text {:style {:fontSize    11}}
              (str "last rendered: " (.toISOString (js/Date.))))
        (flatlist {:data all
                   :keyExtractor (fn [item idx] (str "list-item::" idx))
                   :ref :ref-list
                   :renderItem #(list-item %)})
        ))

kurt-o-sys10:05:14

So I extract it from some internals... I have to do something similar as:

class ScrollToExample extends Component {
  componentDidMount() {
    this.list.scrollToEnd();
  }
  ...
  render() {
    return (
      <FlatList
        ...
        ref={(ref) => { this.list = ref; }}
        ...
      />
    );
  }
}

kurt-o-sys10:05:11

so * this.list -> (-> state :rum/react-component .-refs (js->clj :keywordize-keys true) :ref-list) * ref={(ref) => { this.list = ref; }} -> :ref :ref-list

kurt-o-sys10:05:31

Thinking about it again, it seems .scrollToEnd is available. It doesn't throw an error when I invoke it... But it's not executed, or not properly.

kurt-o-sys10:05:46

(replacing .scrollToEnd with an unexisting method does result in an error)

pupeno10:05:11

What's the best exception tracker for ClojureScript?

pupeno11:05:05

@edbond are you happy with it? any particular reason you chose it over the thousands of others out there?

edbond11:05:10

pupeno: I am quite happy, use free plan. No problems, catch javascript errors on development and production.

pupeno11:05:44

On dev? Do you mean, when running the app locally?

edbond11:05:21

Yes, dev sends errors too. 🙂 It has console output in issues, browser/device detection and backtrace.

pupeno11:05:17

Don't you want exceptions to just be raised locally when in dev mode?

edbond11:05:19

does even more than I need. I don't use much stuff

edbond11:05:51

yes, I can skip inclusion of raven.js in dev mode. Maybe I'm too lazy

edbond11:05:01

backtrace can be viewed minified (using sourcemap) or raw (compiled js, with error code highlighted)

edbond11:05:18

sourcemaps gives you error location in cljs file

edbond11:05:24

Sentry aggregates similar errors, you can mark them resolved. I think other exception trackers do the same.

pupeno12:05:02

Yes, that's very common, although implementing it correctly is far from trivial.

riz15:05:08

I'm doing a toy web app with reagent, and would like to connect an atom to a database such that they are kept in sync - when one is modified, the other is updated. Do I need Re-frame for this, or is there a simpler way?

riz15:05:14

Or is this actually database-related as well? Do I need something specific there that will emit an event when the database changes?

riz15:05:12

I guess this is quite a bit more complex than I thought, and I have to do an actual back end for it

john16:05:30

Synchronizing an atom with a database is a non trivial task

john17:05:00

Synchronizing a datascript browser DB with a datomic backend DB would probably be able to provide the strongest concurrency/consistency guarantees. But still, they don't do that out-of-the-box and making them mutually ACID out of the box would still be non-trivial.

samueldev18:05:08

anyone use boot cljs test?

samueldev18:05:16

trying to figure out how to get better error messages when things fail

samueldev18:05:23

woops, wrong paste

ingared18:05:04

I’m using leningen and its fucking my mind. Some changes in the code base are reflected in the browser in less than 5 seconds. But often it stops auto-building and what I can see on my browser is the some old version of the code. I understand that there is a guilty of browser (chrome) as well because as soon as I clear the cache / switch to incongnito mode, it starts picking up the latest code. Kindly educate me if I’m missing anything.

timgilbert18:05:20

@ingared, I've noticed that figwheel can have some slightly squirelly interactions with the browser cache (on Chrome at least) and I will occasionally shift-reload to clear my browser cache in the face or inexplicable errors

timgilbert18:05:09

I've heard of some developers disabling their browser cache altogether for localhost, though for me it's not problematic enough to do that

rauh19:05:39

@ingared I usually run a tail -f figwheel_server.log on the side which can help see what's happening

john19:05:54

So I have this then function for dealing with asynchronous callbacks on my object. I just implemented a chain function for it, ala https://funcool.github.io/promesa/latest/#promise-chaining But for naming, I'm wondering if then-> sounds more idiomatic than chain. Any opinions?

john19:05:28

I'll probally also implement an all sort of function

john19:05:04

Oh, and another complication I could use advice on: then could optionally take an extra error-fn argument. But then chain would no longer be dealing with straight sequence of callbacks. It'd have to deal with single fns sometimes and pairs of success-fn/error-fns sometimes.

john19:05:19

So how would you prefer the user supply those to the chain function? '(success-fn success-fn [success-fn error-fn] success-fn [success-fn error-fn])? Or every item be a vector of either one or two fns? Or something else?

john19:05:44

Also, is naming then "then" a bad idea, with respect to future compatibility, since .then is already pretty common in JS? And if so, is there a better name I could use?

ingared19:05:27

@ruh @timgilbert : Thanks for your response. @timgilbert — It would be a better option to disable the chrome caching.

ustunozgur19:05:34

Try disabling cache when devtools is open.

langmartin21:05:38

ugh, I've been suffering instead of disabling cache... thanks!

ingared21:05:15

This should have been mentioned with leningen documentation.

noisesmith21:05:58

leiningen doesn’t do anything with browsers though - I am almost certain this is mentioned in the figwheel docs

rgdelato21:05:53

(I'm genuinely surprised that Chrome doesn't disable cache when devtools are open by default)

ingared21:05:29

Me too ! Its frustrating to find some things the hard way.

pupeno23:05:53

In the documentation here: https://github.com/sethtrain/raven-clj what is handler/site supposed to be?

ingared23:05:14

React-Empty-Elements : <!-- react-empty: 151 -->

ingared23:05:01

I’m developing a web app using clojurescript using rum. I have defined components to query result from graphql and construct a component using data from the result,

ingared23:05:01

Most of components work fine. Some components will not appear on the screen and they just show “<!-- react-empty: 151 -->” in the Elements .

ingared23:05:46

All my queries show “200 ok ” confirmation in the ntework logs.